/* tokens.css - tokens.
   Custom properties the system adds to site.css :root, and the one token override site.css cannot carry. The prototype's own tokens stay in site.css :root;
    docs/design-system/tokens.json documents both.
   Part of the design system (docs/design-system/). */

:root{
  /* the keyboard focus ring: colour follows the surface (the accent over a photograph, its darker twin on paper); size and offset are fixed */
  --ring:var(--accent);--ring-w:2px;--ring-offset:3px;
}
html[data-surface="paper"]{--ring:var(--accent-d);}
/* the contributors' issue (issue-00) has no turning: a neutral stone accent */
html[data-turning="seasonless"]{--accent:#b8b2a2;--accent-d:#6d6759;}

/* 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);
    /* the four turnings' accents, one source: the html[data-turning] rules below and pages.css (/about shows all four at once) */
    --accent-december-solstice:#9fb6d2;--accent-d-december-solstice:#4f6b8c;
    --tended:var(--accent-december-solstice);--tended-d:var(--accent-d-december-solstice);
    --accent-march-equinox:#7fb06a;--accent-d-march-equinox:#4c7340;
    --accent-june-solstice:#e3b64f;--accent-d-june-solstice:#a9781f;
    --accent-september-equinox:#d68a48;--accent-d-september-equinox:#a3592a;
  }
  /* seasonal accents — dark (over photo) + paper (on warm ground) */
  html[data-turning="march-equinox"]{--accent:var(--accent-march-equinox);--accent-d:var(--accent-d-march-equinox);}
  html[data-turning="june-solstice"]{--accent:var(--accent-june-solstice);--accent-d:var(--accent-d-june-solstice);}
  html[data-turning="september-equinox"]{--accent:var(--accent-september-equinox);--accent-d:var(--accent-d-september-equinox);}
  html[data-turning="december-solstice"]{--accent:var(--accent-december-solstice);--accent-d:var(--accent-d-december-solstice);}

  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);}
  /* the tended mark (GARDEN3): filled blue, the same blue in every turning, from the december-solstice pair already in the palette */
  .tend .can.on{color:#0b0d16;border-color:var(--tended);background:var(--tended);}
  .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(--ink);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;}
  html[data-surface="paper"] .tend .can.on{color:#fff;border-color:var(--tended-d);background:var(--tended-d);}
  .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);}

/* base.css - base.
   Element defaults, concatenated after site.css and before every component. Zero specificity (:where) wherever a default must lose to a class,
    so a component never has to fight it. Link behaviour is specified once, here: a link takes the colour of what surrounds it (never browser blue or purple),
    underlined only in the contexts listed below, with the focus ring on keyboard focus.
   Part of the design system (docs/design-system/). */

/* BASE: a link is never browser blue or purple. Zero specificity, so any class rule still wins; every link takes the colour of what surrounds it unless a rule says otherwise. */
:where(a){color:inherit;}
/* Focus: the one ring, for any control that has not reset its own outline. Controls the prototype reset with all:unset carry their own ring in components/focus-ring.css. */
:where(a,button,summary,select,textarea,input,[tabindex]):focus-visible{outline:var(--ring-w) solid var(--ring);outline-offset:var(--ring-offset);}

/* ---------------- 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;}
:where(a.btn){text-decoration:none;}
:where(a.brand){color:inherit;text-decoration:none;}
/* Links in context. Underlined: footer links and the contact link (below); caption links in the garden (components: pages/garden-page.css); reading-room links (components/rich-blocks.css).
   Everything else is a control or a block that opts out of the underline on its own class. */
/* ---- links with no colour of their own (footer terms and contact, the terms page) took the browser's default blue (FOOT1).
   :where() keeps this at zero specificity, so any class that sets its own link colour still wins. ---- */
:where(.foot a,a[data-contact-modal]){color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
:where(.foot a,a[data-contact-modal]):hover{text-decoration-color:currentColor;}
:where(.foot a,a[data-contact-modal]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
html[data-surface="paper"] :where(.foot a,a[data-contact-modal]){text-decoration-color:var(--accent-d);}

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

/* nav.css - component.
   The header over the full-bleed hero (the nav floats over the image, then settles into glass), and the breadcrumb links.
    The nav, brand and links themselves live in site.css (the approved prototype).
   Part of the design system (docs/design-system/). */

.breadcrumb a{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;}
/* ISSUE00-INTRO: a long invocation (over 140 characters, class .long set by render.mjs) is set wide and short instead of a tall 24ch column, and the hero keeps room clear of "enter the issue" below it. */
.invocation.long{max-width:min(62ch,100%);}
.hero:has(.invocation.long){padding-bottom:170px;}
@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;}

/* garden-panel.css - component.
   The garden in the footer: the full-width panel above the footer wrap, the vendored <garden-footer> sized to a scene, the reading-now chip, the caption, and the panel as a link to /garden.
   Part of the design system (docs/design-system/). */

/* ---- the garden in the footer (GARDEN2). The engine's own stylesheet loads lazily with it; these rules only size the
   stage and set the caption, so the footer holds its place before the garden arrives. Caption is 16px or more (rule 8). ---- */
.foot .garden{margin:0 0 26px;}
.foot .garden-cap{margin:14px 0 0;max-width:62ch;font-family:var(--serif);font-size:17px;line-height:1.6;}
.foot .garden-cap span{display:block;opacity:.8;}
html[data-surface="dark"] .foot .garden-cap{color:var(--ink-soft);}html[data-surface="paper"] .foot .garden-cap{color:var(--psoft);}

/* ---- footer garden is a full-width panel (FOOT1): it sits above the footer's wrap, edge to edge; the wrap keeps its own padding ---- */
.foot.has-garden{padding:0 0 7vh;}
.foot.has-garden .fwrap{padding:6vh 8% 0;}
.foot.has-garden .garden{margin:0;}
/* GARDENA: the real footer. The vendored <garden-footer> brings the meadow (its stage), the hem (fixed at the screen's edge) and the stats;
   the site's own footer wrap below is the base. Panel height: mobile gets a tall panel (about half of a 844px phone, 360-480px), desktop
   (900px and up) 66vh between 420px and 680px, so the meadow reads as a scene (475px at 1280x720, 594px at 1440x900) and the caption,
   manifesto and links stay one scroll below. The reserved height holds the place before the engine arrives. */
.foot.has-garden garden-footer{display:block;min-height:clamp(360px,50vh,480px);}
.foot.has-garden .g-footer{margin:0;}
.foot.has-garden .g-footer-stage,.foot.has-garden .garden-stage{width:100%;height:clamp(360px,50vh,480px);border-radius:0;}
@media(min-width:900px){.foot.has-garden garden-footer{min-height:clamp(420px,66vh,680px);}.foot.has-garden .g-footer-stage,.foot.has-garden .garden-stage{height:clamp(420px,66vh,680px);}}
.foot.has-garden .g-footer-ui{justify-content:flex-end;padding:0 20px clamp(20px,5vh,48px);}
.foot.has-garden .g-footer-kicker,.foot.has-garden .g-footer-title:empty,.foot.has-garden .g-footer-lede:empty,.foot.has-garden .g-footer-note:empty{display:none;}
.foot.has-garden .g-footer-kicker{display:none;}
.foot.has-garden .g-footer-stats{margin:0;}
.foot.has-garden .g-footer-stat span{display:block;margin-top:4px;}
.foot.has-garden .g-footer-note{margin:10px 0 0;max-width:36ch;}
.foot.has-garden .garden-cap{box-sizing:border-box;max-width:min(104ch,92%);margin:16px auto 0;padding:0;text-align:center;text-wrap:balance;}
/* GARDENA: the reading-now stat sits on a glass chip (leaf corners, footer only) so it reads over the flowers in every light */
.foot.has-garden .g-footer-stat{padding:10px 22px 12px;border-radius:13px 4px;background:var(--card-bg);border:1px solid var(--card-br);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.foot.has-garden .g-footer-stat b{font-size:clamp(28px,4vw,34px);}
.foot.has-garden .g-footer-stat span{color:var(--ink);}
/* the garden panel is a link to /garden: a real <a> (pill, top right) is the keyboard door and the cue. Creatures keep their own whisper (they stop the click). */
.foot .garden{position:relative;}
.foot .garden-go{position:absolute;z-index:3;top:14px;right:14px;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:13px 4px;background:var(--card-bg,rgba(20,20,18,.55));border:1px solid var(--card-br,rgba(246,240,226,.25));color:var(--ink,#f6f0e2);font-family:var(--mono);font-size:16px;letter-spacing:.04em;text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s;}
.foot .garden-go-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.foot .garden:hover .garden-go,.foot .garden-go:focus-visible{opacity:1;}
.foot .garden-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.foot .garden-go:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.foot.has-garden .garden{cursor:pointer;}
@media(hover:none){.foot .garden-go{opacity:1;}}
body.reduced .foot .garden-go{transition:none;}

/* footer.css - component.
   The footer links area: three short labelled columns between the manifesto and the rule. The footer wrap, rule and fine print live in site.css.
   Part of the design system (docs/design-system/). */

/* ---- FOOT2: the footer links area, and the garden panel as a link ----
   Links area: three short labelled columns between the manifesto and the rule, stacked on mobile. 16px+ (rule 8), natural case; the
   column headings lowercase by CSS like the rest of the footer chrome. */
.foot .foot-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 32px;max-width:900px;margin:0 0 34px;font-family:var(--serif);font-size:17px;line-height:1.5;}
.foot .foot-links:has(.fl-col:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,300px));max-width:none;}
.foot .foot-links ul{list-style:none;margin:0;padding:0;}
.foot .foot-links li{margin:0;}
.foot .foot-links li a{display:inline-block;padding:7px 0;}
.foot .fl-h{margin:0 0 4px;font-family:var(--mono);font-weight:400;font-size:16px;letter-spacing:.08em;text-transform:lowercase;}
.foot .fl-note{display:block;font-size:16px;opacity:.75;}
html[data-surface="dark"] .foot .foot-links{color:var(--ink-soft);}html[data-surface="paper"] .foot .foot-links{color:var(--psoft);}
html[data-surface="dark"] .foot .fl-h{color:var(--ink-faint);}html[data-surface="paper"] .foot .fl-h{color:var(--pfaint);}
@media(max-width:640px){.foot .foot-links,.foot .foot-links:has(.fl-col:nth-child(2):last-child){grid-template-columns:1fr;gap:18px;max-width:none;}}

/* forms.css - component.
   Form fields use Nexa, the site's display face, in every form (sign-up, contact modal, paper). The form layout lives in site.css and components/contact-modal.css.
   Part of the design system (docs/design-system/). */

/* form fields use Nexa, the site's display face, in every form (sign-up, contact modal, paper) */
.paper input,.paper textarea,.noteform input{font-family:var(--display);}

/* rich-blocks.css - component.
   The reading room's rich-piece blocks (TMPL3, CALLOUT1, CSP1, ISSUE00B): poem, practice box, plate, carousel, embed and its click-to-load facade, block quote, numbered list (nlist), credits and the section heading.
    All text 16px or more; no motion.
   Part of the design system (docs/design-system/). */

/* ---- rich pieces (TMPL3): poems, plates, art, extra audio, video embeds in the reading room. All text 16px or more; no motion. ---- */
.rcol.poem p{max-width:34em;margin-left:auto;margin-right:auto;text-align:left;hyphens:none;text-wrap:balance;line-height:1.7;}
.rcol.poem p:first-of-type::first-letter{float:none;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;padding:0;color:inherit;text-shadow:inherit;}
.rcol.poem p+p{margin-top:2.2em;}
.rcol.poem .pull{max-width:24ch;}
.rcol .rmedia{margin:2em 0;}
/* CALLOUT1 practice box: moved to block-styles.css (BLOCKS3, Dia's glass callout in three sizes) */
.rcol .plate{margin:2.2em 0;}
.rcol .plate-img{all:unset;display:block;cursor:default;width:100%;}
.rcol .plate img,.rcol .carousel-slide img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:var(--r-md,10px);}
.rcol .plate figcaption,.rcol .carousel-caption,.rcol .caption{font-family:var(--mono);font-size:16px;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft);text-align:left;margin:10px 0 0;text-shadow:0 1px 5px rgba(0,0,0,.5);}
.rcol .carousel{max-width:none;margin:2.2em 0;}
.rcol .car-btn:focus-visible,.rcol .carousel-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.rcol .carousel-count{font-size:16px;}
.rcol .embed{position:relative;width:100%;aspect-ratio:16/9;margin:2.2em 0 0;background:#000;border-radius:var(--r-md,10px);overflow:hidden;}
.rcol .embed iframe,.rcol .embed video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.rcol .embed.podcast{aspect-ratio:auto;height:232px;}
.rcol .embed + .caption{margin-top:10px;}
.rcol p.caption{font-size:16px;line-height:1.5;margin-top:10px;}
.rcol blockquote:not(.pull){font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.5vw,21px);line-height:1.7;margin:2em 0;padding-left:1.1em;}
.rcol .carousel-dot{color:var(--ink);}
.rcol p,.rcol figcaption,.rcol .caption{overflow-wrap:anywhere;}
/* click-to-load video facade (CSP1): a dark panel, a play mark, the title in 16px type; the real iframe replaces it on press */
.rcol .embed--facade{background:radial-gradient(120% 120% at 30% 20%,#1d2238,#07080f);}
.rcol .embed__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;text-align:center;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:16px;line-height:1.5;}
.rcol .embed__tri{width:64px;height:64px;border-radius:50%;border:1px solid rgba(246,240,226,.45);background:rgba(246,240,226,.08);position:relative;}
.rcol .embed__tri::after{content:"";position:absolute;left:26px;top:19px;border-left:20px solid var(--ink);border-top:13px solid transparent;border-bottom:13px solid transparent;}
.rcol .embed__play:hover .embed__tri,.rcol .embed__play:focus-visible .embed__tri{background:var(--accent);border-color:var(--accent);}
.rcol .embed__play:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;}
/* ---- section headings inside a long piece (STUDIO0 QA): the guides are the first pieces with heading_2, and the prototype styled none, so a heading sat flush under the paragraph above it ---- */
.rcol h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,26px);line-height:1.3;color:var(--ink);margin:2.4em 0 0;text-shadow:0 1px 16px rgba(0,0,0,.6);}
.rcol h2 + p{margin-top:.9em;}
/* ---- ISSUE00B: video fallback link, numbered lists, quote credits ---- */
.rcol p.embed-link a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.rcol p.embed-link a:hover{text-decoration-thickness:2px;}
.rcol p.embed-link a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
html[data-surface="paper"] .rcol p.embed-link a{color:var(--accent-d);}
html[data-surface="paper"] .rcol p.embed-link a:focus-visible{outline-color:var(--accent-d);}
.rcol ol.nlist{list-style:none;counter-reset:nl;margin:2em 0;padding:0;}
.rcol ol.nlist>li{counter-increment:nl;position:relative;padding:1.1em 0 1.1em 3.1em;border-top:1px solid var(--ink-faint);font-size:17px;line-height:1.7;}
.rcol ol.nlist>li:last-child{border-bottom:1px solid var(--ink-faint);}
.rcol ol.nlist>li::before{content:counter(nl);position:absolute;left:0;top:.62em;width:1.6em;font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,34px);line-height:1;color:var(--accent);}
.rcol ol.nlist>li p{margin:0;font-size:inherit;}
.rcol ol.nlist>li p::first-letter{all:unset;}
html[data-surface="paper"] .rcol ol.nlist>li{border-color:var(--pfaint);}
html[data-surface="paper"] .rcol ol.nlist>li::before{color:var(--accent-d);}
.rcol blockquote cite.credit,.rbody blockquote cite.credit{display:block;margin-top:.9em;font-family:var(--mono);font-style:normal;font-size:16px;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft);text-shadow:none;}
html[data-surface="paper"] .rcol blockquote cite.credit{color:var(--psoft);}
.rcol p.credit,.rcol p.credit:first-of-type{margin-top:1.2em;font-family:var(--mono);font-style:normal;font-size:16px;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft);text-shadow:none;}
html[data-surface="paper"] .rcol p.credit{color:var(--psoft);}

/* block-styles.css - component (BLOCKS3, from Dia's BLOCKS-DIA1/DIA2 blocks.css). Task A: the seven Notion blocks that had no styling, as one family with the reading room's practice box,
   pull quote, numbered list and plate. Targets the markup the sync already emits (docs/BLOCK-MAPPING.md); no new markup.
   Loads after rich-blocks.css. Every rule is scoped under .rcol; the only new names are
   custom properties (--bk-*). All type 16px or more, reading text 17-21px. No script. Motion: two hover/open transitions,
   both stopped under body.reduced. Surfaces: dark (every reading room today) and paper (ready for when one exists). */

/* ---------------- one set of surface values for every block below ---------------- */
.rcol{
  --bk-ink:var(--ink);--bk-soft:var(--ink-soft);--bk-faint:var(--ink-faint);--bk-acc:var(--accent);
  --bk-line:rgba(246,240,226,.22);--bk-lift:0 1px 16px rgba(0,0,0,.6);
  /* the practice box's glass, and an opaque twin for the two blocks that scroll (scroll shadows need a solid ground) */
  --bk-glass:rgba(10,12,14,.5);--bk-solid:#0e1116;--bk-shade:rgba(0,0,0,.55);
  --bk-read:clamp(18px,2.5vw,21px);
}
html[data-surface="paper"] .rcol{
  --bk-ink:var(--pink);--bk-soft:var(--psoft);--bk-faint:var(--pfaint);--bk-acc:var(--accent-d);
  --bk-line:var(--pline);--bk-lift:none;
  --bk-glass:rgba(255,255,255,.55);--bk-solid:#fbf9f4;--bk-shade:rgba(38,36,31,.2);
}
/* no drop cap inside a block: a first paragraph in a toggle, list or cell is not the first paragraph of the piece */
.rcol :is(.list,.checklist,.tg,.tbl) p::first-letter{all:unset;}
.rcol :is(.list,.checklist,.tbl) p{margin:0;font-size:inherit;line-height:inherit;text-shadow:inherit;}

/* ---------------- bulleted list: a small leaf for each point, no rules (rules belong to the numbered steps) ---------------- */
.rcol ul.list{list-style:none;margin:1.4em 0 0;padding:0;}
.rcol ul.list > li{position:relative;padding-left:1.7em;font-family:var(--serif);font-size:var(--bk-read);line-height:1.75;color:var(--bk-ink);text-shadow:var(--bk-lift);}
.rcol ul.list > li + li{margin-top:.55em;}
.rcol ul.list > li::before{content:"";position:absolute;left:.3em;top:calc(.875em - 4px);width:8px;height:8px;
  border-radius:0 70%;background:var(--bk-acc);transform:rotate(-45deg);}
.rcol ul.list + p{margin-top:1.4em;}

/* ---------------- to-do checklist: a soft square, filled with the accent when ticked. Ticked items quieten; nothing is struck out ---------------- */
.rcol ul.checklist{list-style:none;margin:1.4em 0 0;padding:0;}
.rcol ul.checklist > li{position:relative;padding:.35em 0 .35em 2.1em;font-family:var(--serif);font-size:var(--bk-read);line-height:1.75;color:var(--bk-ink);text-shadow:var(--bk-lift);}
.rcol ul.checklist > li::before{content:"";position:absolute;left:0;top:calc(.35em + .875em - 11px);width:22px;height:22px;box-sizing:border-box;
  border:1.5px solid var(--bk-acc);border-radius:6px;background:transparent;}
/* ticked: the sync emits <li class="done"> (ticked) or <li class="todo"> */
.rcol ul.checklist > li.done{color:var(--bk-soft);}
.rcol ul.checklist > li.done::before{background:var(--bk-acc);}
.rcol ul.checklist > li.done::after{content:"";position:absolute;left:7.5px;top:calc(.35em + .875em - 6.5px);
  width:5px;height:10px;border-right:2px solid var(--bk-solid);border-bottom:2px solid var(--bk-solid);transform:rotate(45deg);}
.rcol ul.checklist + p{margin-top:1.4em;}

/* ---------------- code: the practice box's panel in mono. Long lines scroll inside the panel, never the page ---------------- */
.rcol pre.code{position:relative;margin:2em 0 0;padding:20px 22px;border-radius:var(--r-md);border:1px solid var(--bk-line);
  font-family:var(--mono);font-size:16px;line-height:1.7;color:var(--bk-ink);text-shadow:none;white-space:pre;tab-size:4;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--bk-faint) transparent;
  /* scroll shadows (no script): a soft edge appears on whichever side has more to read */
  background:
    linear-gradient(to right,var(--bk-solid) 40%,transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left,var(--bk-solid) 40%,transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--bk-shade),transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--bk-shade),transparent) right center / 14px 100% no-repeat scroll,
    var(--bk-solid);}
.rcol pre.code code{font:inherit;color:inherit;background:none;padding:0;}
/* the language, only when the author chose one (Notion's default "plain text" says nothing to a reader) */
.rcol pre.code[data-lang]:not([data-lang=""]):not([data-lang="plain text"])::before{content:attr(data-lang);display:block;margin:0 0 10px;
  font-family:var(--mono);font-size:16px;line-height:1.4;color:var(--bk-acc);position:sticky;left:0;}

/* ---------------- table: hairline rows, the header in the accent. Too wide for the column: it scrolls sideways inside itself ---------------- */
.rcol table.tbl{display:block;width:fit-content;max-width:100%;margin:2em 0 0;border-collapse:collapse;border-spacing:0;
  border:1px solid var(--bk-line);border-radius:var(--r-md);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--bk-faint) transparent;
  font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--bk-ink);text-shadow:none;font-variant-numeric:lining-nums tabular-nums;
  background:
    linear-gradient(to right,var(--bk-solid) 40%,transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left,var(--bk-solid) 40%,transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--bk-shade),transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--bk-shade),transparent) right center / 14px 100% no-repeat scroll,
    var(--bk-solid);}
.rcol table.tbl :is(th,td){padding:.72em 1.1em;text-align:left;vertical-align:top;min-width:6.5em;max-width:22em;overflow-wrap:break-word;border-bottom:1px solid var(--bk-line);}
.rcol table.tbl tr:last-child > :is(th,td){border-bottom:0;}
/* the header row (Notion's "header row" switch); the sync emits no header column */
.rcol table.tbl tr:first-child > th{font-weight:600;color:var(--bk-acc);border-bottom:1.5px solid color-mix(in srgb,var(--bk-acc) 55%,transparent);white-space:nowrap;}

/* ---------------- toggle and toggle heading: a quiet fold. Always arrives open; a reader may close it ---------------- */
.rcol details.toggle{margin:2em 0 0;border-top:1px solid var(--bk-line);border-bottom:1px solid var(--bk-line);}
.rcol details.toggle + details.toggle{margin-top:0;border-top:0;}   /* a run of toggles reads as one list of questions */
.rcol details.toggle > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:18px 0;
  font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,22px);line-height:1.4;color:var(--bk-ink);text-shadow:var(--bk-lift);}
.rcol details.toggle > summary::-webkit-details-marker{display:none;}
.rcol details.toggle > summary::before{content:"";flex:none;width:9px;height:9px;margin:0 3px;border-right:2px solid var(--bk-acc);border-bottom:2px solid var(--bk-acc);
  transform:translateY(-3px) rotate(-45deg);transition:transform .3s var(--exhale);}
.rcol details.toggle[open] > summary::before{transform:translateY(-6px) rotate(45deg);}
.rcol details.toggle > summary:hover{color:var(--bk-acc);}
.rcol details.toggle > summary:focus-visible{outline:2px solid var(--ring,var(--bk-acc));outline-offset:4px;border-radius:2px;}
/* a toggle heading: the sync emits <details class="toggle toggle-h"><summary><span class="h1|h2|h3 a-h">; heading 1 and 2 size up, 3 stays */
.rcol details.toggle-h > summary:has(> :is(.h1,.h2)){font-size:clamp(22px,3vw,26px);line-height:1.3;}
/* what is inside lines up with the summary's text, under a hairline that shows what belongs to the fold */
.rcol details.toggle > .tg{margin:0 0 22px 7px;padding:2px 0 2px 22px;border-left:1px solid var(--bk-line);}
.rcol details.toggle > .tg > :first-child{margin-top:0;}
.rcol details.toggle > .tg > p{margin-top:1.1em;}
.rcol details.toggle > .tg > :is(.practice,.plate,.carousel,.embed,.vp,pre.code,table.tbl,blockquote){margin-top:1.4em;margin-bottom:0;}
.rcol details.toggle > .tg > .pull{margin:1.2em auto .4em;}
body.reduced .rcol details.toggle > summary::before{transition:none;}

/* ---------------- divider ("movement"): a pause between parts, the size of a breath. Any SVG the sync draws is held to 22px high ---------------- */
.rcol .movement{display:flex;align-items:center;justify-content:center;gap:18px;max-width:280px;margin:3.2em auto 0;color:var(--bk-acc);}
.rcol .movement::before,.rcol .movement::after{content:"";flex:1;height:1px;opacity:.6;}
.rcol .movement::before{background:linear-gradient(to right,transparent,currentColor);}
.rcol .movement::after{background:linear-gradient(to left,transparent,currentColor);}
.rcol .movement svg{flex:none;display:block;width:auto;height:22px;max-width:64px;overflow:visible;}
.rcol .movement + :is(p,h2,ul,ol,details,figure,aside){margin-top:2.2em;}
.rcol .movement + p::first-letter{all:unset;}

/* ---------------- bookmark ("ramp"): a link to somewhere else, as a strip of glass with the address in mono ---------------- */
.rcol a.ramp{display:block;margin:2em 0 0;padding:16px 20px 16px 52px;position:relative;border:1px solid var(--bk-line);border-radius:var(--r-md);
  background:var(--bk-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:16px;line-height:1.55;color:var(--bk-soft);text-decoration:none;text-shadow:none;overflow-wrap:anywhere;
  transition:border-color .3s,color .3s;}
.rcol a.ramp::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;box-sizing:border-box;
  border:1.5px solid var(--bk-acc);border-radius:50%;}
.rcol a.ramp::after{content:"";position:absolute;left:24px;top:50%;width:5px;height:5px;margin-top:-3.5px;border-top:1.5px solid var(--bk-acc);border-right:1.5px solid var(--bk-acc);transform:rotate(45deg);}
.rcol a.ramp:hover{color:var(--bk-ink);border-color:color-mix(in srgb,var(--bk-acc) 65%,transparent);}
.rcol a.ramp:focus-visible{outline:2px solid var(--ring,var(--bk-acc));outline-offset:3px;}
.rcol p > a.ramp:only-child{margin-top:0;}
body.reduced .rcol a.ramp{transition:none;}

/* ---------------- heading 1 and 3 (Task D): today they fall to browser defaults. h1 reads as the section heading; h3 one step down ---------------- */
.rcol h1{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,26px);line-height:1.3;color:var(--bk-ink);margin:2.4em 0 0;text-shadow:var(--bk-lift);}
.rcol h3{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,21px);line-height:1.4;color:var(--bk-ink);margin:2em 0 0;text-shadow:var(--bk-lift);}
.rcol :is(h1,h3) + p{margin-top:.8em;}

/* ---------------- callout (practice box), BLOCKS-DIA2: glass panels in three sizes, no side band ----------------
   Replaces rich-blocks.css lines 12-23 (delete those when this lands). The card's glass recipe (site.css .glass) with the covers' accent glow
   in the top-left corner; the icon sits in its own small glass disc; the title is Nexa, like a card title. The size comes from what the
   writer put in it, so nobody chooses: a title alone is a small note, a title and a paragraph is a panel, a title and more (two or more
   paragraphs, or a paragraph of three or more lines) is a feature that widens past the column on a wide screen. Markup unchanged. */
.rcol .practice{
  --pr-glow:color-mix(in oklab,var(--accent) 30%,transparent);
  position:relative;isolation:isolate;display:flex;gap:18px;align-items:flex-start;margin:2.4em 0;padding:26px 28px 28px;
  border:1px solid rgba(246,240,226,.18);border-left-width:1px;border-left-color:rgba(246,240,226,.18);border-radius:var(--r-lg);
  background:radial-gradient(120% 150% at 0% 0%,var(--pr-glow),transparent 58%),linear-gradient(135deg,rgba(246,240,226,.11),rgba(246,240,226,.035));
  -webkit-backdrop-filter:blur(24px) saturate(118%);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);}
.rcol .practice__ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:24px;line-height:1;
  background:rgba(246,240,226,.08);border:1px solid rgba(246,240,226,.18);box-shadow:inset 0 1px 0 rgba(246,240,226,.14);}
.rcol .practice__body{min-width:0;flex:1;padding-top:9px;}
.rcol .practice .practice__title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,23px);line-height:1.2;letter-spacing:-.005em;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.4);}
.rcol .practice p,.rcol .practice p:first-of-type{margin:.6em 0 0;font-family:var(--serif);font-size:18px;line-height:1.7;color:var(--ink);text-shadow:none;}
.rcol .practice .practice__title + p{margin-top:.75em;}
.rcol .practice p::first-letter,.rcol .practice p:first-of-type::first-letter{all:unset;}   /* the title is the box's first <p>: no drop cap (it was in the rules this replaces) */
/* small: a title and nothing else. A note that sits in the line of reading, as wide as its words */
.rcol .practice:not(:has(.practice__title + *)){display:inline-flex;align-items:center;gap:14px;width:fit-content;max-width:100%;box-sizing:border-box;padding:12px 24px 12px 12px;margin:2em 0;}
.rcol .practice:not(:has(.practice__title + *)) .practice__ico{width:40px;height:40px;font-size:20px;}
.rcol .practice:not(:has(.practice__title + *)) .practice__body{padding-top:0;}
.rcol .practice:not(:has(.practice__title + *)) .practice__title{font-size:clamp(18px,2.1vw,20px);}
/* large: more than one paragraph after the title, or one paragraph of three or more lines */
.rcol .practice:has(.practice__title + * + *),.rcol .practice:has(.practice__title ~ p br ~ br ~ br){
  --pr-glow:color-mix(in oklab,var(--accent) 38%,transparent);
  flex-direction:column;gap:20px;padding:34px 40px 38px;margin:3em clamp(-96px,calc((640px - 100vw) / 2 + 24px),0px);}
.rcol .practice:has(.practice__title + * + *) .practice__ico,.rcol .practice:has(.practice__title ~ p br ~ br ~ br) .practice__ico{width:60px;height:60px;font-size:30px;}
.rcol .practice:has(.practice__title + * + *) .practice__body,.rcol .practice:has(.practice__title ~ p br ~ br ~ br) .practice__body{padding-top:0;}
.rcol .practice:has(.practice__title + * + *) .practice__title,.rcol .practice:has(.practice__title ~ p br ~ br ~ br) .practice__title{font-size:clamp(24px,3.2vw,31px);line-height:1.12;}
.rcol .practice:has(.practice__title + * + *) p:not(.practice__title),.rcol .practice:has(.practice__title ~ p br ~ br ~ br) p:not(.practice__title){font-size:clamp(18px,2.2vw,20px);line-height:1.75;max-width:58ch;}
/* paper: frosted white with the same glow */
html[data-surface="paper"] .rcol .practice{--pr-glow:color-mix(in oklab,var(--accent-d) 18%,transparent);border-color:var(--pline);
  background:radial-gradient(120% 150% at 0% 0%,var(--pr-glow),transparent 58%),linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  box-shadow:0 30px 60px -42px rgba(38,36,31,.45),inset 0 1px 0 rgba(255,255,255,.9);}
html[data-surface="paper"] .rcol .practice__ico{background:rgba(255,255,255,.7);border-color:var(--pline);box-shadow:none;}
html[data-surface="paper"] .rcol .practice .practice__title{color:var(--pink);text-shadow:none;}
html[data-surface="paper"] .rcol .practice p{color:var(--pink);}
html[data-surface="paper"] .rcol .practice p:first-of-type::first-letter{color:inherit;}
@media(max-width:520px){
  .rcol .practice{padding:20px 18px 22px;gap:14px;}
  .rcol .practice:has(.practice__title + * + *),.rcol .practice:has(.practice__title ~ p br ~ br ~ br){margin-left:0;margin-right:0;padding:26px 22px 28px;}
}
@supports not (color:color-mix(in oklab,red,blue)){.rcol .practice{--pr-glow:rgba(246,240,226,.08);}html[data-surface="paper"] .rcol .practice{--pr-glow:rgba(38,36,31,.04);}}

/* ---------------- inline marks: the sync emits code, strong, em, s and u (no highlight) ---------------- */
.rcol :is(p,li,td,th,summary,figcaption) code{font-family:var(--mono);font-size:max(16px,.86em);padding:.08em .38em;border-radius:var(--r-sm);
  background:rgba(246,240,226,.1);border:1px solid var(--bk-line);text-shadow:none;white-space:break-spaces;}
.rcol s{text-decoration-thickness:1.5px;text-decoration-color:var(--bk-soft);}
.rcol u{text-decoration-thickness:1.5px;text-underline-offset:.18em;text-decoration-color:var(--bk-acc);}
html[data-surface="paper"] .rcol :is(p,li,td,th,summary,figcaption) code{background:rgba(38,36,31,.06);}

/* ---------------- 390 ---------------- */
@media(max-width:520px){
  .rcol pre.code{padding:16px;}
  .rcol table.tbl :is(th,td){padding:.65em .9em;}
  .rcol details.toggle > .tg{padding-left:16px;margin-left:5px;}
  .rcol a.ramp{padding:14px 16px 14px 46px;}
  .rcol a.ramp::before{left:15px;}.rcol a.ramp::after{left:21px;}
}

/* ---------------- paper: the column itself. Not one of the seven, but no reading room has been on paper yet, so the
   column's own text had no paper colour and would read light-on-light. Needed before any block can be judged on paper ---------------- */
html[data-surface="paper"] .rbody-immersive{background:none;}
html[data-surface="paper"] .rcol :is(p,h2){color:var(--pink);text-shadow:none;}
html[data-surface="paper"] .rcol p:first-of-type::first-letter{color:var(--accent-d);text-shadow:none;}
html[data-surface="paper"] .rcol .pull{color:var(--accent-d);text-shadow:none;}
html[data-surface="paper"] .rcol blockquote:not(.pull){color:var(--pink);}
html[data-surface="paper"] .rcol :is(.plate figcaption,.carousel-caption,.caption){color:var(--psoft);text-shadow:none;}
html[data-surface="paper"] .rcol ol.nlist > li{color:var(--pink);}

/* ---------------- print ---------------- */
@media print{
  .rcol pre.code{white-space:pre-wrap;overflow:visible;background:none;}
  .rcol table.tbl{display:table;width:100%;overflow:visible;background:none;}
  .rcol a.ramp{background:none;}
  .rcol :is(pre.code,table.tbl,details.toggle){break-inside:avoid;}
}

/* art-panel.css - component.
   Kind: art, a hanging glass panel (the hardware, the sway, the framed canvas). The sway runs unless body.reduced.
   Part of the design system (docs/design-system/). */

.rcol.art{max-width:min(1100px,100%);}
.rcol.art p{max-width:640px;margin-left:auto;margin-right:auto;}
/* Kind: art, a hanging glass panel (adapted from zaheermerali-build awaken.css .panel, editorial.css .card__hanger): the hardware, the sway,
   the framed canvas. The frame is solid first (legible with no blur); glass is added only where backdrop-filter exists. Sway runs unless body.reduced. */
.rcol .artpanel{position:relative;margin:68px auto 2.4em;width:min(100%,1000px);transform-origin:top center;animation:ap-sway 7.6s ease-in-out infinite;}
@keyframes ap-sway{0%,100%{transform:rotate(-.35deg);}50%{transform:rotate(.35deg);}}
body.reduced .rcol .artpanel{animation:none;}
.rcol .ap-hanger{position:absolute;top:0;left:0;right:0;height:0;z-index:3;pointer-events:none;}
.rcol .ap-cord{position:absolute;top:-52px;left:50%;width:9px;height:9px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 32%,#e6c98c,#8a662e);box-shadow:0 1px 3px rgba(0,0,0,.5);}
.rcol .ap-bracket{position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:44px;height:68px;}
.rcol .ap-bracket svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 8px rgba(0,0,0,.55));}
.rcol .ap-bracket path{fill:#1a1d2e;stroke:rgba(199,185,143,.45);stroke-width:1;}
.rcol .ap-frame{position:relative;padding:14px 14px 4px;border:1px solid rgba(246,240,226,.28);border-radius:var(--r-md);background:#141828;box-shadow:0 34px 70px -34px rgba(0,0,0,.85);}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.rcol .ap-frame{background:rgba(20,24,40,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);}}
.rcol .artpanel .plate-img img{max-height:82vh;width:100%;object-fit:contain;border-radius:var(--r-sm);}
.rcol .ap-label{padding:12px 6px 14px;font-family:var(--mono);font-size:16px;line-height:1.5;letter-spacing:.03em;color:var(--ink);text-align:center;text-shadow:none;}
@media(max-width:600px){.rcol .artpanel{margin-top:56px;}.rcol .ap-frame{padding:10px 10px 2px;}}

/* players.css - component.
   The shared audio player (vendored engine; the look stays this site's): the 16px floor and the docked bar, and the video-player spacing in the reading room.
   Part of the design system (docs/design-system/). */

/* ---- the shared audio player (vendored engine; the look stays this site's): 16px floor, and the docked bar (TMPL3) ---- */
.audio .meta .t1,.audio .meta .t2,.audio .time,.audio button.skip .flash{font-size:16px;}
.audio.docked{z-index:900;box-shadow:0 18px 50px -20px rgba(0,0,0,.7);background:rgba(18,20,30,.94);}
.audio.docked .time{display:block;}
body.reduced .audio.docked{transition:none;}
.rcol .vp{margin:2.2em 0;}
.rcol .vp__cap{text-shadow:0 1px 5px rgba(0,0,0,.5);}

/* focus-ring.css - component.
   Keyboard focus for the controls the prototype resets with all:unset (STUDIO0 QA). base.css carries the ring for everything else; these selectors beat all:unset.
   Part of the design system (docs/design-system/). */

/* ---- keyboard focus (STUDIO0 QA): the prototype resets these controls with all:unset, which also removed the browser's focus ring,
   so a keyboard reader could not see where they were. Ring on :focus-visible only, so mouse and touch look exactly as approved. ---- */
.links a:focus-visible,.srail a:focus-visible,.read-btn:focus-visible,.rback:focus-visible,.rfoot a:focus-visible,.cp-btn:focus-visible,.backlink a:focus-visible,.btn:focus-visible,
.tend .can:focus-visible,.tend .note-add:focus-visible,.noteform input:focus-visible,.noteform button:focus-visible,.audio button.play:focus-visible,.audio button.skip:focus-visible,
.motion-toggle:focus-visible,.rcol .plate-img:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* image-viewer.css - component.
   ZOOM1: the image viewer. Plates link to the full file; zoom.js opens them in a dialog. All text 16px or more; fade only under body.reduced.
   Part of the design system (docs/design-system/). */

/* ---- ZOOM1: image viewer. Plates link to the full file; zoom.js opens them in a dialog. All text 16px or more.
   Motion only under body.reduced (fade is off when reduced), never an OS query. ---- */
.rcol .plate-img[data-zoom]{cursor:zoom-in;}
.zoom-link{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;}
.zoom-link:hover,.zoom-link:focus-visible{color:var(--ink);}
.zoom-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
html.zoom-open{overflow:hidden;}
.zoomer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#080a12;color:var(--ink,#f6f0e2);overflow:hidden;}
.zoomer[open]{display:flex;flex-direction:column;animation:zoom-in .22s ease-out;}
body.reduced .zoomer[open]{animation:none;}
@keyframes zoom-in{from{opacity:0}to{opacity:1}}
.zoomer::backdrop{background:transparent;}
.zoom-stage{flex:1 1 auto;min-height:0;display:flex;overflow:auto;padding:56px 16px 8px;}
.zoom-toggle{all:unset;margin:auto;display:block;cursor:zoom-in;line-height:0;}
.zoom-toggle img{display:block;max-width:calc(100vw - 32px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm,6px);}
.zoom-stage.is-full .zoom-toggle{cursor:zoom-out;}
.zoom-stage.is-full .zoom-toggle img{max-width:none;max-height:none;}
.zoom-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.zoom-close{position:absolute;top:8px;right:8px;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(246,240,226,.4);background:rgba(20,24,40,.8);color:inherit;font-size:28px;line-height:1;cursor:pointer;}
.zoom-foot{flex:0 0 auto;max-height:38dvh;overflow:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px 16px;min-height:64px;}
.zoom-cap{margin:0;font-family:var(--mono);font-size:16px;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft);max-width:60ch;}
.zoom-nav{display:flex;align-items:center;gap:12px;margin-left:auto;font-family:var(--mono);font-size:16px;}
.zoom-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(246,240,226,.4);background:rgba(20,24,40,.8);color:inherit;font-size:28px;line-height:1;cursor:pointer;}
.zoom-close:focus-visible,.zoom-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media(max-width:600px){.zoom-foot{flex-wrap:wrap;}.zoom-cap{flex:1 1 100%;}.zoom-nav{margin:0 auto;}}

/* save-done.css - component.
   GARDEN-C and C2: the Save and Done action (reading-room buttons, the card-corner icon, the seed in flight).
   Part of the design system (docs/design-system/). */

/* ---------------- GARDEN-C: Save and Done (reading-room buttons, the seed in flight) ----------------
   The buttons are .tend .can, so size, focus and the filled state come from the tend rules; only the icon fill differs. */
.tend .can.act[hidden],.tend .act-unsave[hidden]{display:none;}
.tend .can.act .ai{display:inline-flex;}
.tend .can.act .ai-ck{display:none;}
.tend .can.act[data-state="1"] .ai-bm,.tend .can.act[data-state="2"] .ai-bm{display:none;}
.tend .can.act[data-state="1"] .ai-ck,.tend .can.act[data-state="2"] .ai-ck{display:inline-flex;}
.tend .can.act.on svg{transform:none;}
.tend .can.act[data-state="0"] svg path{fill:none;}
.tend .act-unsave{all:unset;cursor:pointer;font-size:16px;letter-spacing:.04em;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;padding:6px 4px;}
.tend .act-unsave:hover{color:var(--ink);}
.tend .act-unsave:focus-visible{outline:2px solid var(--tended,#e8d9a0);outline-offset:2px;border-radius:4px;}
.seedfly{position:fixed;z-index:60;width:9px;height:13px;margin:-6px 0 0 -4px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:var(--tended,#e8d9a0);box-shadow:0 0 10px var(--tended,#e8d9a0);pointer-events:none;}
body.reduced .seedfly{display:none;}
/* GARDEN-C2 addendum: on an index page the button is an icon in the card's top-right corner. 44px hit area; the label shows on hover and focus and is
   always the accessible name; the byline, kind label and title reserve room so nothing sits under it. Not .tend .can, so it carries its own look. */
.act-corner{position:absolute;top:8px;right:8px;z-index:2;}
.act-corner .can.act{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink-soft);border:1px solid rgba(246,240,226,.28);background:rgba(11,13,22,.28);transition:color .2s,background .2s,border-color .2s;}
.act-corner .can.act[hidden]{display:none;}
.act-corner .can.act:hover{color:var(--ink);border-color:rgba(246,240,226,.55);}
.act-corner .can.act:focus-visible{outline:2px solid var(--tended,#e8d9a0);outline-offset:2px;}
.act-corner .can.act svg{width:20px;height:20px;}
.act-corner .can.act.on{color:#0b0d16;border-color:var(--tended);background:var(--tended);}
html[data-surface="paper"] .act-corner .can.act.on{color:#fff;border-color:var(--tended-d);background:var(--tended-d);}
.act-corner .can.act .al{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink);background:rgba(11,13,22,.88);padding:4px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s;}
.act-corner .can.act:hover .al,.act-corner .can.act:focus-visible .al{opacity:1;}
body.reduced .act-corner .can.act,body.reduced .act-corner .can.act .al{transition:none;}
.has-act > .by,.has-act > .ec-eyebrow,.has-act > .ec-title,.has-act > .wk,.has-act > h3{padding-right:52px;}
.cp-piece.has-act{position:relative;}
.act-corner .can.act .ai{display:inline-flex;}
.act-corner .can.act .ai-ck{display:none;}
.act-corner .can.act[data-state="1"] .ai-bm,.act-corner .can.act[data-state="2"] .ai-bm{display:none;}
.act-corner .can.act[data-state="1"] .ai-ck,.act-corner .can.act[data-state="2"] .ai-ck{display:inline-flex;}
.act-corner .can.act[data-state="0"] svg path{fill:none;}
.act-corner .can.act.on svg path{fill:currentColor;fill-opacity:.25;}

/* PIECEID1: the quiet "also here" line under a piece when the same person has other pieces under this seed */
.also-here{max-width:640px;margin:3vh auto 0;font-family:var(--mono);font-size:16px;line-height:1.6;color:inherit;opacity:.85;}
.also-here a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* home-link.css - component.
   HOME1: the mark and wordmark link home, on every apex page except the landing.
   Part of the design system (docs/design-system/). */

/* HOME1: mark + wordmark home link on apex pages other than the landing */
.home-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;}
.home-link .mark{width:24px;height:24px;color:var(--accent);display:inline-flex;}
.home-link .mark svg{width:24px;height:24px;}
.home-link .name{font-family:var(--display);font-weight:800;font-size:18px;text-transform:lowercase;letter-spacing:.01em;}
html[data-surface="dark"] .home-link .name{color:var(--ink);}html[data-surface="paper"] .home-link .name{color:var(--pink);}
.foot a.home-link{text-decoration:none;}
.home-top{position:relative;z-index:5;margin:14px 0 0 max(16px,4%);}
.home-foot{margin-bottom:18px;}
.home-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
html[data-surface="paper"] .home-link .mark{color:var(--pink);}

/* ---- the "What this is" panel (PANEL1). Rises from the footer; the rise is a transition keyed off .open and switched off
   by body.reduced (the footer motion toggle), never an OS query. All text 16px or more. ---- */
.foot .rhythm-wrap{display:inline-flex;align-items:center;gap:6px;}
.foot .rhythm-up{all:unset;cursor:pointer;box-sizing:border-box;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;line-height:1;color:var(--accent);transition:transform .3s var(--exhale);}
html[data-surface="paper"] .foot .rhythm-up{color:var(--accent-d);}
.foot .rhythm-up[aria-expanded="true"]{transform:rotate(180deg);}
.foot .rhythm-up:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* =====================================================================
   "What this is" panel (#manifesto in the footer)
   Replaces the existing .foot .manifesto / .foot .mf-* rules in site.css.
   The rhythm card inside it is styled by rhythm.css.
   Initial hidden states are gated on .mf-enhanced (added by
   manifesto-extras.js), so the noscript fallback still prints the panel plainly.
   Motion follows body.reduced. All text 16px or more.
   ===================================================================== */

.foot .manifesto{--mf-hair:rgba(246,240,226,.16);max-width:740px;margin:0 auto 40px;font-family:var(--serif);color:var(--ink);}
.foot .manifesto:not([hidden]){display:block;}

/* while the panel is up, the footer thins so the photograph reaches the glass */
.foot.mf-on{background:linear-gradient(to bottom,rgba(9,11,18,.12) 0%,rgba(9,11,18,.5) 60%,rgba(9,11,18,.92) 100%);}

/* the glass: the landing panel's recipe, so the two read as one family.
   The rise is on the glass itself, not an ancestor, so backdrop-filter holds mid-transition. */
.foot .mf-inner{position:relative;padding:52px 60px 44px 92px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(11,13,22,.5),rgba(11,13,22,.34));
  border:1px solid rgba(246,240,226,.18);
  backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);
  box-shadow:0 46px 100px -44px rgba(0,0,0,.8),inset 0 1px 0 rgba(246,240,226,.16);}
.foot .manifesto.mf-enhanced .mf-inner{opacity:0;transform:translateY(28px);filter:blur(7px);
  transition:opacity .5s var(--exhale),transform .5s var(--exhale),filter .5s var(--exhale);}
.foot .manifesto.mf-enhanced.open .mf-inner{opacity:1;transform:none;filter:none;}

.foot .mf-close{all:unset;cursor:pointer;position:absolute;top:22px;right:26px;min-height:44px;padding:0 4px;
  font-family:var(--mono);font-size:16px;letter-spacing:.06em;color:var(--ink-soft);
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.foot .mf-close:hover{color:var(--ink);}
.foot .mf-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.foot .manifesto .mf-head{margin:0 0 30px;}
/* set like the landing's "Hear when it opens", a size up because it titles the panel */
.foot .manifesto h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,36px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);outline:none;}

/* sections, with the paper pages' dashed rule between them */
.foot .manifesto .mf-sec{position:relative;padding:30px 0 26px;
  background:repeating-linear-gradient(90deg,var(--mf-hair) 0 7px,transparent 7px 14px) top left/100% 1px no-repeat;}
.foot .manifesto .mf-sec > h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,25px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;}
.foot .manifesto .mf-sec > p{font-size:clamp(18px,2.2vw,19px);line-height:1.72;color:var(--ink-soft);margin:0 0 .8em;max-width:58ch;text-wrap:pretty;}
.foot .manifesto .mf-sec > p:last-child{margin-bottom:0;}

/* the rhythm card sits in the panel as a lighter inset leaf */
.foot .manifesto .rhythm-card{margin:14px -32px 18px -28px;}
.foot .manifesto .rhythm-card + .mf-sec{background:none;}

/* ---------- the stem: a seed by the title, a leaf at every heading ---------- */
.mf-stem{position:absolute;left:46px;top:70px;bottom:58px;width:1px;pointer-events:none;color:var(--accent);}
.mf-stem .line{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--grow,1));
  background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 70%,transparent),color-mix(in srgb,var(--accent) 22%,transparent));}
.mf-stem .seed{position:absolute;left:-6px;top:-20px;width:13px;height:17px;}
.mf-stem .root{position:absolute;left:-10px;bottom:-22px;width:21px;height:22px;opacity:.55;}
.mf-stem .leaf{position:absolute;width:20px;height:20px;transition:transform .7s var(--exhale),opacity .5s var(--exhale);}
.mf-stem .leaf.r{left:0;transform-origin:0 100%;}
.mf-stem .leaf.l{left:-20px;transform-origin:100% 100%;}
.mf-enhanced .mf-stem .leaf:not(.open){opacity:0;transform:scale(.25);}

/* opening: sections settle in one after another */
.foot .manifesto.mf-enhanced .mf-head,.foot .manifesto.mf-enhanced .mf-sec,.foot .manifesto.mf-enhanced .rhythm-card{
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--exhale),transform .7s var(--exhale);transition-delay:calc(var(--i,0) * 70ms + 120ms);}
.foot .manifesto.mf-enhanced.open .mf-head,.foot .manifesto.mf-enhanced.open .mf-sec,.foot .manifesto.mf-enhanced.open .rhythm-card{opacity:1;transform:none;}

/* motion off */
body.reduced .foot,body.reduced .foot .manifesto,body.reduced .foot .manifesto *,body.reduced .foot .rhythm-up{transition:none!important;}
body.reduced .foot .mf-inner{filter:none!important;}
body.reduced .mf-stem .line{transform:none;}
body.reduced .mf-stem .leaf{opacity:1!important;transform:none!important;}

/* ---------- paper surface: html[data-surface="paper"] ----------
   No photograph behind it here, so the glass becomes frosted paper over the footer's --paper2:
   lighter than the ground, a white top edge, and the reading-room shadow. Ink, rules and
   accents switch to the paper tokens (--pink, --psoft, --pfaint, --pline, --accent-d). */
html[data-surface="paper"] .foot.mf-on{background:var(--paper2);}
html[data-surface="paper"] .foot .manifesto{--mf-hair:var(--pline);color:var(--pink);}
html[data-surface="paper"] .foot .mf-inner{
  background:linear-gradient(135deg,rgba(255,253,247,.9),rgba(255,253,247,.66));
  border:1px solid var(--pline);
  backdrop-filter:blur(18px) saturate(110%);-webkit-backdrop-filter:blur(18px) saturate(110%);
  box-shadow:0 34px 64px -36px rgba(38,36,31,.42),inset 0 1px 0 rgba(255,255,255,.85);}
html[data-surface="paper"] .foot .manifesto h2,
html[data-surface="paper"] .foot .manifesto .mf-sec > h3{color:var(--pink);}
html[data-surface="paper"] .foot .manifesto .mf-sec > p{color:var(--psoft);}
html[data-surface="paper"] .foot .mf-close{color:var(--psoft);text-decoration-color:var(--accent-d);}
html[data-surface="paper"] .foot .mf-close:hover{color:var(--pink);}
html[data-surface="paper"] .foot .mf-close:focus-visible{outline-color:var(--accent-d);}
html[data-surface="paper"] .mf-stem{color:var(--accent-d);}
html[data-surface="paper"] .mf-stem .line{background:linear-gradient(to bottom,color-mix(in srgb,var(--accent-d) 60%,transparent),color-mix(in srgb,var(--accent-d) 18%,transparent));}

@media(max-width:640px){
  .foot .mf-inner{padding:30px 22px 30px 40px;}
  .foot .mf-close{top:12px;right:12px;}
  .foot .manifesto .mf-head{margin-top:26px;}
  .mf-stem{left:20px;top:84px;}
  .mf-stem .leaf{width:16px;height:16px;}
  .mf-stem .leaf.l{left:-16px;}
  .foot .manifesto .rhythm-card{margin:10px -10px 14px 0;}
}
@media print{.foot .mf-close{display:none}.foot .manifesto .mf-inner{opacity:1;transform:none;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* =====================================================================
   The rhythm card: create, share, circulate, restore
   A self-contained component. It works inside the "What this is" panel
   and anywhere else on the site (add .rhythm-card--standalone there).
   Depends only on site-wide tokens from site.css:
   --display --serif --mono --ink --ink-soft --ink-faint --accent
   --r-sm --r-md --r-lg --exhale
   Motion is governed by body.reduced (the footer toggle), never an OS query.
   All text 16px or more.
   ===================================================================== */

.rhythm-card{
  /* the four words borrow the four turnings' accents (values from site.css) */
  --s-create:#7fb06a;  /* html[data-turning="march-equinox"]     */
  --s-share:#e3b64f;   /* html[data-turning="june-solstice"]     */
  --s-circ:#d68a48;    /* html[data-turning="september-equinox"] */
  --s-rest:#9fb6d2;    /* html[data-turning="december-solstice"] */
  position:relative;padding:34px 32px 30px;border-radius:var(--r-md);
  color:var(--ink);font-family:var(--serif);
  background:linear-gradient(135deg,rgba(246,240,226,.075),rgba(246,240,226,.02));
  border:1px solid rgba(246,240,226,.13);
  box-shadow:inset 0 1px 0 rgba(246,240,226,.08);
}

/* lifted out of the panel: carries the full landing-panel glass itself */
.rhythm-card--standalone{max-width:680px;margin:0 auto;padding:44px 48px 38px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(11,13,22,.5),rgba(11,13,22,.34));
  border:1px solid rgba(246,240,226,.18);
  backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);
  box-shadow:0 46px 100px -44px rgba(0,0,0,.8),inset 0 1px 0 rgba(246,240,226,.16);}

.rhythm-card .rc-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.rhythm-card .rc-title{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,25px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;}
.rhythm-card .rc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- the figure ---------- */
.rc-turn{position:relative;margin:28px 0 30px;padding-bottom:50px;}  /* bottom room = the way back */
.rc-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;}
.rc-st{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--c);}
.rc-lab{font-family:var(--mono);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);opacity:.8;transition:opacity .35s var(--exhale);}
.rc-g{position:relative;width:56px;height:56px;display:grid;place-items:center;}
.rc-g svg{width:48px;height:48px;opacity:.72;transition:opacity .35s var(--exhale),transform .5s var(--exhale);}
/* the ripple a station gives off when the seed reaches it */
.rc-g::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--c);opacity:0;transform:scale(.7);pointer-events:none;}

.rc-st.on .rc-g svg{opacity:1;transform:translateY(-2px);}
.rc-st.on .rc-lab{opacity:1;}
.rc-st.pulse .rc-g svg{animation:rc-glyph .9s var(--exhale);}
.rc-st.pulse .rc-g::after{animation:rc-ring .9s var(--exhale);}
.rc-st.pulse .rc-lab{opacity:1;}
@keyframes rc-glyph{0%{transform:scale(1);opacity:.72}35%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:.72}}
@keyframes rc-ring{0%{opacity:.75;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}

/* lines + seed: drawn by rhythm.js from the stations' real positions, so the seed is always on the line */
.rc-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}
.rc-lines .rc-fwd{fill:none;stroke-width:1;opacity:.6;}
.rc-lines .rc-back{fill:none;stroke-width:1;stroke-dasharray:3 6;opacity:.6;}
.rc-seed{opacity:0;transition:opacity .3s var(--exhale);filter:drop-shadow(0 0 5px currentColor);}
.rc-seed path{fill:currentColor;fill-opacity:.28;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;}
.rc-turn.is-running .rc-seed.is-out{opacity:1;}

/* ---------- the four definitions ---------- */
.rc-stages{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.rc-stages li{position:relative;padding:12px 16px 12px 22px;border-left:2px solid color-mix(in srgb,var(--c) 70%,transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;transition:background .35s var(--exhale),border-color .35s;}
.rc-stages li.on{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 13%,transparent),transparent 80%);border-left-color:var(--c);}
.rc-stages li.pulse{animation:rc-wash .9s var(--exhale);border-left-color:var(--c);}
@keyframes rc-wash{0%{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 0%,transparent),transparent 80%)}
  35%{background:linear-gradient(90deg,color-mix(in srgb,var(--c) var(--rc-wash,16%),transparent),transparent 80%)}
  100%{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 0%,transparent),transparent 80%)}}
html[data-surface="paper"] .rhythm-card{--rc-wash:11%;}
.rhythm-card .rc-stages p{margin:0;font-size:clamp(18px,2.2vw,19px);line-height:1.72;color:var(--ink-soft);text-wrap:pretty;}
.rc-stages em{font-style:italic;color:var(--ink);}

.rhythm-card .rc-credit{margin:22px 0 0;font-size:17px;line-height:1.6;color:var(--ink-faint);}
.rc-credit a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.rc-credit a:hover{text-decoration-color:currentColor;}
.rc-credit a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.rhythm-card [data-stage="create"]{--c:var(--s-create);}
.rhythm-card [data-stage="share"]{--c:var(--s-share);}
.rhythm-card [data-stage="circulate"]{--c:var(--s-circ);}
.rhythm-card [data-stage="restore"]{--c:var(--s-rest);}

/* ---------- paper surface: html[data-surface="paper"] ----------
   The four stations take each season's deep accent (--accent-d in site.css), which reads on paper. */
html[data-surface="paper"] .rhythm-card{
  --s-create:#4c7340;  /* march-equinox --accent-d     */
  --s-share:#a9781f;   /* june-solstice --accent-d     */
  --s-circ:#a3592a;    /* september-equinox --accent-d */
  --s-rest:#4f6b8c;    /* december-solstice --accent-d */
  color:var(--pink);
  background:linear-gradient(135deg,rgba(38,36,31,.04),rgba(38,36,31,.012));
  border:1px solid var(--pline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
html[data-surface="paper"] .rhythm-card--standalone{
  background:linear-gradient(135deg,rgba(255,253,247,.92),rgba(255,253,247,.74));
  backdrop-filter:blur(18px) saturate(110%);-webkit-backdrop-filter:blur(18px) saturate(110%);
  box-shadow:0 34px 64px -36px rgba(38,36,31,.42),inset 0 1px 0 rgba(255,255,255,.85);}
html[data-surface="paper"] .rhythm-card .rc-title{color:var(--pink);}
html[data-surface="paper"] .rc-lab{opacity:.9;}
html[data-surface="paper"] .rc-g svg{opacity:.82;}
html[data-surface="paper"] .rc-lines .rc-fwd,html[data-surface="paper"] .rc-lines .rc-back{opacity:.5;}
html[data-surface="paper"] .rc-seed{filter:none;}
html[data-surface="paper"] .rc-seed path{fill-opacity:.2;}
html[data-surface="paper"] .rc-stages li.on{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 80%);}
html[data-surface="paper"] .rhythm-card .rc-stages p{color:var(--psoft);}
html[data-surface="paper"] .rc-stages em{color:var(--pink);}
html[data-surface="paper"] .rhythm-card .rc-credit{color:var(--pfaint);}
html[data-surface="paper"] .rc-credit a{color:var(--psoft);text-decoration-color:var(--accent-d);}
html[data-surface="paper"] .rc-credit a:focus-visible{outline-color:var(--accent-d);}

/* motion off: lines stay, seed rests, nothing pulses */
body.reduced .rhythm-card *{animation:none!important;transition:none!important;}
body.reduced .rc-seed{opacity:0!important;}

@media(max-width:640px){
  .rhythm-card{padding:26px 14px 22px;}
  .rhythm-card--standalone{padding:30px 20px 26px;}
  .rc-lab{display:none;}
  .rc-g{width:44px;height:44px;}
  .rc-g svg{width:38px;height:38px;}
  .rc-turn{margin:22px 0 26px;padding-bottom:40px;}
  .rc-stages li{padding:10px 8px 10px 16px;}
}
@media print{.rc-seed{display:none}.rhythm-card--standalone{backdrop-filter:none;-webkit-backdrop-filter:none;}}

/* =====================================================================
   The sample band: the notice at the top of every page of a sample issue
   (SAMPLES1). "A sample issue for reference. Not a real issue." Sits in
   the flow above the hero with a solid backdrop so it reads over any
   photograph; dark so the nav's light text stays readable over it.
   Its top padding clears the fixed nav. Depends only on the
   site-wide tokens --serif. All text 16px or more. No motion.
   ===================================================================== */
.sample-band{
  background:#3a3120;color:#f6ecce;text-align:center;
  padding:72px 20px 14px;
  font-family:var(--serif);font-size:17px;line-height:1.45;
}
.sample-band p{margin:0 auto;max-width:44em;}