@font-face{
    font-family:'Fraunces';
    font-style:normal;font-weight:600;font-display:swap;
    src:url('../fonts/fraunces-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Source Serif 4';
    font-style:normal;font-weight:400;font-display:swap;
    src:url('../fonts/source-serif-400.woff2') format('woff2');
  }
  @font-face{
    font-family:'Source Serif 4';
    font-style:italic;font-weight:400;font-display:swap;
    src:url('../fonts/source-serif-400italic.woff2') format('woff2');
  }
  @font-face{
    font-family:'Source Serif 4';
    font-style:normal;font-weight:600;font-display:swap;
    src:url('../fonts/source-serif-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Silkscreen';
    font-style:normal;font-weight:700;font-display:swap;
    src:url('../fonts/silkscreen-700.woff2') format('woff2');
  }

  :root{
    --bg:#EAE2CC;
    --bg-panel:#DFD3B2;
    --ink:#241D14;
    --ink-dim:#6b5f4a;
    --paper:#F7F2E4;
    --paper-ink:#241D14;
    --paper-ink-dim:#75694f;
    --accent:#2F6FA3;
    --accent-2:#A6472B;
    --accent-soft:rgba(47,111,163,0.14);
    --rule:rgba(36,29,20,0.20);
    --rule-strong:rgba(36,29,20,0.36);
    --shadow:rgba(36,29,20,0.18);
    --grain-opacity:0.05;
    --nav-bg:#0F1E36;
    --nav-bg-2:#16294A;
    --nav-ink:#EAF2FA;
    --nav-ink-dim:#8FA6C2;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#1C1812;
      --bg-panel:#241E15;
      --ink:#E8E1CE;
      --ink-dim:#A79C82;
      --paper:#F7F2E4;
      --paper-ink:#241D14;
      --paper-ink-dim:#75694f;
      --accent:#6FB3E0;
      --accent-2:#D97A54;
      --accent-soft:rgba(111,179,224,0.16);
      --rule:rgba(232,225,206,0.16);
      --rule-strong:rgba(232,225,206,0.30);
      --shadow:rgba(0,0,0,0.5);
      --grain-opacity:0.06;
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#1C1812; --bg-panel:#241E15; --ink:#E8E1CE; --ink-dim:#A79C82;
    --paper:#F7F2E4; --paper-ink:#241D14; --paper-ink-dim:#75694f;
    --accent:#6FB3E0; --accent-2:#D97A54; --accent-soft:rgba(111,179,224,0.16);
    --rule:rgba(232,225,206,0.16); --rule-strong:rgba(232,225,206,0.30);
    --shadow:rgba(0,0,0,0.5); --grain-opacity:0.06; color-scheme:dark;
  }
  :root[data-theme="light"]{
    --bg:#EAE2CC; --bg-panel:#DFD3B2; --ink:#241D14; --ink-dim:#6b5f4a;
    --paper:#F7F2E4; --paper-ink:#241D14; --paper-ink-dim:#75694f;
    --accent:#2F6FA3; --accent-2:#A6472B; --accent-soft:rgba(47,111,163,0.14);
    --rule:rgba(36,29,20,0.20); --rule-strong:rgba(36,29,20,0.36);
    --shadow:rgba(36,29,20,0.18); --grain-opacity:0.05; color-scheme:light;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Source Serif 4',Georgia,serif;
    font-size:17px;
    line-height:1.4;
  }

  #progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);z-index:60;transition:width 80ms linear;}

  a{color:var(--accent);text-decoration-color:var(--accent-soft);text-underline-offset:2px;}
  a:hover{text-decoration-color:var(--accent);}

  h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.16;text-wrap:balance;margin:0;color:var(--ink);}

  .eyebrow{
    display:block;
    font-family:'Source Serif 4',serif;
    font-weight:600;
    font-size:0.74rem;
    letter-spacing:0.13em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:16px;
  }

  p{margin:0 0 20px;font-size:1.06rem;line-height:1.75;}
  p:last-child{margin-bottom:0;}
  em{font-style:italic;}
  strong{font-weight:600;}

  /* ============ APP SHELL ============ */
  .app{display:flex;align-items:flex-start;min-height:100vh;}
  @media (max-width:860px){ .app{display:block;} }

  .sidebar{
    width:272px;flex:0 0 272px;
    background:var(--nav-bg);
    position:sticky;top:0;height:100vh;overflow-y:auto;
    padding:26px 22px 20px;
    display:flex;flex-direction:column;
    z-index:2;
  }
  @media (max-width:860px){
    .sidebar{width:100%;flex:none;position:relative;height:auto;padding:18px 20px;}
  }

  .brand-block{display:flex;align-items:center;gap:13px;}
  .brand-mark{width:54px;height:44px;flex:0 0 auto;object-fit:contain;}
  .brand-text{line-height:1.15;}
  .brand-name{font-family:'Silkscreen',ui-monospace,monospace;font-weight:700;font-size:1.05rem;letter-spacing:0.01em;color:#7FE0F0;}
  .brand-sub{font-family:'Source Serif 4',serif;font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--nav-ink-dim);margin-top:5px;}

  .sidebar-course{margin-top:30px;}
  @media (max-width:860px){ .sidebar-course{margin-top:20px;} }
  .course-eyebrow{font-family:'Source Serif 4',serif;font-weight:600;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--nav-ink-dim);margin-bottom:6px;}
  .course-title{font-family:'Fraunces',serif;font-size:1.02rem;color:var(--nav-ink);margin-bottom:16px;}

  .day-nav{display:flex;flex-direction:column;gap:6px;}
  @media (max-width:860px){
    .day-nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
  }
  .day-btn{
    all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:11px 13px;border-radius:6px;
    color:var(--nav-ink-dim);transition:background 140ms ease;
  }
  @media (max-width:860px){ .day-btn{white-space:nowrap;flex:0 0 auto;min-width:200px;} }
  .day-btn .d-num{font-family:'Source Serif 4',serif;font-weight:600;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:3px;color:var(--nav-ink-dim);}
  .day-btn .d-title{font-family:'Source Serif 4',serif;font-size:0.92rem;line-height:1.35;color:inherit;}
  .day-btn[aria-current="page"]{background:var(--nav-bg-2);color:var(--nav-ink);}
  .day-btn[aria-current="page"] .d-num{color:var(--accent);}
  .day-btn:hover:not([aria-disabled="true"]){background:var(--nav-bg-2);}
  .day-btn[aria-disabled="true"]{cursor:default;opacity:0.55;}
  .lock-tag{display:inline-block;margin-left:6px;font-family:'Source Serif 4',serif;font-style:italic;font-size:0.68rem;color:var(--nav-ink-dim);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:1px 9px;vertical-align:middle;}

  .sidebar-foot{margin-top:auto;padding-top:22px;font-size:0.82rem;color:var(--nav-ink-dim);font-style:italic;line-height:1.5;}
  @media (max-width:860px){ .sidebar-foot{display:none;} }

  .content{flex:1;min-width:0;}
  .wrap{max-width:700px;margin:0 auto;padding:0 24px;}
  .wide{max-width:760px;}


  section{padding:60px 0;border-top:1px solid var(--rule);scroll-margin-top:20px;}
  section:first-of-type{border-top:none;}
  .lede{padding-top:80px;}

  .pre-reveal{opacity:0;transform:translateY(16px);}
  .in-view{animation:rise 620ms ease forwards;}
  @keyframes rise{to{opacity:1;transform:translateY(0);}}

  /* ---------- HERO ---------- */
  .hero h1{font-size:clamp(2rem,5vw,3rem);max-width:16ch;}
  .hero .sub{margin-top:20px;max-width:52ch;font-size:1.12rem;color:var(--ink-dim);line-height:1.65;}
  .scroll-cue{margin-top:40px;font-size:0.9rem;color:var(--ink-dim);font-style:italic;}

  /* ---------- video card ---------- */
  .video-intro{padding:36px 0 0;}
  .video-intro p{max-width:60ch;}
  .video-card{
    display:block;text-decoration:none;margin:20px 0 4px;
    border-radius:6px;overflow:hidden;
    box-shadow:0 10px 28px var(--shadow);
    border:1px solid var(--rule);
    background:var(--paper);
  }
  .video-thumb-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0f1a;}
  .video-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms ease;}
  .video-card:hover .video-thumb-wrap img{transform:scale(1.03);}
  .video-play{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  }
  .video-play span{
    width:64px;height:64px;border-radius:50%;
    background:rgba(20,20,20,0.55);
    display:flex;align-items:center;justify-content:center;
    transition:background 200ms ease,transform 200ms ease;
    backdrop-filter:blur(1px);
  }
  .video-card:hover .video-play span{background:var(--accent-2);transform:scale(1.08);}
  .video-play svg{width:24px;height:24px;margin-left:3px;}
  .video-meta{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:14px 18px;color:var(--paper-ink);
  }
  .video-meta .vt{font-family:'Fraunces',serif;font-size:1.02rem;line-height:1.3;}
  .video-meta .vl{font-size:0.84rem;color:var(--accent);white-space:nowrap;font-family:'Source Serif 4',serif;font-weight:600;}

  /* ---------- STATS ---------- */
  .stat-row{display:flex;gap:36px;flex-wrap:wrap;margin:28px 0 8px;}
  .stat{border-left:2px solid var(--accent);padding-left:16px;}
  .stat .num{font-family:'Fraunces',serif;font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.1;}
  .stat .label{font-size:0.9rem;color:var(--ink-dim);margin-top:2px;}

  blockquote{
    margin:24px 0;
    padding:4px 0 4px 20px;
    border-left:3px solid var(--rule-strong);
    font-style:italic;
    color:var(--ink-dim);
    font-size:1.08rem;
  }

  /* ---------- FIELD NOTE ---------- */
  .field-note{
    background:var(--paper);color:var(--paper-ink);
    border-radius:3px;padding:22px 24px;
    box-shadow:0 8px 22px var(--shadow);
    transform:rotate(-0.5deg);
    margin:28px 0;
  }
  .field-note .eyebrow{color:var(--accent-2);margin-bottom:10px;}
  .field-note .flow{
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    font-size:0.82rem;color:var(--paper-ink-dim);
    margin-bottom:12px;letter-spacing:0.01em;
  }
  .field-note p{color:var(--paper-ink);font-size:0.98rem;margin-bottom:0;}

  /* ---------- FIGURE / DIAGRAM shared ---------- */
  figure{margin:28px 0;}
  .board{
    background:var(--bg-panel);
    border:1px solid var(--rule);
    border-radius:6px;
    padding:22px 22px 18px;
  }
  figure svg{width:100%;height:auto;display:block;}
  figure text{font-family:'Source Serif 4',serif;font-size:14px;fill:var(--ink);}
  figcaption{font-size:0.92rem;color:var(--ink-dim);margin-top:12px;line-height:1.5;}
  .stop-accent{stop-color:var(--accent);}
  .line-strong{stroke:var(--accent);stroke-width:3;}
  .line-faint{stroke:var(--ink-dim);stroke-width:1;opacity:0.35;}
  .arrow-strong-fill{fill:var(--accent);}
  .arrow-faint-fill{fill:var(--ink-dim);fill-opacity:0.35;}
  #w-apple1,#w-apple2{font-weight:700;fill:var(--accent);}
  .neuron-figure svg{color:var(--ink);}
  .neuron-figure text{font-family:'Source Serif 4',serif;fill:var(--ink-dim);}
  .neuron-connector{font-style:italic;color:var(--ink-dim);text-align:center;font-size:0.9rem;margin:6px 0 2px;}

  /* ---------- data tables (prob chart + llama mix) ---------- */
  .prob-table,.data-table{width:100%;border-collapse:collapse;font-size:0.92rem;}
  .prob-table thead th,.data-table thead th{
    font-family:'Source Serif 4',serif;font-weight:600;font-size:0.7rem;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-dim);
    padding:0 10px 8px 0;border-bottom:1px solid var(--rule);text-align:right;
  }
  .prob-table thead th:first-child,.data-table thead th:first-child{text-align:left;}
  .prob-table th[scope="row"]{
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    text-align:right;padding:5px 12px 5px 0;color:var(--ink);font-weight:600;
    width:64px;white-space:nowrap;
  }
  .data-table th[scope="row"]{text-align:left;font-weight:600;color:var(--ink);padding:7px 10px 7px 0;white-space:nowrap;}
  .prob-cell{display:flex;align-items:center;gap:10px;padding:5px 0;}
  .prob-track{flex:1 1 auto;max-width:280px;}
  .prob-bar{height:14px;background:var(--accent);border-radius:0 4px 4px 0;}
  .prob-val{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:0.86rem;white-space:nowrap;}
  .data-table td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-dim);padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);}
  .data-table tbody tr:last-child td,.data-table tbody tr:last-child th{border-bottom:none;}
  .prob-intro{margin-bottom:14px;}

  /* ---------- capstone pipeline ---------- */
  .capstone-figure{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;}
  .capstone-step{
    width:100%;max-width:420px;
    background:var(--paper);color:var(--paper-ink);
    border:1px solid var(--rule);border-radius:6px;
    padding:11px 18px;font-size:0.94rem;font-weight:600;
  }
  .capstone-step span{display:block;font-size:0.8rem;font-weight:400;font-style:italic;color:var(--paper-ink-dim);margin-top:3px;}
  .capstone-step.highlight{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);}
  .capstone-arrow{color:var(--ink-dim);font-size:1.05rem;padding:1px 0;line-height:1;}
  .capstone-arrow.repeat{color:var(--accent-2);font-size:0.82rem;font-style:italic;padding:4px 0;}

  /* ---------- Day 2: CPU vs GPU core grid ---------- */
  .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:560px){.compare-grid{grid-template-columns:1fr;}}
  .compare-col h3{font-family:'Fraunces',serif;font-size:1rem;text-align:center;margin-bottom:12px;}
  .compare-col .compare-caption{text-align:center;font-size:0.86rem;color:var(--ink-dim);margin-top:10px;}
  .cpu-cores{display:flex;flex-direction:column;gap:10px;align-items:center;}
  .cpu-core-card{
    width:100%;max-width:180px;border:1.5px solid var(--accent);border-radius:6px;
    padding:14px;text-align:center;background:var(--accent-soft);
  }
  .cpu-core-card .cname{font-weight:600;font-size:0.92rem;}
  .cpu-core-card .csub{font-size:0.78rem;color:var(--ink-dim);margin-top:3px;}
  .gpu-core-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;max-width:220px;margin:0 auto;}
  .gpu-core-grid span{display:block;aspect-ratio:1;background:var(--accent-2);border-radius:2px;opacity:0.85;}

  /* ---------- Day 2: core type cards (CUDA/Tensor/RT) ---------- */
  .core-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  @media (max-width:640px){.core-type-grid{grid-template-columns:1fr;}}
  .core-type-card{
    background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:16px;
    border-top:3px solid var(--accent);
  }
  .core-type-card.tensor{border-top-color:var(--accent-2);}
  .core-type-card h4{font-family:'Fraunces',serif;font-size:1rem;margin-bottom:6px;}
  .core-type-card p{font-size:0.88rem;color:var(--paper-ink-dim);margin:0;}

  /* ---------- Day 2: speed ladder ---------- */
  .speed-ladder{display:flex;flex-direction:column;gap:10px;}
  .speed-row{display:grid;grid-template-columns:100px 1fr 60px;gap:12px;align-items:center;}
  @media (max-width:520px){.speed-row{grid-template-columns:78px 1fr 48px;}}
  .speed-name{font-size:0.88rem;font-weight:600;}
  .speed-bar-track{height:10px;background:var(--bg);border-radius:5px;overflow:hidden;border:1px solid var(--rule);}
  .speed-bar-fill{height:100%;background:var(--accent);border-radius:5px 0 0 5px;}
  .speed-note{font-size:0.78rem;color:var(--ink-dim);text-align:right;}

  /* ---------- Day 2: highway lanes ---------- */
  .lane-compare{display:flex;flex-direction:column;gap:16px;}
  .lane-row{display:flex;align-items:center;gap:14px;}
  .lane-label{width:110px;flex:0 0 auto;font-size:0.88rem;font-weight:600;}
  .lane-road{flex:1;display:flex;gap:3px;background:var(--bg);border-radius:4px;padding:6px;}
  .lane-road span{flex:1;height:16px;background:var(--accent-2);border-radius:2px;opacity:0.8;}
  .lane-road.wide span{background:var(--accent);}
  .lane-note{width:130px;flex:0 0 auto;font-size:0.8rem;color:var(--ink-dim);text-align:right;}

  /* ---------- Day 2: numbered component eyebrow ---------- */
  .eyebrow-count{color:var(--ink-dim);font-weight:400;}
  .img-figure img{width:100%;height:auto;display:block;border-radius:8px;}

  /* ---------- Day 3: lists, 5-card grid ---------- */
  .mem-grid{grid-template-columns:repeat(3,1fr);}
  @media (max-width:640px){.mem-grid{grid-template-columns:1fr;}}
  section ul,section ol.summary-list{margin:0 0 20px;padding-left:1.3em;}
  section ul li,section ol.summary-list li{font-size:1.06rem;line-height:1.75;margin-bottom:8px;color:var(--ink);}
  section ol.summary-list li{font-weight:600;}
  section ul li::marker{color:var(--accent);}
  section ol.summary-list li::marker{color:var(--accent);font-family:'Fraunces',serif;}

  /* ---------- toggles ---------- */
  .toggle-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
  .toggle-btn{
    font-family:'Source Serif 4',serif;font-weight:600;font-size:0.92rem;
    padding:8px 15px;border-radius:3px;border:1.5px solid var(--rule-strong);
    background:transparent;color:var(--ink);cursor:pointer;transition:all 150ms ease;
  }
  .toggle-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
  .toggle-btn:hover{border-color:var(--accent);}
  .toggle-btn:focus-visible,button:focus-visible,.flip-card:focus-visible,a:focus-visible,.day-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

  /* ---------- chat demo ---------- */
  .view{display:none;}
  .view.active{display:block;}
  .completion-block{
    background:var(--bg);border:1px solid var(--rule);border-radius:4px;padding:18px;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:0.88rem;line-height:1.9;
    white-space:pre-wrap;color:var(--ink);
  }
  .completion-block .cursor{display:inline-block;width:7px;height:1em;background:var(--accent);vertical-align:text-bottom;animation:blink 1s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}
  .bubbles{display:flex;flex-direction:column;gap:9px;}
  .bubble{max-width:80%;padding:9px 14px;border-radius:12px;font-size:0.92rem;line-height:1.5;font-family:'Source Serif 4',serif;}
  .bubble.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px;}
  .bubble.assistant{align-self:flex-start;background:var(--bg);border:1px solid var(--rule);color:var(--ink);border-bottom-left-radius:3px;}
  .typing-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink-dim);margin-right:3px;animation:tdot 1.1s infinite ease-in-out;}
  .typing-dots span:nth-child(2){animation-delay:0.15s;}
  .typing-dots span:nth-child(3){animation-delay:0.3s;}
  @keyframes tdot{0%,60%,100%{opacity:0.25;}30%{opacity:1;}}

  /* ---------- generative game ---------- */
  .gen-sentence{
    font-family:'Source Serif 4',serif;font-size:1.06rem;line-height:1.8;min-height:3.2em;
    padding:14px 16px;background:var(--bg);border:1px solid var(--rule);border-radius:4px;margin-bottom:16px;
  }
  .gen-sentence .filled{color:var(--ink);}
  .gen-sentence .next-blank{color:var(--ink-dim);border-bottom:2px dashed var(--rule-strong);}
  .gen-options{display:flex;flex-wrap:wrap;gap:9px;}
  .gen-chip{
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:0.88rem;
    border:1.5px solid var(--rule-strong);background:var(--paper);color:var(--paper-ink);
    border-radius:6px;padding:8px 12px;cursor:pointer;transition:all 140ms ease;display:flex;align-items:center;gap:7px;
  }
  .gen-chip:hover{border-color:var(--accent);transform:translateY(-2px);}
  .gen-chip .pct{color:var(--accent-2);font-weight:600;}
  .gen-done{font-style:italic;font-size:1rem;color:var(--accent);margin-top:4px;}
  .gen-reset{margin-top:12px;background:none;border:none;font-family:'Source Serif 4',serif;font-style:italic;font-size:0.92rem;color:var(--ink-dim);text-decoration:underline;cursor:pointer;padding:0;}

  /* ---------- temperature demo ---------- */
  .temp-demo{display:flex;flex-wrap:wrap;gap:9px;}
  .temp-chip{
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:0.9rem;
    border:1.5px solid var(--rule-strong);background:var(--paper);color:var(--paper-ink-dim);
    border-radius:16px;padding:7px 14px;transition:all 160ms ease;
  }
  .temp-demo[data-state="low"] .temp-chip[data-low="pick"],
  .temp-demo[data-state="high"] .temp-chip[data-high="pick"]{
    background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
  }

  /* ---------- pretraining scale ---------- */
  .phase-panel{display:none;}
  .phase-panel.active{display:block;}
  .shelf{display:flex;flex-wrap:wrap;gap:5px;padding:14px;background:var(--bg);border:1px solid var(--rule);border-radius:4px;margin-bottom:12px;}
  .icon-book,.icon-bubble{color:var(--ink-dim);flex:0 0 auto;}
  .icon-book:nth-child(4n){color:var(--accent);}
  .icon-bubble:nth-child(2n){color:var(--accent-2);}

  /* ---------- lineage timeline ---------- */
  .lineage{position:relative;padding-left:58px;margin-top:12px;}
  .lineage::before{content:"";position:absolute;left:23px;top:6px;bottom:6px;width:1.5px;background:var(--rule-strong);}
  .lineage-item{position:relative;padding-bottom:32px;}
  .lineage-item:last-child{padding-bottom:0;}
  .lineage-icon{
    position:absolute;left:-58px;top:-2px;width:46px;height:46px;border-radius:50%;
    background:var(--paper);border:1.5px solid var(--rule-strong);
    display:flex;align-items:center;justify-content:center;color:var(--ink);
    box-shadow:0 3px 10px var(--shadow);
  }
  .lineage-item.hi .lineage-icon{border-color:var(--accent);color:var(--accent);}
  .lineage-icon svg{width:24px;height:24px;}
  .lineage-name{font-family:'Fraunces',serif;font-size:1.12rem;display:inline;}
  .lineage-year{font-family:'Source Serif 4',serif;font-weight:600;font-size:0.8rem;color:var(--accent-2);letter-spacing:0.04em;margin-left:10px;}
  .lineage-desc{margin-top:5px;font-size:0.97rem;color:var(--ink-dim);max-width:48ch;}

  /* ---------- recap ---------- */
  .recap{text-align:left;}
  .recap h2{font-size:clamp(1.6rem,4vw,2.1rem);}
  .recap .sub{color:var(--ink-dim);margin-top:10px;font-size:1.04rem;}
  .flip-grid{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  @media (max-width:520px){.flip-grid{grid-template-columns:1fr;}}
  .flip-card{
    all:unset;cursor:pointer;display:block;min-height:130px;border-radius:5px;padding:18px 18px;
    background:var(--paper);color:var(--paper-ink);box-shadow:0 8px 20px var(--shadow);position:relative;
  }
  .flip-card .front{font-family:'Fraunces',serif;font-size:1.35rem;}
  .flip-card .front small{display:block;font-family:'Source Serif 4',serif;font-style:italic;font-size:0.82rem;color:var(--paper-ink-dim);margin-top:6px;}
  .flip-card .back{display:none;font-size:0.9rem;line-height:1.55;}
  .flip-card.flipped .front{display:none;}
  .flip-card.flipped .back{display:block;}
  .flip-card.flipped{background:var(--paper);}
  .recap-answer{margin-top:26px;font-size:1.06rem;color:var(--ink-dim);}
  .recap-answer strong{color:var(--ink);}

  /* ---------- footer ---------- */
  footer{padding:50px 0 90px;border-top:1px solid var(--rule);}
  .brand-line{font-size:0.98rem;color:var(--ink-dim);}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ---------- home page ---------- */
  .home-hero{padding:96px 0 12px;}
  .home-hero h1{font-size:clamp(2.3rem,6vw,3.6rem);max-width:16ch;}
  .home-hero .sub{margin-top:20px;max-width:56ch;font-size:1.18rem;color:var(--ink-dim);line-height:1.65;}
  .home-cta{
    display:inline-flex;align-items:center;gap:10px;margin-top:32px;
    font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;
    background:var(--accent);color:#fff;text-decoration:none;
    padding:14px 26px;border-radius:6px;box-shadow:0 8px 22px var(--shadow);
    transition:transform 160ms ease;
  }
  .home-cta:hover{transform:translateY(-2px);}
  .home-cards{display:flex;flex-direction:column;gap:14px;margin-top:16px;}
  .home-card{
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    background:var(--paper);color:var(--paper-ink);text-decoration:none;
    border-radius:8px;padding:22px 26px;box-shadow:0 8px 22px var(--shadow);
    transition:transform 160ms ease;
  }
  a.home-card:hover{transform:translateY(-2px);}
  .home-card.locked{background:transparent;border:1.5px dashed var(--rule-strong);box-shadow:none;color:var(--ink-dim);}
  .home-card .hc-num{
    font-family:'Source Serif 4',serif;font-weight:600;font-size:0.74rem;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px;
  }
  .home-card.locked .hc-num{color:var(--ink-dim);}
  .home-card .hc-title{font-family:'Fraunces',serif;font-size:1.25rem;max-width:44ch;}
  .home-card .hc-desc{font-size:0.92rem;color:var(--paper-ink-dim);margin-top:6px;max-width:48ch;}
  .home-card.locked .hc-desc{color:var(--ink-dim);}
  .home-card .hc-go{font-family:'Source Serif 4',serif;font-weight:600;color:var(--accent);white-space:nowrap;}

  /* ---------- access gate ---------- */
  .access-gate{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;}
  .access-gate-card{background:var(--paper);color:var(--paper-ink);border-radius:8px;padding:34px 30px;max-width:360px;width:100%;box-shadow:0 20px 50px var(--shadow);text-align:center;}
  .access-gate-card h2{font-family:'Fraunces',serif;font-size:1.4rem;margin-bottom:10px;}
  .access-gate-card p{font-size:0.94rem;color:var(--paper-ink-dim);margin-bottom:18px;}
  .access-gate-card input{width:100%;box-sizing:border-box;font-size:1.15rem;text-align:center;letter-spacing:0.15em;padding:12px;border:1.5px solid var(--rule-strong);border-radius:6px;font-family:ui-monospace,monospace;margin-bottom:12px;background:var(--bg);color:var(--paper-ink);}
  .access-gate-card button{width:100%;font-family:'Fraunces',serif;font-weight:600;font-size:1rem;background:var(--accent);color:#fff;border:none;border-radius:6px;padding:12px;cursor:pointer;}
  .access-gate-error{color:var(--accent-2);font-size:0.85rem;margin-top:10px;min-height:1.2em;}