/* ==========================================================================
   WSKF Australia - v2-people.css   (People group, Step 3 of the redesign)
   Instructors hub, Black belts 1st and 2nd Dan, Black belts 3rd Dan and
   above, About, Background history. Loaded after inner-v2.css (the v2
   foundation) and before a11y.css. Uses the v2 tokens only. Prefix ppl-.

     1  Shared atoms (link rows, pagenav under a paper hero, names, dan tag)
     2  Roster: 1st and 2nd Dan paths (date line plus start-to-Japan bar)
     3  Roster: senior grades grouped by rank
     4  Dan scale: the switch between the two black belt pages
     5  Line of teaching (Instructors hub): Japan to your club
     6  Ledger: instructors by club on the dark band (Instructors hub)
     7  About: statement H1, purpose band, Japan feature, four points
     8  History: two chapters per band, era timelines, styles, photograph

   Enlarged text: every column switch is a container query in rem, so at
   150% and 200% text (and 200% zoom) the same layouts fall back to fewer
   columns. Labels use bounded growth min(rem, max(px, column / longest
   word)). Spacing is px based.
   ========================================================================== */

/* ---------- 1. Shared atoms --------------------------------------------- */
.ppl-links{ margin-top:18px; gap:10px 24px; }
/* V2.1 polish: phones stack the quiet links as a short list (never 2 + 1). */
@media (max-width:599px){ .ppl-links{ flex-direction:column; align-items:flex-start; gap:10px; } }
/* V2.1.1: About's three Japan links sit in the narrow copy column beside the
   portrait from tablet portrait up to about 1000px, where one row does not
   fit. There they are the same short stacked list, never 2 + 1. */
@container wskf-col (min-width:44rem) and (max-width:58rem){ .ppl-japan .ppl-links{ flex-direction:column; align-items:flex-start; gap:10px; } }
/* Page navigation directly under a paper hero: a hairline above it as well,
   so the strip reads as its own row rather than part of the hero. */
.ppl-pagenav{ border-top:1px solid var(--v2-rule); }

/* A person's name in a roster: display face, uppercase, bounded growth
   against the roster column (longest word about 9 letters, 7 em). */
.ppl-name{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; color:var(--ink);
  font-size:min(1.125rem, max(17px, calc(100cqi / 10))); overflow-wrap:normal; }
.ppl-name a{ color:inherit; text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:.22em; }
.ppl-name a:hover{ color:var(--red-deep); }

/* Dan tag beside a name (1st Dan ink, 2nd Dan red). */
.ppl-dan{ display:inline-block; padding:3px 7px 2px; border-radius:2px; background:var(--ink); color:var(--white); font-family:var(--display); font-weight:700; font-size:.64rem; letter-spacing:.12em; line-height:1.3; text-transform:uppercase; white-space:nowrap; vertical-align:.18em; }
.ppl-dan--2{ background:var(--red-deep); }

/* ---------- 2. Roster: 1st and 2nd Dan paths ----------------------------
   One row per instructor: name, dan tag and the date line, then a bar from
   the start (or join) date to the Japan certification on a shared 2012 to
   2026 scale. The bars and scale are a visual summary (aria-hidden); the
   date line carries the facts for every reader. Phones and enlarged text:
   the bar sits under the text on the full width; from a 52rem column the
   text and bar share one row. */
.ppl-paths{ container:ppl-paths / inline-size; --ppl-who:25.5rem; }
.ppl-axis{ display:grid; grid-template-columns:0 minmax(0,1fr); margin-bottom:6px; }
.ppl-axis__scale{ position:relative; height:1.25rem; }
.ppl-axis__scale span{ position:absolute; top:0; left:calc(var(--x) * 100%); transform:translateX(-50%); font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.06em; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ppl-axis__scale span:first-child{ transform:none; }
.ppl-axis__scale span:last-child{ transform:translateX(-100%); }
@container ppl-paths (max-width:33.99rem){ .ppl-axis__scale .is-minor{ display:none; } }

.ppl-paths__list{ display:grid; margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.ppl-path{ display:grid; gap:10px 32px; padding:16px 0 18px; border-bottom:1px solid var(--v2-rule); min-width:0; }
.ppl-path > *{ min-width:0; }
.ppl-path__who .ppl-name{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.ppl-path__who .ppl-dan{ vertical-align:baseline; }
.ppl-path__who p{ margin-top:5px; font-size:.9rem; line-height:1.5; color:var(--muted); max-width:none; }
.ppl-path__bar{ position:relative; height:22px; }
.ppl-path__bar::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--grey-line); }
.ppl-path__seg{ position:absolute; top:50%; height:5px; left:calc(var(--s) * 100%); width:calc((var(--e) - var(--s)) * 100%); background:var(--ink); transform:translateY(-50%); transform-origin:0 50%; transition:transform 1.2s var(--ease) .1s; }
.ppl-path__seg::before{ content:""; position:absolute; left:-6px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--white); border:2px solid var(--ink); box-sizing:border-box; }
.ppl-path__seg.is-joined::before{ background:var(--grey-line); border-color:var(--grey-line); }
.ppl-path__seg::after{ content:""; position:absolute; right:-6px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:2px; background:var(--red); }
.ppl-paths__list.ip-wait .ppl-path__seg{ transform:translateY(-50%) scaleX(0); }
@media (prefers-reduced-motion:reduce){
  .ppl-path__seg{ transition:none; }
  .ppl-paths__list.ip-wait .ppl-path__seg{ transform:translateY(-50%); }
}
@media print{ .ppl-paths__list .ppl-path__seg{ transform:translateY(-50%) !important; } }
@container ppl-paths (min-width:52rem){
  .ppl-axis{ grid-template-columns:minmax(0,var(--ppl-who)) minmax(0,1fr); column-gap:32px; }
  .ppl-path{ grid-template-columns:minmax(0,var(--ppl-who)) minmax(0,1fr); align-items:center; padding:15px 0; }
}
.ppl-legend{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:16px; font-size:.84rem; color:var(--muted); max-width:none; }
@media (max-width:599px){ .ppl-legend{ flex-direction:column; gap:6px; } }      /* a key, one item a line, never 2 + 1 */
.ppl-legend span{ display:inline-flex; align-items:center; gap:8px; }
.ppl-legend i{ width:12px; height:12px; flex:none; border-radius:50%; border:2px solid var(--ink); box-sizing:border-box; background:var(--white); }
.ppl-legend i.is-joined{ background:var(--grey-line); border-color:var(--grey-line); }
.ppl-legend i.is-end{ border:0; border-radius:2px; background:var(--red); }

/* ---------- 3. Roster: senior grades grouped by rank --------------------
   A rank label (numeral, dan, Japanese name) and the names at that rank.
   Label above the names on phones; label column beside them from 46rem. */
.ppl-ranks{ container:ppl-ranks / inline-size; display:grid; margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.ppl-rank{ display:grid; gap:14px 32px; padding:22px 0 24px; border-bottom:1px solid var(--v2-rule); min-width:0; }
.ppl-rank > *{ min-width:0; }
.ppl-rank__label{ display:flex; align-items:center; gap:14px; margin:0; font-size:1rem; }
.ppl-rank__n{ flex:none; min-width:.62em; font-family:var(--display); font-weight:700; line-height:.8; letter-spacing:-.02em; color:var(--ink); font-size:clamp(2.75rem, calc(2.2rem + 1.4vw), 3.5rem); font-variant-numeric:lining-nums; }
.ppl-rank--top .ppl-rank__n{ color:var(--red); }
.ppl-rank__t{ display:grid; gap:3px; min-width:0; }
.ppl-rank__t b{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:var(--ink); }
.ppl-rank__t i{ font-style:normal; font-family:var(--body); font-weight:400; font-size:.86rem; letter-spacing:0; text-transform:none; color:var(--muted); }
.ppl-roll{ display:grid; gap:12px 28px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill, minmax(min(100%, max(14rem, 220px)), 1fr)); align-content:start; }
.ppl-roll > li{ display:grid; gap:4px; align-content:start; min-width:0; padding:4px 0 4px 14px; border-left:2px solid var(--grey-line); }
.ppl-rank--top .ppl-roll > li{ border-left-color:var(--red); }
.ppl-roll .ppl-name{ display:block; }
.ppl-roll span{ font-size:.88rem; line-height:1.45; color:var(--muted); }
@container ppl-ranks (min-width:46rem){
  .ppl-rank{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); align-items:center; }
}

/* ---------- 4. Dan scale: switch between the two black belt pages ------- */
.ppl-scale{ container-type:inline-size; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,4fr); gap:14px; align-items:end; }
.ppl-scale a{ display:grid; gap:10px; min-width:0; color:inherit; text-decoration:none; }
.ppl-scale__bars{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; align-items:end; }
.ppl-scale__bars span{ display:flex; justify-content:center; align-items:flex-start; min-width:0; padding-top:6px; height:calc(30px + var(--i) * 12px); background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-bottom:0; font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.2; color:var(--ink); }
.ppl-scale a[aria-current="page"] .ppl-scale__bars span{ background:var(--ink); border-color:var(--ink); border-top-color:var(--red); color:var(--white); }
.ppl-scale a:hover .ppl-scale__bars span{ border-top-color:var(--red); }
.ppl-scale__label{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding-top:4px; border-top:1px solid var(--ink); font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; }
.ppl-scale__label .i{ flex:none; width:1rem; height:1rem; color:var(--red); transition:transform .2s var(--ease); }
.ppl-scale a:hover .ppl-scale__label .i{ transform:translateX(3px); }
.ppl-scale a[aria-current="page"] .ppl-scale__label{ color:var(--red-text); }
@container (max-width:22rem){ .ppl-scale{ grid-template-columns:minmax(0,1fr); } }
/* In the split, the scale sits on the head's last line. */
@container (min-width:56rem){ .ppl-scale-wrap{ align-items:end; } }

/* ---------- 5. Line of teaching (Instructors hub) -----------------------
   Five linked steps from Japan to your club on one connecting line.
   Phones, tablets and enlarged text: a vertical line with numbered dots.
   From a 64rem column: five columns on a horizontal line, with the kicker,
   name and description of every step sharing rows (subgrid). */
.ppl-line{ container:ppl-line / inline-size; position:relative; display:grid; margin:0; padding:0; list-style:none; }
.ppl-line__item{ position:relative; min-width:0; }
/* the connecting line: from each dot down to the next one (vertical) */
.ppl-line__item:not(:last-child)::after{ content:""; position:absolute; left:calc(1.125rem - 1px); top:34px; bottom:-34px; width:2px; background:var(--grey-line); }
.ppl-line__item a{ position:relative; display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; column-gap:16px; row-gap:4px; align-content:start; padding:16px 0 18px; color:inherit; text-decoration:none; }
.ppl-line__item + .ppl-line__item a{ border-top:1px solid var(--v2-rule); }
.ppl-line__item a > *{ min-width:0; }
.ppl-line__n{ grid-column:1; grid-row:1 / span 3; z-index:1; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--ink); color:var(--white); font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; box-shadow:0 0 0 4px var(--paper); }
.ppl-line__item--japan .ppl-line__n{ background:var(--red-deep); }
.ppl-line .cap{ grid-column:2; color:var(--muted); font-size:min(var(--t-cap), max(11.2px, calc((100cqi - 7rem) / 18))); text-wrap:balance; }
.ppl-line b{ grid-column:2; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.15;
  font-size:min(1.25rem, max(17px, calc((100cqi - 7rem) / 9))); transition:color .2s var(--ease); }
.ppl-line__d{ grid-column:2; font-size:.94rem; line-height:1.55; color:var(--ip-text); max-width:58ch; }
.ppl-line .i{ grid-column:3; grid-row:1 / span 2; align-self:center; width:1.05rem; height:1.05rem; color:var(--red); transition:transform .2s var(--ease); }
.ppl-line__item a:hover b{ color:var(--red-deep); }
.ppl-line__item a:hover .i{ transform:translateX(3px); }
/* Enlarged text in a narrow column: the dot and kicker share the first row,
   name and description take the full width beneath, and the connecting
   line is dropped so it never runs through text. */
@container ppl-line (max-width:16rem){
  .ppl-line__item:not(:last-child)::after{ display:none; }
  .ppl-line__item a{ grid-template-columns:2.25rem minmax(0,1fr) auto; column-gap:12px; }
  .ppl-line__n{ grid-row:1; align-self:center; }
  .ppl-line .cap{ grid-column:2 / -1; grid-row:1; align-self:center; font-size:min(var(--t-cap), max(11.2px, calc((100cqi - 5rem) / 12))); }
  .ppl-line b{ grid-column:1 / 3; grid-row:2; margin-top:6px; font-size:min(1.25rem, max(17px, calc(100cqi / 10.5))); }
  .ppl-line .i{ grid-column:3; grid-row:2; align-self:end; }
  .ppl-line__d{ grid-column:1 / -1; }
}
/* The list itself cannot query its own size, so its grid switch asks the
   shell (the same width); its children and its line ask the list. */
@container (min-width:64rem){
  .ppl-line{ grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:auto auto auto auto; column-gap:clamp(18px, 2vw, 30px); }
}
@container ppl-line (min-width:64rem){
  .ppl-line__item:not(:last-child)::after{ left:2.25rem; right:calc(-1 * clamp(18px, 2vw, 30px)); top:calc(1.125rem - 1px); bottom:auto; width:auto; height:2px; }
  .ppl-line__item{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
  .ppl-line__item a,.ppl-line__item + .ppl-line__item a{ grid-row:1 / -1; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr) auto; row-gap:8px; padding:0 0 6px; border-top:0; }
  .ppl-line__n{ grid-row:1; grid-column:1; margin-bottom:8px; }
  .ppl-line .cap{ grid-row:2; grid-column:1 / -1; align-self:end; }
  .ppl-line b{ grid-row:3; grid-column:1; font-size:min(1.1rem, max(17px, calc(100cqi / 5 / 8.4))); }
  .ppl-line .i{ grid-row:3; grid-column:2; align-self:start; margin-top:.15em; }
  .ppl-line__d{ grid-row:4; grid-column:1 / -1; font-size:.9rem; }
}

/* ---------- 6. Ledger: instructors by club (dark band) ------------------ */
.ppl-ledger{ display:grid; gap:28px clamp(18px, 2vw, 28px); margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill, minmax(min(100%, max(12rem, 192px)), 1fr)); }
.ppl-ledger > li{ min-width:0; padding-top:14px; border-top:2px solid var(--red); }
.ppl-ledger h3{ margin-bottom:12px; font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.35; }
.ppl-ledger h3 a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-12px; color:var(--white); text-decoration:none; }
.ppl-ledger h3 a:hover{ color:var(--red-text); }
.ppl-ledger ul{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.ppl-ledger ul li{ display:grid; gap:2px; min-width:0; padding-top:12px; border-top:1px solid var(--v2-rule-ink); }
.ppl-ledger ul a{ justify-self:start; font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.3; color:var(--white); text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:.2em; }
.ppl-ledger ul a:hover{ text-decoration-color:var(--red); }
.ppl-ledger ul span{ font-size:.88rem; line-height:1.45; color:var(--on-ink); }

/* ---------- 7. About ---------------------------------------------------- */
/* The H1 opens with the page name as a kicker line, then the statement. */
.ppl-h1__small{ display:block; margin-bottom:clamp(12px, 1.4vw, 18px); font-family:var(--display); font-weight:600; font-size:var(--t-cap); letter-spacing:.18em; line-height:1.3; color:var(--red-text); }
/* Purpose band: the statement beside the two pillars. */
.ppl-kicker-h2{ margin-bottom:clamp(16px, 2vw, 24px); }
.ppl-statement p{ max-width:30ch; }          /* colours: foundation dark surfaces (V2.1) */
.ppl-pillars{ display:grid; gap:22px; }
.ppl-pillars > div{ padding-top:16px; border-top:1px solid var(--v2-rule-ink); }
.ppl-pillars h3{ font-size:var(--v2-h3); line-height:1.2; color:var(--white); }
.ppl-pillars p{ margin-top:8px; font-size:.97rem; line-height:1.62; color:var(--on-ink); max-width:60ch; }
/* Japan feature: calligraphy strip above the head (the prose refers to it). */
.ppl-japan .ip-cal--strip{ width:min(100%, 560px); margin-bottom:clamp(16px, 2vw, 24px); }
.ppl-after-head{ margin-top:16px; }
.ppl-japan .v2-media--portrait{ max-height:min(560px, calc(100svh - var(--ip-top) - 40px)); width:100%; }
/* State chips under the prose. */
.ppl-states{ margin-top:20px; }
/* Four points: rows on phones, two across from 44rem, four from 64rem. */
@container (min-width:44rem){ .ppl-four{ --v2-n:2; row-gap:8px; } }
@container (min-width:64rem){ .ppl-four{ --v2-n:4; } }
.ppl-tel{ margin-top:2px; }

/* ---------- 8. History -------------------------------------------------- */
/* Two chapters per band, side by side from a 60rem column, like the two
   eras on the Grant Rollinson profile. Heads and timelines share rows, so
   the two timelines start on one line. */
.ppl-chapters{ display:grid; gap:clamp(48px, 6vw, 72px) var(--v2-gap); }
/* The chapter is a subgrid on wide screens, so it is never a container
   (design system: containers and subgrid). The era inside it is its own
   container (foundation .v2-era, V2.1), which is what its rows query. */
.ppl-chapter{ display:grid; align-content:start; min-width:0; }
.ppl-chapter__head{ align-content:start; margin-bottom:22px; }
@container (min-width:60rem){
  .ppl-chapters{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; row-gap:0; }
  .ppl-chapter{ grid-row:span 2; grid-template-rows:subgrid; row-gap:0; }
}
/* Eras: .v2-era--words (word dates, foundation date column and reflow);
   History's own sizes and spacing only. */
.ppl-era{ padding-top:0; }
.ppl-era ol{ margin-top:0; }
.ppl-era li{ gap:6px 18px; padding:16px 0 17px; font-size:1rem; }
.ppl-era li:first-child{ border-top:0; }
.ppl-era li > b{ font-size:1.02rem; line-height:1.3; letter-spacing:.01em; text-transform:uppercase; }
.ppl-era h3{ font-family:var(--display); font-weight:700; font-size:min(1.02rem, max(16px, calc(100cqi / 14))); line-height:1.3; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.ppl-era p{ margin-top:5px; font-size:.95rem; line-height:1.6; color:var(--ip-text); max-width:60ch; }
.ppl-era .ppl-links{ margin-top:14px; }
.ppl-styles{ margin:14px 0 0; padding:0; list-style:none; }      /* rows: the shared balanced chip layout (inner-v2 B6) */
.ppl-styles li{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; line-height:1.25; background:var(--white); border:1px solid rgba(0,0,0,.18); border-radius:2px; font-family:var(--display); font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.ppl-styles li.is-ours{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.ppl-photo{ margin:clamp(48px, 6vw, 80px) 0 0; }
.ppl-photo .v2-media img{ object-position:50% 34%; }
.ppl-photo .v2-caption{ margin-top:10px; }
/* Typographic hero: the lede may run a little wider beside the calligraphy. */
.ppl-hero-copy{ grid-column:1 / -1; max-width:52rem; }
.ppl-hero-copy .v2-hero__lede{ max-width:56ch; }