/* Message & Method: premium editorial design. Keeps the logo and the Ink / Copper / Stone palette.
   Concept: a quality weekly title. A centred, quiet nameplate between hairlines; photographic covers toned
   towards Ink so every page belongs to one set; Newsreader throughout (display optical size for headlines,
   text size for reading) with Libre Franklin for small labels and figures; generous measure and white space;
   ads mounted on a mat like gallery prints; hairline rules, never heavy boxes. Copper is a thread, not a fill. */
:root {
  --ink: #14213D; --navy: #24344F; --slate: #4A5A6E; --copper: #B4612F; --stone: #F3EFE7; --mist: #E3E6EB;
  --bg: #F8F5EF; --fg: #1C2230; --heading: #101A31; --muted: #5E6878; --line: #DAD3C6; --hair: #E6E0D5; --panel: #EFEAE0;
  --band: #101A31; --band-fg: #FFFFFF; --band-muted: #AEB7C5; --band-line: rgba(255, 255, 255, .16); --accent: #A8572A; --frame: #ECE6DB; --mat: #FFFFFF;
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --label: "Libre Franklin", "Franklin Gothic Book", "Segoe UI", Arial, sans-serif;
  /* the app pages' own token names, pointed at the same faces */
  --serif: var(--display); --sans: var(--label); --mono: var(--label);
  --p-con: #0087DC; --p-lab: #E4003B; --p-ref: #12B6CF; --p-ld: #FAA61A; --p-grn: #02A95B; --p-snp: #E8D64A; --p-pc: #005B54;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0C1322; --fg: #E3E6EB; --heading: #F7F4EE; --muted: #A3ADBC; --line: #27344B; --hair: #1E2A3F; --panel: #121C2F;
  --band: #080E1A; --band-fg: #FFFFFF; --band-muted: #A3ADBC; --accent: #DE9466; --frame: #152035; --mat: #1A263C; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0C1322; --fg: #E3E6EB; --heading: #F7F4EE; --muted: #A3ADBC; --line: #27344B; --hair: #1E2A3F; --panel: #121C2F;
  --band: #080E1A; --band-fg: #FFFFFF; --band-muted: #A3ADBC; --accent: #DE9466; --frame: #152035; --mat: #1A263C; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 64px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 19px/1.62 var(--body); font-optical-sizing: auto; font-variant-numeric: oldstyle-nums proportional-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--band); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--heading); margin: 0; text-wrap: balance; letter-spacing: -.012em; font-variant-numeric: lining-nums; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--copper) 28%, transparent); }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.label { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--accent); letter-spacing: 0; display: inline-flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }
.quiet { color: var(--muted); }
.up { color: var(--accent); font-weight: 600; }

/* Nameplate: centred, quiet, between hairlines */
.band { background: var(--band); color: var(--band-fg); }
.band h1, .band h2 { color: var(--band-fg); }
header.band { border-bottom: 1px solid var(--band-line); }
header.band .wrap { padding-block: 22px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.logo img { display: block; height: 32px; width: auto; }
.sitenav { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 30px; width: 100%; padding-block: 11px 12px; border-top: 1px solid var(--band-line); font: 500 .74rem/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.sitenav a { color: var(--band-muted); text-decoration: none; padding-block: 3px; border-bottom: 1px solid transparent; }
.sitenav a:hover { color: var(--band-fg); }
.sitenav a[aria-current] { color: var(--band-fg); border-bottom-color: var(--copper); }
.sitenav a.subscribe { color: #F1C9AE; }
.sitenav a.subscribe:hover { color: #FFFFFF; }
@media (max-width: 640px) { .sitenav { gap: 2px 18px; letter-spacing: .1em; } header.band .wrap { padding-top: 16px; gap: 12px; } }

/* Cover: photograph toned towards Ink, headline set large */
.summary { position: relative; overflow: hidden; isolation: isolate; }
.summary > img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.7) contrast(1.06) brightness(.92); transform: scale(1.02); }
.summary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 26, 49, .42) 0%, rgba(16, 26, 49, .58) 42%, rgba(12, 19, 34, .94) 100%), linear-gradient(90deg, rgba(16, 26, 49, .55), rgba(16, 26, 49, 0) 70%); }
.summary .wrap { min-height: clamp(420px, 68vh, 660px); padding-block: 72px 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.summary .label { color: #EDBF9F; font-size: 1.12rem; }
.summary h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 400; letter-spacing: -.022em; max-width: 19ch; }
.points { margin: 10px 0 0; padding: 22px 0 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px 40px; border-top: 1px solid rgba(255, 255, 255, .22); max-width: 1080px; }
.points li { color: #D7DDE6; font-size: 1.02rem; line-height: 1.5; }
.points strong { color: #FFFFFF; font-weight: 600; }
.edition-meta { font: 500 .74rem/1.5 var(--label); letter-spacing: .1em; text-transform: uppercase; color: #AEB7C5; }
.credit { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: 10px; font: .66rem/1 var(--label); letter-spacing: .04em; color: rgba(255, 255, 255, .55); z-index: 1; }
.credit a { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .summary .wrap > * { animation: mm-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .summary .wrap > :nth-child(2) { animation-delay: .08s; } .summary .wrap > :nth-child(3) { animation-delay: .16s; } .summary .wrap > :nth-child(4) { animation-delay: .24s; }
  @keyframes mm-rise { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Party jump line */
.jump { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--hair); }
.jump .wrap { display: flex; gap: 4px 30px; overflow-x: auto; padding-block: 13px; scrollbar-width: none; }
.chip { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 2px 0; text-decoration: none; font: 500 .82rem/1.2 var(--label); letter-spacing: .02em; color: var(--fg); border-bottom: 1px solid transparent; }
.chip:hover { border-bottom-color: currentColor; }
.chip b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.chip .chg { color: var(--accent); }
.chip.plain { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* Sections */
main > .wrap { padding-bottom: 32px; }
section.block { padding-block: 72px; border-bottom: 1px solid var(--hair); display: grid; gap: 26px; min-width: 0; }
section.block:last-child { border-bottom: 0; }
.block-head { display: grid; gap: 12px; max-width: 58rem; }
.block-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; font-weight: 400; letter-spacing: -.018em; display: flex; align-items: baseline; gap: 16px; }
.block-head h2 .dot { width: 11px; height: 11px; transform: translateY(-.15em); }
.block-head p { color: var(--muted); max-width: 66ch; font-size: 1.04rem; }

/* Long-form prose: measure, drop cap on the first read of a page */
.prose { max-width: 66ch; display: grid; gap: 16px; font-size: 1.06rem; line-height: 1.68; }
main section.block:first-of-type .prose > p:first-child::first-letter { float: left; font-family: var(--display); font-weight: 400; font-size: 4.1em; line-height: .82; padding: .06em .08em 0 0; color: var(--accent); }
.more { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; max-width: 70ch; color: var(--muted); font-size: .98rem; }
.more li { padding-left: 22px; position: relative; }
.more li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--line); }

/* Tables: hairlines, small-caps heads, lining tabular figures */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--heading); border-bottom: 1px solid var(--heading); }
table { width: 100%; border-collapse: collapse; font: 400 .92rem/1.45 var(--label); min-width: 760px; font-variant-numeric: tabular-nums lining-nums; }
th, td { text-align: left; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { font: 600 .68rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: none; padding-block: 14px 10px; }
td.n { white-space: nowrap; }
td .party { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; color: var(--heading); }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }

/* Stat line: large lining figures, small-caps labels */
.stats { display: flex; flex-wrap: wrap; gap: 18px 56px; padding: 20px 0; background: none; border-top: 1px solid var(--heading); border-bottom: 1px solid var(--hair); }
.stat { display: grid; min-width: 0; gap: 4px; }
.stat .k { font: 600 .66rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-family: var(--display); font-size: 2.1rem; font-weight: 400; line-height: 1.05; color: var(--heading); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }

/* Ads: mounted like prints, lead ad larger */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 30px; }
@media (min-width: 900px) { .cards:has(> .card:nth-child(3)) > .card:first-child { grid-column: span 2; grid-row: span 2; } .cards > .card:first-child q { font-size: 1.32rem; } }
.card { display: flex; flex-direction: column; min-width: 0; background: none; border: 0; }
.card .frame { display: block; position: relative; background: var(--mat); aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden; padding: 6%; border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(16, 26, 49, .05), 0 12px 30px -18px rgba(16, 26, 49, .35); }
.card .frame img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card .frame:hover img { transform: scale(1.015); }
.badge { position: absolute; top: 12px; font: 600 .62rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px 4px; }
.badge.new { left: 12px; background: var(--copper); color: #FFFFFF; }
.badge.src { right: 12px; background: var(--ink); color: #FFFFFF; }
.badge.fmt { left: 12px; top: auto; bottom: 12px; background: rgba(16, 26, 49, .82); color: #FFFFFF; }
.badge.fmt.graphic { background: rgba(168, 87, 42, .9); }
.fmtsplit { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 500 .9rem/1.2 var(--label); font-variant-numeric: tabular-nums lining-nums; }
.fmtbar { display: inline-flex; gap: 2px; width: 72px; height: 6px; flex: none; }
.fmtbar .v { background: var(--heading); }
.fmtbar .g { background: var(--accent); }
.stat .v .fmtsplit { font-size: .95rem; }
.stat .v .fmtbar { width: 96px; }
.card .body { padding: 16px 0 0; display: grid; gap: 10px; align-content: start; flex: 1; }
.card q { quotes: "\201C" "\201D"; font-family: var(--display); font-style: italic; font-size: 1.08rem; line-height: 1.42; color: var(--heading); }
.card dl { margin: 0; display: flex; flex-wrap: wrap; gap: 0 16px; font: 500 .74rem/1.6 var(--label); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.card dl > dt { display: none; }
.card dd { margin: 0; }
.card .open { font: 600 .68rem/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: none; align-self: end; padding-top: 4px; }
.card .open::after { content: "  \2192"; }
.card .open:hover { text-decoration: underline; }

/* Spend bars: all parties on one scale */
.spendbars { display: grid; gap: 14px; max-width: 64rem; }
.sb { display: grid; grid-template-columns: 250px minmax(0, 1fr) 100px; gap: 16px; align-items: center; font: 500 .9rem/1.3 var(--label); }
.sb .who { display: flex; align-items: center; gap: 10px; color: var(--heading); min-width: 0; }
.sb .track { height: 10px; background: var(--hair); display: block; }
.sb .fill { display: block; height: 100%; min-width: 2px; }
.sb .amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--heading); }
@media (max-width: 640px) { .sb { grid-template-columns: minmax(0, 1fr) 90px; } .sb .track { grid-column: 1 / -1; grid-row: 2; } }

/* Method: a pull quote */
.method { border-left: 1px solid var(--accent); padding: 4px 0 4px 26px; display: grid; gap: 8px; max-width: 64ch; position: relative; }
.method::before { content: "\201C"; position: absolute; left: 14px; top: -18px; font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--accent); opacity: .35; }
.method .label { font-size: .98rem; }
.method .label::before { display: none; }
.method p { font-family: var(--display); font-size: 1.26rem; line-height: 1.5; font-weight: 400; color: var(--heading); }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px 12px; font: 600 .72rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; background: transparent; color: var(--heading); border: 1px solid var(--heading); justify-self: start; }
.btn::after { content: "\2192"; letter-spacing: 0; }
.btn:hover { background: var(--heading); color: var(--bg); }
.watch { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 68ch; }
.watch li { font-family: var(--display); font-size: 1.22rem; line-height: 1.45; padding: 18px 0 18px 34px; position: relative; color: var(--heading); border-bottom: 1px solid var(--hair); }
.watch li:last-child { border-bottom: 0; }
.watch li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 18px; height: 1px; background: var(--accent); }

/* Full-width photo break, toned to match the covers */
.photo-break { margin: 0 calc(50% - 50vw); position: relative; height: clamp(220px, 36vw, 440px); overflow: hidden; }
.photo-break img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.6) contrast(1.05) brightness(.95); }
.photo-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 49, .05), rgba(16, 26, 49, .45)); pointer-events: none; }
.photo-break figcaption { position: absolute; z-index: 1; left: max(24px, env(safe-area-inset-left, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); bottom: 12px; color: rgba(255, 255, 255, .75); font: .66rem/1 var(--label); letter-spacing: .04em; text-align: right; }

/* Sign-up: an Ink panel */
.signup { background: var(--band); color: var(--band-fg); padding: 64px 0; }
.signup .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 64px; align-items: center; }
@media (max-width: 820px) { .signup .wrap { grid-template-columns: minmax(0, 1fr); } }
.signup .label { color: #EDBF9F; }
.signup h2 { color: #FFFFFF; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; font-weight: 400; }
.signup p { color: var(--band-muted); }
.signup .btn { color: #FFFFFF; border-color: rgba(255, 255, 255, .7); justify-self: start; }
.signup .btn:hover { background: #FFFFFF; color: var(--band); }
.signup form { display: grid; gap: 16px; }
.signup .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 520px) { .signup .row { grid-template-columns: minmax(0, 1fr); } }
.signup label.f { display: grid; gap: 6px; font: 600 .68rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.signup input[type=text], .signup input[type=email] { font: 400 1rem/1.4 var(--label); padding: 12px 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100%; border-radius: 0; }
.signup fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.signup legend { font: 600 .68rem/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.signup .opt { display: inline-flex; gap: 10px; align-items: flex-start; font-size: 1rem; }
.signup .opt input { accent-color: var(--copper); margin-top: .3em; }
.signup .opt small { display: block; color: var(--muted); font: .78rem/1.4 var(--label); }
.signup .consent { font-size: .9rem; color: var(--muted); }
.signup button { font: 600 .74rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; padding: 15px 28px; border: 1px solid var(--heading); background: var(--heading); color: var(--bg); cursor: pointer; justify-self: start; }
.signup button:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.signup button:disabled { opacity: .45; cursor: not-allowed; }
.signup .status { font: 500 .95rem/1.5 var(--label); }
/* The form page reuses the sign-up layout on paper */
.signup.formpage { background: none; color: var(--fg); padding: 0; }
.signup.formpage h2 { color: var(--heading); }
.signup.formpage p { color: var(--muted); }
.signup.formpage .wrap { padding: 0; align-items: start; }

/* Footer */
footer.band { border-top: 1px solid var(--band-line); }
footer.band .wrap { padding-block: 48px 56px; display: grid; gap: 16px; font: 400 .84rem/1.6 var(--label); color: var(--band-muted); max-width: 1200px; }
footer.band img { height: 24px; width: auto; display: block; margin-bottom: 6px; }
footer.band a { color: var(--band-fg); }
footer.band p { max-width: 90ch; }
@media (prefers-reduced-motion: reduce) { .card .frame img { transition: none; } .card .frame:hover img { transform: none; } }