/* ============================================================
   LUNCH — BASE SYSTEM
   Grid: 12 cols · 8px baseline · 78rem max-width
   Theme tokens (--font-*, --color-*) are set in theme.css.
   Do not put color or typeface values in this file.
   ============================================================ */

/* ─── Custom properties ──────────────────────────────────── */
:root {
  --baseline: 8px;
  --col-gap: var(--baseline); /* 1 baseline = 8px gutter */
  --outer-margin: max(16px, 4vw); /* min 2 baseline units    */
  --max-width: 78rem;

  /* Type scale — major third (1.25×) from 18px base */
  --t-caption: 14px;
  --t-body: 18px;
  --t-lead: 22px;
  --t-h3: 22px;
  --t-h2: 28px;
  --t-h1: 44px;
  --t-display: 72px;

  /* Line heights — all multiples of 8px baseline */
  --lh-caption: 24px;
  --lh-body: 32px;
  --lh-lead: 32px;
  --lh-h3: 32px;
  --lh-h2: 40px;
  --lh-h1: 56px;
  --lh-display: 80px;
}

/* ─── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ───────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings:
    "onum" 1,
    "liga" 1;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  widows: 2;
  orphans: 2;
}

/* ─── Site chrome ────────────────────────────────────────── */
.site-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--baseline) * 4) var(--outer-margin);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.site-mark {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: calc(var(--baseline) * 4);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  list-style: none;
}

.site-nav a {
  color: var(--color-ink);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.site-nav a:hover {
  opacity: 1;
}

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--baseline) * 8) var(--outer-margin)
    calc(var(--baseline) * 6);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: color-mix(in srgb, var(--color-ink) 50%, var(--color-bg));
}

/* ─── Post layout container ──────────────────────────────── */
.post-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--outer-margin);
  padding-block-end: calc(var(--baseline) * 12);
}

/* The header's post-body wrapper shouldn't add its own bottom padding —
   the meta block in the next post-body continues the rhythm directly. */
header.post-body {
  padding-block-end: 0;
}

/* Default: all grid children sit in the 6-column reading column */
.post-body > * {
  grid-column: 1 / 7;
}

/* ─── Post header ────────────────────────────────────────── */
.post-header {
  grid-column: 1 / -1;
  padding-block-start: calc(var(--baseline) * 8);
  margin-block-end: calc(var(--baseline) * 2);
}

.post-header h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-feature-settings:
    "dlig" 1,
    "liga" 1;
  max-width: 9fr; /* visual only — let content wrap naturally */
}

/* ─── Metadata block ─────────────────────────────────────── */
.meta {
  grid-column: 1 / 7;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: color-mix(in srgb, var(--color-ink) 55%, var(--color-bg));
  display: flex;
  flex-wrap: wrap;
  gap: var(--baseline) calc(var(--baseline) * 3);
  align-items: baseline;
  margin-block-end: calc(var(--baseline) * 6);
}

.meta time {
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
}

.meta .tag {
  background: color-mix(in srgb, var(--color-rule) 60%, var(--color-bg));
  padding: 1px 6px;
  border-radius: 2px;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.05em;
}

/* ─── Paragraphs ─────────────────────────────────────────── */
.post-body p {
  margin-block-start: calc(var(--baseline) * 4); /* 32px */
}

/* ─── Lead paragraph ─────────────────────────────────────── */
.post-body p.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  margin-block-start: 0;
}

/* If the lead is preceded by another paragraph (e.g. an editorial
   handoff line), restore normal paragraph spacing above it. */
.post-body p + p.lead {
  margin-block-start: calc(var(--baseline) * 4);
}

/* ─── Headings ───────────────────────────────────────────── */
/* Set in the sans — clean structural contrast against body serif */
.post-body h2,
.post-body h3,
.post-header h1 {
  font-family: var(--font-sans);
  font-feature-settings: normal;
}

.post-body h2 {
  grid-column: 1 / 7;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block-start: calc(var(--baseline) * 10);
  margin-block-end: calc(var(--baseline) * 2);
}

.post-body h3 {
  grid-column: 1 / 7;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  margin-block-start: calc(var(--baseline) * 6);
  margin-block-end: var(--baseline);
}

/* ─── Pull quote ─────────────────────────────────────────── */
.post-body blockquote.pull {
  grid-column: 1 / 9;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  font-style: italic;
  margin-block: calc(var(--baseline) * 7);
  padding-block: calc(var(--baseline) * 4);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* ─── Block quotation ────────────────────────────────────── */
.post-body blockquote {
  grid-column: 1 / 7;
  padding-inline-start: calc(var(--baseline) * 3);
  border-left: 2px solid var(--color-rule);
  font-style: italic;
  margin-block: calc(var(--baseline) * 4);
}

/* ─── Thematic break ─────────────────────────────────────── */
.post-body hr.break {
  grid-column: 1 / 7;
  border: none;
  margin-block: calc(var(--baseline) * 8);
  text-align: center;
  overflow: visible;
  height: var(--lh-body);
  line-height: var(--lh-body);
}

.post-body hr.break::after {
  content: "* * *";
  font-family: var(--font-serif);
  font-size: var(--t-caption);
  letter-spacing: 0.4em;
  color: var(--color-rule);
}

/* ─── Aside (inline tangent) ─────────────────────────────── */
.post-body aside.aside {
  grid-column: 1 / 7;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: color-mix(in srgb, var(--color-ink) 65%, var(--color-bg));
  margin-block: calc(var(--baseline) * 4);
  padding-inline-start: calc(var(--baseline) * 2);
  padding-block: calc(var(--baseline) * 2);
  border-left: 1px solid var(--color-rule);
}

/* ─── Chris note (editorial interjection, block) ─────────── */
.post-body aside.chris-note {
  grid-column: 1 / 7;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: color-mix(in srgb, var(--color-ink) 75%, var(--color-bg));
  margin-block: calc(var(--baseline) * 4);
  padding-inline-start: calc(var(--baseline) * 2);
  padding-block: calc(var(--baseline) * 1);
  border-left: 2px solid var(--color-accent);
}

.post-body aside.chris-note::before {
  content: "Chris";
  display: block;
  /* font-variant-caps uses OpenType smcp when the font has it and
     synthesizes small caps otherwise — survives font swap. */
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--color-accent);
  margin-block-end: calc(var(--baseline) * 0.5);
}

/* ─── Chris aside (editorial interjection, inline) ────────── */
.post-body .chris-aside {
  font-family: var(--font-sans);
  font-size: 0.9em;
  color: var(--color-accent);
}

/* ─── Claude note (editorial interjection, block) ─────────── */
.post-body aside.claude-note {
  grid-column: 1 / 7;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: color-mix(in srgb, var(--color-ink) 75%, var(--color-bg));
  margin-block: calc(var(--baseline) * 4);
  padding-inline-start: calc(var(--baseline) * 2);
  padding-block: calc(var(--baseline) * 1);
  border-left: 2px solid #4a6a7a;
}

.post-body aside.claude-note::before {
  content: "Claude's note";
  display: block;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: #4a6a7a;
  margin-block-end: calc(var(--baseline) * 0.5);
}

.post-body .claude-aside {
  font-family: var(--font-sans);
  font-size: 0.9em;
  color: #4a6a7a;
}

/* ─── Sidenote (right margin) ────────────────────────────── */
.post-body aside.sidenote {
  grid-column: 9 / 12;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(
    --lh-body
  ); /* match body baseline grid so lines stay locked */
  color: color-mix(in srgb, var(--color-ink) 60%, var(--color-bg));
  padding-inline-start: var(--baseline);
  border-left: 1px solid var(--color-rule);
  align-self: start;
  margin-block-start: calc(var(--baseline) * 4);
}

/* Pull the sidenote up alongside its preceding paragraph */
.post-body p + aside.sidenote {
  margin-block-start: calc(-1 * var(--lh-body));
}

/* ─── Figures ────────────────────────────────────────────── */
.post-body figure {
  grid-column: 1 / 7;
  margin-block: calc(var(--baseline) * 6);
}

.post-body figure.wide {
  grid-column: 1 / 9;
}

.post-body .video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.post-body .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.post-body figure.bleed {
  grid-column: 1 / -1;
  margin-inline: calc(-1 * var(--outer-margin));
}

.post-body figure img {
  width: 100%;
  height: auto;
  display: block;
}

.post-body figcaption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: color-mix(in srgb, var(--color-ink) 55%, var(--color-bg));
  margin-block-start: var(--baseline);
}

/* ─── Code ───────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-feature-settings: normal;
  background: color-mix(in srgb, var(--color-rule) 50%, var(--color-bg));
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

pre {
  grid-column: 1 / 9;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  background: color-mix(in srgb, var(--color-rule) 50%, var(--color-bg));
  padding: calc(var(--baseline) * 3);
  overflow-x: auto;
  margin-block: calc(var(--baseline) * 4);
  border-radius: 2px;
  tab-size: 4;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* ─── Inline typographic spans ───────────────────────────── */

/* True small caps — smcp converts lowercase, c2sc converts uppercase.
   Both needed since acronyms are written in caps.                    */
.sc {
  font-variant-caps: all-small-caps;
  font-feature-settings:
    "smcp" 1,
    "c2sc" 1;
  letter-spacing: 0.06em;
}

/* Part numbers / technical identifiers */
.part {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-feature-settings:
    "lnum" 1,
    "tnum" 1;
}

/* ─── Links ──────────────────────────────────────────────── */
a {
  color: var(--color-accent);
  text-decoration-color: color-mix(
    in srgb,
    var(--color-accent) 35%,
    transparent
  );
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.15s;
}

a:hover {
  text-decoration-color: var(--color-accent);
}

/* ─── Selection ──────────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* ─── Lists ──────────────────────────────────────────────── */
.post-body ul,
.post-body ol {
  grid-column: 1 / 7;
  padding-inline-start: 1.5em;
  margin-block: calc(var(--baseline) * 3);
}

.post-body li {
  margin-block-start: var(--baseline);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 8-col wide elements compress to full */
  .post-body blockquote.pull,
  .post-body figure.wide,
  .post-body pre {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  /* Collapse all columns to full width */
  .post-body > *,
  .post-body h2,
  .post-body h3,
  .post-body blockquote,
  .post-body blockquote.pull,
  .post-body figure,
  .post-body figure.wide,
  .post-body aside.aside,
  .post-body aside.chris-note,
  .post-body aside.claude-note,
  .post-body ul,
  .post-body ol,
  .post-body pre,
  .post-body hr.break,
  .meta {
    grid-column: 1 / -1;
  }

  /* Sidenotes become inline asides on narrow viewports */
  .post-body aside.sidenote {
    grid-column: 1 / -1;
    grid-row: auto;
    border-left: none;
    border-top: 1px solid var(--color-rule);
    padding-inline-start: 0;
    padding-block-start: calc(var(--baseline) * 2);
    margin-block: calc(var(--baseline) * 3);
  }

  .post-body p + aside.sidenote {
    margin-block-start: calc(var(--baseline) * 3);
  }
}

@media (max-width: 480px) {
  :root {
    /* ~5% horizontal inset — applies uniformly to header, footer, and
       post body since they all reference --outer-margin. */
    --outer-margin: 5vw;

    /* Smaller body type on mobile → more words per line, less hyphenation.
       Kept on the 8px baseline grid. */
    --t-body: 16px;
    --lh-body: 24px;
    --t-lead: 19px;
    --lh-lead: 28px;
    --t-h1: 34px;
    --lh-h1: 40px;
    --t-h2: 24px;
    --lh-h2: 32px;
  }

  /* Turn off auto-hyphenation on narrow screens — at this width it produces
     too many broken words. Let the browser wrap whole words instead. */
  body {
    hyphens: manual;
    -webkit-hyphens: manual;
  }

  .post-body blockquote.pull {
    font-size: var(--t-lead);
    line-height: var(--lh-lead);
  }
}