/* ============================================================
   The River-to-Ocean Plastics Observatory
   A hydrographic instrument panel. Deep-water ground, silt &
   sediment warmth, a sharp "current" mark. Flow is the metaphor.
   ============================================================ */

/* ============================================================
   THEME TOKENS
   The site is read through two atmospheres of the same instrument.
   Every colour below is a semantic token, redefined per theme — the
   rest of the stylesheet never references a raw hex, so both themes
   stay in lockstep.

   Four states are served:
     1. :root                              -> DARK  (the canonical identity)
     2. @media (prefers-color-scheme:light), no manual choice -> LIGHT
     3. [data-theme="light"]               -> LIGHT (manual override)
     4. [data-theme="dark"]                -> DARK  (manual override)
   The deep-estuary dark is this observatory's founding face, so it is
   the default; light is a fully-crafted daylight reading of the same
   waters, not an inversion.
   ============================================================ */

:root{
  color-scheme:dark;

  /* deep water ground */
  --estuary-900:#070d10;   /* near-black, blue-green undertow */
  --estuary-850:#0a1418;
  --estuary-800:#0d1b21;
  --estuary-700:#11242b;
  --estuary-600:#16323b;
  --line:#1f3942;          /* hairlines */

  /* sediment / silt — the warm side of the palette */
  --silt-100:#efe7da;      /* primary text */
  --silt-300:#cdbfa9;
  --silt-500:#9a8a72;      /* muted labels */
  --silt-700:#6b5f4d;

  /* the current — sharp living-data accent */
  --current:#46e0b0;       /* cyan-green, "flow is live" */
  --current-dim:#2a9c7d;
  --current-glow:rgba(70,224,176,.18);

  /* warning silt for the "what we do not do" side */
  --clay:#d98c5f;

  --bg:var(--estuary-900);
  --fg:var(--silt-100);

  /* atmosphere — body background mesh + grain (tokenised so each
     theme tunes its own depth instead of inverting the other's) */
  --atmo-current:rgba(70,224,176,.06);  /* cyan bloom, top-right */
  --atmo-clay:rgba(217,140,95,.05);     /* silt warmth, top-left */
  --atmo-base:linear-gradient(180deg,var(--estuary-900),var(--estuary-850) 40%,var(--estuary-900));
  --grain-opacity:.035;                 /* feTurbulence strength on hero */
  --grain-blend:normal;
  --on-accent:var(--estuary-900);       /* text/icon laid on the --current fill */
  --field-bg:var(--estuary-900);        /* form inputs */
  --topbar-bg:rgba(7,13,16,.72);        /* sticky bar, translucent */

  --maxw:1180px;
  --pad:clamp(1.25rem,5vw,4rem);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Spline Sans","Segoe UI",sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- LIGHT: a daylight reading of the same estuary ----
   Cool paper ground (faint blue-green, like shallow water over silt),
   deep ink text, the current pulled to a darker teal so it holds its
   meaning as "live data" against a bright field, and the contrast/
   shadow treatment re-tuned (not inverted) for light. */
:root[data-theme="light"]{
  color-scheme:light;

  --estuary-900:#f3f1ea;   /* page ground — warm paper */
  --estuary-850:#ecebe2;   /* footer / recessed */
  --estuary-800:#ffffff;   /* raised cards / panels */
  --estuary-700:#e4e6dd;
  --estuary-600:#d4d9cf;
  --line:#d3d2c4;          /* hairlines */

  --silt-100:#15252b;      /* primary text — deep estuary ink */
  --silt-300:#3f5158;      /* body text */
  --silt-500:#6d7a74;      /* muted labels */
  --silt-700:#9aa39a;      /* faint */

  --current:#0c8f6b;       /* teal — darkened so it reads on white */
  --current-dim:#0a7659;
  --current-glow:rgba(12,143,107,.16);

  --clay:#b85e2e;          /* deepened so it carries on paper */

  --bg:var(--estuary-900);
  --fg:var(--silt-100);

  --atmo-current:rgba(12,143,107,.07);
  --atmo-clay:rgba(184,94,46,.06);
  --atmo-base:linear-gradient(180deg,#f6f4ee,#eef0e8 45%,#f3f1ea);
  --grain-opacity:.02;
  --grain-blend:multiply;
  --on-accent:#ffffff;     /* white text on the darkened teal fill */
  --field-bg:#fbfbf7;
  --topbar-bg:rgba(243,241,234,.78);
}

/* system preference applies LIGHT only when the visitor has made no
   manual choice (no data-theme attribute set by the toggle script) */
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    color-scheme:light;

    --estuary-900:#f3f1ea;
    --estuary-850:#ecebe2;
    --estuary-800:#ffffff;
    --estuary-700:#e4e6dd;
    --estuary-600:#d4d9cf;
    --line:#d3d2c4;

    --silt-100:#15252b;
    --silt-300:#3f5158;
    --silt-500:#6d7a74;
    --silt-700:#9aa39a;

    --current:#0c8f6b;
    --current-dim:#0a7659;
    --current-glow:rgba(12,143,107,.16);

    --clay:#b85e2e;

    --bg:var(--estuary-900);
    --fg:var(--silt-100);

    --atmo-current:rgba(12,143,107,.07);
    --atmo-clay:rgba(184,94,46,.06);
    --atmo-base:linear-gradient(180deg,#f6f4ee,#eef0e8 45%,#f3f1ea);
    --grain-opacity:.02;
    --grain-blend:multiply;
    --on-accent:#ffffff;
    --field-bg:#fbfbf7;
    --topbar-bg:rgba(243,241,234,.78);
  }
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(1rem,.55vw + .85rem,1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* layered estuary depth */
  background-image:
    radial-gradient(120% 80% at 85% -10%,rgba(70,224,176,.06),transparent 55%),
    radial-gradient(100% 70% at 0% 5%,rgba(217,140,95,.05),transparent 50%),
    linear-gradient(180deg,var(--estuary-900),var(--estuary-850) 40%,var(--estuary-900));
  background-attachment:fixed;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

::selection{background:var(--current);color:var(--estuary-900)}

.skip{
  position:absolute;left:-999px;top:0;background:var(--current);
  color:var(--estuary-900);padding:.6rem 1rem;z-index:200;font-weight:600;
  font-family:var(--font-mono);
}
.skip:focus{left:.5rem;top:.5rem;border-radius:4px}

:focus-visible{outline:2px solid var(--current);outline-offset:3px;border-radius:2px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  background:rgba(7,13,16,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.wordmark{display:flex;align-items:center;gap:.6rem;color:var(--silt-100)}
.wordmark-mark{color:var(--current);display:grid;place-items:center}
.wordmark-text{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.04em;
  line-height:1.1;text-transform:uppercase;
}
.wordmark-text em{
  display:block;font-style:normal;color:var(--silt-500);
  font-size:.62rem;letter-spacing:.18em;margin-top:.12rem;
}
.topnav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem)}
.topnav a{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--silt-300);padding:.3rem 0;position:relative;
  transition:color .25s var(--ease);
}
.topnav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--current);transition:width .3s var(--ease);
}
.topnav a:hover{color:var(--silt-100)}
.topnav a:hover::after{width:100%}
.topnav-cta{
  color:var(--current)!important;border:1px solid var(--current-dim);
  padding:.4rem .8rem!important;border-radius:999px;
}
.topnav-cta::after{display:none}
.topnav-cta:hover{background:var(--current-glow)}
.topnav a:not(.topnav-cta){display:none}
@media(min-width:820px){.topnav a:not(.topnav-cta){display:inline-block}}

/* ---------- layout helpers ---------- */
.band{max-width:var(--maxw);margin-inline:auto;padding:clamp(4rem,9vw,7.5rem) var(--pad)}
.section-index{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--current);margin-bottom:1.4rem;
}
.band-head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.band-head h2,.scope-lead h2,.reach-intro h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.04;
  letter-spacing:-.015em;color:var(--silt-100);
}
.band-sub{margin-top:1.2rem;color:var(--silt-300);max-width:54ch}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;flex-direction:column;
  justify-content:center;padding:7rem var(--pad) 4rem;overflow:hidden;
}
.hero-grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.hero::before{
  /* the signature flow line — a current threading down behind the hero */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 30%,var(--current-glow),transparent 60%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M70 -5 C 60 25, 90 40, 78 65 S 50 95, 60 110' stroke='black' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M70 -5 C 60 25, 90 40, 78 65 S 50 95, 60 110' stroke='black' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat;
}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;width:100%}
.eyebrow{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silt-500);margin-bottom:1.8rem;
  opacity:0;animation:rise .8s var(--ease) .1s forwards;
}
.hero h1{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.8rem,9vw,6.5rem);line-height:.98;
  letter-spacing:-.025em;color:var(--silt-100);max-width:16ch;
}
.hero h1 span,.hero h1{display:block}
.hero h1 br + ,.hero h1{}
.hero h1{opacity:0;animation:rise .9s var(--ease) .22s forwards}
.hero-flow{
  font-style:italic;color:var(--current);
  font-variation-settings:"opsz" 144;
  position:relative;
}
.hero-lede{
  margin-top:2rem;max-width:56ch;color:var(--silt-300);
  font-size:clamp(1.05rem,1.2vw,1.25rem);line-height:1.75;
  opacity:0;animation:rise .9s var(--ease) .42s forwards;
}
.hero-actions{
  margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem;
  opacity:0;animation:rise .9s var(--ease) .58s forwards;
}
.endorse-mount{
  margin-top:1.4rem;color:var(--silt-300);
  opacity:0;animation:rise .9s var(--ease) .72s forwards;
}
.hero-scrollcue{
  position:absolute;left:var(--pad);bottom:2rem;z-index:1;
  display:flex;align-items:center;gap:.6rem;color:var(--silt-500);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;animation:fade 1s ease 1.1s forwards;
}
.hero-scrollcue svg{animation:bob 2.2s var(--ease) infinite}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.03em;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .2s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.btn-primary{background:var(--current);color:var(--estuary-900);font-weight:600}
.btn-primary:hover{background:#5cf0c1;transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--silt-100)}
.btn-ghost:hover{border-color:var(--current-dim);color:var(--current);transform:translateY(-2px)}
.btn-block{width:100%;justify-content:center;font-size:.9rem;padding:1rem}

/* ---------- orientation band (is / is not) ---------- */
.band-orient{padding-top:0}
.orient-grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
@media(min-width:780px){.orient-grid{grid-template-columns:1fr 1fr}}
.orient-col{background:var(--estuary-800);padding:clamp(1.8rem,3vw,2.6rem)}
.orient-col.isnot{background:var(--estuary-850)}
.orient-kicker{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.2rem;
}
.orient-col.is .orient-kicker{color:var(--current)}
.orient-col.isnot .orient-kicker{color:var(--clay)}
.orient-col ul{list-style:none;display:grid;gap:.9rem}
.orient-col li{position:relative;padding-left:1.6rem;color:var(--silt-300);line-height:1.55}
.orient-col li::before{
  position:absolute;left:0;top:.05em;font-family:var(--font-mono);font-size:.95rem;
}
.orient-col.is li::before{content:"\002B";color:var(--current)}      /* + */
.orient-col.isnot li::before{content:"\2212";color:var(--clay)}      /* − */

/* ---------- mandate statement ---------- */
.band-mandate{position:relative}
.statement{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.7rem,4vw,3rem);line-height:1.18;letter-spacing:-.01em;
  color:var(--silt-100);max-width:24ch;
}
.statement{max-width:none;max-width:30ch}
.mandate-foot{
  margin-top:2.2rem;max-width:58ch;color:var(--silt-300);
  border-left:2px solid var(--current-dim);padding-left:1.4rem;
}

/* ---------- pillars ---------- */
.pillars{list-style:none;display:grid;gap:1.25rem}
@media(min-width:860px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{
  position:relative;background:var(--estuary-800);
  border:1px solid var(--line);border-radius:14px;
  padding:2rem 1.7rem 1.9rem;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.pillar::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--current);transition:width .5s var(--ease);
}
.pillar:hover{transform:translateY(-4px);border-color:var(--current-dim)}
.pillar:hover::before{width:100%}
.pillar-no{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;
  color:var(--current);display:block;margin-bottom:1.1rem;
}
.pillar h3{
  font-family:var(--font-display);font-weight:500;font-size:1.5rem;
  line-height:1.1;margin-bottom:.9rem;color:var(--silt-100);
}
.pillar p{color:var(--silt-300);font-size:.98rem;line-height:1.65}

/* ---------- stations (the flow timeline) ---------- */
.stations{
  list-style:none;position:relative;display:grid;gap:0;
  padding-left:2.4rem;
}
.stations::before{
  /* the river spine */
  content:"";position:absolute;left:7px;top:.4rem;bottom:.4rem;width:2px;
  background:linear-gradient(180deg,var(--current),var(--current-dim) 60%,var(--silt-700));
  border-radius:2px;
}
.station{position:relative;padding:1.4rem 0 1.8rem}
.station + .station{border-top:1px solid var(--line)}
.station::before{
  content:"";position:absolute;left:calc(-2.4rem + 1px);top:1.85rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--estuary-900);border:2px solid var(--current);
  box-shadow:0 0 0 4px var(--estuary-900),0 0 14px var(--current-glow);
}
.station-tag{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--current);
}
.station h3{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.1;
  margin:.4rem 0 .6rem;color:var(--silt-100);
}
.station p{color:var(--silt-300);max-width:60ch}

/* ---------- pull statement band ---------- */
.band-pull{max-width:none;background:var(--estuary-800);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.band-pull::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 20% 50%,var(--current-glow),transparent 60%);
}
.pull{
  position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,4.2vw,3.1rem);line-height:1.2;letter-spacing:-.01em;
  color:var(--silt-100);max-width:24ch;
}

/* ---------- scope ---------- */
.scope-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:880px){.scope-grid{grid-template-columns:.85fr 1.15fr;align-items:start}}
.scope-body p + p{margin-top:1.2rem}
.scope-body p{color:var(--silt-300);max-width:60ch}
.scope-note{
  margin-top:1.6rem!important;color:var(--silt-100)!important;
  border-left:2px solid var(--current);padding-left:1.2rem;
}

/* ---------- reach-back ---------- */
.band-reach{scroll-margin-top:5rem}
.reach-grid{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:880px){.reach-grid{grid-template-columns:1fr 1fr;align-items:start}}
.reach-intro p{color:var(--silt-300);max-width:48ch;margin-top:1.2rem}
.reach-fine{font-size:.9rem;color:var(--silt-500)!important}
.reach-form{
  background:var(--estuary-800);border:1px solid var(--line);
  border-radius:16px;padding:clamp(1.5rem,3vw,2.2rem);
}
.field{margin-bottom:1.3rem}
.field label{
  display:block;font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--silt-300);
  margin-bottom:.55rem;
}
.field .opt{color:var(--silt-700);text-transform:none;letter-spacing:0}
.field input,.field textarea{
  width:100%;background:var(--estuary-900);border:1px solid var(--line);
  border-radius:9px;padding:.85rem 1rem;color:var(--silt-100);
  font-family:var(--font-body);font-size:1rem;line-height:1.5;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--silt-700)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--current-dim);
  box-shadow:0 0 0 3px var(--current-glow);
}
.form-status{
  margin-top:1rem;font-family:var(--font-mono);font-size:.85rem;
  min-height:1.2em;line-height:1.4;
}
.form-status.ok{color:var(--current)}
.form-status.err{color:var(--clay)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--estuary-850)}
.footer-inner{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,5vw,3.5rem) var(--pad);
  display:grid;gap:1rem;
}
.footer-brand{display:flex;align-items:center;gap:.6rem}
.footer-mark{color:var(--current)}
.footer-brand p{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.04em;color:var(--silt-100)}
.footer-line{color:var(--silt-300);max-width:60ch}
.footer-line a{color:var(--current);text-decoration:underline;text-underline-offset:3px}
.footer-meta{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silt-700)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero .eyebrow,.hero h1,.hero-lede,.hero-actions,.endorse-mount,.hero-scrollcue{opacity:1}
}

/* ---------------- the record: archive + reader (publications.html) ---------------- */
.archive-state { color: var(--silt-500); font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.04em; margin: 18px 0; }
.archive-error { color: var(--silt-300); }
.pubs-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
a.pub-row { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 28px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background 0.25s ease; }
a.pub-row:hover { background: var(--estuary-850); }
.pub-meta { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pub-date { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 13px; color: var(--silt-100); }
.pub-kind { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--current); align-self: start; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; }
.pub-title { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.2; margin: 0 0 10px; color: var(--silt-100); }
a.pub-row:hover .pub-title { color: var(--current); }
.pub-excerpt { margin: 0; color: var(--silt-300); font-size: 15.5px; line-height: 1.65; max-width: 62ch; }
.pub-readmore { display: inline-block; margin-top: 12px; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--current); }
.reader { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) 24px 80px; }
.reader-back { margin: 0 0 28px; }
.reader-back a { color: var(--current); text-decoration: none; font-size: 14px; }
.reader-back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.reader-meta { display: flex; flex-direction: row; gap: 14px; align-items: center; margin-bottom: 18px; }
.reader-date { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 13px; color: var(--silt-100); }
.reader-kind { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--current); padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; }
.reader-title { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; color: var(--silt-100); margin: 0 0 30px; }
.reader-body { color: var(--silt-100); font-size: 17px; line-height: 1.75; }
.reader-body p { margin: 0 0 1.25em; }
.reader-body h2, .reader-body h3, .reader-body h4 { font-family: "Fraunces", Georgia, serif; font-weight: 500; line-height: 1.2; color: var(--silt-100); margin: 1.8em 0 0.7em; }
.reader-body h2 { font-size: clamp(22px, 3vw, 30px); }
.reader-body h3 { font-size: clamp(19px, 2.4vw, 24px); }
.reader-body ul { margin: 0 0 1.25em; padding-left: 1.3em; }
.reader-body li { margin: 0.35em 0; }
.reader-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--current); }
.reader-body blockquote p { color: var(--silt-300); font-style: italic; margin: 0; }
.reader-body code { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 0.9em; background: var(--estuary-800); padding: 1px 6px; border-radius: 5px; }
.reader-body a { color: var(--current); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { a.pub-row { grid-template-columns: 1fr; gap: 12px; } .pub-meta { flex-direction: row; align-items: center; gap: 14px; } }