/* Collector Recon site (Site D). Colours come from the tokens below only, so the theme can flip.
   Light is manila, dark is midnight; the visitor's system setting picks, midnight when there is none. */
:root {
  --surface: #121a2e; --surface-raised: #1b2540; --surface-sunken: #0b1020;
  --ink: #f1ead9; --ink-muted: #a9b0c2; --rule: #2c3858; --accent: #f2d7a0; --btn-ink: #121a2e;
  --inv-surface: #e9e1cf; --inv-raised: #f3eee2; --inv-ink: #1d1f1a; --inv-muted: #5b5a4c;
  --inv-rule: #c3b89c; --inv-accent: #7a5719; --inv-accent-ink: #f3eee2;
  --up: #b8eec4; --down: #f2a08a;
  /* Fixed in both themes: foil, ink on foil, and the midnight card. */
  --foil: conic-gradient(from 210deg, #f2d7a0, #f6b8c8, #c9b6f2, #9fd8e8, #b8eec4, #f2e4a0, #f2d7a0);
  --foil-seal: conic-gradient(from 30deg, #f2d7a0, #f6b8c8, #c9b6f2, #9fd8e8, #b8eec4, #f2e4a0, #f2d7a0);
  --foil-edge: 0 0 0 1px rgba(18, 26, 46, .35);
  --on-foil: #121a2e;
  --card: #121a2e; --card-ink: #f1ead9; --card-muted: #a9b0c2; --card-rule: #2c3858; --card-price: #f2d7a0; --card-up: #b8eec4; --card-down: #f2a08a;
  --f-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-serif: Fraunces, Georgia, serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --surface: #e9e1cf; --surface-raised: #f3eee2; --surface-sunken: #ddd3bd;
    --ink: #1d1f1a; --ink-muted: #5b5a4c; --rule: #c3b89c; --accent: #7a5719; --btn-ink: #f3eee2;
    --inv-surface: #121a2e; --inv-raised: #1b2540; --inv-ink: #f1ead9; --inv-muted: #a9b0c2;
    --inv-rule: #2c3858; --inv-accent: #f2d7a0; --inv-accent-ink: #121a2e;
    --up: #3d6b2f; --down: #9e2f1c;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--f-mono); font-size: 15px; line-height: 24px; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.band a:focus-visible, .band button:focus-visible, .band input:focus-visible { box-shadow: 0 0 0 2px var(--inv-surface), 0 0 0 4px var(--inv-accent); }
input::placeholder { color: currentColor; opacity: .7; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cw { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 480px) { .cw { padding-left: 16px; padding-right: 16px; } }

/* Type */
.t-label { font-family: var(--f-mono); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.t-data { font-size: 13px; line-height: 20px; font-weight: 500; }
.t-title { font-family: var(--f-head); font-size: 26px; line-height: 28px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.t-head { font-family: var(--f-head); font-weight: 800; letter-spacing: .005em; text-transform: uppercase; }
.t-serif { font-family: var(--f-serif); font-variation-settings: 'SOFT' 100; }
.muted { color: var(--ink-muted); }
.accent { color: var(--accent); }
.plain { color: inherit; text-decoration: none; }
.plain:hover { color: var(--accent); }

/* Header */
.site-head { background: var(--surface-raised); border-bottom: 1px solid var(--rule); }
.site-head nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand svg { flex: none; border-radius: 50%; background: var(--foil-seal); transform: rotate(-10deg); }
.brand span { font-size: 24px; line-height: 26px; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.nav-links a.plain { display: inline-flex; align-items: center; min-height: 44px; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.btn-sub { display: inline-flex; align-items: center; min-height: 44px; background: var(--accent); color: var(--btn-ink); text-decoration: none; padding: 15px 18px; border-radius: 4px; }
.btn-sub:hover { color: var(--btn-ink); filter: brightness(1.08); }

/* Section heading rows */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.sec-head h2 { margin: 0; }
.sec-head a { display: inline-block; padding: 15px 0 7px; }

/* Signup form */
.signup { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.signup .row { display: flex; flex-wrap: wrap; gap: 8px; }
.signup input[type=email] { flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--rule); background: var(--surface-raised); color: var(--ink); font: inherit; }
.signup button { flex: 0 0 auto; height: 52px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--accent); color: var(--btn-ink); font-size: 20px; letter-spacing: .06em; cursor: pointer; }
.signup button:disabled { opacity: .7; cursor: wait; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .err { color: var(--down); }
.done { max-width: 520px; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px dashed var(--rule); border-radius: 4px; }
.done .follow { align-self: flex-start; display: inline-block; padding: 12px 0 0; }
@media (max-width: 420px) { .signup button { flex: 1 1 100%; } }

/* Home hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; scroll-margin-top: 16px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bar { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.hero h1 { margin: 0; font-size: clamp(48px, 7vw, 76px); line-height: .92; text-wrap: balance; }
.hero p { margin: 0; max-width: 46ch; text-wrap: pretty; }
.hero-card { position: relative; justify-self: center; width: 100%; max-width: 460px; padding-top: 28px; }
.foil { padding: 10px; border-radius: 16px; background: var(--foil); box-shadow: var(--foil-edge); }
.mid-card { background: var(--card); color: var(--card-ink); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mid-card .bar { border-bottom-color: var(--card-ink); }
.hero-card .bar span:last-child { margin-right: 64px; }
.mid-card .muted { color: var(--card-muted); }
.mid-card h2 { margin: 0; font-size: 36px; line-height: 36px; max-width: 80%; text-wrap: balance; }
.mid-card h2 a { color: inherit; text-decoration: none; }
.mid-card dl { margin: 0; display: flex; flex-direction: column; }
.mid-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--card-rule); }
.mid-card dl > div:last-child { border-bottom: 0; }
.mid-card dt { color: var(--card-muted); flex: none; }
.mid-card dd { margin: 0; text-align: right; }
.mid-card .read { color: var(--card-price); align-self: flex-start; padding: 12px 0; }
.mid-card .read:hover { color: var(--card-ink); }
.mid-card a:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--card-price); }
.seal { position: absolute; top: 0; right: -12px; border-radius: 50%; background: var(--foil-seal); box-shadow: var(--foil-edge); transform: rotate(-10deg); }
@media (max-width: 520px) { .hero-card .bar { flex-direction: column; gap: 4px; } .hero-card .bar span:last-child { margin-right: 0; } .seal { right: -4px; width: 84px; height: 84px; } .mid-card h2 { font-size: 30px; line-height: 31px; } }

/* List rows */
.rows-sec { padding-top: 16px; padding-bottom: 64px; }
.row-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; padding: 22px 0; border-bottom: 1px dashed var(--rule); color: inherit; text-decoration: none; }
.row-link:hover { color: inherit; }
.row-link:hover .t-title { color: var(--accent); }
.row-meta { flex: 0 0 180px; display: flex; flex-direction: column; gap: 4px; }
.row-main { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.row-go { flex: 0 0 auto; color: var(--ink-muted); }
@media (max-width: 600px) {
  .row-link { flex-direction: column; gap: 8px; }
  .row-meta { flex: none; flex-direction: row; gap: 12px; }
  .row-main { flex: none; }
  .t-title { font-size: 23px; line-height: 25px; }
}

/* Newsletter folder cards */
.cards-sec { padding-bottom: 80px; display: flex; flex-direction: column; gap: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px 16px; }
.folder { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.folder:hover { color: inherit; }
.folder:hover .t-title { color: var(--accent); }
.folder .tab { align-self: flex-start; background: var(--surface-raised); padding: 9px 14px; border-radius: 4px 4px 0 0; }
.folder .body { background: var(--surface-raised); padding: 16px; border-radius: 0 10px 10px 10px; display: flex; flex-direction: column; gap: 12px; min-height: 150px; }
.folder .t-title { font-size: 24px; line-height: 26px; }
.folder .go { margin-top: auto; color: var(--accent); }

/* Archive */
.archive { padding-top: 56px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 24px; }
.arch-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.arch-top h1 { margin: 0; font-size: clamp(44px, 6vw, 72px); line-height: .94; }
.search { flex: 0 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.search input { height: 48px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--rule); background: var(--surface-raised); color: var(--ink); font: inherit; width: 100%; }
.filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }
.arch-list { border-top: 2px solid var(--ink); }
.empty { padding: 24px; border: 1px dashed var(--rule); border-radius: 4px; text-align: center; color: var(--ink-muted); margin-top: 24px; }
.more-btn { display: flex; justify-content: center; padding-top: 8px; }
.more-btn .chip { padding: 0 24px; }

/* Reading pages */
.read-col { max-width: 720px; margin: 0 auto; padding: 56px 20px 72px; }
.story { display: flex; flex-direction: column; gap: 24px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.meta-row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-muted); }
.verified { background: var(--foil); color: var(--on-foil); box-shadow: var(--foil-edge); padding: 3px 8px; border-radius: 4px; font-size: 14px; line-height: 16px; letter-spacing: .1em; }
.story h1 { margin: 0; font-size: clamp(40px, 7vw, 60px); line-height: .95; text-wrap: balance; overflow-wrap: break-word; }
.dek { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-muted); text-wrap: pretty; }
.price-card dl > div { padding: 8px 0; }
.lead-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lead-photo > div { background: var(--card); border-radius: 10px; padding: 20px; display: flex; justify-content: center; }
.lead-photo img { display: block; max-width: 100%; max-height: 440px; width: auto; height: auto; }
.lead-photo figcaption { align-self: flex-end; color: var(--ink-muted); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.price .fig { font-weight: 900; font-size: 56px; line-height: 56px; color: var(--card-price); }
.price .up { color: var(--card-up); }
.price .down { color: var(--card-down); }
.prose { font-size: 16px; line-height: 28px; }
.prose > * { margin: 0 0 20px; }
.prose > *:last-child { margin-bottom: 0; }
.prose p.lede { font-family: var(--f-serif); font-variation-settings: 'SOFT' 100; font-size: 20px; line-height: 31px; font-weight: 500; }
.prose h2 { margin: 36px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-family: var(--f-head); font-weight: 700; font-size: 26px; line-height: 28px; letter-spacing: .01em; text-transform: uppercase; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 0 0 8px; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose strong { font-weight: 600; }
.prose .table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.prose th { text-align: left; padding: 0 12px 8px 0; font-size: 11px; line-height: 14px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--ink); }
.prose td { padding: 9px 12px 9px 0; border-bottom: 1px dashed var(--rule); vertical-align: top; }
.prose p.note { font-size: 13px; line-height: 20px; color: var(--ink-muted); font-style: italic; }
.prose p.position { background: var(--surface-raised); padding: 12px 14px; font-size: 13px; line-height: 20px; font-weight: 600; }
.prose .sources li { font-size: 13px; line-height: 20px; }
.prose .sources a { overflow-wrap: anywhere; }
.prose img { max-width: 100%; height: auto; }
.source-line { margin: 0; padding-top: 12px; border-top: 1px dashed var(--rule); color: var(--ink-muted); }
.more-files { margin-top: 56px; }
.more-files .row-link { flex-direction: column; gap: 6px; padding: 20px 0; }

/* Newsletter web copy: the email layout sits on the page as sent. */
.issue-sheet { background: #ddd3bd; font-family: Georgia, serif; font-size: 16px; line-height: normal; }
.issue-sheet, .issue-sheet * { box-sizing: content-box; }
/* The lead figure (72px, 56px on phones in the email) is wider than a 375px screen at seven characters. */
@media (max-width: 400px) { .issue-sheet .big { font-size: 44px !important; line-height: 44px !important; } }
.issue-more { max-width: 720px; margin: 0 auto; padding: 0 20px 72px; }

/* Privacy */
.legal h1 { margin: 0; font-size: clamp(40px, 7vw, 60px); line-height: .95; }
.legal h2 { margin: 32px 0 8px; font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 26px; text-transform: uppercase; letter-spacing: .01em; }
.legal p, .legal li { margin: 0 0 12px; }

/* Footer */
.band { background: var(--inv-surface); color: var(--inv-ink); scroll-margin-top: 16px; }
.band-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px; align-items: end; padding-top: 56px; padding-bottom: 56px; }
.band h2 { margin: 0; font-weight: 700; font-size: 40px; line-height: 44px; }
.band h2 em { font-weight: 400; color: var(--inv-accent); }
.band .muted { color: var(--inv-muted); }
.band a { color: var(--inv-accent); }
.band a:hover { color: var(--inv-ink); }
.band .signup input[type=email] { border-color: var(--inv-rule); background: var(--inv-raised); color: var(--inv-ink); }
.band .signup button { background: var(--inv-accent); color: var(--inv-accent-ink); }
.band .done { border-color: var(--inv-rule); }
.band .done .accent { color: var(--inv-accent); }
.band .signup .err { color: inherit; }
@media (max-width: 480px) { .band h2 { font-size: 34px; line-height: 38px; } }
.strip { background: var(--surface-sunken); color: var(--ink-muted); }
.strip-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 24px; padding-bottom: 24px; }
.strip .t-head { font-size: 20px; line-height: 22px; letter-spacing: .02em; color: var(--ink); }
.strip-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.strip-links a { color: var(--ink-muted); display: inline-flex; align-items: center; min-height: 44px; }
.strip-links a:hover { color: var(--ink); }