/* ============================================================
   The Painter in the Painting — port styles.

   Adds the bespoke sticky top nav (back-to-referrer + wordmark +
   article title + roman-numeral stage TOC) and bridges the shared
   glass FOOTER onto this page's palette. The side .rail (stage index)
   and the whole reading experience are left untouched. Theme axis
   (dusk dark / moss light) is bridged from the site toggle by port.js.
   ============================================================ */

/* ── shared-footer token bridge. The footer must read the SITE's
   standard fonts (Nexa wordmark + JetBrains Mono labels) so it matches
   every other page — NOT Fraunces/Source Serif. Colours map onto
   Painter's own palette so it flips with dusk/moss. ── */
:root{
  --display:'Nexa','League Spartan',sans-serif;
  --sans:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --r-sm:4px;
  --exhale:cubic-bezier(.4,0,.2,1);
  --breath:cubic-bezier(.4,0,.2,1);
  --page-bg:var(--bg);
  --ink-faint:var(--ink-faint);
  --nav-border:var(--rule);
  --nav-hairline:color-mix(in srgb,var(--accent) 55%,transparent);
  --nav-ink:var(--ink);
  --nav-ink-soft:var(--ink-mute);
  --nav-accent:var(--accent);
  --nav-glass:color-mix(in srgb,var(--bg) 82%,transparent);
  --nav-shadow:0 12px 44px -20px rgba(0,0,0,.55);
  --thread-solid:var(--brass);
  --thread:linear-gradient(90deg,transparent,var(--brass) 18%,var(--accent) 50%,var(--brass) 82%,transparent);
}
[data-palette="dusk"]{ --nav-shadow:0 12px 44px -20px rgba(0,0,0,.8); }

/* (footer link styling now lives in shared/chrome.css — no per-page override) */

/* ── the sticky top nav (.chrome) ── */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:14px clamp(1rem,3vw,2.4rem);
  font-family:var(--font-mono);
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--bg) 90%,transparent),
    color-mix(in srgb,var(--bg) 32%,transparent) 70%,transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .6s var(--exhale);
}
.chrome a{ text-decoration:none; border:none; }
.chrome__l,.chrome__r{ display:inline-flex; align-items:center; gap:clamp(12px,2vw,20px); }

.chrome .back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); transition:color .3s;
}
.chrome .back:hover{ color:var(--accent); }

.chrome .site-brand{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-mute); transition:color .3s; }
.chrome .site-brand:hover{ color:var(--accent); }
.chrome .site-brand{ gap:9px; }
.chrome .site-brand .mark{ width:20px; height:20px; color:var(--accent); flex:none; display:inline-flex; }
.chrome .site-brand .mark svg{ width:100%; height:100%; display:block; }
.chrome .site-brand .name{ font-family:var(--display,'Nexa','League Spartan',sans-serif); font-size:14px; font-weight:800; letter-spacing:.01em; text-transform:lowercase; color:var(--ink-mute); transition:color .3s; }
.chrome .site-brand:hover .name{ color:var(--ink); }

/* centered article title (its reading identity) */
.chrome .brand{
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.04em; color:var(--ink-mute);
}
.chrome .brand em{ font-style:italic; font-family:var(--font-display); color:var(--accent); }
@media(max-width:980px){ .chrome .brand{ font-size:.7rem; } }
@media(max-width:460px){ .chrome .brand{ display:none; } }

/* stage TOC — roman numerals; active state driven by port.js */
.chrome .toc{ display:flex; align-items:center; gap:clamp(6px,1vw,13px); }
.chrome .toc a{ font-size:.72rem; letter-spacing:.08em; color:var(--ink-faint); font-variant:small-caps; transition:color .3s; }
.chrome .toc a:hover{ color:var(--ink); }
.chrome .toc a.active{ color:var(--accent); }
@media(max-width:860px){ .chrome .toc{ display:none; } }

/* theme toggle */
.chrome .icon-btn{
  all:unset; box-sizing:border-box; cursor:pointer; width:34px; height:34px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; border-radius:4px;
  color:var(--ink-mute); transition:color .3s,background .3s;
}
.chrome .icon-btn svg{ width:18px; height:18px; display:block; }
.chrome .icon-btn:hover{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.chrome .icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media(max-width:520px){ .chrome .site-brand .name{ display:none; } }

/* clearance so the fixed nav doesn't cover the top of the hero */
.hero{ scroll-margin-top:64px; }
section[id]{ scroll-margin-top:64px; }

/* ── hero: clear the fixed top nav + center the eyebrow / title / metadata
   so it reads below the bar like the other articles. These use body[data-page]
   for specificity because the page's inline <style> block loads AFTER port.css
   and would otherwise win with plain .hero rules. ── */
body[data-page] .hero{
  padding-top:clamp(96px,14vh,150px);
  text-align:center;
}
body[data-page] .hero .eyebrow{ justify-content:center; }
body[data-page] .hero .eyebrow::after,
body[data-page] .hero .eyebrow::before{ display:none; }   /* drop the trailing rule so it centers */
body[data-page] .hero h1{ margin-left:auto; margin-right:auto; }
body[data-page] .hero .dek{ margin-left:auto; margin-right:auto; }

/* byline: centered, quieter + smaller (Tinted Lens treatment — metadata
   recedes so the title leads). The <dl> grid becomes a centered inline row. */
body[data-page] .hero .byline{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1.6rem; margin-top:1.6rem;
  font-family:var(--font-mono); font-size:1rem; letter-spacing:.08em;
  color:var(--ink-faint);
}
body[data-page] .hero .byline > div{ display:inline-flex; align-items:baseline; gap:.4rem; }
body[data-page] .hero .byline dt{
  font-size:1rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0;
}
body[data-page] .hero .byline dd{ margin:0; color:var(--ink-mute); font-style:normal; }
body[data-page] .hero .byline dd em{ font-style:italic; color:var(--ink-soft); }

/* ── moss (light) — deepen the interactive accent so the small TOC caps +
   rail highlights read on the pale ground. ── */
[data-palette="moss"]{ --accent:#33492C; }
[data-palette="moss"] .chrome .toc a.active{ color:#2A3C25; font-weight:600; }

/* ── bottom breathing room: extra space so the scene + fixed side rail finish
   well before the footer; the footer lifts above the fixed #scene; port.js
   hides the rail once the footer scrolls in. ── */
.article{ padding-bottom:clamp(96px,16vh,180px); }
footer.site{ position:relative; z-index:60; background:var(--bg); border-top:1px solid var(--rule); }
body.at-foot .rail{ opacity:0; pointer-events:none; transition:opacity .35s var(--exhale); }

@media print{ .chrome{ display:none; } }