/* ═══════════════════════════════════════════════════════════════════
   SILENTFOX LABS
   Ink on paper. No accent colour anywhere — the discipline is the point.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/spectral-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* A real italic — a synthesised oblique on a serif reads as a mistake, and the
   sign-off is the one line on the page that cannot afford to look accidental. */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geistmono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────────────────────  TOKENS  ─────────────────────────── */

/* ───────────────────────  BOARD STOCK — the default  ───────────────────────
   Board is the BASE, not an override. `html:has()` can only match once the
   radio exists in the DOM, so if the light tokens lived here the page would
   render light for a beat before flipping — a white flash in the reader's
   face on a near-black site. Making dark the base removes the flash entirely.

   The stock is a LIFTED black, never #000: a lifted black reads as board,
   a pure black reads as a screen void. That is the whole distance between
   "archival" and "every other security site". No glow. No accent. */

:root {
  --paper:      #1C1D21;
  --panel:      #24252A;
  --ink:        #E9E7E0;
  --ink-2:      #ABAAA1;
  --ink-3:      #8A8A81;
  --rule:       rgba(233, 231, 224, 0.22);
  --rule-soft:  rgba(233, 231, 224, 0.12);

  /* Scrollbars and form chrome follow the stock. Without this the browser
     paints a bright scrollbar down the edge of a black page. */
  color-scheme: dark;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --swap: 180ms ease;

  /* The sheet's gutter — where designators live. */
  --gutter:  104px;
  --gap:     clamp(20px, 3.4vw, 48px);
  --pad:     clamp(22px, 5vw, 64px);
  --band:    clamp(48px, 6vw, 84px);   /* vertical rhythm between blocks */
  --measure: 660px;                    /* the text column, as on the brochure */
}

/* ───────────────────  PAPER STOCK — the reader's choice  ───────────────────
   Desaturated warm grey, not cream. The stamp inverts for free, because ink
   and paper simply trade places. */

html:has(#stock-paper:checked) {
  --paper:      #EDEBE6;
  --panel:      #E4E2DB;
  --ink:        #15161A;
  --ink-2:      #4B4C45;
  --ink-3:      #63645B;
  --rule:       rgba(21, 22, 26, 0.18);
  --rule-soft:  rgba(21, 22, 26, 0.10);

  color-scheme: light;
}

/* ───────────────────────────  BASE  ─────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(16px, 0.42vw + 0.92rem, 17.5px);
  line-height: 1.72;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--swap), color var(--swap);
}

h1, h2, h3, p, dl, dd, dt, ul, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }

a { color: inherit; }

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

.sr-only, .skip {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  clip-path: none;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ───────────────────────  REGISTRATION MARKS  ───────────────────────
   Lifted from the brochure cover. Frames the page as a printed sheet.
   Suppressed on narrow screens, where they'd crowd the text. */

.regmarks { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

.regmark {
  position: absolute;
  width: 15px; height: 15px;
  border: 0 solid var(--rule);
}
.regmark--tl { top: 18px; left: 18px;  border-top-width: 1px; border-left-width: 1px; }
.regmark--tr { top: 18px; right: 18px; border-top-width: 1px; border-right-width: 1px; }
.regmark--bl { bottom: 18px; left: 18px;  border-bottom-width: 1px; border-left-width: 1px; }
.regmark--br { bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }

@media (max-width: 900px) { .regmarks { display: none; } }

/* ───────────────────────────  SHEET  ─────────────────────────── */

.sheet {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) var(--pad) clamp(36px, 5vw, 60px);
}

/* ───────────────────────────  RULES  ───────────────────────────
   The primary structural device. Everything is divided by a hairline,
   never by a change of background. */

.rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--rule);
  transform-origin: left center;
  transition: background-color var(--swap);
}
.rule--soft { background: var(--rule-soft); }

/* ───────────────────────────  MASTHEAD  ─────────────────────────── */

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: clamp(22px, 3vw, 32px);
}

.ident { display: flex; align-items: center; gap: 15px; }

.mark { width: 30px; height: 30px; color: var(--ink); flex: none; }

.ident__text { display: flex; align-items: baseline; gap: 9px; }

.ident__name {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ident__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Reference block — the document's own metadata. */
.ref {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: grid;
  gap: 5px;
}
.ref__row { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.ref dt { color: var(--ink-3); min-width: 46px; text-align: right; }
.ref dd { color: var(--ink-2); margin: 0; min-width: 128px; }

/* The stamp. The brochure is stamped INTERNAL; this is the disclosed sheet.
   It inverts for free when the stock changes — ink and paper trade places. */
.stamp {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 9px 2px;
  letter-spacing: 0.22em;
  font-weight: 500;
  transition: background-color var(--swap), color var(--swap);
}

/* ───────────────────────────  STOCK  ───────────────────────────
   The theme switch, written as document metadata: which stock the sheet is
   printed on. Not a sun/moon widget in the corner — that is the single most
   templated control on the web, and this page has earned better. */

.stock {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Radios drive :has() on <html>. They stay in the a11y tree — hidden from
   sight, not from a screen reader or the keyboard. */
.stock__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stock__opt {
  cursor: pointer;
  padding: 4px 9px 3px;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  transition: color var(--swap), border-color var(--swap),
              background-color var(--swap);
}
.stock__opt:hover { color: var(--ink); border-color: var(--ink); }

.stock__input:checked + .stock__opt {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.stock__input:focus-visible + .stock__opt {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ───────────────────────────  BLOCKS  ─────────────────────────── */

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

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow--quiet {
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}

/* Authority comes from size and space, not weight. */
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(33px, 5.4vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.021em;
  margin-top: clamp(26px, 3vw, 38px);
  text-wrap: balance;
}
.statement--sm { font-size: clamp(28px, 4.2vw, 46px); }

.lead {
  max-width: var(--measure);
  margin-top: clamp(24px, 2.6vw, 34px);
  color: var(--ink-2);
}
.lead--tight { margin-top: clamp(18px, 2vw, 26px); }

/* Two sentences, and the break belongs between them — never mid-clause. */
.pull {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 3.2vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.014em;
  margin-top: clamp(24px, 2.6vw, 34px);
  max-width: 620px;
  text-wrap: balance;
}

/* ───────────────────────  REGISTER OF DOMAINS  ───────────────────────
   Designators, not ordinals. The four domains run simultaneously —
   numbering them 01–04 would imply a sequence that doesn't exist. */

.register { margin-top: clamp(34px, 4vw, 52px); }

/* Designator in the gutter, everything else in one column that carries the
   full width of the sheet — the brochure's own structure. */
.entry {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: var(--gap);
  row-gap: 18px;
  align-items: start;
  padding: clamp(26px, 2.8vw, 36px) 0;
}

.entry__desig { grid-column: 1; grid-row: 1; }
.entry__body  { grid-column: 2; grid-row: 1; }
.entry .tags  { grid-column: 2; grid-row: 2; }

.entry__desig {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  padding-top: 0.55em;
}

.entry__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.006em;
}

.entry__desc {
  margin-top: 9px;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ───────────────────────────  TAGS  ─────────────────────────── */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags li {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 4px 8px 3px;
  white-space: nowrap;
}
.tags--wide {
  margin-top: 18px;
  gap: 7px;
}
.tags--wide li { font-size: 10px; padding: 7px 11px 6px; }

.note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: clamp(26px, 3vw, 36px);
}

/* ───────────────────────────  PANEL  ─────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  padding: clamp(30px, 4vw, 52px);
  margin-top: clamp(26px, 3vw, 36px);
  max-width: 760px;
  transition: background-color var(--swap), border-color var(--swap);
}

.panel__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.24;
  letter-spacing: -0.014em;
}
.panel__desc {
  margin-top: 16px;
  color: var(--ink-2);
  max-width: 56ch;
}
.panel__line {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 1.06em;
}

/* ───────────────────────────  ENGAGEMENTS  ─────────────────────────── */

.serve { margin-top: clamp(44px, 5vw, 68px); }

/* ───────────────────────────  SECURE LINE  ─────────────────────────── */

.channel {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  margin-top: clamp(32px, 3.6vw, 44px);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 160ms ease;
}
.channel:hover,
.channel:focus-visible { border-bottom-color: var(--ink); }

.channel__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.channel__value {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: -0.01em;
}

/* The fingerprint. A monospaced key on paper is the most credible
   element on this page: it says we actually do this. */
.key {
  margin-top: clamp(40px, 4.6vw, 58px);
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  border-top: 1px solid var(--rule);
  max-width: 640px;
}
.key__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.key__fpr { margin-top: 12px; }
.key__fpr code {
  font-family: var(--mono);
  font-size: clamp(11px, 1.15vw, 13.5px);
  letter-spacing: 0.08em;
  color: var(--ink);
  word-spacing: 0.14em;
}
/* Encryption is an offer, not a hurdle — say so plainly. */
.key__note {
  margin-top: 14px;
  font-size: 0.92em;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}

.key__link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color 160ms ease, color 160ms ease;
}
.key__link:hover,
.key__link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* ───────────────────────────  COLOPHON  ─────────────────────────── */

.colophon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: clamp(22px, 2.6vw, 30px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The sign-off. The only italic on the page, and the only sentence in the
   colophon set in the serif — so it reads as a hand, not as furniture. */
.colophon__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
}

/* ───────────────────────────  MOTION  ───────────────────────────
   One gesture, total: the rules draw themselves in. Nothing fades,
   nothing slides, no word is ever withheld from the reader waiting on
   an animation. If the browser can't do it, or the reader doesn't want
   it, the page is simply already finished. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The range stays inside a single phase. Mixing `entry` into `cover`
       can strand a rule part-drawn when the page barely scrolls — and a
       half-drawn hairline just reads as broken. `entry` alone resolves to
       100% for anything fully in view, so a rule is never left unfinished. */
    .rule {
      animation: draw 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    /* The masthead rule is above the fold — it draws on load instead. */
    .rule--load {
      animation: draw 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
      animation-timeline: auto;
    }
  }

  @keyframes draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ───────────────────────────  NARROW  ───────────────────────────
   The register collapses: the designator moves inline above the name,
   and the tags fall beneath the description. */

@media (max-width: 860px) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }
  /* The gutter collapses: the designator sits above the name. */
  .entry__desig,
  .entry__body,
  .entry .tags { grid-column: 1; }
  .entry__desig { grid-row: 1; padding-top: 0; }
  .entry__body  { grid-row: 2; }
  .entry .tags  { grid-row: 3; }

  .ref__row { justify-content: flex-start; }
  .ref dt { text-align: left; }
}

@media (max-width: 560px) {
  .masthead { gap: 22px; }
  .ref dd { min-width: 0; }
  .pull { max-width: none; }
}

@media print {
  .regmarks { display: none; }
  body { background: #fff; }
}