@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
:root { --parchment: #EFE3C8; --ink: #2A2420; --red: #9E1F1F; --blue: #2D4A7A; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--parchment); color: var(--ink);
  font: 1.25rem/1.6 "EB Garamond", Georgia, "Times New Roman", serif;
}
main { max-width: 36rem; margin: 0 auto; padding: 3rem 1.5rem 3rem; text-align: center; }
.logo { display: block; width: 12rem; height: auto; margin: 0 auto 1.5rem; }
h1 { margin: 0 0 0.25rem; font-size: 2.25rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); }
.tagline { margin: 0 0 1.25rem; font-size: 1.125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.links { display: flex; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.links a {
  display: inline-block; min-width: 6rem; padding: 0.6rem 1.25rem; border: 2px solid var(--blue);
  color: var(--blue); font-weight: 600; text-decoration: none;
}
.links a:hover { background: var(--blue); color: var(--parchment); }
.links a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (min-width: 900px) {
  h1 { font-size: 3rem; }
  .logo { width: 16rem; }
  main { padding-top: 5rem; }
}

/* Battles section (task #322 layout, task #323 build). */
:root { --rule: #cdbd9a; --muted: #5b5046; }
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 60rem; margin: 0 auto; padding: 1rem 1.5rem; }
.site-head .brand { display: flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; }
.site-head .brand img { width: 2.5rem; height: 2.5rem; }
.site-head nav { display: flex; gap: 1.25rem; }
.site-head nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 600; text-decoration: none; }
.site-head nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
.page { max-width: 60rem; margin: 0 auto; padding: 1rem 1.5rem 4rem; text-align: left; }
.page h1 { font-size: 2.25rem; margin: 0.5rem 0 0.5rem; }
.lede { margin: 0 0 2rem; color: var(--muted); font-size: 1.125rem; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.25rem; border: 2px solid var(--blue); color: var(--blue); font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--blue); color: var(--parchment); }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--parchment); }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; background: var(--ink); color: var(--parchment); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.cards { display: grid; grid-template-columns: 1fr; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.card a { display: block; color: inherit; text-decoration: none; }
.card h2 { margin: 0.75rem 0 0.25rem; font-size: 1.5rem; color: var(--ink); }
.card a:hover h2 { color: var(--blue); text-decoration: underline; }
.meta { margin: 0 0 0.5rem; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.card p { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.card p.meta { margin-bottom: 0.5rem; font-size: 1rem; }
.back { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); text-decoration: none; font-weight: 600; }
.watch { margin: 1.5rem 0 2.5rem; }
.watch .thumb { margin-bottom: 1rem; }
.watch .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.story { max-width: 38rem; }
.story h2 { margin: 2.5rem 0 0.5rem; font-size: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.story p { margin: 0 0 1.25rem; }
.story sup { font-size: 0.7em; line-height: 0; }
.story sup a { color: var(--blue); text-decoration: none; padding: 0 0.15em; }
.story sup a:hover { text-decoration: underline; }
.sources { max-width: 38rem; margin-top: 3rem; border-top: 3px double var(--rule); padding-top: 1rem; }
.sources h2 { font-size: 1.5rem; margin: 0 0 0.25rem; }
.sources > p { margin: 0 0 1rem; color: var(--muted); font-size: 1rem; }
.sources ol { margin: 0; padding-left: 1.75rem; }
.sources li { margin: 0 0 1rem; padding-left: 0.25rem; font-size: 1.0625rem; line-height: 1.5; }
.sources li:target { background: #e6d6b0; }
.sources .kind { display: inline-block; margin-right: 0.5rem; padding: 0 0.4rem; border: 1px solid var(--ink); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sources .accessed { display: block; color: var(--muted); font-size: 0.9375rem; white-space: nowrap; }
.sources .pub { display: block; color: var(--muted); font-size: 0.875rem; }
/* Publisher link: 44px tap target (task #409). */
.sources .pub a { display: inline-flex; align-items: center; min-height: 44px; }
.sources .backref { margin-left: 0.5rem; color: var(--blue); text-decoration: none; }
.home-links { flex-wrap: wrap; }
/* 404 buttons wrap with a gap (task #409). */
.page > .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Home intro (task #375). */
.intro { max-width: 32rem; margin: 0 auto 1.75rem; font-size: 1.125rem; text-align: left; }
.intro a { color: var(--blue); }
@media (min-width: 900px) {
  .page h1 { font-size: 3rem; }
  .cards { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .watch { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: center; }
  .watch .thumb { margin-bottom: 0; }
  .watch .actions { flex-direction: column; align-items: flex-start; }
}
.sources a { color: var(--blue); overflow-wrap: anywhere; }
.thumb img { display: block; width: 100%; height: auto; }
.soon { margin: 0; color: var(--muted); font-size: 1.125rem; }
.watch .soon { grid-column: 1 / -1; }
.story ul { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.story h3 { margin: 1.5rem 0 0.5rem; font-size: 1.25rem; }
@media (max-width: 899px) {
  .home-links li:first-child { flex: 0 0 100%; display: flex; justify-content: center; }
}

/* Mobile fixes (task #376, audit in issue #13). */
body { font-size: 1.0625rem; }
h1, h2, h3 { line-height: 1.2; }
.page h1 { font-size: 2rem; }
.intro { font-size: 1.0625rem; }
.intro + .intro { margin-top: -0.75rem; }
.lede, .soon, .card p { font-size: 1.0625rem; }
.meta, .card p.meta { font-size: 0.8125rem; letter-spacing: 0.06em; }
.cards { gap: 1.5rem; }
.watch { margin: 1.5rem 0 1rem; }
.story sup { vertical-align: baseline; position: relative; top: -0.45em; }
.story sup a { display: inline-block; min-width: 32px; height: 32px; margin: -8px 1px; padding: 0; line-height: 32px; text-align: center; }
.sources li { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.sources .accessed { display: inline; margin-left: 0.5rem; font-size: 0.875rem; }
.sources .accessed::before { content: "· "; }
.sources .backref { margin-left: 0.5rem; }
.to-top { margin: 1.5rem 0 0; }
.to-top a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 600; text-decoration: none; }
@media (max-width: 899px) {
  .watch .actions .btn { width: 100%; justify-content: center; min-height: 48px; }
}
@media (max-width: 419px) {
  .site-head { padding: 0.5rem 1.5rem; gap: 0.5rem; }
  .site-head nav { gap: 1rem; }
  .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Sources page (task #378). */
.thanks { max-width: 38rem; }
.thanks p { margin: 0 0 1rem; }
.publisher { max-width: 38rem; margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.publisher h2 { margin: 0.75rem 0 0.25rem; font-size: 1.5rem; }
.publisher h2 a, .publisher li a { color: var(--blue); overflow-wrap: anywhere; }
.publisher .count { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.9375rem; }
.publisher ul { margin: 0; padding-left: 1.25rem; }
.publisher li { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; }
.publisher .used { display: block; color: var(--muted); font-size: 0.875rem; }
.publisher .used a { color: inherit; }
/* One link to each citation spot, 44px tap targets (task #404). */
.publisher .spots { display: block; color: var(--muted); font-size: 0.875rem; }
.sources .backrefs { margin-left: 0.25rem; color: var(--muted); }
.sources .backref, .publisher .spot { display: inline-block; min-width: 44px; height: 44px; margin: 0; line-height: 44px; text-align: center; color: var(--blue); text-decoration: none; }
.publisher .spot, .sources .backrefs .backref { text-decoration: underline; }

/* Home page (task #383, design in design/home/SPEC.md). Body carries .home-page. */
.home-page main.home { max-width: 60rem; padding: 0.5rem 1.5rem 3rem; text-align: left; }
.home-page .site-head { justify-content: flex-end; min-height: 56px; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.home-page .brand-slot { display: none; }
.home-page .hero { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding: 0.5rem 0 3rem; }
.home-page .hero-text { text-align: center; }
.home-page .hero .logo { width: 7rem; margin: 0 auto 1rem; }
.home-page .hero h1 { margin: 0 0 0.25rem; font-size: 2.25rem; line-height: 1.2; }
.home-page .hero .tagline { margin: 0 0 1rem; }
.home-page .promise { max-width: 28rem; margin: 0 auto 1.5rem; font-size: 1.1875rem; line-height: 1.5; }
.home-page .cta { display: flex; flex-direction: column; gap: 0.75rem; }
.home-page .btn.big { justify-content: center; min-height: 48px; font-size: 1.125rem; }
.home-page .still { margin: 0; border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--rule); }
.home-page .still img { display: block; width: 100%; height: auto; }
.home-page .home h2 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.25; }
.home-page .how { padding: 2.5rem 0; border-top: 3px double var(--rule); }
.home-page .steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.home-page .steps li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; }
.home-page .steps .num { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--red); border-radius: 50%; color: var(--red); font-weight: 700; }
.home-page .steps h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.home-page .steps p { margin: 0.125rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--muted); }
.home-page .featured { padding: 2.5rem 0; border-top: 3px double var(--rule); }
.home-page .feat-card { display: grid; gap: 1rem; color: inherit; text-decoration: none; }
.home-page .feat-card h3 { margin: 0 0 0.25rem; font-size: 1.5rem; line-height: 1.25; }
.home-page .feat-card p { margin: 0 0 0.75rem; font-size: 1.0625rem; line-height: 1.5; }
.home-page .feat-card .meta { margin-bottom: 0.25rem; font-size: 0.9375rem; }
.home-page .feat-card .more { color: var(--blue); font-weight: 600; }
.home-page .feat-card:hover h3, .home-page .feat-card:hover .more { text-decoration: underline; }
.home-page .feat-card:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.home-page .follow { padding: 2.5rem 0 0; border-top: 3px double var(--rule); text-align: center; }
.home-page .follow p { display: flex; justify-content: center; gap: 0.75rem; margin: 0; }
.home-page .site-foot { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem 3rem; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.home-page .site-foot a { color: var(--blue); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) {
  .home-page .site-head { max-width: 60rem; }
  .home-page .hero { grid-template-columns: 5fr 6fr; align-items: center; gap: 3rem; padding: 2rem 0 4rem; }
  .home-page .hero-text { text-align: left; }
  .home-page .hero .logo { width: 8rem; margin: 0 0 1.25rem; }
  .home-page .hero h1 { font-size: 3.25rem; }
  .home-page .promise { margin: 0 0 1.75rem; font-size: 1.375rem; }
  .home-page .cta { flex-direction: row; }
  .home-page .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .home-page .feat-card { grid-template-columns: 3fr 2fr; gap: 2rem; align-items: center; }
}

/* Citation polish and small misses (site issue #20). The tap area grows from a pseudo-element, so the mark stays next to the full stop. */
.story sup a { position: relative; display: inline; min-width: 0; height: auto; margin: 0; padding: 0 3px; line-height: inherit; }
.story sup a::after { content: ""; position: absolute; inset: -10px -2px; }
.meta, .card p.meta { font-size: 0.9375rem; }
.sources > p { font-size: 1.0625rem; }
.site-head { min-height: 56px; }
@media (max-width: 419px) {
  .site-head { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}
.jump { max-width: 38rem; margin: 1.5rem 0 0; }
.jump ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-size: 1rem; font-weight: 600; text-decoration: none; }
.jump a:hover { text-decoration: underline; }
/* Key facts (task #379). */
.facts { max-width: 38rem; margin-top: 3rem; border-top: 3px double var(--rule); padding-top: 1rem; }
.facts h2 { font-size: 1.5rem; margin: 0 0 0.25rem; }
.facts .facts-note { margin: 0 0 1rem; color: var(--muted); font-size: 1rem; }
.facts dl { margin: 0; }
.facts dt { margin: 1.25rem 0 0.25rem; font-weight: 700; }
.facts dd { margin: 0; }
.facts sup { font-size: 0.7em; line-height: 0; }
.facts sup a { color: var(--blue); text-decoration: none; padding: 0 0.15em; }
.facts sup a:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .facts sup { vertical-align: baseline; position: relative; top: -0.45em; }
  .facts sup a { display: inline-block; min-width: 32px; height: 32px; margin: -8px 1px; padding: 0; line-height: 32px; text-align: center; }
}