:root{
    --sea:#1B2240;
    --sea-2:#2A3363;
    --deep:#141A33;
    --shelf:#3B4A88;
    --cream:#F4EBD5;
    --haze:#97A2C4;
    --coral:#EC9B7C;
    --rule:rgba(244,235,213,.15);
    --sans:'Helvetica Neue',Helvetica,Inter,Arial,sans-serif;
    --serif:'Newsreader',Georgia,serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--sea);color:var(--cream);
    font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.14rem);
    line-height:1.62;-webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1060px;margin:0 auto;padding:0 clamp(20px,5vw,52px)}
  a{color:inherit}
  p{margin:0 0 1.15em}
  .eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haze)}

  /* masthead */
  .masthead{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--rule);
    background:rgba(27,34,64,.9);backdrop-filter:blur(10px)}
  .masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:11px;padding-bottom:11px}
  .brand{display:inline-flex;align-items:flex-end;text-decoration:none;font-size:17px}
  .brand svg{display:block;height:2em;width:auto;margin-right:.1em}
  .brand .word{font-family:var(--sans);font-weight:700;font-size:.86em;line-height:.78;letter-spacing:-.045em;text-transform:lowercase;color:var(--cream)}
  .nav{display:flex;gap:clamp(12px,2.2vw,26px);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
  .nav a{text-decoration:none;color:var(--haze);padding:4px 0;border-bottom:1px solid transparent}
  .nav a:hover{color:var(--cream);border-bottom-color:var(--coral)}
  @media(max-width:640px){.nav{gap:11px;font-size:.6rem}}

  /* hero */
  .hero-shell{position:relative;overflow:hidden}
  .hero{padding:clamp(50px,9vw,100px) 0 clamp(40px,6vw,64px);position:relative;z-index:2}
  .hero-fig{margin:clamp(34px,5vw,52px) 0 0;
    animation:figIn 1s cubic-bezier(.2,.7,.3,1) .3s both}
  @keyframes figIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .hero-fig img{width:100%;display:block;border:1px solid var(--rule)}
  .hero-fig figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
    color:var(--haze);margin-top:12px;line-height:1.65;max-width:62ch}
  .hero-fig b{color:var(--coral);font-weight:400}
  @keyframes markIn{from{opacity:0;transform:translate(26px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
  @media(prefers-reduced-motion:reduce){.hero-fig{animation:none;opacity:1}}
  
  .hero .eyebrow{display:block;margin-bottom:clamp(22px,3.5vw,32px)}
  h1{font-family:var(--sans);font-weight:700;
    font-size:clamp(2.4rem,6.6vw,5rem);line-height:.98;letter-spacing:-.04em;
    margin:0;max-width:15ch;text-wrap:balance}
  .subhead{margin:clamp(22px,3vw,30px) 0 0;max-width:44ch;
    font-family:var(--sans);font-weight:500;
    font-size:clamp(1.14rem,2.1vw,1.6rem);line-height:1.22;letter-spacing:-.02em;color:var(--cream)}
  .subhead em{font-style:normal;color:var(--coral)}
  .standfirst{margin:clamp(16px,2.2vw,22px) 0 0;max-width:52ch;
    font-size:clamp(1.06rem,1.8vw,1.3rem);line-height:1.5;color:var(--haze)}
  .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,40px)}
  .btn{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;padding:12px 21px;border:1px solid var(--cream);color:var(--cream);transition:.18s}
  .btn-solid{background:var(--coral);border-color:var(--coral);color:var(--deep)}
  .btn-lg{font-size:.86rem;padding:16px 30px;letter-spacing:.09em}
  .btn-solid:hover{background:var(--cream);border-color:var(--cream);color:var(--sea)}
  .btn-ghost:hover{background:var(--cream);color:var(--sea)}
  .btn-accent{border-color:var(--coral);color:var(--coral)}
  .btn-pending{border-style:dashed;border-color:rgba(151,162,196,.5);color:var(--haze);
    cursor:default;user-select:none}
  .status-p{color:var(--haze);opacity:.85}
  .btn-accent:hover{background:var(--coral);border-color:var(--coral);color:var(--deep)}
  .byline{margin:clamp(18px,2.4vw,24px) 0 0;font-size:1rem;color:var(--haze);max-width:46ch}
  .byline a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(244,235,213,.3)}
  .byline a:hover{border-bottom-color:var(--coral)}
  .status{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin:clamp(24px,3vw,32px) 0 0;padding:11px 16px;border:1px solid var(--rule);
    background:var(--deep);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em}
  .status .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;
    animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  @media(prefers-reduced-motion:reduce){.status .dot{animation:none}}
  .status-t{color:var(--haze)}
  .status-t b{color:var(--cream);font-weight:500;margin-right:.6em;text-transform:uppercase;letter-spacing:.1em}
  .status-a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.45);padding-bottom:1px}
  .status-a:hover{border-bottom-color:var(--coral)}
  .notify{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:clamp(22px,3vw,30px) 0 0}
  .notify span{font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--haze);max-width:42ch}
  .social{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--haze);margin:clamp(18px,2.4vw,24px) 0 0}
  .social a{color:var(--cream);text-decoration:none;margin-left:14px;
    border-bottom:1px solid rgba(236,155,124,.4);padding-bottom:2px}
  .social a:hover{color:var(--coral);border-bottom-color:var(--coral)}

  /* sections */
  section{padding:clamp(48px,7vw,86px) 0}
  .tint{background:var(--deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .sec-head{margin-bottom:clamp(24px,4vw,40px)}
  h2.title{font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,3.3vw,2.35rem);
    letter-spacing:-.03em;line-height:1.06;margin:11px 0 0;max-width:24ch;text-wrap:balance}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,60px)}
  @media(max-width:800px){.cols{grid-template-columns:1fr;gap:0}}
  .cols p:first-child{margin-top:0}
  .lede{font-size:clamp(1.08rem,1.8vw,1.26rem);line-height:1.5;color:var(--cream)}
  section p{color:var(--haze)}
  section p.lede{color:var(--cream)}

  /* A: spec list */
  dl{margin:0;border-top:1px solid var(--rule)}
  .spec-row{display:grid;grid-template-columns:clamp(118px,17vw,190px) 1fr;
    gap:clamp(16px,4vw,38px);padding:17px 0;border-bottom:1px solid var(--rule);align-items:baseline}
  .spec-row dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--coral)}
  .spec-row dd{margin:0;max-width:62ch;color:var(--haze)}
  @media(max-width:600px){.spec-row{grid-template-columns:1fr;gap:6px}}

  /* B: themes */
  .themes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,30px);
    margin-top:clamp(28px,4vw,42px);border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,32px)}
  @media(max-width:840px){.themes{grid-template-columns:1fr;gap:0;padding-top:0;border-top:none}}
  .theme{position:relative}
  @media(max-width:840px){.theme{border-top:1px solid var(--rule);padding:22px 0}}
  .theme .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--coral);display:block;margin-bottom:11px}
  .theme h3{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.7vw,1.14rem);
    letter-spacing:-.02em;line-height:1.25;margin:0 0 12px;color:var(--cream);max-width:26ch}
  .theme p{margin:0;font-size:.97rem;line-height:1.6;color:var(--haze)}
  .theme p a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.4)}
  .theme p a:hover{border-bottom-color:var(--coral)}

  /* stakes */
  .wager{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,20px);margin-top:clamp(26px,4vw,38px)}
  @media(max-width:760px){.wager{grid-template-columns:1fr}}
  .bet{background:var(--deep);border-left:3px solid var(--rule);overflow:hidden;display:flex;flex-direction:column}
  .bet img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
  .bet .n,.bet h3,.bet p{padding:0 clamp(20px,2.6vw,28px)}
  .bet .n{padding-top:clamp(20px,2.6vw,26px)}
  .bet p{padding-bottom:clamp(22px,3vw,30px)}
  .bet.win{border-left-color:var(--coral)}
  .bet.lose{border-left-color:var(--shelf)}
  .bet .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
    display:block;margin-bottom:12px;color:var(--haze)}
  .bet h3{margin-top:0}
  .bet.win .n{color:var(--coral)}
  .bet h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.06rem,2vw,1.34rem);
    letter-spacing:-.025em;line-height:1.18;margin:0 0 11px;color:var(--cream);max-width:22ch}
  .bet p{margin:0;font-size:.95rem;color:var(--haze)}

  /* C: ledger */
  .ledger{background:var(--sea-2);padding:clamp(26px,4vw,42px);margin-top:clamp(32px,5vw,48px)}
  .ledger h3{font-family:var(--sans);font-weight:500;font-size:clamp(1.06rem,2vw,1.32rem);
    letter-spacing:-.02em;margin:11px 0 24px;max-width:34ch;color:var(--cream)}
  .row{display:grid;grid-template-columns:1fr auto auto;gap:clamp(12px,3vw,30px);align-items:baseline;
    padding:13px 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:clamp(.76rem,1.4vw,.88rem)}
  .row:last-of-type{border-bottom:1px solid var(--rule)}
  .row .what{font-family:var(--serif);font-size:clamp(.98rem,1.7vw,1.1rem);line-height:1.3;color:var(--cream)}
  .row .num{text-align:right;min-width:5.4em;color:var(--haze)}
  .row.inf .num{color:var(--coral)}
  .colhead{border-top:none;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);padding-bottom:4px}
  .colhead .what{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
    figure{margin:clamp(30px,4vw,44px) 0 0}
  .figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px)}
  @media(max-width:700px){.figs{grid-template-columns:1fr}}
  .figs img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
  figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--haze);
    margin-top:11px;line-height:1.6}
  .ledger .note{font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--haze);margin:20px 0 0;max-width:62ch}

  /* D: gear */
  .rig{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,28px);margin-top:clamp(28px,4vw,40px)}
  @media(max-width:760px){.rig{grid-template-columns:1fr}}
  .card{background:var(--sea-2);padding:clamp(20px,3vw,30px)}
  .card h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--coral);margin:0 0 14px;font-weight:500}
  .card ul{margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:.8rem;line-height:1.5}
  .card li{display:grid;grid-template-columns:1fr auto;gap:14px;padding:9px 0;border-top:1px solid var(--rule);color:var(--haze)}
  .card li:first-child{border-top:none;padding-top:0}
  .card li b{font-weight:400;color:var(--cream)}
  .card li span{text-align:right;white-space:nowrap;font-size:.92em}
  .card p{font-size:.92rem;margin:0;color:var(--haze)}

  .checklist{margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--rule)}
  .chk{display:grid;grid-template-columns:clamp(88px,13vw,132px) 1fr;gap:clamp(14px,3vw,32px);
    padding:15px 0;border-bottom:1px solid var(--rule)}
  .chk .when{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);padding-top:.2em}
  .chk .what{font-family:var(--mono);font-size:.82rem;line-height:1.65;color:var(--haze)}
  .chk .what b{color:var(--cream);font-weight:400}
  @media(max-width:560px){.chk{grid-template-columns:1fr;gap:5px}}

  /* E: timeline */
  .tl{border-top:1px solid var(--rule)}
  .tl-item{display:grid;grid-template-columns:clamp(108px,15vw,170px) 1fr;
    gap:clamp(16px,4vw,38px);padding:20px 0;border-bottom:1px solid var(--rule)}
  .tl-when{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--coral);padding-top:.35em;line-height:1.55}
  .tl-what h3{font-family:var(--sans);font-weight:500;font-size:clamp(1rem,1.9vw,1.2rem);
    letter-spacing:-.015em;margin:0 0 5px;color:var(--cream)}
  .tl-what p{margin:0;max-width:58ch;color:var(--haze);font-size:.96rem}
  .tl-item.now .tl-when::after{content:" ●";color:var(--coral);font-size:.68em}
  @media(max-width:600px){.tl-item{grid-template-columns:1fr;gap:7px}}
  .clocks{display:flex;flex-wrap:wrap;gap:9px 22px;margin:14px 0 0;padding:12px 0 0;
    border-top:1px solid var(--rule);font-family:var(--mono);font-size:.7rem;
    letter-spacing:.05em;color:var(--haze);text-transform:uppercase}
  .clocks b{color:var(--coral);font-weight:500;margin-right:.45em;letter-spacing:.02em}
  .slots{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 0;padding:12px 0 0;
    border-top:1px solid var(--rule);font-family:var(--mono);font-size:.72rem;color:var(--haze)}
  .slots b{color:var(--cream);font-weight:500;margin-right:.5em}
  .cta-line{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;margin:12px 0 0;color:var(--haze)}
  .cta-line a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.45)}
  .cta-line a:hover{border-bottom-color:var(--coral)}
  .spec-row dd a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.45)}
  .flag{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--deep);background:var(--coral);
    padding:3px 7px;margin-right:9px;vertical-align:2px}
  .spec-row dd.updated{color:var(--cream)}
  .spec-row dd a:hover{border-bottom-color:var(--coral)}

  /* progress board */
  .board{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,22px);
    align-items:start;margin-top:clamp(24px,3.4vw,34px)}
  @media(max-width:900px){.board{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.board{grid-template-columns:1fr}}
  .phase-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 9px}
  .phase-name{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
  .phase-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--haze)}
  .phase-panel{background:var(--sea-2);border-top:2px solid var(--coral);padding:2px clamp(14px,1.8vw,20px) 7px}
  .tk{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:start;
    padding:11px 0;border-top:1px solid var(--rule)}
  .tk:first-child{border-top:none}
  .tk-box{width:12px;height:12px;margin-top:.45em}
  .tk-tick{width:14px;height:14px;margin-top:.34em;display:block}
  .tk-name{font-size:.98rem;line-height:1.34}
  .tk-h{font-family:var(--mono);font-size:.67rem;letter-spacing:.04em;color:var(--haze);
    white-space:nowrap;margin-top:.5em}
  .tk.todo .tk-box{border:2px solid var(--shelf)}
  .tk.todo .tk-name{color:var(--haze)}
  .tk.doing .tk-box{background:var(--coral);animation:pulse 2.4s ease-in-out infinite}
  .tk.doing .tk-name{color:var(--cream)}
  .tk.doing .tk-h{color:var(--coral)}
  .tk.done .tk-name{color:var(--haze);opacity:.5;text-decoration:line-through}
  .tk.done .tk-h{opacity:.45}
  .tk.blocked .tk-box{border:2px solid var(--coral)}
  .tk.blocked .tk-name{color:var(--coral)}
  @media(prefers-reduced-motion:reduce){.tk.doing .tk-box{animation:none}}
  .meter{display:flex;align-items:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap;
    margin-top:clamp(22px,3vw,30px);padding-top:17px;border-top:1px solid var(--rule)}
  .meter-pct{font-family:var(--sans);font-weight:700;font-size:clamp(2rem,4.6vw,2.9rem);
    letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
  .meter-track{flex:1 1 200px;height:10px;background:var(--shelf)}
  .meter-fill{height:100%;background:var(--coral);width:0}
  .meter-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--haze);
    text-align:right;line-height:1.75;font-variant-numeric:tabular-nums}
  .meter-num b{display:block;color:var(--cream);font-weight:500}
  .board-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
    color:var(--haze);margin:20px 0 0}
  .board-missing{font-family:var(--mono);font-size:.8rem;color:var(--coral);margin:22px 0 0}
  @media(max-width:560px){.meter-num{text-align:left}}

  /* subscribe */
  .sub-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(26px,5vw,60px);align-items:start}
  @media(max-width:800px){.sub-grid{grid-template-columns:1fr}}
  .embed{border:1px solid var(--rule);background:var(--sea-2)}
  .embed iframe{width:100%;border:0;display:block}

  .method{font-size:.94rem;padding:clamp(38px,5vw,60px) 0}
  .essay{max-width:64ch}
  .essay p{margin:0 0 1.25em;color:var(--haze)}
  .essay p:first-of-type{font-size:clamp(1.06rem,1.8vw,1.24rem);line-height:1.5;color:var(--cream)}
  .essay a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.4)}
  .essay a:hover{border-bottom-color:var(--coral)}
  .essay strong{color:var(--cream);font-weight:500}
  .ess-h{font-family:var(--sans);font-weight:700;font-size:clamp(1.14rem,2.1vw,1.42rem);
    letter-spacing:-.022em;color:var(--cream);margin:clamp(34px,4vw,46px) 0 14px}
  .essay-foot{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--haze);
    margin-top:clamp(30px,4vw,40px);padding-top:18px;border-top:1px solid var(--rule)}
  .method a{color:var(--coral)}

  footer{border-top:1px solid var(--rule);padding:42px 0 52px}
  .foot-brand{font-size:21px;margin-bottom:9px}
  .foot-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--coral);margin:0 0 30px}
  .foot{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:baseline;
    font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;color:var(--haze)}
  .fund{opacity:.8}
  .foot a{text-decoration:none;border-bottom:1px solid var(--rule)}
  .foot a:hover{color:var(--cream);border-bottom-color:var(--coral)}

  :focus-visible{outline:2px solid var(--coral);outline-offset:3px}
  .rise{opacity:0;transform:translateY(13px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
  @keyframes rise{to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}html{scroll-behavior:auto}}
/* ============================================================
   DISEMBEDDED — additions for the multi-page structure
   Appended to the original stylesheet. Same tokens throughout.
   ============================================================ */

/* ---------- landing: project cards ---------- */

.projects{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,24px);
  margin-top:clamp(34px,5vw,52px)}
@media(max-width:820px){.projects{grid-template-columns:1fr}}

.proj{background:var(--deep);border-left:3px solid var(--coral);display:flex;flex-direction:column;
  text-decoration:none;padding:clamp(24px,3vw,34px);transition:.18s}
.proj:hover{background:var(--sea-2)}
.proj.b{border-left-color:var(--shelf)}
.proj .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);display:block;margin-bottom:13px}
.proj.b .n{color:var(--shelf)}
.proj h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.16rem,2.2vw,1.5rem);
  letter-spacing:-.028em;line-height:1.12;margin:0 0 13px;color:var(--cream);max-width:24ch;text-wrap:balance}
.proj p{margin:0 0 18px;font-size:.98rem;line-height:1.55;color:var(--haze);max-width:44ch}
.proj .state{margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--haze);padding-top:15px;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.proj .state b{font-weight:400;color:var(--cream)}
.proj .go{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--coral);margin-left:auto}
.proj .state:not(:has(b)){justify-content:flex-end}
.proj.b .go{color:var(--shelf)}
.proj:hover .go{color:var(--cream)}

/* the essay pointer under the cards */
.aside-link{margin:clamp(26px,3.4vw,36px) 0 0;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.05em;line-height:1.8;color:var(--haze);max-width:60ch}
.aside-link a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.45)}
.aside-link a:hover{color:var(--coral);border-bottom-color:var(--coral)}

/* ---------- pinned project header ---------- */

.pinned{background:var(--deep);border-bottom:1px solid var(--rule)}
.pinned .wrap{padding-top:clamp(34px,5vw,56px);padding-bottom:clamp(26px,3.6vw,38px)}
.pinned h1{max-width:17ch}
.pinned .standfirst{max-width:56ch}

.statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin:clamp(24px,3.2vw,34px) 0 0;padding:12px 17px;border:1px solid var(--rule);
  background:var(--sea);font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase}
.statusbar .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.statusbar .dot{animation:none}}
.statusbar .s{color:var(--cream)}
.statusbar .sep{color:var(--rule)}
.statusbar .q{color:var(--haze);text-transform:none;letter-spacing:.04em}
.statusbar a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.45);
  margin-left:auto}
.statusbar a:hover{border-bottom-color:var(--coral)}

/* ---------- liveblog ---------- */

.log{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule);
  max-width:74ch}
.entry{padding:clamp(18px,2.4vw,24px) 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:clamp(96px,13vw,140px) 1fr;gap:clamp(14px,3vw,30px)}
@media(max-width:640px){.entry{grid-template-columns:1fr;gap:8px}}
.entry .when{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--haze);line-height:1.7}
.entry .when b{display:block;font-weight:400;color:var(--coral)}
.entry .what{margin:0;color:var(--cream);font-size:1.02rem;line-height:1.55}
.entry .what + .what{margin-top:.7em;color:var(--haze)}
.entry .what a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.4)}
.entry .what a:hover{border-bottom-color:var(--coral)}
.entry.k-finding{background:linear-gradient(90deg,rgba(236,155,124,.07),transparent 60%)}
.entry.k-finding .what:first-child{font-family:var(--sans);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.06rem,1.9vw,1.2rem);line-height:1.3}
.log-empty{font-family:var(--mono);font-size:.74rem;color:var(--haze);padding:26px 0}

/* ---------- conversations index ---------- */

.eps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,24px);margin-top:clamp(28px,4vw,42px)}
@media(max-width:820px){.eps{grid-template-columns:1fr}}
.ep{background:var(--deep);border-left:3px solid var(--coral);display:flex;flex-direction:column;
  text-decoration:none;overflow:hidden;transition:.18s}
.ep:hover{background:var(--sea-2)}
.ep img{width:100%;height:clamp(150px,15vw,200px);object-fit:cover;object-position:center 32%;display:block}
.ep-body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;flex:1}
.ep .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);display:block;margin-bottom:12px}
.ep h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.06rem,2vw,1.32rem);
  letter-spacing:-.025em;line-height:1.14;margin:0 0 12px;color:var(--cream);max-width:24ch}
.ep p{margin:0 0 14px;font-size:.95rem;line-height:1.55;color:var(--haze)}
.ep .who{font-family:var(--mono);font-size:.66rem;line-height:1.75;letter-spacing:.03em;color:var(--shelf)}
.ep .go{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--coral);margin:16px 0 0}
.ep:hover .go{color:var(--cream)}

/* ---------- conversation detail ---------- */

dl.facts{margin:clamp(26px,3.6vw,38px) 0 0;border-top:1px solid var(--rule)}
.fact{display:grid;grid-template-columns:clamp(104px,15vw,160px) 1fr;
  gap:clamp(14px,4vw,34px);padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.fact dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--coral)}
.fact dd{margin:0;max-width:62ch;color:var(--haze);font-size:.98rem;line-height:1.55}
.fact dd a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.4)}
.fact dd a:hover{color:var(--coral);border-bottom-color:var(--coral)}
@media(max-width:600px){.fact{grid-template-columns:1fr;gap:5px}}

.chapters{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.chapters li{display:grid;grid-template-columns:clamp(60px,8vw,84px) 1fr;
  gap:clamp(14px,3vw,28px);padding:11px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.chapters .t{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--coral)}
.chapters .d{font-size:1rem;line-height:1.42;color:var(--haze);max-width:64ch}
@media(max-width:560px){.chapters li{grid-template-columns:1fr;gap:3px;padding:13px 0}}

.method{font-family:var(--mono);font-size:.72rem;line-height:1.75;color:var(--haze);
  max-width:70ch;margin:clamp(30px,4vw,44px) 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.method a{color:var(--coral)}

/* ---------- generic page head (non-landing) ---------- */

.phead{padding:clamp(40px,6vw,72px) 0 clamp(24px,3.4vw,38px)}
.phead .eyebrow{display:block;margin-bottom:clamp(16px,2.6vw,24px)}
.phead h1{max-width:19ch}

/* pages that are mostly prose */
.prose-page{max-width:74ch}

/* ---------- fix: the hero's padding shorthand zeroed the gutter ----------
   .hero{padding:X 0 Y} overrode .wrap's horizontal padding, so on phones
   the hero text sat flush against the screen edge. */
.hero.wrap{padding-left:clamp(20px,5vw,52px);padding-right:clamp(20px,5vw,52px)}

/* ---------- follow row ---------- */

.follow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:clamp(26px,3.4vw,36px) 0 0}
.follow .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);margin-right:4px}
.follow a{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:10px 17px;border:1px solid var(--rule);color:var(--cream);transition:.18s}
.follow a:hover{border-color:var(--coral);color:var(--coral);background:var(--deep)}
.follow-note{font-family:var(--mono);font-size:.72rem;line-height:1.8;letter-spacing:.04em;
  color:var(--haze);margin:15px 0 0;max-width:62ch}
.follow-note a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.4)}
.follow-note a:hover{border-bottom-color:var(--coral)}
.foot-follow{margin:0 0 30px}

/* copy-to-social button on each liveblog entry */
.copy{margin-top:12px;background:none;border:1px solid var(--rule);color:var(--haze);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;cursor:pointer;transition:.15s}
.copy:hover{border-color:var(--coral);color:var(--coral)}
.entry:not(:hover) .copy{opacity:.45}
.entry:focus-within .copy{opacity:1}
/* the sticky masthead would cover an entry linked to by anchor */
.entry{scroll-margin-top:70px}

/* ---------- follow row: one CTA, the rest as quiet text ---------- */
.follow .yt{border-color:var(--coral)}
.follow .lbl{margin-left:10px}
.follow a.alt + a.alt{margin-left:2px}
.follow a.alt{margin-right:6px}
.follow a.alt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--cream);border:0;border-bottom:1px solid var(--rule);
  padding:0 0 2px;background:none}
.follow a.alt:hover{color:var(--coral);border-bottom-color:var(--coral);background:none}

/* ---------- logo lockup: mark + wordmark + subheading ---------- */
.brand{align-items:center}
.brand .lockup{display:flex;flex-direction:column;justify-content:center;line-height:1}
.brand .sub{font-family:var(--mono);font-size:.5em;letter-spacing:.1em;text-transform:uppercase;
  color:var(--haze);margin-top:.42em;white-space:nowrap}
.foot-brand .sub{color:var(--coral)}
@media(max-width:720px){.brand .sub{display:none}}

/* ---------- landing thesis ---------- */
.thesis{margin:clamp(22px,3vw,32px) 0 0;max-width:60ch}
.thesis p{margin:0 0 1em;font-size:clamp(1.04rem,1.7vw,1.22rem);line-height:1.55;color:var(--haze)}
.thesis p:last-child{margin-bottom:0}
.thesis b{font-weight:400;color:var(--cream)}
.thesis a{color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.45);
  white-space:nowrap}
.thesis a:hover{border-bottom-color:var(--coral)}

/* nav: keep the numbered project labels on one line on phones.
   The logo already links home, so "The project" hides when space is tight. */
.nav a{white-space:nowrap}
@media(max-width:760px){.nav a.nav-home{display:none}}
@media(max-width:520px){.nav{gap:10px;font-size:.58rem}}

/* ---------- AnxIeties: the embedded AI ----------
   Off by default — the capital I alone reads as a typo. Uncomment the rule
   below to tint the A and I coral, which is the only treatment that makes
   the AI legible rather than accidental. */
.ai{color:inherit;font:inherit}
/* .proj h3 .ai, h1 .ai, .nav .ai{color:var(--coral)} */

/* ---------- fix: images were overflowing their column ----------
   The original stylesheet only constrained img inside specific containers
   (.hero-fig, .bet, .figs), so the episode illustrations — which carry
   width="1672" — pushed the page 1672px wide on a phone. */
img{max-width:100%;height:auto}

/* the essay page's h1 uses .title, which was written for h2 */
h1.title{font-family:var(--sans);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.035em;line-height:1.04;
  margin:11px 0 0;max-width:22ch;text-wrap:balance}

/* ---------- landing: the mark in the right column ---------- */
.markcol{display:flex;align-items:flex-start;justify-content:center}
.bigd{width:100%;max-width:250px;height:auto}
@media(max-width:960px){.markcol{display:none}}
@media(min-width:961px){.hero-split .markcol{grid-column:2;align-self:start}}

/* ---------- (unused) the "Latest" rail ---------- */
.latest{border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,28px)}
.latest-lbl{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);display:block;margin-bottom:16px}
.latest-item{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.latest-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.latest-item .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--haze);display:block;margin-bottom:8px}
.latest-item p{margin:0 0 9px;font-size:.94rem;line-height:1.5;color:var(--cream)}
.latest-item a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--coral);text-decoration:none;border-bottom:1px solid rgba(236,155,124,.4)}
.latest-item a:hover{border-bottom-color:var(--coral)}
@media(min-width:961px){
  .hero-split{display:grid;grid-template-columns:1fr minmax(230px,290px);
    column-gap:clamp(30px,4vw,56px);align-items:start}
  .hero-split .eyebrow,.hero-split h1,.hero-split .projects,.hero-split > div:last-of-type{grid-column:1/-1}
  .hero-split .hero-col{grid-column:1}
  .hero-split .latest{grid-column:2;align-self:start}
}
@media(max-width:960px){.latest{border-left:0;padding-left:0;border-top:1px solid var(--rule);
  padding-top:22px;margin-top:26px}}

/* ---------- landing: tighten the vertical rhythm ----------
   The hero was padded for a long single-scroll page. On a short evergreen
   landing page that padding just leaves the viewport half empty. */
.hero-split{padding-top:clamp(30px,4.5vw,54px);padding-bottom:clamp(30px,4vw,48px)}
.hero-split h1{margin-top:0}
.hero-split .eyebrow{margin-bottom:clamp(12px,1.8vw,18px)}
.hero-split .thesis{margin-top:clamp(18px,2.2vw,26px)}
.hero-split .projects{margin-top:clamp(26px,3.4vw,40px)}
.hero-split .follow{margin-top:clamp(22px,2.8vw,32px)}
.hero-split .markcol{padding-top:clamp(4px,1vw,14px)}
/* let the grid column set the measure instead of a 15ch cap, so the
   headline sets in two or three lines rather than four */
.hero-split h1{max-width:none}

/* live Hong Kong timestamp in the Project status heading */
.stamp{display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(.78rem,1.5vw,.95rem);letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral);margin-top:12px}

/* the byline name links to the HKU staff page */
.eyebrow .who-link{color:var(--cream);text-decoration:none;
  border-bottom:1px solid rgba(236,155,124,.45);padding-bottom:2px}
.eyebrow .who-link:hover{color:var(--coral);border-bottom-color:var(--coral)}