/* The Trump Wins List — Option A "Founders' Broadsheet"
   Caslon (the face of the Declaration's first printing) for headlines and reading,
   Libre Franklin for interface text. Colors are Old Glory Blue and Old Glory Red. */

/* Fonts are self-hosted (SIL Open Font License, via Fontsource): no third-party requests. */
@font-face { font-family: 'Libre Caslon Display'; src: url('fonts/libre-caslon-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('fonts/libre-caslon-text-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('fonts/libre-caslon-text-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('fonts/libre-caslon-text-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('fonts/libre-franklin-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('fonts/libre-franklin-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('fonts/libre-franklin-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('fonts/libre-franklin-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #F7F3E8;
  --paper: #FFFDF7;
  --shade: #ECE5D3;
  --ink: #1A2233;
  --muted: #4A5468;
  --rule: #CFC6B0;
  --blue: #0A3161;
  --red: #B31942;
  --band: #0A3161;
  --on-band: #F7F3E8;
  --band-muted: #D9DEEA;
  --band-rule: #3A5B8C;
  --btn: #0A3161;
  --on-btn: #FFFFFF;
  --display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --text: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1420; --paper: #151C2A; --shade: #1E2738; --ink: #EFE8D8; --muted: #B9B19E; --rule: #343D52;
    --blue: #A9C2EE; --red: #F28A9B; --band: #16233D; --on-band: #EFE8D8; --band-muted: #C3CBDC; --band-rule: #2E3F60;
    --btn: #A9C2EE; --on-btn: #0E1420; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1420; --paper: #151C2A; --shade: #1E2738; --ink: #EFE8D8; --muted: #B9B19E; --rule: #343D52;
  --blue: #A9C2EE; --red: #F28A9B; --band: #16233D; --on-band: #EFE8D8; --band-muted: #C3CBDC; --band-rule: #2E3F60;
  --btn: #A9C2EE; --on-btn: #0E1420; color-scheme: dark;
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: 0.15em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; padding: 12px 16px; background: var(--btn); color: var(--on-btn); z-index: 10; }
.skip:focus { top: 12px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.flag { display: block; width: 100%; height: auto; }

/* ---------- Masthead ---------- */
.topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 12px 0 0; font-family: var(--text); font-style: italic; font-size: 0.9375rem; color: var(--muted); }
.masthead { text-align: center; padding: 6px 0 22px; }
.masthead a.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.masthead .brand-flag { width: 76px; border: 1px solid var(--rule); }
.masthead .brand-name { font-family: var(--display); font-size: clamp(2.5rem, 7vw, 4.875rem); line-height: 1; letter-spacing: -0.01em; }
.masthead .tagline { margin: 12px auto 0; max-width: 36ch; font-family: var(--text); font-style: italic; font-size: 1.125rem; color: var(--muted); }
.navbar { border-top: 4px double var(--ink); border-bottom: 1px solid var(--ink); }
.navbar ul { list-style: none; margin: 0 auto; padding: 0 12px; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.navbar a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; font-weight: 600; font-size: 0.9375rem; color: var(--ink); text-decoration: none; }
.navbar a:hover, .navbar a[aria-current="page"] { color: var(--red); }
.navbar a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

/* Compact masthead on inner pages so the content starts higher */
.site-header.is-compact .topline, .site-header.is-compact .tagline { display: none; }
.site-header.is-compact .masthead { padding: 14px 0; }
.site-header.is-compact .masthead a.brand { flex-direction: row; gap: 14px; }
.site-header.is-compact .masthead .brand-flag { width: 46px; }
.site-header.is-compact .masthead .brand-name { font-size: clamp(1.75rem, 4vw, 2.5rem); }

/* ---------- Shared type ---------- */
.kicker { margin: 0; font-family: var(--text); font-style: italic; font-size: 1.0625rem; color: var(--red); }
.kicker a { color: inherit; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; border-top: 4px double var(--ink); padding-top: 16px; }
.section-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.1; }
.section-head p { margin: 0; font-family: var(--text); font-style: italic; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; background: var(--btn); color: var(--on-btn); font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { color: var(--on-btn); filter: brightness(1.12); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { color: var(--red); border-color: var(--red); filter: none; }
.btn-link { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--blue); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Featured (home) ---------- */
.featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px 0 44px; }
.featured h1 { margin: 14px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.375rem, 5.2vw, 4rem); line-height: 1.04; color: var(--blue); }
.featured h1 a { color: inherit; text-decoration: none; }
.featured h1 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.featured .desc { margin: 18px 0 0; font-family: var(--text); font-size: 1.3125rem; line-height: 1.5; }
.featured .why { margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.featured .why h2 { margin: 0; font-family: var(--text); font-style: italic; font-weight: 400; font-size: 1.0625rem; color: var(--muted); }
.featured .why p { margin: 6px 0 0; font-size: 1.0625rem; line-height: 1.6; }
.featured .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.featured .note { margin: 14px 0 0; font-size: 0.875rem; color: var(--muted); }
.flag-frame { margin: 0; }
.flag-frame > div { padding: 16px; background: var(--paper); border: 1px solid var(--rule); }
.flag-frame figcaption .cite { display: block; margin-top: 4px; font-style: normal; font-family: var(--sans); font-size: 0.8125rem; }
.flag-frame figcaption { margin: 12px auto 0; max-width: 34ch; text-align: center; font-family: var(--text); font-style: italic; font-size: 0.9375rem; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.stats div { padding: 18px 12px; text-align: center; }
.stats div + div { border-left: 1px solid var(--rule); }
.stats strong { display: block; font-family: var(--display); font-weight: 400; font-size: 2.75rem; line-height: 1; color: var(--blue); }
.stats span { display: block; margin-top: 6px; font-family: var(--text); font-style: italic; color: var(--muted); }

/* ---------- Search ---------- */
.search { padding-top: 56px; }
.search label.big { display: block; margin-top: 22px; font-weight: 700; font-size: 0.9375rem; }
.search-box { margin-top: 6px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); }
.search-box input { flex: 1; min-width: 0; min-height: 56px; border: 0; background: transparent; color: var(--ink); font-family: var(--text); font-size: 1.375rem; }
.search-box input:focus-visible { outline-offset: 6px; }
.search-box input::placeholder { color: var(--muted); opacity: 0.85; }
.chips-label { margin: 22px 0 0; font-weight: 700; font-size: 0.9375rem; }
.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.chip span { color: var(--muted); font-weight: 500; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.chip[aria-pressed="true"] span { color: var(--on-btn); opacity: 0.85; }
.results-bar { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.results-bar p { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.empty { padding: 48px 0; text-align: center; }
.empty p { margin: 0 0 18px; font-family: var(--text); font-size: 1.25rem; }
.more-row { margin-top: 36px; text-align: center; }

/* ---------- Cards (identical for every win) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: 36px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.card[hidden] { display: none; }
.card .meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--text); font-style: italic; font-size: 0.9375rem; }
.card .meta .topic { color: var(--red); }
.card .meta .size { color: var(--muted); white-space: nowrap; }
.card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.6875rem; line-height: 1.15; }
.card h3 a { color: var(--blue); text-decoration: none; }
.card h3 a:hover { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; }
.card p.desc { margin: 0; font-family: var(--text); font-size: 1rem; line-height: 1.55; }
.card .go { margin-top: auto; padding-top: 4px; }
.card .go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 0.9375rem; }

.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 24px; }
.story { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.story:hover { border-color: var(--ink); color: var(--ink); }
.story .t { font-family: var(--display); font-size: 1.875rem; line-height: 1.1; color: var(--blue); }
.story .s { font-family: var(--text); font-size: 1rem; line-height: 1.55; }
.story .r { margin-top: auto; font-weight: 700; color: var(--blue); }

/* ---------- Win / article page ---------- */
.crumbs { padding-top: 28px; font-size: 0.9375rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.win-head h1 { margin: 12px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.02; color: var(--blue); }
.win-head .sub { margin: 20px 0 0; font-family: var(--text); font-size: clamp(1.25rem, 2.4vw, 1.4375rem); line-height: 1.45; }
.win-head .whyline { margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; gap: 12px; align-items: flex-start; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.win-head .whyline svg { flex: none; margin-top: 4px; color: var(--red); }
.win-figure { max-width: 808px; margin: 36px auto 0; padding: 0 24px; }
.win-figure > div { padding: 18px; background: var(--paper); border: 1px solid var(--rule); }
.glance { margin-top: 40px; padding: 24px 28px 10px; background: var(--paper); border: 1px solid var(--rule); }
.glance h2 { margin: 0; font-family: var(--text); font-style: italic; font-weight: 400; font-size: 1.125rem; color: var(--red); }
.glance .one { margin: 10px 0 14px; font-family: var(--text); font-style: italic; font-size: 1.25rem; line-height: 1.5; }
.glance dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); column-gap: 28px; }
.glance dl div { padding: 12px 0; border-top: 1px solid var(--rule); }
.glance dt { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.glance dd { margin: 4px 0 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.15; color: var(--blue); }
.headline { margin: 48px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; }
.dek { margin: 16px 0 0; font-family: var(--text); font-style: italic; font-size: 1.3125rem; line-height: 1.5; color: var(--muted); }
.byline { margin: 18px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--rule); font-size: 0.875rem; color: var(--muted); }
.why-box { margin: 32px 0; padding: 28px; background: var(--band); color: var(--on-band); }
.why-box h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--text); font-style: italic; font-weight: 400; font-size: 1.125rem; }
.why-box p { margin: 12px 0 0; font-family: var(--text); font-size: 1.1875rem; line-height: 1.65; }
.prose p { margin: 0 0 22px; font-family: var(--text); font-size: 1.1875rem; line-height: 1.75; }
.prose p.dropcap::first-letter { float: left; font-family: var(--display); font-size: 4.4em; line-height: 0.82; padding: 6px 10px 0 0; color: var(--red); }
.pending { margin: 0 0 8px; font-family: var(--text); font-size: 1.1875rem; line-height: 1.7; }
.sources { margin-top: 40px; padding-top: 18px; border-top: 4px double var(--ink); }
.sources h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.875rem; }
.sources ol { margin: 16px 0 0; padding-left: 22px; }
.sources li { margin: 0 0 10px; line-height: 1.5; }
.prose h3.subhead { margin: 36px 0 14px; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.15; color: var(--blue); }
.share { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule); }
.share h2 { margin: 0 0 12px; font-family: var(--text); font-style: italic; font-weight: 400; font-size: 1.125rem; color: var(--red); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row .btn { min-height: 44px; padding: 0 16px; font-size: 0.875rem; }
.share-status { margin: 10px 0 0; min-height: 1.4em; font-size: 0.875rem; color: var(--muted); word-break: break-all; }
.story-group { padding-top: 40px; }
.story-group .stories { margin-top: 20px; }
.related { max-width: 1200px; margin: 0 auto; padding: 64px 24px 0; }

/* ---------- Topics ---------- */
.page-head { padding: 40px 0 8px; }
.page-head h1 { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; color: var(--blue); }
.page-head p.lede { margin: 14px 0 0; max-width: 60ch; font-family: var(--text); font-size: 1.25rem; line-height: 1.5; }
.topic-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 36px; border-top: 1px solid var(--ink); }
.topic-list li { border-bottom: 1px solid var(--rule); }
.topic-list a { display: block; padding: 20px 0; color: var(--ink); text-decoration: none; }
.topic-list a:hover .tn { color: var(--red); }
.topic-list .tn { display: flex; justify-content: space-between; gap: 12px; font-family: var(--display); font-size: 1.625rem; line-height: 1.15; color: var(--blue); }
.topic-list .tn span { font-family: var(--text); font-style: italic; font-size: 1rem; color: var(--muted); white-space: nowrap; }
.topic-list .td { display: block; margin-top: 6px; font-family: var(--text); font-size: 1rem; line-height: 1.5; color: var(--muted); }
.about p { font-family: var(--text); font-size: 1.1875rem; line-height: 1.7; margin: 0 0 20px; }
.about h2 { margin: 36px 0 10px; font-family: var(--display); font-weight: 400; font-size: 1.875rem; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 80px; background: var(--band); color: var(--on-band); }
.stripes div { height: 5px; background: #B31942; }
.stripes div:nth-child(even) { background: #FFFFFF; }
.site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding: 44px 0; }
.site-footer .name { font-family: var(--display); font-size: 2.125rem; line-height: 1.1; }
.site-footer p { margin: 12px 0 0; max-width: 56ch; font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-band); }
.site-footer a:hover { color: var(--on-band); text-decoration-thickness: 2px; }
.site-footer .fine { max-width: none; border-top: 1px solid var(--band-rule); padding: 16px 0; font-size: 0.8125rem; color: var(--band-muted); }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .featured { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(3) { border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .wrap, .narrow, .win-figure, .related { padding-left: 18px; padding-right: 18px; }
  .masthead .brand-flag { width: 56px; }
  .masthead .tagline { font-size: 1rem; }
  .topline { font-size: 0.8125rem; }
  .navbar ul { padding: 0 4px; gap: 0; }
  .navbar a { padding: 0 9px; font-size: 0.875rem; }
  .glance, .why-box { padding: 20px; }
  .story { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .navbar, .search, .share, .site-footer, .skip { display: none; } body { background: #fff; } }