/* The Shadows of War: the whole design system.
   Two worlds: blackout night (navy) and the paper of the house (cream).
   Every text and background pair below has been checked for WCAG AA. */

/* ---------- 1. Tokens ---------- */
:root {
  /* Night: blackout navy */
  --night: #0f1626;
  --night-2: #172036;
  --night-3: #222d47;
  --night-line: rgba(233, 227, 214, .14);
  --mist: #e9e3d6;          /* 14.1:1 on night */
  --mist-soft: #b9b5ab;     /* 8.8:1 on night */
  --lamp: #e6c88f;          /* 11.2:1 on night */
  --clay-light: #d29a6f;    /* 7.4:1 on night */
  --hop-light: #b5bf8a;     /* 9.3:1 on night */
  --red-light: #e07a68;     /* 6.2:1 on night */

  /* Paper: warm cream */
  --paper: #f2ebdd;
  --paper-2: #e8dfcc;
  --paper-3: #ded2b9;
  --paper-line: rgba(29, 34, 48, .16);
  --ink: #1d2230;           /* 13.4:1 on paper */
  --ink-soft: #4a4f5c;      /* 6.9:1 on paper */
  --clay: #8e4f2c;          /* Wealden clay, 5.4:1 on paper */
  --hop: #4f5d33;           /* hop green, 6.0:1 on paper */

  /* The one call to action */
  --red: #9b2f24;           /* 7.4:1 with white */
  --red-deep: #7f241b;

  /* Type */
  --f-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --f-serif: "Literata", "Iowan Old Style", Georgia, serif;
  --f-label: "Jost", "Gill Sans", "Gill Sans MT", "Segoe UI", sans-serif;

  --step--1: clamp(.84rem, .82rem + .1vw, .9rem);
  --step-0: clamp(1.0625rem, 1.03rem + .16vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.18rem + .35vw, 1.45rem);
  --step-2: clamp(1.55rem, 1.4rem + .7vw, 2rem);
  --step-3: clamp(2rem, 1.7rem + 1.4vw, 2.9rem);
  --step-4: clamp(2.5rem, 2rem + 2.6vw, 4.25rem);
  --step-5: clamp(3rem, 2.2rem + 4vw, 6rem);

  /* Space: 8pt rhythm */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  --wrap: 72rem;
  --measure: 38rem;
  --radius: 2px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 240ms;

  --shadow-1: 0 1px 2px rgba(10, 14, 24, .18), 0 4px 14px rgba(10, 14, 24, .12);
  --shadow-cover: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -8px rgba(0, 0, 0, .55), 0 40px 80px -20px rgba(0, 0, 0, .45);

  /* Paper grain: a whisper of texture, never a filter over images */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--f-serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper) var(--grain);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, li { text-wrap: pretty; }
em, i { font-style: italic; }
hr { border: 0; height: 1px; background: currentColor; opacity: .2; margin: var(--s-7) 0; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 1px; }
.on-paper :focus-visible, .paper :focus-visible { outline-color: var(--clay); }
::selection { background: var(--lamp); color: var(--night); }

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 1000;
  background: var(--lamp); color: var(--night); padding: var(--s-3) var(--s-4);
  font-family: var(--f-label); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 48em) { .wrap { width: min(100% - 4rem, var(--wrap)); } }
.prose { width: min(100% - 2rem, var(--measure)); margin-inline: auto; }
.prose > * + h2 { margin-top: var(--s-7); }
.prose > * + h3 { margin-top: var(--s-6); }
.section { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }

.night {
  background: var(--night);
  color: var(--mist);
}
.night a:not(.btn) { color: var(--mist); }
.night .muted, .night .lede-soft { color: var(--mist-soft); }
.night-2 { background: var(--night-2); color: var(--mist); }
.paper { background: var(--paper) var(--grain); color: var(--ink); }
.paper-2 { background: var(--paper-2) var(--grain); color: var(--ink); }
.muted { color: var(--ink-soft); }

/* ---------- 4. Type helpers ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--f-label);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: var(--s-4);
}
.night .eyebrow { color: var(--lamp); }
.eyebrow--rule { display: flex; align-items: center; gap: var(--s-3); }
.eyebrow--rule::before, .eyebrow--rule::after { content: ""; height: 1px; flex: 0 0 2.5rem; background: currentColor; opacity: .5; }
.center .eyebrow--rule { justify-content: center; }
.lede { font-size: var(--step-1); line-height: 1.55; }
.small { font-size: var(--step--1); }
.label { font-family: var(--f-label); font-size: var(--step--1); letter-spacing: .08em; }
.dateline { font-style: italic; }
.pull {
  font-family: var(--f-display);
  font-size: var(--step-2);
  line-height: 1.3;
  margin: var(--s-7) 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--clay);
}
.night .pull { border-color: var(--lamp); }

/* A small lozenge rule between passages. */
.orn-rule { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin: var(--s-7) auto; color: var(--clay); }
.orn-rule::before, .orn-rule::after { content: ""; height: 1px; width: min(6rem, 25vw); background: currentColor; opacity: .45; }
.orn-rule svg { width: 28px; height: 14px; }
.night .orn-rule { color: var(--lamp); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75em 1.5em;
  font-family: var(--f-label); font-size: .95rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform 120ms ease-out;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.night .btn--ghost { color: var(--mist); border-color: rgba(233, 227, 214, .55); }
.btn--ghost:hover { background: rgba(127, 127, 127, .12); }
.night .btn--ghost:hover { background: rgba(233, 227, 214, .1); border-color: var(--mist); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.center .btn-row { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--f-label); font-size: .92rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--clay); padding-block: .6rem; min-height: 44px;
}
.night .textlink { color: var(--lamp) !important; }
.textlink svg { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease-out); }
.textlink:hover svg { transform: translateX(4px); }
.textlink:hover { text-decoration: underline; text-underline-offset: .35em; }

/* ---------- 6. Draft banner (author review only) ---------- */
.draft-banner {
  background: repeating-linear-gradient(-45deg, #2b2210, #2b2210 10px, #33280f 10px, #33280f 20px);
  color: var(--lamp); font-family: var(--f-label); font-size: .82rem; letter-spacing: .06em;
  text-align: center; padding: .45rem 1rem;
}
.draft-banner b { font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-right: .5em; }
.draft-flag {
  font-family: var(--f-label); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #6a4a00; background: #f3dfa6; padding: .1em .45em; border-radius: 2px; margin-left: .4em; white-space: nowrap;
  font-style: normal; vertical-align: .12em;
}
body:not(.is-draft) .draft-flag { display: none; }

/* ---------- 7. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 22, 38, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  color: var(--mist);
  border-bottom: 1px solid var(--night-line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.25rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--mist);
  font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .02em; white-space: nowrap;
}
.wordmark svg { width: 22px; height: 40px; color: var(--lamp); flex: none; --logo-field: var(--night); }
.wordmark small { display: block; font-family: var(--f-label); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mist-soft); line-height: 1; margin-top: .2rem; }
.wordmark span { line-height: 1.05; }

.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .6rem; white-space: nowrap;
  font-family: var(--f-label); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--mist-soft); position: relative;
  transition: color var(--dur) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--mist); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .35rem; height: 1px; background: var(--lamp); }
.nav .btn { min-height: 40px; padding: .5em 1.1em; margin-left: .5rem; color: #fff; font-size: .8rem; }
.nav .btn:hover { color: #fff; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 44px; padding: .4rem .8rem;
  background: transparent; color: var(--mist); border: 1px solid var(--night-line); border-radius: var(--radius);
  font-family: var(--f-label); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.menu-toggle svg { width: 18px; height: 18px; }
@media (min-width: 76em) {
  .nav { display: block; }
  .menu-toggle { display: none; }
}

.drawer {
  position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--mist);
  display: flex; flex-direction: column; padding: var(--s-4) var(--s-4) var(--s-7);
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem; margin-bottom: var(--s-6); }
.drawer ul { list-style: none; padding: 0; margin: 0; }
.drawer li + li { border-top: 1px solid var(--night-line); }
.drawer a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-family: var(--f-display); font-size: 1.6rem; text-decoration: none; color: var(--mist);
}
.drawer a[aria-current="page"] { color: var(--lamp); }
.drawer .btn { width: 100%; margin-top: var(--s-6); }
.drawer__secondary { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.drawer__secondary a:not(.btn) { font-family: var(--f-label); font-size: .85rem; letter-spacing: .08em; min-height: 44px; color: var(--mist-soft); }
@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) { animation: drawer-in 260ms var(--ease-out); }
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 8. Book covers ---------- */
/* The cover is typeset in HTML over the artwork, so the title is always
   the settled one. Sizes scale with the cover's own width. */
.cover {
  container-type: inline-size;
  position: relative; display: block; aspect-ratio: 2 / 3; width: 100%;
  background: #1a1d24; overflow: hidden; border-radius: 1px 3px 3px 1px;
  box-shadow: var(--shadow-cover);
  color: #f3ead6; text-decoration: none;
}
.cover picture, .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover::after { /* the spine's crease */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4.5%;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.08) 45%, rgba(0,0,0,.12) 70%, transparent);
  pointer-events: none;
}
.cover__title {
  position: absolute; top: 8.5cqw; left: 0; right: 0; margin: 0; text-align: center;
  font-family: var(--f-display); font-weight: 400; line-height: .9; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.cover__title span { display: block; }
.cover__the { font-size: 7.4cqw; letter-spacing: .3em; margin-bottom: 1.6cqw; padding-left: .3em; }
.cover__big { font-size: 15.5cqw; }
.cover__of { font-size: 8cqw; letter-spacing: .2em; margin: 1.4cqw 0 1cqw; padding-left: .2em; font-style: italic; text-transform: lowercase; }
.cover__line { position: absolute; top: 58cqw; left: 0; right: 0; text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 3.6cqw; opacity: .85; }
.cover__author {
  /* the name sits centred in the dark strip along the foot of the cover */
  position: absolute; bottom: 0; left: 0; right: 0; height: 13cqw;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-family: var(--f-display); font-size: 6.2cqw; letter-spacing: .3em; padding-left: .3em;
}
.cover--sealed {
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(230, 200, 143, .14), transparent 60%),
    linear-gradient(180deg, #1b2440, #10172a);
  outline: 1px solid rgba(230, 200, 143, .28); outline-offset: -4.5cqw;
}
.cover--sealed .cover__title { top: 34%; }
.cover--sealed .cover__big { font-size: 12.5cqw; }
.cover--sealed .cover__seal {
  position: absolute; bottom: 22cqw; left: 50%; transform: translateX(-50%);
  font-family: var(--f-label); font-size: 4cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--lamp);
  padding-left: .3em;
}
.cover--sealed .cover__seal::before, .cover--sealed .cover__seal::after { content: ""; display: inline-block; width: 6cqw; height: 1px; background: currentColor; opacity: .6; vertical-align: middle; margin: 0 2cqw; }

/* ---------- 9. Home hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night); color: var(--mist);
  min-height: min(56rem, calc(100svh - 4.25rem));
  display: grid; align-items: center;
  padding-block: var(--s-8) var(--s-9);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 55%); }
.hero::before { /* the blackout: deep at the text side, lifting towards the light */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,22,38,.95) 0%, rgba(15,22,38,.84) 38%, rgba(15,22,38,.5) 66%, rgba(15,22,38,.4) 100%),
    linear-gradient(0deg, var(--night) 0%, transparent 30%);
}
/* the headline and its lines keep a soft shadow, so they stay clear over a face or a sky */
.hero__copy { text-shadow: 0 1px 16px rgba(8, 12, 22, .85); }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
.hero__copy { max-width: 36rem; }
.hero h1 { font-size: var(--step-5); line-height: .95; margin-bottom: var(--s-5); letter-spacing: -.01em; }
.hero h1 .the { display: block; font-size: .42em; letter-spacing: .32em; text-transform: uppercase; margin-bottom: .5em; color: var(--mist-soft); }
.hero__tagline { font-family: var(--f-display); font-style: italic; font-size: var(--step-2); color: var(--lamp); line-height: 1.25; margin-bottom: var(--s-5); }
.hero__meta { font-family: var(--f-label); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--mist-soft); margin-bottom: var(--s-6); }
.hero__meta b { color: var(--mist); font-weight: 500; }
.hero__cover { width: min(64vw, 21rem); margin-inline: auto; transform: rotate(-1.2deg); }
.hero__release { margin-top: var(--s-5); font-size: .95rem; color: var(--mist-soft); }
@media (min-width: 56em) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); }
  .hero__cover { width: min(100%, 23rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__cover { animation: cover-in 1100ms var(--ease-out) 150ms both; }
  .js .hero__copy > * { animation: rise 900ms var(--ease-out) both; }
  .js .hero__copy > *:nth-child(2) { animation-delay: 80ms; }
  .js .hero__copy > *:nth-child(3) { animation-delay: 160ms; }
  .js .hero__copy > *:nth-child(4) { animation-delay: 240ms; }
  .js .hero__copy > *:nth-child(5) { animation-delay: 320ms; }
  .js .hero__bg { animation: lamp-up 2200ms ease-out both; }
}
@keyframes cover-in { from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes lamp-up { from { opacity: .2; } }

/* ---------- 10. The hook ---------- */
.hook { text-align: center; }
.hook { padding-bottom: var(--s-6); }
.hook__text {
  font-family: var(--f-display); font-size: var(--step-2); line-height: 1.45; max-width: 44rem; margin-inline: auto;
}
.hook__text::first-line { font-variant-caps: small-caps; letter-spacing: .03em; }
.hook .orn-rule { margin-bottom: 0; }
.hero .eyebrow { color: var(--lamp); }

/* ---------- 11. The four doors (perforated coupons) ---------- */
.doors { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 40em) { .doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72em) { .doors { grid-template-columns: repeat(4, 1fr); } }
.door {
  --perf: var(--paper);
  position: relative; display: flex; flex-direction: column;
  background: #f8f3e8; color: var(--ink); text-decoration: none;
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.door::before { /* perforated top edge */
  content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; z-index: 2;
  background: radial-gradient(circle at 5px 5px, var(--perf) 3px, transparent 3.5px) 0 0 / 14px 10px repeat-x;
}
.door:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(10,14,24,.18), 0 18px 34px -12px rgba(10,14,24,.35); }
.door__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.door__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.85); transform: scale(1.02); transition: filter 600ms var(--ease-out), transform 900ms var(--ease-out); }
.door:hover .door__img img, .door:focus-visible .door__img img { filter: brightness(1) saturate(1); transform: scale(1.06); }
@media (hover: none) { .door__img img { filter: brightness(.9) saturate(.95); } }
.door__num {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1;
  font-family: var(--f-label); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mist); background: rgba(15,22,38,.7); padding: .3em .6em;
}
.door__body { padding: var(--s-5) var(--s-5) var(--s-4); display: flex; flex-direction: column; flex: 1; border-top: 1px dashed var(--paper-line); }
.door h3 { font-size: var(--step-2); margin-bottom: var(--s-2); }
.door p { font-size: 1rem; color: var(--ink-soft); margin-bottom: var(--s-4); }
.door .textlink { margin-top: auto; }
.door--plain .door__img { background: var(--night-2); display: grid; place-items: center; }
.door--plain .door__img svg { width: 30%; color: var(--lamp); opacity: .8; }

/* ---------- 12. Trilogy ---------- */
.trilogy { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 3vw, 3rem); max-width: 54rem; margin-inline: auto; align-items: end; }
.trilogy figure { margin: 0; text-align: center; }
.trilogy figcaption { margin-top: var(--s-4); }
.trilogy .num { display: block; font-family: var(--f-label); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-soft); }
.trilogy .ttl { display: block; font-family: var(--f-display); font-size: clamp(1rem, .8rem + 1vw, 1.45rem); line-height: 1.2; margin: .2em 0 .35em; }
.trilogy .status { font-family: var(--f-label); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lamp); }
.trilogy a { text-decoration: none; }
.trilogy__line { font-family: var(--f-display); font-style: italic; font-size: var(--step-2); color: var(--mist); margin-top: var(--s-7); }

/* ---------- 13. Free chapters / sign-up ---------- */
.chapters-offer { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 60em) { .chapters-offer { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.contents-list { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--paper-line); }
.contents-list li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--paper-line); }
.contents-list .n { font-family: var(--f-label); font-size: .78rem; letter-spacing: .1em; color: var(--clay); }
.contents-list .t { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.25; }
.contents-list .d { display: block; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.contents-list .w { font-family: var(--f-label); font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.night .contents-list { border-color: var(--night-line); }
.night .contents-list li { border-color: var(--night-line); }
.night .contents-list .n { color: var(--lamp); }
.night .contents-list .d, .night .contents-list .w { color: var(--mist-soft); }

/* The form card: a page torn from a printed pad */
.form-card {
  position: relative; background: #fbf7ee var(--grain); color: var(--ink);
  padding: var(--s-6) clamp(1.25rem, 4vw, 2.5rem) var(--s-6);
  box-shadow: var(--shadow-1);
  border-top: 3px double var(--paper-3);
}
.form-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px;
  background: radial-gradient(circle at 5px 10px, transparent 3px, #fbf7ee 3.5px) 0 0 / 14px 10px repeat-x;
}
.night .form-card { box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.form-card h2, .form-card h3 { font-size: var(--step-2); }
.form-card .eyebrow { color: var(--clay); }

.field { margin-bottom: var(--s-4); }
.field label, .fieldset legend { display: block; font-family: var(--f-label); font-size: .85rem; font-weight: 500; letter-spacing: .06em; margin-bottom: .35rem; color: var(--ink); }
.field .req { color: var(--red); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid #8f8a7e; border-radius: var(--radius);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(142, 79, 44, .25); }
.field .hint { font-size: .88rem; color: var(--ink-soft); margin-top: .3rem; }
.field-row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 36em) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin-bottom: var(--s-4); font-size: .95rem; line-height: 1.5; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--red); cursor: pointer; }
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-4); }
.form-fine { font-size: .86rem; color: var(--ink-soft); margin-top: var(--s-4); }
.form-fine a { color: var(--ink); }
.turnstile-slot { min-height: 70px; margin: var(--s-3) 0 var(--s-4); }
.form-status { display: flex; gap: .6rem; align-items: flex-start; padding: var(--s-3) var(--s-4); margin-top: var(--s-4); border-left: 3px solid; font-size: .95rem; }
.form-status[hidden] { display: none; }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.form-status--success { border-color: var(--hop); background: rgba(79, 93, 51, .1); color: #3c4726; }
.form-status--error { border-color: var(--red); background: rgba(155, 47, 36, .08); color: var(--red-deep); }

/* Footer's short form */
.mini-form { display: grid; gap: var(--s-3); }
.mini-form .row { display: grid; gap: var(--s-3); }
@media (min-width: 40em) { .mini-form .row { grid-template-columns: 1fr 1.4fr auto; align-items: end; } }
.mini-form label { font-family: var(--f-label); font-size: .82rem; letter-spacing: .06em; color: var(--mist-soft); display: block; margin-bottom: .3rem; }
.mini-form input[type="text"], .mini-form input[type="email"] {
  width: 100%; min-height: 48px; padding: .65rem .8rem; font: inherit; font-size: 1rem;
  background: var(--night-2); color: var(--mist); border: 1px solid rgba(233,227,214,.35); border-radius: var(--radius);
}
.mini-form input:focus { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(230,200,143,.25); }
.mini-form .check { display: grid; font-family: var(--f-serif); letter-spacing: 0; color: var(--mist-soft); font-size: .9rem; margin: 0; }
.mini-form .check input { accent-color: var(--lamp); }
.turnstile-slot:empty { min-height: 0; margin: 0; }
.mini-form .form-status--success { color: var(--hop-light); background: rgba(181,191,138,.08); border-color: var(--hop-light); }
.mini-form .form-status--error { color: var(--red-light); background: rgba(224,122,104,.08); border-color: var(--red-light); }

/* ---------- 14. Real history panel ---------- */
.real { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 60em) { .real { grid-template-columns: .9fr 1.1fr; gap: var(--s-8); } }
.real__img { position: relative; }
.real__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow-cover); }
.real__img figcaption { font-size: .85rem; color: var(--mist-soft); margin-top: var(--s-3); font-style: italic; }
.real h2 { font-size: var(--step-4); }
.roll { columns: 2; column-gap: var(--s-6); list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6); font-size: .95rem; }
.roll li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px solid var(--night-line); }
.roll b { display: block; font-weight: 500; color: var(--mist); }
.roll span { color: var(--mist-soft); font-size: .88rem; font-style: italic; }
@media (max-width: 30em) { .roll { columns: 1; } }

/* ---------- 15. Notices ---------- */
.notices { display: grid; gap: var(--s-5); }
@media (min-width: 48em) { .notices { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.notice {
  position: relative; background: #fbf7ee; padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: var(--shadow-1); border: 1px solid var(--paper-line);
}
.notice::before { /* a drawing pin */
  content: ""; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c9705f, var(--red) 60%, var(--red-deep));
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.notice time { display: block; font-family: var(--f-label); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: var(--s-2); }
.notice h3 { font-size: var(--step-1); margin-bottom: var(--s-3); }
.notice p { font-size: 1rem; color: var(--ink-soft); }
.notice p:last-child { margin-bottom: 0; }
.notice--fiction { background: #f4ecd9; }
.notice--fiction .kind { font-family: var(--f-label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hop); display: block; margin-bottom: var(--s-2); }
.notices--board .notice:nth-child(3n+1) { transform: rotate(-.4deg); }
.notices--board .notice:nth-child(3n+2) { transform: rotate(.35deg); }

/* ---------- 16. Page heads ---------- */
.pagehead { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pagehead h1 { margin-bottom: var(--s-4); }
.pagehead .lede { max-width: 40rem; color: var(--ink-soft); }
.night .pagehead .lede, .pagehead.night .lede { color: var(--mist-soft); }
.breadcrumb { font-family: var(--f-label); font-size: .8rem; letter-spacing: .08em; margin-bottom: var(--s-5); color: var(--ink-soft); }
.breadcrumb a { color: inherit; }
.night .breadcrumb { color: var(--mist-soft); }

/* The hero, one standard for every page that has one (the door pages, A Nation
   at War, The Real Patrol): same height, same overlay, and the text anchored
   from the top so the breadcrumb, eyebrow, title and subheading sit in exactly
   the same place on every page. A pencil or painted image fills the width,
   darkened from the left behind the text. */
.doorhead {
  position: relative; isolation: isolate; overflow: hidden; color: var(--mist); background: var(--night);
  min-height: clamp(20.8rem, 56svh, 36.8rem); display: flex; align-items: flex-start;
  padding-block: 4.625rem var(--s-8);
}
.doorhead__bg { position: absolute; inset: 0; z-index: -2; }
.doorhead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.doorhead__bg--flip img { transform: scaleX(-1); }
.doorhead .eyebrow, .pagehead.night .eyebrow { color: var(--lamp); }
.doorhead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,22,38,.92) 0%, rgba(15,22,38,.8) 34%, rgba(15,22,38,.38) 62%, rgba(15,22,38,.28) 100%), linear-gradient(0deg, rgba(15,22,38,.6) 0%, rgba(15,22,38,0) 14%); }
.doorhead h1 { font-size: var(--step-5); margin-bottom: var(--s-4); }
.doorhead .lede { max-width: 42rem; color: var(--mist); font-family: var(--f-serif); font-style: normal; font-size: var(--step-1); line-height: 1.55; }
.doorhead .breadcrumb { color: var(--mist-soft); }
.doorhead__credit { position: absolute; right: var(--s-4); bottom: var(--s-3); margin: 0; font-size: .8rem; font-style: italic; color: var(--mist-soft); }

/* ---------- 17. Chapter plates & captions ---------- */
.plate { margin: var(--s-7) 0; }
.plate img { width: 100%; height: auto; box-shadow: var(--shadow-1); }
.plate figcaption, .cap { margin-top: var(--s-3); font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.cap__ch { display: block; font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); }
.night .cap__ch { color: var(--mist); }
.night .cap { color: var(--mist-soft); }
.cap__date { font-style: italic; }
.plate--wide { width: min(100% - 2rem, 56rem); margin-inline: auto; }
.plates { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 40em) { .plates { grid-template-columns: 1fr 1fr; } }
.plates figure { margin: 0; }
.plates img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow-1); }

/* ---------- 18. The pencil note (The Letters) ---------- */
.pencil-note {
  position: relative; width: min(100%, 24rem); margin: var(--s-8) auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 14px 18px rgba(10,14,24,.22)) drop-shadow(0 2px 2px rgba(10,14,24,.12));
}
.pencil-note__paper {
  padding: 2rem 2rem 1.6rem; background: #fcf9f1 var(--grain); color: #4c4c4c;
  clip-path: polygon(0 3%, 6% 0, 18% 2%, 31% 0, 44% 1.5%, 58% 0, 71% 2%, 86% 0, 100% 2.5%, 98.5% 20%, 100% 41%, 98.8% 63%, 100% 84%, 98% 100%, 82% 98%, 66% 100%, 49% 98.5%, 33% 100%, 17% 98%, 2% 100%, 0 82%, 1.5% 60%, 0 37%, 1.2% 18%);
}
.pencil-note__writing { width: 100%; color: #5a5a5e; filter: blur(.75px); opacity: .9; }
.pencil-note figcaption { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid rgba(0,0,0,.08); font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: #57534a; }
.hero__bg picture, .doorhead__bg picture, .door__img picture { width: 100%; height: 100%; }

/* ---------- 19. Seasons (The Farm) ---------- */
.seasons { position: relative; }
.season { display: grid; gap: var(--s-5); padding-block: var(--s-7); border-top: 1px solid var(--paper-line); }
@media (min-width: 56em) { .season { grid-template-columns: 12rem 1fr; gap: var(--s-7); } }
.season__when { position: sticky; top: 6rem; align-self: start; }
.season__when .yr { display: block; font-family: var(--f-display); font-size: var(--step-4); line-height: 1; color: var(--clay); }
.season__when .sn { font-family: var(--f-label); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.season__plates { display: grid; gap: var(--s-6); }
@media (min-width: 40em) { .season__plates { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }
.season__plates figure { margin: 0; }
.season__plates img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow-1); }

/* ---------- 20. Book page ---------- */
.bookhead { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 56em) { .bookhead { grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--s-8); } }
.bookhead .cover { max-width: 22rem; margin-inline: auto; }
.blurb p:first-child::first-letter { font-family: var(--f-display); float: left; font-size: 3.6em; line-height: .82; padding: .06em .1em 0 0; color: var(--clay); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: var(--s-5) 0; font-size: .98rem; }
.facts dt { font-family: var(--f-label); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding-top: .2rem; }
.facts dd { margin: 0; }
.night .facts dt { color: var(--mist-soft); }

/* Buy buttons */
.buy { border: 1px solid var(--paper-line); background: #fbf7ee; padding: var(--s-5); }
.buy__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.buy__date { font-family: var(--f-display); font-size: var(--step-1); margin: 0; }
.country { display: inline-flex; border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
.country button { min-height: 40px; min-width: 52px; padding: .3rem .8rem; border: 0; background: transparent; font-family: var(--f-label); font-size: .82rem; letter-spacing: .1em; cursor: pointer; color: var(--ink-soft); }
.country button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.buy__formats { display: grid; gap: var(--s-3); }
@media (min-width: 36em) { .buy__formats { grid-template-columns: 1fr 1fr; } }
.buy__fmt { display: flex; flex-direction: column; gap: .4rem; }
.buy__fmt .label { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; }
.buy__fmt .btn { width: 100%; }
.buy__note { font-size: .9rem; color: var(--ink-soft); margin: var(--s-4) 0 0; }
.buy__pending { font-size: .92rem; color: var(--ink-soft); font-style: italic; padding: .7rem 0; }

/* ---------- 21. Spoiler gate (book clubs) ---------- */
.spoiler { border: 1px solid var(--paper-line); background: #fbf7ee; margin: var(--s-6) 0; }
.spoiler summary {
  list-style: none; cursor: pointer; display: flex; gap: var(--s-4); align-items: center; padding: var(--s-5);
  font-family: var(--f-display); font-size: var(--step-1); min-height: 56px;
}
.spoiler summary::-webkit-details-marker { display: none; }
.spoiler summary svg { width: 22px; height: 22px; flex: none; color: var(--red); transition: transform var(--dur) var(--ease-out); }
.spoiler[open] summary svg.chev { transform: rotate(180deg); }
.spoiler summary small { display: block; font-family: var(--f-serif); font-size: .9rem; color: var(--ink-soft); }
.spoiler__body { padding: 0 var(--s-5) var(--s-5); border-top: 1px dashed var(--paper-line); }
.spoiler__body ol { padding-left: 1.4rem; }
.spoiler__body li { margin-bottom: var(--s-3); }

/* ---------- 22. Real Patrol page ---------- */
.fiction-note { border-left: 3px solid var(--clay); padding: var(--s-4) var(--s-5); background: rgba(142,79,44,.07); font-size: 1rem; margin-bottom: var(--s-7); }
.men { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; gap: 0; border-top: 1px solid var(--paper-line); }
@media (min-width: 40em) { .men { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
.men li { padding: var(--s-3) 0; border-bottom: 1px solid var(--paper-line); }
.men b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.men span { font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.men .lead b::after { content: "Patrol leader"; margin-left: .6rem; font-family: var(--f-label); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); vertical-align: .2em; font-style: normal; }
.two-worlds { display: grid; gap: var(--s-5); margin: var(--s-6) 0; }
@media (min-width: 48em) { .two-worlds { grid-template-columns: 1fr 1fr; } }
.two-worlds > div { padding: var(--s-5); background: #fbf7ee; border: 1px solid var(--paper-line); }
.two-worlds h3 { font-size: var(--step-1); margin-bottom: var(--s-3); }
.two-worlds p { font-size: 1rem; margin-bottom: 0; }
.sources { font-size: .95rem; }
.sources li { margin-bottom: var(--s-3); }
.fact-status { font-family: var(--f-label); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hop); }

/* ---------- 23. Closing CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--step-3); }
.cta-band p { max-width: 34rem; margin-inline: auto; }

/* ---------- 24. Footer ---------- */
.site-footer { background: var(--night); color: var(--mist-soft); font-size: .95rem; }
.site-footer a { color: var(--mist); }
.footer__sign { padding-block: var(--s-8); border-bottom: 1px solid var(--night-line); display: grid; gap: var(--s-5); }
@media (min-width: 60em) { .footer__sign { grid-template-columns: 1fr 1.6fr; gap: var(--s-8); align-items: center; } }
.footer__sign h2 { font-size: var(--step-2); color: var(--mist); margin-bottom: var(--s-2); }
.footer__sign p { margin: 0; }
.footer__cols { padding-block: var(--s-7); display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; }
@media (min-width: 56em) { .footer__cols { grid-template-columns: 1.3fr repeat(4, 1fr); } }
.footer__cols h3 { font-family: var(--f-label); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lamp); margin-bottom: var(--s-3); }
.footer__cols ul { list-style: none; padding: 0; margin: 0; }
.footer__cols li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--mist-soft); }
.footer__cols li a:hover { color: var(--mist); text-decoration: underline; }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 56em) { .footer__brand { grid-column: auto; } }
.footer__brand p { max-width: 22rem; margin-top: var(--s-3); }
.footer__base { border-top: 1px solid var(--night-line); padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: .85rem; }

/* ---------- 25. Rights / plain pages ---------- */
.plain h2 { font-size: var(--step-2); margin-top: var(--s-7); }
.plain h3 { font-size: var(--step-1); margin-top: var(--s-5); }
.plain ul { padding-left: 1.2rem; }
.plain li { margin-bottom: var(--s-2); }
.callout { background: #fbf7ee; border: 1px solid var(--paper-line); padding: var(--s-5); margin: var(--s-6) 0; }

/* ---------- 26. 404 ---------- */
.lost { min-height: 70svh; display: grid; place-items: center; text-align: center; }
.lost .big { font-family: var(--f-display); font-size: clamp(5rem, 3rem + 10vw, 10rem); line-height: 1; color: var(--lamp); opacity: .9; margin: 0; }

/* ---------- 27. Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
  .js [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 70ms; }
  .js [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
  .js [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 210ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 28. Print ---------- */
@media print {
  .site-header, .site-footer, .draft-banner, .btn, form { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 29. A nation at war: searchlights, quotes, facts, timeline ---------- */
/* Searchlights over the Weald: two slow beams in the hero sky. Still, not
   animated, for anyone who has asked for reduced motion. */
.searchlights { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.searchlights span {
  position: absolute; bottom: -6%; width: 22vw; height: 135%;
  background: linear-gradient(to top, rgba(236, 228, 205, .2), rgba(236, 228, 205, .06) 45%, rgba(236, 228, 205, 0) 88%);
  clip-path: polygon(49% 100%, 51% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%; mix-blend-mode: screen; filter: blur(1px);
}
.searchlights span:nth-child(1) { left: -9%; transform: rotate(14deg); }
.searchlights span:nth-child(2) { left: 9%; transform: rotate(-6deg); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .searchlights span:nth-child(1) { animation: sweep-a 19s ease-in-out infinite alternate; }
  .searchlights span:nth-child(2) { animation: sweep-b 23s ease-in-out infinite alternate; }
}
@keyframes sweep-a { from { transform: rotate(4deg); } to { transform: rotate(30deg); } }
@keyframes sweep-b { from { transform: rotate(18deg); } to { transform: rotate(-14deg); } }

/* A quotation from the period, given room */
.quote-band { text-align: center; }
.said { margin: 0 auto; max-width: 48rem; }
.said p {
  font-family: var(--f-display); font-size: var(--step-3); line-height: 1.22; margin: 0;
  text-wrap: balance;
}
.said p::before { content: "\201C"; } .said p::after { content: "\201D"; }
.said footer { margin-top: var(--s-5); font-family: var(--f-label); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.night .said footer { color: var(--lamp); }
.said footer span { display: block; margin-top: .35rem; font-family: var(--f-serif); font-size: .92rem; letter-spacing: 0; text-transform: none; font-style: italic; color: var(--ink-soft); }
.night .said footer span { color: var(--mist-soft); }
.said--sm p { font-size: var(--step-2); }

/* The facts of it: a row of hard numbers */
.facts-row { display: grid; gap: var(--s-5) var(--s-6); grid-template-columns: 1fr; margin: var(--s-8) 0 0; padding: var(--s-6) 0 0; border-top: 1px solid var(--night-line); list-style: none; }
@media (min-width: 30em) { .facts-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) { .facts-row { grid-template-columns: repeat(4, 1fr); } }
.facts-row li { display: flex; flex-direction: column; gap: .3rem; }
.facts-row .n { font-family: var(--f-display); font-size: var(--step-4); line-height: 1; color: var(--lamp); font-variant-numeric: lining-nums; }
.facts-row .l { font-size: .95rem; line-height: 1.45; color: var(--mist-soft); }
.paper .facts-row, .paper-2 .facts-row { border-color: var(--paper-line); }
.paper .facts-row .n, .paper-2 .facts-row .n { color: var(--clay); }
.paper .facts-row .l, .paper-2 .facts-row .l { color: var(--ink-soft); }

.frontline { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 60em) { .frontline { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.frontline__copy p { color: var(--mist); }
.frontline__copy p.lede { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.35; }

/* History asides on the door pages */
.then { margin: var(--s-7) 0; padding: var(--s-5) var(--s-5) var(--s-4); background: var(--night); color: var(--mist); position: relative; }
.then .eyebrow { color: var(--lamp); margin-bottom: var(--s-3); }
.then h2, .then h3 { font-size: var(--step-1); margin: 0 0 var(--s-3); }
.then p { font-size: 1rem; color: var(--mist-soft); }
.then p:last-child { margin-bottom: 0; }
.then a { color: var(--lamp); }
.then .said { text-align: left; margin: var(--s-5) 0; }
.then .said p { font-size: var(--step-1); color: var(--mist); }
.then .said footer { color: var(--lamp); }
.then .said footer span { color: var(--mist-soft); }

/* The timeline */
.timeline { position: relative; }
.tl-year { position: sticky; top: 4.25rem; z-index: 5; background: var(--paper) var(--grain); padding: var(--s-4) 0 var(--s-3); border-bottom: 1px solid var(--paper-line); margin: 0 0 var(--s-4); }
.tl-year h2 { font-size: var(--step-4); margin: 0; color: var(--clay); line-height: 1; }
.tl-year p { margin: .3rem 0 0; font-family: var(--f-display); font-style: italic; color: var(--ink-soft); }
.tl-list { list-style: none; margin: 0 0 var(--s-8); padding: 0; }
.tl-item { display: grid; gap: var(--s-2) var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--paper-line); }
@media (min-width: 48em) { .tl-item { grid-template-columns: 11rem 1fr; } }
.tl-when { font-family: var(--f-label); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); padding-top: .35rem; }
.tl-what h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.tl-what p { margin-bottom: var(--s-3); }
.tl-what p:last-child { margin-bottom: 0; }
.tl-what blockquote { margin: var(--s-4) 0; padding-left: var(--s-5); border-left: 2px solid var(--clay); }
.tl-what blockquote p { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.35; margin-bottom: var(--s-2); }
.tl-what blockquote p::before { content: "\201C"; } .tl-what blockquote p::after { content: "\201D"; }
.tl-what blockquote footer { font-size: .88rem; font-style: italic; color: var(--ink-soft); }
.tl-novel { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: var(--s-2); padding: .35rem .7rem; background: rgba(79, 93, 51, .1); border-left: 2px solid var(--hop); font-size: .92rem; }
.tl-novel b { font-family: var(--f-label); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hop); font-weight: 500; }
.tl-item--novel { background: linear-gradient(90deg, rgba(79,93,51,.07), transparent 70%); }
.tl-item--key .tl-what h3 { font-size: var(--step-2); }
.tl-end { text-align: center; padding: var(--s-8) 0 var(--s-6); }
.tl-end p { font-family: var(--f-display); font-size: var(--step-2); max-width: 32rem; margin: 0 auto var(--s-5); }

/* A hero that slowly changes picture (The Farm, A Nation at War). The first
   picture is the base and is always underneath; each later picture fades in over
   the one before it, and is hidden once the next has fully covered it. The last
   fades out to reveal the first again. First picture 2 s, every other picture 3 s,
   fades 1.5 s. With reduced motion requested, only the first picture is shown.
   Loops: 21.5 s for five pictures (.cycle-set--4), 12.5 s for three (.cycle-set--2). */
.doorhead__bg--cycle .cycle { position: absolute; inset: 0; opacity: 0; }
.doorhead__bg--cycle .cycle__a { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
/* set of 5 pictures: loop 21.5 s */
  .cycle-set--4 .cycle--1 { animation: hero-cycle-4-1 21.5s linear infinite; }
  .cycle-set--4 .cycle--2 { animation: hero-cycle-4-2 21.5s linear infinite; }
  .cycle-set--4 .cycle--3 { animation: hero-cycle-4-3 21.5s linear infinite; }
  .cycle-set--4 .cycle--4 { animation: hero-cycle-4-4 21.5s linear infinite; }
/* set of 3 pictures: loop 12.5 s */
  .cycle-set--2 .cycle--1 { animation: hero-cycle-2-1 12.5s linear infinite; }
  .cycle-set--2 .cycle--2 { animation: hero-cycle-2-2 12.5s linear infinite; }
}
@keyframes hero-cycle-4-1 {
  0%, 9.3023% { opacity: 0; animation-timing-function: ease-in-out; }
  16.2791% { opacity: 1; }
  37.2093% { opacity: 1; }
  37.3023%, 100% { opacity: 0; }
}
@keyframes hero-cycle-4-2 {
  0%, 30.2326% { opacity: 0; animation-timing-function: ease-in-out; }
  37.2093% { opacity: 1; }
  58.1395% { opacity: 1; }
  58.2326%, 100% { opacity: 0; }
}
@keyframes hero-cycle-4-3 {
  0%, 51.1628% { opacity: 0; animation-timing-function: ease-in-out; }
  58.1395% { opacity: 1; }
  79.0698% { opacity: 1; }
  79.1628%, 100% { opacity: 0; }
}
@keyframes hero-cycle-4-4 {
  0%, 72.0930% { opacity: 0; animation-timing-function: ease-in-out; }
  79.0698% { opacity: 1; }
  93.0233% { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}
@keyframes hero-cycle-2-1 {
  0%, 16.0000% { opacity: 0; animation-timing-function: ease-in-out; }
  28.0000% { opacity: 1; }
  64.0000% { opacity: 1; }
  64.1600%, 100% { opacity: 0; }
}
@keyframes hero-cycle-2-2 {
  0%, 52.0000% { opacity: 0; animation-timing-function: ease-in-out; }
  64.0000% { opacity: 1; }
  88.0000% { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}

.season__plates figure.plate-land img { aspect-ratio: 5 / 4; }

.drawer .drawer__top a.wordmark { font-size: 1.2rem; min-height: 0; justify-content: flex-start; gap: .7rem; }
@media (max-width: 26em) { .drawer .drawer__top a.wordmark { font-size: 1.1rem; gap: .55rem; } .drawer .drawer__top a.wordmark small { letter-spacing: .18em; } }

/* Text pages (rights, author, privacy, terms, accessibility, book clubs): a picture on the
   left, and everything else, the title block and the body text, in one column beside it. */
.pagetop { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.pagebody { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 56em) {
  .pagebody { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: var(--s-8); }
  .pagebody__side { position: sticky; top: 6rem; }
}
.pagebody__main { max-width: 40rem; }
.pagebody__main h1 { margin-bottom: var(--s-4); }
.pagebody__main .lede { color: var(--ink-soft); margin-bottom: var(--s-6); }
.pagebody__main .prose { width: auto; max-width: none; margin: 0; }
.pagebody__main .prose + .prose { margin-top: var(--s-7); }
.pagebody__main .prose > h2:first-child { margin-top: 0; }
@media (max-width: 55.99em) { .pagebody__side .placeholder { max-width: 15rem; } }

/* A stand-in for a picture still to come: not mistakable for the real thing. */
.placeholder {
  position: relative; width: 100%; max-width: 22rem; margin-inline: auto; aspect-ratio: 4 / 5;
  display: grid; place-content: center; justify-items: center; gap: var(--s-3); text-align: center;
  background: var(--night-2); color: var(--lamp); box-shadow: var(--shadow-cover);
  --logo-field: var(--night-2);
}
.placeholder::before { content: ""; position: absolute; inset: var(--s-3); border: 1px dashed rgba(230, 200, 143, .45); pointer-events: none; }
.placeholder svg { width: 38px; height: 70px; opacity: .9; }
.placeholder figcaption { font-family: var(--f-label); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-soft); }
.placeholder .draft-flag { display: block; margin: var(--s-2) 0 0; }


/* The placeholder frame (navy, with its dotted line) holding a real picture: the picture sits
   inside the frame, in the margin the dotted line leaves. One picture, never two. */
.placeholder--filled { display: block; }
.placeholder--filled picture { position: absolute; inset: 1.5rem; }
.placeholder--filled img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* The book club questions: ten numbered themes, each a title and a question. */
.questions { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.questions li { counter-increment: q; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--paper-line); }
.questions li:first-child { border-top: 0; }
.questions li::before { content: counter(q); grid-row: 1 / span 2; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--clay); font-variant-numeric: lining-nums; }
.questions h2 { grid-column: 2; font-size: var(--step-1); margin: 0 0 var(--s-2); }
.questions p { grid-column: 2; margin: 0; }
.spoiler__body .questions li { margin-bottom: 0; }

/* The covers for Books Two and Three: the title is typeset over softened artwork, like Book One's. */
.cover__sub { display: block; margin-top: 1.4cqw; padding-left: .08em; font-size: 10.8cqw; letter-spacing: .1em; line-height: 1; }
/* the small italic "of" that sits before the last word of a title, as on Book One */
.cover__sub .cover__ofw { display: inline; font-size: .74em; letter-spacing: .06em; margin-right: .3em; font-style: italic; text-transform: lowercase; }

/* The Shadows of War book page: the bands are trimmed, so the page reads as one piece
   rather than as separate, widely spaced blocks. */
.book-page main > section { padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); }
.book-page main > section:first-child { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Home hero montage: a picture can be zoomed from the left edge, to slide its people into the gap
   between the headline and the cover. */
.hero__bg .cycle img { transform: translateX(var(--dx, 0%)) scale(var(--zoom, 1)); transform-origin: var(--origin, 0% 50%); }
/* on wide screens the picture is as wide as the hero, so the heads are placed a fixed distance below the top,
   whatever the screen's width (a percentage would drift as the width changes) */
@media (min-width: 48em) { .hero__bg .cycle img { object-position: var(--pos-wide, var(--pos, 50% 55%)); } }
/* when a picture is slid to the right, its left edge fades out in the dark text side, so it never shows as an edge */
.hero__bg .cycle { -webkit-mask-image: linear-gradient(90deg, transparent var(--edge, 0%), #000 calc(var(--edge, 0%) + 10%)); mask-image: linear-gradient(90deg, transparent var(--edge, 0%), #000 calc(var(--edge, 0%) + 10%)); }

/* ---------- A Nation at War: the long-form history ---------- */
.essay-intro { padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem) 0; }
.essay-intro + .essay { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.essay-intro__inner { max-width: 54rem; text-align: center; }
.essay-intro__stand {
  font-family: var(--f-display); font-style: italic; font-size: var(--step-3); line-height: 1.2;
  color: var(--ink); margin: 0 auto; max-width: 22em; text-wrap: balance;
}
.essay-intro__stand::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--clay); margin: var(--s-5) auto 0; opacity: .7; }
.essay-toc { border-block: 1px solid var(--paper-line); padding: var(--s-5) 0; }
.essay-toc .eyebrow { margin-bottom: var(--s-3); }
.essay-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); }
.essay-toc a {
  display: inline-block; padding: .5rem 0; font-family: var(--f-label); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.essay-toc a:hover, .essay-toc a:focus-visible { color: var(--clay); border-bottom-color: currentColor; }
.essay-intro__flag { margin: var(--s-4) 0 0; }

.essay { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.essay--last { padding-bottom: clamp(4rem, 3rem + 5vw, 7.5rem); }
.essay__grid { display: grid; gap: var(--s-5); }
.essay__head h2 { font-size: var(--step-3); line-height: 1.1; margin: 0; text-wrap: balance; }
.essay__head h2::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--clay); margin-top: var(--s-4); opacity: .7; }
.essay__sub { display: block; margin-top: var(--s-3); font-family: var(--f-serif); font-style: italic; font-size: var(--step-0); line-height: 1.4; color: var(--ink-soft); }
.essay__body { max-width: var(--measure); }
.essay__body p { font-family: var(--f-serif); font-size: var(--step-0); line-height: 1.75; margin: 0 0 1.25em; }
.essay__body p:last-child { margin-bottom: 0; }
.essay__body > p:first-child::first-letter {
  float: left; font-family: var(--f-display); font-size: 4.3em; line-height: .8; color: var(--clay);
  padding: .08em .1em 0 0;
}
.essay__body a { color: var(--clay); }
@media (min-width: 60em) {
  .essay__grid { grid-template-columns: minmax(14rem, 19rem) minmax(0, var(--measure)); justify-content: center; gap: clamp(3rem, 1rem + 4vw, 6rem); }
  .essay__head { position: sticky; top: 6.5rem; align-self: start; }
}

/* full-width pictures between the sections */
.band { margin: 0; position: relative; height: clamp(14rem, 8rem + 26vw, 34rem); overflow: hidden; background: var(--night); }
.band picture, .band img { display: block; width: 100%; height: 100%; }
.band img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 10px 18px -12px rgba(10, 14, 24, .55), inset 0 -10px 18px -12px rgba(10, 14, 24, .55); }

/* the timeline that follows */
.tl-section .tl-year { background: var(--paper-2) var(--grain); }
.tl-section__title { font-size: var(--step-3); margin: 0 0 var(--s-3); }
@media (max-width: 40em) { .band img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }