/* ============================================================
   GRITCULT — design tokens & global styles
   Monochrome (black / bone / grey), Roman-inscriptional serif,
   skull-crest emblem, Maltese-cross motifs. Matches the brand mark.
   ============================================================ */

:root {
  --black:      #faf8f3;
  --ink:        #f1eee5;
  --panel:      #e8e3d5;
  --line:       #ddd6c5;
  --bone:       #14120e;
  --bone-dim:   #4d473d;
  --mute:       #8b8474;
  --accent:     #14120e;   /* the brand is monochrome — black IS the accent in light mode, bone in dark */
  --accent-dim: #332f27;
  --prose:      #2a2620;
  --grain-blend: multiply;
  --grain-op:   0.035;

  --max:    1180px;
  --gut:    clamp(20px, 5vw, 64px);

  /* Roman inscriptional caps (Trajan-like) for display + wordmark */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  /* literary body serif */
  --serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  /* utilitarian sans for nav, buttons, labels */
  --sans:    "Helvetica Neue", Arial, system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] {
  --black:      #070706;
  --ink:        #0f0e0d;
  --panel:      #161514;
  --line:       #2a2826;
  --bone:       #f1ede4;
  --bone-dim:   #9d978c;
  --mute:       #6a655d;
  --accent:     #f1ede4;
  --accent-dim: #c8c2b6;
  --prose:      #ddd6c9;
  --grain-blend: overlay;
  --grain-op:   0.04;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --black:      #070706;
    --ink:        #0f0e0d;
    --panel:      #161514;
    --line:       #2a2826;
    --bone:       #f1ede4;
    --bone-dim:   #9d978c;
    --mute:       #6a655d;
    --accent:     #f1ede4;
    --accent-dim: #c8c2b6;
    --prose:      #ddd6c9;
    --grain-blend: overlay;
    --grain-op:   0.04;
  }
}

/* brand marks are black-fill/transparent raster images — invert for dark backgrounds */
:root[data-theme="dark"] .nav__mark, :root[data-theme="dark"] .nav__word,
:root[data-theme="dark"] .hero__emblem, :root[data-theme="dark"] .foot__emblem, :root[data-theme="dark"] .foot__word {
  filter: invert(1) brightness(1.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__mark, :root:not([data-theme="light"]) .nav__word,
  :root:not([data-theme="light"]) .hero__emblem, :root:not([data-theme="light"]) .foot__emblem, :root:not([data-theme="light"]) .foot__word {
    filter: invert(1) brightness(1.3);
  }
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

/* ---- film grain overlay ---- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; }
.rule { height: 1px; background: var(--line); border: 0; }

/* ---- Maltese / iron cross divider (echoes the "✠ Grit ✠" lockup) ---- */
.cross-rule {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  color: var(--mute); padding-block: 1.5rem;
}
.cross-rule::before, .cross-rule::after { content: ""; height: 1px; flex: 1; max-width: 180px; background: var(--line); }
.cross-rule .x { font-size: 1rem; letter-spacing: 0.3em; }

/* ---- type ---- */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1.display { font-size: clamp(2.8rem, 9vw, 7.5rem); font-weight: 900; }
h2.display { font-size: clamp(2rem, 5.5vw, 4rem); }
h3.display { font-size: clamp(1.4rem, 3vw, 2.2rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 700;
}
.lede { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--bone-dim); line-height: 1.5; max-width: 48ch; font-style: italic; }
.accent { color: var(--bone); }
.serif { font-family: var(--serif); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem;
  padding: 1em 1.7em; border: 1px solid var(--bone);
  color: var(--bone); background: transparent;
  cursor: pointer; transition: all 0.3s var(--ease);
}
.btn:hover { background: var(--bone); color: var(--black); }
/* primary = solid bone (kept class name .btn--ember for markup stability) */
.btn--ember { background: var(--bone); border-color: var(--bone); color: var(--black); }
.btn--ember:hover { background: transparent; color: var(--bone); }
.btn--ghost { border-color: var(--line); color: var(--bone-dim); }
.btn--ghost:hover { border-color: var(--bone); color: var(--bone); background: transparent; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--gut);
  border-bottom: 1px solid var(--line);
}
/* The blur sits on a pseudo-element: backdrop-filter on .nav itself would trap the
   fixed mobile menu inside the nav bar (making it 70px tall and pushing the page wide). */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--black) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav__brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.nav__mark { height: 34px; width: auto; }
.nav__word { height: 22px; width: auto; }
.nav__right { display: flex; align-items: center; gap: 1.2rem; }
.nav__links { display: flex; gap: 1.9rem; align-items: center; }
.nav__links a {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--bone-dim); transition: color 0.25s;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--bone); }
.nav__toggle { display: none; background: none; border: 0; color: var(--bone); cursor: pointer; padding: 6px; }
.nav__toggle svg { width: 26px; height: 26px; }
.theme-toggle, .search-toggle {
  background: none; border: 1px solid var(--line); color: var(--bone-dim);
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.95rem; line-height: 1; transition: border-color 0.25s, color 0.25s;
}
.theme-toggle:hover, .search-toggle:hover { border-color: var(--bone); color: var(--bone); }

@media (max-width: 860px) {
  .nav__toggle { display: block; position: relative; z-index: 1; }
  .nav__links {
    position: fixed; inset: 0 0 0 30%; flex-direction: column; justify-content: center;
    gap: 1.6rem; padding: 2rem; background: var(--ink);
    border-left: 1px solid var(--line);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .nav__links.open { transform: translateX(0); visibility: visible; transition: transform 0.4s var(--ease); }
  .nav__links a { font-size: 1rem; }
}

/* ---- hero ---- */
.hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-block: 6rem; position: relative; }
.hero__emblem {
  width: clamp(140px, 24vw, 280px); height: auto; margin-bottom: 2.2rem;
  opacity: 0.96;
}
.hero__emblem--ghost {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(86vw, 760px); opacity: 0.05; z-index: -1; margin: 0;
}
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero h1 { margin-bottom: 1.6rem; }
.hero h1 .line { display: block; }
.hero__sub { margin-bottom: 2.6rem; margin-inline: auto; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ---- generic section header ---- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
.shead .eyebrow { margin-bottom: 0.9rem; display: block; }
.pad { padding-block: clamp(4rem, 9vw, 8rem); }
.pad-t { padding-top: clamp(4rem, 9vw, 8rem); }

/* ---- ethos beats ---- */
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.beat { background: var(--black); padding: clamp(1.8rem, 3vw, 2.8rem); }
.beat__n { font-family: var(--display); color: var(--bone); font-size: 1.1rem; font-weight: 700; }
.beat h3 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0.7rem 0 0.9rem; text-transform: uppercase; font-weight: 700; }
.beat p { color: var(--bone-dim); }
@media (max-width: 720px) { .beats { grid-template-columns: 1fr; } }

/* ---- featured manifesto ---- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.feature__body h2 { margin: 1rem 0 1.4rem; }
.feature__body p { color: var(--bone-dim); margin-bottom: 1.8rem; }
.feature__plate {
  aspect-ratio: 4/5; border: 1px solid var(--line); background:
    radial-gradient(120% 120% at 70% 10%, color-mix(in srgb, var(--bone) 10%, transparent), transparent 55%), var(--ink);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.feature__plate span { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.8rem); text-transform: uppercase; line-height: 1.05; text-align: center; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } .feature__plate { aspect-ratio: 16/10; } }

/* ---- manifesto index list ---- */
.mlist { border-top: 1px solid var(--line); }
.mrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line);
  transition: background 0.3s; position: relative;
}
.mrow:hover { background: var(--ink); }
.mrow__no { font-family: var(--display); color: var(--mute); font-size: 1.3rem; }
.mrow__t { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2.1rem); text-transform: uppercase; line-height: 1.05; }
.mrow__d { color: var(--bone-dim); font-size: 1rem; max-width: 42ch; font-style: italic; }
.mrow__go { color: var(--bone); font-size: 1.3rem; }
@media (max-width: 680px) { .mrow { grid-template-columns: auto 1fr; } .mrow__d { display: none; } }

/* ---- manifesto reader ---- */
.reader { max-width: 720px; margin-inline: auto; }
.reader__hd { text-align: center; padding-block: clamp(2rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.reader__hd h1 { margin: 1rem 0; }
.reader__meta { font-family: var(--sans); color: var(--mute); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }
.prose { font-size: 1.24rem; line-height: 1.72; }
.prose p { margin-bottom: 1.5rem; color: var(--prose); }
.prose p:first-of-type::first-letter {
  font-family: var(--display); font-weight: 900; float: left; font-size: 4.6rem; line-height: 0.78;
  padding: 0.04em 0.12em 0 0; color: var(--bone);
}
.prose .big { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.1; color: var(--bone); margin: 2.6rem 0; }
.prose blockquote { border-left: 2px solid var(--bone); padding-left: 1.4rem; margin: 2rem 0; font-style: italic; color: var(--bone); }
.sig { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bone); margin-top: 3rem; font-size: 1.2rem; }
.prose h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.15; color: var(--bone); margin: 3.4rem 0 1.2rem; }
.prose h2::before { content: "\271D"; display: block; font-size: 0.9rem; color: var(--mute); margin-bottom: 0.7rem; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose a:hover { color: var(--bone); }
.prose ol { margin: 0 0 1.5rem; padding-left: 1.6rem; color: var(--prose); }
.prose ol li { margin-bottom: 0.5rem; padding-left: 0.3rem; }
.prose ol li::marker { font-family: var(--display); font-weight: 700; color: var(--bone); }
.prose figure { margin: 2.6rem 0; }
.prose figure img { display: block; max-width: 100%; height: auto; margin-inline: auto; border: 1px solid var(--line); background: #fff; }
.prose figcaption { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); text-align: center; margin-top: 0.8rem; }
/* receipts: quoted posts from the archive */
.prose .receipt { display: block; margin: 1.4rem 0 1.8rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); background: var(--ink); text-decoration: none; transition: border-color 0.25s; }
.prose a.receipt:hover { border-color: var(--bone); }
.receipt__hd { display: block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.55rem; }
.receipt__t { display: block; font-size: 1.12rem; line-height: 1.5; color: var(--bone); }

/* ---- arena (content archive) ---- */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  padding: 0.65em 1.15em; border: 1px solid var(--line); color: var(--bone-dim);
  background: transparent; cursor: pointer; transition: all 0.25s;
}
.filter:hover { color: var(--bone); border-color: var(--bone); }
.filter.active { background: var(--bone); border-color: var(--bone); color: var(--black); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
.card {
  padding: 1.7rem 1.6rem;
  border: 1px solid var(--line); background: var(--ink);
  transition: border-color 0.3s, transform 0.3s;
}
.card:hover { border-color: var(--bone); transform: translateY(-3px); }
.card__cat { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); font-weight: 700; display: block; margin-bottom: 0.85rem; }
.card__t { font-size: 1.16rem; line-height: 1.45; color: var(--bone); }
.card--punch .card__t { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; }
.card__by { font-family: var(--sans); color: var(--mute); font-size: 0.78rem; letter-spacing: 0.06em; margin-top: 0.7rem; text-transform: uppercase; }
.card__links { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.9rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.card__links a { color: var(--bone-dim); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.card__links a:hover { color: var(--bone); border-color: var(--bone); }

.eplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ep { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.ep__body { flex: 1; min-width: 260px; }
.ep__show { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); font-weight: 700; display: block; margin-bottom: 0.4rem; }
.ep__t { font-size: 1.1rem; line-height: 1.4; color: var(--bone); margin: 0; }
.ep__by { font-family: var(--sans); color: var(--mute); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.4rem 0 0; }
.ep__play { display: flex; gap: 1.2rem; flex-wrap: wrap; flex: none; }
.ep__play a { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.ep__play a:hover { color: var(--bone); border-color: var(--bone); }
.ep__play a[data-yt], .ep__play a[data-yt-list] { cursor: pointer; }
.ep__embed { flex: 1 0 100%; position: relative; aspect-ratio: 16/9; background: var(--ink); border: 1px solid var(--line); margin-top: 0.4rem; }
.ep__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- email capture ---- */
.capture { border: 1px solid var(--line); background:
  radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--bone) 7%, transparent), transparent 50%), var(--ink);
  padding: clamp(2rem, 6vw, 4.5rem); text-align: center; }
.capture h2 { margin-bottom: 1rem; }
.capture p { color: var(--bone-dim); max-width: 44ch; margin: 0 auto 2rem; font-style: italic; }
.cform { display: flex; gap: 0.6rem; max-width: 480px; margin: 0 auto; }
.cform input {
  flex: 1; background: var(--black); border: 1px solid var(--line); color: var(--bone);
  padding: 1em 1.1em; font-size: 0.98rem; font-family: var(--sans);
}
.cform input:focus { outline: none; border-color: var(--bone); }
.cform__msg { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; color: var(--accent-dim); font-style: italic; }
@media (max-width: 520px) { .cform { flex-direction: column; } }

/* ---- substack embed (join blocks) ---- */
.substack-embed { max-width: 480px; margin: 0 auto; border: 1px solid var(--line); overflow: hidden; line-height: 0; }
.substack-embed iframe { display: block; width: 100%; }
@media (max-width: 520px) { .substack-embed { max-width: 100%; } }

/* ---- socials ---- */
.socials { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.social {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.2em;
  border: 1px solid var(--line); font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--bone-dim); transition: all 0.25s;
}
.social:hover { border-color: var(--bone); color: var(--bone); }

/* ---- drops ---- */
.drops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.drop { border: 1px solid var(--line); background: var(--ink); overflow: hidden; }
.drop__img { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background:
  repeating-linear-gradient(45deg, var(--panel), var(--panel) 14px, var(--ink) 14px, var(--ink) 28px); }
.drop__img span { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; color: var(--mute); }
.drop__b { padding: 1.5rem; }
.drop__b h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; }
.drop__b .price { color: var(--bone-dim); margin: 0.4rem 0 1rem; font-style: italic; }
.tag { display: inline-block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--bone-dim); padding: 0.35em 0.7em; font-weight: 700; }
@media (max-width: 760px) { .drops { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .drops { grid-template-columns: 1fr; } }

/* ---- about ---- */
.about__hero h1 { margin: 1rem 0 1.5rem; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); }
.about__grid .prose { font-size: 1.12rem; }
.creed { border: 1px solid var(--line); background: var(--ink); padding: clamp(1.5rem, 4vw, 2.6rem); }
.creed li { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.05rem, 2.4vw, 1.5rem); padding: 0.75rem 0; border-bottom: 1px solid var(--line); line-height: 1.1; }
.creed li:last-child { border-bottom: 0; }
.creed li .accent { color: var(--bone); }
@media (max-width: 760px) { .about__grid { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding-block: 3rem; margin-top: clamp(4rem, 9vw, 8rem); }
.foot__emblem { width: 64px; height: auto; opacity: 0.8; margin-bottom: 1.6rem; }
.foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.foot__brand { display: block; }
.foot__word { width: min(320px, 60vw); height: auto; }
.foot__nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot__nav a { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
.foot__nav a:hover { color: var(--bone); }
.foot__btm { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; color: var(--mute); font-size: 0.82rem; font-style: italic; }

/* ---- footer sparkline ---- */
.foot__spark { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.foot__spark svg { width: 186px; height: 36px; flex: none; }
.foot__spark svg rect { fill: var(--bone-dim); }
.foot__spark-cap { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (scripting: none) { .reveal { opacity: 1; transform: none; } } /* never hide content when JS can't run */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- hub index grid (home) ---- */
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hubcard { background: var(--black); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 0.55rem; min-height: 190px; transition: background 0.3s; }
.hubcard:hover { background: var(--ink); }
.hubcard__k { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.hubcard h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.02; }
.hubcard p { color: var(--bone-dim); font-size: 0.96rem; font-style: italic; }
.hubcard__go { margin-top: auto; color: var(--bone); font-size: 1.2rem; }
@media (max-width: 820px) { .hub { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hub { grid-template-columns: 1fr; } }

/* ---- sub-section heading + placeholder marker ---- */
.subhead { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); margin: clamp(2.5rem,5vw,3.5rem) 0 1.4rem; letter-spacing: 0.02em; }
.subhead:first-of-type { margin-top: 0; }
.ph-note { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); border: 1px dashed var(--line); padding: 0.4em 0.8em; display: inline-block; }
.card.ph, .hubcard.ph, .tl.ph { opacity: 0.7; }

/* ---- timeline (work / experience) ---- */
.timeline { border-top: 1px solid var(--line); }
.tl { display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.tl__when { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); padding-top: 0.3rem; }
.tl h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; margin-bottom: 0.35rem; }
.tl p { color: var(--bone-dim); }
@media (max-width: 620px) { .tl { grid-template-columns: 1fr; gap: 0.4rem; } }

/* ---- agency feature block ---- */
.agency { border: 1px solid var(--line); background:
  radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--bone) 8%, transparent), transparent 55%), var(--ink);
  padding: clamp(2rem, 5vw, 3.6rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.agency h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95; }
.agency p { color: var(--bone-dim); margin: 0.8rem 0 0; max-width: 48ch; font-style: italic; }
@media (max-width: 680px) { .agency { grid-template-columns: 1fr; } }

/* ---- receipts bar (home) ---- */
.receipts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.receipts__item { flex: 1 1 0; min-width: 140px; text-align: center; padding: clamp(1.4rem, 3vw, 2.2rem) 1rem; border-left: 1px solid var(--line); }
.receipts__item:first-child { border-left: 0; }
.receipts__n { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
.receipts__l { display: block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-top: 0.4rem; }
@media (max-width: 620px) {
  .receipts__item { flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--line); }
  .receipts__item:nth-child(-n+2) { border-top: 0; }
  .receipts__item:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* ---- stat bars (stats page) ---- */
.statbar { display: flex; flex-direction: column; gap: 0.6rem; }
.statbar__row { display: grid; grid-template-columns: 11rem 1fr 4.5rem; align-items: center; gap: 1rem; color: inherit; text-decoration: none; }
a.statbar__row--link:hover .statbar__lbl { color: var(--bone); }
a.statbar__row--link:hover .statbar__fill { background: var(--bone); }
.statbar__lbl { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.statbar__track { height: 10px; background: var(--ink); border: 1px solid var(--line); }
.statbar__fill { height: 100%; background: var(--bone-dim); transition: background 0.2s; }
.statbar__n { font-family: var(--display); font-weight: 700; font-size: 0.9rem; text-align: right; color: var(--bone); }
@media (max-width: 620px) {
  .statbar__row { grid-template-columns: 6.2rem 1fr 3.6rem; gap: 0.6rem; }
  .statbar__lbl { font-size: 0.68rem; }
}

/* ---- pull from the canon (home) ---- */
.canon { text-align: center; max-width: 820px; margin-inline: auto; }
.canon__quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.4; color: var(--bone); margin: 0 0 1.2rem; }
.canon__meta { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.8rem; min-height: 1.2em; }
.canon__meta a { color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.canon__meta a:hover { color: var(--bone); border-color: var(--bone); }
.share-quote {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute); background: none; border: 1px solid var(--line); cursor: pointer;
  padding: 0.5em 0.9em; margin-left: 0.6rem; transition: border-color 0.2s, color 0.2s;
}
.share-quote:hover { color: var(--bone); border-color: var(--bone); }

/* ---- on this day (dedicated page) ---- */
.otd-list { display: flex; flex-direction: column; gap: 0; }
.otd-card { display: flex; gap: clamp(1.2rem, 3vw, 2rem); padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.otd-card:first-child { padding-top: 0; }
.otd__thumb { width: 120px; height: 120px; object-fit: cover; flex: none; border: 1px solid var(--line); background: var(--ink); }
.otd__body { flex: 1; min-width: 0; }
.otd__year { font-family: var(--display); font-weight: 700; letter-spacing: 0.08em; color: var(--mute); font-size: 0.82rem; }
.otd__quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; color: var(--bone); margin: 0.5rem 0 0.9rem; white-space: pre-line; }
.otd__meta { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.9rem; }
.otd__meta a { color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.otd__meta a:hover { color: var(--bone); border-color: var(--bone); }
.otd-empty { color: var(--bone-dim); font-style: italic; font-family: var(--serif); font-size: 1.1rem; padding: 2rem 0; }
@media (max-width: 560px) { .otd-card { flex-direction: column; } .otd__thumb { width: 100%; height: 200px; } }

/* ---- five doors (home) ---- */
.doors { border-top: 1px solid var(--line); }
.door { display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.5rem, 3.2vw, 2.4rem) 0; border-bottom: 1px solid var(--line); transition: background 0.3s, padding-left 0.3s, color 0.3s; }
.door:hover { background: var(--bone); color: var(--black); padding-left: 1rem; }
.door:hover .door__k, .door:hover .door__d, .door:hover .door__go { color: var(--black); }
.door__k { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--mute); flex: none; width: 2.2rem; }
.door__t { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.8rem); flex: 1; line-height: 1.05; }
.door__d { font-family: var(--serif); font-style: italic; color: var(--bone-dim); flex: 1; max-width: 32ch; }
.door__go { font-size: 1.3rem; flex: none; }
@media (max-width: 760px) { .door { flex-wrap: wrap; row-gap: 0.5rem; } .door__d { max-width: none; order: 3; width: 100%; } }

/* ---- wiki portal strip (home) ---- */
.portals { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.portal { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); padding: 0.75em 1.2em; color: var(--bone-dim); transition: all 0.25s; }
.portal span { color: var(--mute); margin-left: 0.4em; }
.portal:hover { border-color: var(--bone); color: var(--bone); }

/* ---- site-wide search ---- */
.search-overlay {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: color-mix(in srgb, var(--black) 90%, transparent);
  backdrop-filter: blur(4px); padding: 8vh 1.2rem 2rem; overflow-y: auto;
}
.search-overlay.open { display: block; }
.search-box { max-width: 640px; margin: 0 auto; background: var(--black); border: 1px solid var(--bone); position: relative; }
.search-box input {
  width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 1.2rem 3rem 1.2rem 1.2rem; font-family: var(--serif); font-size: 1.15rem; color: var(--bone); outline: none;
}
.search-box input::placeholder { color: var(--mute); }
.search-close {
  position: absolute; top: 0.7rem; right: 0.7rem; background: none; border: 0; color: var(--mute);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.6rem;
}
.search-close:hover { color: var(--bone); }
.search-results { max-height: 60vh; overflow-y: auto; }
.search-result { display: block; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); text-decoration: none; }
.search-result:hover, .search-result.active { background: var(--ink); }
.search-result__k { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.search-result__t { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1rem; color: var(--bone); margin-top: 0.25rem; }
.search-result__d { font-family: var(--serif); font-style: italic; color: var(--bone-dim); font-size: 0.85rem; margin-top: 0.25rem; }
.search-empty, .search-hint { padding: 1.4rem 1.2rem; color: var(--mute); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.05em; }