/* eldervane - the service record
   Base reference: Fidele Editions (risograph ink on warm paper stock).
   Adapted: the theme prints ONE ink. This record needs TWO, because the whole
   site is a comparison between two store dates that have drifted apart.
   So the page is set as a two-plate riso print: a federal-blue plate and a
   fluorescent-pink plate. Where the two plates fail to register - the offset
   shadows, the hatched gap bars, the doubled hero word - that misregistration
   IS the finding. Flat ink, zero blur, zero gradients, radius 0. */

:root {
  --paper:      #f4f0e4;   /* cream press stock */
  --sheet:      #fbf8ef;   /* the lighter plate a block is printed on */
  --sheet-edge: #e6e0cd;
  --ink:        #151310;   /* press black */
  --carbon:     #39352c;
  --ash:        #6f6a5e;   /* meta text, AA on both stocks */
  --rule:       #cfc7b0;

  /* the two plates. every state on this site is one or the other. */
  --in-service: #2b2a86;   /* plate A - federal blue */
  --lapsed:     #d1145a;   /* plate B - fluorescent pink, AA on paper */
  --dormant:    #8a8579;

  --pink-loud:  #e8336d;   /* plate B at full fluorescence: graphics + 24px+ only */
  --navy-deep:  #201f68;   /* plate A flooded solid for full bands */
  --navy-soft:  #4a49a8;   /* plate A on dark stock */
  --cream:      #f4f0e4;

  --grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text:    "Newsreader", Georgia, serif;

  --gutter: clamp(18px, 5.2vw, 92px);
  --band:   clamp(52px, 7.2vw, 118px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(16.5px, 0.62vw + 15px, 19px);
  line-height: 1.6;
  font-weight: 400;
  /* riso stock: a fine dot screen, not a paper fibre. barely visible, but it
     stops the cream reading as a flat browser background. */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(43, 42, 134, .055) 1px, transparent 0),
    radial-gradient(circle at 3px 4px, rgba(209, 20, 90, .035) 1px, transparent 0);
  background-size: 6px 6px, 7px 7px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--pink-loud); color: var(--sheet); }

.pad { padding-inline: var(--gutter); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--pink-loud);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  font-family: var(--grotesk);
  font-size: 12px;
}
.skip:focus {
  left: 8px; top: 8px;
  z-index: 20;
  background: var(--in-service);
  color: var(--cream);
  padding: 10px 14px;
  text-decoration: none;
}

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--grotesk);
  font-weight: 700;
  line-height: 1.0;
  margin: 0;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(40px, 8.2vw, 104px); line-height: .93; letter-spacing: -0.05em; }
h2 { font-size: clamp(28px, 4.2vw, 54px); line-height: .98; letter-spacing: -0.04em; }
h3 { font-size: clamp(23px, 2.5vw, 34px); letter-spacing: -0.03em; }

p { margin: 0 0 1.05em; }
.measure { max-width: 63ch; }
.measure-tight { max-width: 52ch; }

.lede {
  font-size: clamp(18px, 1.35vw + 14px, 25px);
  line-height: 1.4;
  color: var(--carbon);
}

/* every small label on the site is the same object: grotesk, caps, wide-tracked.
   the tracking contrast against the crushed display sizes is the type signature. */
.tag {
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--in-service);
  display: block;
  margin-bottom: 12px;
}

.tag-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 4px solid var(--in-service);
  padding-top: 11px;
  margin-bottom: clamp(24px, 3.2vw, 44px);
}
.tag-rule .tag { margin: 0; }
/* the section number is set big and hollow, like a plate registration mark */
.tag-rule .tag-no {
  margin-left: auto;
  font-size: clamp(15px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--lapsed);
  -webkit-text-stroke: 0;
}

.note {
  font-family: var(--grotesk);
  font-size: 13.5px;
  line-height: 1.62;
  letter-spacing: .005em;
  color: var(--carbon);
}

.caveat {
  border-left: 5px solid var(--lapsed);
  background: rgba(209, 20, 90, .05);
  padding: 12px 0 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--carbon);
  margin: 22px 0 0;
  max-width: 58ch;
}
.caveat b {
  font-family: var(--grotesk); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lapsed); display: block;
  margin-bottom: 5px; font-weight: 700;
}

/* a word that is deliberately NOT claimed. printed as a pink overprint patch. */
.unconfirmed {
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sheet);
  background: var(--lapsed);
  padding: 2px 7px 3px;
  white-space: nowrap;
}

/* ---------- header ---------- */

/* the masthead is the blue plate flooded solid - the site announces its ink
   before it says anything else. */
.masthead { background: var(--in-service); color: var(--cream); }

.masthead-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-block: 16px 14px;
}

.wordmark {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(23px, 2.4vw, 30px);
  letter-spacing: -0.05em;
  text-decoration: none;
  line-height: 1;
  /* the wordmark is printed twice, 2px out of register. */
  text-shadow: 2px 2px 0 var(--pink-loud);
}
.wordmark span {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(244, 240, 228, .72);
  margin-top: 6px;
  text-shadow: none;
}

.stampline {
  font-family: var(--grotesk);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 240, 228, .7);
  margin-bottom: 0;
  /* on narrow screens the date line drops to its own row and the toggle stays
     beside the wordmark, rather than the line shoving the button down */
  order: 3;
  flex: 1 0 100%;
}
@media (min-width: 700px) {
  .stampline { order: 0; flex: 0 1 auto; margin-left: auto; }
}
.stampline b { color: var(--cream); font-weight: 700; }

.nav-toggle {
  margin-left: auto;
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--pink-loud);
  border: 0;
  color: var(--sheet);
  padding: 9px 14px;
  cursor: pointer;
}

.nav {
  display: none;
  background: var(--navy-deep);
  padding-block: 4px 12px;
}
.nav[data-open="true"] { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { border-bottom: 1px solid rgba(244, 240, 228, .16); }
.nav a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
}
.nav a[aria-current="page"] { color: var(--pink-loud); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block; padding-block: 0; }
  .nav ul { display: flex; gap: clamp(18px, 2.4vw, 38px); }
  .nav li { border-bottom: 0; }
  .nav a { padding: 12px 0; font-size: 12px; }
  .nav a:hover { color: var(--pink-loud); }
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(44px, 6.2vw, 92px) clamp(36px, 5vw, 70px); }

.hero-grid { display: grid; gap: clamp(32px, 4.2vw, 60px); }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr); align-items: end; }
}

.hero h1 { text-wrap: balance; }
/* the one word the whole record turns on, printed off-register in the second ink */
.hero h1 em {
  font-style: normal;
  color: var(--in-service);
  text-shadow: 3px 3px 0 var(--pink-loud);
}

.hero-sub { margin-top: clamp(20px, 2.2vw, 30px); max-width: 54ch; }

.trustline {
  font-family: var(--grotesk);
  font-size: 13px;
  line-height: 1.7;
  color: var(--carbon);
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  margin-top: clamp(24px, 2.8vw, 34px);
  max-width: 56ch;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ---------- buttons ---------- */

/* a button is a block of ink with the second plate showing behind it.
   pressing it pushes the block into its own offset - no blur, no easing tricks. */
.btn {
  display: inline-block;
  position: relative;
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  border: 2px solid var(--ink);
  background: var(--in-service);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--pink-loud);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--pink-loud); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--pink-loud); }

.btn-ghost { background: transparent; color: var(--ink); box-shadow: 5px 5px 0 var(--in-service); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); box-shadow: 2px 2px 0 var(--in-service); }

.btn-sm { padding: 10px 15px; font-size: 11px; box-shadow: 4px 4px 0 var(--pink-loud); }
.btn-ghost.btn-sm { box-shadow: 4px 4px 0 var(--in-service); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* ---------- the two-date device (the whole point of this site) ---------- */

/* two plates side by side. one is printed in blue, one in pink, and the
   reader is meant to see the disagreement before reading a word. */
.dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 3px solid var(--ink);
  background: var(--sheet);
  box-shadow: 9px 9px 0 var(--in-service);
}

.date-cell { padding: 18px clamp(14px, 1.7vw, 24px) 20px; }
.date-cell + .date-cell { border-left: 3px solid var(--ink); }

.date-cell .store {
  font-family: var(--grotesk);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
  display: block;
  margin-bottom: 11px;
}
.date-cell time {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
}
.date-cell .since {
  font-family: var(--grotesk);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--carbon);
  margin-top: 11px;
  display: block;
}
.date-cell[data-state="fresh"] time { color: var(--in-service); }
.date-cell[data-state="stale"] time { color: var(--lapsed); }
.date-cell[data-state="gone"] time { color: var(--ash); text-decoration: line-through; }
/* a lapsed cell also gets a pink tint, so the state survives a greyscale print */
.date-cell[data-state="stale"] { background: rgba(232, 51, 109, .07); }
.date-cell[data-state="gone"]  { background: rgba(21, 19, 16, .05); }

/* the gap rail: release ---- today, with both store ticks on it */

.rail {
  border: 3px solid var(--ink);
  border-top: 0;
  background: var(--sheet);
  padding: 18px clamp(14px, 1.7vw, 24px) 16px;
  box-shadow: 9px 9px 0 var(--in-service);
}
/* dates and rail share one continuous offset: the right-hand strips of the two
   shadows meet exactly, so the pair reads as a single mis-registered block */

.rail-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 17px;
}
.rail-head b { color: var(--ink); font-weight: 700; letter-spacing: .1em; }
.rail-head .gap-figure {
  margin-left: auto;
  color: var(--sheet);
  background: var(--lapsed);
  padding: 3px 8px 4px;
  font-weight: 700;
  letter-spacing: .1em;
}
.rail-head .gap-figure[data-zero="true"] { background: var(--in-service); }

.track {
  position: relative;
  height: 36px;
  border-bottom: 2px solid var(--ink);
}

.track .life {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rule);
}

/* the hatched span between the two store dates - this IS the finding.
   it is literally the two plates overprinting each other. */
.track .gap {
  position: absolute;
  bottom: 0;
  height: 24px;
  background-image: repeating-linear-gradient(-45deg,
    var(--pink-loud) 0 2px, transparent 2px 7px);
  border-left: 2px solid var(--lapsed);
  border-right: 2px solid var(--lapsed);
}

.track .tick {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 24px;
  background: var(--ink);
  transform: translateX(-2.5px);
}
.track .tick[data-store="ios"] { height: 32px; background: var(--carbon); }
.track .tick[data-state="fresh"] { background: var(--in-service); }
.track .tick[data-state="stale"] { background: var(--lapsed); }

.track .tick span {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--grotesk);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
/* ticks close to either end would push their label off the sheet */
.track .tick[data-align="end"] span { left: auto; right: 0; transform: none; }
.track .tick[data-align="start"] span { left: 0; transform: none; }

.track .origin {
  position: absolute;
  bottom: 0; left: 0;
  width: 2px; height: 13px;
  background: var(--ash);
}

.rail-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--grotesk);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 8px;
  margin-bottom: 0;
}

/* ---------- verdict stamp ---------- */

/* a solid inked block, knocked out in cream, set slightly askew - a stamp
   pressed by hand rather than a status pill rendered by a component library. */
.stamp {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: clamp(11px, 1vw, 13.5px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--in-service);
  color: var(--sheet);
  border: 0;
  padding: 8px 14px 7px;
  transform: rotate(-2.4deg);
  line-height: 1;
}
.stamp[data-verdict="split"]   { background: var(--lapsed); }
.stamp[data-verdict="dormant"] { background: var(--dormant); }
.stamp[data-verdict="out"]     { background: var(--pink-loud); color: var(--navy-deep); transform: rotate(-3.6deg); }

/* ---------- entries ---------- */

.entries { padding-block: var(--band) 0; }

.entry { padding-block: clamp(34px, 4vw, 62px); border-top: 2px solid var(--rule); }
.entry:first-of-type { border-top: 4px solid var(--ink); }

.entry-head { display: grid; gap: 16px; margin-bottom: clamp(22px, 2.6vw, 32px); }
@media (min-width: 780px) {
  .entry-head { grid-template-columns: 1fr auto; align-items: start; gap: 26px; }
}

.entry-no {
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--lapsed);
  margin-bottom: 10px;
  display: block;
}
.entry-head h3 { text-wrap: balance; }
.entry-studio {
  font-family: var(--grotesk);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ash);
  margin-top: 11px;
}

.entry-body { display: grid; gap: clamp(26px, 3.2vw, 48px); margin-top: clamp(30px, 3.4vw, 46px); }
@media (min-width: 900px) {
  .entry-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .entry-body[data-shape="img-left"] .entry-shot { order: -1; }
  .entry-body[data-shape="narrow"] { grid-template-columns: minmax(0, 1.55fr) minmax(200px, 0.45fr); }
  .entry-body[data-shape="wide-text"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
}

.entry-shot figure { margin: 0; }
.entry-shot img { border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--pink-loud); }
/* the one portrait frame in the record must not become a column of its own */
.entry-shot img[width="620"] { max-height: 62vh; width: auto; }
.entry-shot figcaption {
  font-family: var(--grotesk);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ash);
  margin-top: 16px;
  max-width: 42ch;
}

/* spec list: the printed lines of a service booklet, re-set in grotesk */
.spec { margin: 0; font-family: var(--grotesk); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.spec div {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.spec dt { color: var(--in-service); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; font-weight: 600; flex: 1 0 100%; padding-top: 3px; }
.spec dd { margin: 0; flex: 1 1 100%; }
@media (min-width: 480px) {
  .spec div { flex-wrap: nowrap; }
  .spec dt { flex: 0 0 38%; }
  .spec dd { flex: 1 1 auto; }
}

.entry-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }

/* ---------- service board (shared 2010-2026 axis) ---------- */

.board { padding-block: var(--band); background: var(--sheet); border-block: 4px solid var(--ink); margin-top: var(--band); }

.board-scroll { overflow-x: auto; padding-bottom: 8px; }
.board-inner { min-width: 620px; }

.board-axis {
  position: relative;
  height: 22px;
  border-bottom: 2px solid var(--ink);
}
.board-axis span {
  position: absolute;
  bottom: 4px;
  font-family: var(--grotesk);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ash);
  transform: translateX(-50%);
}

.board-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.board-row .name { font-family: var(--grotesk); font-size: 12.5px; line-height: 1.35; margin-bottom: 0; }
.board-row .name b { font-weight: 700; display: block; letter-spacing: -.01em; }
.board-row .name i { font-style: normal; color: var(--ash); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

.board-lane { position: relative; height: 32px; }
.board-lane .life { position: absolute; top: 15px; height: 2px; background: var(--rule); }
.board-lane .gap {
  position: absolute; top: 6px; height: 20px;
  background-image: repeating-linear-gradient(-45deg, var(--pink-loud) 0 2px, transparent 2px 7px);
  border-left: 2px solid var(--lapsed); border-right: 2px solid var(--lapsed);
}
.board-lane .pt { position: absolute; top: 6px; width: 5px; height: 20px; transform: translateX(-2.5px); }
.board-lane .pt[data-k="rel"] { background: var(--ash); height: 11px; top: 11px; }
.board-lane .pt[data-k="play"] { background: var(--in-service); }
.board-lane .pt[data-k="play-old"] { background: var(--lapsed); }
.board-lane .pt[data-k="ios"] { background: var(--carbon); }
.board-lane .pt[data-k="ios-old"] { background: var(--lapsed); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--grotesk); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--carbon); margin-top: 24px; }
.legend i { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
.legend .k-rel { background: var(--ash); }
.legend .k-play { background: var(--in-service); }
.legend .k-ios { background: var(--carbon); }
.legend .k-gap { background-image: repeating-linear-gradient(-45deg, var(--pink-loud) 0 2px, transparent 2px 6px); border: 2px solid var(--lapsed); }

/* ---------- generic bands ---------- */

.band { padding-block: var(--band); }
.band-tight { padding-block: clamp(38px, 4.8vw, 74px); }

.split { display: grid; gap: clamp(26px, 3.4vw, 54px); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split-flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---------- out of print: the plate floods solid ---------- */

.outofprint {
  background: var(--navy-deep);
  color: var(--cream);
  padding-block: var(--band);
  /* the dot screen survives onto the dark plate, in the pink ink */
  background-image: radial-gradient(circle at 2px 2px, rgba(232, 51, 109, .16) 1px, transparent 0);
  background-size: 8px 8px;
}
.outofprint h2, .outofprint h3 { color: var(--cream); }
.outofprint .tag { color: var(--pink-loud); }
.outofprint .tag-rule { border-top-color: var(--pink-loud); }
.outofprint .tag-no { color: var(--cream); }
.outofprint .caveat { border-left-color: var(--pink-loud); background: rgba(232, 51, 109, .12); color: #e3ded1; }
.outofprint .caveat b { color: var(--pink-loud); }
.outofprint .dates, .outofprint .rail { background: #191862; border-color: var(--cream); box-shadow: 9px 9px 0 var(--pink-loud); }
.outofprint .date-cell + .date-cell { border-left-color: var(--cream); }
.outofprint .date-cell[data-state="stale"] { background: rgba(232, 51, 109, .14); }
.outofprint .date-cell[data-state="gone"] { background: rgba(244, 240, 228, .06); }
.outofprint .date-cell .store { color: rgba(244, 240, 228, .66); }
.outofprint .date-cell .since { color: rgba(244, 240, 228, .8); }
.outofprint .date-cell[data-state="stale"] time { color: var(--pink-loud); }
.outofprint .date-cell[data-state="gone"] time { color: rgba(244, 240, 228, .62); }
.outofprint .track { border-bottom-color: var(--cream); }
.outofprint .track .tick[data-state="stale"] { background: var(--pink-loud); }
.outofprint .rail-head, .outofprint .rail-foot, .outofprint .track .tick span { color: rgba(244, 240, 228, .68); }
.outofprint .rail-head b { color: var(--cream); }
.outofprint .btn { border-color: var(--cream); background: var(--cream); color: var(--navy-deep); box-shadow: 5px 5px 0 var(--pink-loud); }
.outofprint .btn:hover { box-shadow: 2px 2px 0 var(--pink-loud); }
.outofprint .btn-sm { box-shadow: 4px 4px 0 var(--pink-loud); }
.outofprint .spec dt { color: var(--pink-loud); }
.outofprint .spec div { border-bottom-color: rgba(244, 240, 228, .22); }
.outofprint .entry-shot img { border-color: var(--cream); box-shadow: 10px 10px 0 var(--pink-loud); }
.outofprint .entry-shot figcaption { color: rgba(244, 240, 228, .7); }
.outofprint .note { color: #ded9cb; }
.outofprint .lede { color: #e3ded1; }
.outofprint .stamp[data-verdict="out"] { color: var(--pink-loud); -webkit-text-fill-color: var(--navy-deep); }

/* ---------- pick ---------- */

.pick {
  border: 3px solid var(--ink);
  background: var(--sheet);
  padding: clamp(24px, 3vw, 42px);
  box-shadow: 12px 12px 0 var(--in-service);
}

/* ---------- faq ---------- */

.faq { border-top: 4px solid var(--ink); }
.faq details { border-bottom: 2px solid var(--rule); }
.faq details[open] { background: rgba(43, 42, 134, .04); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 21px 44px 21px 0;
  position: relative;
  font-family: var(--grotesk);
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.24;
}
.faq summary:hover { color: var(--in-service); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--grotesk);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: var(--lapsed);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 66ch; padding-right: 20px; }
.faq details > p:last-child { padding-bottom: 12px; }
.faq details[open] p { padding-left: 0; }

/* ---------- subscribe ---------- */

.subscribe { background: var(--sheet); border-block: 4px solid var(--ink); padding-block: var(--band); }

.form-grid { display: grid; gap: 18px; max-width: 520px; }
.field label {
  display: block;
  font-family: var(--grotesk);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--in-service);
  margin-bottom: 7px;
}
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%;
  font-family: var(--grotesk);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 12px 13px;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--pink-loud); outline-offset: 1px;
}

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.46; color: var(--carbon); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lapsed); flex: 0 0 auto; }

.success {
  display: none;
  border: 3px solid var(--in-service);
  background: rgba(43, 42, 134, .07);
  color: var(--in-service);
  font-family: var(--grotesk);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 14px 16px;
}
.success[data-shown="true"] { display: block; }

.form-legal { font-family: var(--grotesk); font-size: 12px; line-height: 1.68; color: var(--carbon); max-width: 62ch; margin-top: 22px; }
.form-legal a { color: var(--lapsed); }

/* ---------- footer ---------- */

/* the blue plate floods again at the bottom, closing the print */
.site-foot {
  background: var(--in-service);
  color: var(--cream);
  padding-block: clamp(38px, 4.4vw, 66px) 30px;
}
.foot-grid { display: grid; gap: 30px; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; } }

.foot-grid h4 {
  font-family: var(--grotesk); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--pink-loud); font-weight: 700; margin-bottom: 14px;
}
.foot-grid .note { color: rgba(244, 240, 228, .82); }
.foot-grid a { color: var(--cream); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; font-family: var(--grotesk); font-size: 13.5px; line-height: 2; }
.foot-grid ul a { text-decoration: none; }
.foot-grid ul a:hover { color: var(--pink-loud); }

.disclaimer {
  border-top: 2px solid rgba(244, 240, 228, .3);
  margin-top: 36px;
  padding-top: 18px;
  font-family: var(--grotesk);
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(244, 240, 228, .72);
  max-width: 96ch;
}
.copyline { font-family: var(--grotesk); font-size: 11.5px; color: rgba(244, 240, 228, .72); margin: 16px 0 0; letter-spacing: .07em; }

/* ---------- legal / text pages ---------- */

/* text pages are set as a single measured column rather than a full-width
   block with a 68ch paragraph adrift in it; each h2 opens on its own rule */
.doc { padding-block: clamp(38px, 4.8vw, 74px) var(--band); max-width: 900px; }
.doc h2 {
  font-size: clamp(23px, 2.1vw, 32px);
  margin-top: clamp(36px, 3.8vw, 54px);
  margin-bottom: 14px;
  border-top: 3px solid var(--in-service);
  padding-top: 16px;
}
.doc h3 { font-size: clamp(18px, 1.4vw, 22px); margin-top: 28px; margin-bottom: 9px; }
.doc p, .doc li { max-width: 68ch; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 9px; }
.doc .updated {
  font-family: var(--grotesk); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lapsed);
}

.doc-lead { border-left: 5px solid var(--in-service); padding-left: 18px; }

/* ---------- 404 ---------- */

.gone-page { min-height: 56vh; display: flex; align-items: center; padding-block: var(--band); }

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  .rise[data-seen="true"] { opacity: 1; transform: none; }
}