/* ==========================================================================
   WSKF Australia - v2-world.css   (Step 3 propagation, November 2026)
   Group "world": Clubs worldwide, WSKF Japan, WSKF Tokyo, New Zealand,
   South Africa, Travel overseas, Testimonials, Testimonials from parents.

   Loads after inner-v2.css (foundation) and before a11y.css. Everything here
   is prefixed vw- and only extends the v2 grammar: same shell, reading
   width, type scale, rhythm and card language as the benchmark pages.
   Spacing is px based; type is rem with bounded growth; column switches are
   container queries in rem (they fall back to one column at enlarged text).
   Dark surfaces set --red-text:var(--red-text-dark).
   ========================================================================== */

/* ---------- 1. Shared atoms ---------------------------------------------- */
.vw-mt{ margin-top:clamp(16px, 1.8vw, 22px); }
.vw-mt-s{ margin-top:12px; }
.vw-k{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; color:var(--muted); }
.v2-module--red .vw-k{ color:var(--red-text); }
.vw-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:8px; }
.vw-acts .btn{ max-width:100%; text-align:center; }
.vw-privacy{ margin-top:clamp(16px, 2vw, 22px); }

/* Related block title: kicker plus a compact title (subordinate to the
   page's chapter headings, like the benchmark "Keep exploring"). */
.vw-head--related{ gap:8px; margin-bottom:clamp(16px, 2vw, 24px); }
.vw-head--related h2{ font-size:min(1.375rem, max(22px, calc(100cqi / 12))); line-height:1.12; }

/* Two ways to contact: the modules carry one action row each. */
.vw-ways .v2-module{ align-content:stretch; grid-template-rows:auto auto 1fr auto; }
.vw-ways .v2-module p:not(.vw-k){ max-width:52ch; }

/* Ink hero, worldwide and testimonials. */
.vw-hero__note{ font-size:.92rem; line-height:1.6; color:var(--on-ink); max-width:52ch; }

/* Ledger: label and value rows in one light card (federation details). */
.vw-ledger{ container-type:inline-size; display:grid; margin:0; padding:4px var(--v2-inset); background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-radius:4px; }
.vw-ledger > div{ padding:13px 0; min-width:0; }
.vw-ledger > div + div{ border-top:1px solid var(--v2-rule); }
.vw-ledger dt{ font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vw-ledger dd{ margin:4px 0 0; font-family:var(--display); font-weight:600; font-size:.98rem; line-height:1.4; overflow-wrap:break-word; }
.vw-ledger a{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--red); }
.vw-ledger a:hover{ color:var(--red-deep); }
@container (min-width:26rem){
  .vw-ledger > div{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:16px; align-items:baseline; }
  .vw-ledger dd{ margin:0; }
}

/* ---------- 2. Clubs worldwide: region index (hero) ---------------------- */
.vw-index{ container-type:inline-size; border-top:2px solid var(--red); padding-top:12px; }
.vw-index__t{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink); margin-bottom:4px; }
.vw-index ol{ display:grid; margin:0; padding:0; list-style:none; }
.vw-index li + li{ border-top:1px solid var(--v2-rule-ink); }
.vw-index a{ display:grid; grid-template-columns:min(3.2rem, 51.2px) minmax(0,1fr) auto; align-items:center; gap:12px; min-height:46px; padding:4px 0; color:var(--white); text-decoration:none; }
.vw-index__n{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--red-text); font-variant-numeric:lining-nums tabular-nums; letter-spacing:.02em; }
.vw-index b{ font-family:var(--display); font-weight:700; font-size:min(.95rem, max(15.2px, calc((100cqi - 90px) / 10.5))); letter-spacing:.06em; text-transform:uppercase; line-height:1.25; overflow-wrap:normal; }
.vw-index .i{ width:.95rem; height:.95rem; color:var(--red); transition:transform .2s var(--ease); }
.vw-index a:hover b{ color:var(--paper); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.25em; }
.vw-index a:hover .i{ transform:translateX(3px); }

/* Editorial photograph between the hero and the first chapter. */
.vw-band{ background:var(--white); padding-top:var(--v2-sec); }
.vw-band figure{ margin-block:0; }
.vw-band + .v2-sec--white{ padding-top:clamp(36px, calc(18px + 3vw), 64px); }
.vw-paths{ margin-top:clamp(28px, 3.2vw, 44px); }
.vw-paths a{ padding-block:16px 18px; }

/* ---------- 3. Clubs worldwide: regional directory ----------------------
   Built on the foundation's .v2-region module. One paper surface; each
   region is a ruled row: a sticky head column (kicker, title, line, count)
   beside a tidy alphabetical grid of countries. Countries with an
   instructor on record carry a small red mark.

   V2.1 polish, phone accordion. Each region is a native disclosure:
     <section class="v2-region vw-region"> > <details class="vw-acc" open>
       > <summary class="v2-region__head"> (kicker, title, line, count)
       + .vw-region__body (the countries).
   The details are open in the HTML, so without JavaScript every list is
   shown. Phones and tablets (stacked layout): the summary is a disclosure
   button with a plus / minus mark; js/inner.js starts the regions closed
   below 600px and opens a region when a link targets it. Desktop (the
   head column beside the list, from a 56rem shell): the summary looks and
   behaves exactly like the former head (no mark, not clickable, sticky).
   The desktop columns use display:grid on <details>, which browsers allow
   only since they shipped ::details-content, so that layout is gated on
   it; older browsers keep the stacked layout, which is complete. */
.vw-dir{ background:var(--paper); padding-block:var(--v2-sec); }
.vw-region{ display:block; padding-block:var(--v2-sec-rule); }
.vw-region:first-child{ border-top:0; padding-top:0; }
.vw-region:last-child{ padding-bottom:0; }
.vw-region__lede{ font-size:var(--v2-body); line-height:1.6; color:var(--muted); max-width:44ch; }
.vw-region .v2-region__count{ text-wrap:balance; padding-top:10px; border-top:1px solid var(--v2-rule); line-height:1.5; }
.vw-region__body{ container-type:inline-size; min-width:0; }     /* same role as the foundation's .v2-region__body */
.vw-acc > .vw-region__body{ margin-top:20px; }
/* Phones: closed regions read as a compact list of rows. */
@media (max-width:599px){ .vw-region{ padding-block:24px; } }

/* Summary: the region head as a disclosure button (stacked layout). */
.vw-acc > summary{ position:static; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; list-style:none; cursor:pointer; border-radius:2px; }
.vw-acc > summary::-webkit-details-marker{ display:none; }
.vw-acc > summary::marker{ content:""; }
.vw-acc > summary > *{ grid-column:1 / -1; }
.vw-acc > summary > :is(.cap,h2){ grid-column:1; }
.vw-acc > summary::after{ content:""; grid-column:2; grid-row:1 / span 2; align-self:center; width:40px; height:40px; border:1px solid rgba(0,0,0,.18); border-radius:2px; background:var(--white) linear-gradient(var(--red), var(--red)) center / 14px 2px no-repeat; transition:border-color .2s var(--ease); }
.vw-acc:not([open]) > summary::after{ background-image:linear-gradient(var(--red), var(--red)), linear-gradient(var(--red), var(--red)); background-size:14px 2px, 2px 14px; background-position:center, center; background-repeat:no-repeat; }
.vw-acc > summary:hover::after{ border-color:var(--ink); }
.vw-acc > summary:hover h2{ color:var(--red-deep); }
@media (prefers-reduced-motion:reduce){ .vw-acc > summary::after{ transition:none; } }

/* Desktop: head column beside the list, exactly as before. */
@supports selector(::details-content){
  @container wskf-col (min-width:56rem){
    .vw-acc{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:var(--v2-gap); align-items:start; }
    .vw-acc > .vw-region__body{ margin-top:0; }
    .vw-acc > summary{ position:sticky; top:calc(var(--ip-top) + 24px); grid-template-columns:minmax(0,1fr); cursor:default; pointer-events:none; }
    .vw-acc > summary > :is(.cap,h2){ grid-column:1 / -1; }
    .vw-acc > summary::after{ display:none; }
    .vw-acc > summary:hover h2{ color:inherit; }
  }
}

/* Countries: alphabetical down each column, then across (a directory, not
   a grid of cards). One column of ruled rows on phones (a list column
   under 30rem); at most two in the stacked tablet layout; two or three
   beside the head column on desktop, as before. */
.vw-countries{ display:block; columns:2 max(146px, 9.125rem); column-gap:clamp(16px, 2.2vw, 32px); }
@container (min-width:38rem){ .vw-countries{ columns:3 max(176px, 11rem); } }
@container wskf-col (max-width:55.99rem){ .vw-countries{ columns:2 max(146px, 9.125rem); } }
@container (max-width:29.99rem){ .vw-countries{ columns:auto; } }
.vw-countries > li{ display:grid; align-content:start; gap:3px; padding:11px 0 13px; break-inside:avoid; }
.vw-countries b{ display:flex; align-items:baseline; gap:8px; font-size:.95rem; line-height:1.3; overflow-wrap:normal; }
.vw-countries b::before{ content:""; flex:none; width:6px; height:6px; background:transparent; transform:translateY(-.12em); }
.vw-countries .is-named b::before{ background:var(--red); }
.vw-c__who{ display:grid; gap:1px; padding-left:14px; }
.vw-countries .vw-c__who span{ font-size:.86rem; line-height:1.4; color:var(--muted); }
.vw-c__go{ justify-self:start; display:inline-flex; align-items:center; min-height:28px; margin-left:14px; font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.02em; color:var(--red-text); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.3em; overflow-wrap:anywhere; }
.vw-c__go:hover{ color:var(--red-deep); }
.vw-group{ display:flex; align-items:baseline; gap:10px; margin:clamp(22px, 2.6vw, 30px) 0 8px; font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.vw-group span{ color:var(--red-text); font-variant-numeric:tabular-nums; }

/* ---------- 4. WSKF Japan ------------------------------------------------ */
/* Hero: the federation's name in Grant's brushwork beside the copy. */
.vw-brush{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:16px; padding-top:16px; border-top:1px solid var(--v2-rule-ink); }
.vw-brush img{ display:block; width:auto; height:clamp(220px, 46vw, 280px); filter:invert(1); opacity:.92; }
.vw-brush figcaption{ font-size:.82rem; line-height:1.5; color:var(--on-ink); max-width:30ch; padding-bottom:4px; }
.vw-brush figcaption span{ display:block; margin-bottom:4px; font-size:.95rem; letter-spacing:.08em; color:var(--paper); }
@container wskf-main (min-width:56.25rem){
  .vw-hero__grid--brush{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
  .vw-brush{ border-top:0; padding-top:0; justify-self:end; }
  .vw-brush img{ height:min(400px, max(260px, calc(100svh - var(--ip-top) - 230px))); }
}

/* Dated or labelled rows (the federation's story). */
.vw-rows{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule); }
.vw-rows > li{ container-type:inline-size; display:grid; grid-template-columns:minmax(0,1fr); gap:4px 18px; padding:15px 0 16px; border-bottom:1px solid var(--v2-rule); min-width:0; }
.vw-rows b{ overflow-wrap:normal; font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:var(--red-text); font-variant-numeric:tabular-nums; }
.vw-rows p{ font-size:.98rem; line-height:1.62; color:var(--ip-text); max-width:60ch; }
@container (min-width:30rem){ .vw-rows > li{ grid-template-columns:7.5rem minmax(0,1fr); } .vw-rows b{ padding-top:.12em; } }
@supports not (container-type:inline-size){ .vw-rows > li{ grid-template-columns:minmax(0,1fr); } }

/* A lead statement (exact words) set larger than the body. */
.vw-pull{ display:grid; gap:18px; max-width:var(--v2-read); }
.vw-pull__lead{ font-family:var(--display); font-weight:600; font-size:min(clamp(1.15rem, calc(1rem + .5vw), 1.4rem), max(clamp(18.4px, calc(16px + .5vw), 22.4px), 7cqi)); line-height:1.42; color:var(--white); padding-left:clamp(14px, 1.6vw, 20px); border-left:3px solid var(--red); max-width:36ch; }
.vw-pull__lead--paper{ color:var(--ink); margin:0 0 18px; }

/* Region tiles (count, region, span). */
.vw-tiles{ display:grid; gap:10px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(150px, 9.4rem)), 1fr)); }
.vw-tiles > li{ min-width:0; }
.vw-tiles a{ container-type:inline-size; display:grid; align-content:start; gap:6px; height:100%; min-height:44px; padding:16px 18px 18px; background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-radius:4px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease); }
.vw-tiles__n{ font-family:var(--display); font-weight:700; font-size:1.9rem; line-height:1; color:var(--red-text); font-variant-numeric:lining-nums tabular-nums; }
.vw-tiles b{ font-family:var(--display); font-weight:700; font-size:min(1rem, max(16px, calc(100cqi / 9.6))); line-height:1.2; text-transform:uppercase; letter-spacing:.02em; overflow-wrap:normal; }
.vw-tiles__eg{ font-size:.86rem; line-height:1.4; color:var(--muted); }
.vw-tiles a:hover{ border-color:var(--ink); }
.vw-tiles a:hover b{ color:var(--red-deep); }

/* ---------- 5. WSKF Tokyo ------------------------------------------------ */
.vw-hero--tokyo h1 em{ display:block; margin-top:.08em; }
/* Plate: the three hero facts as a ruled card (mirrors Grant's rank plate). */
.vw-plate{ container-type:inline-size; display:grid; margin:0; border-top:2px solid var(--red); }
.vw-plate > div{ padding:12px 0; border-bottom:1px solid var(--v2-rule); min-width:0; }
.vw-plate dt{ font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vw-plate dd{ margin:4px 0 0; font-family:var(--display); font-weight:700; font-size:min(1.05rem, max(16.8px, calc(100cqi / 13))); line-height:1.3; }
@container (min-width:22rem){
  .vw-plate > div{ display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:14px; align-items:baseline; }
  .vw-plate dd{ margin:0; }
}

/* Chronology on ink: year, title, line. */
.vw-chrono{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule-ink); }
.vw-chrono > li{ container-type:inline-size; display:grid; grid-template-columns:minmax(0,1fr); gap:6px 22px; padding:18px 0 20px; border-bottom:1px solid var(--v2-rule-ink); min-width:0; }
.vw-chrono__y{ overflow-wrap:normal; font-family:var(--display); font-weight:700; font-size:1.3rem; line-height:1; color:var(--white); font-variant-numeric:lining-nums tabular-nums; }
.vw-chrono h3{ font-size:var(--v2-h3); line-height:1.2; color:var(--white); margin-bottom:6px; --v2-h3-em:11; }
.vw-chrono p{ font-size:.97rem; line-height:1.6; color:var(--on-ink); max-width:56ch; }
.vw-chrono .is-now .vw-chrono__y{ color:var(--red-text); }
.vw-chrono .is-now{ border-bottom:2px solid var(--red); }
@container (min-width:30rem){ .vw-chrono > li{ grid-template-columns:5.75rem minmax(0,1fr); } .vw-chrono__y{ padding-top:.1em; } }

/* Grades under Kasuya Sensei: four ruled cells. */
.vw-grades{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(128px, 8rem)), 1fr)); gap:0 16px; margin:clamp(20px, 2.4vw, 28px) 0 0; padding:0; list-style:none; }
.vw-grades li{ display:grid; gap:4px; padding:12px 0 10px; border-top:2px solid var(--ink); min-width:0; }
.vw-grades b{ font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.vw-grades li:last-child{ border-top-color:var(--red); }
.vw-grades li:last-child b{ color:var(--red-text); }
.vw-grades span{ font-size:.88rem; line-height:1.4; color:var(--muted); }
.vw-grades__note{ margin-top:12px; }

/* ---------- 6. Country pages (New Zealand, South Africa) ----------------- */
.vw-card{ container-type:inline-size; display:grid; gap:12px; padding:20px var(--v2-inset) 14px; background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--red); border-radius:4px; box-shadow:var(--v2-shadow); }
.vw-card__k{ display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; }
.vw-card__k::before{ content:""; width:7px; height:7px; flex:none; background:var(--red); transform:translateY(-1px); }
.vw-card dl{ display:grid; margin:0; border-top:1px solid var(--v2-rule); }
.vw-card dl > div{ padding:10px 0; border-bottom:1px solid var(--v2-rule); min-width:0; }
.vw-card dl > div:last-child{ border-bottom:0; }
.vw-card dt{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vw-card dd{ margin:3px 0 0; font-family:var(--display); font-weight:600; font-size:.95rem; line-height:1.4; overflow-wrap:break-word; }
.vw-card dd span{ font-weight:500; color:var(--muted); }
.vw-card dd a{ color:inherit; text-decoration:none; border-bottom:1.5px solid var(--red); }
.vw-card dd a:hover{ color:var(--red-deep); }
@container (min-width:22rem){
  .vw-card dl > div{ display:grid; grid-template-columns:6.6rem minmax(0,1fr); gap:12px; align-items:baseline; }
  .vw-card dd{ margin:0; }
}
/* Neighbouring countries as quiet chips; this page's country is marked. */
.vw-neigh span{ min-height:40px; font-weight:500; }
.vw-neigh .is-here span{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.vw-neigh .is-here b{ color:var(--white); font-weight:700; }
/* Phones (V2.1 polish): this page's country takes the first row and the
   twelve others sit in three equal columns (4 rows, not a 7-row list);
   two columns below 20rem. */
@container (max-width:29.99rem){
  ul.vw-neigh{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  ul.vw-neigh > li.is-here{ grid-column:1 / -1; }
  ul.vw-neigh > li:last-child:nth-child(odd){ grid-column:auto; }
  ul.vw-neigh span{ justify-content:center; padding-inline:6px; text-align:center; }
}
@container (max-width:19.99rem){ ul.vw-neigh{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- 7. Travel overseas ------------------------------------------- */
/* The arrival photograph keeps its people in frame on every size. */
.vw-arrival .v2-media img{ object-position:50% 40%; }
@container wskf-main (max-width:56.24rem){ .vw-arrival .v2-media{ aspect-ratio:4/3; max-height:none; } }
@container wskf-main (min-width:56.25rem){ .vw-hero--travel .v2-hero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); } }

.vw-compete{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:center; }
.vw-compete > *{ min-width:0; }
.vw-compete .v2-media{ max-width:420px; }
@container (min-width:44rem){ .vw-compete{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); } .vw-compete .v2-media{ max-width:none; } }
.vw-judge{ margin:clamp(22px, 2.6vw, 30px) 0 0; padding-top:16px; border-top:1px solid var(--v2-rule-ink); max-width:var(--v2-read); }
.vw-judge dt{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red-text); margin-bottom:8px; }
.vw-judge dd{ margin:0; font-size:.97rem; line-height:1.9; color:var(--on-ink); text-wrap:pretty; }   /* no lone year on the last line */
.vw-judge dd span{ display:inline-block; margin:0 2px; padding:0 8px; border:1px solid rgba(255,255,255,.28); border-radius:2px; font-family:var(--display); font-weight:700; font-size:.82rem; line-height:1.7; color:var(--white); font-variant-numeric:tabular-nums; }

.vw-connect{ display:grid; gap:clamp(24px, 3vw, 40px); align-items:center; }
.vw-connect > *{ min-width:0; }
@container (min-width:56rem){ .vw-connect{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } }
.vw-mosaic{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px, 1vw, 12px); }
.vw-mosaic__a{ grid-column:1 / -1; }

/* ---------- 8. Testimonials hub ----------------------------------------- */
.vw-statement{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1.12; color:var(--white); font-size:min(clamp(1.3rem, calc(1rem + 1vw), 1.75rem), max(clamp(20.8px, calc(16px + 1vw), 28px), calc(100cqi / 9))); max-width:22ch; text-wrap:balance; }
.vw-statement em{ display:block; font-style:normal; color:var(--red); }
.vw-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px, 1.2vw, 16px); align-items:end; }
.vw-pair .v2-media:last-child{ margin-bottom:clamp(20px, 3vw, 44px); }
@container wskf-main (min-width:56.25rem){ .vw-pair .v2-media{ max-height:max(260px, calc(100svh - var(--ip-top) - 230px)); } }

/* Three letters as three quote cards, each a link to its letter. */
.vw-voices{ display:grid; gap:clamp(12px, 1.6vw, 20px); margin:0; padding:0; list-style:none; }
@container (min-width:56rem){
  .vw-voices{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* Number, quotation, attribution and link share rows across the three
     cards, so the attribution lines align whatever the quotation length. */
  @supports (grid-template-rows:subgrid){
    .vw-voices{ row-gap:14px; }
    .vw-voices > li{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
    .vw-voices > li > a{ display:grid; grid-row:span 4; grid-template-rows:subgrid; align-content:start; }
    .vw-voices__go{ align-self:end; }
  }
}
.vw-voices > li{ min-width:0; }
.vw-voices a{ display:flex; flex-direction:column; gap:14px; height:100%; padding:var(--v2-inset); background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--red); border-radius:4px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease); }
.vw-voices__n{ font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.1em; color:var(--red-text); }
.vw-voices__q{ font-family:var(--display); font-weight:600; font-size:min(clamp(1.1rem, calc(1rem + .3vw), 1.25rem), max(clamp(17.6px, calc(16px + .3vw), 20px), calc((100cqi - 56px) / 12))); line-height:1.38; color:var(--ink); }
.vw-voices__who{ display:grid; gap:2px; font-size:.88rem; line-height:1.45; color:var(--muted); padding-top:12px; border-top:1px solid var(--v2-rule); }
.vw-voices__who b{ font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.vw-voices__go{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--red-text); }
.vw-voices__go .i{ width:.95em; height:.95em; transition:transform .2s var(--ease); }
.vw-voices a:hover{ border-color:var(--ink); border-top-color:var(--red); }
.vw-voices a:hover .vw-voices__go{ color:var(--red-deep); }
.vw-voices a:hover .i{ transform:translateX(3px); }

/* Phrases from the letters: one size, a ruled three-across grid. */
.vw-phrases{ container-type:inline-size; display:grid; gap:0 clamp(16px, 2vw, 28px); margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill, minmax(min(100%, max(200px, 12.5rem)), 1fr)); }
.vw-phrases li{ padding:14px 0 15px; border-top:1px solid var(--v2-rule-ink); font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.4; color:var(--on-ink); min-width:0; }
.vw-phrases li.is-key{ color:var(--white); font-weight:700; border-top-color:var(--red); }

/* ---------- 9. Testimonials from parents -------------------------------- */
.vw-letterindex{ container-type:inline-size; margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.vw-letterindex li{ border-bottom:1px solid var(--v2-rule); }
.vw-letterindex a{ display:grid; grid-template-columns:min(2.6rem, 41.6px) minmax(0,1fr) auto auto; gap:4px 12px; align-items:baseline; min-height:52px; padding:14px 0; color:inherit; text-decoration:none; }
.vw-letterindex__n{ font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:.08em; color:var(--red-text); }
.vw-letterindex b{ font-family:var(--display); font-weight:700; font-size:min(1rem, max(16px, calc((100cqi - 60px) / 11))); text-transform:uppercase; letter-spacing:.03em; line-height:1.25; overflow-wrap:normal; }
.vw-letterindex__k{ font-size:.82rem; color:var(--muted); text-align:right; }
.vw-letterindex .i{ width:.9rem; height:.9rem; color:var(--red); align-self:center; transform:rotate(90deg); }
.vw-letterindex a:hover b{ color:var(--red-deep); }
@container (max-width:24rem){
  .vw-letterindex a{ grid-template-columns:min(2.6rem, 41.6px) minmax(0,1fr) auto; }
  .vw-letterindex__k{ grid-column:2; grid-row:2; text-align:left; }
  .vw-letterindex .i{ grid-column:3; grid-row:1 / span 2; }
}

/* How the letters are shown: a ruled white strip under the hero. */
.vw-keysband{ background:var(--white); border-block:1px solid var(--v2-rule); padding-block:clamp(22px, 2.6vw, 32px); }
.vw-keys{ display:grid; gap:16px var(--v2-gap); margin:0; padding:0; list-style:none; }
.vw-keys li{ display:grid; justify-items:start; align-content:start; gap:8px; min-width:0; }
.vw-keys p{ font-size:.9rem; line-height:1.55; color:var(--muted); max-width:44ch; }
@container (min-width:50rem){ .vw-keys{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.vw-keysband .vw-privacy{ margin-top:clamp(16px, 2vw, 22px); padding-top:14px; border-top:1px solid var(--v2-rule); max-width:none; }

/* The three kinds of text, labelled consistently. */
.vw-kind{ display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:2px; font-family:var(--display); font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.2; }
.vw-kind--full{ background:var(--ink); color:var(--white); }
.vw-kind--excerpt{ border:1.5px solid var(--red-deep); color:var(--red-deep); background:var(--white); }
.vw-kind--summary{ border:1.5px dashed var(--muted); color:var(--muted); }

/* One letter: a lead column (number, kind, title, summary, facts) that
   stays beside the letter while it is read, and the letter itself at a
   comfortable reading width in the wide column. */
.vw-letter__meta{ display:grid; gap:16px; align-content:start; }
.vw-letter__meta > *{ min-width:0; }
.vw-letter__no{ display:flex; align-items:center; gap:12px; }
.vw-letter__n{ font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.1em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.vw-letter__meta{ container-type:inline-size; }
.vw-letter__meta h2{ max-width:24ch; font-size:min(clamp(1.35rem, calc(1rem + 1vw), 1.625rem), max(clamp(21.6px, calc(16px + 1vw), 26px), calc(100cqi / var(--v2-h2-em, 7.4)))); line-height:1.12; text-wrap:balance; }
.vw-letter__facts{ container-type:inline-size; display:grid; margin:4px 0 0; border-top:1px solid var(--v2-rule); }
.vw-letter__facts > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px 12px; padding:9px 0; border-bottom:1px solid var(--v2-rule); }
.vw-letter__facts dt{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:.2em; }
.vw-letter__facts dd{ margin:0; font-size:.92rem; line-height:1.45; color:var(--ip-text); }
@container (min-width:18rem){ .vw-letter__facts > div{ grid-template-columns:4.5rem minmax(0,1fr); } }
.vw-summary{ display:grid; justify-items:start; gap:10px; }
.vw-summary p{ font-size:.98rem; line-height:1.62; color:var(--ip-text); max-width:46ch; padding-left:14px; border-left:3px solid var(--grey-line); }
.vw-letter__body{ display:grid; justify-items:start; gap:12px; min-width:0; }
.vw-letter__body > *{ max-width:100%; }

.vw-sheet{ position:relative; margin:0; width:100%; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; padding:clamp(24px, 3.4vw, 44px) clamp(18px, 3.4vw, 44px) clamp(22px, 3vw, 36px); box-shadow:var(--v2-shadow); }
.vw-sheet::before{ content:"\201C"; position:absolute; top:clamp(-6px, -.6vw, -2px); right:clamp(16px, 2.6vw, 32px); font-family:var(--display); font-weight:700; font-size:clamp(4rem, 7vw, 6rem); line-height:1; color:var(--red); pointer-events:none; }
.vw-sheet p{ font-size:clamp(1rem, calc(.97rem + .2vw), 1.09rem); line-height:1.76; color:var(--ip-text); max-width:64ch; }
.vw-sheet p + p{ margin-top:1em; }
.vw-sheet__salute{ font-family:var(--display); font-weight:700; color:var(--ink) !important; padding-right:3.6rem; }
.vw-sheet__shout{ font-family:var(--display); font-weight:700; letter-spacing:.14em; color:var(--red-deep) !important; }
.vw-sheet__sign{ display:grid; gap:2px; margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--v2-rule); font-size:.95rem; color:var(--muted); }
.vw-sheet__sign b{ font-family:var(--display); color:var(--ink); }
.vw-sheet--excerpt{ border:1.5px dashed var(--red-deep); }
.vw-sheet__note{ font-size:.86rem; line-height:1.5; color:var(--muted); max-width:60ch; }

/* ---------- 10. Print (region heads: foundation print rule) ------------- */
@media print{
  .vw-sheet{ box-shadow:none; }
  /* Every region prints open (js/inner.js also opens them before printing). */
  .vw-acc::details-content{ content-visibility:visible; display:block; }
  .vw-acc > summary::after{ display:none; }
}