/* ==========================================================================
   SPCI Security: The Ledger
   One plain stylesheet. Tokens first (brief section 2), then base type,
   layout, components, chapters, motion, and an Admin block at the end.
   ========================================================================== */

:root {
  /* Paper surfaces */
  --paper:        #F5F2EB;  /* page background (warm bone) */
  --paper-2:      #EDE9E0;  /* alternate level: row hover, input rest fill, table stripes, quote insets */
  --paper-3:      #E4DFD3;  /* clients band, running-head bands; text-2 or ink only on it */

  /* Ink surfaces (chapters 05, 06, footer, admin top bar) */
  --ink:          #121212;
  --ink-2:        #1C1B19;  /* raised: Sigma specimen, quote block */
  --ink-3:        #262421;  /* inset: inputs on ink, pipeline stage boxes */

  /* Rules */
  --rule:         #CFC9BC;  /* 1px hairline on paper, decorative only */
  --rule-strong:  #121212;  /* 2px masthead rule, 48px chapter tick */
  --rule-ink:     #3A3835;  /* 1px hairline on ink */
  --border-ui:    #8A8578;  /* input and secondary button borders on paper: 3.29:1 on paper, 3.04:1 on paper-2 */
  --border-ui-ink:#6E6A62;  /* input borders on ink-2: 3.2:1 */

  /* Text on paper */
  --text:         #121212;  /* 16.76:1 on paper */
  --text-2:       #4A4742;  /* 8.27:1 on paper, 7.63:1 on paper-2, 6.95:1 on paper-3 */
  --text-3:       #6B675F;  /* 5.03:1 on paper, 4.65:1 on paper-2; NOT on paper-3 (4.23:1) */

  /* Text on ink */
  --ink-text:     #F5F2EB;  /* 16.76:1 on ink */
  --ink-text-2:   #B8B3A8;  /* 8.97:1 on ink, 8.24:1 on ink-2, 7.41:1 on ink-3 */
  --ink-text-3:   #8C877D;  /* 5.24:1 on ink, 4.82:1 on ink-2; on ink-3 only at 18px+ */

  /* Accents */
  --signal:       #9A1F1F;  /* oxblood. 7.25:1 on paper, 6.69:1 on paper-2, 6.1:1 on paper-3 */
  --signal-ink:   #E0554A;  /* signal on ink. 4.97:1 on ink, 4.56:1 on ink-2; on ink-3 only at 18px+ */
  --brass:        #7A5C1E;  /* eyebrow labels, loop arc 2, table heads. 5.56:1 on paper, 5.13:1 on paper-2 */
  --brass-ink:    #C9A45C;  /* Sigma keywords, ATT&CK ids, OWASP ids. 7.98:1 on ink, 7.33:1 on ink-2 */

  /* States */
  --success:      #1F6B3A;  /* 5.83:1 on paper, 5.27:1 on success-wash */
  --success-ink:  #5FBF85;  /* 8.28:1 on ink */
  --success-wash: #DCEBDF;
  --error:        #B3261E;  /* scarlet, distinct from signal. 5.85:1 on paper, 4.95:1 on error-wash */
  --error-ink:    #F0776C;  /* 6.74:1 on ink */
  --error-wash:   #F6DAD6;
  --focus:        #9A1F1F;  /* 2px solid, 3px offset on paper; switches to --paper on ink plates */

  /* Spacing (8px base) */
  --s-1: 8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;  --s-5: 40px;
  --s-6: 48px; --s-8: 64px;  --s-12: 96px; --s-18: 144px;
  --space-chapter: clamp(96px, 12vw, 176px);   /* vertical padding per chapter */
  --space-block:   clamp(40px, 6vw, 72px);     /* between blocks inside a chapter */
  --space-item:    24px;                       /* between ledger rows */
  --gutter:        clamp(16px, 2vw, 24px);
  --container:     1320px;
  --masthead-h:    72px;

  /* Radii and shadows */
  --radius: 0;
  --shadow: none;

  /* Type families */
  --font-display: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --font-body:    "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale */
  --fs-hero:  clamp(3.25rem, 2rem + 6.5vw, 7.5rem);
  --fs-h2:    clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);
  --fs-h3:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-lede:  clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta:  0.75rem;
  --fs-folio: clamp(4rem, 3rem + 6vw, 9rem);
  --lh-body:  1.6;

  /* Motion */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:    160ms;
  --t-reveal:  480ms;
  --t-draw:    1200ms;
  --t-panel:   240ms;
}

@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia");
  size-adjust: 93%;
  ascent-override: 92%;
  descent-override: 24%;
}

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--masthead-h) + 16px); }
@media (min-width: 960px) { html { font-size: 17px; } }
body { background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, blockquote, figure, pre, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
body { margin: 0; min-height: 100vh; }
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
main { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--paper); }

/* Running-copy links */
.link { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--signal); text-underline-offset: 0.18em; transition: text-decoration-thickness var(--t-fast) ease-out; }
.link:hover { text-decoration-thickness: 2px; }
.on-ink .link { color: var(--ink-text); text-decoration-color: var(--signal-ink); }

.visually-hidden { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.page { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 639px) { .grid { column-gap: 16px; } }

/* Surfaces */
.on-ink { --mark-slash: var(--signal-ink); --focus: var(--paper); color: var(--ink-text); background: var(--ink); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.h1 { font: 400 var(--fs-hero)/0.98 var(--font-display); letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.h1 em { font-style: italic; color: var(--signal); }
.h2 { font: 400 var(--fs-h2)/1.02 var(--font-display); letter-spacing: -0.01em; color: var(--text); margin: 0 0 24px; position: relative; }
.h2 em { font-style: italic; color: var(--signal); }
.on-ink .h2 { color: var(--ink-text); }
.on-ink .h2 em { color: var(--signal-ink); }
.h3 { font: 400 var(--fs-h3)/1.15 var(--font-display); color: var(--text); }
.on-ink .h3 { color: var(--ink-text); }
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--text-2); max-width: 56ch; }
.on-ink .lede { color: var(--ink-text-2); }
.body { color: var(--text-2); max-width: 62ch; }
.body + .body { margin-top: 1em; }
.on-ink .body { color: var(--ink-text-2); }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.eyebrow { display: flex; gap: 12px; align-items: center; font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--ink); }
.eyebrow--brass { color: var(--brass); }
.eyebrow--signal { color: var(--signal); }
.eyebrow--ink { color: var(--text); }
.on-ink .eyebrow { color: var(--ink-text-3); }
.on-ink .eyebrow::before { background: var(--ink-text); }
.on-ink .eyebrow--brass { color: var(--brass-ink); }

/* --------------------------------------------------------------------------
   Lockup and mark
   -------------------------------------------------------------------------- */
.mark { display: inline-block; flex: none; }
.lockup { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--text); }
/* The small mark's bar ends at y=21 of 24, so nudge it 3px down to sit on the wordmark baseline */
.lockup .mark { position: relative; top: 3px; }
.on-ink .lockup { color: var(--ink-text); }
.wordmark { font: 400 28px/1 var(--font-display); letter-spacing: -0.01em; color: currentColor; white-space: nowrap; }
.wordmark--lg { font-size: 40px; }
@media (max-width: 639px) { .wordmark { font-size: 24px; } .wordmark--lg { font-size: 40px; } }
.lockup-stacked { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--text); }
.lockup-stacked__tag { font: italic 400 20px/1.2 var(--font-display); color: var(--text-2); margin-top: -8px; }
.on-ink .lockup-stacked { color: var(--ink-text); }
.on-ink .lockup-stacked__tag { color: var(--ink-text-2); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; border: 1px solid var(--ink); border-radius: 0; font: 600 0.9375rem/1 var(--font-body); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-3); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-ui); }
.btn--secondary:hover { background: var(--paper-2); border-color: var(--ink); }
.on-ink .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-ink .btn--primary:hover { background: var(--paper-2); border-color: var(--paper-2); }
.on-ink .btn--secondary { color: var(--ink-text); border-color: var(--ink-text-2); }
.on-ink .btn--secondary:hover { background: var(--ink-2); border-color: var(--ink-text); }
.btn--danger { background: transparent; color: var(--error); border-color: var(--error); }
.btn--danger:hover { background: var(--error); color: var(--paper); }
.btn--block { width: 100%; }
.btn--text { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font: 600 0.9375rem/1 var(--font-body); letter-spacing: 0.01em; color: var(--text); }

/* --------------------------------------------------------------------------
   Ledger
   -------------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid; grid-template-columns: 4rem 1fr 1.4fr auto; column-gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background-color var(--t-fast) ease-out;
}
.ledger__row:hover { background: var(--paper-2); box-shadow: 0 0 0 12px var(--paper-2); }
.ledger__idx  { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--text-3); padding-top: 0.4em; font-variant-numeric: tabular-nums; }
.ledger__title{ font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; color: var(--text); font-weight: 400; }
.ledger__desc { color: var(--text-2); max-width: 48ch; }
.ledger__tag  { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; justify-self: end; padding-top: 0.5em; white-space: nowrap; color: var(--text-3); }
.ledger__tag--signal { color: var(--signal); }
.ledger__tag--ink { color: var(--text); }
.ledger__tag--brass { color: var(--brass); }
@media (max-width: 639px) {
  .ledger__row { grid-template-columns: 3rem 1fr auto; grid-template-areas: "idx title tag" "idx desc desc"; row-gap: 8px; column-gap: 16px; }
  .ledger__idx { grid-area: idx; } .ledger__title { grid-area: title; } .ledger__tag { grid-area: tag; align-self: start; padding-top: 0.5em; } .ledger__desc { grid-area: desc; }
}

/* No tag column (chapters 03 and 04) */
.ledger--plain .ledger__row { grid-template-columns: 4rem 1fr 1.4fr; }
@media (max-width: 639px) { .ledger--plain .ledger__row { grid-template-columns: 3rem 1fr; grid-template-areas: "idx title" "idx desc"; } }

/* Register: index, then title above description, tag at the far right (chapters 02, 07, 08) */
.ledger--register .ledger__row { grid-template-columns: 3rem 1fr auto; grid-template-areas: "idx title tag" "idx desc tag"; row-gap: 8px; }
.ledger--register .ledger__idx { grid-area: idx; } .ledger--register .ledger__title { grid-area: title; } .ledger--register .ledger__desc { grid-area: desc; max-width: none; } .ledger--register .ledger__tag { grid-area: tag; align-self: start; }
@media (max-width: 639px) { .ledger--register .ledger__row { column-gap: 16px; } }

/* Statistic rows (chapter 01): value then description, no index */
.ledger--stat .ledger__row { grid-template-columns: 1fr 1.6fr; }
@media (max-width: 639px) {
  .ledger--stat .ledger__row { grid-template-columns: 1fr; grid-template-areas: none; row-gap: 8px; }
  .ledger--stat .ledger__title, .ledger--stat .ledger__desc { grid-area: auto; }
}

/* Values (chapter 08): italic titles in ink */
.ledger--values .ledger__title { font-style: italic; }

/* Client index (chapter 09) */
.ledger--clients .ledger__row { grid-template-columns: 1fr auto; align-items: baseline; }
.ledger--clients .ledger__tag { color: var(--text-2); padding-top: 0; }
@media (max-width: 639px) {
  .ledger--clients .ledger__row { grid-template-columns: 1fr; grid-template-areas: none; row-gap: 6px; }
  .ledger--clients .ledger__title, .ledger--clients .ledger__tag { grid-area: auto; }
  .ledger--clients .ledger__tag { justify-self: start; white-space: normal; }
}

/* Ledger on ink */
.on-ink .ledger, .on-ink .ledger__row { border-color: var(--rule-ink); }
.on-ink .ledger__row:hover { background: var(--ink-2); box-shadow: 0 0 0 12px var(--ink-2); }
.on-ink .ledger__idx { color: var(--ink-text-3); }
.on-ink .ledger__title { color: var(--ink-text); }
.on-ink .ledger__desc { color: var(--ink-text-2); }

/* --------------------------------------------------------------------------
   Index lists (hero contents, footer contents) and nav links
   -------------------------------------------------------------------------- */
.index { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 2; font-variant-numeric: tabular-nums; }
.index__link { display: inline-flex; gap: 12px; text-decoration: none; color: var(--text); }
.index__num { color: var(--text-3); transition: color 150ms ease-out; }
.index__link:hover .index__num, .index__link.is-current .index__num { color: var(--signal); }
.on-ink .index__link { color: var(--ink-text-2); }
.on-ink .index__num { color: var(--ink-text-3); }
.on-ink .index__link:hover .index__num, .on-ink .index__link.is-current .index__num { color: var(--signal-ink); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 2px solid var(--rule-strong); height: var(--masthead-h); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.masthead__nav { display: none; gap: 32px; }
.nav__link { display: inline-flex; align-items: center; gap: 10px; font: 500 0.9375rem/1 var(--font-body); letter-spacing: 0.01em; color: var(--text); text-decoration: none; white-space: nowrap; }
.nav__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--signal); text-underline-offset: 0.35em; }
.nav__num { font: 400 0.8125rem/1 var(--font-mono); color: var(--text-3); font-variant-numeric: tabular-nums; transition: color 150ms ease-out; }
.nav__link.is-current .nav__num { color: var(--signal); }
.masthead__right { display: flex; align-items: center; gap: 24px; }
.masthead__date { display: none; font: 400 0.8125rem/1 var(--font-mono); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.masthead__cta { display: none; }
.masthead__status { font: 400 0.8125rem/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.masthead__toggle { display: inline-flex; }
@media (min-width: 960px) {
  .masthead__nav { display: flex; }
  .masthead__cta { display: inline-flex; }
  .masthead__toggle { display: none; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  /* Five numbered links, the lockup and the button must share 960 to 1199px: tighten, never wrap */
  .masthead__inner { gap: 16px; }
  .masthead__nav { gap: 18px; }
  .nav__link { font-size: 0.875rem; gap: 8px; }
  .masthead__cta { padding-inline: 18px; }
}
@media (min-width: 1200px) { .masthead__date { display: block; } }
@media (max-width: 639px) { :root { --masthead-h: 60px; } }
.masthead--plain .masthead__nav, .masthead--plain .masthead__right, .masthead--plain .masthead__toggle { display: none; }
.masthead--admin .masthead__nav, .masthead--admin .masthead__toggle, .masthead--admin .masthead__date, .masthead--admin .masthead__cta { display: none; }
.masthead--admin .masthead__right { display: flex; }

/* Contents panel (below 960px) */
.contents-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(100%, 420px); background: var(--paper); border-left: 2px solid var(--rule-strong); transform: translateX(100%); visibility: hidden; transition: transform var(--t-panel) var(--ease), visibility 0s linear var(--t-panel); overflow-y: auto; display: flex; flex-direction: column; padding: 0 24px 24px; }
.contents-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.contents-panel__bar { display: flex; align-items: center; justify-content: space-between; height: var(--masthead-h); flex: none; border-bottom: 1px solid var(--rule); }
.contents-panel__list { flex: 1 1 auto; padding: 16px 0 24px; }
.contents-panel__link { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--text); font: 400 var(--fs-h3)/1.15 var(--font-display); }
.contents-panel__num { font: 400 0.8125rem/1 var(--font-mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.contents-panel__link.is-current .contents-panel__num { color: var(--signal); }
@media (min-width: 960px) { .contents-panel { display: none; } }

/* --------------------------------------------------------------------------
   Chapters
   -------------------------------------------------------------------------- */
.chapter { padding-block: var(--space-chapter); border-top: 1px solid var(--rule); position: relative; }
.chapter--ink { border-top: 0; }
.chapter--ink + .chapter--ink { padding-top: 0; }
.chapter--ink + .chapter--ink > .page { border-top: 1px solid var(--rule-ink); padding-top: var(--space-chapter); }
.chapter--band { background: var(--paper-3); }
.chapter__side { display: flex; flex-direction: column; gap: 16px; }
.chapter__num { font: 400 var(--fs-h2)/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.chapter__num::before { content: ""; display: block; width: 48px; height: 2px; background: var(--rule-strong); margin-bottom: 16px; }
.chapter--offense .chapter__num::before { background: var(--signal); }
.chapter--offense .chapter__head { color: var(--signal); font-style: italic; }
.on-ink .chapter__num { color: var(--ink-text); }
.on-ink .chapter__num::before { background: var(--ink-text); }
.chapter__head-num { display: none; }
.chapter__content { position: relative; }
.chapter__content::before { content: ""; position: absolute; left: -24px; top: calc(-1 * var(--space-chapter)); bottom: calc(-1 * var(--space-chapter)); width: 1px; background: var(--rule); display: none; }
.on-ink .chapter__content::before { background: var(--rule-ink); }
.block { margin-top: var(--space-block); }
.chapter__close { margin-top: var(--space-block); padding-top: 24px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.chapter--band .chapter__close, .chapter--band .small, .chapter--band .eyebrow, .chapter--band .ledger__idx { color: var(--text-2); }
.on-ink .chapter__close { border-color: var(--rule-ink); color: var(--ink-text-2); }
.chapter__close--mono { font-family: var(--font-mono); font-size: 0.8125rem; }

/* Watermark numerals */
/* The watermark numeral lives in the chapter's top padding, above the h2, so it never sits behind a headline.
   The clip wrapper (not the chapter) crops its foot 16px above the content column. */
.folio-clip { position: absolute; left: -0.05em; top: calc(24px - var(--space-chapter)); width: 12rem; height: calc(var(--space-chapter) - 40px); overflow: clip; pointer-events: none; display: none; }
.folio-mark { position: absolute; top: 0; left: 0; font: 400 var(--fs-folio)/0.85 var(--font-display); color: var(--ink); opacity: 0.07; pointer-events: none; user-select: none; font-variant-numeric: tabular-nums lining-nums; }
.on-ink .folio-mark { color: var(--ink-text); }

/* Phone: sidebar is the eyebrow line only */
@media (max-width: 639px) {
  .chapter__side { gap: 0; }
  .chapter__num { display: none; }
  .chapter__head-num { display: inline; margin-right: 4px; }
  .chapter__side { grid-column: 1 / -1; margin-bottom: 24px; }
  .chapter__content { grid-column: 1 / -1; }
}
/* Tablet: sidebar as a row above the content */
@media (min-width: 640px) and (max-width: 959px) {
  .folio-clip { display: block; }
  .chapter__side { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 24px; margin-bottom: 40px; }
  .chapter__content { grid-column: 1 / -1; }
}
/* Desktop: asymmetric split with the empty column 4 */
@media (min-width: 960px) {
  .folio-clip { display: block; }
  .chapter__side { grid-column: 1 / 4; position: sticky; top: calc(var(--masthead-h) + 24px); align-self: start; }
  .chapter__content { grid-column: 5 / -1; padding-top: 18px; }
  .chapter__content::before { display: block; }
}

/* Two-column split inside the content column (5 to 8, 9 to 12) */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block) 24px; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split--wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block) 24px; }
@media (min-width: 1200px) { .split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(80px, 10vw, 144px) var(--space-chapter); }
.hero__title { grid-column: 1 / -1; }
.hero__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; border-top: 1px solid var(--rule); padding-top: 40px; margin-top: var(--space-block); }
.hero__lede { grid-column: 1 / -1; }
.hero__actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.hero__index { grid-column: 1 / -1; }
.hero__index .eyebrow { margin-bottom: 12px; }
@media (max-width: 639px) {
  .hero__row { column-gap: 16px; row-gap: 32px; }
  .hero__index .index li { border-bottom: 1px solid var(--rule); }
  .hero__index .index__link { display: grid; grid-template-columns: 3rem 1fr; gap: 0; width: 100%; padding: 4px 0; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .hero__lede { grid-column: 1 / 8; }
  .hero__actions { grid-column: 8 / -1; }
  .hero__index { grid-column: 1 / 7; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .hero__title { grid-column: 1 / 11; }
  .hero__lede { grid-column: 1 / 9; }
  .hero__actions { grid-column: 9 / -1; }
  .hero__index { grid-column: 1 / 7; }
}
@media (min-width: 1200px) {
  .hero__title { grid-column: 1 / 11; }
  .hero__lede { grid-column: 1 / 7; }
  .hero__actions { grid-column: 7 / 10; }
  .hero__index { grid-column: 10 / -1; }
}

/* --------------------------------------------------------------------------
   Chapter 01: pull quote
   -------------------------------------------------------------------------- */
.quote { padding-left: 24px; border-left: 2px solid var(--signal); }
.quote p { font: 400 var(--fs-h3)/1.15 var(--font-display); color: var(--text); max-width: 30ch; }
.quote cite { display: block; margin-top: 16px; font: 400 0.8125rem/1 var(--font-mono); font-style: normal; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Chapter 02: registers
   -------------------------------------------------------------------------- */
.register__head { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   Ticked hairline strip (chapters 04 and 05)
   -------------------------------------------------------------------------- */
.strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 24px; position: relative; padding-top: 24px; }
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.strip__stage { position: relative; }
.strip__stage::before { content: ""; position: absolute; left: 0; top: -24px; width: 1px; height: 16px; background: var(--ink); }
.strip__num   { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.strip__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; margin-top: 8px; font-weight: 400; }
.strip__desc  { color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; margin-top: 8px; }
.strip__status{ font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--brass); margin-top: 12px; }
.strip__meta  { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; color: var(--text-3); margin-top: 12px; }
.on-ink .strip::before { background: var(--rule-ink); } .on-ink .strip__stage::before { background: var(--ink-text); } .on-ink .strip__status { color: var(--brass-ink); }
.on-ink .strip__title { color: var(--ink-text); } .on-ink .strip__desc { color: var(--ink-text-2); } .on-ink .strip__num { color: var(--ink-text-3); }
@media (max-width: 799px) { .strip { grid-template-columns: 1fr; row-gap: 32px; padding-top: 0; padding-left: 24px; } .strip::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .strip__stage::before { left: -24px; top: 0.5em; width: 16px; height: 1px; } }

/* --------------------------------------------------------------------------
   Chapter 05: Sigma specimen and comparison table
   -------------------------------------------------------------------------- */
.specimen { background: var(--ink-2); border: 1px solid var(--rule-ink); padding: 24px; overflow-x: auto; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; color: var(--ink-text); }
.specimen__body { display: grid; grid-template-columns: 32px max-content; column-gap: 16px; width: max-content; min-width: 100%; }
.specimen__gutter, .specimen__code { font: 400 13px/1.6 var(--font-mono); font-variant-numeric: tabular-nums; }
.specimen__gutter { text-align: right; color: var(--ink-text-3); border-right: 1px solid var(--rule-ink); padding-right: 12px; user-select: none; }
.specimen__code { color: var(--ink-text); }
.specimen__code .k { color: var(--brass-ink); }
.specimen__code .u { color: var(--ink-text-2); }
.specimen__trailer { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-ink); font: 400 12px/1.4 var(--font-mono); color: var(--ink-text-2); }
.specimen__colophon { margin-top: 16px; font: 400 0.8125rem/1.6 var(--font-mono); color: var(--ink-text-2); }

.compare { width: 100%; border-collapse: collapse; }
.compare caption { text-align: left; padding-bottom: 16px; caption-side: top; }
.compare th { text-align: left; font: 500 var(--fs-meta)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); padding: 0 24px 12px 0; border-bottom: 1px solid var(--rule-ink); vertical-align: bottom; }
.compare td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule-ink); vertical-align: top; color: var(--ink-text-2); font-size: var(--fs-body); line-height: 1.5; width: 50%; }
.compare td + td { color: var(--ink-text); }
.compare th:last-child, .compare td:last-child { padding-right: 0; }
@media (max-width: 639px) {
  .compare thead { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .compare, .compare caption, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare tr { border-bottom: 1px solid var(--rule-ink); padding: 16px 0; }
  .compare td { border: 0; padding: 0; }
  .compare td + td { margin-top: 12px; }
  .compare td::before { content: attr(data-label); display: block; font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 6px; }
}

/* --------------------------------------------------------------------------
   Chapter 06: OWASP index
   -------------------------------------------------------------------------- */
.owasp { display: grid; grid-template-columns: 1fr; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 2; margin-top: 24px; font-variant-numeric: tabular-nums; }
.owasp li { display: flex; gap: 12px; color: var(--ink-text-2); }
.owasp__id { color: var(--brass-ink); }
@media (min-width: 640px) { .owasp { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* --------------------------------------------------------------------------
   Chapter 07: the loop
   -------------------------------------------------------------------------- */
.loop-wrap { width: min(100%, 560px); }
@media (max-width: 639px) { .loop-wrap { max-width: 320px; margin-inline: auto; } }
.loop { width: 100%; height: auto; }
.loop .loop__ring { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1382.3; stroke-dashoffset: 1382.3; transition: stroke-dashoffset var(--t-draw) var(--ease); }
.loop .loop__arc { fill: none; stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 345.6; stroke-dashoffset: 345.6; transition: stroke-dashoffset var(--t-draw) var(--ease) 300ms; }
.loop .loop__arc--signal { stroke: var(--signal); }
.loop .loop__arc--brass { stroke: var(--brass); }
.loop.is-drawn .loop__ring, .loop.is-drawn .loop__arc { stroke-dashoffset: 0; }
.loop .loop__tick { stroke: var(--ink); stroke-width: 1; }
.loop .loop__minor { stroke: var(--rule); stroke-width: 1; stroke-opacity: 1; }
.loop .loop__label { font-family: var(--font-display); font-size: 28px; fill: var(--text); }
.loop .loop__folio { font-family: var(--font-mono); font-size: 12px; fill: var(--text-3); letter-spacing: 0.12em; }

/* --------------------------------------------------------------------------
   Chapter 08: coverage ticks and engagement schedule
   -------------------------------------------------------------------------- */
.coverage { display: block; margin-top: 16px; }
.coverage svg { width: 80px; height: 16px; }
.coverage__cap { display: block; margin-top: 8px; font: 400 var(--fs-meta)/1.4 var(--font-mono); color: var(--text-3); letter-spacing: 0.02em; }
.schedule { border: 1px solid var(--rule-strong); padding: 24px; }
.schedule__head { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.schedule__row { display: grid; grid-template-columns: 3rem 1fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.schedule__num { font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; color: var(--text-3); padding-top: 0.5em; font-variant-numeric: tabular-nums; }
.schedule__title { display: block; font: 400 var(--fs-h3)/1.15 var(--font-display); color: var(--text); }
.schedule__desc { display: block; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; margin-top: 4px; }
.schedule__foot { padding-top: 16px; font: 400 0.8125rem/1.4 var(--font-mono); color: var(--text-3); }

/* --------------------------------------------------------------------------
   Chapter 10: form, fields, notices
   -------------------------------------------------------------------------- */
.form { max-width: 62ch; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form > * + * { margin-top: 24px; }
.form > .form__actions { margin-top: 32px; display: flex; justify-content: flex-end; }
@media (max-width: 639px) { .form__actions .btn { width: 100%; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--paper-2); border: 1px solid var(--border-ui); border-radius: 0; color: var(--text); font: 400 1rem/1.4 var(--font-body); transition: border-color var(--t-fast) ease-out, background-color var(--t-fast) ease-out; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--paper); border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 3px; }
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121212' stroke-width='1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.on-ink .field label { color: var(--ink-text-2); }
.on-ink .field input, .on-ink .field select, .on-ink .field textarea { background: var(--ink-3); border-color: var(--border-ui-ink); color: var(--ink-text); }
.on-ink .field input:focus, .on-ink .field select:focus, .on-ink .field textarea:focus { background: var(--ink-2); border-color: var(--ink-text); }

.notices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; max-width: 62ch; }
.notice { display: flex; gap: 16px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--rule); border-left: 2px solid var(--text-3); background: var(--paper-2); color: var(--text); font-size: var(--fs-small); line-height: 1.5; }
.notice__label { flex: none; font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.notice--success { border-left-color: var(--success); background: var(--success-wash); }
.notice--success .notice__label { color: var(--success); }
.notice--error { border-left-color: var(--error); background: var(--error-wash); }
.notice--error .notice__label { color: var(--error); }
.notice--info { border-left-color: var(--text-3); background: var(--paper-2); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { padding-block: var(--space-block); }
.footer__inner { border-top: 1px solid var(--rule-ink); padding-top: var(--space-block); display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
@media (min-width: 800px) { .footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer__tag { margin-top: 24px; font: italic 400 var(--fs-h3)/1.15 var(--font-display); color: var(--ink-text-2); }
.footer .eyebrow { margin-bottom: 12px; }
.footer__colophon { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 2; color: var(--ink-text-2); font-variant-numeric: tabular-nums; }
.footer__admin { color: var(--ink-text-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--signal-ink); text-underline-offset: 0.18em; transition: text-decoration-thickness var(--t-fast) ease-out; }
.footer__admin:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
html.js [data-reveal] .ledger__row { opacity: 0; transform: translateY(8px); transition-property: background-color, opacity, transform; transition-duration: var(--t-fast), var(--t-reveal), var(--t-reveal); transition-timing-function: ease-out, var(--ease), var(--ease); transition-delay: 0s, calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms); }
html.js [data-reveal].is-visible .ledger__row { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0ms !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js [data-reveal] .ledger__row { opacity: 1; transform: none; }
  .loop circle, .loop path { stroke-dashoffset: 0 !important; }
  .contents-panel { transition: none; }
}

/* ==========================================================================
   Admin
   The admin track appends its block below this line. It reuses .masthead,
   .ledger, .btn, .field and .notice from above.
   ========================================================================== */

.btn--sm { min-height: 40px; padding: 10px 16px; font-size: 0.875rem; }
.admin-body { background: var(--paper); }

/* Login: cardless, centred column under the stacked lockup */
.admin-auth { display: flex; justify-content: center; padding: clamp(64px, 10vw, 144px) 16px var(--space-chapter); }
.admin-auth__col { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.admin-auth__title { margin: 40px 0 8px; }
.admin-auth__sub { font: 400 0.8125rem/1.6 var(--font-mono); letter-spacing: 0.04em; color: var(--text-3); margin: 0 0 32px; }
.admin-auth .notices { width: 100%; text-align: left; margin-bottom: 24px; }
.admin-auth__form { width: 100%; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.admin-auth__form .btn { margin-top: 8px; }
.admin-auth__back { display: inline-block; margin-top: 32px; font-size: var(--fs-small); color: var(--text-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--signal); text-underline-offset: 0.18em; }
.admin-auth__back:hover { text-decoration-thickness: 2px; }

/* Inbox */
.admin-main { padding: var(--space-block) 0 var(--space-chapter); }
.admin-head { margin-bottom: 32px; }
.admin-head .h2 { margin-top: 12px; margin-bottom: 0; }

.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-block); }
.summary__cell { padding: 24px 24px 24px 0; border-right: 1px solid var(--rule); }
.summary__cell + .summary__cell { padding-left: 24px; }
.summary__cell:last-child { border-right: 0; }
.summary__num { font: 400 var(--fs-h2)/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums lining-nums; margin: 0 0 8px; }
.summary__num--signal { color: var(--signal); }
.summary__label { font: 500 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.summary__cell--filters { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--rule); padding-left: 0; }
.filters { display: flex; gap: 24px; margin-top: 14px; }
.filters__link { font: 400 0.9375rem/1 var(--font-mono); color: var(--text-2); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid transparent; }
.filters__link:hover { color: var(--text); }
.filters__link.is-active { color: var(--text); border-bottom-color: var(--signal); }
@media (min-width: 640px) {
  .summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
  .summary__cell--filters { grid-column: auto; border-top: 0; padding-left: 24px; }
}

.inbox { border-top: 1px solid var(--rule); }
.entry { position: relative; padding: 24px 0 24px 20px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
.entry--unread { box-shadow: inset 2px 0 0 var(--signal); }
.entry__head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.entry__name { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 400 1.0625rem/1.4 var(--font-body); color: var(--text-2); }
.entry--unread .entry__name { font-weight: 600; color: var(--text); }
.entry__dot { width: 6px; height: 6px; background: var(--signal); flex: none; }
.entry__meta { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.entry__meta a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--signal); text-underline-offset: 0.18em; }
.entry__facts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.entry__chip { display: inline-block; padding: 6px 10px; border: 1px solid var(--rule-strong); font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.08em; color: var(--text); white-space: nowrap; }
.entry__time { font: 400 var(--fs-meta)/1 var(--font-mono); letter-spacing: 0.04em; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry__body { max-width: 64ch; padding: 16px; background: var(--paper-2); color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-line; overflow-wrap: anywhere; }
.entry__actions { display: flex; justify-content: flex-end; gap: 12px; }
.entry__actions form { margin: 0; }
@media (max-width: 639px) {
  .entry__head { flex-direction: column; gap: 12px; }
  .entry__facts { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .entry__actions { justify-content: stretch; }
  .entry__actions form { flex: 1; }
  .entry__actions .btn { width: 100%; }
}

.empty { padding: var(--space-block) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.empty__title { font: 400 var(--fs-h3)/1.15 var(--font-display); color: var(--text); margin: 0 0 8px; }
.empty__sub { margin: 0; color: var(--text-2); }
/* Admin masthead on a phone: the status line yields, the lockup and button never overflow */
@media (max-width: 639px) {
  .masthead--admin .masthead__status { display: none; }
  .masthead--admin .masthead__inner { gap: 12px; }
}