/* footnote.sh - marketing site. Dark by default, light via prefers-color-scheme.
   Palette and type from the f[no] brand study: warm ink-black ground, aged
   amber on the note, system faces only (no webfont request, no font payload). */

:root {
  color-scheme: dark light;
  /* Dark = ink, where the tool actually lives. */
  --bg: #17130f;
  --bg-band: #201b15;
  --surface: #29221b;
  --border: rgba(243, 236, 224, 0.10);
  --fg: #f3ece0;
  --muted: #ab9f8d;
  --faint: #6f6557;
  --accent: #d6a75f;
  --accent-ink: #e4c68f;
  --accent-soft: rgba(214, 167, 95, 0.14);
  --glow: rgba(214, 167, 95, 0.13);
  --code: #a3bf8a;
  /* Three faces, three jobs. --serif: the book face the mark is set in (the
     body text a footnote hangs off). --sans: reading, headings and prose.
     --mono: every command and code run. All system stacks. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --maxw: 64rem;
}

@media (prefers-color-scheme: light) {
  :root {
    /* Light = the printed page. */
    --bg: #efe9dc;
    --bg-band: #f6f1e7;
    --surface: #fcf8f0;
    --border: rgba(33, 28, 21, 0.12);
    --fg: #211c15;
    --muted: #6a6153;
    /* Deeper than the study's paper amber (#a6742a). That value is 3.37:1 on
       this ground - fine for the display mark it was drawn for, but --accent
       here also colors links, buttons and step labels at body size, which need
       4.5:1. #8b6123 clears it (4.53) and keeps the aged-amber character. */
    --accent: #8b6123;
    --accent-ink: #75511c;
    /* Likewise a shade off #9c9282, to clear 3:1 while staying clearly lighter
       than --muted so the brackets still read as punctuation, not letters. */
    --faint: #908472;
    --accent-soft: rgba(166, 116, 42, 0.12);
    --glow: rgba(166, 116, 42, 0.10);
    --code: #4a6b35;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

/* Film grain: the "foxed page" texture, fixed so it never repaints on scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Headings speak in the book serif (the printed page); prose stays sans. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

code { font-family: var(--mono); font-size: 0.92em; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  /* --bg inverts with the theme, so the label stays legible on the amber chip
     in both: ink on light amber (dark), paper on deep amber (light). */
  color: var(--bg);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- header --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}
/* The mark. `f` is the body a footnote hangs off, set in the book serif; `no`
   IS the note, carrying the one accent; the brackets are the citation frame.
   Defined once in em so every context (nav, footer, tagline) gets the same
   proportions and only sets a font-size. */
.wordmark, .wordmark-sm {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.wordmark { font-size: 1.55rem; }
/* Lifted by a manual offset rather than `vertical-align: super`, the same trick
   the brand study uses on its display mark. super would shrink the note to ~9px
   at nav scale (unreadable) and would grow the line box, shifting the header's
   rhythm. -0.34em seats the note's top at the f's ascender. */
.note {
  color: var(--accent);
  font-size: 0.78em;
  position: relative;
  top: -0.34em;
  /* Optical, not decorative: the f's hook overhangs its advance width by 2.46px
     and the bracket's left side bearing is -1.97px, so at 0 the two glyphs
     collide by ~4.4px. 0.2em clears the hook. Tuned by eye, not to a positive
     bounding-box gap - the boxes still nominally overlap by half a pixel, but
     the bracket is only a thin stem at the height the hook reaches, and going
     wider detaches the note from the f. */
  margin-left: 0.2em;
}
/* The brackets are punctuation, not letters. At full size in Iowan they are
   1.8x the height of the lowercase note and sink 3.9px below its baseline,
   which made the faint frame the loudest shape in the mark. Scaled down and
   nudged up so they close around the note's x-height band instead. */
.note .brk {
  color: var(--faint);
  font-weight: 400;
  font-size: 0.76em;
  vertical-align: 0.09em;
}
.site-header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-header nav a { color: var(--muted); font-size: 0.95rem; }
.site-header nav a:hover { color: var(--fg); }

/* --- hero --- */
.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
}
/* Amber glow behind the hero: the lamp the page is read under. */
.hero::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  width: min(70vw, 620px);
  height: min(46vw, 380px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--glow), transparent 68%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.tagline {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.lede {
  max-width: 38rem;
  margin: 0 auto 2rem;
  color: var(--muted);
  font-size: 1.1rem;
}

.install {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
}
.install code {
  padding: 0.85rem 1.1rem;
  color: var(--code);
  font-size: 1rem;
  white-space: nowrap;
  overflow-x: auto;
}
.install code::before { content: "$ "; color: var(--muted); }
.install button {
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 1.1rem;
  cursor: pointer;
}
.install button:hover { background: var(--accent-soft); }
.install button[data-copied="true"] { color: var(--code); }

.install--inline { display: flex; }
.install--inline code { white-space: pre-wrap; word-break: break-word; }

.install-note {
  margin: 1rem auto 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.install-note code, .lede code { color: var(--accent-ink); }

/* --- bands --- */
.band {
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--border);
}
.band:nth-of-type(even) { background: var(--bg-band); }

/* hero terminal: the install + first command as a real terminal window.
   Always dark (canonical), so it reads as a window on both the paper and the
   ink page. Warm ink-black + amber phosphor, per the brand study's terminal
   reduction. Real commands + honest comments only, no fabricated output. */
.term {
  max-width: 39rem;
  margin: 0 auto;
  text-align: left;
  background: #0d0b09;
  /* Stronger than the study's 0.06 hairline: there the terminal sat on a raised
     card, here it sits straight on the ink ground and the edge has to carry the
     "this is a window" read on its own. */
  border: 1px solid rgba(243, 236, 224, 0.14);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(180deg, #16120d, #0f0c09);
  border-bottom: 1px solid rgba(243, 236, 224, 0.10);
}
.term-dots { display: inline-flex; gap: 0.4rem; }
.term-dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3229; }
.term-title { font-family: var(--mono); font-size: 0.8rem; color: #6f6557; margin-left: 0.3rem; }
.term-copy {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  color: #d6a75f;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.22rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}
.term-copy:hover { background: rgba(214, 167, 95, 0.14); }
.term-copy[data-copied="true"] { color: #a3bf8a; border-color: rgba(163, 191, 138, 0.4); }
.term-body {
  margin: 0;
  padding: 1.15rem 1.3rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.75;
  color: #f3ece0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.term-body code { font-family: inherit; color: #f3ece0; }
.term-body .p { color: #574f43; }
.term-body .c { color: #d6a75f; }
.term-body .s { color: #c9bda6; }
/* The comment lines carry the actual pitch copy, so they clear 4.5:1 rather than
   sitting at the study's decorative dim (#6f6557 is only 3.44:1 here). */
.term-body .m { color: #847968; }
.term-cur {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  background: #d6a75f;
  vertical-align: text-bottom;
  animation: term-blink 1.1s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term-cur { animation: none; } }
@media (max-width: 480px) { .term-body { font-size: 0.82rem; } }
.band > h2 {
  max-width: var(--maxw);
  margin: 0 auto 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.01em;
}
.band-lede {
  max-width: var(--maxw);
  margin: 0 auto 2rem;
  color: var(--muted);
}
.band-lede code { color: var(--accent-ink); }

/* pipeline cards */
.cards {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  counter-reset: step;
}
.cards li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
}
.cards .step {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.1rem;
}
.cards .step::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--muted);
}
.cards .cmd {
  display: block;
  color: var(--accent-ink);
  font-size: 0.82rem;
  margin: 0 0 0.55rem;
}
.cards p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* surfaces */
.two-col {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}
/* Four peer cards want a 2x2, not the 3+1 orphan auto-fit gives at 18rem. A
   22rem floor makes three columns overflow --maxw, so it settles at two, and
   still collapses to one on a phone. */
.two-col--pairs { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.two-col article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}
.two-col h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.two-col > article > p { color: var(--muted); margin: 0 0 1rem; }
.verbs { list-style: none; margin: 0; padding: 0; }
.verbs li { padding: 0.4rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.95rem; }
.verbs li:first-child { border-top: 0; }
.verbs code { color: var(--accent-ink); margin-right: 0.4rem; }

/* quickstart */
.quick {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 1.4rem;
}
.quick > li { margin-bottom: 1.75rem; }
.quick h3 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.quick p { color: var(--muted); margin: 0.6rem 0 0; }

/* --- footer --- */
.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.wordmark-sm { font-size: 1.45rem; margin: 0 0 0.35rem; }
.site-footer nav { display: flex; gap: 1.25rem; }
.site-footer nav a { color: var(--muted); font-size: 0.95rem; }
.site-footer nav a:hover { color: var(--fg); }
.fine { margin: 0; color: var(--muted); font-size: 0.85rem; }
.fine code { color: var(--accent-ink); }

/* quickstart: collapsed alternate-install channels (curl stays the primary) */
.alt-install { margin-top: 0.85rem; }
.alt-install > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--accent);
  font-size: 0.9rem;
}
.alt-install > summary:hover { text-decoration: underline; }
.alt-install-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.1rem;
}
.alt-install-h {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.alt-install ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.alt-install li { font-size: 0.9rem; color: var(--muted); }
.alt-install li code { color: var(--code); }
.alt-install li span { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted); }