/* ==========================================================================
   WSKF Australia - inner.css  (Inner Pages Phase 1: "Dojo Editorial System")

   Loaded on inner pages only, after the approved homepage stylesheets
   (base, header, sections, owner-r1, assistant). It never restyles an
   approved global component except the enquiry card when it sits inside the
   desktop rail (.ip-rail), which is an inner-page context the homepage does
   not have. Every class here is prefixed ip- so nothing can collide with the
   homepage vocabulary.

   Sections:
     1  Page frame, breadcrumbs, section rhythm
     2  Hero family (hub, split, club, principle)
     3  Detail layout and the desktop enquiry rail
     4  Editorial components
     5  Japanese calligraphy moments
     6  Motion (reveal, image reveal, path, calligraphy) + reduced motion
   ========================================================================== */

/* ---------- 1. Page frame ---------------------------------------------- */
:root{
  --ip-top:calc(var(--header-h) + 14px);        /* fixed header + its 14px offset */
  --ip-sec:clamp(3rem,6.2vw,6rem);               /* vertical section rhythm */
  --ip-text:#262626;                             /* long-form body on paper, 14.9:1 */
  --ip-rail-w:340px;
}
.ip-main{ display:block; }
.ip-sec{ position:relative; padding-block:var(--ip-sec); }
.ip-sec--tight{ padding-block:calc(var(--ip-sec) * .7); }
.ip-sec--white{ background:var(--white); }
.ip-sec--paper2{ background:var(--paper-2); }
.ip-sec--ink{ background:var(--ink); color:var(--paper); }
.ip-sec--ink p{ color:var(--on-ink); }
.ip-clip{ overflow-x:clip; }                     /* watermarks and bleeds never widen the page */

.ip-head{ display:grid; gap:.75rem; margin-bottom:clamp(1.6rem,3vw,2.6rem); max-width:760px; }
.ip-head h2{ font-size:var(--t-xl); line-height:1.04; }
.ip-head--light h2{ color:var(--white); }
.ip-head p{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.6; }
.ip-sec--ink .ip-head p{ color:var(--on-ink); }

.ip-prose{ display:grid; gap:1rem; color:var(--ip-text); font-size:clamp(1rem,.97rem + .22vw,1.12rem); line-height:1.68; }
.ip-prose p{ max-width:62ch; }
.ip-prose a{ color:var(--red-deep); text-underline-offset:.18em; }

/* Breadcrumbs: quiet orientation, never a second navigation bar. */
.ip-crumbs{ margin-bottom:clamp(.2rem,1vw,.6rem); font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.ip-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none; }
.ip-crumbs li{ display:inline-flex; align-items:center; min-width:0; }
.ip-crumbs li + li::before{ content:"/"; margin:0 .6rem; color:var(--grey-line); font-weight:500; }
.ip-crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; }
.ip-crumbs a:hover{ color:var(--red); text-decoration:underline; text-underline-offset:.3em; }
.ip-crumbs [aria-current="page"]{ color:var(--ink); overflow-wrap:anywhere; }
.ip-crumbs--light a{ color:var(--on-ink); }
.ip-crumbs--light a:hover{ color:var(--white); }
.ip-crumbs--light [aria-current="page"]{ color:var(--paper); }

/* ---------- 2. Hero family ---------------------------------------------
   Four members, one grammar: breadcrumb, red chapter index, concise H1,
   one short lede, one contextual action. Never a smaller homepage hero. */
.ip-hero{ position:relative; overflow-x:clip; }
.ip-hero h1{ font-size:clamp(2.1rem,5.2vw,4.5rem); line-height:.98; letter-spacing:-.03em; overflow-wrap:break-word; hyphens:auto; }
.ip-hero h1 em{ font-style:normal; color:var(--red); }
.ip-hero__lede{ font-size:clamp(1.04rem,1.45vw,1.24rem); line-height:1.56; max-width:46ch; }
.ip-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem 1.4rem; align-items:center; }
.ip-hero__copy{ display:grid; gap:clamp(.9rem,1.7vw,1.35rem); align-content:start; min-width:0; }
.ip-hero .cap--red{ margin-top:.2rem; }

/* 2a. HUB: dark ground, photograph bleeding to the right edge -------------- */
.ip-hero--hub{ background:var(--ink); color:var(--paper); padding-top:calc(var(--ip-top) + clamp(.6rem,2vw,1.6rem)); }
.ip-hero--hub h1{ color:var(--white); }
.ip-hero--hub h1 em{ display:block; }
.ip-hero--hub .ip-hero__lede{ color:var(--on-ink); }
.ip-hero--hub .ip-hero__in{ position:relative; z-index:2; padding-bottom:clamp(2.2rem,4.5vw,4rem); }
.ip-hero--hub .ip-hero__media{ position:relative; margin-top:1.6rem; aspect-ratio:16/10; overflow:hidden; }
.ip-hero--hub .ip-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
@media (min-width:900px){
  .ip-hero--hub{ min-height:clamp(460px,42vw,600px); display:flex; }
  .ip-hero--hub .ip-hero__in{ width:100%; align-self:stretch; display:grid; grid-template-rows:auto 1fr; }
  .ip-hero--hub .ip-hero__copy{ max-width:min(560px,48%); align-self:center; padding-block:clamp(1rem,2vw,1.8rem); }
  .ip-hero--hub .ip-hero__media{
    position:absolute; z-index:1; margin:0; top:0; right:0; bottom:0; width:50%; aspect-ratio:auto;
  }
  /* The photograph fades into the black on its left edge, so the copy
     column is always on pure black (contrast measured on #000). */
  .ip-hero--hub .ip-hero__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,.08) 55%,rgba(0,0,0,0) 100%);
  }
}

/* 2b. SPLIT (program / age detail): paper, 60/40 copy and portrait -------- */
.ip-hero--split{ background:var(--paper); padding-top:calc(var(--ip-top) + clamp(.4rem,1.6vw,1.2rem)); padding-bottom:clamp(2.2rem,4.5vw,4rem); }
.ip-hero__grid{ display:grid; gap:clamp(1.5rem,3vw,3.4rem); align-items:center; }
@media (min-width:900px){ .ip-hero--split .ip-hero__grid{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); } }
.ip-hero__figure{ position:relative; margin:0; min-width:0; }
.ip-hero__frame{ position:relative; overflow:hidden; border-radius:4px; background:var(--paper-2); aspect-ratio:4/5; width:100%; }
@media (min-width:900px){ .ip-hero--split .ip-hero__frame{ aspect-ratio:auto; height:clamp(380px,calc(100svh - var(--ip-top) - 110px),520px); } }
.ip-hero__frame img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:899px){ .ip-hero--split .ip-hero__frame{ aspect-ratio:1/1; max-height:none; } .ip-hero--split .ip-hero__frame img{ object-position:50% 12%; } }
@media (min-width:600px) and (max-width:899px){ .ip-hero--split .ip-hero__frame{ aspect-ratio:16/10; } }
/* The age tag: a solid red index plate that sits on the photograph edge. */
.ip-tag{
  position:absolute; left:-1px; bottom:clamp(1rem,2.4vw,1.6rem); z-index:2;
  display:grid; gap:.1rem; padding:.7rem 1rem .75rem; background:var(--red); color:var(--white);
  font-family:var(--display); text-transform:uppercase;
}
.ip-tag b{ font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; font-weight:700; letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums; }
.ip-tag span{ font-size:.62rem; font-weight:600; letter-spacing:.18em; }

/* Three facts on one ruled line, never a card row. */
.ip-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:clamp(.4rem,1vw,.8rem) 0 0; border-top:1px solid var(--grey-line); }
.ip-facts > div{ padding:.85rem 1rem .2rem 0; min-width:0; }
.ip-facts dt{ font-family:var(--display); font-weight:600; font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ip-facts dd{ margin:.3rem 0 0; font-family:var(--display); font-weight:700; font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.3; }
.ip-facts dd a{ color:inherit; text-decoration:none; border-bottom:1.5px solid var(--red); }
@media (min-width:600px){ .ip-facts > div + div{ padding-left:1rem; border-left:1px solid rgba(162,161,161,.55); } }
.ip-sec--ink .ip-facts, .ip-hero--club .ip-facts{ border-top-color:rgba(162,161,161,.5); }

/* 2c. CLUB: landscape photograph with an ink club card over its foot ------ */
.ip-hero--club{ background:var(--paper); padding-top:calc(var(--ip-top) + clamp(.4rem,1.6vw,1.2rem)); padding-bottom:clamp(2.2rem,4.5vw,4rem); }
@media (min-width:900px){ .ip-hero--club .ip-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:end; } }
.ip-hero--club .ip-hero__frame{ aspect-ratio:3/2; max-height:none; }
.ip-clubcard{
  position:relative; z-index:2; margin:-2.2rem 0 0 clamp(.8rem,3vw,2rem);
  background:var(--ink); color:var(--paper); border-radius:3px; padding:1.05rem 1.2rem 1.1rem;
  box-shadow:0 18px 40px rgba(0,0,0,.22); display:grid; gap:.55rem;
}
.ip-clubcard dl{ display:grid; gap:.5rem; margin:0; }
.ip-clubcard dl > div{ display:grid; grid-template-columns:5.4rem minmax(0,1fr); gap:.6rem; align-items:baseline; }
.ip-clubcard dt{ font-family:var(--display); font-weight:600; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink); }
.ip-clubcard dd{ margin:0; font-family:var(--display); font-weight:600; font-size:.92rem; line-height:1.35; color:var(--white); overflow-wrap:anywhere; }
.ip-clubcard a{ color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.ip-clubcard a:hover{ border-bottom-color:var(--red); }
@media (max-width:420px){ .ip-clubcard{ margin-left:.6rem; margin-right:.6rem; } .ip-clubcard dl > div{ grid-template-columns:1fr; gap:.1rem; } }

/* 2d. PRINCIPLE: one word at monument scale, calligraphy at the edge ------ */
.ip-hero--principle{ background:var(--paper); padding-top:calc(var(--ip-top) + clamp(.4rem,1.6vw,1.2rem)); }
.ip-hero--principle .ip-hero__in{ position:relative; z-index:2; padding-bottom:clamp(2rem,4vw,3.4rem); }
.ip-hero--principle h1{ font-size:clamp(2.6rem,11vw,9.4rem); line-height:.86; letter-spacing:-.045em; margin-top:.35rem; }
.ip-hero--principle .ip-hero__lede{ max-width:40ch; font-size:clamp(1.08rem,1.7vw,1.36rem); color:var(--ip-text); }
.ip-hero--principle .ip-hero__copy{ max-width:980px; }
.ip-band{ position:relative; margin:0; overflow:hidden; background:var(--ink); }
.ip-band__img{ height:clamp(240px,40vw,560px); overflow:hidden; }
.ip-band__img img{ width:100%; height:115%; object-fit:cover; object-position:50% 45%; will-change:transform; }
.ip-band figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem 0 1rem; background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0)); color:rgba(255,255,255,.88); font-size:.8rem; line-height:1.4; }
@media (max-width:599px){ .ip-band figcaption{ position:static; background:var(--ink); color:var(--on-ink); padding:.7rem 0; } }

/* ---------- 3. Detail layout + desktop enquiry rail --------------------
   The rail is DOM-placed after the first section, so on phones and tablets
   the same enquiry module appears inline after the introduction. From
   1100px it is lifted into a second column spanning every row, and the card
   inside it is sticky, so it can never overlay content and it stops at the
   end of its own grid, before the footer. No second enquiry system. */
.ip-detail{ position:relative; }
.ip-detail > .ip-sec{ min-width:0; }
.ip-rail{ padding-block:clamp(.5rem,2vw,1.4rem) clamp(2rem,4vw,3rem); scroll-margin-top:calc(var(--ip-top) + 12px); }
.ip-rail__note{ margin-top:.9rem; font-size:.86rem; color:var(--muted); max-width:none; }
.ip-rail__note a{ color:var(--red); font-weight:600; }

@media (min-width:1100px){
  .ip-detail{
    display:grid; grid-template-columns:minmax(0,1fr) var(--ip-rail-w);
    column-gap:clamp(2.6rem,4.4vw,4.8rem); row-gap:0; align-items:start;
    width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--gutter);
  }
  .ip-detail > .ip-sec{ grid-column:1; }
  .ip-detail > .ip-sec > .c-page{ padding-inline:0; max-width:none; }
  .ip-detail > .ip-rail{ grid-column:2; grid-row:1 / span 40; align-self:stretch; padding:var(--ip-sec) 0 var(--ip-sec); }
  .ip-rail__stick{ position:sticky; top:calc(var(--ip-top) + 18px); }
  .ip-rail .c-wide{ padding:0; max-width:none; }
  /* The card may not be taller than the viewport it is pinned in. Step 2 has
     more fields, so the card body scrolls inside itself instead of hiding
     below the fold. */
  .ip-rail .enq__card{ max-height:calc(100svh - var(--ip-top) - 36px - var(--ip-rail-reserve,0px)); display:flex; flex-direction:column; box-shadow:0 14px 34px rgba(0,0,0,.16); }
  .ip-rail .enq__body{ overflow-y:auto; overscroll-behavior:contain; padding:1rem 1rem 1.05rem; scrollbar-width:thin; }
  .ip-rail .enq__head{ flex:none; padding:.85rem 1rem; gap:.45rem; }
  .ip-rail .enq__head h2{ font-size:1.12rem; line-height:1.15; }
  .ip-rail .steps{ margin-left:0; }
  /* The approved console stacks exactly as it does below 960px on the homepage. */
  .ip-rail .console{ display:flex; flex-direction:column; }
  .ip-rail .console__cell--age{ order:1; }
  .ip-rail .agepanel{ order:2; grid-template-columns:none; display:grid; justify-items:start; }
  .ip-rail .agepanel[hidden]{ display:none !important; }
  .ip-rail .console__cell:nth-child(2){ order:3; }
  .ip-rail .console__cell:nth-child(3){ order:4; }
  .ip-rail .console__cell--go{ order:5; padding-top:.8rem; }
  .ip-rail .agepanel .choices{ display:flex; flex-wrap:wrap; gap:.4rem; }
  .ip-rail .agepanel .choice span{ width:auto; padding-inline:.8rem; }
  .ip-rail .agepanel__done{ justify-self:start; }
  .ip-rail .frow--2{ grid-template-columns:minmax(0,1fr); }
  .ip-rail .enq__foot{ margin-top:.9rem; }
  .ip-rail .enq__note{ font-size:.76rem; }
  .ip-rail #foot-step-2{ gap:.7rem; }
  .ip-rail #foot-step-2 .enq__note{ flex-basis:100%; order:-1; }
}
.ip-enq__ctx{ display:flex; flex-wrap:nowrap; align-items:baseline; gap:.45rem; margin-top:.35rem; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); }
.ip-enq__ctx::before{ content:""; width:8px; height:8px; background:var(--red); flex:none; transform:translateY(-1px); }

/* Inline enquiry section (hub and editorial pages): the approved card at
   page width, with the section rhythm of the page it sits on. */
.ip-enquiry{ padding-block:var(--ip-sec); background:var(--paper-2); }
.ip-enquiry .enq__card{ box-shadow:0 18px 44px rgba(0,0,0,.14); }

/* ---------- 4. Editorial components ------------------------------------ */

/* 4a. Progression (Ages hub, Little Tigers path): one line, several stations */
.ip-prog{ position:relative; }
.ip-prog__list{ position:relative; z-index:2; display:grid; margin:0; padding:0; list-style:none; }
.ip-prog__item{ position:relative; min-width:0; }
.ip-prog__link{ display:grid; gap:.45rem; text-decoration:none; color:inherit; padding:1.1rem 0 1.25rem 2.1rem; }
.ip-prog__here{ display:grid; gap:.45rem; padding:1.1rem 0 1.25rem 2.1rem; }
.ip-prog__dot{ position:absolute; left:0; top:1.35rem; width:13px; height:13px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); z-index:2; transition:background-color .2s var(--ease),border-color .2s var(--ease); }
.ip-sec--white .ip-prog__dot{ background:var(--white); }
.ip-prog__n{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; }
.ip-prog__name{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.ip-prog__desc{ font-size:.93rem; line-height:1.5; color:var(--muted); max-width:30ch; }
.ip-prog__go{ font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:.35rem; margin-top:.2rem; }
.ip-prog__go .i{ width:.9em; height:.9em; transition:transform .2s var(--ease); }
.ip-prog__badge{ justify-self:start; font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; background:var(--red); color:var(--white); padding:.3rem .5rem; margin-top:.2rem; }
.ip-prog__link:hover .ip-prog__name,.ip-prog__link:focus-visible .ip-prog__name{ color:var(--red); }
.ip-prog__link:hover .ip-prog__go .i{ transform:translateX(3px); }
.ip-prog__link:hover .ip-prog__dot,.ip-prog__link:focus-visible .ip-prog__dot,.ip-prog__item.is-here .ip-prog__dot{ background:var(--red); border-color:var(--red); }
.ip-prog__item + .ip-prog__item{ border-top:1px solid rgba(162,161,161,.45); }
/* the line: vertical on phones and tablets, horizontal from 980px */
.ip-prog__line{ position:absolute; z-index:1; background:var(--grey-line); left:5.5px; top:1.9rem; bottom:1.9rem; width:2px; }
.ip-prog__line i{ position:absolute; inset:0; background:var(--red); transform-origin:0 0; }
@media (min-width:980px){
  .ip-prog__list{ grid-template-columns:repeat(var(--stations,6),minmax(0,1fr)); column-gap:clamp(.8rem,1.6vw,1.6rem); }
  .ip-prog__item + .ip-prog__item{ border-top:0; }
  .ip-prog__link,.ip-prog__here{ padding:2.4rem 0 0; }
  .ip-prog__dot{ top:0; left:0; }
  .ip-prog__line{ left:0; right:0; top:5.5px; bottom:auto; width:auto; height:2px; }
}
/* inside the detail column (1100px+) four stations still fit; below 980 the
   path is vertical like every other progression */
.ip-prog--path{ --stations:4; }

/* 4b. Numbered steps: ruled rows, big index, never cards ------------------ */
.ip-steps{ margin:0; padding:0; list-style:none; border-top:1px solid var(--grey-line); }
.ip-steps > li{ display:grid; grid-template-columns:minmax(3.2rem,auto) minmax(0,1fr); gap:clamp(.9rem,2.4vw,2rem); padding:clamp(1.1rem,2.2vw,1.6rem) 0; border-bottom:1px solid var(--grey-line); }
.ip-steps .idx{ font-size:clamp(1.5rem,2.6vw,2.2rem); color:var(--red); padding-top:.1rem; }
.ip-steps h3{ font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.2; letter-spacing:.01em; margin-bottom:.4rem; }
.ip-steps p{ color:var(--ip-text); font-size:.98rem; line-height:1.62; max-width:58ch; }
.ip-steps p + p{ margin-top:.45rem; }
.ip-steps a{ color:var(--red-deep); }
.ip-sec--ink .ip-steps{ border-top-color:rgba(162,161,161,.4); }
.ip-sec--ink .ip-steps > li{ border-bottom-color:rgba(162,161,161,.4); }
.ip-sec--ink .ip-steps h3{ color:var(--white); }
.ip-sec--ink .ip-steps p{ color:var(--on-ink); }
.ip-steps--wide{ max-width:none; }
@media (min-width:760px){ .ip-steps--two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,3vw,3rem); border-top:0; } .ip-steps--two > li{ border-top:1px solid var(--grey-line); border-bottom:0; } }

/* 4c. Fit list: short checks for "Is this right for us?" ------------------ */
.ip-fit{ display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--grey-line); }
@media (min-width:700px){ .ip-fit{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.4rem,3vw,2.6rem); } }
.ip-fit li{ display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--grey-line); }
.ip-fit .i{ width:1.1rem; height:1.1rem; color:var(--red); margin-top:.25rem; }
.ip-fit b{ display:block; font-family:var(--display); font-size:1rem; letter-spacing:.01em; margin-bottom:.2rem; }
.ip-fit p{ font-size:.95rem; line-height:1.55; color:var(--muted); }

/* 4d. Trio: three grouped columns on a white field ----------------------- */
.ip-trio{ display:grid; background:var(--white); border:1px solid rgba(0,0,0,.08); border-radius:4px; }
@media (min-width:760px){ .ip-trio{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ip-trio > div + div{ border-left:1px solid rgba(162,161,161,.55); } }
@media (max-width:759px){ .ip-trio > div + div{ border-top:1px solid rgba(162,161,161,.55); } }
.ip-trio > div{ padding:clamp(1.15rem,2.2vw,1.7rem); min-width:0; }
.ip-trio h3{ display:flex; align-items:baseline; gap:.6rem; font-size:1.02rem; letter-spacing:.06em; margin-bottom:.85rem; }
.ip-trio h3 .idx{ color:var(--red); font-size:.8rem; letter-spacing:.14em; }
.ip-trio ul{ margin:0; padding:0; list-style:none; display:grid; gap:.5rem; }
.ip-trio li{ font-size:.96rem; line-height:1.45; padding-left:1rem; position:relative; color:var(--ip-text); }
.ip-trio li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1.5px; background:var(--red); }
.ip-trio li a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(228,25,30,.55); text-underline-offset:.2em; }
.ip-trio li a:hover{ color:var(--red); }
.ip-trio__note{ margin-top:1rem; font-size:.84rem; color:var(--muted); }

/* 4e. Feature: photograph + copy ----------------------------------------- */
.ip-feature{ display:grid; gap:clamp(1.4rem,3vw,3.2rem); align-items:center; }
@media (min-width:760px){ .ip-feature{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); } .ip-feature--flip > :first-child{ order:2; } }
.ip-feature__media{ position:relative; margin:0; border-radius:4px; overflow:hidden; background:var(--paper-2); }
.ip-feature__media img{ width:100%; height:100%; object-fit:cover; }
.ip-feature__media--portrait{ aspect-ratio:4/5; max-width:420px; }
.ip-feature__media--land{ aspect-ratio:4/3; }
.ip-feature__cap{ margin-top:.6rem; font-size:.78rem; color:var(--muted); }
.ip-feature__copy{ display:grid; gap:1rem; min-width:0; }
.ip-feature__copy h2{ font-size:var(--t-lg); }

/* 4f. Quote: owner or parent words, exact, attributed -------------------- */
.ip-quote{ margin:0; display:grid; gap:.9rem; padding-left:clamp(1rem,2.4vw,1.8rem); border-left:3px solid var(--red); max-width:760px; }
.ip-quote p{ font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.34; letter-spacing:-.01em; color:var(--ink); max-width:34ch; }
.ip-quote footer{ font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ip-quote footer a{ color:var(--red); }
.ip-sec--ink .ip-quote p{ color:var(--white); }
.ip-sec--ink .ip-quote footer{ color:var(--on-ink); }

/* 4g. Venue directory (club pages) --------------------------------------- */
.ip-venues{ margin:0; padding:0; list-style:none; border-top:1px solid rgba(162,161,161,.4); }
.ip-venue{ display:grid; gap:.8rem 1.6rem; padding:clamp(1.15rem,2.2vw,1.6rem) 0; border-bottom:1px solid rgba(162,161,161,.4); }
@media (min-width:760px){ .ip-venue{ grid-template-columns:3rem minmax(0,1fr) auto; align-items:start; } }
.ip-venue .idx{ color:var(--red); font-size:1.2rem; padding-top:.2rem; }  /* 19.2px bold = large text, 4.45:1 passes */
.ip-venue h3{ color:var(--white); font-size:clamp(1.1rem,1.7vw,1.4rem); letter-spacing:.01em; overflow-wrap:anywhere; }
.ip-venue address{ font-style:normal; color:var(--on-ink); font-size:.95rem; line-height:1.55; margin-top:.35rem; }
.ip-venue__acts{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; }
.ip-venue__acts a{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); text-decoration:none; border-bottom:1px solid transparent; }
.ip-venue__acts a:hover{ color:var(--white); border-bottom-color:var(--red); }
.ip-venue__acts .i{ width:.95em; height:.95em; color:var(--red); }
.ip-venues__note{ margin-top:1.2rem; display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--on-ink); max-width:70ch; }
.ip-venues__note .i{ color:var(--red); margin-top:.25rem; width:1rem; height:1rem; }

/* 4h. Instructor: typographic profile with a dan ladder ------------------ */
.ip-person{ display:grid; gap:clamp(1.3rem,3vw,2.6rem); }
@media (min-width:900px){ .ip-person{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; } }
.ip-person__name{ font-size:var(--t-lg); }
.ip-person__role{ margin-top:.45rem; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.ip-ladder{ margin:0; padding:0; list-style:none; display:grid; gap:0; border-left:2px solid var(--grey-line); }
.ip-ladder li{ position:relative; display:grid; grid-template-columns:4.4rem minmax(0,1fr); gap:.8rem; padding:.55rem 0 .55rem 1.1rem; font-size:.93rem; line-height:1.4; }
.ip-ladder li::before{ content:""; position:absolute; left:-6px; top:.95rem; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); }
.ip-ladder li:last-child::before{ background:var(--red); border-color:var(--red); }
.ip-ladder b{ font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; }
.ip-ladder span{ color:var(--muted); }

/* 4i. Related destinations: ruled rows, arrow, one line each -------------- */
.ip-related{ margin:0; padding:0; list-style:none; border-top:1px solid var(--grey-line); display:grid; }
@media (min-width:760px){ .ip-related{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(1.2rem,2.6vw,2.4rem); border-top:0; } .ip-related > li{ border-top:1px solid var(--grey-line); } }
.ip-related a{ display:grid; gap:.35rem; padding:1.1rem 2.2rem 1.2rem 0; position:relative; text-decoration:none; color:inherit; border-bottom:1px solid var(--grey-line); min-height:44px; height:100%; }
@media (min-width:760px){ .ip-related a{ border-bottom:0; } }
.ip-related .cap{ color:var(--muted); }
.ip-related b{ font-family:var(--display); font-size:clamp(1.05rem,1.5vw,1.25rem); text-transform:uppercase; letter-spacing:.01em; line-height:1.15; }
.ip-related span.ip-related__d{ font-size:.9rem; color:var(--muted); line-height:1.45; }
.ip-related .i{ position:absolute; right:.2rem; top:1.25rem; width:1.1rem; height:1.1rem; color:var(--red); transition:transform .2s var(--ease); }
.ip-related a:hover b{ color:var(--red); }
.ip-related a:hover .i{ transform:translateX(4px); }

/* 4j. Principle index: all eight, the current one marked ----------------- */
.ip-pindex{ margin:0; padding:0; list-style:none; display:grid; border-top:1px solid var(--grey-line); }
@media (min-width:640px){ .ip-pindex{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.2rem,3vw,2.6rem); } }
@media (min-width:1000px){ .ip-pindex{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ip-pindex li{ border-bottom:1px solid var(--grey-line); min-width:0; }
.ip-pindex a,.ip-pindex span.ip-pindex__here{ display:flex; align-items:baseline; gap:.7rem; min-height:52px; padding:.85rem 0; font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
.ip-pindex .idx{ font-size:.72rem; color:var(--muted); letter-spacing:.1em; }
.ip-pindex a:hover{ color:var(--red); }
.ip-pindex__here,.ip-pindex__here .idx{ color:var(--red-text,#C8161A) !important; }
.ip-pindex__group{ margin:1.6rem 0 .5rem; }

/* 4k. Age finder: one question, one answer ------------------------------- */
.ip-finder{ display:grid; gap:1rem; background:var(--ink); color:var(--paper); border-radius:4px; padding:clamp(1.2rem,2.6vw,2rem); }
.ip-finder h3{ color:var(--white); font-size:clamp(1.1rem,1.8vw,1.4rem); }
.ip-finder p{ color:var(--on-ink); font-size:.95rem; }
.ip-finder__row{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:end; }
.ip-finder label{ display:block; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink); margin-bottom:.35rem; }
.ip-finder input{ width:8.5rem; min-height:52px; padding:.6rem .85rem; border:1px solid rgba(255,255,255,.35); border-bottom:2px solid var(--paper); background:var(--ink-2); color:var(--white); font-family:var(--display); font-weight:700; font-size:1.1rem; border-radius:2px; }
.ip-finder input:focus{ outline:3px solid #FF6B70; outline-offset:2px; }
.ip-finder__out{ min-height:3.2rem; display:grid; gap:.35rem; align-content:start; padding-top:.9rem; border-top:1px solid rgba(162,161,161,.4); }
.ip-finder__out b{ font-family:var(--display); font-size:1.15rem; text-transform:uppercase; color:var(--white); letter-spacing:.02em; }
.ip-finder__out a{ color:var(--white); text-decoration:none; border-bottom:1.5px solid var(--red); justify-self:start; font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding-block:.55rem .2rem; }
.ip-finder__out .ip-finder__err{ color:#FF9A9D; font-weight:600; }

/* 4l. Two-column editorial split: statement left, prose right ------------ */
.ip-split{ display:grid; gap:clamp(1.3rem,3vw,3rem); }
@media (min-width:900px){ .ip-split{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; } }
.ip-statement{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.02; letter-spacing:-.02em; }
.ip-statement em{ font-style:normal; color:var(--red); }

/* 4m. Chips linking age groups (club pages) ------------------------------ */
.ip-chiplist{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; list-style:none; }
.ip-chiplist a{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.35rem .9rem; border:1px solid rgba(0,0,0,.22); background:var(--white); border-radius:2px; font-family:var(--display); font-weight:600; font-size:.84rem; text-decoration:none; color:var(--ink); }
.ip-chiplist a b{ color:var(--red); font-variant-numeric:tabular-nums; }
.ip-chiplist a:hover{ border-color:var(--ink); }

/* 4n. FAQ block: approved accordion styling, inner-page frame ------------ */
.ip-faq{ display:grid; gap:clamp(1.3rem,3vw,3rem); }
@media (min-width:980px){ .ip-faq--split{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:start; } }
.ip-faq .faq__list{ min-width:0; }

/* 4o. Closing call to action band ---------------------------------------- */
.ip-cta{ background:var(--ink); color:var(--paper); padding-block:clamp(2.6rem,5vw,4.4rem); position:relative; overflow-x:clip; }
.ip-cta__in{ display:grid; gap:1.2rem; align-items:end; }
@media (min-width:900px){ .ip-cta__in{ grid-template-columns:minmax(0,1.3fr) auto; } }
.ip-cta h2{ color:var(--white); font-size:var(--t-xl); max-width:18ch; }
.ip-cta p{ color:var(--on-ink); margin-top:.6rem; max-width:52ch; }
.ip-cta__acts{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; align-items:center; }
.ip-cta__phone{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-family:var(--display); font-weight:700; letter-spacing:.06em; color:var(--paper); text-decoration:none; }
.ip-cta__phone .i{ color:var(--red); }
.ip-cta__phone:hover{ color:var(--white); }

/* 4p. Small print that owns up to what it does not know ------------------- */
.ip-small{ font-size:.84rem; color:var(--muted); line-height:1.5; max-width:70ch; }

/* ---------- 5. Japanese calligraphy moments ----------------------------
   Grant's own 世界松濤館空手道連盟 artwork only. One moment per page.
   Always aria-hidden, never interactive, never the only carrier of meaning.
   The vertical master is 202px wide, so it is never displayed wider. */
.ip-cal{ position:absolute; z-index:0; pointer-events:none; user-select:none; }
.ip-cal img{ display:block; height:100%; width:auto; max-width:none; }
.ip-sec > .c-page,.ip-sec > .ip-inner{ position:relative; z-index:1; }

/* Edge column: cropped by the section, low opacity. */
.ip-cal--edge{ top:clamp(2rem,4vw,3.6rem); bottom:0; right:max(-40px, calc((100% - var(--w-page)) / 2 - 150px)); width:clamp(64px,7vw,110px); opacity:.075; }
.ip-cal--edge img{ width:100%; height:auto; }
.ip-sec--ink .ip-cal--edge img,.ip-cta .ip-cal--edge img{ filter:invert(1); }
.ip-sec--ink .ip-cal--edge{ opacity:.09; }
/* Phones: the edge column would sit under body text, so it is removed, the
   same decision the approved homepage made for its Journey mark (V2.11.2). */
@media (max-width:599px){ .ip-cal--edge{ display:none; } }
@media (min-width:600px) and (max-width:1099px){ .ip-cal--edge{ width:60px; right:-6px; opacity:.06; } }

/* Hero column (principle pages): full height at the right, masked reveal. */
.ip-cal--hero{ top:calc(var(--ip-top) + .6rem); right:max(var(--gutter), calc((100% - var(--w-page)) / 2 + var(--gutter))); width:clamp(52px,6.6vw,96px); opacity:.16; z-index:1; }
.ip-cal--hero img{ width:100%; height:auto; }
@media (max-width:599px){ .ip-cal--hero{ width:36px; opacity:.08; right:8px; } }

/* Strip: the horizontal artwork as a quiet section transition. */
.ip-cal--strip{ position:relative; display:block; width:min(100%,720px); opacity:.1; margin-bottom:clamp(1.2rem,2.4vw,2rem); }
.ip-cal--strip img{ width:100%; height:auto; max-width:100%; filter:brightness(0); }

/* ---------- 6. Motion ---------------------------------------------------
   Phase 1.1: PROGRESSIVE ENHANCEMENT. Every element is visible by default.
   The only hiding state is .ip-wait, which js/inner.js adds solely to
   elements that start below the fold, after it has set up everything that
   shows them again (IntersectionObserver, scroll sweep, hash, pageshow,
   beforeprint). No JS, a JS error, reduced motion or print: nothing hidden.
   The approved base.css rule ".js .rv{opacity:0}" is neutralised here, so
   the mere presence of JavaScript no longer hides content. */
.js .rv{ opacity:1; transform:none; }
.rv.ip-wait{ opacity:0; transform:translateY(22px); }
.rv.in{ transition:opacity .7s var(--ease),transform .7s var(--ease); }
/* (2) image reveal: a slow uncover plus a tiny settle */
.ip-imgrev img{ transition:clip-path 1.1s var(--ease),transform 1.4s var(--ease); }
.ip-imgrev.ip-wait img{ clip-path:inset(0 0 14% 0); transform:scale(1.045); }
/* (3) progression line draws once */
.ip-prog .ip-prog__line i{ transition:transform 1.3s var(--ease) .15s; }
.ip-prog.ip-wait .ip-prog__line i{ transform:scaleY(0); }
@media (min-width:980px){ .ip-prog.ip-wait .ip-prog__line i{ transform:scaleX(0); } }
/* (4) calligraphy masked reveal, top to bottom like a brush stroke */
.ip-cal--hero img{ transition:clip-path 1.8s cubic-bezier(.45,.05,.2,1) .25s; }
.ip-cal--hero.ip-wait img{ clip-path:inset(0 0 100% 0); }
/* rail flash: the header Enquire button on a rail page points here */
.ip-rail .enq__card{ transition:box-shadow .3s var(--ease),outline-color .3s var(--ease); outline:3px solid transparent; outline-offset:3px; }
.ip-rail .enq__card.is-flash{ outline-color:var(--red); }

@media (prefers-reduced-motion:reduce){
  .rv.ip-wait,.ip-imgrev.ip-wait img,.ip-prog.ip-wait .ip-prog__line i,.ip-cal--hero.ip-wait img{ opacity:1; transform:none; clip-path:none; }
  .rv.in,.ip-imgrev img,.ip-prog .ip-prog__line i,.ip-cal--hero img{ transition:none; }
  .ip-band__img img{ transform:none !important; height:100%; }
}
@media print{ .ip-wait,.ip-wait img,.ip-wait i{ opacity:1 !important; transform:none !important; clip-path:none !important; } }
html:not(.js) .ip-band__img img{ height:100%; }

/* ---------- Print: the page, without the chrome ------------------------ */
@media print{
  .header,.drawer,.wa-launch,.wa-hint,.wa-panel,.ip-rail,.ip-enquiry,.ip-cal{ display:none !important; }
  .ip-hero--hub{ background:none; color:#000; }
}

/* Phones: the trail collapses to its parent, so a long club name never
   stacks four ruled lines above the H1. Full trail from 600px, and always
   in the BreadcrumbList data. */
@media (max-width:599px){
  .ip-crumbs li{ display:none; }
  .ip-crumbs li:nth-last-child(2){ display:inline-flex; }
  .ip-crumbs li:nth-last-child(2)::before{ content:"\2190"; margin:0 .5rem 0 0; color:var(--red); font-weight:700; }
  .ip-crumbs li:only-child{ display:inline-flex; }
}

/* ==========================================================================
   8. WAVE 2: PROGRAM FAMILY SIGNATURES (Juniors, Teens, Adults x3)
   Additive only. Nothing above this line was changed for Wave 2, so the
   approved pilots render exactly as in Phase 1.1. Each age page gets one
   compositional signature on the shared Dojo Editorial grammar.
   ========================================================================== */

/* 8a. Teens: the hub hero, mirrored (photograph left, copy right) -------- */
@media (min-width:900px){
  /* starts under the floating header, so a head at the top of the frame is never covered */
  .ip-hero--mirror .ip-hero__media{ right:auto; left:0; top:var(--ip-top); }
  .ip-hero--mirror .ip-hero__media::after{
    background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,.08) 55%,rgba(0,0,0,0) 100%);
  }
  .ip-hero--mirror .ip-hero__copy{ margin-left:auto; }
  .ip-hero--mirror .ip-crumbs{ justify-self:end; }
}

/* 8b. Juniors: a three-step skill staircase ------------------------------ */
.ip-stairs{ margin:0; padding:0; list-style:none; display:grid; gap:0; counter-reset:none; }
.ip-stairs > li{ position:relative; padding:1.3rem 0 1.4rem; border-top:2px solid var(--ink); min-width:0; }
.ip-stairs > li:last-child{ border-bottom:1px solid var(--grey-line); }
.ip-stairs__n{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:.55rem; }
.ip-stairs__n .idx{ font-size:clamp(2rem,3.4vw,3rem); color:var(--red); }
.ip-stairs__n b{ font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,1.6vw,1.3rem); text-transform:uppercase; letter-spacing:.04em; }
.ip-stairs p{ color:var(--ip-text); font-size:.98rem; line-height:1.6; max-width:40ch; }
.ip-stairs__arrow{ display:none; }
@media (min-width:900px){
  .ip-stairs{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:start; }
  .ip-stairs > li{ padding-top:1.4rem; }
  .ip-stairs > li:last-child{ border-bottom:0; }
  .ip-stairs > li:nth-child(2){ margin-top:clamp(2rem,3.4vw,3rem); }
  .ip-stairs > li:nth-child(3){ margin-top:clamp(4rem,6.8vw,6rem); }
  .ip-stairs > li:nth-child(3){ border-top-color:var(--red); }
  .ip-stairs__arrow{ display:block; position:absolute; right:-.2rem; top:-.62rem; width:1.1rem; height:1.1rem; color:var(--red); background:var(--paper); }
  .ip-sec--white .ip-stairs__arrow{ background:var(--white); }
}

/* 8c. Teens: split editorial band, photograph bleeding to the edge ------ */
.ip-splitband{ display:grid; background:var(--ink); color:var(--paper); }
.ip-splitband__media{ position:relative; margin:0; overflow:hidden; aspect-ratio:4/3; min-width:0; background:var(--ink-2); }
.ip-splitband__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ip-splitband__copy{ display:grid; gap:1rem; align-content:center; padding:clamp(2rem,5vw,4.5rem) var(--gutter); min-width:0; }
.ip-splitband__copy h2{ color:var(--white); font-size:var(--t-xl); }
.ip-splitband__copy p{ color:var(--on-ink); max-width:48ch; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.65; }
.ip-splitband--paper{ background:var(--paper); color:var(--ink); }
.ip-splitband--paper .ip-splitband__copy h2{ color:var(--ink); }
.ip-splitband--paper .ip-splitband__copy p{ color:var(--ip-text); }
@media (min-width:900px){
  .ip-splitband{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:clamp(440px,38vw,560px); }
  .ip-splitband__media{ aspect-ratio:auto; min-height:100%; }
  .ip-splitband--flip .ip-splitband__media{ order:2; }
  .ip-splitband__copy{ padding-inline:clamp(2rem,5vw,5rem); max-width:720px; }
  .ip-splitband--flip .ip-splitband__copy{ justify-self:end; }
}
.ip-triad{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid rgba(162,161,161,.4); }
@media (min-width:760px){ .ip-triad{ grid-template-columns:repeat(3,minmax(0,1fr)); border-top:0; } }
.ip-triad > li{ padding:1.3rem 0; border-bottom:1px solid rgba(162,161,161,.4); min-width:0; }
@media (min-width:760px){ .ip-triad > li{ border-bottom:0; border-top:1px solid rgba(162,161,161,.4); padding-right:clamp(1rem,2.4vw,2.4rem); } }
.ip-triad b{ display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1; color:var(--white); margin-bottom:.7rem; }
.ip-triad p{ color:var(--on-ink); font-size:.96rem; line-height:1.6; }

/* 8d. Adults 20 to 29: a movement / technique sequence ------------------- */
.ip-seq{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(1.2rem,2.4vw,2rem); }
@media (min-width:760px){ .ip-seq{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ip-seq > li{ min-width:0; display:grid; gap:.8rem; align-content:start; }
.ip-seq figure{ margin:0; position:relative; overflow:hidden; border-radius:4px; background:var(--ink-2); aspect-ratio:16/10; }
@media (min-width:760px){ .ip-seq figure{ aspect-ratio:3/4; } .ip-seq > li:nth-child(2){ margin-top:clamp(1.5rem,3vw,2.5rem); } }
.ip-seq figure img{ width:100%; height:100%; object-fit:cover; }
.ip-seq__n{ position:absolute; left:0; top:0; z-index:1; background:var(--ink); color:var(--white); font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.08em; padding:.5rem .7rem; }
.ip-seq h3{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; font-size:clamp(1.05rem,1.5vw,1.25rem); }
.ip-seq h3 span{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; color:var(--muted); }
.ip-seq p{ color:var(--ip-text); font-size:.96rem; line-height:1.6; }

/* 8e. Adults 30 to 49: the two-way decision ------------------------------ */
.ip-choice{ display:grid; gap:clamp(1.2rem,2.4vw,2rem); }
@media (min-width:760px){ .ip-choice{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ip-choice__opt{ display:grid; grid-template-rows:auto 1fr; border-radius:4px; overflow:hidden; background:var(--white); border:1px solid rgba(0,0,0,.1); min-width:0; }
.ip-choice__opt--ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ip-choice__media{ margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.ip-choice__media img{ width:100%; height:100%; object-fit:cover; }
.ip-choice__body{ display:grid; gap:.85rem; align-content:start; padding:clamp(1.15rem,2.4vw,1.8rem); }
.ip-choice__body h3{ font-size:clamp(1.2rem,1.9vw,1.55rem); }
.ip-choice__opt--ink h3{ color:var(--white); }
.ip-choice__body ul{ margin:0 0 .4rem; padding:0; list-style:none; display:grid; gap:.5rem; }
.ip-choice__body li{ position:relative; padding-left:1.1rem; font-size:.96rem; line-height:1.5; color:var(--ip-text); }
.ip-choice__opt--ink li{ color:var(--on-ink); }
.ip-choice__body li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1.5px; background:var(--red); }
.ip-choice__body .btn{ justify-self:start; }

/* 8f. "Who it suits": four short rows with a bold lead -------------------- */
.ip-who{ margin:0; display:grid; border-top:1px solid var(--grey-line); }
@media (min-width:700px){ .ip-who{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.4rem,3vw,2.6rem); } }
.ip-who > div{ padding:1.05rem 0; border-bottom:1px solid var(--grey-line); min-width:0; }
.ip-who dt{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.01em; margin-bottom:.3rem; }
.ip-who dd{ margin:0; font-size:.96rem; line-height:1.55; color:var(--muted); }

/* 8g. Adults 50 to 75+: a calmer premium composition --------------------- */
.ip-hero--calm{ background:var(--paper); padding-top:calc(var(--ip-top) + clamp(.4rem,1.6vw,1.2rem)); padding-bottom:clamp(1.6rem,3vw,2.6rem); }
.ip-hero--calm .ip-hero__copy{ max-width:860px; gap:clamp(1rem,1.8vw,1.5rem); }
.ip-hero--calm h1{ font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:.02em; line-height:1.1; }
.ip-calm__line{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(2.2rem,6.4vw,5.4rem); line-height:.95; letter-spacing:-.035em; margin:0; }
.ip-calm__line em{ font-style:normal; color:var(--red); display:block; }
.ip-calm__figure{ margin:clamp(1.6rem,3vw,2.6rem) 0 0; border-radius:4px; overflow:hidden; background:var(--paper-2); aspect-ratio:16/9; }
@media (min-width:900px){ .ip-calm__figure{ aspect-ratio:21/9; } }
.ip-calm__figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.ip-pillars{ margin:0; padding:0; list-style:none; display:grid; gap:0; }
@media (min-width:860px){ .ip-pillars{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(1.6rem,3.4vw,3.4rem); } }
.ip-pillars > li{ padding:1.4rem 0 1.6rem; border-top:1px solid var(--grey-line); min-width:0; }
.ip-pillars .idx{ display:block; font-weight:400; font-size:clamp(2.4rem,4vw,3.4rem); color:#7A7978; margin-bottom:.9rem; } /* large text, 3.92:1 on paper */
.ip-pillars h3{ font-size:clamp(1.05rem,1.5vw,1.2rem); margin-bottom:.5rem; letter-spacing:.02em; }
.ip-pillars p{ color:var(--ip-text); font-size:1rem; line-height:1.68; max-width:36ch; }
.ip-note{ display:flex; gap:.7rem; align-items:flex-start; padding:1rem 1.1rem; background:var(--white); border-left:3px solid var(--grey-line); font-size:.92rem; line-height:1.55; color:var(--ip-text); max-width:62ch; }
.ip-note .i{ flex:none; width:1.1rem; height:1.1rem; margin-top:.15rem; color:var(--muted); }

/* 8h. Three-station path (Teens) ----------------------------------------- */
.ip-prog--three{ --stations:3; }

/* 8i. Accessibility tokens for the Wave 2 surfaces ------------------------
   The dark split band is a dark surface, so small red text uses the dark
   token (same rule as a11y.css section 0). */
.ip-splitband:not(.ip-splitband--paper){ --red-text:var(--red-text-dark); }

/* ==========================================================================
   9. WAVE 3: PRINCIPLE FAMILY CHAPTERS (seven principle pages)
   Additive only. Nothing above this line was changed for Wave 3, so the
   Respect pilot and every Wave 2 page render exactly as before. Each
   principle is one chapter of the same system: shared hero, chapter line,
   related principles and chapter navigation; one signature each.
   ========================================================================== */

/* 9a. Hero variants ------------------------------------------------------- */
/* Dark principle hero (Honesty and integrity) */
.ip-hero--principle.ip-hero--ink{ background:var(--ink); color:var(--paper); --red-text:var(--red-text-dark); }
.ip-hero--ink h1{ color:var(--white); }
.ip-hero--ink .ip-hero__lede{ color:var(--on-ink); }
.ip-hero--ink .ip-cal--hero img{ filter:invert(1); }
.ip-hero--ink .ip-cal--hero{ opacity:.14; }
@media (max-width:599px){ .ip-hero--ink .ip-cal--hero{ opacity:.08; } }
/* Principle hero with a photograph beside the copy (Awareness of others) */
.ip-phero{ display:grid; gap:clamp(1.4rem,3vw,2.6rem); align-items:end; }
.ip-phero__figure{ margin:0; border-radius:4px; overflow:hidden; background:var(--paper-2); aspect-ratio:4/3; }
.ip-phero__figure img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){
  .ip-phero{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
  .ip-phero .ip-hero__copy{ padding-bottom:.4rem; }
  .ip-phero h1{ font-size:clamp(2.6rem,5.6vw,5.6rem); }
}
/* Chapter line under the H1 */
.ip-chapline{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:0; padding:0; list-style:none; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ip-hero--ink .ip-chapline{ color:var(--on-ink); }
.ip-chapline b{ color:var(--red-text); font-weight:700; }

/* Wave 3 principle heroes (.ip-hero--safe) stay inside the column at any
   text size: the column may not grow to a long word's width, and the word
   breaks (hyphenated where the browser can) only as a last resort.
   Perseverance, and Awareness of others below 900px, get a slightly smaller
   title so the longest word fits at 320px and at 150% text. */
.ip-hero--longword h1{ font-size:clamp(2.1rem,10.2vw,9.4rem); }
.ip-hero--safe .ip-hero__copy,.ip-phero,.ip-phero > *{ min-width:0; }
.ip-hero--safe .ip-hero__copy{ grid-template-columns:minmax(0,1fr); }
@media (max-width:899px){ .ip-phero{ grid-template-columns:minmax(0,1fr); } .ip-phero h1{ font-size:clamp(2.1rem,10.2vw,9.4rem); } }
.ip-hero--safe h1{ overflow-wrap:anywhere; hyphens:auto; }
/* Wave 3.1: PERSEVERANCE is one word and must never split inside itself.
   Its size is capped by the real column width (page width less both
   gutters, divided by the word's measured width in ems, 7.98, plus a little
   air), so it stays whole at every width and at enlarged text sizes. The
   copy column may use the full page width for this one title. Phone sizes
   at normal text are unchanged (the cap only bites above the old width). */
.ip-hero--safe.ip-hero--longword h1{
  font-size:min(clamp(2.1rem,10.2vw,9.4rem), calc((min(100vw, var(--w-page)) - 2 * var(--gutter)) / 8.1));
  overflow-wrap:normal; word-break:normal; hyphens:manual;
}
.ip-hero--longword .ip-hero__copy{ max-width:none; }

/* 9b. Self Control: three beats on black ---------------------------------- */
.ip-beats{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); }
.ip-beats > li{ display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem 2rem; padding:clamp(1.4rem,3vw,2.4rem) 0; border-top:1px solid rgba(162,161,161,.35); min-width:0; }
.ip-beats > li:last-child{ border-bottom:1px solid rgba(162,161,161,.35); }
.ip-beats__word{ display:flex; align-items:baseline; gap:.9rem; margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(2.6rem,9vw,7.2rem); color:var(--white); overflow-wrap:anywhere; }
.ip-beats__word .idx{ font-size:clamp(.8rem,1.2vw,1rem); letter-spacing:.14em; color:var(--red-text); font-weight:700; }
.ip-beats p{ color:var(--on-ink); max-width:46ch; font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.65; }
@media (min-width:900px){
  .ip-beats > li{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; }
  .ip-beats > li:nth-child(2) .ip-beats__word{ padding-left:clamp(2rem,6vw,6rem); }
  .ip-beats > li:nth-child(3) .ip-beats__word{ padding-left:clamp(4rem,12vw,12rem); }
}

/* 9c. Good manners: photograph with an overlapping panel; habits run ------- */
.ip-overlap__figure{ margin:0; border-radius:4px; overflow:hidden; background:var(--paper-2); aspect-ratio:16/9; }
.ip-overlap__figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.ip-overlap__panel{ position:relative; background:var(--white); border-radius:4px; padding:clamp(1.2rem,3vw,2.4rem); display:grid; gap:1.4rem; margin-top:-1.2rem; box-shadow:0 18px 40px -28px rgba(0,0,0,.4); }
@media (min-width:860px){
  .ip-overlap__panel{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.6rem); margin:clamp(-7rem,-8vw,-4rem) clamp(1rem,4vw,3rem) 0; }
}
.ip-overlap__panel h3{ font-size:clamp(1.05rem,1.4vw,1.2rem); margin-bottom:.45rem; }
.ip-overlap__panel .cap{ display:block; margin-bottom:.5rem; }
.ip-overlap__panel p{ color:var(--ip-text); font-size:.98rem; line-height:1.62; }
.ip-habits{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.2rem 0; }
.ip-habits li{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3.6vw,3rem); line-height:1.12; letter-spacing:-.02em; }
.ip-habits li:not(:last-child)::after{ content:"\00B7"; color:var(--red); padding:0 .45em; }
.ip-habits li:nth-child(even){ color:var(--muted); }

/* 9d. Honesty and integrity: statement and a two-word pair ------------------ */
.ip-monolith{ margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.035em; line-height:.95; font-size:clamp(2rem,6.4vw,5.6rem); max-width:18ch; }
.ip-monolith em{ font-style:normal; color:var(--red); }
.ip-pair{ display:grid; border-top:2px solid var(--ink); }
@media (min-width:760px){ .ip-pair{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ip-pair > div + div{ border-left:1px solid var(--grey-line); } }
.ip-pair > div{ padding:clamp(1.2rem,3vw,2.2rem) clamp(0rem,2vw,2rem) clamp(1.2rem,3vw,2.2rem) 0; min-width:0; }
@media (min-width:760px){ .ip-pair > div + div{ padding-left:clamp(1.2rem,3vw,2.4rem); } }
@media (max-width:759px){ .ip-pair > div + div{ border-top:1px solid var(--grey-line); } }
.ip-pair b{ display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1; margin-bottom:.8rem; }
.ip-pair p{ color:var(--ip-text); max-width:40ch; font-size:1.02rem; line-height:1.65; }

/* 9e. Awareness of others: three widening circles (decorative) and a list -- */
.ip-rings-wrap{ display:grid; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
@media (min-width:900px){ .ip-rings-wrap{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.ip-rings{ position:relative; width:min(100%,440px); aspect-ratio:1; margin:0 auto; }
.ip-rings span{ position:absolute; border-radius:50%; border:1.5px solid var(--grey-line); display:flex; justify-content:center; font-family:var(--display); font-weight:700; font-size:clamp(.62rem,1.4vw,.74rem); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ip-rings span:nth-child(1){ inset:0; padding-top:5%; }
.ip-rings span:nth-child(2){ inset:17%; padding-top:6%; border-color:#8d8c8b; color:var(--ink); }
.ip-rings span:nth-child(3){ inset:36%; align-items:center; padding:0; border:0; background:var(--red-text-light); color:var(--white); }
.ip-rings span b{ font-weight:700; }
@media (max-width:599px){ .ip-rings{ width:min(100%,300px); } }

/* 9f. Perseverance: a long road, drawn once --------------------------------- */
/* markup: div.ip-prog.ip-road > span.ip-road__line > i + ol.ip-road__list > li.ip-road__stop
   (.ip-prog only lets inner.js run the approved draw-once motion) */
.ip-road{ position:relative; }
.ip-road__list{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(1.8rem,4vw,3.4rem); }
.ip-road__line{ position:absolute; left:9px; top:.6rem; bottom:.6rem; width:2px; background:var(--grey-line); }
.ip-road__line i{ position:absolute; inset:0; background:var(--red); transform-origin:0 0; transition:transform 1.8s var(--ease) .15s; }
.ip-road.ip-wait .ip-road__line i{ transform:scaleY(0); }
.ip-road__stop{ position:relative; padding-left:3rem; min-width:0; }
.ip-road__stop::before{ content:""; position:absolute; left:2px; top:.55rem; width:16px; height:16px; border-radius:50%; background:var(--paper); border:2px solid var(--red); z-index:1; box-sizing:border-box; }
.ip-road__stop:last-child::before{ background:var(--red); }
.ip-road__stop .cap{ display:block; margin-bottom:.35rem; }
.ip-road__stop h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(2rem,5vw,3.8rem); line-height:.95; margin-bottom:.6rem; }
.ip-road__stop p{ color:var(--ip-text); max-width:44ch; font-size:1.02rem; line-height:1.65; }
@media (min-width:900px){
  .ip-road__line{ left:50%; margin-left:-1px; }
  .ip-road__list{ gap:clamp(.4rem,1.4vw,1.2rem); }
  .ip-road__stop{ width:50%; padding-left:0; padding-right:clamp(2.4rem,4vw,4rem); text-align:right; justify-self:start; }
  .ip-road__stop p{ margin-left:auto; }
  .ip-road__stop::before{ left:auto; right:-8px; }
  .ip-road__stop:nth-child(even){ justify-self:end; text-align:left; padding-right:0; padding-left:clamp(2.4rem,4vw,4rem); }
  .ip-road__stop:nth-child(even) p{ margin-left:0; }
  .ip-road__stop:nth-child(even)::before{ right:auto; left:-8px; }
}

/* 9g. Develop focus: a framed photograph and three quiet lines --------------- */
.ip-lens{ position:relative; margin:0; padding:clamp(.8rem,1.6vw,1.2rem); max-width:520px; }
.ip-lens::before,.ip-lens::after{ content:""; position:absolute; width:clamp(28px,4vw,46px); height:clamp(28px,4vw,46px); border:2px solid var(--red); pointer-events:none; }
.ip-lens::before{ top:0; left:0; border-right:0; border-bottom:0; }
.ip-lens::after{ bottom:0; right:0; border-left:0; border-top:0; }
.ip-lens picture,.ip-lens img{ display:block; width:100%; }
.ip-lens img{ aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
.ip-ones{ margin:clamp(1.2rem,2.4vw,1.8rem) 0 0; padding:0; list-style:none; display:grid; gap:clamp(1.6rem,3.4vw,2.8rem); }
.ip-ones li{ min-width:0; }
.ip-ones b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.6vw,2.8rem); line-height:1.05; letter-spacing:-.025em; margin-bottom:.55rem; }
.ip-ones b em{ font-style:normal; color:var(--red); }
.ip-ones p{ color:var(--ip-text); max-width:44ch; font-size:1.02rem; line-height:1.68; }
.ip-quiet-head{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.ip-quietline{ margin:0 auto; max-width:24ch; text-align:center; font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,4vw,3.2rem); line-height:1.1; letter-spacing:-.025em; }
.ip-quietline em{ font-style:normal; color:var(--red); }

/* 9h. Develop listening: listen, understand, apply ---------------------------- */
.ip-flow{ margin:0; padding:0; list-style:none; display:grid; gap:0; counter-reset:none; }
.ip-flow > li{ position:relative; padding:1.4rem 0 1.5rem 0; border-top:1px solid var(--grey-line); min-width:0; }
.ip-flow__verb{ display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.03em; font-size:clamp(1.7rem,2.9vw,2.9rem); line-height:.95; margin:.3rem 0 .7rem; }
.ip-flow p{ color:var(--ip-text); max-width:36ch; font-size:1rem; line-height:1.65; }
.ip-flow__arrow{ display:none; }
@media (min-width:900px){
  .ip-flow{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(1.6rem,3vw,3rem); }
  .ip-flow > li{ border-top:2px solid var(--ink); padding-top:1.6rem; }
  .ip-flow > li:last-child{ border-top-color:var(--red); }
  .ip-flow__arrow{ display:block; position:absolute; top:-.64rem; right:clamp(-2.4rem,-2.4vw,-1.4rem); width:1.2rem; height:1.2rem; color:var(--red); background:var(--white); }
}
.ip-sec--white .ip-flow__arrow{ background:var(--white); }

/* 9i. Chapter navigation (previous / all / next) --------------------------- */
.ip-chapnav{ display:grid; gap:.6rem; margin-top:clamp(1.8rem,4vw,2.8rem); border-top:1px solid var(--grey-line); padding-top:.6rem; }
@media (min-width:700px){ .ip-chapnav{ grid-template-columns:1fr auto 1fr; align-items:center; } }
.ip-chapnav a{ display:flex; flex-direction:column; justify-content:center; gap:.2rem; min-height:56px; padding:.5rem 0; text-decoration:none; color:var(--ink); }
.ip-chapnav a .cap{ color:var(--muted); }
.ip-chapnav a b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1rem; }
.ip-chapnav a:hover b{ color:var(--red-deep); }
.ip-chapnav__next{ text-align:right; align-items:flex-end; }
.ip-chapnav__all{ align-items:center; }
@media (max-width:699px){ .ip-chapnav__next,.ip-chapnav__all{ text-align:left; align-items:flex-start; } }
.ip-chapnav__all b{ font-size:.78rem !important; letter-spacing:.14em !important; color:var(--red-text) !important; }

@media (prefers-reduced-motion:reduce){
  .ip-road.ip-wait .ip-road__line i{ transform:none; }
  .ip-road__line i{ transition:none; }
}
@media print{ .ip-road.ip-wait .ip-road__line i{ transform:none !important; } }

/* ==========================================================================
   10. WAVE 3.1: SHARED RELATED LINKS AND CHAPTER NAVIGATION AT LARGE TEXT
   Fixes the shared components on every inner page that uses them. At
   normal text sizes nothing moves: the single mobile column already fitted
   its content, and the desktop grid is unchanged. At 150% to 200% text the
   column may no longer grow to its longest word; labels wrap between words
   (a single over-long word breaks only as a last resort), and the arrow
   keeps its own space inside each link.
   ========================================================================== */
.ip-related{ grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .ip-related{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ip-related > li,.ip-related a,.ip-related a > *{ min-width:0; }
.ip-related b,.ip-related .cap,.ip-related__d{ overflow-wrap:break-word; }
.ip-chapnav{ grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .ip-chapnav{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } }
.ip-chapnav a,.ip-chapnav a > *{ min-width:0; max-width:100%; }
.ip-chapnav b,.ip-chapnav .cap{ overflow-wrap:break-word; }
/* The heading block of the section that holds the related links (on some
   pages the related section is its own section, on Respect it sits under
   "Eight principles"): same rule, so its title cannot push the list wider. */
.ip-sec:has(.ip-related) .ip-head{ grid-template-columns:minmax(0,1fr); }
.ip-sec:has(.ip-related) .ip-head > *{ min-width:0; overflow-wrap:break-word; }
/* Whole words at large text. The labels, and the heading above them, never
   split inside a word: their size is capped by the width actually available
   (viewport less both gutters, and less the arrow's space for link labels,
   divided by the longest label word in ems). At normal text sizes the cap
   is far above the approved size, so nothing changes. */
.ip-related b{ font-size:min(clamp(1.05rem,1.5vw,1.25rem), calc((100vw - 2 * var(--gutter) - 2.4rem) / 9.2)); overflow-wrap:normal; }
.ip-chapnav a b{ font-size:min(1rem, calc((100vw - 2 * var(--gutter)) / 9.8)); overflow-wrap:normal; }
.ip-sec:has(.ip-related) .ip-head h2{ font-size:min(var(--t-xl), calc((100vw - 2 * var(--gutter)) / 8.4)); overflow-wrap:normal; }
.ip-sec:has(.ip-related) .ip-head p.cap{ font-size:min(clamp(1rem,1.3vw,1.12rem), calc((100vw - 2 * var(--gutter)) / 10.6)); } /* same size as .ip-head p */
.ip-related .cap{ font-size:min(var(--t-cap), calc((100vw - 2 * var(--gutter) - 2.4rem) / 9.4)); }
.ip-related span.ip-related__d{ font-size:min(.9rem, calc((100vw - 2 * var(--gutter) - 2.4rem) / 7.4)); }