/* ============================================================================
   LeVeille case: documentary evidence site
   ----------------------------------------------------------------------------
   TYPOGRAPHIC SYSTEM (this is the whole idea, do not break it):

     Courier Prime  = the machine voice. EVERY word the government wrote.
                      Verbatim quotes, case numbers, form numbers, page cites.
     Newsreader     = the human voice. Everything the family wrote.
     Archivo        = the file-clerk voice. Labels, status chips, metadata.

   A reader should be able to tell, without reading a word, which sentences
   are the Bureau's and which are ours. Never set a government quote in the
   serif, and never set our own argument in the typewriter face.

   PALETTE is drawn from the physical material of the case: photocopy gray,
   toner black, DOJ seal navy, and one oxblood reserved exclusively for
   marking what is destroyed, missing, withheld, or redacted.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Surfaces: cool photocopy stock, not warm cream */
  --paper:      #e4e2db;
  --paper-lift: #f3f2ee;
  --paper-deep: #d6d3ca;

  /* Ink */
  --ink:      #14171b;
  --ink-mid:  #454a52;
  --ink-soft: #6e747d;

  --rule:      #c0bdb4;
  --rule-firm: #a7a399;

  /* Accent: DOJ / FBI seal navy */
  --seal:      #1b3a5c;
  --seal-lift: #2a5484;

  /* Reserved. Withheld, destroyed, missing, redacted. Nothing else. */
  --flag: #8a2a21;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  --label: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --measure: 34rem;      /* reading column */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --spine: 3.25rem;      /* left case-file spine width on wide screens */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
  line-height: 1.62;
  font-synthesis-weight: none;
}

/* ---------------------------------------------------------------- spine --
   A vertical file-tab down the left edge carrying the case numbers. It is
   the one persistent piece of furniture and it exists because this whole
   site is one case file.                                                  */

.spine {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine);
  border-right: 1px solid var(--rule-firm);
  background: var(--paper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.spine__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.spine__text b { color: var(--ink-mid); font-weight: 400; }

@media (max-width: 950px) { .spine { display: none; } }

/* ------------------------------------------------------------ structure -- */

.shell { margin-left: var(--spine); }
@media (max-width: 950px) { .shell { margin-left: 0; } }

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.col { max-width: var(--measure); }

section { padding-block: clamp(3rem, 8vw, 6rem); }
section + section { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------------ nav -- */

.masthead {
  border-bottom: 1px solid var(--rule-firm);
  background: var(--paper-deep);
  position: sticky;
  top: 0;
  z-index: 4;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.75rem;
}

.masthead__mark {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.masthead__mark span { color: var(--ink-soft); font-weight: 500; }

.nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }

.nav a {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
  padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }
.nav a[aria-current="page"] { color: var(--seal); border-bottom-color: var(--seal); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------- eyebrow -- */

.eyebrow {
  font-family: var(--label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.eyebrow--seal { color: var(--seal); }
.eyebrow--flag { color: var(--flag); }

/* --------------------------------------------------------------- typography */

h1, h2, h3 { font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; }

h1 {
  font-size: clamp(2.35rem, 1.5rem + 3.8vw, 4.15rem);
  line-height: 1.06;
  margin: 0 0 1.5rem;
}

h2 {
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem);
  line-height: 1.16;
  margin: 0 0 1.1rem;
}

h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.42rem);
  line-height: 1.28;
  margin: 0 0 0.6rem;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.38rem);
  line-height: 1.5;
  color: var(--ink-mid);
}

.small { font-size: 0.9rem; color: var(--ink-mid); }

a { color: var(--seal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--seal-lift); }

strong { font-weight: 600; }

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

.hero { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3rem, 7vw, 5rem); }

/* The headline spans the full measure above the two columns. Keeping it
   inside the left column made it tower over a short right column and left
   a dead quarter of the screen. */
.hero__head {
  font-size: clamp(2.3rem, 1.35rem + 3.2vw, 3.7rem);
  max-width: 20ch;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

.hero__deck { max-width: 32rem; }

/* ------------------------------------------------------- document quote --
   The core component. Anything the government wrote lives inside one of
   these, in the machine face, with a source line that can be checked.     */

.doc {
  background: var(--paper-lift);
  border: 1px solid var(--rule-firm);
  border-left: 3px solid var(--ink);
  padding: clamp(1.1rem, 3vw, 1.9rem);
}

.doc__label {
  font-family: var(--label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.doc__text {
  font-family: var(--mono);
  font-size: clamp(0.86rem, 0.8rem + 0.28vw, 1rem);
  line-height: 1.72;
  color: var(--ink);
  margin: 0;
}

.doc__text + .doc__text { margin-top: 1rem; }

.doc__src {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}

.doc__src b { font-family: var(--mono); font-weight: 400; color: var(--ink-mid); letter-spacing: 0; }

.doc--hero { border-left-width: 5px; }
.doc--flag { border-left-color: var(--flag); }
.doc--seal { border-left-color: var(--seal); }

/* Redaction bar. Used to render a withheld span the way the page shows it. */
.redact {
  display: inline-block;
  background: var(--ink);
  color: transparent;
  user-select: none;
  border-radius: 1px;
  vertical-align: baseline;
  min-width: 5.5em;
}

.redact::after { content: attr(data-len); visibility: hidden; }

/* --------------------------------------------------------------- ledger --
   The signature element. The official cause on one side, the findings the
   same board recorded on the other. This is the argument as furniture.    */

.ledger { display: grid; gap: 0; margin-top: clamp(2rem, 5vw, 3.25rem); }

.ledger__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--rule-firm);
  border-bottom: none;
  background: var(--paper-deep);
}

.ledger__headcell {
  padding: 0.8rem clamp(1rem, 3vw, 1.6rem);
  font-family: var(--label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.ledger__headcell + .ledger__headcell { border-top: 1px solid var(--rule); }

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--rule-firm);
  border-top: none;
  background: var(--paper-lift);
}

.ledger__cell { padding: clamp(1rem, 3vw, 1.6rem); }
.ledger__cell + .ledger__cell { border-top: 1px solid var(--rule); }

.ledger__cell--quote { background: var(--paper-lift); }
.ledger__cell--gloss { background: var(--paper); }

@media (min-width: 54rem) {
  .ledger__head,
  .ledger__row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ledger__headcell + .ledger__headcell,
  .ledger__cell + .ledger__cell { border-top: none; border-left: 1px solid var(--rule); }
}

.ledger__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--seal);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.6rem;
}

.ledger__quote {
  font-family: var(--mono);
  font-size: clamp(0.84rem, 0.79rem + 0.25vw, 0.95rem);
  line-height: 1.7;
  margin: 0;
}

.ledger__gloss { font-size: 0.95rem; line-height: 1.55; color: var(--ink-mid); margin: 0; }
.ledger__gloss + .ledger__gloss { margin-top: 0.7rem; }

.ledger__cite {
  font-family: var(--label);
  font-size: 0.67rem;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
}

/* Reveal. One orchestrated moment, not scattered effects. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.75, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- record --
   One verified finding. Carries its permanent register ID, because those
   IDs are real: they trace a claim back to a page in a document we hold. */

.records { display: grid; gap: clamp(1.5rem, 3.5vw, 2.25rem); margin-top: 2.5rem; }

.record {
  border-top: 2px solid var(--ink);
  padding-top: 1.35rem;
  display: grid;
  gap: clamp(1rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
}

.chip {
  font-family: var(--label);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.28em 0.6em;
  border: 1px solid currentColor;
  color: var(--seal);
  white-space: nowrap;
  align-self: flex-start;
}

.chip--record { color: var(--ink-mid); }
.chip--flag { color: var(--flag); }

.record__body > :first-child { margin-top: 0; }
.record__body .doc { margin-block: 1.15rem; }

.record__why {
  font-size: 0.98rem;
  color: var(--ink-mid);
  border-left: 2px solid var(--rule-firm);
  padding-left: 1rem;
  margin-top: 1.15rem;
}

.record__why b {
  font-family: var(--label);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.35rem;
}

/* ---------------------------------------------------------------- plate --
   A scanned page, presented as an exhibit with a caption that says what to
   look at. Scans are light, so they sit on the lifted surface.            */

.plate { margin: clamp(1.75rem, 4vw, 2.75rem) 0; }

.plate__frame {
  border: 1px solid var(--rule-firm);
  background: var(--paper-lift);
  padding: clamp(0.5rem, 1.5vw, 0.9rem);
  overflow: hidden;
}

.plate__frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.plate__cap {
  font-family: var(--label);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
  margin: 0.75rem 0 0;
}

.plate__cap b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.plate--wide { max-width: 46rem; }

/* --------------------------------------------------------------- gapgrid --
   What is not there. Each item is an absence, so the visual weight goes on
   the label, and the oxblood marks it.                                   */

.gaps { display: grid; gap: 1px; background: var(--rule-firm); border: 1px solid var(--rule-firm); margin-top: 2.5rem; }

@media (min-width: 48rem) { .gaps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gap { background: var(--paper-lift); padding: clamp(1.25rem, 3vw, 1.9rem); }

.gap__count {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1;
  color: var(--flag);
  display: block;
  margin-bottom: 0.5rem;
}

.gap__count small { font-size: 0.4em; color: var(--ink-soft); letter-spacing: 0.1em; }

.gap h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.gap p { font-size: 0.94rem; color: var(--ink-mid); margin-bottom: 0.8rem; }

.gap__ask {
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
  margin: 0;
}

.gap__ask b {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flag);
  margin-bottom: 0.3rem;
}

/* -------------------------------------------------------------- timeline -- */

.tl { margin-top: 2.5rem; border-top: 1px solid var(--rule-firm); }

.tl__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 44rem) { .tl__row { grid-template-columns: 9.5rem minmax(0, 1fr); } }

.tl__when {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--seal);
  letter-spacing: 0.03em;
  padding-top: 0.15rem;
}

.tl__what { font-size: 0.98rem; margin: 0; }
.tl__what b { font-weight: 600; }
.tl__what em { font-style: normal; font-family: var(--mono); font-size: 0.88em; color: var(--ink-mid); }

.tl__row--mark .tl__when { color: var(--flag); }

/* --------------------------------------------------------------- sources -- */

.srcs { display: grid; gap: 1px; background: var(--rule-firm); border: 1px solid var(--rule-firm); margin-top: 2.5rem; }

.src { background: var(--paper-lift); padding: clamp(1.15rem, 3vw, 1.75rem); display: grid; gap: 0.9rem; }

@media (min-width: 56rem) { .src { grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.25rem); } }

.src__id { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); line-height: 1.55; }
.src__id span { display: block; color: var(--ink-soft); font-size: 0.75rem; }
.src__body h3 { font-size: 1.06rem; }
.src__body p { font-size: 0.94rem; color: var(--ink-mid); margin-bottom: 0.6rem; }

.src__pages {
  font-family: var(--label);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------- address --
   The memo header on the agents page. It borrows the Bureau's own routing-slip
   layout because the page is addressed to people who read that layout daily. */

.address {
  border: 1px solid var(--ink);
  border-left: 5px solid var(--ink);
  background: var(--paper-lift);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  max-width: 46rem;
}

.address__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding-block: 0.4rem;
  align-items: baseline;
}

.address__row + .address__row { border-top: 1px solid var(--rule); }

.address__row span {
  font-family: var(--label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.address__row b {
  font-family: var(--mono);
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------------------------------------------------------------- stages --
   A numbered sequence. The numbers are real information here: this is the
   order the Bureau did things in, and the order is the argument.           */

.stages { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin-top: 2.75rem; }

.stage {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule-firm);
  padding-top: 1.5rem;
}

@media (min-width: 58rem) { .stage { grid-template-columns: 8rem minmax(0, 1fr); } }

.stage--turn { border-top: 2px solid var(--flag); }

.stage__mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }

.stage__num {
  font-family: var(--mono);
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}

.stage--turn .stage__num { color: var(--flag); }

.stage__when {
  font-family: var(--label);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stage__body > h3 { margin-bottom: 1.1rem; max-width: 32rem; }
.stage__body .doc { margin-block: 1.15rem; }
.stage__gloss { max-width: var(--measure); color: var(--ink-mid); }

/* ------------------------------------------------------------------ asks -- */

.asks { display: grid; gap: 1px; background: var(--rule-firm); border: 1px solid var(--rule-firm); margin-top: 2.5rem; }

.ask {
  background: var(--paper-lift);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: 0.9rem clamp(1rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 46rem) { .ask { grid-template-columns: 3.5rem minmax(0, 1fr); } }

.ask__n {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--seal);
  letter-spacing: 0.05em;
}

.ask h3 { font-size: 1.1rem; }
.ask p { font-size: 0.96rem; color: var(--ink-mid); margin: 0; }

/* ----------------------------------------------------------------- notes -- */

.note {
  border: 1px solid var(--rule-firm);
  border-top: 3px solid var(--seal);
  background: var(--paper-lift);
  padding: clamp(1.15rem, 3vw, 1.75rem);
  margin-top: 2.25rem;
}

.note--flag { border-top-color: var(--flag); }

.note h3 { font-size: 1.05rem; }
.note p { font-size: 0.95rem; color: var(--ink-mid); }
.note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- standard --
   The evidence rule, stated plainly on every page that makes claims.     */

.standard { display: grid; gap: 0.9rem; margin-top: 1.75rem; }

.standard__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.93rem;
  color: var(--ink-mid);
}

/* Slightly larger reading size, used for the "Not given" ledger on the
   withheld page. Scoped so it doesn't touch the legend on evidence.html
   or any record chip elsewhere on the site. */
.standard--lg .standard__item { font-size: 1rem; }
.standard--lg .chip { font-size: 0.7rem; }

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

.foot {
  border-top: 2px solid var(--ink);
  background: var(--paper-deep);
  padding-block: clamp(2.5rem, 6vw, 3.75rem);
  font-size: 0.92rem;
  color: var(--ink-mid);
}

.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.foot h3 {
  font-family: var(--label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.8rem;
}

.foot p { margin-bottom: 0.8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.4rem; }

.foot__stamp {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule-firm);
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  line-height: 1.7;
}

.signup { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 26rem; margin-top: 0.9rem; }
.signup__input {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.75em 0.9em;
  border: 1px solid var(--rule-firm);
  background: var(--paper-lift);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
}
.signup__input::placeholder { color: var(--ink-soft); }
.signup__input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.signup .btn { padding: 0.75em 1.3em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ misc -- */

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.9rem; }

.btn {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85em 1.5em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background-color 160ms ease, color 160ms ease;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn--seal { border-color: var(--seal); color: var(--seal); }
.btn--seal:hover { background: var(--seal); color: var(--paper-lift); }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 20;
}

.skip:focus { left: 0.5rem; top: 0.5rem; }

hr.rule { border: none; border-top: 1px solid var(--rule-firm); margin-block: clamp(2rem, 5vw, 3rem); }