/* ==========================================================================
   MURDATE — homepage

   Built to the design comp: cream page, navy ink, cobalt actions, red
   accents. The book is a 3D render sitting directly on the page's own
   cream, so it carries its own spine and shadow and needs no frame.

   Colours below are sampled straight from the comp.

   The only moving thing is the page of dates inside the case file, which
   loops. Everything else is static apart from ordinary hover feedback.
   ========================================================================== */

/* --------------------------------------------------
   1. Tokens
   -------------------------------------------------- */
/* Everything below is sampled off the cover: a cobalt field, white
   paper pinned to it, and red for anything struck out or circled.
   Three colours and no more — the cover's gold is deliberately absent,
   so nothing on the page competes with cobalt for an action. */
:root{
  /* surfaces */
  --page:      #FCF9F4;   /* matches the render's own background exactly */
  --card:      #FFFDF8;   /* the paper pinned to the cover */
  --tile:      #FFFFFF;

  /* ink — the cover's near-black cobalt, not a neutral */
  --ink:       #06183C;
  --ink-80:    rgba(6,24,60,.80);
  --ink-60:    rgba(6,24,60,.60);
  --ink-28:    rgba(6,24,60,.28);
  --ink-10:    rgba(6,24,60,.10);

  /* Every drawn outline on the site. Now ink rather than blue — the
     blue has a job (actions) and outlines are not it. */
  --line:      rgba(6,24,60,.55);
  --line-soft: rgba(6,24,60,.22);

  /* action — the book's own blue */
  --blue:      #0133AF;
  --blue-lift: #0A45D0;
  --blue-deep: #001C74;
  /* the same blue laid on thin: the ground under a callout or an
     exhibit box, where a panel needs to sit back rather than act */
  --blue-wash: rgba(1,51,175,.05);

  /* struck out, circled, urgent */
  --red:       #B81820;
  --red-bright:#D3202A;

  /* Placeholder text and an unfilled select. Its own token rather than a
     step on the ink ramp: the ramp's .28 is a decorative weight and
     reads at 1.99:1 here, far under AA. This clears 4.5:1 on the card
     (4.74:1) and the tile (4.76:1) while staying lighter than body ink,
     so a prompt still reads as a prompt. Defined once, at the root, so
     it does not follow the ramp when .file recolours it. */
  --placeholder: rgba(0,0,0,.55);

  /* families */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;         /* the cover title */
  --serif:   "Libre Baskerville", Georgia, serif;                             /* headings + body */
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* labels, dates */

  /* One corner for every button and box on the site: equal on all four,
     and the same size whatever the element. A nav tag, a form field and
     a case file all carry this exact curve — change it here and the
     whole site follows. */
  --corner:  12px;

  /* rhythm */
  --gutter:  1.5rem;
  --measure: 34rem;
  --wide:    64rem;
  --band:    clamp(2.5rem, 6.5vw, 4.25rem);
  /* Sized so the three link tags sit on one line under the CTA. They
     need 378px at their natural widths; this leaves ~20px of slack for
     a fallback mono if the webfont is slow. The CTA reads from the same
     token, so the row stays flush with the button above it. */
  --cta-col: 25rem;

  /* The evidence kit — the shell shared by the buttons, the nav tags
     and the cards. Kept under its own prefix so it can't shadow --red
     and friends further down a button's subtree. */
  --tag-navy:   #06183C;
  --tag-paper:  #FFFDF8;
  --tag-cast:   rgba(6,24,60,.2);
  --tag-cast-up:rgba(6,24,60,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-tag: cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------
   2. Reset
   -------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  background:var(--page);
  /* Guard: while webfonts load the fallback face is wider than Anton
     and the wordmark can briefly exceed a narrow screen. */
  overflow-x:clip;
}

body,h1,h2,h3,p,figure,ul,li{ margin:0; padding:0; }
ul{ list-style:none; }
img{ display:block; max-width:100%; height:auto; }
svg{ display:block; width:100%; height:100%; }

body{
  min-height:100dvh;
  background:var(--page);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem, .95rem + .3vw, 1.075rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--red-bright); color:#fff; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

/* --------------------------------------------------
   3. Layout primitives
   -------------------------------------------------- */
.page{
  position:relative;
  padding-inline:var(--gutter);
  padding-block:clamp(1.25rem, 4vw, 2.5rem) 0;
}

/* Every block contributes exactly one gap, below itself. Padding on both
   sides would double up wherever two sections meet. */
.section{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-block:0 var(--band);
  text-align:center;
}

.hero{ padding-bottom:var(--band); }

/* --------------------------------------------------
   4. Language switch — a segmented pair, current one filled
   -------------------------------------------------- */
.lang{
  display:flex;
  justify-content:center;
  /* sits clear of the page edge above and the wordmark below, so it
     reads as its own row rather than as part of either */
  margin-top:clamp(.5rem,2vw,1rem);
  margin-bottom:clamp(1.5rem,4.5vw,2.5rem);
}

/* On the two homepages the cover comes next, and it carries cream margin
   of its own, so the full gap reads as a hole. Tightened only there —
   sub-pages put the wordmark below instead, which still needs the air.
   Browsers without :has() simply keep the gap above. */
.lang:has(+ .hero){ margin-bottom:clamp(1.1rem,3.4vw,1.9rem); }

/* Carries the kit — same corner, navy outline, hard cast shadow — at
   the smallest size on the site, so it starts at the top of the page
   rather than at the first button. */
.lang__list{
  display:inline-flex;
  gap:3px;
  padding:3px;
  background:var(--tag-paper);
  border:2px solid var(--tag-navy);
  border-radius:var(--corner);
  box-shadow:3px 3px 0 var(--tag-cast);
}

.lang__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.95rem;
  padding:0 .9rem;
  border-radius:var(--corner);
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(.58rem,2.2vw,.66rem);
  letter-spacing:.09em;
  color:var(--ink-60);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}

.lang__btn.is-current{
  background:var(--blue);
  color:#fff;
}

@media (hover:hover){
  .lang__btn:not(.is-current):hover{
    background:var(--ink-10);
    color:var(--ink);
  }
}

/* --------------------------------------------------
   5. The book
   -------------------------------------------------- */
.book-area{ padding-block:0 clamp(.5rem,2.5vw,1.25rem); }

.book{
  width:min(74%, 18.5rem);
  margin-inline:auto;
}
.book__img{ width:100%; height:auto; }

/* --------------------------------------------------
   5. Opening
   -------------------------------------------------- */
.opening{ text-align:center; }

/* fit-content is what lets the stroke below match the word: the box
   shrinks to the glyphs instead of filling the column, so a 100%-wide
   child is exactly as wide as MURDATE at every size. */
.wordmark{
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  font-family:var(--display);
  font-weight:400;
  /* The cap is what desktop sees — 18vw stops mattering above ~750px,
     so lowering the ceiling shrinks the big screens and leaves phones
     scaling as before. */
  font-size:clamp(3rem, 18vw, 7.25rem);
  line-height:.9;
  letter-spacing:.005em;
  color:var(--ink);
}

/* A marker stroke rather than a drawn rule. It is a pseudo-element on
   the wordmark, not a sibling, so it inherits that width and can never
   drift out of step with the type. */
.wordmark::after{
  content:"";
  display:block;
  width:100%;
  /* the stroke thins with the type it sits under */
  height:10px;
  margin:clamp(.6rem,2.2vw,1rem) 0 clamp(1.2rem,3.8vw,1.75rem);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C60 3.5 130 2.4 200 3.2C270 4 340 5.4 397 3.6L396 6.6C340 8.8 270 8.4 200 7.8C130 7.2 60 8.6 3 11Z' fill='%23D3202A'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.tagline{
  max-width:26rem;
  margin-inline:auto;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(.95rem, 3.6vw, 1.2rem);
  line-height:1.5;
  letter-spacing:.02em;
  text-transform:uppercase;   /* keeps the sentence intact for screen readers */
  color:var(--ink);
  text-wrap:balance;
}

.opening__cta{ margin-top:clamp(1.5rem,4.5vw,2rem); }
.opening__cta .btn{ width:min(100%, var(--cta-col)); }

.links{
  width:min(100%, var(--cta-col));
  /* clears the CTA's cast shadow (6px, 8px raised) and the dip on the
     low corner when it tilts */
  margin:clamp(1.3rem,4.2vw,1.85rem) auto 0;
}
/* The gap has to clear a tag's cast shadow — 6px right and below, 8px
   while it's raised — or the shadow lands on its neighbour. The row
   gap is a variable because the forced break below has to cancel one
   of them out. */
/* nowrap is what guarantees the row count. Flexbox wraps an item to a
   new line before it will shrink one, so a wrapping row can always
   spill to a third line on a narrow screen no matter how the widths
   are set. Held on one line, the items shrink instead and the label
   wraps inside its own button. */
.links__grid,
.links__row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:12px;
}
/* the second row of the sub-page nav */
.links__row + .links__row{ margin-top:14px; }

/* flex-basis:auto is what makes the widths follow the labels: each tag
   starts at its own text width and only then takes an equal share of
   what is left, so HOME ends up narrower than SUBMIT YOUR ANSWER while
   the row still fills. flex-basis:0 would hand them all the same width.
   min-width:0 lets a tag shrink past its text on a narrow screen, so
   the label wraps inside the button instead of pushing a third row. */
/* flex-basis:auto is what makes the widths follow the labels: each tag
   starts at its own text width, then grows or shrinks from there, so a
   long label keeps more of the row than a short one. flex-basis:0 would
   hand every tag the same width. min-width:0 lets a tag shrink past its
   text so the label wraps inside the button. */
.links__grid > li,
.links__row > li{
  flex:1 1 auto;
  min-width:0;
  display:flex;
}
.links__grid .tile,
.links__row .tile{ width:100%; min-width:0; }


/* The nav tags carry a label and nothing else — the shell and the
   sizing both live in section 6, after the shell, so they win. */
.tile__label{
  line-height:1.15;
  /* A one-word label cannot wrap, so on the narrowest screens it would
     otherwise print straight out of its own button. */
  overflow-wrap:break-word;
}

/* --------------------------------------------------
   6. Buttons — evidence tags

   Every button on the site is a cobalt tag, the colour of
   the book itself: navy outline, hard cast shadow, and the
   shared --corner. Nothing here sets its own radius.

   .btn is the full-size tag, .tile the compact one
   (section 5); size is what separates an action from a
   link to another page. .btn--primary is still on every
   button in the markup but currently adds nothing — it is
   the hook if a quieter second button is ever needed.
   -------------------------------------------------- */
.btn,
.tile{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:62px;
  padding:0 26px;
  border:2px solid var(--tag-navy);
  border-radius:var(--corner);
  background:var(--blue);
  color:#fff;
  box-shadow:6px 6px 0 var(--tag-cast);

  /* The comp calls for Inter at 900. This page loads Plex Mono and no
     grotesque, and the mono suits a case file better than a synthesised
     Arial Black would — swap these two lines to go back. */
  font-family:var(--mono);
  font-weight:700;
  font-size:15px;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--ease-tag), box-shadow .25s var(--ease-tag);
}

/* The nav tags, one size down, so the CTA still outranks them on size.
   Written after the shell because it shares the shell's specificity —
   put these back up in section 5 and they lose. */
/* Same label size as the CTA now the icons are gone — the tags stay
   subordinate on height (46px against 62px) rather than on type size. */
.tile{
  min-height:46px;
  padding:0 18px;
  border-radius:var(--corner);
}

/* The page you are already on: a tag that has been pulled and filed,
   so it loses the cobalt and sits flat on the board. */
.tile.is-current{
  background:var(--tag-paper);
  color:var(--blue);
  box-shadow:2px 2px 0 var(--tag-cast);
}
@media (hover:hover){
  .tile.is-current:hover{
    transform:none;
    box-shadow:2px 2px 0 var(--tag-cast);
    background:var(--tag-paper);
  }
}

.btn__arrow{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:22px; height:22px;
  transition:transform .25s var(--ease-tag);
}
/* drawn for a 24px box — see .tile__icon */
.btn__arrow svg{ width:14px; height:14px; stroke-width:2.4; }

@media (hover:hover){
  .btn:hover,
  .tile:hover{
    transform:rotate(1deg) translateY(-3px);
    background:var(--blue-lift);
    box-shadow:8px 8px 0 var(--tag-cast-up);
  }
  .btn:hover .btn__arrow{ transform:translateX(3px); }
}

.btn:active,
.tile:active{
  transform:translateY(1px) scale(.99);
  background:var(--blue-deep);
  box-shadow:4px 4px 0 var(--tag-cast);
}
.btn:active .btn__arrow{ transform:translateX(0); }

/* The comp rings the tag in white, which is invisible on this cream.
   Same geometry, page ink. */
.btn:focus-visible,
.tile:focus-visible{
  outline:3px solid var(--tag-navy);
  outline-offset:4px;
}

/* Narrow phones: the label is the only part that can give. */
/* Sized by the sub-page nav, which is the harder of the two: four tags
   need ~415px side by side at full size and the column only clears that
   around 540px of viewport. (The home row's three need ~351px and clear
   it by 430.) Below this they drop a size so both still hold one line —
   without it the nav wraps at 431px while fitting at 412px, which reads
   as a bug. */
@media (max-width:540px){
  /* The label grew, so the padding gives way rather than the type —
     "CLUES & TIPS" lands within a pixel or two of its column here, and
     12px of padding either side is what tips it onto a second line. */
  .tile{
    padding-inline:8px;
    font-size:12.5px;
    letter-spacing:.06em;
  }
  .links__grid,
  .links__row{ gap:8px; }
  .links__row + .links__row{ margin-top:10px; }
}

@media (max-width:380px){
  /* A label that wraps needs less width than its one-line length, but
     flex-basis:auto still claims that full length and leaves the tag
     wider than its wrapped text. Basing it on the longest word instead
     hands the surplus back to the tags beside it, so a two-line label
     ends up narrower than a one-word neighbour rather than wider. */
  .links__row > li,
  .links__grid > li{ flex-basis:min-content; }

  .btn{
    max-width:100%;
    padding-inline:18px;
    font-size:13px;
    letter-spacing:.06em;
  }
}

/* Below 360px the three tags in the second row cannot hold their
   labels whole at the compact size — PREGUNTAS and CONTACTO are single
   words with nothing to wrap on. Type and padding come in together so
   the words stay intact and the two rows survive. */
@media (max-width:360px){
  .tile{
    padding-inline:6px;
    font-size:10.5px;
    letter-spacing:.04em;
  }
  .links__grid,
  .links__row{ gap:6px; }
}

/* Spanish, full width up: the labels are longer than the English ones
   the tags were sized against — "PISTAS Y CONSEJOS" runs 173px against
   "CLUES & TIPS" at 111px — and the home nav is pinned to the CTA's
   25rem column, so at the house 15px/.08em the label wraps to two lines
   inside its own tag. Type and tracking come down together, the same
   trade the 540px step below makes, and the three tags then clear the
   400px column by ~9px — counting the 2px border either side, which is
   what the first pass at this missed. Below 541px those steps already
   take over. */
@media (min-width:541px){
  [data-lang="es"] .tile{
    padding-inline:12px;
    font-size:13px;
    letter-spacing:.04em;
  }
}

/* --------------------------------------------------
   8. Headings
   -------------------------------------------------- */
.h-display{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.45rem, 5.6vw, 2.2rem);
  line-height:1.24;
  color:var(--ink);
  text-wrap:balance;
}

/* A second heading further down a card needs its own gap above —
   headings carry no top margin, so it would butt against whatever
   block precedes it. Still more than the gap between paragraphs, but
   not by much: the rule under the heading already separates it. */
.file > * + .h-display{ margin-top:calc(var(--file-gap,1.4rem) * 1.25); }

/* Inside a card: centred and ruled off underneath. Sentence case is set
   in the markup rather than transformed here, so what a screen reader
   announces is what you see. */
.file .h-display{
  text-align:center;
  letter-spacing:.005em;
}
.file .h-display::after{
  content:"";
  display:block;
  width:3rem;
  height:4px;
  margin:clamp(.7rem,2.5vw,.9rem) auto 0;
  border-radius:999px;
  background:var(--red);
  /* struck by hand, like the rule under the wordmark */
  transform:rotate(-1deg);
}

/* --------------------------------------------------
   9. Cards
   -------------------------------------------------- */
.what,
.case{ max-width:var(--wide); }

/* Every card is a sheet of ruled paper pulled from the file: navy
   outline, the same corner as the tags, hard cast shadow, and a hair of
   rotation so it never quite squares up with the page.

   Text inside a card is black, not the navy the rest of the site is set
   in — the whole ink ramp is redefined here rather than on each rule, so
   headings, body, labels and hints all follow from this one block. The
   drawn parts (border, rules, dividers) keep the tag navy, which is what
   still ties the cards to the buttons. */
.file{
  /* One gap between every block in a card, and one shared body size. */
  --file-gap:clamp(1.1rem, 3.6vw, 1.5rem);
  --file-body:clamp(1.03rem, 4vw, 1.14rem);

  --ink:    #000;
  --ink-80: rgba(0,0,0,.80);
  --ink-60: rgba(0,0,0,.60);
  --ink-28: rgba(0,0,0,.28);
  --ink-10: rgba(0,0,0,.10);
  color:var(--ink);

  position:relative;
  max-width:var(--measure);
  margin-inline:auto;
  padding:clamp(1.9rem,6.5vw,2.75rem) clamp(1.4rem,6vw,3rem) clamp(2rem,6.5vw,2.75rem);
  text-align:left;

  /* faint cobalt rule, like lined evidence paper — kept low enough to
     read as paper texture rather than as a table the text sits in */
  background:
    linear-gradient(rgba(1,51,175,.04) 1px, transparent 1px),
    var(--card);
  background-size:100% 31px;

  border:2px solid var(--tag-navy);
  border-radius:var(--corner);
  box-shadow:10px 10px 0 rgba(6,24,60,.16);

  transform:rotate(-.2deg);
  transition:transform .28s var(--ease-tag), box-shadow .28s var(--ease-tag);
}

@media (hover:hover){
  .file:hover{
    transform:rotate(0deg) translateY(-4px);
    box-shadow:13px 13px 0 rgba(6,24,60,.2);
  }
}

/* Cards whose copy is short enough to sit centred rather than ranged
   left. Named for what it does, not for which card first used it. */
.file--centred{ text-align:center; }


/* The figures, restated for scanning — boxed like an exhibit, on the
   same thin blue ground as the callouts. */
.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;

  /* its own gap now — the labelled divider that used to sit above it
     and supply this is gone */
  margin-top:calc(var(--file-gap,1.4rem) * 1.4);

  border:2px solid var(--tag-navy);
  border-radius:var(--corner);
  overflow:hidden;
  background:var(--blue-wash);
  box-shadow:4px 4px 0 rgba(6,24,60,.1);
}
.stat{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-width:0;
  padding:17px 10px 15px;
  text-align:center;
}
.stat + .stat{ border-left:1px dashed rgba(6,24,60,.32); }

.stat__num{
  font-family:var(--serif);
  font-weight:700;
  /* sized so "30,000" still clears its column on a 320px screen */
  font-size:clamp(1.05rem,5vw,1.95rem);
  line-height:1;
  white-space:nowrap;
  color:var(--red-bright);
}
.stat__label{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(.56rem,2.2vw,.68rem);
  letter-spacing:.15em;
  line-height:1.3;
  color:var(--ink-60);
  text-wrap:balance;
}

/* Narrow: the cast shadow has to come in, or the card spends its width
   on decoration. The corner does not scale — that is the point of
   --corner. The stats stay three across; the numbers are clamped to fit
   a 320px screen and stacking them would triple the height of the
   shortest card on the site. */
@media (max-width:560px){
  .file{ box-shadow:7px 7px 0 rgba(6,24,60,.16); }
  .stat{ padding:14px 6px 13px; }
}

.lead,
.case__p{
  margin-top:var(--file-gap,1.4rem);
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--file-body,1.05rem);
  line-height:1.72;
  color:var(--ink-80);
  text-wrap:pretty;
}

/* ==================================================
   10. The page of dates — the one looping animation
   `.is-live` is added and removed on a cycle by script.js.
   ================================================== */
/* The columns take the width of the dates themselves and the block is
   centred, rather than three equal columns stretched to the card's
   edges — which pushed the outer dates hard against the margins and
   left a gulf down the middle. */
.field{
  display:grid;
  grid-template-columns:repeat(3, max-content);
  justify-content:center;
  justify-items:center;
  gap:clamp(.5rem,2vw,.7rem) clamp(.4rem,3.4vw,1rem);
  margin-top:var(--file-gap,1.4rem);

  /* A separate sheet laid on the case file: plain white against the
     card's ruled cream, so the dates read as printed on paper and the
     red strikes as drawn over it. The inline padding is real margin,
     not a hairline — the dates step down a little at the narrowest
     widths (see .date) so the sheet always has room to show. */
  padding:clamp(.85rem,3.2vw,1.5rem) clamp(.7rem,3vw,1.2rem);
  background:var(--tile);
  border:1.5px solid var(--line-soft);
  border-radius:var(--corner);
  box-shadow:4px 4px 0 rgba(6,24,60,.1);
  /* No fade at the foot any more. It existed to trail a long list off
     the page; the grid is now seven rows centred on the circled date,
     and a fade would hide the third row below it. */
}

.date{
  position:relative;
  width:max-content;
  max-width:100%;
  padding:.1rem 0;
  font-family:var(--mono);
  font-weight:500;
  /* The vw slope is unchanged so phones keep the size that fits three
     dates across; only the ceiling moves, which is what desktop sees.
     The ceiling stops short of the card's inner width on purpose —
     max-content columns cannot shrink, so if the webfont failed and a
     wider fallback mono stood in, a tighter fit would overrun. */
  font-size:clamp(.62rem,3.05vw,1.25rem);
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
  color:var(--ink-80);
  transition:color .3s ease;
  transition-delay:var(--dr,0ms);
}

.date::after{                          /* the strike-through */
  content:"";
  position:absolute;
  left:-4px; right:-4px;
  top:50%;
  height:2px;
  border-radius:2px;
  background:var(--red-bright);
  transform:scaleX(0) translateY(-1px);
  transform-origin:left center;
  transition:transform .3s ease;
  transition-delay:var(--dr,0ms);
}

.field.is-live .date{
  color:var(--ink-28);
  transition:color .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.field.is-live .date::after{
  transform:scaleX(1) translateY(-1px);
  transition:transform .42s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* the one that survives: circled in red, as on the cover */
.date--key{
  z-index:2;
  color:var(--ink-80);
  font-weight:600;
}
.date--key::after{ display:none; }

.date--key::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-.5rem -.7rem;
  border:2px solid var(--red-bright);
  border-radius:50%;
  opacity:0;
  transform:rotate(-2deg) scale(1.25);
  transition:opacity .3s ease, transform .3s ease;   /* no delay on the way out */
}

.field.is-live .date--key{
  color:var(--red-bright);
  font-weight:700;
  transition:color .5s var(--ease);
  transition-delay:1.45s;
}
.field.is-live .date--key::before{
  opacity:1;
  transform:rotate(-2deg) scale(1);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay:1.45s;
}

/* --------------------------------------------------
   11. Verdict — closes the case file
   -------------------------------------------------- */
.verdict{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:var(--file-gap,1.4rem);
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.5rem, 6vw, 2.35rem);
  line-height:1.2;
  text-align:center;
  letter-spacing:.005em;
  text-wrap:balance;
  color:var(--ink);
}
.verdict::after{
  content:"";
  width:clamp(5rem,20vw,8rem);
  height:5px;
  margin-top:clamp(.7rem,2.5vw,1rem);
  border-radius:3px;
  background:var(--red);
}

/* --------------------------------------------------
   12. Buy — the cobalt band that closes the page
   -------------------------------------------------- */
.signup{ max-width:var(--wide); }

.signup .file{ text-align:center; }

.signup__sub{
  margin-top:var(--file-gap,1.4rem);
  font-family:var(--serif);
  font-size:var(--file-body,1.05rem);
  line-height:1.72;
  color:var(--ink-80);
  text-wrap:pretty;
}

/* mailing list */
.signup__form{
  display:grid;
  gap:.7rem;
  margin-top:var(--file-gap,1.4rem);
}

/* NB: .field is already the page of dates — this needs its own name. */
.signup__field{
  display:grid;
  gap:.4rem;
  text-align:left;   /* the label reads better ranged left */
}
/* No .signup__label rule: every field now names itself from inside the
   box, so nothing on the site carries a standing label above it.

   Fields take the tag silhouette too, so a filled-in form reads as a
   row of tags rather than a browser default sitting in a case file. */
.signup__input{
  width:100%;
  min-height:3.9rem;
  padding:0 .9rem;
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
  background:var(--tile);
  border:2px solid var(--tag-navy);
  border-radius:var(--corner);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.signup__input::placeholder{ color:var(--placeholder); }
.signup__input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:3px 3px 0 var(--tag-cast);
}

/* NB: no border reset here — the 2px navy outline is the tag. */
.signup__submit{ width:100%; }

/* Turnstile sits between the field and the button, ranged left like the
   field above it. min-height holds the room so the card doesn't jump
   when the widget arrives. */
.signup__turnstile{ min-height:65px; text-align:left; }

/* One line under the form: the Worker's verdict. Blue for welcome,
   red when something needs another look. */
.signup__status{
  margin-top:var(--file-gap,1.4rem);
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.6;
  color:var(--blue);
}
.signup__status.is-error{ color:var(--red); }

/* The settled state for all three forms — unsubscribe.js, newsletter.js
   and submit.js each strip their card to its heading and lay the Worker's
   message in here. Same styling across all three so the pattern reads as
   one thing wherever a form retires itself. */
.form-confirmation {
  color: var(--ink);
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: inherit;
  line-height: 1.72;
  text-align: center;
  margin: 0;
}

.form-confirmation + .form-confirmation {
  margin-top: 0.75rem;
}

.form-confirmation.is-lead {
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------
   Sub-pages (contact, submit)
   -------------------------------------------------- */
.subhead{
  text-align:center;
  padding-bottom:var(--band);
}

/* Smaller wordmark, and it takes you home. It gets clear air on both
   sides so it reads as the masthead rather than as another row in the
   stack: the language switch sits above it, the nav directly below. */
.wordmark--sub{
  display:inline-block;
  margin-top:clamp(.7rem, 2.8vw, 1.4rem);
  font-size:clamp(2.4rem, 11vw, 4.5rem);
  text-decoration:none;
  color:var(--ink);
}
/* adds to the nav's own margin-top rather than replacing it */
.wordmark--sub::after{ margin-bottom:clamp(.45rem, 1.8vw, .8rem); }

.subhead .links{
  width:min(100%, 30rem);
  margin-top:clamp(1rem,3.5vw,1.4rem);
}

/* the page you are on — styled with the tiles, in section 5 */

/* Callout. These sit inside a card, so they take the kit at a lighter
   weight — 1.5px outline, no cast shadow — or two boxes with the same
   drawn edge end up arguing with each other. */
.note{
  margin-top:var(--file-gap,1.4rem);
  padding:clamp(.85rem,3vw,1.1rem) clamp(.95rem,3.5vw,1.3rem);
  background:var(--blue-wash);
  border:1.5px solid var(--line-soft);
  border-left:5px solid var(--blue);
  border-radius:var(--corner);
  text-align:left;
  font-family:var(--serif);
  font-size:clamp(.85rem,3.1vw,.95rem);
  line-height:1.62;
  color:var(--ink-80);
}
.note--red{
  background:rgba(211,32,42,.06);
  border-left-color:var(--red-bright);
}
.note strong{ color:var(--ink); }
.note a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (hover:hover){
  .note a:hover{ color:var(--blue); }
}

/* the contact address */
.contact-email{
  margin-top:var(--file-gap,1.4rem);
  text-align:center;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(.92rem,3.9vw,1.2rem);
  letter-spacing:.01em;
  word-break:break-word;
}
.contact-email a{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
@media (hover:hover){
  .contact-email a:hover{ color:var(--red-bright); }
}

/* clue list */
.clues{
  display:grid;
  gap:.7rem;
  margin-top:var(--file-gap,1.4rem);
  padding:0;
  list-style:none;
  text-align:left;
  counter-reset:none;
}
.clue{
  padding:clamp(.85rem,3vw,1.1rem) clamp(.95rem,3.5vw,1.25rem);
  background:var(--tile);
  border:1.5px solid var(--line-soft);
  border-radius:var(--corner);
}
/* The cover's red, the colour it strikes dates out in. */
.clue__num{
  display:inline-block;
  margin-bottom:.5rem;
  padding:.24rem .55rem;
  border:1.5px solid var(--tag-navy);
  border-radius:var(--corner);
  background:var(--red-bright);
  color:#fff;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(.54rem,2.1vw,.62rem);
  letter-spacing:.11em;
}
.clue__text{
  font-family:var(--serif);
  font-size:var(--file-body,1.05rem);
  line-height:1.6;
  color:var(--ink);
}
/* A clarification reads at the same size as the clue it explains, set
   in the action blue so it is clearly the site talking rather than more
   of the puzzle. The rule above it is drawn, not hinted. */
.clue__note{
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1.5px solid var(--line);
  font-family:var(--serif);
  font-size:var(--file-body,1.05rem);
  line-height:1.6;
  color:var(--blue);
}
/* One hairline divides the rule from its notes — not each note from the
   last. A clue with several clarifications reads as one block rather
   than a ruled list. */
.clue__note + .clue__note{
  margin-top:.6rem;
  padding-top:0;
  border-top:0;
}

/* tips */
.tips{
  display:grid;
  gap:clamp(1rem,3.4vw,1.35rem);
  margin-top:var(--file-gap,1.4rem);
  text-align:left;
}

/* Each tip is a heading and a paragraph hung off one marker, so the
   marker sits in its own column and both blocks share the second. */
.tip{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.7rem;
  row-gap:.25rem;
}
/* a pinned marker — cobalt inside a navy outline, same as the buttons */
.tip::before{
  content:"";
  grid-column:1;
  grid-row:1;
  align-self:start;
  width:9px; height:9px;
  margin-top:.5em;
  border:1.5px solid var(--tag-navy);
  background:var(--blue);
  transform:rotate(45deg);
}
.tip__title{
  grid-column:2;
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--file-body,1.05rem);
  line-height:1.4;
  color:var(--ink);
}
.tip__text{
  grid-column:2;
  font-family:var(--serif);
  font-size:clamp(.88rem,3.2vw,.98rem);
  line-height:1.6;
  color:var(--ink-80);
}

/* FAQs — native <details>, no script needed */
.faqs{
  display:grid;
  gap:.6rem;
  margin-top:var(--file-gap,1.4rem);
  text-align:left;
}
.faq{
  background:var(--tile);
  border:1.5px solid var(--line-soft);
  border-radius:var(--corner);
}
.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(.8rem,3vw,1rem) clamp(.95rem,3.5vw,1.2rem);
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(.9rem,3.3vw,1rem);
  line-height:1.45;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+";
  flex:0 0 auto;
  font-family:var(--mono);
  font-weight:700;
  font-size:1.15rem;
  line-height:1;
  color:var(--blue);
}
.faq[open] .faq__q::after{ content:"–"; }

.faq__a{
  padding:0 clamp(.95rem,3.5vw,1.2rem) clamp(.9rem,3vw,1.1rem);
  font-family:var(--serif);
  font-size:clamp(.85rem,3.1vw,.95rem);
  line-height:1.65;
  color:var(--ink-80);
}
.faq__a a,
.lead a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (hover:hover){
  .faq__a a:hover,
  .lead a:hover{ color:var(--blue); }
  .faq__q:hover{ color:var(--blue); }
}

/* forms on the sub-pages */
.form{
  display:grid;
  gap:clamp(.9rem,3vw,1.15rem);
  margin-top:var(--file-gap,1.4rem);
  text-align:left;
}
.form__hint{
  font-family:var(--serif);
  font-size:clamp(.78rem,2.8vw,.88rem);
  line-height:1.55;
  /* full strength, not the 60% the other small print sits at */
  color:var(--ink);
}
.form__optional{
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-28);
}
/* the three date selectors */
.form__fieldset{
  display:grid;
  gap:.4rem;
  margin:0;
  padding:0;
  border:0;
}

.date-select{
  display:grid;
  /* month is wider — it carries both the number and the name */
  grid-template-columns:1.25fr 1fr 1fr;
  gap:.5rem;
}
/* The Spanish edition prints DD/MM/AAAA, so its form asks day first
   and the wide column moves to the middle to follow the month. */
[data-lang="es"] .date-select{ grid-template-columns:1fr 1.25fr 1fr; }

select.date-select__part{
  appearance:none;
  -webkit-appearance:none;
  padding-right:1.7rem;
  cursor:pointer;
  /* native arrow is removed by appearance:none, so draw our own */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2306183C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:.65rem;
}

/* Narrow phones: the three date fields share one row, and the label
   inside each has to clear its own arrow. "Día" and "Año" are wider
   than "Day" and "Year", so the Spanish edition runs out of room here
   first — the padding and type come in for both. */
@media (max-width:400px){
  .date-select{ gap:.35rem; }
  .date-select__part{
    padding-inline:.6rem;
    font-size:.95rem;
  }
  select.date-select__part{
    padding-right:1.3rem;
    background-position:right .45rem center;
    background-size:.58rem;
  }
}
select.date-select__part:invalid{ color:var(--placeholder); }

.form__textarea{
  min-height:8rem;
  padding:.8rem .9rem;
  line-height:1.6;
  resize:vertical;
}
/* NB: no border reset here — the 2px navy outline is the tag. */
.form__submit{ width:100%; }

.check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-family:var(--serif);
  font-size:clamp(.8rem,3vw,.9rem);
  line-height:1.55;
  color:var(--ink-80);
  cursor:pointer;
}
.check input{
  flex:0 0 auto;
  width:1.35rem; height:1.35rem;
  /* the box is now nearly as tall as the line beside it, so the nudge
     that used to centre it is no longer needed */
  margin-top:.05rem;
  accent-color:var(--blue);
}

/* --------------------------------------------------
   Footer
   The gap above comes from the last section's own
   bottom padding, so it stays on the page rhythm.
   -------------------------------------------------- */
.footer{
  padding-inline:var(--gutter);
  padding-bottom:var(--band);
  text-align:center;
}
.footer__copy{
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(.6rem,2.3vw,.68rem);
  letter-spacing:.08em;
  color:var(--ink-60);
}

/* the consent line under the form */
.signup__fine{
  margin-top:clamp(.9rem,3vw,1.15rem);
  font-family:var(--serif);
  font-size:clamp(.66rem,2.4vw,.75rem);
  line-height:1.6;
  color:var(--ink-60);
  text-wrap:pretty;
}
.signup__fine a{
  color:var(--ink-80);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
@media (hover:hover){
  .signup__fine a:hover{ color:var(--blue); }
}

@media (min-width:34rem){
  .signup__form{
    grid-template-columns:1fr auto;
    align-items:end;
  }
  .signup__submit{ width:auto; min-width:11rem; }
}


/* --------------------------------------------------
   14. Breakpoints
   -------------------------------------------------- */
@media (min-width:38rem){
  :root{ --gutter:2.5rem; }
  .book{ width:min(62%, 21rem); }
  /* the marker stroke needs no breakpoint of its own now — it is 100%
     of the wordmark, so it tracks the type at every size */
}

@media (min-width:64rem){
  :root{ --gutter:3.5rem; }

  /* Desktop keeps the mobile shape: one centred column, book first,
     everything stacked underneath. Only the scale changes. */
  .hero{
    max-width:var(--wide);
    margin-inline:auto;
  }

  .book{ width:min(100%, 19rem); }

  .file{
    max-width:44rem;
    padding:3rem 3.5rem 2.75rem;
  }
}

@media (min-width:90rem){
  .file{ max-width:46rem; }
}

/* Short landscape phones: don't let the book eat the viewport */
@media (max-height:34rem) and (orientation:landscape){
  .book{ width:min(100%, 13rem); }
}

/* --------------------------------------------------
   14b. Language gate — the first-visit modal

   lang.js adds .lang-gate-open to <html> before paint when no
   language has been chosen yet, so the page underneath never
   flashes in the wrong language. Everything here is inert until
   that class appears.
   -------------------------------------------------- */
.lang-gate{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  padding:var(--gutter);
  /* the page behind is hidden, not just dimmed, so nothing in the
     wrong language is legible through it */
  background:var(--page);
}
/* The page itself is held back until a language is chosen. The gate
   sits inside <main>, so it is blanked along with everything else and
   has to switch itself back on — visibility, unlike display, can be
   re-enabled by a descendant. Without this the dialog renders but is
   invisible and cannot take focus. */
.lang-gate-open body > *{ visibility:hidden; }

/* :not([hidden]) matters — the gate is also hidden while a stored
   preference is redirecting to the other side of the site. */
.lang-gate-open .lang-gate:not([hidden]){
  display:grid;
  visibility:visible;
}
.lang-gate-open{ overflow:hidden; }

.lang-gate__panel{
  width:min(100%, 26rem);
  padding:clamp(1.9rem,6.5vw,2.75rem) clamp(1.4rem,6vw,2.5rem);
  background:var(--card);
  border:2px solid var(--tag-navy);
  border-radius:var(--corner);
  box-shadow:10px 10px 0 rgba(6,24,60,.16);
  text-align:center;
}

/* The wordmark, at panel size. It borrows .wordmark for the family and
   for the red stroke underneath, which is a ::after sized to 100% of
   the type — so it tracks this smaller setting on its own. */
.lang-gate__mark{
  /* .wordmark shrink-wraps with width:fit-content, which an inline box
     ignores — as a <span> it would stay full width and the stroke under
     it would run the whole panel. */
  display:block;
  font-size:clamp(1.9rem, 8.5vw, 2.6rem);
}
.lang-gate__mark::after{
  height:7px;
  margin:.4rem 0 1.1rem;
}

.lang-gate__title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.15rem,4.4vw,1.5rem);
  line-height:1.3;
  color:var(--ink);
  text-wrap:balance;
}
.lang-gate__title span{
  display:block;
  font-size:.82em;
  color:var(--ink-60);
}

.lang-gate__choices{
  display:grid;
  gap:12px;
  margin-top:clamp(1.4rem,4.5vw,1.9rem);
}
/* .btn gives them the tag shell; they only need to fill the panel */
.lang-gate__choices .btn{ width:100%; }

/* --------------------------------------------------
   15. Motion preferences
   script.js also skips the loop and simply leaves the
   dates crossed out.
   -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
}

/* --------------------------------------------------
   16. Print
   -------------------------------------------------- */
@media print{
  .field,                 /* the page of dates */
  .lang,
  .signup__form{ display:none; }
  body{ background:#fff; color:#000; }
  .file{
    background:#fff;      /* drop the ruled lines — they band on paper */
    box-shadow:none;
    border:1px solid #999;
    transform:none;
  }
  .stats{ box-shadow:none; }
}