@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-opsz-italic.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext-opsz-italic.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2195,U+2212,U+2215,U+2265,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
a{color:inherit;text-decoration:none}

  :root{
    --ink:#0A0D12;
    --ink-2:#0f141b;
    --ink-3:#141b25;
    --paper:#F3EEE5;
    --paper-2:#ece5d8;
    --muted:rgba(243,238,229,.66);
    --faint:rgba(243,238,229,.50);
    --line:rgba(243,238,229,.16);
    --gold:#D3A24E;
    --gold-soft:rgba(211,162,78,.85);
    --shadow:0 20px 60px rgba(0,0,0,.5);
    --pad:clamp(20px,5vw,80px);
    /* light "solid ground" */
    --lt-bg:#F3EEE5;
    --lt-bg-2:#ffffff;
    --lt-ink:#1a1f27;
    --lt-muted:#57606d;
    --lt-line:rgba(26,31,39,.14);
    /* term colours */
    --t-canada:#4b8b5b;
    --t-himalaya:#cf9a3c;
    --t-japan:#4b7fb0;
    --t-africa:#cf7a3a;
    --t-andes:#7d5fa8;
    --t-alaska:#7db98a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);color:var(--paper);
    font-family:"Inter",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    line-height:1.5;
  }
  a{color:inherit}

  /* ============ NAV ============ */
  .nav{position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:clamp(14px,2vw,22px) var(--pad);
    transition:background .4s,border-color .4s,padding .4s;
    border-bottom:1px solid transparent;}
  .nav.scrolled{background:rgba(8,11,16,.86);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper);cursor:pointer}
  .brand .wm{font-family:"Fraunces",serif;font-weight:430;font-size:1.34rem;
    letter-spacing:.32em;padding-left:.32em}
  .nav__links{display:flex;gap:clamp(16px,2vw,32px);list-style:none;align-items:center}
  .nav__links a{color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:400;
    letter-spacing:.03em;transition:color .3s;white-space:nowrap;cursor:pointer;padding:4px 0;
    border-bottom:1px solid transparent}
  .nav__links a:hover{color:var(--paper)}
  .nav__links a.active{color:var(--paper);border-bottom-color:var(--gold)}
  .nav__cta{font:inherit;font-size:.8rem;font-weight:500;letter-spacing:.02em;
    color:var(--paper);border:1px solid var(--line);background:rgba(243,238,229,.04);
    padding:10px 17px;border-radius:999px;cursor:pointer;transition:.3s;backdrop-filter:blur(4px);white-space:nowrap}
  .nav__cta:hover{border-color:var(--gold-soft);color:#fff;background:rgba(211,162,78,.14)}
  .burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
  .burger span{width:24px;height:1.6px;background:var(--paper);transition:.3s}
  .mobile-menu{display:none}

  /* ============ PAGE ROUTER ============ */
  .page{display:none;animation:fade .6s ease both}
  .page.active{display:block}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* ============ WHOLE-IMAGE FRAME ============ */
  /* Every photo is shown complete (object-fit:contain). A blurred, darkened copy of the
     same image — cloned in JS, so the source is never duplicated in the file — fills the
     surround, and a gradient scrim carries any text sitting over it. */
  .frame{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
  .frame>img,.frame>picture>img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;object-position:center;z-index:1}
  .frame>img.frame__bg,.frame>picture>img.frame__bg{object-fit:cover;z-index:0;
    filter:blur(34px) brightness(.46) saturate(.82);transform:scale(1.16);
    transform-origin:60% 70%;animation:kenburns 34s ease-in-out infinite alternate;will-change:transform}
  @keyframes kenburns{from{transform:scale(1.16)}to{transform:scale(1.3) translateY(-1.5%)}}

  /* ============ HERO ============ */
  .hero{position:relative;min-height:clamp(560px,58vw,100vh);overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
  .hero--page{min-height:clamp(430px,46vw,74vh)}
  .hero__bg{position:absolute;inset:0;z-index:0}
  .hero__bg svg{width:100%;height:100%;display:block}
  .scrim{position:absolute;inset:0;z-index:3;pointer-events:none}
  .scrim.top{background:linear-gradient(to bottom,rgba(6,8,12,.72),rgba(6,8,12,0) 26%)}
  .scrim.bottom{background:linear-gradient(to top,rgba(6,8,12,.96),rgba(6,8,12,.52) 42%,rgba(6,8,12,0) 76%)}
  .scrim.left{background:linear-gradient(to right,rgba(6,8,12,.68),rgba(6,8,12,.18) 46%,rgba(6,8,12,0) 68%)}
  .hero--page .scrim.left{background:linear-gradient(to right,rgba(6,8,12,.84),rgba(6,8,12,.34) 44%,rgba(6,8,12,0) 74%)}
  .hero--page .scrim.bottom{background:linear-gradient(to top,rgba(6,8,12,.96),rgba(6,8,12,.6) 46%,rgba(6,8,12,.05) 82%)}
  .hero__content{position:relative;z-index:4;padding:0 var(--pad) clamp(64px,10vh,120px);max-width:1000px;width:100%;
    text-shadow:0 1px 26px rgba(4,6,10,.55)}
  .hero--page .hero__content{padding-bottom:clamp(44px,7vh,76px)}

  /* mobile: the photo runs at its own height, text sits beneath it — never over it */
  @media(max-width:760px){
    .hero,.hero--page{min-height:0;display:block}
    .hero>img:not(.frame__bg),.hero>picture>img{position:relative;inset:auto;height:auto;max-height:66vh;object-fit:contain}
    .hero__content{padding-top:24px;padding-bottom:40px}
    .hero__content,.hero--page .hero__content{padding-bottom:44px}
  }

  /* ============ SHARED TYPE / BLOCKS ============ */
  .eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:20px}
  .eyebrow .rule{width:40px;height:1px;background:var(--gold);flex:none}
  .eyebrow span{font-size:.71rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
  h1{font-family:"Fraunces",serif;font-weight:340;font-size:clamp(2.5rem,6vw,5.2rem);
    line-height:1.02;letter-spacing:-.012em;max-width:16ch;text-wrap:balance}
  h1.h1--long{font-size:clamp(2.1rem,4vw,3.7rem);line-height:1.08;max-width:23ch}
  /* v64 (Arvin, 20 Sep 2026): the home hero is the wordmark — the header's Fraunces 430 uppercase, its
     .32em tracking eased to .2em at display size — over the sentence in the lead style */
  h1.h1--wm{font-weight:430;font-size:clamp(2.2rem,4.2vw,3.9rem);line-height:1.05;letter-spacing:.2em;
    text-transform:uppercase;max-width:none;text-wrap:wrap}
  /* v71 (Arvin, 20 Sep 2026): the About hero sentence one level down, in the home lead style, still the page h1 */
  h1.h1--lead{font-weight:340;font-size:clamp(1.3rem,2.2vw,1.95rem);line-height:1.3;letter-spacing:0;
    max-width:34ch;text-wrap:balance}
  h1 em{font-style:italic;font-weight:340;color:#fff}
  h2{font-family:"Fraunces",serif;font-weight:360;font-size:clamp(1.8rem,3.6vw,3rem);
    line-height:1.08;letter-spacing:-.01em;max-width:36ch;text-wrap:balance}
  h3{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.005em}
  /* v64: the boxes are em widths (640px and 620px at the bottom of each clamp) so the line count holds as the type scales */
  .standfirst{margin-top:22px;max-width:38.1em;font-size:clamp(1.05rem,1.4vw,1.3rem);
    font-weight:300;line-height:1.5;color:var(--muted)}
  .standfirst b{color:var(--paper);font-weight:400}
  .sub{margin-top:24px;max-width:38.75em;font-size:clamp(1rem,1.3vw,1.2rem);font-weight:300;line-height:1.55;color:var(--muted)}
  .sub b{color:var(--paper);font-weight:400}
  .sub--lead{font-family:"Fraunces",serif;font-weight:340;color:var(--paper);
    font-size:clamp(1.3rem,2.2vw,1.95rem);line-height:1.3;max-width:34ch;margin-top:20px}

  /* section wrappers */
  .section{padding:clamp(64px,10vh,130px) var(--pad);position:relative}
  .section .inner{max-width:1120px;margin:0 auto}
  .section .narrow{max-width:760px;margin:0 auto}

  /* ===================================================================
     v46, 10 Aug 2026 — PROSE FILLS THE TEXT COLUMN IT SITS IN.
     The site carried TEN different text widths (554 / 560 / 576 / 592 / 604 / 666 / 760 /
     864 / 1000 / 1120), mixed inside single sections. Every "cut off on the right" report
     since v42 was a symptom: a 560px bullet list between two 1000px tables reads as broken
     because it is 440px short of its neighbours.
     No element keeps a private measure any more. The column decides:
       · the ten curriculum sub-pages -> 1000px
       · /home and merged /curriculum -> the 760px centred block from v45 (grids run wider)
     Arvin ruled on the two with a real cost: the dossier rows (592 -> 764, ~100 characters,
     the densest reading on the site) and the headings (864 -> 1000). Both in, so that
     nothing stops short of anything beside it.
     DELIBERATELY UNTOUCHED: h1 and hero standfirsts (display type on a left-aligned
     overlay), .claim blockquote (pull quotes are meant to be narrow), .form, .diagram,
     .article, footer .tagline, and anything inside a .card or a table — a card paragraph is
     sized by its card, not by the column.
     verify_site now measures every prose element on every route against its own section's
     column. That gate is the point: the reason this kept coming back is that nothing checked.
     =================================================================== */
  [data-route^="curriculum/"] .body,
  [data-route^="curriculum/"] .body p,
  [data-route^="curriculum/"] ul.marked li,
  [data-route^="curriculum/"] .cur-theme,
  [data-route^="curriculum/"] .cur-rationale,
  [data-route^="curriculum/"] .cur-v,
  [data-route^="curriculum/"] .comp-def,
  [data-route^="curriculum/"] .field-block .fbody,
  [data-route^="curriculum/"] h2
  {max-width:none}
  [data-route="home"] ul.marked li,
  [data-route="curriculum"] ul.marked li
  {max-width:none}


  /* ===================================================================
     v45, 10 Aug 2026 — ONE CENTRE LINE ON /home AND /curriculum.
     Replaces v44's "one left edge", which was the wrong goal and left the prose off the
     axis its own diagram and card rows sat on. Only `h2` and `.body` were ever off centre;
     everything else already sat at 720 on a 1440 screen.
       · the container is 1120 and centred
       · every TEXT element is capped at 760 with auto side margins -> centre 720
       · GRIDS ARE THE EXCEPTION (Arvin's ruling): they take the text column's LEFT EDGE and
         run to the page gutter, so a heading is never indented from its own cards.
     `.center` is excluded — Home's closing line is centred type and already on the axis.
     The diagram is untouched: auto margins in a 1120 box centre it at 720, per v39.
     SCOPED to these two routes — they are the only ones that mix .narrow with .inner.
     =================================================================== */
  [data-route="home"] .section:not(.center) > .narrow,
  [data-route="home"] .section:not(.center) > .inner,
  [data-route="curriculum"] .section:not(.center) > .narrow,
  [data-route="curriculum"] .section:not(.center) > .inner
  {max-width:1120px;margin:0 auto}
  [data-route="home"] .section:not(.center) > .narrow > h2,
  [data-route="home"] .section:not(.center) > .narrow > .body,
  [data-route="home"] .section:not(.center) > .narrow > .eyebrow,
  [data-route="home"] .section:not(.center) > .narrow > ul.marked,
  [data-route="home"] .section:not(.center) > .narrow > .cta-row,
  [data-route="home"] .section:not(.center) > .inner > h2,
  [data-route="home"] .section:not(.center) > .inner > .body,
  [data-route="home"] .section:not(.center) > .inner > .eyebrow,
  [data-route="home"] .section:not(.center) > .inner > ul.marked,
  [data-route="home"] .section:not(.center) > .inner > .cta-row,
  [data-route="curriculum"] .section:not(.center) > .narrow > h2,
  [data-route="curriculum"] .section:not(.center) > .narrow > .body,
  [data-route="curriculum"] .section:not(.center) > .narrow > .eyebrow,
  [data-route="curriculum"] .section:not(.center) > .narrow > ul.marked,
  [data-route="curriculum"] .section:not(.center) > .narrow > .cta-row,
  [data-route="curriculum"] .section:not(.center) > .inner > h2,
  [data-route="curriculum"] .section:not(.center) > .inner > .body,
  [data-route="curriculum"] .section:not(.center) > .inner > .eyebrow,
  [data-route="curriculum"] .section:not(.center) > .inner > ul.marked,
  [data-route="curriculum"] .section:not(.center) > .inner > .cta-row
  {max-width:760px;margin-left:auto;margin-right:auto}
  [data-route="home"] .section:not(.center) > .narrow > .grid,
  [data-route="home"] .section:not(.center) > .inner > .grid,
  [data-route="curriculum"] .section:not(.center) > .narrow > .grid,
  [data-route="curriculum"] .section:not(.center) > .inner > .grid
  {margin-left:max(0px,calc((100% - 760px)/2));margin-right:0}
  [data-route="home"] #ch-strands > .inner > .grid{margin-left:0;margin-right:0}   /* v61: the strands sit under the diagram, full width */



  /* ===================================================================
     v42, 10 Aug 2026 — THE LIGHT SECTION TREATMENT IS RETIRED.
     Arvin ruled ink everywhere. Nothing carries `section--light` any more and
     verify_build asserts the class appears nowhere in the markup. The rules below are
     therefore INERT and are KEPT DELIBERATELY, at his ruling and by the standing
     convention that a removed section's CSS stays. Three of them exist because of
     contrast audits (v30's term cards, v31's .lbl at 2.01:1, v31's gold arrow at
     2.32:1); deleting them would throw away that record along with the styling.
     Four colours that had been propped up BY this treatment moved with its retirement —
     see build_v42.py §2. Do not reintroduce a light section without re-running the
     contrast audit: everything below assumes a cream ground.
     =================================================================== */
  .section--light{background:var(--lt-bg);color:var(--lt-ink)}
  .section--light .eyebrow span{color:#8a7f6a}
  .section--light h2,.section--light h3{color:#12161d}
  .section--light .body,.section--light p{color:#3a424e}
  .section--paper2{background:var(--lt-bg-2)}
  .section--ink2{background:var(--ink-2)}

  .body{margin-top:20px;font-size:1.05rem;font-weight:300;line-height:1.62;color:var(--muted);max-width:66ch}
  .body p+p{margin-top:1.1em}
  .body strong,.body b{color:var(--paper);font-weight:500}
  .section--light .body strong,.section--light .body b{color:#12161d;font-weight:600}
  .lead{font-size:1.18rem;line-height:1.55}

  .kicker-lg{font-family:"Fraunces",serif;font-weight:340;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.12;max-width:22ch}

  /* CTA */
  .cta-row{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .btn-primary{font:inherit;font-size:.9rem;font-weight:500;letter-spacing:.01em;
    background:var(--gold);color:#1a1206;border:none;padding:14px 24px;border-radius:999px;
    cursor:pointer;transition:.3s;box-shadow:var(--shadow);text-decoration:none;display:inline-block}
  .btn-primary:hover{background:#e5b666;transform:translateY(-2px)}
  .btn-ghost{color:inherit;text-decoration:none;font-size:.9rem;font-weight:400;
    display:inline-flex;align-items:center;gap:8px;position:relative;padding-bottom:3px;cursor:pointer}
  .btn-ghost::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
    background:var(--faint);transform:scaleX(.34);transform-origin:left;transition:transform .35s}
  .section--light .btn-ghost::after{background:rgba(26,31,39,.28)}
  .btn-ghost:hover::after{transform:scaleX(1);background:var(--gold-soft)}
  .btn-ghost .arw{transition:transform .35s}
  .btn-ghost:hover .arw{transform:translateX(5px)}

  /* reassurance strip */
  .reassure{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;justify-content:center;
    padding:16px var(--pad);background:rgba(255,255,255,.02)}
  .reassure li{list-style:none;font-size:.66rem;font-weight:500;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
  .reassure li::before{content:"◆";color:var(--gold);font-size:.5rem;opacity:.85}
  .reassure li:first-child::before{display:none}

  /* generic grid of cards */
  .grid{display:grid;gap:22px;margin-top:40px}
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .card{border:1px solid var(--line);border-radius:14px;padding:26px;background:rgba(255,255,255,.02);transition:.3s}
  .section--light .card{border-color:var(--lt-line);background:#fff}
  .card h3{margin-bottom:8px}
  .card p{font-size:.98rem;font-weight:300;line-height:1.55;color:var(--muted)}
  .section--light .card p{color:#3a424e}

  /* pillar / feature list */
  .feature{margin-top:14px}
  .feature h3{color:var(--gold);font-family:"Inter",sans-serif;font-size:.8rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}

  /* list with gold markers */
  ul.marked{list-style:none;margin-top:22px;display:grid;gap:14px}
  ul.marked li{position:relative;padding-left:26px;font-weight:300;line-height:1.55;color:var(--muted);max-width:70ch}
  ul.marked li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
    border:1px solid var(--gold);transform:rotate(45deg)}
  ul.marked li b,ul.marked li strong{color:var(--paper);font-weight:500}
  .section--light ul.marked li{color:#3a424e}
  .section--light ul.marked li b,.section--light ul.marked li strong{color:#12161d;font-weight:600}

  /* pull quote / claim */
  .claim{padding:clamp(80px,16vh,180px) var(--pad);text-align:center;position:relative;background:var(--ink)}
  .claim blockquote{font-family:"Fraunces",serif;font-weight:330;
    font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:1.24;max-width:20ch;margin:0 auto;letter-spacing:-.01em}
  .claim .rule{width:60px;height:2px;background:var(--gold);margin:34px auto 0}
  .claim.small blockquote{font-size:clamp(1.5rem,3vw,2.5rem);max-width:26ch}

  /* competency band */
  .comp-band{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:30px;font-family:"Fraunces",serif;
    font-weight:360;font-size:clamp(1.3rem,3vw,2.3rem);line-height:1.2;justify-content:center;text-align:center}
  .comp-band span{padding:0 clamp(10px,1.6vw,20px);position:relative;color:var(--paper)}
  .comp-band span+span::before{content:"·";position:absolute;left:-4px;color:var(--gold)}

  /* diagram now closes the model section — tighten the gap into the cards */
  #ch-model{padding-bottom:clamp(38px,6vh,72px)}
  #ch-strands{padding-top:clamp(48px,7vh,86px)}

  /* education-model diagram */
  .diagram{margin:67px auto 58px;max-width:442px}  /* v39: margins carry what the
     cropped viewBox used to carry as invisible padding; 442px keeps the artwork
     the exact size it was before the crop. Both are desktop-parity, Arvin 10 Aug. */
  .diagram svg{width:100%;height:auto;display:block;overflow:visible}
  .diagram--center{margin:34px auto 10px;max-width:560px}
  /* v39, 10 Aug 2026: the old `max-width:100%` rule here is GONE — it was a no-op
     against a 600px cap and would have caused a 442 -> 576px jump against this one.
     What replaces it is the only thing this breakpoint now needs: the six competency
     labels, which measured 6.25px at 390px before the crop. 14 is Arvin's number —
     at 17 AWARENESS and JUDGEMENT cross the triangle legs. */
  @media(max-width:640px){.diagram svg .dg-cmp{font-size:14px}}

  /* eyebrow labels inside light sections */
  .lbl{font-size:.71rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}

  /* term chip */
  .chip{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .chip .dot{width:9px;height:9px;border-radius:50%;background:var(--gold)}

  /* term cards */
  .term-card{cursor:pointer;overflow:hidden;position:relative;border:1px solid var(--line);border-radius:14px;
    padding:24px;background:rgba(255,255,255,.02);transition:.35s;border-left:3px solid var(--gold)}
  .term-card:hover{background:rgba(255,255,255,.05);transform:translateY(-3px)}
  .term-card .num{font-family:"Fraunces",serif;font-size:.9rem;color:var(--muted)}
  .term-card h3{margin:6px 0 8px}
  .term-card p{font-size:.94rem;font-weight:300;color:var(--muted);line-height:1.5}
  .term-card .when{margin-top:14px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

  /* term page field blocks */
  .field-block{border-top:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:220px 1fr;gap:24px}
  .field-block:last-child{border-bottom:1px solid var(--line)}
  .field-block .flabel{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .field-block .fbody{font-weight:300;line-height:1.6;color:var(--muted);max-width:70ch}
  .field-block .fbody b{color:var(--paper);font-weight:500}

  /* meta line */
  .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:.75rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--faint)}
  .meta .g{color:var(--gold)}

  /* accordion (FAQ) */
  .acc{border-top:1px solid var(--lt-line)}
  .acc-item{border-bottom:1px solid var(--lt-line)}
  .acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 40px 22px 0;
    font-family:"Fraunces",serif;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--paper);position:relative;line-height:1.3}
  .acc-q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
    font-family:"Inter";font-size:1.5rem;color:var(--gold);font-weight:300;transition:transform .3s}
  .acc-item.open .acc-q::after{content:"–"}
  .acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
  .acc-a .inner-a{padding:0 40px 24px 0;color:var(--muted);font-weight:300;line-height:1.6;max-width:74ch}
  .acc-a .inner-a b{color:var(--paper);font-weight:600}
  .acc-a .inner-a p+p{margin-top:.75em}

  /* form */
  .form{max-width:600px;margin-top:36px}
  .form .field{margin-bottom:22px}
  .form label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--paper);margin-bottom:6px}
  .form .hint{font-weight:400;color:#7a8494;font-size:.78rem;font-style:italic}
  /* v85 (Arvin, 22 Oct 2026): dark fields, like the password popup — a faint fill, a thin rule, the gold focus below */
  .form{color-scheme:dark}
  .section--form{padding-top:clamp(40px,6vh,64px)}
  .form-intro{max-width:600px}.form-intro+.form{margin-top:28px}
  .form input,.form textarea,.form select{width:100%;font:inherit;font-size:1rem;padding:13px 15px;border:1px solid var(--line);
    border-radius:9px;background:rgba(243,238,229,.06);color:var(--paper);transition:.25s}
  .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(211,162,78,.16)}
  .form select option{background:var(--ink-2);color:var(--paper)}
  .form .field .hint{display:block;margin-top:7px}
  .form textarea{min-height:130px;resize:vertical}
  .form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:#3a424e;font-weight:300;line-height:1.45}
  .form .consent input{width:auto;margin-top:3px}

  /* two-step / process ribbon */
  .steps{counter-reset:s;display:grid;gap:2px;margin-top:36px}
  .step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line);align-items:start}
  .step:last-child{border-bottom:1px solid var(--line)}
  .step .n{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--gold)}
  .step h3{margin-bottom:6px}
  .step p{font-weight:300;color:var(--muted);line-height:1.55}
  .section--light .step{border-color:var(--lt-line)}
  .section--light .step p{color:#3a424e}
  /* v84 (Arvin, 22 Oct 2026, option 3): Admissions, "Joining Pelion" on the secondary ink — the steps as a timeline: gold rings
     joined by a thin gold line; no rule above step 1; separators between the steps, from the text column; on phones the
     numbers stay beside the headings (the 760px rule stacks plain .step; .steps--line outranks it). */
  .steps-intro{margin-top:14px;max-width:none}.steps-intro p{max-width:none}
  .steps--line{gap:0;margin-top:40px}
  .steps--line .step{grid-template-columns:56px 1fr;gap:18px;border:0;padding:0;position:relative}
  .steps--line .step>div:last-child{padding:4px 0 30px}
  .steps--line .step+.step>div:last-child{border-top:1px solid var(--line);padding-top:28px}
  .steps--line .step:last-child>div:last-child{padding-bottom:0}
  .steps--line .step .n{width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:1.25rem;line-height:1;background:var(--ink-2);position:relative;z-index:1}
  .steps--line .step+.step .n{margin-top:22px}
  .steps--line .step::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:rgba(211,162,78,.45)}
  .steps--line .step:first-child::before{top:22px}
  .steps--line .step:last-child::before{bottom:auto;height:44px}
  @media(max-width:760px){.steps--line .step{grid-template-columns:56px 1fr;gap:16px}}

  /* timeline strip */
  .timeline{display:grid;gap:2px;margin-top:36px}
  .tl-item{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--lt-line)}
  .tl-item:last-child{border-bottom:1px solid var(--lt-line)}
  .tl-item .when{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
  .tl-item p{font-weight:300;color:#3a424e;line-height:1.55}

  /* price */
  .price{font-family:"Fraunces",serif;font-size:clamp(2.4rem,5vw,4rem);color:#12161d;margin:8px 0 4px}
  .price span{font-size:1rem;color:#7a8494;font-family:"Inter"}

  /* art-direction note */
  .art-note{margin-top:22px;font-size:.78rem;font-style:italic;color:var(--faint);
    border-left:2px solid var(--line);padding-left:14px;max-width:60ch;line-height:1.5}
  .section--light .art-note{color:#9aa2ad;border-color:var(--lt-line)}
  .show-art .art-note{display:block}
  .art-note{display:none}
  .show-art .art-note{display:block}

  /* placeholder box */
  .ph-box{border:1px dashed var(--line);border-radius:12px;padding:24px;margin-top:24px;
    font-size:.9rem;font-style:italic;color:var(--faint);line-height:1.55;background:rgba(255,255,255,.015)}
  .section--light .ph-box{border-color:var(--lt-line);color:#8a7f6a;background:rgba(0,0,0,.015)}

  /* logo strip */
  .logos{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:26px;align-items:center}
  .logos span{font-family:"Fraunces",serif;font-size:1.05rem;color:var(--muted);opacity:.8}

  /* post card */
  .post-card{cursor:pointer;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02);transition:.3s;display:flex;flex-direction:column}
  .post-card:hover{border-color:var(--gold-soft);transform:translateY(-3px)}
  .post-card .band{height:5px;background:var(--gold)}
  .post-card .pc-body{padding:24px}
  .post-card .cat{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .post-card h3{margin-bottom:10px;line-height:1.2}
  .post-card p{font-size:.94rem;font-weight:300;color:var(--muted);line-height:1.5}
  .post-card .by{margin-top:16px;font-size:.74rem;color:var(--faint);letter-spacing:.04em}

  /* article body */
  .article{max-width:680px;margin:0 auto}
  .article .body{max-width:none;font-size:1.12rem;line-height:1.72}
  .article .body p+p{margin-top:1.3em}

  /* footer */
  footer{background:var(--ink);border-top:1px solid var(--line);padding:clamp(50px,8vh,90px) var(--pad) 40px}
  footer .f-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
  footer .brand--foot .wm{font-size:1.6rem}
  footer .brand--foot svg{width:30px;height:30px}
  footer .f-nav{display:flex;gap:60px;flex-wrap:wrap}
  footer .f-col h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:600}
  footer .f-col a{display:block;color:var(--muted);text-decoration:none;font-size:.9rem;margin-bottom:9px;cursor:pointer;transition:.25s}
  footer .f-col a:hover{color:var(--gold)}
  footer .f-base{max-width:1120px;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.78rem;color:var(--faint)}

  /* ===== IMAGERY ===== */
  img{max-width:100%;display:block}
  /* card thumbnail, whole image inside a fixed plate */
  .card-frame{width:100%;height:230px;border-radius:9px;margin-bottom:18px}
  .tc-img{width:100%;height:170px;object-fit:cover;border-radius:8px;margin-bottom:16px}
  .pc-img{width:100%;height:200px;object-fit:cover}
  .work-card-img{width:100%;height:230px;object-fit:cover;border-radius:8px;margin-bottom:16px}

  /* full-bleed photo band — whole image, blurred surround */
  .img-full{position:relative;width:100%;height:clamp(340px,62vw,720px);max-height:88vh;overflow:hidden}
  .img-full .cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:26px var(--pad) 20px;
    background:linear-gradient(to top,rgba(6,8,12,.82),rgba(6,8,12,0));
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .img-full .cap b{color:var(--paper);font-weight:500}

  /* split image + text */
  .split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .split.rev .im{order:2}
  .split .txt{padding:clamp(40px,7vh,96px) var(--pad);display:flex;flex-direction:column;justify-content:center}
  .split .im{min-height:360px;background-size:cover;background-position:center}
  .split .txt .eyebrow{margin-top:0}

  /* gallery strip */
  .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}
  .gal img{width:100%;height:190px;object-fit:cover;border-radius:6px;transition:.3s}
  .gal img:hover{transform:translateY(-3px);opacity:.92}
  .gal .tall{grid-row:span 2;height:390px}

  @media(max-width:760px){
    .split{grid-template-columns:1fr}
    .split.rev .im{order:0}
    .split .im{min-height:280px}
    .gal{grid-template-columns:1fr 1fr}
    .gal .tall{grid-row:span 1;height:190px}
  }

  /* rise animation */
  .rise{opacity:0;transform:translateY(16px);animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}
  .d4{animation-delay:.5s}.d5{animation-delay:.64s}.d6{animation-delay:.8s}

  /* art-direction toggle btn */
  .art-toggle{position:fixed;bottom:18px;right:18px;z-index:60;font:inherit;font-size:.72rem;font-weight:500;
    letter-spacing:.06em;color:var(--paper);background:rgba(8,11,16,.86);border:1px solid var(--line);
    border-radius:999px;padding:9px 15px;cursor:pointer;backdrop-filter:blur(8px);transition:.3s}
  .art-toggle:hover{border-color:var(--gold-soft);color:#fff}
  .art-toggle.on{background:var(--gold);color:#1a1206;border-color:var(--gold)}

  /* utility */
  .center{text-align:center}
  .mt0{margin-top:0}
  .divider{height:1px;background:var(--line);margin:0 var(--pad)}

  @media(max-width:940px){
    .g-3{grid-template-columns:1fr 1fr}
    footer .f-inner{flex-direction:column}
  }
  @media(max-width:760px){
    .nav__links,.nav>.nav__cta{display:none}
    .burger{display:flex}
    .g-2,.g-3{grid-template-columns:1fr}
    .field-block{grid-template-columns:1fr;gap:8px}
    .tl-item,.step{grid-template-columns:1fr;gap:6px}
    .step{grid-template-columns:1fr}
    .mobile-menu.open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:45;
      background:rgba(8,11,16,.98);backdrop-filter:blur(12px);padding:100px var(--pad) 40px;gap:6px}
    .mobile-menu a{color:var(--paper);text-decoration:none;font-family:"Fraunces",serif;font-size:1.6rem;
      padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
    .mobile-menu .btn-primary{margin-top:20px;text-align:center}
    .comp-band{font-size:1.15rem}
  }

  /* ---- Journey scrolling timeline ---- */
  .tl-wrap{position:relative;margin-top:44px}
  .tl-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:16px;cursor:grab;scrollbar-width:thin;scrollbar-color:rgba(211,162,78,.5) rgba(255,255,255,.06)}
  .tl-scroll.dragging{cursor:grabbing;scroll-behavior:auto}
  .tl-track{display:flex;gap:36px;width:max-content;position:relative;padding:6px var(--pad) 4px;margin-left:auto;margin-right:auto}
  .tl-track::before{content:"";position:absolute;left:0;right:0;top:43px;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-soft) 70px,var(--gold-soft) calc(100% - 70px),transparent);opacity:.55}
  .tl-stop{position:relative;width:300px;flex:0 0 auto;cursor:pointer;outline:none}
  .tl-term{display:block;height:20px;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-family:"Inter",sans-serif;white-space:nowrap}
  .tl-node{position:relative;height:34px}
  .tl-dot{position:absolute;left:calc(50% - 6px);top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;
    background:var(--tc,var(--gold));box-shadow:0 0 0 4px rgba(211,162,78,.14);transition:box-shadow .3s}
  .tl-card{position:relative;margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid var(--line);height:340px;background:var(--ink-3)}
  .tl-num{position:absolute;z-index:3;top:12px;left:14px;font-family:"Fraunces",serif;font-size:.95rem;color:var(--paper);opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.6)}
  .tl-name{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:46px 16px 14px;font-family:"Fraunces",serif;font-size:1.12rem;line-height:1.25;color:var(--paper);
    background:linear-gradient(180deg,transparent,rgba(6,8,12,.9));transition:opacity .3s}
  .tl-blurb{position:absolute;z-index:4;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
    background:linear-gradient(180deg,rgba(6,8,12,.30),rgba(6,8,12,.93) 52%);opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
  .tl-blurb h4{font-family:"Fraunces",serif;font-weight:500;font-size:1.05rem;color:var(--paper);margin:0}
  .tl-blurb p{font-size:.86rem;font-weight:300;line-height:1.5;color:var(--muted);margin:0}
  .tl-more{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-family:"Inter",sans-serif}
  .tl-stop:hover .tl-blurb,.tl-stop:focus .tl-blurb{opacity:1;transform:none}
  .tl-stop:hover .tl-name,.tl-stop:focus .tl-name{opacity:0}
  .tl-stop:hover .tl-dot,.tl-stop:focus .tl-dot{box-shadow:0 0 0 7px rgba(211,162,78,.28)}
  .tl-end .tl-card{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 20%,var(--ink-3),var(--ink))}
  .tl-fade{position:absolute;top:0;bottom:16px;width:64px;pointer-events:none;z-index:2}
  .tl-fade.left{left:0;background:linear-gradient(90deg,var(--ink-2),rgba(15,20,27,0))}
  .tl-fade.right{right:0;background:linear-gradient(270deg,var(--ink-2),rgba(15,20,27,0))}
  .tl-btn{position:absolute;top:200px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
    background:rgba(10,13,18,.75);color:var(--paper);font-size:1.1rem;cursor:pointer;backdrop-filter:blur(6px);transition:border-color .25s,background .25s}
  .tl-btn:hover{border-color:var(--gold-soft);background:rgba(10,13,18,.95)}
  .tl-btn.prev{left:14px}
  .tl-btn.next{right:14px}
  .tl-hint{margin-top:14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-family:"Inter",sans-serif}
  @media(max-width:640px){.tl-stop{width:255px}.tl-card{height:310px}.tl-btn{display:none}}
  /* ---- home chapter nav ---- */
  .ch-nav{position:sticky;top:64px;z-index:40;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
    padding:10px clamp(12px,4vw,40px);background:rgba(10,13,18,.82);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  .ch-nav a{font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--faint);padding:6px 12px;border-radius:999px;cursor:pointer;transition:color .25s,background .25s;white-space:nowrap}
  .ch-nav a:hover{color:var(--paper)}
  .ch-nav a.on{color:var(--gold);background:rgba(211,162,78,.10)}
  @media(prefers-reduced-motion:reduce){
    .frame>img.frame__bg,.frame>picture>img.frame__bg{animation:none}.rise{animation-duration:.01s}.page{animation:none}
  }
  @media(max-width:760px){
    .frame>img.frame__bg,.frame>picture>img.frame__bg{filter:blur(24px) brightness(.5) saturate(.82)}
    .img-full{height:clamp(260px,72vw,520px)}
  }

  /* ============================================================
     v9b — images CROPPED TO FILL (the earlier treatment).
     Photos fill their frame edge to edge and are trimmed top/bottom;
     the blurred surround is switched off. Everything else matches v9.
     ============================================================ */
  .frame>img,.frame>picture>img{object-fit:cover}
  .frame>img.frame__bg,.frame>picture>img.frame__bg{display:none}
  .hero{min-height:100vh}
  .hero--page{min-height:72vh}
  .hero>img:not(.frame__bg),.hero>picture>img{transform-origin:60% 70%;
    animation:kenburns-crop 30s ease-in-out infinite alternate;will-change:transform}
  @keyframes kenburns-crop{from{transform:scale(1.05)}to{transform:scale(1.15) translateY(-2%)}}
  .img-full{height:clamp(300px,56vh,600px);max-height:none}
  .card-frame{height:210px}
  @media(max-width:760px){
    .hero,.hero--page{display:flex}
    .hero{min-height:74vh}
    .hero--page{min-height:72vh}
    .hero>img:not(.frame__bg),.hero>picture>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
    /* v79 (Arvin, 22:17 / 22:21): home and About crop from the left only — B, 75% — the zoom anchored to match.
       Written on the >picture> form every emitted hero takes: emit twins the img form and asserts its count (4). */
    [data-route="home"] .hero>picture>img,[data-route="about"] .hero>picture>img{object-position:75% 50%;transform-origin:75% 70%}
    /* v80 (Arvin, 23:16, option B): the home text clears the climbers — a taller hero, the text 24px off the foot,
       the photo ending 170px above it and fading into the ink behind the heading. Home only; the >picture> form as above. */
    [data-route="home"] .hero{min-height:80vh}
    [data-route="home"] .hero__content{padding-bottom:24px}
    [data-route="home"] .hero>picture>img{bottom:auto;height:calc(100% - 170px);
      -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
    .hero__content{padding-top:0;padding-bottom:clamp(64px,10vh,120px)}
    .img-full{height:clamp(260px,44vh,420px)}
  }
  @media(prefers-reduced-motion:reduce){.hero>img:not(.frame__bg),.hero>picture>img{animation:none}}



  /* ---- combined curriculum page: sticky in-page sub-nav ---- */
  .pg-sticky{position:sticky;top:64px;z-index:40;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
    align-items:center;
    padding:10px clamp(12px,4vw,40px);background:rgba(10,13,18,.86);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  /* v62 (Arvin, 19 Sep 2026): the developer's chip treatment — paper text at weight 500, every chip a
     bordered pill, wider padding — read better than the v20 faint chips; the gold active chip is ours. */
  .pg-sticky a{font-family:"Inter",sans-serif;font-size:10px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
    line-height:1.4;color:var(--paper);padding:7px 15px;border:1px solid var(--line);border-radius:24px;cursor:pointer;
    transition:color .25s,background .25s,border-color .25s;white-space:nowrap}
  .pg-sticky a:hover{border-color:var(--gold-soft)}
  .pg-sticky a.on{color:var(--gold);background:rgba(211,162,78,.11);border-color:transparent}
  /* The bar does two different jobs — scroll this page, and go to the page that carries the
     same material in full. v19 labelled the two groups; v20 drops the labels and lets the
     chip treatment carry it: the outbound three are lighter and bordered, the scroll three
     are not. (Arvin, 27 July 2026.) The markup distinction is what actually matters and it
     is unchanged — [data-jump] scrolls, [data-nav] navigates. */
  .pg-sticky a.pg-out{margin-left:2px}
  .pg-sticky a.pg-out:hover{background:rgba(211,162,78,.06)}
  /* on phones the chips scroll sideways rather than stacking three rows deep; the zone
     labels and the divider scroll with them, which is why they are inline, not absolute */
  @media(max-width:760px){
    .pg-sticky{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .pg-sticky::-webkit-scrollbar{display:none}
  }
  [id^="cur-"],#blocks,#canon,#competencies{scroll-margin-top:112px}

  /* ---- /about: the founders ---- */
  .founders{display:grid;gap:clamp(40px,6vw,64px);margin-top:30px}
  .founder{display:grid;grid-template-columns:215px 1fr;gap:clamp(24px,4vw,44px);align-items:start}
  .founder__id{text-align:center}
  /* NOT .frame — a portrait does not want the blurred-clone surround the bands use */
  .hs{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;margin:0 auto;
    border:1px solid var(--line)}
  .founder__id h3{margin-top:16px;font-size:1.1rem;line-height:1.25}
  .creds{margin-top:9px;font-size:.76rem;font-weight:300;line-height:1.65;color:var(--faint);
    text-wrap:balance}
  @media(max-width:760px){
    .founder{grid-template-columns:1fr;gap:18px}
  }

    .founder .body .creds{text-align:left;margin:0 0 14px;color:var(--faint)}
  .creds .cred{white-space:nowrap}
  .creds b{font-weight:600;color:var(--paper)}
  @media(max-width:640px){.creds .cred{white-space:normal}}

  /* v78 — the Founding Circle GRID (Arvin, 12 Oct 2026, the mockup he ruled on at 20:03): six tiles three across
     in the 1120px container — portrait, role line (Founder gold / Advisor --faint), name + LinkedIn icon,
     credentials each on one unbroken line (the longest is 322px at .71rem, so a tile needs ~360px: three
     columns from 1220px, two from 800px, one below). The bio floats beside the tile on hover, to the left of
     the last column (.tile--left, set by site.js), is pinned by click (.open), and on phones opens under the
     credentials. The portrait is not a link; the icon is. The v77 rows and the portrait-link rules are gone. */
  .circle--grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;align-items:start;margin-top:0}
  .circle--grid .tile{position:relative;display:block;min-width:0;padding:18px 12px 20px;border:1px solid transparent;border-radius:6px;
    cursor:pointer;outline:none;transition:border-color .25s ease,background-color .25s ease}
  .circle--grid .tile:focus-visible{border-color:rgba(211,162,78,.6)}
  .circle--grid .founder__id{display:flex;flex-direction:column;align-items:center;text-align:center}
  .circle--grid .hs{width:132px;height:132px;transition:box-shadow .25s ease,transform .25s ease}
  .circle--grid .tile:hover .hs,.circle--grid .tile:focus-visible .hs,.circle--grid .tile.open .hs{box-shadow:0 0 0 4px rgba(211,162,78,.35);transform:translateY(-2px)}
  .circle--grid .role{margin:12px 0 -6px;font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
  .circle--grid .role--founder{color:var(--gold)}
  /* v79 (Arvin, 22:09): the founder's portrait is ringed in gold at rest; the ring brightens and widens on hover / focus / open */
  .circle--grid .tile[data-role="founder"] .hs{border-color:var(--gold);box-shadow:0 0 0 2px rgba(211,162,78,.55)}
  .circle--grid .tile[data-role="founder"]:hover .hs,.circle--grid .tile[data-role="founder"]:focus-visible .hs,.circle--grid .tile[data-role="founder"].open .hs{box-shadow:0 0 0 4px var(--gold),0 0 18px rgba(211,162,78,.45)}
  .circle--grid .founder__id h3{margin-top:15px;font-size:1.06rem;line-height:1.3}
  .circle--grid .creds{margin-top:8px;font-size:.71rem;line-height:1.75;text-align:center;text-wrap:initial;white-space:nowrap}
  .circle--grid .creds .cred{white-space:nowrap}
  .circle--grid .member__bio{position:absolute;top:-1px;left:100%;width:min(372px,60vw);max-width:none;margin:0;padding-left:14px;z-index:5;
    font-size:.86rem;line-height:1.58;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
  .circle--grid .tile--left .member__bio{left:auto;right:100%;padding-left:0;padding-right:14px}
  .circle--grid .member__bio p{position:relative;margin:0;padding:20px 22px 22px;border:1px solid var(--line);border-radius:6px;
    background:var(--ink-2);box-shadow:0 20px 50px rgba(0,0,0,.45)}
  .circle--grid .member__bio p::before{content:"";position:absolute;top:60px;left:-7px;width:12px;height:12px;background:var(--ink-2);
    border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
  .circle--grid .tile--left .member__bio p::before{left:auto;right:-7px;border:0;border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .circle--grid .tile.open{border-color:var(--line);background:var(--ink-2);z-index:6}
  .circle--grid .tile.open .member__bio{opacity:1;visibility:visible;transition-delay:0s}
  @media(hover:hover) and (pointer:fine){
    .circle--grid .tile:hover{border-color:var(--line);background:var(--ink-2);z-index:6}
    .circle--grid .tile:hover .member__bio{opacity:1;visibility:visible;transition-delay:0s}
  }
  @media(max-width:1219px){.circle--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:800px){
    .circle--grid{grid-template-columns:1fr;gap:18px}
    .circle--grid .member__bio,.circle--grid .tile--left .member__bio{position:static;width:auto;padding:14px 0 0;display:none;opacity:1;visibility:visible;transition:none}
    .circle--grid .tile.open .member__bio{display:block}
    .circle--grid .member__bio p{box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 4px 0;background:none}
    .circle--grid .member__bio p::before{display:none}
  }
  @media(max-width:420px){.circle--grid .creds{font-size:.68rem}.circle--grid .tile{padding-inline:10px}}
  /* v81 (Arvin, 14 Oct 2026, option B): the cue that a bio opens — a ringed + in the tile's corner, gold on hover /
     focus / open, rotating to an x when open; a faint resting border on every tile; tiles of one height from 801px up
     (below 800px the bio opens inside the tile, so the tiles stay content-height). */
  .circle--grid .tile{border-color:rgba(237,232,223,.08)}
  .circle--grid .cue-plus{position:absolute;right:12px;bottom:12px;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;
    transition:border-color .25s ease,transform .25s ease}
  .circle--grid .cue-plus::before,.circle--grid .cue-plus::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1px;margin:-.5px 0 0 -4.5px;
    background:var(--faint);transition:background-color .25s ease}
  .circle--grid .cue-plus::after{transform:rotate(90deg)}
  .circle--grid .tile:hover .cue-plus,.circle--grid .tile:focus-visible .cue-plus,.circle--grid .tile.open .cue-plus{border-color:rgba(211,162,78,.6)}
  .circle--grid .tile:hover .cue-plus::before,.circle--grid .tile:hover .cue-plus::after,.circle--grid .tile:focus-visible .cue-plus::before,
    .circle--grid .tile:focus-visible .cue-plus::after,.circle--grid .tile.open .cue-plus::before,.circle--grid .tile.open .cue-plus::after{background:var(--gold)}
  .circle--grid .tile.open .cue-plus{transform:rotate(45deg)}
  @media(min-width:801px){.circle--grid{align-items:stretch;grid-auto-rows:1fr}.circle--grid .tile{height:100%}}

  /* on phones the + moves to the top-right corner, beside the portrait: at the foot it met the longest credential lines
     (412px and below) and, open, the bio's last line (built 14 Oct, measured) */
  @media(max-width:800px){.circle--grid .cue-plus{top:12px;bottom:auto}}
  /* v89 (Arvin, 31 Oct 2026, option B): a tile alone on the last row sits centred — under the middle column at three across,
     centred at one column's width at two across (seven tiles since Sila joined) */
  @media(min-width:1220px){.circle--grid .tile:last-child:nth-child(3n+1){grid-column:2}}
  @media(min-width:801px) and (max-width:1219px){.circle--grid .tile:last-child:nth-child(2n+1){grid-column:1 / -1;justify-self:center;width:calc(50% - 12px)}}
  /* Visible without hovering — hover does not exist on touch. */
  .hs-in{display:inline-flex;align-items:center;gap:5px;margin-top:11px;
    font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--faint);text-decoration:none;border-bottom:1px solid rgba(110,106,98,.4);
    padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
  .hs-in:hover,.hs-in:focus-visible{color:var(--gold);border-color:rgba(211,162,78,.6)}

    /* ============ v30 — mobile heading + flush fixes (Arvin, 5 Aug 2026) ============ */
  @media(max-width:760px){
    /* 1.8rem left "The Pelion Education Model" a few px over the line; 1.65rem seats
       every home heading on one line at 390px. Long headings still wrap, balanced. */
    h2{max-width:none;font-size:1.65rem}
    .inner--padfix{padding-left:var(--pad);padding-right:var(--pad)}
  }

    /* ============ v31 — contrast fix (measured 2.01:1, 5 Aug 2026) ============ */
  .section--light .lbl{color:#6E6A62}

    /* v33: the LinkedIn icon rides the name line, not its own row */
  .founder h3 .hs-in{margin:0 0 0 9px;vertical-align:-2px}

  /* ============ CURRICULUM PAGES ============ */
  .cur-wrap{max-width:1000px;margin:0 auto}
  .cur-block{border-top:1px solid var(--line);padding:44px 0}
  .cur-block:last-of-type{border-bottom:1px solid var(--line)}
  .cur-head{margin-bottom:26px}
  .cur-n{font-family:"Fraunces",serif;font-size:.86rem;color:var(--gold);letter-spacing:.1em}
  .cur-head h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:6px 0 10px}
  .cur-meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .cur-theme{margin-top:14px;font-weight:300;color:var(--muted);max-width:72ch;line-height:1.55}
  .cur-row{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:16px 0;border-top:1px solid rgba(243,238,229,.07)}
  .cur-row:first-child{border-top:none}
  .cur-k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);line-height:1.5}
  .cur-k .cur-sub{display:block;margin-top:6px;font-family:"Fraunces",serif;font-size:.98rem;font-weight:400;
    letter-spacing:0;text-transform:none;color:var(--paper)}
  /* The three records are NAMES, not column labels, so they do not take the uppercase
     treatment the rest of the key column uses.  (Arvin, 27 July 2026.) */
  .cur-row--name .cur-k{text-transform:none;letter-spacing:.02em;font-size:.95rem;
    font-family:"Fraunces",serif;font-weight:400}
  .cur-v{font-weight:300;line-height:1.62;color:var(--muted);max-width:74ch}
  .cur-v p+p{margin-top:.7em}
  .cur-v b{color:var(--paper);font-weight:500}
  .cur-q{list-style:none;display:grid;gap:9px}
  .cur-q li{position:relative;padding-left:20px;font-family:"Fraunces",serif;font-style:italic;
    font-weight:340;font-size:1.04rem;line-height:1.45;color:var(--paper)}
  .cur-q li::before{content:"—";position:absolute;left:0;color:var(--gold);font-style:normal}
  .cchips{display:flex;flex-wrap:wrap;gap:8px}
  .cchip{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
    border:1px solid rgba(211,162,78,.4);border-radius:999px;padding:5px 11px;white-space:nowrap}
  .section--light .cur-v{color:#3a424e}
  .section--light .cur-q li{color:#12161d}

  /* reference tables */
  .cn-table,.as-table{width:100%;border-collapse:collapse;margin-top:30px;font-weight:300}
  .cn-table th,.as-table th{text-align:left;font-family:"Inter",sans-serif;font-size:.68rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:0 14px 12px 0;border-bottom:1px solid var(--line)}
  .cn-table td,.as-table td{padding:14px 14px 14px 0;border-bottom:1px solid rgba(243,238,229,.07);
    vertical-align:top;color:var(--muted);line-height:1.55;font-size:.96rem}
  .cn-book{font-family:"Fraunces",serif;font-size:1.02rem;color:var(--paper);width:44%}
  .cn-where b{color:var(--paper);font-weight:500;font-size:.9rem}
  .cn-where span{font-size:.84rem;color:var(--faint)}
  .cn-term a{color:var(--gold);cursor:pointer;font-size:.84rem;white-space:nowrap}
  .as-term td{color:var(--gold)!important;font-family:"Fraunces",serif;font-size:1.05rem;padding-top:30px}
  .as-b b{font-family:"Fraunces",serif;color:var(--gold);margin-right:6px}
  .as-b{color:var(--paper)!important;width:24%}
  .as-c{width:24%}
  .as-c .cchip{margin:0 5px 5px 0;display:inline-block}
  .cal-w{font-family:"Fraunces",serif;color:var(--paper);white-space:nowrap;width:12%}
  .cal-w span{display:block;font-family:"Inter",sans-serif;font-size:.72rem;color:var(--faint);margin-top:3px}
  .cal-b{color:var(--paper)!important;width:26%}
  .cal-table td{font-size:.92rem}
  /* weeks away from the field read quieter than the field blocks; the exam and admissions
     windows are the exception, because they are the reason those weeks are that long */
  .cal-home .cal-b,.cal-study .cal-b{color:var(--muted)!important;font-weight:300}
  .cal-exam .cal-b{color:var(--gold)!important}

  /* ---- calendar, v19: the rhythm, the strip, the credential track ---- */
  .rh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  .rh{border:1px solid var(--line);border-radius:10px;padding:22px 24px}
  .rh-n{font-family:"Fraunces",serif;font-size:clamp(2rem,4vw,2.9rem);line-height:1;color:var(--gold)}
  .rh-n span{font-family:"Inter",sans-serif;font-size:.8rem;font-weight:400;letter-spacing:.06em;
    color:var(--muted);margin-left:8px;vertical-align:.35em}
  .rh-k{margin-top:12px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
  .rh-p{margin-top:5px;font-size:.86rem;font-weight:300;color:var(--faint)}
  .cal-strip{display:flex;height:34px;border-radius:5px;overflow:hidden;margin-top:44px;
    border:1px solid var(--line)}
  .cal-strip i{display:block;height:100%}
  .s-field{background:rgba(211,162,78,.55)}
  .s-rest{background:rgba(243,238,229,.19)}
  .s-study{background:rgba(122,158,196,.5)}
  .s-uni{background:rgba(196,98,62,.55)}
  .cal-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:.76rem;color:var(--faint)}
  .cal-key i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;vertical-align:-1px}
  /* The exam and Extended Project logistics, under the name of the week they belong to.
     This content used to be a fifth column that `display:none` hid on every phone — the
     strongest material on the page, invisible on the commonest device. A line inside a cell
     wraps instead of disappearing, and it keeps the `.cal-x` class so the media query below
     has to say, in the place the defect lived, that it is NOT hidden.  [v19 §4c, v20] */
  .cal-b .cal-x{display:block;margin-top:7px;font-family:"Inter",sans-serif;font-weight:300;
    font-size:.84rem;line-height:1.55;color:var(--muted);text-transform:none;letter-spacing:0}

  /* competency cards */
  .comp-card{border-top:1px solid var(--line);padding:40px 0}
  .comp-card:last-child{border-bottom:1px solid var(--line)}
  .comp-card h3{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--gold)}
  .comp-def{margin-top:10px;font-weight:300;line-height:1.6;color:var(--paper);max-width:72ch}
  .lv-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 8px}
  .lv{border:1px solid var(--line);border-radius:10px;padding:16px}
  .lv-k{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
  .lv-v{font-size:.88rem;font-weight:300;line-height:1.5;color:var(--muted)}

  /* storytelling format menu */
  .fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
  .fmt h4{font-family:"Inter",sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);margin-bottom:12px}
  .fmt ul{list-style:none;display:grid;gap:9px}
  .fmt li{font-size:.92rem;font-weight:300;line-height:1.5;color:var(--muted);padding-left:14px;position:relative}
  .fmt li::before{content:"·";position:absolute;left:2px;color:var(--gold)}
  a.term-card,a.card{text-decoration:none;display:block}
  /* v32: table scroll containment — a wide reference table scrolls inside .tblx
     instead of widening the page. This closes the v14-audit mobile overflow (the
     calendar measured 424px document width at 390px). Keep tables INSIDE .tblx. */
  .tblx{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblx>table{min-width:520px}
  /* v30: the always-visible open-affordance on the six term cards — bottom-right gold
     arrow. .term-card is already position:relative. Visible on touch, where hover
     cannot carry the signal. */
  .tc-arw{position:absolute;right:20px;bottom:18px;color:var(--gold);font-size:1.15rem;line-height:1}
  .term-card:hover .tc-arw{transform:translateX(3px)}
  .tc-arw{transition:transform .3s}
  /* v30: found while adding the arrow — the term cards sit on a LIGHT section but kept
     the dark-section text colours, so "Term N", "N blocks · N weeks" and the months were
     cream-on-cream: effectively invisible, on every viewport, since the cards were
     built. Same failure class as the v27 closing-line catch (1.54:1) — a colour
     borrowed across section themes. These overrides give them the .card light-section
     treatment. Verified against the measured colours, not by eye. */
  .section--light .term-card{background:#fff;border-color:var(--lt-line);border-left-width:3px}
  .section--light .term-card:hover{border-color:var(--gold)}
  .section--light .term-card .num{color:#6E6A62}
  .section--light .term-card p{color:#3a424e}
  .section--light .term-card .when{color:#6E6A62}
  /* v31: the gold arrow measured 2.32:1 on the white card — darkened gold on light,
     3.9:1, still reads as the house gold. Found by the contrast audit, 5 Aug 2026. */
  .section--light .term-card .tc-arw{color:#8A6520}

  .cur-rationale{margin-top:16px;font-weight:300;line-height:1.62;color:var(--paper);max-width:74ch;font-size:1.02rem}
  .gl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;margin-top:22px;
    border-top:1px solid rgba(243,238,229,.09);padding-top:18px}
  .gl{display:grid;grid-template-columns:120px 1fr;gap:14px}
  .gl.gl-wide{grid-column:1/-1}
  .gl-k{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-top:2px}
  .gl-v{font-size:.9rem;font-weight:300;line-height:1.5;color:var(--muted)}
  ul.cur-b{list-style:none;display:grid;gap:8px}
  ul.cur-b li{position:relative;padding-left:16px}
  ul.cur-b li::before{content:"·";position:absolute;left:2px;color:var(--gold)}
  .arc-table{width:100%;border-collapse:collapse}
  .arc-table td{padding:10px 12px 10px 0;border-bottom:1px solid rgba(243,238,229,.07);vertical-align:top;font-size:.93rem}
  .arc-p{font-family:"Fraunces",serif;color:var(--paper);white-space:nowrap;width:22%}
  .arc-f{color:var(--gold);font-size:.8rem;width:22%}
  .wk{border-top:1px solid var(--line);padding:32px 0}
  .wk h3{font-size:1.25rem;color:var(--paper)}
  .pg-t{font-family:"Fraunces",serif;color:var(--paper);width:22%}
  .pg-s{color:var(--faint);font-size:.88rem;width:24%}
  .cn-book span{display:block;font-family:"Inter",sans-serif;font-size:.82rem;color:var(--faint);margin-top:3px}
  .cn-why{font-size:.9rem;width:38%}

  @media(max-width:860px){
    .gl-grid{grid-template-columns:1fr}
    .arc-table td{display:block;padding:4px 0}
    .arc-p,.arc-f{width:auto}
    .cur-row{grid-template-columns:1fr;gap:8px}
    .lv-wrap{grid-template-columns:1fr 1fr}
    .fmt-grid{grid-template-columns:1fr}
    .cn-table,.as-table{font-size:.9rem}
    /* `.cal-x` used to be hidden here alongside `.as-c`, which is what took the whole exam
       and Extended Project column off every phone. v19 moved that content out of the table
       into its own section; the class stays on that section so this rule can state, in the
       place the defect lived, that it is NOT hidden.  [v19 §4c] */
    .as-c{display:none}
    .cal-b .cal-x{display:block}
    .rh-grid{grid-template-columns:1fr}
    .cal-strip{height:26px}
  }


/* site build: <picture> wrappers are layout-transparent */
.frame>picture{display:contents}

/* Stage 3: keyboard + screen-reader accessibility */
.skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gold);
  color:#0A0D12;padding:10px 18px;border-radius:0 0 8px 0;font-weight:600;font-size:.85rem}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.tl-stop:focus-visible .tl-dot{box-shadow:0 0 0 7px rgba(211,162,78,.28)}
/* Stage 3: legal pages + form states */
.legal-body h2{margin-top:44px;font-size:clamp(1.2rem,2vw,1.6rem);max-width:none}
/* v42, 10 Aug 2026: --faint -> --muted. /contact used to be a LIGHT section, where
   `.section--light p` overrode this to #3a424e at 8.78:1. The light treatment is
   retired, that override is gone, and --faint on ink measures 3.47:1 — under the
   4.5 floor. NOTE: this element exists ONLY on the emitted site (the mockup carries
   the demo form, which has no consent line), so the contrast audit run against the
   mockup could not see it. That is why the audit now runs against the SITE. */
.form-consent{font-size:.8rem;color:var(--muted);max-width:60ch;margin:18px 0 6px}
.form-error{display:none;color:#C4623E;font-size:.9rem;margin-top:14px}