/* site.css - the approved Dia prototype stylesheet, lifted verbatim from _proto/seeds_and_shoots/index.html.
   Only edits: font URLs made root-relative; nav-type selectors (.links/.srail/.rfoot/.backlink) target <a> instead of <button>; accent selectors key on data-turning, not data-season.
   Additions live in override.css. Do not restyle here without a brief (fidelity to the approved look is the contract). */
  /* Nexa self-hosted (your files). Newsreader + JetBrains Mono come from Google
     on the live site; the sandbox blocks them, so they fall back to Palatino / SF Mono
     here and correct once placed. Nexa renders for real. */
  @font-face{font-family:'Nexa';src:url('/fonts/nexa-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:'Nexa';src:url('/fonts/nexa-heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
  *{box-sizing:border-box;margin:0;padding:0;}
  :root{
    --display:'Nexa','League Spartan',sans-serif;
    --serif:'Newsreader','Iowan Old Style','Palatino','Georgia',serif;
    --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
    --r-sm:4px;--r-md:8px;--r-lg:12px;
    --exhale:cubic-bezier(.4,0,.2,1);
    --scrim:6,8,12;
    --ink:#f6f0e2;--ink-soft:rgba(246,240,226,.74);--ink-faint:rgba(246,240,226,.44);
    --paper:#f4f1ea;--paper2:#ece6da;--pink:#26241f;--psoft:#5a544a;--pfaint:#8b8478;--pline:rgba(38,36,31,.14);
  }
  /* seasonal accents — dark (over photo) + paper (on warm ground) */
  html[data-turning="march-equinox"]{--accent:#7fb06a;--accent-d:#4c7340;}
  html[data-turning="june-solstice"]{--accent:#e3b64f;--accent-d:#a9781f;}
  html[data-turning="september-equinox"]{--accent:#d68a48;--accent-d:#a3592a;}
  html[data-turning="december-solstice"]{--accent:#9fb6d2;--accent-d:#4f6b8c;}

  html{scroll-behavior:smooth;background:#0b0d16;transition:background .6s var(--exhale);}
  html[data-surface="paper"]{background:var(--paper);}
  body{font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;font-size:17px;line-height:1.6;}

  #bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;transition:background-image .6s ease,opacity .7s ease;}
  #bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(to bottom,rgba(var(--scrim),.58) 0%,rgba(var(--scrim),.16) 26%,rgba(var(--scrim),0) 48%),
    linear-gradient(to top,rgba(var(--scrim),.82) 0%,rgba(var(--scrim),.26) 30%,rgba(var(--scrim),0) 56%),rgba(var(--scrim),.06);}
  html[data-surface="paper"] #bg{opacity:0;}
  #stage{position:relative;z-index:2;}

  /* ---------------- NAV (glass, your idiom) ---------------- */
  .nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);transition:background .5s,border-color .5s;}
  html[data-surface="dark"] .nav{background:rgba(11,13,22,.62);border-bottom:1px solid rgba(246,240,226,.1);}
  html[data-surface="paper"] .nav{background:color-mix(in srgb,var(--paper) 66%,transparent);border-bottom:1px solid var(--pline);}
  .nav .inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px;}
  .brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none;}
  .brand .mark{width:24px;height:24px;color:var(--accent);}
  .brand .name{font-family:var(--display);font-weight:800;font-size:18px;text-transform:lowercase;letter-spacing:.01em;}
  html[data-surface="dark"] .brand .name{color:var(--ink);}html[data-surface="paper"] .brand .name{color:var(--pink);}
  .links{display:flex;align-items:center;gap:2px;font-family:var(--mono);}
  .links a{all:unset;cursor:pointer;position:relative;white-space:nowrap;font-size:13.5px;letter-spacing:.02em;text-transform:lowercase;padding:9px 12px;border-radius:var(--r-sm);transition:color .25s;}
  html[data-surface="dark"] .links a{color:var(--ink-soft);}html[data-surface="dark"] .links a:hover{color:var(--ink);}
  html[data-surface="paper"] .links a{color:var(--psoft);}html[data-surface="paper"] .links a:hover{color:var(--pink);}
  .links a.current{color:var(--ink);}html[data-surface="paper"] .links a.current{color:var(--pink);}
  /* the sunrise/sunset thread: a horizon line, a low glow, and the smallest crescent of sun */
  .links a.current::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 78%,transparent) 26%,var(--accent) 50%,color-mix(in srgb,var(--accent) 78%,transparent) 74%,transparent);}
  .links a.current::before{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:44px;height:20px;pointer-events:none;background:radial-gradient(circle 7px at 50% 100%,var(--accent) 0 44%,color-mix(in srgb,var(--accent) 55%,transparent) 62%,transparent 74%),radial-gradient(23px 18px at 50% 100%,color-mix(in srgb,var(--accent) 40%,transparent),color-mix(in srgb,var(--accent) 12%,transparent) 46%,transparent 76%);}
  .links .cta{border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:9px 15px;}
  html[data-surface="dark"] .links .cta{color:var(--ink);}html[data-surface="paper"] .links .cta{color:var(--accent-d);}
  .links .cta:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);}
  /* phone: brand row, then the four links as a 2x2 grid (no row fits four 16px links at 360-430px), 16px type, 44px targets (MOB1) */
  @media(max-width:640px){
    .nav .inner{flex-wrap:wrap;padding:8px 16px 4px;gap:0;}
    .brand{flex:0 0 100%;min-height:44px;}
    .brand .name{font-size:18px;}
    .links{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;}
    .links a:nth-child(even){justify-self:end;}
    .links a{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:0 6px;font-size:16px;letter-spacing:0;}
    .links .cta{padding:0 12px;}
    .links a.current::after{left:6px;right:6px;bottom:6px;}
    .links a.current::before{bottom:7px;}
  }

  /* ---------------- SEASON RAIL (text tabs, underline — no pills/boxes) ---------------- */
  .srail{position:relative;z-index:20;display:flex;justify-content:center;gap:clamp(16px,4vw,40px);padding:16px 20px 0;flex-wrap:wrap;}
  .srail a{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:6px 2px;border-bottom:2px solid transparent;transition:color .25s,border-color .25s;color:var(--ink-faint);text-shadow:0 1px 5px rgba(0,0,0,.5);}
  .srail a:hover{color:var(--ink-soft);}
  .srail a.on{color:var(--ink);border-bottom-color:var(--accent);}
  html[data-surface="paper"] .srail a{color:var(--pfaint);text-shadow:none;}html[data-surface="paper"] .srail a.on{color:var(--pink);}

  .mark-svg{color:var(--accent);}
  .disp{font-family:var(--display);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;}

  /* ---------------- HERO ---------------- */
  .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 8% 90px;position:relative;}
  .breadcrumb{position:absolute;top:96px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);text-shadow:0 1px 5px rgba(0,0,0,.5);}
  .mast{font-family:var(--display);font-weight:800;font-size:clamp(46px,10vw,120px);color:var(--ink);text-shadow:0 2px 40px rgba(0,0,0,.6);line-height:1;}
  .mast .amp{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent);}
  .tag{margin-top:22px;font-family:var(--mono);font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);text-shadow:0 1px 5px rgba(0,0,0,.5);}
  .season-glyph{width:38px;height:38px;color:var(--accent);margin:34px auto 12px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
  .invocation{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.6vw,23px);line-height:1.5;color:var(--ink);max-width:24ch;margin:0 auto;text-shadow:0 1px 12px rgba(0,0,0,.6);}
  .explore{position:absolute;bottom:44px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:12px;}
  .explore .et{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);text-shadow:0 1px 5px rgba(0,0,0,.5);}
  .icon-btn{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.18);border:1.5px solid rgba(246,240,226,.45);display:flex;align-items:center;justify-content:center;color:rgba(246,240,226,.8);cursor:pointer;backdrop-filter:blur(5px);transition:.25s;}
  .icon-btn:hover{background:rgba(0,0,0,.32);border-color:rgba(246,240,226,.72);color:var(--ink);}
  .icon-btn svg{width:19px;height:19px;}
  .bounce{animation:bounce 2.4s ease-in-out infinite;}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  body.reduced .bounce{animation:none;}

  .q{font-family:var(--display);font-weight:800;font-size:clamp(34px,7vw,86px);color:var(--qc,#f6f0e2);max-width:15ch;text-shadow:0 2px 34px rgba(0,0,0,.72),0 1px 6px rgba(0,0,0,.55);line-height:1.04;letter-spacing:-.01em;}
  .seedno{margin-top:26px;font-family:var(--mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);}

  /* ---------------- editor note ---------------- */
  .ednote{max-width:620px;margin:0 auto;padding:11vh 6% 5vh;text-align:center;}
  .ednote .sprig{margin:0 auto 24px;}
  .ednote p{font-family:var(--serif);font-size:clamp(17px,2.4vw,21px);line-height:1.75;color:var(--ink-soft);}
  .ednote .sig{margin-top:22px;font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
  .sprig{width:32px;height:32px;color:var(--accent);display:block;}

  /* ---------------- gallery ---------------- */
  .gallery{background:rgba(9,11,18,.9);padding:9vh 5% 13vh;}
  .gh{text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6vh;}
  .gh b{color:var(--accent);font-weight:400;}
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1120px;margin:0 auto;}
  @media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);}}@media(max-width:480px){.tiles{grid-template-columns:1fr;}}
  .tile{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:#111;}
  .tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--exhale);}
  .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--scrim),.84) 0%,rgba(var(--scrim),.2) 46%,rgba(var(--scrim),0) 74%);}
  .tile:hover img{transform:scale(1.06);}
  body.reduced .tile img{transition:none;}
  .tile .cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;}
  .tile .tn{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px;text-shadow:0 1px 4px rgba(0,0,0,.6);}
  .tile .tq{font-family:var(--display);font-weight:800;font-size:clamp(18px,2vw,23px);color:var(--ink);text-shadow:0 2px 18px rgba(0,0,0,.7);line-height:1.08;}

  /* ---------------- reflections (glass, smoke on water) ---------------- */
  .reflections{padding:8vh 6% 12vh;}
  .refl-head{text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2vh;text-shadow:0 1px 6px rgba(0,0,0,.5);}
  .qecho{text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(17px,2.4vw,22px);color:var(--ink-soft);max-width:20ch;margin:0 auto 9vh;letter-spacing:-.01em;}
  .stream{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12vh;}
  .glass{position:relative;padding:32px 36px;border-radius:var(--r-lg);color:var(--ink);
    background:linear-gradient(135deg,rgba(246,240,226,.11),rgba(246,240,226,.035));
    border:1px solid rgba(246,240,226,.18);backdrop-filter:blur(24px) saturate(118%);-webkit-backdrop-filter:blur(24px) saturate(118%);
    box-shadow:0 46px 100px -44px rgba(0,0,0,.78),inset 0 1px 0 rgba(246,240,226,.16);
    opacity:0;transform:translateY(40px);filter:blur(7px);transition:opacity 1.1s var(--exhale),transform 1.1s var(--exhale),filter 1.1s;}
  .glass.in{opacity:1;transform:none;filter:none;}
  body.reduced .glass{transition:none;opacity:1;transform:none;filter:none;}
  .stream .glass:nth-child(odd){align-self:flex-start;margin-left:2%;}
  .stream .glass:nth-child(even){align-self:flex-end;margin-right:2%;}
  .glass.in.float{animation:drift 10s ease-in-out infinite;}
  body.reduced .glass.in.float{animation:none;}
  @keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .glass .by{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
  .glass .by span{color:var(--ink-faint);}
  .glass p{font-family:var(--serif);font-size:clamp(17px,2.5vw,20px);line-height:1.62;}
  .pnav{display:flex;align-items:center;justify-content:center;gap:22px;padding:0 6% 12vh;}
  .pnav .cur{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);min-width:110px;text-align:center;}

  /* ---- long contribution: featured card in the stream ---- */
  .glass.essay-card{align-self:stretch !important;margin-left:0 !important;margin-right:0 !important;padding:32px 36px;}
  @media(max-width:560px){.glass.essay-card{padding:26px 24px;}}
  .essay-card .ec-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
  .essay-card .ec-title{font-family:var(--display);font-weight:800;font-size:clamp(23px,3.6vw,32px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px;text-shadow:0 1px 20px rgba(0,0,0,.4);}
  .essay-card .by{margin-bottom:14px;}
  .essay-card .ec-lead{font-family:var(--serif);font-size:clamp(16px,2.4vw,18px);line-height:1.62;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .read-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--mono);font-size:15px;letter-spacing:.03em;color:var(--ink);border:1px solid rgba(246,240,226,.4);border-radius:var(--r-sm);padding:11px 18px;transition:.25s;}
  .read-btn:hover{background:rgba(246,240,226,.12);border-color:rgba(246,240,226,.72);}
  .read-btn svg{width:15px;height:15px;}

  /* ---- reading room (paper long-form) ---- */
  .reading{padding-top:112px;}
  .reading .rwrap{max-width:680px;margin:0 auto;padding:0 7% 14vh;}
  .rback{all:unset;cursor:pointer;display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--accent-d);margin-bottom:30px;}
  .rback:hover{text-decoration:underline;}
  .rhero{width:100%;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;margin-bottom:30px;box-shadow:0 34px 64px -36px rgba(38,36,31,.42);}
  .rhero img{width:100%;height:100%;object-fit:cover;display:block;}
  .rq{font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d);}
  .rtitle{font-family:var(--display);font-weight:800;font-size:clamp(30px,5.6vw,48px);line-height:1.04;letter-spacing:-.01em;color:var(--pink);margin:12px 0 16px;}
  .rbody{margin-top:34px;}
  .rbody p{font-family:var(--serif);font-size:clamp(18px,2.5vw,20px);line-height:1.78;color:var(--pink);margin-top:1.5em;}
  .rbody p:first-of-type{margin-top:0;}
  .rbody p:first-of-type::first-letter{font-family:var(--display);font-weight:800;float:left;font-size:3.4em;line-height:.82;padding:6px 12px 0 0;color:var(--accent-d);}
  .rbody .pull{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,4vw,31px);line-height:1.32;color:var(--accent-d);text-align:center;margin:1.5em auto;padding:0 2%;max-width:20ch;}
  .rbody .pull::first-letter{font-size:inherit;float:none;padding:0;color:inherit;font-family:inherit;}
  .rfoot{margin-top:7vh;padding-top:26px;border-top:1px solid var(--pline);font-family:var(--mono);font-size:14px;color:var(--pfaint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;}
  .rfoot a{all:unset;cursor:pointer;color:var(--accent-d);}
  .rfoot a:hover{text-decoration:underline;}
  @media(max-width:560px){.rhero{aspect-ratio:4/3;}.reading{padding-top:96px;}}

  /* ---- immersive reading (full-bleed, over the seed photo) ---- */
  .rhero-full{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 8% 90px;position:relative;}
  .rhero-full .rback{position:absolute;top:96px;left:0;right:0;text-align:center;color:var(--ink-soft);margin:0;text-shadow:0 1px 5px rgba(0,0,0,.5);}
  .rhero-cap{max-width:min(92vw,880px);}
  .rkick{font-family:var(--mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 6px rgba(0,0,0,.6);}
  .rhero-full .rtitle{font-family:var(--display);font-weight:800;font-size:clamp(34px,7vw,84px);line-height:1.04;letter-spacing:-.01em;color:var(--ink);margin:16px 0 18px;text-shadow:0 2px 34px rgba(0,0,0,.72),0 1px 6px rgba(0,0,0,.5);}
  .rbyline{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:6px;text-align:left;}
  .rportrait{flex:none;display:block;position:relative;width:62px;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;text-decoration:none;border:1px solid rgba(246,240,226,.32);box-shadow:0 12px 26px -16px rgba(0,0,0,.85);background:#10131d;transition:border-color .3s,transform .3s;}
  .rportrait:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-2px);}
  a.rportrait:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  span.rportrait:hover{border-color:rgba(246,240,226,.32);transform:none;}
  body.reduced .rportrait{transition:none;}
  .rbtext{font-family:var(--mono);font-size:16px;letter-spacing:.04em;line-height:1.5;color:var(--ink-soft);text-shadow:0 1px 5px rgba(0,0,0,.5);}
  .rbtext .nw{white-space:nowrap;}
  .rbname{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(246,240,226,.4);}
  .rbname:hover{border-bottom-color:var(--accent);}
  .rbody-immersive{position:relative;padding:11vh 8% 12vh;background:linear-gradient(to bottom,rgba(6,8,12,.28) 0%,rgba(6,8,12,.64) 20%,rgba(6,8,12,.72) 100%);}
  .rcol{max-width:640px;margin:0 auto;}
  .rcol p{font-family:var(--serif);font-size:clamp(18px,2.5vw,21px);line-height:1.8;color:var(--ink);margin-top:1.6em;text-shadow:0 1px 16px rgba(0,0,0,.6);}
  .rcol p:first-of-type{margin-top:0;}
  .rcol p:first-of-type::first-letter{font-family:var(--display);font-weight:800;float:left;font-size:3.6em;line-height:.8;padding:8px 14px 0 0;color:var(--accent);text-shadow:0 2px 20px rgba(0,0,0,.6);}
  .rcol .pull{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,4.6vw,37px);line-height:1.3;color:var(--accent);text-align:center;margin:1.7em auto;padding:0;max-width:18ch;border:none;text-shadow:0 2px 24px rgba(0,0,0,.65);}
  .rcol .pull::first-letter{font-size:inherit;float:none;padding:0;color:inherit;}
  .rbody-immersive .rfoot{max-width:640px;margin:8vh auto 0;padding-top:26px;border-top:1px solid rgba(246,240,226,.2);font-family:var(--mono);font-size:14px;color:var(--ink-faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;}
  .rbody-immersive .rfoot a{all:unset;cursor:pointer;color:var(--accent);}
  .rbody-immersive .rfoot a:hover{text-decoration:underline;}


  /* ---------------- contributors ---------------- */
  .section-head{text-align:center;padding:130px 8% 5vh;}
  .section-head .sprig{margin:0 auto 18px;}
  .section-head h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,6vw,62px);color:var(--ink);letter-spacing:-.01em;}
  .section-head .sub{margin-top:16px;font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);}
  /* ---- contributor index: the editor leads; everyone else is an ambient-image card (their seed behind a monogram) ---- */
  .pgrid{max-width:1040px;margin:0 auto;padding:2vh 5% 13vh;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .pcard{position:relative;display:flex;text-decoration:none;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);border:1px solid rgba(246,240,226,.16);color:var(--ink);transition:border-color .3s,transform .3s;}
  .pcard:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-4px);}
  body.reduced .pcard,body.reduced .pcard .amb{transition:none;}
  body.reduced .pcard:hover,body.reduced .pcard:hover .amb{transform:none;}
  .amb{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform 1s var(--exhale);}
  .pcard:hover .amb{transform:scale(1.05);}
  .pshade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(var(--scrim),.92),rgba(var(--scrim),.66) 52%,rgba(var(--scrim),.22));}
  .pcard .pin{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 24px 30px;}
  .pcard .cthumb{margin:0 auto 20px;}
  .pcard .cn{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;color:var(--ink);}
  .pcard .cl{margin-top:8px;font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
  .pcard .gtag{margin-top:12px;font-size:16px;letter-spacing:.06em;padding:3px 10px;}
  .pcard .pline{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink-soft);}
  .pcard.lead{grid-column:1/-1;}
  .pcard.lead .pin{flex-direction:row;align-items:center;text-align:left;gap:36px;padding:36px 40px;}
  .pcard.lead .cthumb{width:160px;flex:none;margin:0;}
  .pcard.lead .cn{font-size:clamp(30px,4vw,44px);}
  .pcard.lead .pline{font-size:clamp(19px,2.4vw,23px);max-width:42ch;}
  @media(max-width:860px){.pgrid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.pgrid{grid-template-columns:1fr;}.pcard.lead .pin{flex-direction:column;text-align:center;padding:34px 24px 30px;}.pcard.lead .cthumb{margin:0 auto 20px;}}

  /* ---- contributor profile: portrait over their seed, bio, their work, links, shelf, share ---- */
  .cp-hero{position:relative;isolation:isolate;overflow:hidden;padding:150px 6% 64px;}
  .cp-hero .amb{inset:-24px;filter:blur(12px) saturate(1.1);}
  .cp-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(var(--scrim),.3),rgba(var(--scrim),.84));}
  .cp-in{max-width:1000px;margin:0 auto;display:flex;align-items:flex-end;gap:44px;}
  .cp-portrait{position:relative;flex:none;width:220px;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(165deg,rgba(246,240,226,.14),rgba(246,240,226,.035));box-shadow:0 30px 70px -30px rgba(0,0,0,.75);}
  .cp-portrait .mono{font-size:100px;}
  .cp-id{min-width:0;}
  .cp-id .k,.cp-body .k{display:block;font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .cp-id h1{margin-top:10px;font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,76px);line-height:1;letter-spacing:-.01em;color:var(--ink);}
  .cp-id .where{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
  .cp-id .gtag{margin-top:0;font-size:16px;letter-spacing:.06em;padding:3px 10px;}
  .cp-id .tagline{margin-top:20px;max-width:40ch;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,24px);line-height:1.45;color:var(--ink);}
  .cp-body{padding:56px 6% 4vh;}
  .cp-wrap{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;}
  .cp-main .bio p{font-family:var(--serif);font-size:clamp(18px,2.3vw,20px);line-height:1.7;color:var(--ink-soft);margin-bottom:1.1em;}
  .cp-sec{margin-top:48px;}
  .cp-main>.cp-sec:first-child{margin-top:0;}
  .cp-sec .k,.cp-block .k{margin-bottom:16px;}
  .works{display:flex;flex-direction:column;gap:16px;}
  .cp-piece{padding:26px 28px;border-radius:var(--r-md);border:1px solid rgba(246,240,226,.18);background:linear-gradient(135deg,rgba(246,240,226,.1),rgba(246,240,226,.035));backdrop-filter:blur(16px) saturate(116%);-webkit-backdrop-filter:blur(16px) saturate(116%);}
  .cp-piece.long{cursor:pointer;box-shadow:0 30px 70px -46px rgba(0,0,0,.8);}
  .cp-piece .wk{display:block;margin-bottom:10px;font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--accent);}
  .cp-piece h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,34px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);}
  .cp-piece p{margin-top:12px;font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink-soft);}
  .cp-piece .seedq{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-soft);}
  .cp-piece.short p{margin-top:0;color:var(--ink);}
  .cp-piece.short .seedq{margin-top:14px;}
  .cp-block{margin-bottom:36px;}
  .links-row{display:flex;flex-direction:column;gap:10px;}
  .cp-lnk{text-decoration:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 14px;border:1px solid rgba(246,240,226,.22);border-radius:var(--r-sm);color:var(--ink-soft);transition:.25s;}
  .cp-lnk:hover{color:var(--ink);border-color:var(--accent);}
  .cp-lnk svg{width:20px;height:20px;flex:none;}
  .cp-lnk .lk{font-family:var(--serif);font-size:18px;color:var(--ink);}
  .cp-lnk .lu{font-family:var(--mono);font-size:16px;color:var(--ink-faint);overflow-wrap:anywhere;}
  .shelf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .shelf-list .ti{display:block;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.3;color:var(--ink);}
  .shelf-list .au{display:block;margin-top:2px;font-family:var(--mono);font-size:16px;color:var(--ink-faint);}
  .cp-share{display:flex;flex-wrap:wrap;gap:10px;}
  .cp-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:11px 16px;font-family:var(--mono);font-size:16px;color:var(--ink);border:1px solid rgba(246,240,226,.4);border-radius:var(--r-sm);transition:.25s;}
  .cp-btn:hover{background:rgba(246,240,226,.12);border-color:rgba(246,240,226,.72);}
  .cp-btn:focus-visible,.cp-lnk:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .cp-btn svg{width:18px;height:18px;}
  .cp-btn.done{color:var(--accent);border-color:var(--accent);}
  .cp-urlbox{display:block;box-sizing:border-box;width:100%;margin-top:12px;padding:10px 12px;font-family:var(--mono);font-size:16px;color:var(--ink);background:rgba(0,0,0,.3);border:1px solid var(--accent);border-radius:var(--r-sm);}
  .cp-piece .read-btn{margin-top:18px;}
  @media(max-width:820px){.cp-wrap{grid-template-columns:1fr;gap:12px;}.cp-in{gap:28px;}.cp-portrait{width:170px;}.cp-portrait .mono{font-size:76px;}}
  @media(max-width:600px){.cp-hero{padding:120px 6% 44px;}.cp-in{flex-direction:column;align-items:flex-start;gap:24px;}.cp-portrait{width:150px;}.cp-piece{padding:22px 20px;}}
  .cav{width:66px;height:66px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.22);border:1.5px solid rgba(246,240,226,.5);font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink);}
  .cthumb{width:96px;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;margin:0 auto 18px;box-shadow:0 18px 40px -22px rgba(0,0,0,.6);}
  .cthumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .avatar{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;background:rgba(0,0,0,.2);border:1.5px solid rgba(246,240,226,.5);font-family:var(--display);font-weight:800;font-size:34px;color:var(--ink);}
  .cname{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,66px);color:var(--ink);letter-spacing:-.01em;}
  .cbio{max-width:46ch;margin:20px auto 0;font-family:var(--serif);font-size:clamp(17px,2.3vw,19px);line-height:1.6;color:var(--ink-soft);}
  .cmeta{margin-top:18px;font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
  .backlink{margin-top:26px;}
  .backlink a{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .creturn{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10vh 8%;}
  .kick{font-family:var(--mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);text-shadow:0 1px 6px rgba(0,0,0,.5);}

  /* ---------------- paper surfaces ---------------- */
  .paper{background:var(--paper);color:var(--pink);min-height:100vh;padding:130px 0 0;}
  .paper .wrap{max-width:680px;margin:0 auto;padding:0 8% 12vh;}
  .paper .sprig{color:var(--accent-d);margin:0 auto;}
  .paper .eyebrow{text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-d);margin:12px 0 18px;}
  .paper h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,60px);line-height:1.04;text-align:center;color:var(--pink);letter-spacing:-.01em;}
  .paper h1 .amp{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent-d);}
  .paper .lede{font-family:var(--serif);font-size:clamp(18px,2.8vw,23px);line-height:1.55;text-align:center;color:var(--psoft);margin:24px auto 0;max-width:34ch;}
  .paper h2{font-family:var(--display);font-weight:800;font-size:clamp(23px,3.4vw,31px);color:var(--pink);margin:8vh 0 4px;letter-spacing:-.01em;}
  .paper h2 .no{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--accent-d);margin-bottom:8px;text-transform:uppercase;}
  .paper p{font-family:var(--serif);font-size:clamp(17px,2.3vw,19px);line-height:1.72;color:var(--pink);margin-top:16px;}
  .paper .rule{height:1px;background:repeating-linear-gradient(90deg,var(--pline) 0 7px,transparent 7px 14px);margin:7vh 0;}
  .paper .sig{text-align:center;font-family:var(--display);font-weight:800;font-size:20px;color:var(--pink);margin-top:6vh;}
  .paper .sig small{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--pfaint);margin-top:8px;}
  .cal{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--pline);}
  .cal li{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:15px 2px;border-bottom:1px solid var(--pline);}
  .cal li.first{background:color-mix(in srgb,var(--accent-d) 6%,transparent);}
  .cal .cs{font-family:var(--display);font-weight:800;font-size:clamp(17px,2.6vw,21px);color:var(--pink);letter-spacing:-.01em;flex:1;min-width:150px;}
  .cal .cd{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--psoft);}
  .cal .cn2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);border:1px solid color-mix(in srgb,var(--accent-d) 40%,transparent);border-radius:var(--r-sm);padding:3px 8px;}
  .paper .fine{font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--pfaint);margin-top:16px;}

  /* ---- contribute flow ---- */
  .steps{display:flex;justify-content:center;gap:0;margin:6vh auto 0;max-width:520px;}
  .step{flex:1;text-align:center;position:relative;}
  .step .dot{width:28px;height:28px;border-radius:50%;margin:0 auto 8px;border:1.5px solid var(--pline);display:flex;align-items:center;justify-content:center;background:var(--paper);position:relative;z-index:2;color:var(--pfaint);font-family:var(--mono);font-size:13px;}
  .step .dot svg{width:14px;height:14px;}
  .step.done .dot,.step.active .dot{border-color:var(--accent-d);color:var(--accent-d);}
  .step.active .dot{background:var(--accent-d);color:var(--paper);}
  .step .sl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pfaint);}
  .step.active .sl{color:var(--accent-d);}
  .step:not(:last-child)::after{content:"";position:absolute;top:14px;left:60%;right:-40%;height:1.5px;background:var(--pline);z-index:1;}
  .step.done:not(:last-child)::after{background:var(--accent-d);}
  .paper .field{margin-top:22px;}
  .paper label{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--psoft);margin-bottom:8px;}
  .paper input,.paper textarea{width:100%;font-family:var(--serif);font-size:17px;color:var(--pink);background:#fffdf7;border:1px solid var(--pline);border-radius:var(--r-sm);padding:13px 15px;line-height:1.6;transition:border-color .2s;}
  .paper textarea{min-height:180px;resize:vertical;}
  .paper input:focus,.paper textarea:focus{outline:none;border-color:var(--accent-d);}
  .paper .hint{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--pfaint);margin-top:8px;}
  .seedpick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px;}
  @media(max-width:560px){.seedpick{grid-template-columns:repeat(2,1fr);}}
  .sp{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;}
  .sp img{width:100%;height:100%;object-fit:cover;}
  .sp::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05));}
  .sp .spq{position:absolute;left:9px;right:9px;bottom:8px;z-index:2;font-family:var(--display);font-weight:800;font-size:12px;color:#fff;line-height:1.12;text-shadow:0 1px 6px rgba(0,0,0,.7);}
  .sp.sel{border-color:var(--accent-d);}
  .sp.sel::before{content:"✓";position:absolute;top:6px;right:7px;z-index:3;color:#fff;font-size:12px;background:var(--accent-d);width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .chosen{display:flex;gap:16px;align-items:center;background:#fffdf7;border:1px solid var(--pline);border-radius:var(--r-md);padding:14px;margin-top:8px;}
  .chosen img{width:70px;height:70px;object-fit:cover;border-radius:var(--r-sm);flex:none;}
  .chosen .cq{font-family:var(--display);font-weight:800;font-size:19px;color:var(--pink);letter-spacing:-.01em;}
  .consent{padding:14px 16px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--accent-d) 30%,var(--pline));background:color-mix(in srgb,var(--accent-d) 7%,transparent);margin-top:22px;display:flex;gap:12px;align-items:flex-start;font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--psoft);}
  .consent input{width:auto;margin-top:4px;flex:none;accent-color:var(--accent-d);}
  .btnrow{display:flex;justify-content:space-between;gap:14px;margin-top:5vh;}
  .btn{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--mono);font-size:16px;letter-spacing:.04em;padding:13px 24px;border-radius:var(--r-sm);border:1px solid;transition:transform .3s var(--exhale),background .3s;}
  .btn.solid{color:var(--pink);background:color-mix(in srgb,var(--accent-d) 16%,transparent);border-color:color-mix(in srgb,var(--accent-d) 48%,transparent);}
  .btn.solid:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--accent-d) 24%,transparent);}
  .btn.ghost{color:var(--psoft);border-color:transparent;}
  .btn.ghost:hover{color:var(--pink);}
  .btn:disabled{opacity:.4;cursor:default;transform:none;}
  body.reduced .btn{transition:none;}
  .preview-panel{background:#fffdf7;border:1px solid var(--pline);border-radius:var(--r-md);padding:26px 30px;margin-top:8px;box-shadow:0 20px 50px -30px rgba(0,0,0,.2);}
  .preview-panel .by{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);margin-bottom:12px;}
  .preview-panel .pq{font-family:var(--display);font-weight:800;font-size:17px;color:var(--pink);margin-bottom:12px;letter-spacing:-.01em;}
  .done-wrap{text-align:center;padding:16vh 8%;max-width:600px;margin:0 auto;}
  .done-wrap .sprig{width:46px;height:46px;margin:0 auto 24px;}
  .done-wrap h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,50px);color:var(--pink);letter-spacing:-.01em;}
  .done-wrap p{font-family:var(--serif);font-size:18px;line-height:1.7;color:var(--psoft);margin-top:18px;}
  .protonote{font-family:var(--mono);font-size:13px;color:var(--pfaint);margin-top:5vh;line-height:1.6;}

  /* ---------------- portraits: photo, or a monogram when a contributor has none ---------------- */
  .mono{position:absolute;inset:0;z-index:1;display:grid;grid-auto-flow:column;align-items:baseline;place-content:center;color:var(--ink);text-shadow:0 2px 18px rgba(0,0,0,.45);background:linear-gradient(158deg,color-mix(in srgb,var(--qc,#33465c) 32%,#0e1119),#0a0c14);}
  .mono .m1{font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.04em;font-size:1em;}
  .mono .m2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:.56em;color:var(--accent);margin-left:.04em;}
  .cthumb .mono{font-size:52px;}
  .rportrait .mono{font-size:30px;}
  .pimg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;z-index:1;}
  .cthumb,.rportrait{position:relative;}
  .cthumb{background:linear-gradient(165deg,rgba(246,240,226,.12),rgba(246,240,226,.03));}
  .gtag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r-sm);padding:3px 9px;}

  /* ---------------- tend: a watering can + a place for notes ---------------- */
  .tend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid rgba(246,240,226,.12);font-family:var(--mono);}
  .tend .can,.tend .note-add{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);border:1px solid rgba(246,240,226,.22);border-radius:var(--r-sm);padding:8px 13px;transition:color .22s,border-color .22s,background .22s;}
  .tend .can{font-size:16px;position:relative;}
  .tend .can svg,.tend .note-add svg{width:16px;height:16px;transition:transform .34s var(--exhale);}
  .tend .can:hover,.tend .note-add:hover{color:var(--ink);border-color:rgba(246,240,226,.5);}
  .tend .can.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
  .tend .can.on svg{transform:rotate(-20deg) translateY(-1px);}
  .tend .drip{position:absolute;left:21px;top:24px;width:6px;height:9px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:var(--accent);opacity:0;pointer-events:none;animation:tend-drip .9s var(--exhale) .15s 1 both;}
  @keyframes tend-drip{0%{opacity:0;transform:translateY(-4px)}20%{opacity:.9}100%{opacity:0;transform:translateY(22px)}}
  body.reduced .tend .can svg{transition:none;}
  body.reduced .tend .drip{display:none;animation:none;}
  .tend .drops{font-variant-numeric:tabular-nums;}
  .tend .thirsty{font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
  .noteform{display:none;align-items:center;gap:10px;flex-basis:100%;margin-top:6px;}
  .noteform.open{display:flex;}
  .noteform input{all:unset;flex:1;min-width:0;font-family:var(--serif);font-size:15px;color:var(--ink);border-bottom:1px solid rgba(246,240,226,.32);padding:6px 2px;}
  .noteform input::placeholder{color:var(--ink-faint);}
  .noteform button{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent);padding:6px 6px;}
  .postits{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px;}
  .postits:empty{margin-top:0;}
  .postit{font-family:var(--serif);font-size:14.5px;line-height:1.42;color:#2a2718;background:#f6edc9;border-radius:2px;padding:11px 13px;max-width:230px;box-shadow:0 12px 26px -16px rgba(0,0,0,.7);transform:rotate(-1.1deg);}
  .postit:nth-child(even){transform:rotate(1.3deg);background:#eaf0cf;}
  .postit:nth-child(3n){transform:rotate(.5deg);background:#f3dfe0;}
  .rtend{max-width:640px;margin:5vh auto 0;}

  /* ---- audio player (Tinted Lens design, themed for the reading room) ---- */
  .audio{display:flex;align-items:center;gap:14px;margin:0 auto 2.6em;max-width:min(100%,560px);
    background:linear-gradient(135deg,rgba(246,240,226,.12),rgba(246,240,226,.04));
    border:1px solid rgba(246,240,226,.2);border-radius:var(--r-md);padding:14px 18px;
    backdrop-filter:blur(18px) saturate(118%);-webkit-backdrop-filter:blur(18px) saturate(118%);box-shadow:0 30px 70px -42px rgba(0,0,0,.8);}
  .audio button.play{all:unset;cursor:pointer;flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0b0d16;background:var(--accent);transition:transform .25s var(--exhale);}
  .audio button.play:hover{transform:scale(1.06);}
  body.reduced .audio button.play{transition:none;}
  .audio button.play svg{width:18px;height:18px;}
  .audio button.skip{all:unset;cursor:pointer;position:relative;flex:none;width:33px;height:33px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);border:1px solid rgba(246,240,226,.3);transition:color .25s,border-color .25s;}
  .audio button.skip:hover{color:var(--accent);border-color:var(--accent);}
  .audio button.skip svg{width:15px;height:15px;}
  .audio button.skip .flash{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:13px;color:var(--accent);opacity:0;pointer-events:none;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6);}
  .audio button.skip .flash.anim{animation:audio-skip-flash 900ms var(--exhale);}
  @keyframes audio-skip-flash{0%{opacity:0;transform:translate(-50%,4px)}20%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
  body.reduced .audio button.skip .flash.anim{animation:none;}
  .audio .meta{flex:1;min-width:0;font-family:var(--mono);}
  .audio .meta .t1{font-size:14px;letter-spacing:.03em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .audio .meta .t2{font-size:13px;letter-spacing:.03em;color:var(--ink-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .audio .meta .track{position:relative;height:5px;border-radius:3px;margin-top:9px;background:rgba(246,240,226,.18);cursor:pointer;}
  .audio .meta .track i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);font-style:normal;}
  .audio .time{flex:none;font-family:var(--mono);font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
  @media(max-width:480px){.audio{gap:10px;padding:12px 14px;}.audio .time{display:none;}}

  /* ---------------- footer ---------------- */
  .foot{padding:6vh 8% 7vh;}
  html[data-surface="dark"] .foot{background:rgba(9,11,18,.92);}
  html[data-surface="paper"] .foot{background:var(--paper2);}
  .foot .fwrap{max-width:1120px;margin:0 auto;}
  .foot .fline{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:0 0 22px;}
  .foot .fbottom{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:13px;}
  html[data-surface="dark"] .foot .fbottom{color:var(--ink-faint);}html[data-surface="paper"] .foot .fbottom{color:var(--pfaint);}
  .foot .rhythm{letter-spacing:.24em;text-transform:uppercase;color:var(--accent);}
  html[data-surface="paper"] .foot .rhythm{color:var(--accent-d);}
  .motion-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;transition:color .25s;}
  .motion-toggle .mt-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);transition:background .25s;}
  .motion-toggle[aria-pressed="true"] .mt-dot{background:currentColor;}
  .foot .note{margin-top:18px;font-family:var(--mono);font-size:13px;line-height:1.6;max-width:60ch;}
  html[data-surface="dark"] .foot .note{color:var(--ink-faint);}html[data-surface="paper"] .foot .note{color:var(--pfaint);}

/* ---------------- multi-page layer ----------------
   The prototype navigated with buttons and divs; the build uses real links. These rules keep links and
   buttons looking exactly like the elements they replaced. Low specificity on purpose (:where). */
:where(a.tile,a.ccard){display:block;color:inherit;text-decoration:none;}
:where(a.icon-btn,button.icon-btn){color:inherit;text-decoration:none;}
:where(button.icon-btn){appearance:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;}
.breadcrumb a{color:inherit;text-decoration:none;}
:where(a.btn){text-decoration:none;}
:where(a.brand){color:inherit;text-decoration:none;}

/* ---- full-bleed hero: the nav floats over the image, then settles into glass once the hero scrolls away (Zaheer, 4 Oct) ----
   Only on pages whose first section is a full-viewport hero (html.has-hero, set by the build). Without JS the nav stays glass. */
html.has-hero .nav{position:fixed;top:0;left:0;right:0;transition:background .5s,border-color .5s,backdrop-filter .5s,-webkit-backdrop-filter .5s;}
html.has-hero .hero{padding-top:110px;}
@media(max-width:640px){html.has-hero .hero{padding-top:186px;padding-bottom:40px;}html.has-hero .hero .srail{padding-top:0;gap:0 16px;}html.has-hero .hero .explore{position:static;margin-top:28px;}html.has-hero .rhero-full{padding-top:190px;}html.has-hero .breadcrumb,html.has-hero .rhero-full .rback{top:158px;}}
html.has-hero .nav.at-top{background:transparent;border-bottom-color:transparent;backdrop-filter:blur(0px) saturate(1);-webkit-backdrop-filter:blur(0px) saturate(1);}
html.has-hero body.reduced .nav{transition:none;}