/* strongroom.css
   Shield Data Systems. Dark strongroom surface, serif display, monospace
   furniture, flat. No shadows, no rounded corners, hairline rules only. */

:root {
  --vault:  #0B0E14;   /* page surface            */
  --recess: #10141C;   /* sunken block            */
  --face:   #141924;   /* raised plate            */
  --rule:   #1E2531;   /* hairline                */
  --edge:   #2C3547;   /* stronger hairline       */
  --ink:    #D8DEE9;   /* body text, 14.3:1       */
  --dim:    #97A2B4;   /* secondary text, 7.5:1   */
  --faint:  #7C8899;   /* small print, 5.4:1      */
  --steel:  #4FA3C7;   /* accent, 6.8:1           */
  --amber:  #D9843B;   /* warning, 6.7:1          */
  --deep:   #061019;   /* text on the steel fill  */
  --display: Lora, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --measure: 68ch;
}

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

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

body {
  margin: 0;
  background: #0B0E14;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.011em;
  margin: 0;
  color: #E6EBF2;
}

p, ul, ol, dl, figure, table { margin: 0; }

a { color: var(--steel); text-decoration: underline; text-underline-offset: 0.18em;
    text-decoration-thickness: 1px; }
a:hover { color: #7CC0DD; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--steel); outline-offset: 3px;
}

img { max-width: 100%; display: block; }

strong { font-weight: 700; color: #EEF2F7; }

code, kbd {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--steel);
}

/* --------------------------------------------------------------- keyhole */
/* Skip link. Visible the moment it takes focus, never before. */

.keyhole {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  background: var(--steel); color: var(--deep); padding: 0.85rem 1.25rem;
}
.keyhole:focus { left: 0; }

/* ------------------------------------------------------------ strongroom */
/* The width container. Every band on every page sits in one of these. */

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

/* --------------------------------------------------------------- tumbler */
/* Site header. The nav is visible with no script at all: JS only ever
   *adds* the shut state, so failing to run leaves everything open. */

.tumbler {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 14, 20, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(140%) blur(8px);
}
.tumbler__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.25rem; flex-wrap: wrap;
}
.tumbler__brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--ink);
}
.tumbler__mark { width: 30px; height: 30px; flex: 0 0 auto; }
.tumbler__name {
  font-family: var(--mono);
  font-weight: 500; font-size: 0.83rem; letter-spacing: 0.19em;
  text-transform: uppercase; color: #E6EBF2;
}
.tumbler__nav { margin-left: auto; }
.tumbler__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.9rem; align-items: center;
}
.tumbler__link {
  font-family: var(--mono);
  font-size: 0.71rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-block: 0.45rem;
  border-bottom: 1px solid transparent;
}
.tumbler__link:hover { color: var(--ink); border-bottom-color: var(--edge); }
.tumbler__link--current { color: var(--steel); border-bottom-color: var(--steel); }
.tumbler__toggle {
  display: none;
  background: none; border: 1px solid var(--edge); cursor: pointer;
  width: 2.6rem; height: 2.3rem; padding: 0.55rem 0.6rem;
  flex-direction: column; justify-content: space-between;
}
.tumbler__bar { display: block; height: 1px; background: var(--ink); }

@media (max-width: 52rem) {
  .tumbler__toggle[data-armed="yes"] { display: inline-flex; }
  .tumbler__nav {
    flex-basis: 100%; margin-left: 0;
    border-top: 1px solid var(--rule);
  }
  .tumbler__nav[data-state="shut"] { display: none; }
  .tumbler__list { flex-direction: column; align-items: stretch; gap: 0; }
  .tumbler__link {
    display: block; padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .tumbler__link--current { border-bottom-color: var(--steel); }
}

/* ------------------------------------------------------------------ bolt */
/* The one action shape on the site. Square, mono, no fill by default. */

.bolt {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.73rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.95rem 1.6rem; text-decoration: none; border: 1px solid var(--edge);
  color: var(--ink); background: transparent;
}
.bolt::before { content: "["; color: var(--steel); }
.bolt::after  { content: "]"; color: var(--steel); }
.bolt--driven {
  background: var(--steel); border-color: var(--steel); color: var(--deep);
  font-weight: 500;
}
.bolt--driven::before, .bolt--driven::after { color: var(--deep); }
.bolt--driven:hover { background: #6FB7D6; border-color: #6FB7D6; color: var(--deep); }
.bolt--withdrawn:hover { border-color: var(--steel); color: var(--steel); }

/* ------------------------------------------------------------- vestibule */
/* Compact centred hero. One action, nothing else. */

.vestibule {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}
.vestibule__eyebrow {
  font-family: var(--mono);
  font-size: 0.69rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.5rem;
}
.vestibule__title {
  font-size: clamp(2.05rem, 5.4vw, 3.45rem);
  max-width: 20ch; margin-inline: auto;
  text-wrap: balance;
}
.vestibule__claim {
  color: var(--dim);
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  max-width: 54ch; margin: 1.6rem auto 0;
}
.vestibule__acts { margin-top: 2.3rem; }
.vestibule__note {
  font-family: var(--mono);
  font-size: 0.72rem; line-height: 1.85; letter-spacing: 0.03em;
  color: var(--faint); text-align: left;
  max-width: 62ch; margin: 2.3rem auto 0;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- grille */
/* Image plate. Caption sits under the rule, never over the picture. */

.grille { margin: 0; }
.grille__image {
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--recess);
}
.grille__caption {
  font-family: var(--mono);
  font-size: 0.7rem; line-height: 1.8; letter-spacing: 0.05em;
  color: var(--faint);
  margin-top: 0.85rem; padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.grille--band { padding-block: clamp(2rem, 5vw, 3.25rem); }

/* -------------------------------------------------------------- cassette */
/* The repeating content block. */

.cassette { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--rule); }
.cassette--recess { background: var(--recess); }
.cassette--open { border-top: 0; }
.cassette__head { max-width: 62ch; margin-bottom: 2.5rem; }
.cassette__eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1rem;
}
.cassette__title { font-size: clamp(1.55rem, 3.3vw, 2.15rem); text-wrap: balance; }
.cassette__line { color: var(--dim); margin-top: 1.1rem; }
.cassette__body { max-width: var(--measure); }
.cassette__body > * + * { margin-top: 1.15rem; }
.cassette__body h3 {
  font-size: 1.16rem; margin-top: 2.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.cassette__body ul, .cassette__body ol { padding-left: 1.35rem; }
.cassette__body li { margin-top: 0.55rem; }
.cassette__body li::marker { color: var(--steel); font-family: var(--mono); font-size: 0.85em; }

/* -------------------------------------------------------------- anteroom */
/* Two column split: a short standing head beside a column of prose. */

.anteroom { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) {
  .anteroom { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; }
  .anteroom--wide { grid-template-columns: 20rem minmax(0, 1fr); }
}
.anteroom__aside { position: sticky; top: 6rem; }
@media (max-width: 60rem) { .anteroom__aside { position: static; } }
.anteroom__main > * + * { margin-top: 1.15rem; }
.anteroom__main h3 {
  font-size: 1.16rem; margin-top: 2.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.anteroom__main ul, .anteroom__main ol { padding-left: 1.35rem; }
.anteroom__main li { margin-top: 0.55rem; }
.anteroom__main li::marker { color: var(--steel); font-family: var(--mono); font-size: 0.85em; }

/* ---------------------------------------------------- cradle plus coffer */
/* Every table scrolls inside its own cradle. The page never scrolls
   sideways because of one. */

.cradle {
  overflow-x: auto;
  border: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}
/* A scrolling container has to be reachable by keyboard, so every cradle
   carries tabindex="0" and therefore needs a focus ring of its own. */
.cradle:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.coffer {
  width: 100%; min-width: 42rem;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.79rem; line-height: 1.72;
}
.coffer caption {
  font-family: var(--mono);
  text-align: left; color: var(--faint);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--rule);
  background: var(--face);
}
.coffer th, .coffer td {
  text-align: left; vertical-align: top;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.coffer thead th {
  font-weight: 500; font-size: 0.65rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--steel);
  background: var(--recess);
}
.coffer tbody tr:last-child th, .coffer tbody tr:last-child td { border-bottom: 0; }
.coffer tbody th { font-weight: 500; color: #E6EBF2; }
.coffer td { color: var(--dim); }
.coffer strong { color: #E6EBF2; font-weight: 500; }
.coffer__stamp {
  display: inline-block; white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid var(--amber); color: var(--amber);
  padding: 0.22rem 0.5rem;
}

/* --------------------------------------------------------------- warrant */
/* Callout. Amber bar on the left, never a shadow. */

.warrant {
  border: 1px solid var(--rule); border-left: 2px solid var(--amber);
  background: var(--face);
  padding: 1.4rem 1.6rem;
  margin-top: 1.8rem;
}
.warrant > * + * { margin-top: 0.85rem; }
.warrant__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.7rem;
}
.warrant p { color: var(--dim); font-size: 0.97rem; }

/* ------------------------------------------------------------ escutcheon */
/* The registrable identity plate. Nothing here that is not on a register. */

.escutcheon { border-top: 1px solid var(--edge); margin-top: 0; }
.escutcheon__row {
  display: grid; gap: 0.35rem 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) {
  .escutcheon__row { grid-template-columns: 15rem minmax(0, 1fr); }
}
.escutcheon__term {
  font-family: var(--mono);
  font-size: 0.67rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--faint); margin: 0;
}
.escutcheon__value { margin: 0; color: var(--ink); font-size: 0.98rem; }

/* --------------------------------------------------------------- spindle */
/* Role marker used through the privacy policy: which capacity applies. */

.spindle {
  display: inline-block; white-space: nowrap; vertical-align: 0.06em;
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--steel); color: var(--steel);
  padding: 0.16rem 0.45rem; margin-right: 0.6rem;
  font-weight: 400;
}
.spindle--processor { border-color: var(--amber); color: var(--amber); }
.spindle--both { border-color: var(--edge); color: var(--dim); }

/* --------------------------------------------------------------- daybook */
/* The long legal documents. Sticky index on the left, clauses on the right. */

.daybook { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.daybook__grid { display: grid; gap: 2.75rem; align-items: start; }
@media (min-width: 66rem) {
  .daybook__grid { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 4rem; }
}
.daybook__index {
  border: 1px solid var(--rule); background: var(--recess);
  padding: 1.4rem 1.5rem;
}
@media (min-width: 66rem) {
  .daybook__index { position: sticky; top: 5.75rem; max-height: 78vh; overflow-y: auto; }
}
.daybook__indextitle {
  font-family: var(--mono);
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 1rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule);
}
.daybook__indexlist {
  list-style: none; counter-reset: clause; margin: 0; padding: 0;
}
.daybook__indexlist li { counter-increment: clause; display: flex; gap: 0.7rem; padding: 0.32rem 0; }
.daybook__indexlist li::before {
  content: counter(clause, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.63rem; color: var(--faint); padding-top: 0.22rem;
}
.daybook__indexlink {
  font-family: var(--mono);
  font-size: 0.71rem; line-height: 1.65; letter-spacing: 0.01em;
  color: var(--dim); text-decoration: none;
}
.daybook__indexlink:hover { color: var(--steel); text-decoration: underline; }
.daybook__article { min-width: 0; }
.daybook__head { padding-bottom: 2rem; border-bottom: 1px solid var(--edge); }
.daybook__eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1rem;
}
.daybook__title { font-size: clamp(1.9rem, 4.4vw, 2.75rem); }
.daybook__lede { color: var(--dim); margin-top: 1.2rem; max-width: 60ch; }
.daybook__dates {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 1.6rem;
}
.daybook__dates span {
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--rule); padding: 0.3rem 0.6rem;
}
.daybook__clause { padding-top: 2.75rem; }
.daybook__clausetitle {
  display: flex; gap: 1rem; align-items: baseline;
  font-size: 1.42rem; margin-bottom: 1.2rem;
}
.daybook__clauseno {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em;
  color: var(--steel); flex: 0 0 auto;
  border-bottom: 1px solid var(--steel); padding-bottom: 0.1rem;
}
/* Prose is capped at a comfortable measure, but a table is not prose: it
   breaks out to the full article width so a five column schedule is legible
   before it has to be scrolled. */
.daybook__clausebody { max-width: none; }
.daybook__clausebody > p,
.daybook__clausebody > ul,
.daybook__clausebody > ol,
.daybook__clausebody > h3,
.daybook__clausebody > div:not(.cradle) { max-width: var(--measure); }
.daybook__clausebody > * + * { margin-top: 1.1rem; }
.daybook__clausebody h3 {
  font-size: 1.1rem; margin-top: 2.1rem;
  color: #E6EBF2;
}
.daybook__clausebody ul, .daybook__clausebody ol { padding-left: 1.35rem; }
.daybook__clausebody li { margin-top: 0.5rem; }
.daybook__clausebody li::marker { color: var(--steel); font-family: var(--mono); font-size: 0.85em; }
.daybook__clausebody .cradle { margin-top: 1.4rem; }
.daybook__clausebody p { color: var(--ink); }

/* ---------------------------------------------------------------- keyway */
/* Footer. */

.keyway {
  border-top: 1px solid var(--edge);
  background: var(--recess);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2.25rem;
  margin-top: 0;
}
.keyway__grid { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) {
  .keyway__grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
.keyway__brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.keyway__blurb { color: var(--dim); font-size: 0.95rem; max-width: 40ch; }
.keyway__title {
  font-family: var(--mono);
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 1rem;
}
.keyway__list { list-style: none; margin: 0; padding: 0; }
.keyway__list li { margin-bottom: 0.6rem; }
.keyway__list a {
  font-family: var(--mono);
  font-size: 0.74rem; color: var(--dim); text-decoration: none;
}
.keyway__list a:hover { color: var(--steel); text-decoration: underline; }
.keyway__legal {
  margin-top: 2.75rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem; line-height: 1.95; letter-spacing: 0.02em;
  color: var(--faint);
}
.keyway__legal p { margin-bottom: 0.35rem; }
.keyway__legal a { color: var(--dim); }

/* ------------------------------------------------------------------ hasp */
/* Scroll reveal. The armed state is what hides content, and only the script
   can arm it, so no script means nothing is ever hidden. Reduced motion
   disarms it in CSS as well, belt and braces. */

.hasp[data-state="armed"] { opacity: 0; transform: translateY(12px); }
.hasp[data-state="open"] {
  opacity: 1; transform: none;
  transition: opacity 560ms ease, transform 560ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .hasp[data-state="armed"], .hasp[data-state="open"] {
    opacity: 1; transform: none; transition: none;
  }
}
/* A long legal document gets printed. Nothing may be missing from the paper
   because the reader never scrolled past it on screen. */
@media print {
  .hasp[data-state="armed"] { opacity: 1; transform: none; }
  .tumbler, .keyhole, .tumbler__toggle { display: none; }
  .daybook__index { position: static; max-height: none; }
}

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

.lockplate { display: block; height: 1px; background: var(--rule); border: 0; margin: 0; }