/* ─────────────────────────────────────────────────────────
   site.css — Gist Editorial (Option D), shared design system

   Linked from every page. Owns the design tokens, font setup,
   paper grain overlay, base elements, and every component class
   that appears on more than one page.

   Page-specific styles live in their own files (case-study.css
   for the four project deep-dives, etc.) and are linked AFTER
   this file so they can override.

   Old monospace styles.css is left intact for now — resume.html
   still uses it until Phase 4.
   ───────────────────────────────────────────────────────── */

:root {
  /* Palette — Gist dark-mode, inverted from paper-on-ink */
  --bg: #0f1013;
  --surface: #16171c;
  --surface-alt: #1c1d24;
  --ink: #e8e4dc;
  --ink-strong: #f5f2ec;
  --muted: #ccc9c6;
  --border: #2a2b34;
  --border-strong: #3a3c48;

  /* Semantic tag accents */
  --tag-amber: #f1b86a;
  --tag-green: #6acb6a;
  --tag-blue: #6a9ef1;
  --tag-red: #e87878;

  /* Type stacks */
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── reset ─────────────────────────────────────────────── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── base elements ─────────────────────────────────────── */

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  padding: 64px 24px 96px;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — barely perceptible film over the whole page.
   Reinforces the print-artifact identity from the Gist design system. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.6;
  mix-blend-mode: overlay;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

p {
  color: var(--ink);
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition:
    color 0.12s ease-out,
    border-color 0.12s ease-out;
}

a:hover {
  color: var(--ink-strong);
  border-bottom-color: var(--ink-strong);
}

ul,
ol {
  list-style: none;
}

/* ── page container ────────────────────────────────────── */

.page {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* ── header: masthead + rhythms + nav ──────────────────── */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-strong);
}

.masthead .title {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  border-bottom: none;
}

.masthead .title:hover {
  color: var(--ink-strong);
}

.masthead .issue {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rhythms {
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.rhythms span:not(:last-child)::after {
  content: " ·";
  margin-left: 16px;
  color: var(--border-strong);
}

nav.primary {
  margin-top: 24px;
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  justify-content: flex-end;
}

nav.primary a {
  color: var(--muted);
  border-bottom: none;
}

nav.primary a:hover {
  color: var(--ink-strong);
}

@media (max-width: 600px) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── hero ──────────────────────────────────────────────── */

.hero {
  margin-top: 64px;
}

.hero .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tag-amber);
  margin-bottom: 16px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  font-weight: 400;
  margin-bottom: 32px;
}

.hero .lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  max-width: 60ch;
  color: var(--ink);
}

.hero .personality {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 52px;
  }
}

/* ── section heads ─────────────────────────────────────── */

.section-head {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}

.section-head .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

/* ── list rows (Selected Work, Writing, Recorded, etc.) ── */

.list {
  list-style: none;
  margin-top: 16px;
}

.list > li {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease-out;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.list > li:hover {
  background: var(--surface);
}

.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.row-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tag.current {
  color: var(--tag-green);
  border-color: var(--tag-green);
}
.tag.live {
  color: var(--tag-amber);
  border-color: var(--tag-amber);
}
.tag.archive {
  color: var(--tag-blue);
  border-color: var(--tag-blue);
}
.tag.press {
  color: var(--tag-red);
  border-color: var(--tag-red);
}
.tag.read {
  color: var(--tag-green);
  border-color: var(--tag-green);
}
.tag.watch {
  color: var(--tag-amber);
  border-color: var(--tag-amber);
}
.tag.draft {
  color: var(--tag-amber);
  border-color: var(--tag-amber);
}

/* Tech-stack tag categories for case study hero strips.
   Same palette, different semantic axis (technology vs. status). */
.tag.lang {
  color: var(--tag-green);
  border-color: var(--tag-green);
}
.tag.infra {
  color: var(--tag-blue);
  border-color: var(--tag-blue);
}
.tag.ai {
  color: var(--tag-amber);
  border-color: var(--tag-amber);
}
.tag.role {
  color: var(--tag-red);
  border-color: var(--tag-red);
}

/* Tag strip — horizontal row of tags, used below a hero lede to
   signal stack/domain at a scan. */
.tag-strip {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tagline {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 58ch;
}

.links {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.links a {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.links a:hover {
  color: var(--ink-strong);
  border-bottom-color: var(--ink-strong);
}

.links a:not(:last-child)::after {
  content: " · ";
  margin: 0 0.3ch;
  color: var(--border-strong);
}

.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* "See more →" link below a list. Right-aligned mono kicker. */
.see-more {
  margin-top: 16px;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.see-more a {
  color: var(--muted);
  border-bottom: none;
}

.see-more a:hover {
  color: var(--ink-strong);
}

@media (max-width: 600px) {
  .section-head h2 {
    font-size: 28px;
  }
  .row-title {
    font-size: 22px;
  }
  .row-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── imprint + press strip ─────────────────────────────────
   .imprint     — homepage hero outro: "AS SEEN IN" label + inline
                  publication list, with a thin rule above.
   .press-strip — italic serif middle-dot publication list. Used
                  standalone (Waeve press section) and inline inside
                  .imprint (homepage). Add `.inline` to flow inline.
   ───────────────────────────────────────────────────────── */

.imprint {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.imprint .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tag-red);
  margin-right: 10px;
}

.press-strip {
  list-style: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.7;
}

.press-strip.inline {
  display: inline;
}

.press-strip li {
  display: inline;
}

.press-strip li:not(:last-child)::after {
  content: " · ";
  margin: 0 0.3ch;
  color: var(--border-strong);
}

.press-strip a {
  border-bottom-color: var(--border);
}

/* ── footer: reach links + production stamp ────────────── */

footer {
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}

footer .reach {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  font-family: var(--sans);
  font-size: 15px;
  flex-wrap: wrap;
}

footer .reach a {
  color: var(--ink);
  border-bottom-color: var(--border-strong);
}

footer .reach a:hover {
  color: var(--ink-strong);
  border-bottom-color: var(--ink-strong);
}

footer .stamp {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 16px;
  flex-wrap: wrap;
}

/* ── numbered notes list (essays, case studies, anywhere) ─── */

.notes {
  list-style: none;
  margin-top: 8px;
  counter-reset: notes-counter;
}

.notes > li {
  counter-increment: notes-counter;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  font-size: 16px;
  line-height: 1.6;
}

.notes > li:last-child {
  border-bottom: none;
}

.notes > li::before {
  content: counter(notes-counter, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  align-self: start;
  padding-top: 4px;
}

.notes strong {
  color: var(--ink-strong);
  font-weight: 600;
}

.notes p {
  margin: 0;
}

.notes p + p {
  margin-top: 8px;
}

/* ── draft notice + back link (essay stub pages, etc.) ────── */

.draft-notice {
  margin-top: 32px;
  padding: 14px 18px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tag-amber);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--muted);
}

.back-link {
  margin-top: 64px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.back-link a {
  color: var(--muted);
  border-bottom: none;
}

.back-link a:hover {
  color: var(--ink-strong);
}

/* ── print: invert palette to ink-on-paper, hide chrome ──── */

@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f5f3ee;
    --ink: #1a1a2e;
    --ink-strong: #0d0d1a;
    --muted: #5a5450;
    --border: #c8c2b8;
    --border-strong: #8a8580;
  }

  body {
    padding: 0;
    font-size: 11pt;
  }

  /* No paper grain on actual paper. */
  body::before {
    display: none;
  }

  .page {
    max-width: none;
  }

  /* Hide site chrome that doesn't translate to print. */
  nav.primary,
  footer .reach {
    display: none;
  }

  .hero {
    margin-top: 24px;
  }

  .hero h1 {
    font-size: 32pt;
  }

  /* Kicker amber doesn't print well — flatten to ink. */
  .hero .kicker,
  .section-head .kicker {
    color: var(--ink-strong);
  }

  /* Tighter section spacing and avoid orphan section heads. */
  .section-head {
    margin-top: 32px;
    page-break-after: avoid;
  }

  /* Keep entries / rows from breaking across pages. */
  .entry,
  .list > li,
  .decisions > li,
  .notes > li {
    page-break-inside: avoid;
  }

  /* Links print as ink-colored, underlined. */
  a {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  /* Tags print as outlined ink, no color fills. */
  .tag {
    color: var(--ink);
    border-color: var(--ink);
  }

  /* Code / path chips: thin border, transparent fill. */
  code,
  .path {
    background: transparent;
    border-color: var(--muted);
    color: var(--ink);
  }
}