/* =========================================================================
   THE STATE WRAPS REGISTER: design system, prefix wrp-
   Vocabulary of a wrap bench and of a documentation desk: spindle (site
   header), mandrel (the wordmark, the rod a film winds onto), fletch (site
   navigation), nock (the standing row of links), thread (breadcrumb),
   notice (inner page), brief (page head), proof (lead image), bay (numbered
   section), board (the standing table), ledger (the dated register, grouped
   by month), step (one dated line), lane (reading column), sidenote (margin
   note), kit (checklist), misfire (common mistakes), callout (pull quote),
   handoff (read next), edge (rule), witness (inline geometry), dock
   (footer). No card grid anywhere: the desk reads in lines, in tables and
   in dated rows, never in tiles.
   Palette: a wrap bench under shop light. Cold liner paper, carbon black,
   blaze orange, and the drafting blue of a spec sheet.
   No cream, no peach, no sage, no gradient, no shadow.
   Type: titles are set in the fixed pitch of a data sheet, text is set in
   a screen grotesque. Nothing fetched, no webfont, no external request.
   No border radius, no shadow. Dark mode follows prefers-color-scheme.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLOR · the bench -------------------------------------------- */
  --liner:      #E3E6E9;  /* page ground, the cold grey of release liner */
  --backing:    #F0F2F4;  /* bright paper: checklists, table heads       */
  --scrim:      #D5DADE;  /* alternate sections, image frames, holds     */
  --carbon:     #15181C;  /* text and titles, a carbon black             */
  --haze:       #59636E;  /* captions, standfirsts, secondary dates      */
  --blaze:      #BE4A16;  /* DOMINANT: links, rules, checklist bar       */
  --blaze-deep: #93360F;  /* hover and active state                      */
  --plate:      #33475A;  /* SECOND COLOR: section numbers, misfire bar  */
  --plate-deep: #24374A;  /* the drafting blue cleared for long prose    */
  --edge:       #C6CDD2;  /* one pixel rules, image borders, dividers    */
  --dock:       #14171B;  /* footer ground                               */

  /* ---- 2. TYPE · system stacks, nothing fetched ------------------------ */
  --spec-face: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;
  --desk-face: Geneva, Verdana, Tahoma, "Noto Sans", "DejaVu Sans", sans-serif;

  --spec-weight: 700;
  --cap-gap: 0.08em;

  --desk-size: clamp(1.02rem, 1rem + 0.2vw, 1.12rem);
  --desk-leading: 1.6;
  --rise-h1: clamp(1.62rem, 1.24rem + 1.7vw, 2.6rem);
  --rise-h2: clamp(1.2rem, 1.08rem + 0.6vw, 1.58rem);
  --rise-h3: clamp(1.04rem, 1rem + 0.22vw, 1.18rem);
  --rise-mark: clamp(1.7rem, 1.14rem + 2vw, 2.5rem);

  /* ---- 3. RHYTHM -------------------------------------------------------- */
  --lane-width: 66ch;
  --note-width: 22ch;
  --bench-wide: 1320px;
  --room: clamp(1.1rem, 4vw, 4rem);
  --alley: clamp(0.9rem, 2.2vw, 2rem);
  --slack: clamp(2.2rem, 5vw, 4.6rem);

  /* ---- 4. DETAILS · square corners, one pixel rules --------------------- */
  --edge-fine: 1px solid var(--edge);
  --tempo: 140ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --liner:      #12151A;
    --backing:    #1A1E24;
    --scrim:      #262C33;
    --carbon:     #E4E7EA;
    --haze:       #9FA9B4;
    --blaze:      #E98A52;
    --blaze-deep: #F0A877;
    --plate:      #8FB0CE;
    --plate-deep: #A9C6DE;
    --edge:       #39424B;
    --dock:       #0B0D10;
  }
}

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

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

body {
  margin: 0;
  background: var(--liner);
  color: var(--carbon);
  font-family: var(--desk-face);
  font-size: var(--desk-size);
  line-height: var(--desk-leading);
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--spec-face);
  font-weight: var(--spec-weight);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--rise-h1); }
h2 { font-size: var(--rise-h2); }
h3 { font-size: var(--rise-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blaze); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blaze-deep); }
a:focus-visible { outline: 2px solid var(--plate); outline-offset: 2px; }

::selection { background: var(--plate); color: var(--backing); }

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

table { border-collapse: collapse; }

hr { border: 0; }

/* ---- layout ------------------------------------------------------------- */
.wrp-bench {
  max-width: var(--bench-wide);
  margin: 0 auto;
  padding-inline: var(--room);
}

.wrp-bypass {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--backing);
  color: var(--carbon);
  padding: 0.6rem 1rem;
  border-block-end: 2px solid var(--blaze);
  z-index: 20;
}
.wrp-bypass:focus { left: 0; }

/* ---- spindle · site header ----------------------------------------------- */
.wrp-spindle {
  background: var(--liner);
  border-block-end: var(--edge-fine);
}

.wrp-spindle__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem var(--alley);
  padding-block: 0.9rem 0.7rem;
}

.wrp-mandrel {
  font-family: var(--spec-face);
  font-weight: var(--spec-weight);
  font-size: var(--rise-mark);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--carbon);
  text-decoration: none;
  max-width: 22ch;
  display: inline-block;
}
.wrp-mandrel:hover { color: var(--carbon); }
.wrp-mandrel span {
  display: block;
  font-family: var(--desk-face);
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--haze);
  margin-block-start: 0.45rem;
}

.wrp-fletch { margin-inline-start: auto; }
.wrp-fletch ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.4rem;
}
.wrp-fletch a {
  font-family: var(--spec-face);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--carbon);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  padding-block-end: 2px;
}
.wrp-fletch a:hover { color: var(--blaze); border-block-end-color: var(--blaze); }
.wrp-fletch a[aria-current="page"] { color: var(--plate); border-block-end-color: var(--plate); }

/* The standing resources row, on every page but the home. */
.wrp-nock-row {
  background: var(--backing);
  border-block-end: var(--edge-fine);
}
.wrp-nock-row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.wrp-nock-row li {
  font-family: var(--spec-face);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--haze);
  padding: 0.45rem 1.1rem;
  border-inline-end: var(--edge-fine);
}
.wrp-nock-row li:first-child { padding-inline-start: 0; }
.wrp-nock-row a { color: var(--blaze); text-decoration: none; }
.wrp-nock-row a:hover { color: var(--blaze-deep); text-decoration: underline; }

/* ---- thread · breadcrumb ------------------------------------------------- */
.wrp-thread { padding-block: 0.9rem 0; }
.wrp-thread ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--spec-face);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--haze);
}
.wrp-thread li { display: flex; align-items: baseline; }
.wrp-thread li + li::before { content: "\203A"; margin-inline: 0.55rem; color: var(--edge); }
.wrp-thread a { color: var(--haze); text-decoration: none; }
.wrp-thread a:hover { color: var(--blaze); text-decoration: underline; }
.wrp-thread [aria-current="page"] { color: var(--carbon); }

/* ---- bay · numbered section ------------------------------------------ */
.wrp-bay { padding-block: var(--slack) 0; }
.wrp-bay--recessed { background: var(--scrim); padding-block: var(--slack); margin-block-start: var(--slack); }

.wrp-bay__head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  border-block-start: 2px solid var(--carbon);
  padding-block-start: 0.6rem;
  margin-block-end: 0.4rem;
}
.wrp-bay__num {
  font-family: var(--spec-face);
  font-size: 0.8rem;
  letter-spacing: var(--cap-gap);
  text-transform: uppercase;
  color: var(--plate);
  white-space: nowrap;
}
.wrp-bay__head h2 { margin: 0; }
.wrp-bay__lede { color: var(--haze); margin: 0 0 1.4rem; max-width: 62ch; }

/* ---- ledger · the register, grouped by month -------------------------- */
.wrp-ledger { list-style: none; margin: 0; padding: 0; }

.wrp-ledger__month { margin-block-end: 1.6rem; }
.wrp-ledger__month > h3 {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--carbon);
  border-inline-start: 4px solid var(--plate);
  padding-inline-start: 0.6rem;
  margin: 0 0 0.7rem;
}

.wrp-ledger__steps { list-style: none; margin: 0; padding: 0; }

/* ---- step · one dated entry --------------------------------------------- */
.wrp-step {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding-block: 0.62rem;
  border-block-end: var(--edge-fine);
}
.wrp-ledger__steps > .wrp-step:nth-child(odd) { background: var(--backing); }

.wrp-postmark {
  font-family: var(--spec-face);
  font-size: 0.82rem;
  color: var(--haze);
  margin: 0.2rem 0 0;
  white-space: nowrap;
}
.wrp-step__main { min-width: 0; }
.wrp-step__kicker {
  font-family: var(--spec-face);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--plate);
  margin: 0 0 0.15rem;
}
.wrp-step__title { margin: 0 0 0.2rem; font-size: 1.06rem; line-height: 1.28; }
.wrp-step__title a { color: var(--carbon); text-decoration: none; }
.wrp-step__title a:hover { color: var(--blaze); text-decoration: underline; }
.wrp-step__text { color: var(--haze); font-size: 0.96rem; margin: 0; }

/* ---- notice · any inner page -------------------------------------------- */
.wrp-notice { padding-block-start: 0.4rem; }

.wrp-brief { padding-block: clamp(1.2rem, 2.6vw, 2.2rem) 0.2rem; }
.wrp-brief__band {
  font-family: var(--spec-face);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--plate);
  margin: 0 0 0.7rem;
}
.wrp-brief h1 { max-width: 30ch; margin-block-end: 0.6rem; }
.wrp-brief__chapo { font-size: clamp(1.08rem, 1.02rem + 0.34vw, 1.26rem); color: var(--carbon); max-width: 56ch; margin: 0; }

.wrp-byline {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.5rem 0 0;
  border-block-start: var(--edge-fine);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.2rem;
  font-family: var(--spec-face);
  font-size: 0.8rem;
  color: var(--haze);
}
.wrp-byline a { color: var(--haze); }
.wrp-byline a:hover { color: var(--blaze); }

/* ---- proof · lead image ------------------------------------------------- */
.wrp-proof {
  margin: 1.2rem 0 0;
  background: var(--scrim);
  border: var(--edge-fine);
  padding: 0.7rem;
}
.wrp-proof img { width: 100%; border: var(--edge-fine); }
.wrp-proof figcaption {
  padding-block-start: 0.55rem;
  color: var(--haze);
  font-size: 0.92rem;
  max-width: 78ch;
}

/* ---- lane and sidenote · the two fixed columns -------------------------- */
.wrp-rails {
  display: grid;
  grid-template-columns: minmax(0, var(--lane-width)) var(--note-width);
  justify-content: start;
  gap: 0 3rem;
  padding-block: 1.4rem 0;
}

.wrp-lane { max-width: var(--lane-width); min-width: 0; }
.wrp-lane > p:first-of-type { margin-block-start: 0; }
.wrp-lane h2 { margin-block-start: 1.6em; }
.wrp-lane h3 { margin-block-start: 1.3em; }
.wrp-lane li { margin-block-end: 0.4em; }
.wrp-lane ul, .wrp-lane ol { padding-inline-start: 1.3rem; }

/* The sidenote: a margin note that is not sticky. It descends into the flow
   under 1180 px, right after the heading it belongs to. */
.wrp-sidenote {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--haze);
  border-block-start: 2px solid var(--plate);
  padding-block-start: 0.6rem;
}
.wrp-sidenote p { margin: 0 0 0.8em; }
.wrp-sidenote a { color: var(--blaze); }

/* ---- board · the table ------------------------------------------------- */
.wrp-board-wrap {
  overflow-x: auto;
  border: var(--edge-fine);
  background: var(--backing);
  margin-block: 1.4rem;
}

.wrp-board {
  width: 100%;
  min-width: 46rem;
  font-size: 0.94rem;
}
.wrp-board caption {
  caption-side: top;
  text-align: start;
  font-family: var(--spec-face);
  font-size: 0.86rem;
  color: var(--carbon);
  padding: 0.7rem 0.8rem 0.5rem;
}
.wrp-board th, .wrp-board td {
  border-block-end: var(--edge-fine);
  padding: 0.55rem 0.8rem;
  text-align: start;
  vertical-align: top;
}
.wrp-board thead th {
  background: var(--blaze);
  color: var(--backing);
  font-family: var(--spec-face);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
}
.wrp-board tbody th { background: var(--scrim); font-weight: 600; }
.wrp-board td { color: var(--carbon); }
.wrp-board .wrp-faint { color: var(--haze); font-style: italic; }

/* ---- kit · the checklist ---------------------------------------------- */
.wrp-kit {
  background: var(--backing);
  border-inline-start: 3px solid var(--blaze);
  padding: 1rem 1.2rem;
  margin-block: 1.4rem;
}
.wrp-kit h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  margin: 0 0 0.6rem;
}
.wrp-kit ul, .wrp-kit ol { margin: 0; padding-inline-start: 1.2rem; }
.wrp-kit li { margin-block-end: 0.35em; }

/* ---- misfire · common mistakes ----------------------------------------- */
.wrp-misfire {
  background: var(--backing);
  border-inline-start: 3px solid var(--plate);
  padding: 1rem 1.2rem;
  margin-block: 1.4rem;
}
.wrp-misfire h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--plate-deep);
  margin: 0 0 0.6rem;
}
.wrp-misfire ul { margin: 0; padding-inline-start: 1.2rem; }
.wrp-misfire li { margin-block-end: 0.4em; }

/* ---- callout · pull quote --------------------------------------------- */
.wrp-callout {
  margin: 1.6rem 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--plate);
  font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
  line-height: 1.45;
  color: var(--carbon);
}
.wrp-callout p { margin: 0; }

/* ---- handoff · read next --------------------------------------------------- */
.wrp-handoff {
  margin-block: 2rem 0;
  border-block-start: 2px solid var(--carbon);
  padding-block-start: 0.8rem;
}
.wrp-handoff h2 {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  margin: 0 0 0.6rem;
}
.wrp-handoff ul { list-style: none; margin: 0; padding: 0; }
.wrp-handoff li { margin-block-end: 0.45em; }

/* ---- edge · the divider ------------------------------------------------- */
.wrp-edge {
  border: 0;
  border-block-start: 1px solid var(--edge);
  width: calc(100% - 4rem);
  margin: var(--slack) auto 0 4rem;
}

/* ---- witness · inline geometry ------------------------------------------ */
.wrp-witness { vertical-align: baseline; color: var(--plate); }
.wrp-witness__rules { color: var(--blaze); }

/* ---- docket · the signature component ---------------------------------- */
.wrp-docket { margin-block: 1.6rem; }
.wrp-docket > details {
  border: var(--edge-fine);
  background: var(--backing);
  margin-block-start: 0.5rem;
}
.wrp-docket summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-family: var(--spec-face);
  font-size: 0.9rem;
}
.wrp-docket summary:hover { color: var(--blaze); }
.wrp-docket details[open] summary { border-block-end: var(--edge-fine); }
.wrp-docket details > div { padding: 0.6rem 0.9rem 0.9rem; }

/* ---- dock · the footer ------------------------------------------- */
.wrp-dock {
  margin-block-start: var(--slack);
  background: var(--dock);
  color: var(--backing);
}
.wrp-dock a { color: var(--backing); }
.wrp-dock a:hover { color: var(--scrim); }
.wrp-dock__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  padding-block: 2.2rem 1.6rem;
}
.wrp-dock h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--cap-gap);
  color: var(--scrim);
  margin: 0 0 0.7rem;
}
.wrp-dock ul { list-style: none; margin: 0; padding: 0; }
.wrp-dock li { margin-block-end: 0.35em; font-size: 0.95rem; }
.wrp-dock__base {
  border-block-start: 1px solid var(--edge);
  padding-block: 1rem 1.6rem;
  color: var(--scrim);
  font-family: var(--spec-face);
  font-size: 0.8rem;
}

/* ---- print -------------------------------------------------------------- */
@media print {
  .wrp-spindle, .wrp-nock-row, .wrp-fletch, .wrp-dock, .wrp-bypass, .wrp-thread { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrp-rails { display: block; }
  .wrp-sidenote {
    border-block-start: none;
    border-block-end: 1px solid #999;
    margin-block: 0.6em 1.2em;
    padding-block: 0.2em;
  }
  .wrp-lane a[href^="/"]::after { content: ""; }
  .wrp-kit { break-inside: avoid; }
  .wrp-board-wrap { overflow: visible; }
  .wrp-board { min-width: 0; }
}

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width: 1179px) {
  .wrp-rails { display: block; }
  .wrp-sidenote { margin-block: 1.2rem 0; max-width: 52ch; }
}

@media (max-width: 899px) {
  .wrp-fletch { margin-inline-start: 0; width: 100%; }
  .wrp-fletch ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 1rem; }
  .wrp-step { grid-template-columns: 1fr; gap: 0 0; }
  .wrp-postmark { margin-block-end: 0.15rem; }
}

@media (max-width: 520px) {
  .wrp-fletch ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --room: 1.1rem; }
}