/* ═══════════════════════════════════════════════════════════════════════════
   v49 · The reading register.

   The marketing pages are a dark scroll made of rounded panels. Field Notes is
   a different activity -- reading -- so it gets its own register, the way the
   proposal decks flip to a light ground when the slide is about the client's
   business. Three things carry the switch:

   1. Paper. A cool green-grey ground (#EAEEE8), distinct from both site
      themes (Void Black, and the white of light mode), so the change is
      visible whichever theme the visitor arrived in. Visitors who have
      explicitly chosen dark keep a dark reading ground (#0D110E).
   2. No panels. Content sits on the page and is structured by rules, like a
      publication, instead of by bevelled boxes.
   3. A section bar under the site nav that names where you are and carries
      the topics, on the index and on every article.

   Loaded on every page with <html data-register="reading">, after the shared
   sheet. Selectors carry [data-register] so nothing leaks to other pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root[data-register='reading'][data-theme='light'] {
  --black: #EAEEE8;
  --bg-rgb: 234, 238, 232;
  --surface: #E0E6DE;
  --surface-lift: #D8DFD5;
  --white: #070A08;
  --text-rgb: 7, 10, 8;
  --dim: rgba(7, 10, 8, .78);
  --border: rgba(7, 10, 8, .13);
  --border-bright: rgba(7, 10, 8, .2);
  --nav-bg: rgba(234, 238, 232, .92);
  --ghost: rgba(7, 10, 8, .03);
  --section-bg: transparent;
  /* Re-measured on paper: label green 5.3:1, display green 4.3:1. */
  --accent-text: #00804A;
  --accent-text-sm: #00703F;
  --accent-glyph: #00A259;
  --fn-plate: #E0E6DE;
  --fn-ink-rule: #070A08;
  --fn-grid: rgba(7, 10, 8, .06);
}
:root[data-register='reading'][data-theme='dark'] {
  --black: #0D110E;
  --bg-rgb: 13, 17, 14;
  --surface: #151A16;
  --surface-lift: #1A201B;
  --nav-bg: rgba(13, 17, 14, .9);
  --section-bg: transparent;
  --dim: rgba(255, 255, 255, .78);
  --fn-plate: #151A16;
  --fn-ink-rule: rgba(255, 255, 255, .86);
  --fn-grid: rgba(255, 255, 255, .05);
}

:root[data-register='reading'] body::before { opacity: .02; } /* grain: barely there on paper */
/* On these pages the site nav is in normal flow (v28), so main needs no
   offset; the section bar becomes the sticky header once the nav scrolls away. */
:root[data-register='reading'] main { padding-top: 0 !important; }

/* The header link list hands over to the menu below 1180px, as on the
   homepage (articles never carried this rule). */
@media (max-width: 1179px) { :root[data-register='reading'] .nav-links { display: none !important; } }
@media (min-width: 1180px) and (max-width: 1320px) {
  :root[data-register='reading'] .nav-links { gap: 15px; }
  :root[data-register='reading'] .nav-links a { font-size: 11px; letter-spacing: .02em; } }
:root[data-register='reading'] .nav-links a, :root[data-register='reading'] .nav-cta { white-space: nowrap; }

/* ── 2 · Section bar ────────────────────────────────────────────────────── */
.fn-bar {
  position: relative; z-index: 5;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
  background: var(--black);
  border-bottom: 1px solid var(--border-bright);
}
@media (min-width: 761px) {
  .fn-bar { position: sticky; top: 0; }
}
.fn-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  min-height: 56px;
}
.fn-bar-name {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--white);
}
/* A small ruled-page mark: three lines and a margin rule. */
.fn-bar-name::before {
  content: ''; width: 16px; height: 18px; flex: 0 0 16px;
  border-left: 2px solid var(--accent-glyph, var(--green));
  background:
    linear-gradient(var(--white), var(--white)) 4px 3px / 12px 1.5px no-repeat,
    linear-gradient(var(--white), var(--white)) 4px 8.25px / 12px 1.5px no-repeat,
    linear-gradient(var(--white), var(--white)) 4px 13.5px / 8px 1.5px no-repeat;
}
.fn-bar-topics {
  display: flex; gap: 2px; min-width: 0; flex: 1;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--border-bright); padding-left: 12px;
}
.fn-bar-topics::-webkit-scrollbar { display: none; }
.fn-bar .fn-chip {
  min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--dim);
}
.fn-bar .fn-chip:hover { color: var(--white); background: var(--ghost); }
.fn-bar .fn-chip[aria-pressed='true'],
.fn-bar .fn-chip[aria-current] { color: var(--white); background: transparent; box-shadow: inset 0 -2px 0 var(--fn-ink-rule); border-radius: 0; }
.fn-bar .fn-chip[aria-pressed='true'] .fn-chip-n { color: var(--white); }
@media (max-width: 760px) {
  .fn-bar-inner { gap: 12px; min-height: 52px; }
  .fn-bar-topics { margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
  }
@media (max-width: 560px) {
  .fn-bar { margin: 0 -14px; padding: 0 14px; }
  .fn-bar-topics { margin-right: -14px; padding-right: 14px; }
}

/* ── 3 · Bylines ────────────────────────────────────────────────────────── */
.fn-byline {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--dim);
}
.fn-byline img {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid var(--accent-glyph, var(--green));
}
.fn-byline a { color: var(--white); font-weight: 800; }
.fn-byline a:hover { color: var(--accent-text); }

/* ── 4 · The highlight nib, on paper ───────────────────────────────────── */
:root[data-register='reading'][data-theme='light'] .hero-copy span,
:root[data-register='reading'][data-theme='light'] .quiet-cta span {
  color: var(--white) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2 L200 4.8 L200 8.6 L0 8.6 Z' fill='%2300EF82'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% .32em; padding-bottom: .13em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── 5 · Panels become pages ───────────────────────────────────────────── */
:root[data-register='reading'] .section {
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important;
}
:root[data-register='reading'] .section::before { content: none; }
:root[data-register='reading'] .quiet-cta {
  margin-top: 56px;
  padding: 28px 0 0 !important;
  border: 0 !important; border-top: 2px solid var(--fn-ink-rule) !important;
  border-radius: 0 !important;
}

/* ── 6 · Articles in the register ──────────────────────────────────────── */
:root[data-register='reading'] .article { padding-top: clamp(28px, 4vw, 56px); }
:root[data-register='reading'] .article .kicker { display: none; } /* the section bar now says where you are */
:root[data-register='reading'] .article .dek { color: var(--dim) !important; }
:root[data-register='reading'] .article .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
}
:root[data-register='reading'] .article .meta > * + *::before {
  content: ''; display: inline-block; width: 1px; height: .95em; margin: 0 10px;
  vertical-align: -.12em; background: var(--border-bright);
}
:root[data-register='reading'] .article .fn-byline { margin: 18px 0 0; }
:root[data-register='reading'] .article .hero-img img,
:root[data-register='reading'] .article .hero-img picture { border-radius: 12px; }
:root[data-register='reading'] .article .hero-img {
  border: 1px solid var(--border-bright); border-radius: 12px; overflow: hidden;
  background: var(--fn-plate);
}
:root[data-register='reading'] .article .body p { font-size: 18px; line-height: 1.72; }
:root[data-register='reading'] .article .body h2 { margin-top: 1.6em; }
:root[data-register='reading'] .article .source-box,
:root[data-register='reading'] .article .nav-card {
  border: 0 !important; border-top: 1px solid var(--border-bright) !important;
  border-radius: 0 !important; background: transparent !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
:root[data-register='reading'] .article .source-box { margin-top: 12px; }
:root[data-register='reading'] .article .article-nav { gap: 0 32px; }
:root[data-register='reading'] .article .nav-card { color: var(--fn-meta, var(--dim)) !important; }
:root[data-register='reading'] .article .nav-card span { color: var(--accent-text-sm) !important; }
:root[data-register='reading'] .article .nav-card strong { color: var(--white) !important; }
:root[data-register='reading'] .article pre,
:root[data-register="reading"] .article .example,
:root[data-register='reading'] .article .callout {
  background: var(--surface) !important; border-color: var(--border) !important; color: var(--white) !important;
}
:root[data-register='reading'][data-theme='light'] .listen-box .source-links a {
  border-color: var(--border-bright) !important; background: transparent !important;
}
@media (max-width: 560px) {
  :root[data-register='reading'] .article .body p { font-size: 17px; line-height: 1.68; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-bar .fn-chip { transition: none; }
}
.fn-bar .fn-chip { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit; }
.fn-bar .fn-chip-n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--fn-meta, var(--dim)); font-variant-numeric: tabular-nums; }
.fn-bar .fn-chip:focus-visible, .fn-bar-name:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
:root[data-register='reading'] .article .fn-byline { margin-bottom: 30px; }
/* The bar sits between the nav and main, so it is full-bleed by itself. */
.fn-bar { margin: 0 !important; }
.fn-bar-topics { margin-right: 0 !important; }
@media (max-width: 760px) { .fn-bar-topics { padding-right: 0; } }
@media (max-width: 760px) {
  :root[data-register='reading'] .article .meta { gap: 4px 14px; }
  :root[data-register='reading'] .article .meta > * + *::before { content: none; }
}