/* ============================================================================
   Mirrento — long-form surfaces (blog index, posts, FAQ)
   ----------------------------------------------------------------------------
   ONE stylesheet for all 9 pages. It used to be an inline <style> copy-pasted
   into every file, which drifted the moment anyone touched one of them.

   The design language is the landing page's, not a second one:
     · same grounds  — #07070a / #0d0d12 / #101018 (index.html --bg/--bg-soft/--bg-card)
     · same ink ramp — rgba(245,245,247, 1 / .78 / .55 / .32)
     · same accent   — --amber #f4b454, --rec #ff3b30
     · same faces    — Newsreader display, Geist body, JetBrains Mono utility

   The signature is the product's own motif: the AMBER EYE-CONTACT BAND, the
   1.5px line with dot terminators that is the reticle in the real prompter and
   the hero device on the landing page. Here it means the same thing it means in
   the app — *this is the line you are on*:
     · full width, as the seam where a masthead ends and the reading begins
     · 9px wide, as the marker on the index row your pointer is over
     · 7px wide, as the bullet of every list item
   It is the only decoration on these pages. Everything else is type and space.
   ========================================================================== */

:root {
  /* ---- Grounds. Three steps of depth, alternating down the page so a change
         of section is felt before it is read. ---- */
  --ink:        #07070a;   /* deepest: mastheads, closing bands, sticky header */
  --ink-lift:   #0d0d12;   /* the "paper" of a dark site: article + list bodies */
  --ink-card:   #101018;   /* raised: read-next cards, FAQ items */

  /* ---- Ink ramp (identical values to landing/index.html) ---- */
  --paper:       #f5f5f7;
  --paper-2:     rgba(245,245,247,0.78);   /* body copy */
  --paper-mute:  rgba(245,245,247,0.55);   /* summaries, secondary */
  --paper-faint: rgba(245,245,247,0.32);   /* dates, nav rest state */
  --hair:        rgba(255,255,255,0.08);
  --hair-strong: rgba(255,255,255,0.16);

  /* ---- Brand ---- */
  --amber:      #f4b454;
  --amber-glow: rgba(244,180,84,0.55);
  --rec:        #ff3b30;
  /* --iridescent / --iridescent-soft come from site.css (:root), shared with
     index.html. `main .iri` below consumes them. */

  /* ---- Faces ---- */
  /* The site's display face is a heavy sans (index.html). Newsreader is only
     the .iri accent there — using it for every heading is what made the blog
     read as a different site. Kept as --f-serif for genuine italic accents. */
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --f-serif:   "Instrument Serif", "Newsreader", ui-serif, Georgia, serif;
  --f-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---- Type scale. Two sizes do the heavy lifting (body 17.5, h2 ~28); the
         rest exist to keep utility text from competing with them. ---- */
  --t-micro:   11px;                       /* mono eyebrows, categories */
  --t-meta:    12px;                       /* bylines, TOC-adjacent labels */
  --t-small:   15.5px;                     /* card + row summaries, footer */
  --t-body:    17.5px;                     /* the article (see --measure) */
  /* 1.7vw so a 13" laptop (~1280px) already gets ~21.5px — at 1.5vw the lead
     sat on its floor everywhere below a 1433px viewport. */
  --t-lead:    clamp(19px, 1.7vw, 21.5px); /* leads and closing paragraphs */
  --t-h3:      21px;
  --t-h2:      clamp(24px, 2.4vw, 30px);
  --t-h1:      clamp(34px, 4.8vw, 56px);   /* a post title: a sentence to read */
  --t-display: clamp(40px, 6vw, 68px);     /* an index title: a statement */

  /* ---- Rhythm ---- */
  --section: clamp(52px, 6.5vw, 88px);     /* padding inside a ground band */
  --rhythm:  clamp(46px, 5.2vw, 70px);     /* space above an h2 */
  /* 57ch of CSS 'ch' (the width of "0") measures ~70 real characters per
     rendered line in Geist — verified in the browser, not guessed. */
  --measure: 57ch;

  --r:    18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ============================== BASE ==================================== */

* { box-sizing: border-box; }
html { background: var(--ink-lift); }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink-lift);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.004em;
}
/* No overflow-x on body/html — it would kill position:sticky on the header
   and the table of contents. */
::selection { background: rgba(244,180,84,0.35); color: #fff; }
a { color: var(--amber); }
img { max-width: 100%; display: block; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}
/* Anything that is read rather than scanned sits in the narrow track. Every
   band on these pages hangs off the SAME left rail as the masthead — nothing
   is centred, or the h1 and the body would sit on two different axes. */
.narrow { max-width: 860px; }

.mono-label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The island nav (pill), .glass, .world/.grain and @keyframes rec all live in
   site.css now — one source of truth with index.html. A dead `.site-head`
   sticky-bar variant used to sit here; it was never in any markup. Removed. */

/* ============================== MASTHEAD ================================ */

.masthead {
  position: relative;
  background: var(--ink);
  padding: clamp(44px, 5.6vw, 76px) 0 clamp(46px, 5.8vw, 78px);
  overflow: hidden;
}
/* The hero's light. The landing runs four iridescent blooms behind its hero;
   here two do the job — a cool blue/violet wash off the left and an amber
   counter-glow low-right — so the masthead reads in the SAME colour family as
   index.html instead of a lone amber wash. It sits only behind the title block,
   never over the article body, so reading is untouched. */
.masthead .glow {
  position: absolute;
  inset: -60% -10% -40% -22%;
  background:
    radial-gradient(42% 46% at 14% 30%, rgba(10,132,255,0.20), transparent 62%),
    radial-gradient(40% 46% at 30% 12%, rgba(183,139,255,0.18), transparent 64%),
    radial-gradient(46% 50% at 78% 82%, rgba(244,180,84,0.16), transparent 66%),
    radial-gradient(38% 42% at 62% 40%, rgba(255,106,165,0.10), transparent 68%);
  filter: saturate(118%);
  pointer-events: none;
}
.masthead .wrap { position: relative; }

.back {
  display: flex;              /* block-level: the eyebrow must not sit beside it */
  width: fit-content;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-decoration: none;
  margin-bottom: 30px;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.back:hover { color: var(--amber); gap: 12px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1.5px;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}

.masthead h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}
.masthead.is-index h1 {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.masthead .lead {
  margin: 22px 0 0;
  max-width: 48ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--paper-2);
  text-wrap: pretty;
}
.masthead .byline {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 20px 0 0;
}

/* --------------------------- THE BAND -----------------------------------
   The seam. Same geometry as .eye-band on the landing page: a 1.5px amber
   rule that fades at both ends, with two dot terminators. */
.band {
  position: relative;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--amber) 12%, var(--amber) 88%, transparent);
  box-shadow: 0 0 24px rgba(244,180,84,0.45);
}
.band .knob {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(244,180,84,0.8);
}
.band .knob.l { left: clamp(20px, 4vw, 32px); }
.band .knob.r { right: clamp(20px, 4vw, 32px); }

/* ============================ ARTICLE BODY ============================== */

.body-wrap {
  background: var(--ink-lift);
  padding: clamp(48px, 6vw, 80px) 0 var(--section);
}
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
}
/* A plain div: the real <article> wraps the body AND the closing band, so a
   content extractor (Safari Reader, Readability) keeps the final section. */
.article-col { min-width: 0; }
.prose { max-width: var(--measure); }

/* The contents column earns its place only when the viewport is wide enough
   that it costs the article nothing. Below that it is not laid out at all. */
@media (min-width: 1060px) {
  .article-grid.has-toc {
    grid-template-columns: 200px minmax(0, var(--measure));
    justify-content: start;
  }
}

/* ------------------------------ CONTENTS -------------------------------- */
.toc { display: none; }
@media (min-width: 1060px) {
  .toc {
    display: block;
    align-self: start;
    position: sticky;
    top: 86px;                          /* clears the sticky header */
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
  }
}
.toc-heading {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 14px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  border-left: 1px solid var(--hair);
}
.toc li {
  padding-left: 15px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: border-color .25s var(--ease);
}
.toc li:hover, .toc li:focus-within { border-left-color: var(--amber); }
.toc a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--paper-mute);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.toc a:hover { color: var(--paper); }

/* ------------------------------- PROSE ---------------------------------- */

.prose > *:first-child { margin-top: 0; }

.prose h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.18;
  letter-spacing: -0.016em;
  color: var(--paper);
  margin: var(--rhythm) 0 18px;
  max-width: 28ch;
  text-wrap: balance;
  scroll-margin-top: 96px;               /* anchor jumps clear the sticky bar */
}
.prose h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--paper);
  margin: 40px 0 14px;
  scroll-margin-top: 88px;
}
.prose p {
  color: var(--paper-2);
  font-size: var(--t-body);
  line-height: 1.72;
  margin: 0 0 1.15em;
  text-wrap: pretty;
}
.prose strong { color: var(--paper); font-weight: 600; }
/* Emphasis borrows the display face in italic — the same move the landing
   page makes on its accent words. */
.prose em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.06em;
  color: var(--paper);
}
.prose a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(244,180,84,0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease);
}
.prose a:hover { text-decoration-color: var(--amber); }

/* Lists: the band at its smallest. The dash is the marker, so no disc. */
.prose ul, .prose ol {
  list-style: none;
  color: var(--paper-2);
  font-size: var(--t-body);
  line-height: 1.72;
  margin: 0 0 1.5em;
  padding: 0;
}
.prose li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.prose li:last-child { margin-bottom: 0; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 3px; top: 0.78em;
  width: 9px; height: 1.5px;
  background: var(--amber);
  opacity: 0.8;
}
.prose ol { counter-reset: prose-n; }
.prose ol > li { counter-increment: prose-n; }
.prose ol > li::before {
  content: counter(prose-n, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.22em;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--amber);
}

.prose blockquote {
  margin: 34px 0;
  padding: 2px 0 2px 26px;
  border-left: 1.5px solid var(--amber);
  font-family: var(--f-display);
  font-style: italic;
  color: var(--paper);
}
.prose blockquote p {
  font-family: inherit;
  font-size: var(--t-h3);
  line-height: 1.45;
  color: inherit;
  margin-bottom: 0.6em;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hair);
  color: var(--paper);
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--hair);
  margin: var(--rhythm) 0;
}

/* ============================ CLOSING BAND ============================== */
/* The last section of a post, lifted back onto the deep ground and set one
   step larger. Nothing new is said here — the ending is simply given room. */
.closing {
  background: var(--ink);
  border-top: 1px solid var(--hair);
  padding: var(--section) 0;
}
.closing-inner { max-width: var(--measure); }
.closing h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 22px;
  max-width: 22ch;
  text-wrap: balance;
  scroll-margin-top: 88px;
}
.closing p {
  /* ch resolves against the element's own size, so the cap lives on the
     paragraph, not on the wrapper — 42ch at lead size is ~68 real characters. */
  max-width: 48ch;
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--paper-2);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.closing p:last-child { margin-bottom: 0; }
.closing strong { color: var(--paper); font-weight: 600; }
.closing em { font-family: var(--f-display); font-style: italic; color: var(--paper); }
.closing a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(244,180,84,0.4);
  text-underline-offset: 3px;
}
.closing a:hover { text-decoration-color: var(--amber); }
/* The pill is a control, not a link in a sentence — it opts out of the rule above. */
.closing a.pill-link { text-decoration: none; color: var(--paper-2); }
.closing p:has(> .pill-link) { margin: 34px 0 0; }

/* ============================== READ NEXT =============================== */

.next {
  background: var(--ink-lift);
  padding: clamp(46px, 5.6vw, 76px) 0 var(--section);
}
.next-heading {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 24px;
}
.next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
.next-list a {
  display: grid;
  align-content: start;
  gap: 11px;
  height: 100%;
  padding: 26px 26px 28px;
  border-radius: var(--r);
  background: var(--ink-card);
  border: 1px solid var(--hair);
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.next-list a:hover {
  transform: translateY(-3px);
  border-color: rgba(244,180,84,0.45);
  box-shadow: 0 20px 44px -24px rgba(0,0,0,0.85);
}
.next-cat {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.next-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.014em;
  color: var(--paper);
}
.next-sum {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--paper-mute);
}

/* ============================= INDEX LIST =============================== */

.index-body {
  background: var(--ink-lift);
  padding: clamp(44px, 5.4vw, 72px) 0 var(--section);
}
.posts { list-style: none; margin: 0; padding: 0; }
.posts li {
  position: relative;
  border-top: 1px solid var(--hair);
}
.posts li:last-child { border-bottom: 1px solid var(--hair); }

/* The eye-contact band, one row wide: the rule you are on lights up and grows
   its terminator dot. Same motif, same meaning as the masthead seam. */
.posts li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--amber), rgba(244,180,84,0.12));
  box-shadow: 0 0 18px rgba(244,180,84,0.45);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.posts li::before {
  content: "";
  position: absolute;
  left: -4px; top: -5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(244,180,84,0.8);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.posts li:hover::after, .posts li:focus-within::after,
.posts li:hover::before, .posts li:focus-within::before { opacity: 1; }

.posts .row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 32px;
  align-items: start;
  padding: 30px 0 32px;
  text-decoration: none;
  color: inherit;
}
.posts .meta { display: grid; gap: 7px; padding-top: 7px; }
.posts .cat {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.posts time {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.posts h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(23px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 10px;
  max-width: 26ch;
  text-wrap: balance;
  transition: color .25s var(--ease);
}
.posts .row:hover h2 { color: var(--amber); }
.posts .sum {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--paper-mute);
  max-width: 52ch;
  text-wrap: pretty;
}

/* Pill link, kept from the previous design — it is the one control on the page */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-2);
  border: 1px solid var(--hair-strong);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pill-link:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }

/* ================================= FAQ ================================== */

.faq-body {
  background: var(--ink-lift);
  padding: clamp(44px, 5.4vw, 72px) 0 var(--section);
}
.faq-list { display: grid; gap: 14px; }
.faq-item {
  background: var(--ink-card);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 26px clamp(20px, 3vw, 30px) 26px;
  transition: border-color .3s var(--ease);
}
.faq-item:hover { border-color: var(--hair-strong); }
.faq-item h2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin: 0 0 13px;
  text-wrap: pretty;
  scroll-margin-top: 88px;
}
/* One tick of the band per question — the rule that makes the list scannable. */
.faq-item h2::before {
  content: "";
  flex: 0 0 auto;
  width: 16px; height: 1.5px;
  margin-top: 0.72em;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}
.faq-item p {
  margin: 0 0 0.9em;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--paper-2);
  max-width: 53ch;
  text-wrap: pretty;
}
.faq-item p:last-child { margin-bottom: 0; }
.faq-item a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(244,180,84,0.4);
  text-underline-offset: 3px;
}
.faq-item a:hover { text-decoration-color: var(--amber); }

/* ================================ FOOTER ================================ */

footer {
  background: var(--ink);
  border-top: 1px solid var(--hair);
}
footer .wrap {
  padding-top: 28px;
  padding-bottom: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--paper-faint);
}
footer a { color: var(--paper-faint); text-decoration: none; transition: color .2s var(--ease); }
footer a:hover { color: var(--paper); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }

/* ============================= RESPONSIVE =============================== */

@media (max-width: 900px) {
  .posts .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 26px 0 28px;
  }
  .posts .meta {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 14px;
    padding-top: 0;
  }
  .posts h2 { max-width: none; }
}

@media (max-width: 640px) {
  .site-head .wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 14px; }
  .site-head nav { margin-left: -10px; }
  .masthead .byline { margin-top: 16px; }
  .next-list a { padding: 22px 22px 24px; }
  .faq-item { padding: 22px 20px; }
  .faq-item h2 { gap: 11px; }
  footer .wrap { padding-bottom: 44px; }
}

/* ========================== REDUCED MOTION ============================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .brand .rec { animation: none; opacity: 1; }
  .next-list a:hover { transform: none; }
}


/* Island nav, .glass, .world/.grain and @keyframes rec are in site.css
   (shared with index.html). Blog-only overrides follow. */

/* Headings take the site's display sans. On index.html the serif is only the
   .iri accent inside a sans headline; using it for every heading is what made
   the blog read as a different site. */
main h1, main h2, main h3, .masthead h1 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Segoe UI", system-ui, sans-serif !important; }
main h1, .masthead h1 { font-weight: 600 !important; letter-spacing: -0.035em !important; }
main h2 { font-weight: 600 !important; letter-spacing: -0.02em !important; }
main em, main i { font-family: "Instrument Serif", "Newsreader", ui-serif, Georgia, serif; font-style: italic; }

/* THE SIGNATURE. index.html sets every headline as heavy sans with ONE accent
   phrase clipped from the iridescent gradient in Instrument Serif italic
   (h1.huge .iri / h2.section-title .iri). The blog dropped it and read as a
   generic dark site. Here it rides inside the sans h1 the same way.
   Font-family is set on the span itself, so the `!important` sans on `main h1`
   (which targets the h1 element, not this child) does not reach it. */
main .iri {
  font-family: "Instrument Serif", "Newsreader", ui-serif, Georgia, serif !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  background: var(--iridescent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Older engines that miss background-clip:text must not show a transparent
   (invisible) headline — fall back to a solid amber accent. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  main .iri { -webkit-text-fill-color: var(--amber); color: var(--amber); background: none; }
}

/* Clear the fixed island. */
body { padding-top: 88px; }
@media (max-width: 640px) { body { padding-top: 76px; } }