/* ==========================================================================
   Deadly Dozen Reloaded — Field Modification Manual
   Visual direction: a US Army technical manual printed on olive-tinted
   manila card stock, with stencilled crate markings and carbon-black plates.
   StixsworldHD (StixsmasterHD4k)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Paper: olive-tinted buff card, not cream */
    --paper:      #cdc2a4;
    --paper-hi:   #dbd2b8;
    --paper-lo:   #bfb392;
    --paper-edge: #ab9f7d;

    /* Ink */
    --ink:        #1b1f17;
    --ink-soft:   #4e5344;
    --ink-faint:  #787c69;

    /* Structure */
    --drab:       #55604a;
    --drab-hair:  #8d9179;

    /* Accents */
    --stencil:    #98301a;
    --stencil-lo: #c4562f;
    --brass:      #86691f;
    --field:      #4c6b4a;

    /* Dark plates */
    --carbon:     #21261d;
    --carbon-hi:  #2c332a;
    --carbon-txt: #cec9b1;
    --carbon-dim: #8b917c;

    /* Type */
    --display: 'Big Shoulders Display', 'Big Shoulders', 'Oswald', 'Arial Narrow', sans-serif;
    --stamp:   'Saira Stencil One', 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --body:    'Zilla Slab', 'Bitter', Georgia, 'Times New Roman', serif;
    --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* Rhythm */
    --rail-h:  58px;
    --gutter:  clamp(1.15rem, 3.4vw, 3.4rem);
    --measure: 68ch;
    --radius:  2px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--rail-h) + 1.4rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--body);
    font-weight: 400;
    font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.075rem);
    line-height: 1.66;
    color: var(--ink);
    background-color: var(--paper);
    /* Card-stock fibre: two low-contrast gradients, no image */
    background-image:
        repeating-linear-gradient(102deg,
            rgba(85, 96, 74, 0.035) 0px, rgba(85, 96, 74, 0.035) 1px,
            transparent 1px, transparent 4px),
        repeating-linear-gradient(6deg,
            rgba(27, 31, 23, 0.022) 0px, rgba(27, 31, 23, 0.022) 1px,
            transparent 1px, transparent 3px);
    text-rendering: optimizeLegibility;
}

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

a { color: var(--stencil); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

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

.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper);
    padding: 0.6rem 1rem; z-index: 999; font-family: var(--display);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.skip:focus { left: 0; }

.dim { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   3. Top rail
   -------------------------------------------------------------------------- */

.rail {
    position: sticky; top: 0; z-index: 60;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 3px solid var(--stencil);
}

.rail-in {
    display: flex; align-items: center; gap: 1.1rem;
    max-width: 1560px; margin: 0 auto;
    padding: 0 var(--gutter);
    height: var(--rail-h);
}

.rail-mark {
    display: flex; align-items: baseline; gap: 0.7rem;
    text-decoration: none; color: inherit;
    white-space: nowrap;
}

.rail-tm {
    font-family: var(--stamp);
    font-size: 0.9rem;
    color: var(--stencil-lo);
    letter-spacing: 0.05em;
}

.rail-game {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.02rem, 0.9rem + 0.6vw, 1.32rem);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    line-height: 1;
}

.rail-mark:hover .rail-game { color: var(--stencil-lo); }

.rail-sub {
    margin: 0; flex: 1;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.045em;
    color: var(--carbon-dim);
    text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rail-toggle {
    display: none;
    align-items: center; gap: 0.45rem;
    background: none; border: 1px solid var(--drab);
    color: var(--paper); cursor: pointer;
    padding: 0.36rem 0.6rem; border-radius: var(--radius);
    font-family: var(--display); text-transform: uppercase;
    letter-spacing: 0.06em; font-size: 0.82rem;
}
.rail-toggle span {
    display: block; width: 15px; height: 2px;
    background: var(--paper); margin: 2px 0;
}
.rail-toggle em { font-style: normal; margin-left: 0.25rem; }

.rail-progress { height: 2px; background: rgba(205, 194, 164, 0.14); }
.rail-progress span {
    display: block; height: 100%; width: 0;
    background: var(--stencil-lo);
    transition: width 0.12s linear;
}

/* --------------------------------------------------------------------------
   4. Shell and sidebar
   -------------------------------------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr);
    max-width: 1560px;
    margin: 0 auto;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: var(--rail-h);
    max-height: calc(100vh - var(--rail-h));
    overflow-y: auto;
    padding: 2.1rem 0 3rem var(--gutter);
    border-right: 1px solid var(--paper-edge);
}

.toc-head {
    margin: 0 0 0.9rem;
    font-family: var(--stamp);
    font-size: 0.82rem;
    letter-spacing: 0.09em;
    color: var(--stencil);
    text-transform: uppercase;
}

.toc-list { list-style: none; margin: 0; padding: 0 1rem 0 0; counter-reset: none; }

.toc-item { border-top: 1px solid var(--paper-edge); }
.toc-item:last-child { border-bottom: 1px solid var(--paper-edge); }

.toc-item > a {
    display: grid;
    grid-template-columns: 2.15rem 1fr;
    gap: 0.35rem;
    align-items: baseline;
    padding: 0.55rem 0.4rem 0.55rem 0;
    text-decoration: none;
    color: var(--ink-soft);
    transition: background-color 0.14s ease, color 0.14s ease;
}
.toc-item > a:hover { background: var(--paper-hi); color: var(--ink); }

.toc-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
}

.toc-text {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.018em;
    line-height: 1.22;
}

.toc-item.is-current > a { background: var(--ink); color: var(--paper); }
.toc-item.is-current .toc-num { color: var(--stencil-lo); }
.toc-item.is-front .toc-text { font-style: italic; }

.toc-foot {
    margin: 1.6rem 0 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    text-transform: uppercase;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. Sheet — the reading surface
   -------------------------------------------------------------------------- */

.sheet {
    padding: 2.1rem var(--gutter) 4rem;
    min-width: 0;
}

.doc { max-width: 74ch; }

.doc p,
.doc li { max-width: var(--measure); }

/* --- headings --- */

.doc-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.35rem, 1.6rem + 3.5vw, 4.05rem);
    line-height: 0.94;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin: 0.35rem 0 0.7rem;
    max-width: 22ch;
}

.doc-lede {
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.26rem);
    line-height: 1.55;
    color: var(--ink-soft);
    font-weight: 300;
    margin: 0 0 2.2rem;
    max-width: 58ch;
}

.task {
    margin: 3.1rem 0 0;
    scroll-margin-top: calc(var(--rail-h) + 1.4rem);
}

.task-head {
    display: grid;
    grid-template-columns: 3.3rem 1fr;
    align-items: start;
    gap: 0.2rem;
    margin: 0 0 0.85rem;
    padding-top: 0.85rem;
    border-top: 2px solid var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
    line-height: 1.06;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.task-num {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--stencil);
    letter-spacing: 0.06em;
    padding-top: 0.42rem;
}

.doc h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.24rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 2.1rem 0 0.55rem;
    color: var(--ink);
}

.doc h4 {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--stencil);
    margin: 1.7rem 0 0.4rem;
}

.doc p { margin: 0 0 1.05rem; }

.doc ul, .doc ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
.doc li { margin-bottom: 0.42rem; }
.doc ul { list-style: none; padding-left: 1.1rem; }
.doc ul > li { position: relative; padding-left: 0.85rem; }
.doc ul > li::before {
    content: '';
    position: absolute; left: 0; top: 0.62em;
    width: 6px; height: 6px;
    background: var(--drab);
}
.doc ol { list-style: decimal; }
.doc ol > li::marker { font-family: var(--mono); font-size: 0.82em; color: var(--stencil); }

.doc strong { font-weight: 700; }
.doc em { font-style: italic; }

.doc hr {
    border: 0; height: 0;
    border-top: 1px solid var(--paper-edge);
    margin: 2.6rem 0;
}

/* --------------------------------------------------------------------------
   6. Stamp — the signature block
   -------------------------------------------------------------------------- */

.stamp {
    position: relative;
    margin: 0 0 1.9rem;
    padding: 0;
    color: var(--stencil);
    max-width: 46rem;
}

.stamp-rule { height: 3px; background: var(--stencil); opacity: 0.88; }
.stamp-rule + .stamp-body { border: 0; }

.stamp-body {
    display: flex;
    align-items: stretch;
    gap: 1.15rem;
    padding: 0.55rem 0.2rem 0.6rem;
}

.stamp-num {
    font-family: var(--stamp);
    font-size: clamp(2.6rem, 2rem + 2.2vw, 3.6rem);
    line-height: 0.82;
    color: var(--stencil);
    opacity: 0.92;
    letter-spacing: -0.02em;
    align-self: center;
    /* ink bleed */
    text-shadow: 0.5px 0.5px 0 rgba(152, 48, 26, 0.32), -0.4px 0 0 rgba(152, 48, 26, 0.2);
}

.stamp-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.7rem;
    align-self: center;
    flex: 1;
}

.stamp-cell { display: flex; flex-direction: column; gap: 0.05rem; }
.stamp-cell-wide { flex: 1 1 16rem; }

.stamp-key {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.stamp-val {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   7. Callouts
   -------------------------------------------------------------------------- */

.callout {
    margin: 1.5rem 0;
    padding: 0.95rem 1.15rem 0.6rem;
    background: var(--paper-hi);
    border-left: 4px solid var(--drab);
    max-width: 64ch;
}

.callout-label {
    margin: 0 0 0.35rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.03rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}

.callout-kind {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 0.16rem 0.42rem;
    margin-right: 0.55rem;
    vertical-align: 0.1em;
    color: var(--paper-hi);
    background: var(--drab);
}

.callout-body > p:last-child { margin-bottom: 0.5rem; }
.callout-body > ul:last-child,
.callout-body > ol:last-child { margin-bottom: 0.6rem; }
.callout-body p, .callout-body li { max-width: 60ch; }

.callout-warn  { border-left-color: var(--stencil); background: #dcc9b6; }
.callout-warn .callout-kind { background: var(--stencil); }
.callout-warn .callout-label { color: var(--stencil); }

.callout-note  { border-left-color: var(--brass); }
.callout-note .callout-kind { background: var(--brass); }

.callout-check { border-left-color: var(--field); }
.callout-check .callout-kind { background: var(--field); }

.callout-spec  { border-left-color: var(--carbon); background: var(--paper-lo); }
.callout-spec .callout-kind { background: var(--carbon); }
.callout-spec .callout-body { font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   8. Code blocks and paths
   -------------------------------------------------------------------------- */

code.path,
.doc :not(pre) > code {
    font-family: var(--mono);
    font-size: 0.855em;
    background: var(--paper-hi);
    border-bottom: 1px solid var(--paper-edge);
    padding: 0.08em 0.32em;
    word-break: break-word;
}

.block {
    position: relative;
    margin: 1.35rem 0 1.6rem;
    background: var(--carbon);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 72ch;
}

.block-label {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--carbon-dim);
    padding: 0.55rem 0.95rem 0;
}

.block pre {
    margin: 0;
    padding: 0.85rem 0.95rem 0.95rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.815rem;
    line-height: 1.62;
    color: var(--carbon-txt);
    tab-size: 4;
}

.block-path pre  { white-space: pre-wrap; word-break: break-all; }
.block-path      { border-left: 3px solid var(--stencil); }
.block-config    { border-left: 3px solid var(--brass); }
.block-console   { border-left: 3px solid var(--field); }
.block-console pre { color: #b9c4ac; }

.block-copy {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background: var(--carbon-hi);
    color: var(--carbon-dim);
    border: 1px solid #3b4338;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.24rem 0.5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.block:hover .block-copy,
.block-copy:focus-visible { opacity: 1; }
.block-copy:hover { color: var(--paper); }
.block-copy.is-done { color: #9dc48a; border-color: #4d6642; opacity: 1; }

/* --------------------------------------------------------------------------
   9. Directory trees
   -------------------------------------------------------------------------- */

.tree {
    margin: 1.4rem 0 1.5rem;
    padding: 1rem 1.15rem 1.1rem;
    background: var(--paper-hi);
    border: 1px solid var(--paper-edge);
    border-left: 3px solid var(--drab);
    overflow-x: auto;
    max-width: 72ch;
}

.tree-title {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.7rem;
}

.tree ul { list-style: none; margin: 0; padding: 0; }
.tree-root { font-family: var(--mono); font-size: 0.795rem; line-height: 1.85; }
.tree-kids { padding-left: 1.4rem; position: relative; }
.tree-kids::before {
    content: '';
    position: absolute; left: 0.42rem; top: 0; bottom: 0.92em;
    border-left: 1px solid var(--drab-hair);
}

.tree-item { position: relative; }
.tree-kids > .tree-item::before {
    content: '';
    position: absolute; left: -0.98rem; top: 0.92em;
    width: 0.72rem; border-top: 1px solid var(--drab-hair);
}

.tree-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; }

.tree-name { color: var(--ink); font-weight: 500; white-space: nowrap; }

.tree-note {
    font-family: var(--body);
    font-size: 0.895rem;
    color: var(--ink-faint);
    line-height: 1.45;
}

.tree-item.is-you    > .tree-row > .tree-name { color: var(--stencil); font-weight: 600; }
.tree-item.is-auto   > .tree-row > .tree-name { color: var(--brass); font-weight: 600; }
.tree-item.is-keep   > .tree-row > .tree-name { color: var(--ink-faint); }
.tree-item.is-critical > .tree-row > .tree-name {
    color: var(--ink); font-weight: 700;
    box-shadow: inset 0 -0.42em 0 rgba(152, 48, 26, 0.22);
}

.legend {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem;
    list-style: none; margin: -0.6rem 0 1.8rem; padding: 0;
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.03em; color: var(--ink-soft);
}
.legend > li { padding-left: 0; margin: 0; position: static; }
.legend > li::before { display: none; }
.legend-swatch {
    display: inline-block; width: 0.62rem; height: 0.62rem;
    margin-right: 0.42rem; vertical-align: -0.02em;
}
.legend-swatch.is-you      { background: var(--stencil); }
.legend-swatch.is-auto     { background: var(--brass); }
.legend-swatch.is-keep     { background: var(--ink-faint); }
.legend-swatch.is-critical { background: var(--ink); }

/* --------------------------------------------------------------------------
   10. Plates
   -------------------------------------------------------------------------- */

.plate {
    margin: 2rem 0 2.3rem;
    max-width: 60rem;
}

.plate-frame {
    display: block;
    position: relative;
    background: var(--carbon);
    border: 1px solid var(--paper-edge);
    padding: 6px;
    line-height: 0;
    cursor: zoom-in;
    text-decoration: none;
}
.plate-frame img { width: 100%; height: auto; }

.plate-zoom {
    position: absolute;
    right: 12px; bottom: 12px;
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--paper);
    background: rgba(27, 31, 23, 0.86);
    border: 1px solid rgba(205, 194, 164, 0.3);
    padding: 0.42rem 0.6rem;
    display: flex; align-items: center; gap: 0.42rem;
    opacity: 0;
    transition: opacity 0.16s ease;
}
.plate-frame:hover .plate-zoom,
.plate-frame:focus-visible .plate-zoom { opacity: 1; }
.plate-zoom-icon { font-size: 0.85rem; }

.plate-cap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin-top: 0.65rem;
    padding-left: 0.1rem;
    border-top: 1px solid var(--paper-edge);
    padding-top: 0.5rem;
}

.plate-num {
    font-family: var(--stamp);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--stencil);
    white-space: nowrap;
}

.plate-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.plate-text {
    grid-column: 1 / -1;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 66ch;
}

/* --- viewer --- */

.viewer {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(18, 21, 15, 0.96);
    display: flex; flex-direction: column;
}
.viewer[hidden] { display: none; }

.viewer-bar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    padding: 0.7rem clamp(0.8rem, 3vw, 2rem);
    border-bottom: 1px solid #39412f;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--carbon-dim);
    flex: 0 0 auto;
}

.viewer-id { color: var(--stencil-lo); }
.viewer-title { color: var(--paper); flex: 1; text-transform: none; letter-spacing: 0.03em; }
.viewer-dims { color: var(--carbon-dim); }
.viewer-open { color: var(--paper); text-decoration: underline; }
.viewer-open:hover { color: var(--stencil-lo); }

.viewer-close {
    background: none; border: 1px solid #4a5340;
    color: var(--paper); cursor: pointer;
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.09em; text-transform: uppercase;
    padding: 0.3rem 0.6rem;
}
.viewer-close:hover { background: var(--stencil); border-color: var(--stencil); }

.viewer-stage {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.5rem, 2vw, 1.6rem);
    cursor: zoom-out;
}
/* Original pixels. No max-width — this is the point of the viewer. */
.viewer-stage img { max-width: none; width: auto; height: auto; }

.viewer-hint {
    margin: 0; flex: 0 0 auto;
    padding: 0.55rem 1rem 0.75rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    color: var(--carbon-dim);
}
.viewer-hint kbd {
    font-family: var(--mono); font-size: 0.95em;
    border: 1px solid #4a5340; padding: 0.05em 0.3em;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 1.4rem 0 1.7rem; max-width: 76ch; }

.spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.925rem;
}

.spec th {
    text-align: left;
    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--paper-hi);
    background: var(--drab);
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
}

.spec td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--paper-edge);
    vertical-align: top;
    line-height: 1.5;
}

.spec tbody tr:nth-child(odd) td { background: rgba(219, 210, 184, 0.5); }
.spec td:first-child { font-weight: 500; }
.spec code { white-space: nowrap; }

.spec-keys td:first-child {
    font-family: var(--mono);
    font-size: 0.83rem;
    color: var(--stencil);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Package cards (front matter)
   -------------------------------------------------------------------------- */

.kit {
    display: grid;
    gap: 1px;
    background: var(--paper-edge);
    border: 1px solid var(--paper-edge);
    margin: 1.8rem 0 2.2rem;
    max-width: 72ch;
}

.kit-item {
    background: var(--paper-hi);
    padding: 1.05rem 1.2rem 1.15rem;
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.15rem 0.9rem;
    align-items: start;
}

.kit-mark {
    font-family: var(--stamp);
    font-size: 1.45rem;
    line-height: 1;
    color: var(--stencil);
    grid-row: 1 / span 3;
    padding-top: 0.15rem;
}

.kit-name {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.18rem;
    letter-spacing: 0.028em;
    text-transform: uppercase;
    line-height: 1.15;
}

.kit-role { margin: 0.2rem 0 0.45rem; font-size: 0.96rem; color: var(--ink-soft); max-width: none; }

.kit-meta {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
    line-height: 1.6;
    max-width: none;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   12b. Download controls
   -------------------------------------------------------------------------- */

.dl { margin: 1.3rem 0 1.7rem; max-width: 60rem; }

.dl-btn {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    align-items: center;
    gap: 0 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--paper-hi);
    border: 2px solid var(--stencil);
    text-decoration: none;
    color: var(--ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dl-btn:hover,
.dl-btn:focus-visible { background: var(--stencil); color: var(--paper-hi); }

.dl-arrow {
    font-family: var(--mono);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 600;
    color: var(--stencil);
    text-align: center;
}
.dl-btn:hover .dl-arrow,
.dl-btn:focus-visible .dl-arrow { color: var(--paper-hi); }

.dl-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

.dl-action {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.15;
}

.dl-file {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    word-break: break-all;
}
.dl-btn:hover .dl-file,
.dl-btn:focus-visible .dl-file { color: var(--paper-lo); }

.dl-size {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    text-align: right;
    line-height: 1.05;
    white-space: nowrap;
}
.dl-size span {
    display: block;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
}
.dl-btn:hover .dl-size span,
.dl-btn:focus-visible .dl-size span { color: var(--paper-lo); }

.dl-mirror {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0;
    padding: 0.5rem 1.1rem;
    background: var(--paper-lo);
    border: 1px solid var(--drab-hair);
    border-top: 0;
    text-decoration: none;
    color: var(--ink-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dl-mirror:hover,
.dl-mirror:focus-visible { background: var(--drab); color: var(--paper-hi); }

.dl-mirror-key {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.16rem 0.42rem;
    background: var(--drab);
    color: var(--paper-hi);
    flex: 0 0 auto;
}
.dl-mirror:hover .dl-mirror-key,
.dl-mirror:focus-visible .dl-mirror-key { background: var(--paper-hi); color: var(--drab); }

.dl-mirror-text {
    flex: 1;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.94rem;
    letter-spacing: 0.028em;
    text-transform: uppercase;
    line-height: 1.2;
}

.dl-mirror-out { font-family: var(--mono); font-size: 0.9rem; flex: 0 0 auto; }

.dl-absent + .dl-mirror { border-top: 0; }

.dl-absent {
    margin: 0;
    padding: 0.85rem 1.1rem;
    background: var(--paper-lo);
    border: 1px dashed var(--drab);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: none;
}
.dl-absent-key {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.16rem 0.42rem;
    margin-right: 0.55rem;
    color: var(--paper-hi);
    background: var(--drab);
}

/* The kit cards on the front page carry their own download control */
.kit-item .dl { margin: 0.7rem 0 0; grid-column: 2; }
.kit-item .dl-btn { padding: 0.6rem 0.85rem; grid-template-columns: 1.9rem 1fr auto; }
.kit-item .dl-action { font-size: 0.95rem; }
.kit-item .dl-arrow { font-size: 1.25rem; }
.kit-item .dl-size { font-size: 1rem; }

/* --------------------------------------------------------------------------
   13. Sign-off checklists
   -------------------------------------------------------------------------- */

.signoff {
    margin: 2.6rem 0 1rem;
    padding: 1.15rem 1.3rem 1.25rem;
    border: 2px solid var(--ink);
    background: var(--paper-hi);
    max-width: 64ch;
}

.signoff-head {
    margin: 0 0 0.75rem;
    font-family: var(--stamp);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stencil);
}

.signoff-list { list-style: none; margin: 0; padding: 0; }
.signoff-list > li { margin: 0 0 0.42rem; padding: 0; position: static; }
.signoff-list > li::before { display: none; }

.signoff-list label {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.6rem;
    align-items: start;
    cursor: pointer;
    font-size: 0.955rem;
    line-height: 1.5;
}

/* Visually hidden, but still a real focusable control with real dimensions —
   zero-size inputs behave badly for assistive tech and pointer targeting. */
.signoff-list input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.signoff-box {
    width: 1.05rem; height: 1.05rem;
    margin-top: 0.22rem;
    border: 1.5px solid var(--drab);
    background: var(--paper);
    display: block;
    position: relative;
}
.signoff-box::after {
    content: '\2715';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
    color: var(--stencil);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.13s ease, transform 0.13s ease;
}
.signoff-list input:checked + .signoff-box::after { opacity: 1; transform: scale(1) rotate(-6deg); }
.signoff-list input:checked ~ .signoff-text { color: var(--ink-faint); }
.signoff-list input:focus-visible + .signoff-box { outline: 2px solid var(--stencil); outline-offset: 2px; }

.signoff-meter {
    margin: 0.85rem 0 0;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   14. Pager and colophon
   -------------------------------------------------------------------------- */

.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--paper-edge);
    border-top: 2px solid var(--ink);
    margin: 3.5rem 0 0;
    max-width: 74ch;
}

.pager-link {
    display: flex; flex-direction: column; gap: 0.18rem;
    padding: 0.95rem 1.1rem 1.05rem;
    background: var(--paper-hi);
    text-decoration: none;
    color: var(--ink);
    transition: background-color 0.14s ease;
}
.pager-link:hover { background: var(--ink); color: var(--paper); }
.pager-link:hover .pager-dir { color: var(--stencil-lo); }

.pager-next { text-align: right; align-items: flex-end; }

.pager-dir {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--stencil);
}

.pager-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.15;
}

.colophon {
    margin: 3.2rem 0 0;
    padding: 1.6rem 0 0;
    border-top: 1px solid var(--paper-edge);
    max-width: 74ch;
}

.colophon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.2rem 1.8rem;
    margin-bottom: 1.4rem;
}
.colophon-grid p { margin: 0; font-size: 0.86rem; line-height: 1.55; max-width: none; }

.colophon-key {
    font-family: var(--mono);
    font-size: 0.61rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stencil);
    margin-bottom: 0.28rem !important;
}

.colophon-legal {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--ink-faint);
    max-width: 70ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   15. Front-matter hero
   -------------------------------------------------------------------------- */

.hero { margin: 0 0 2.4rem; max-width: none; }

.hero-eyebrow {
    font-family: var(--stamp);
    font-size: 0.86rem;
    letter-spacing: 0.07em;
    color: var(--stencil);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.8rem, 1.5rem + 6.2vw, 6.1rem);
    line-height: 0.86;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    max-width: 15ch;
}
.hero-title .hero-thin { font-weight: 400; color: var(--ink-soft); display: block; }

.hero-strap {
    font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
    line-height: 1.5;
    font-weight: 300;
    color: var(--ink-soft);
    max-width: 54ch;
    margin: 0 0 1.7rem;
}

.hero-meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
    padding: 0.75rem 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--paper-edge);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2.2rem;
}
.hero-meta b { color: var(--stencil); font-weight: 600; }

/* Route card on the front page */
.route {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--paper-edge);
    border: 1px solid var(--paper-edge);
    margin: 1.6rem 0 2.4rem;
    max-width: 74ch;
}
.route-step {
    background: var(--paper-hi);
    padding: 0.9rem 1rem 1rem;
    text-decoration: none;
    color: var(--ink);
    display: block;
    transition: background-color 0.14s ease;
}
.route-step:hover { background: var(--ink); color: var(--paper); }
.route-step:hover .route-num { color: var(--stencil-lo); }
.route-num {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    color: var(--stencil);
    margin-bottom: 0.22rem;
}
.route-name {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.14;
    margin-bottom: 0.28rem;
}
.route-blurb { display: block; font-size: 0.87rem; line-height: 1.45; color: inherit; opacity: 0.82; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .rail-toggle { display: flex; }
    .rail-sub { display: none; }

    .shell { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
        position: fixed;
        top: calc(var(--rail-h) + 2px);
        left: 0; right: 0;
        max-height: calc(100vh - var(--rail-h) - 2px);
        z-index: 55;
        background: var(--paper);
        border-right: 0;
        border-bottom: 3px solid var(--stencil);
        padding: 1.2rem var(--gutter) 2rem;
        transform: translateY(-115%);
        transition: transform 0.22s ease;
        box-shadow: 0 14px 30px rgba(27, 31, 23, 0.25);
    }
    .sidebar.is-open { transform: translateY(0); }

    .toc-list { padding-right: 0; }
    .doc, .pager, .colophon, .kit, .route, .block, .tree, .table-wrap, .signoff { max-width: 100%; }
}

@media (max-width: 620px) {
    .task-head { grid-template-columns: 1fr; gap: 0.15rem; }
    .task-num { padding-top: 0; }
    .stamp-body { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .stamp-num { align-self: flex-start; }
    .pager { grid-template-columns: 1fr; }
    .pager-next { text-align: left; align-items: flex-start; }
    .plate-zoom { opacity: 1; font-size: 0.56rem; padding: 0.3rem 0.45rem; }
    .kit-item { grid-template-columns: 1fr; }
    .kit-mark { grid-row: auto; }
    .kit-item .dl { grid-column: 1; }
    .dl-btn { grid-template-columns: 1.8rem 1fr; gap: 0.35rem 0.75rem; }
    .dl-size { grid-column: 2; text-align: left; font-size: 0.98rem; }
    .dl-mirror { padding: 0.5rem 0.85rem; gap: 0.5rem; }
    .dl-mirror-text { font-size: 0.86rem; }
    .dl-size br { display: none; }
    .dl-size span { display: inline; margin-left: 0.5rem; }
}

/* --------------------------------------------------------------------------
   17. Motion and print
   -------------------------------------------------------------------------- */

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

@media print {
    :root { --paper: #fff; --paper-hi: #f4f2ea; --paper-edge: #bbb; }
    body { background-image: none; color: #000; font-size: 10.5pt; }
    .rail, .sidebar, .pager, .block-copy, .plate-zoom, .viewer, .skip { display: none !important; }
    .shell { display: block; }
    .sheet { padding: 0; }
    .doc, .plate, .colophon { max-width: 100%; }
    .task { break-inside: avoid-page; }
    .plate { break-inside: avoid-page; }
    .block { background: #f4f2ea; border: 1px solid #bbb; }
    .block pre { color: #000; }
    a { color: #000; text-decoration: underline; }
    .plate-frame::after {
        content: 'Full-size original: ' attr(href);
        display: block; font-size: 8pt; padding-top: 4pt; color: #555;
    }
}