/* drafting.css — "the drafting table" (concept A, 2026-10-22). Loaded LAST on
   every route, after the page's own CSS, so it wins ties by source order.

   THE TWO RULES THIS FILE KEEPS:

   1. SCREEN ONLY. Everything below is inside `@media screen`. Paper never
      sees any of it, so every printout, the ruler sheets above all, is the
      same as on main.

   2. DECORATION NEVER TOUCHES A MEASURING SURFACE. #rule, .rule-wrap, the
      bench blades, #card-outline, #card-px, .m-bar and #sheet keep every
      size, padding, border width and position they had. This file changes
      their colors and backgrounds only. Tape, pencils and title blocks are
      pseudo-elements or background layers: they take no layout space, never
      catch a pointer, and never transform an ancestor of anything measured.

   Art is hand-drawn SVG under /art/, same origin (img-src 'self'). Generated
   text in pseudo-elements carries an empty alt (`content: "x" / ""`) so a
   screen reader skips the decoration. */

@media screen {

/* ------------------------------------------------------------ the board -- */

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-ink-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink-major) 1px, transparent 1px),
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  background-position: -1px -1px;
  font-variant-numeric: tabular-nums;
}

/* Tools lying on the table, in the wide margins only. A fixed layer behind
   the content: it takes no space and catches no pointer. */
@media (min-width: 1180px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      url("art/set-square.svg") no-repeat left -46px top 150px / 200px 200px,
      url("art/divider.svg") no-repeat right 28px top 120px / 84px 168px,
      url("art/pencil.svg") no-repeat right -70px bottom 120px / 300px 26px,
      url("art/crumbs.svg") no-repeat right 40px bottom 60px / 110px 55px,
      url("art/crumbs.svg") no-repeat left 30px bottom 200px / 80px 40px;
  }
}

:root:has(#bench) body::before { content: none; }

/* ------------------------------------------------ the T-square header ---- */

.site-header {
  --ink: #1C2A3F;
  --ink-soft: #3E3420;
  --accent: #1F4F8F;
  --focus: #1F4F8F;
  position: relative;
  border-bottom: 0;
  color: var(--ink);
  background-color: #E8CF9A;
  background-image:
    repeating-linear-gradient(90deg, rgba(122, 82, 30, .07) 0 2px, transparent 2px 7px, rgba(122, 82, 30, .05) 7px 8px, transparent 8px 19px),
    linear-gradient(180deg, #F1DDB2 0, #E8CF9A 45%, #D9BA7C 100%);
  box-shadow: 0 2px 0 #B8955A, 0 7px 16px rgba(60, 38, 10, .22);
  margin-bottom: 14px;
}
/* The T-square's head: a walnut stock clamped over the board's left edge. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0; top: -4px; bottom: -12px;
  width: 12px;
  background: linear-gradient(90deg, #22160D, #5A3B22 55%, #2C1C10);
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 0 4px rgba(0, 0, 0, .25);
  pointer-events: none;
}
/* Its graduated edge. Decoration, not a scale: these are not millimeters. */
.site-header::after {
  content: "";
  position: absolute;
  left: 12px; right: 0; bottom: 0;
  height: 9px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(43, 29, 10, .75) 0 1px, transparent 1px 40px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(43, 29, 10, .5) 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat;
}
.site-header .inner { padding: 0.35rem 1rem 0.6rem 1.5rem; align-items: center; gap: 0 1.1rem; }
.brand { font: 700 1.4rem/1 var(--hand); color: var(--ink); letter-spacing: 0; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; }
.brand .brand-mark { vertical-align: 0; }
.site-nav { gap: 0 0.95rem; }
.site-nav a { color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; }
.site-nav a:hover { color: var(--ink); border-bottom-color: #8C6A2E; }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--pencil-red); }
@media (max-width: 600px) {
  .site-header .inner { padding: 0.2rem 0.75rem 0.55rem 1.3rem; }
  .site-nav { gap: 0 0.7rem; }
  .site-nav a { font-size: 0.88rem; }
}

/* ----------------------------------------------------- lettering ---------- */

h1, h2, h3 { font-family: var(--hand); color: var(--ink); letter-spacing: 0; }
h1 { font-weight: 700; line-height: 1.12; font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
h3 { font-weight: 700; font-size: 1.2rem; }

/* A dimension line under each section heading: arrowhead, line, arrowhead. */
h2::after {
  content: "";
  display: block;
  width: min(9.5rem, 60%);
  height: 12px;
  margin-top: 0.15rem;
  background:
    url("art/dim.svg") no-repeat left center / 12px 12px,
    url("art/dim-r.svg") no-repeat right center / 12px 12px,
    linear-gradient(var(--brass), var(--brass)) no-repeat center / calc(100% - 20px) 1.4px;
}

/* The eyebrow becomes a title-block strip: a filled cell, then the label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 0 0.5rem;
  font: 700 0.7rem/1.35 var(--sans);
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--ink);
  padding: 0 0.55rem 0 0;
  margin-bottom: 0.6rem;
}
.eyebrow::before {
  content: "DWG" / "";
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0.2rem 0.45rem;
  background: var(--ink);
  color: var(--panel);
  letter-spacing: 0.14em;
}

.tool-card .eyebrow { display: flex; width: fit-content; }
.tool-card a.title { font: 700 1.15rem/1.2 var(--hand); }
.lede { color: var(--ink-soft); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ----------------------------------------------------- taped sheets ------ */

.tool-panel,
.ref-block,
.faq details,
.steps > li,
.tool-card,
.first-run-steps > li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(60, 40, 10, .08), 0 6px 14px -6px rgba(60, 40, 10, .28);
}
.tool-panel, .ref-block, .tool-card { position: relative; }

/* Masking tape on two corners of every working sheet. */
.tool-panel::before,
.tool-panel::after,
.ref-block::before,
.tool-card::before,
main.wrap.prose::before,
main.wrap.prose::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 62px;
  height: 20px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 3px, transparent 3px 6px),
    rgba(236, 219, 165, .88);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .18);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
}
.tool-panel::before, .ref-block::before, .tool-card::before, main.wrap.prose::before { left: 14px; transform: rotate(-4deg); }
.tool-panel::after, main.wrap.prose::after { right: 14px; transform: rotate(3deg); }

.steps > li { border-left: 3px solid var(--brass); }
.first-run-steps > li { border-left: 3px solid var(--brass); }

/* Index cards: a red header rule over faint blue lines. */
.faq details { border-top: 3px solid var(--pencil-red); }
.faq details[open] {
  background-image: repeating-linear-gradient(180deg, transparent 0 1.55rem, var(--grid-ink-major) 1.55rem calc(1.55rem + 1px));
  background-position: 0 2.75rem;
}
.faq summary { font-weight: 700; }
.faq summary::before { color: var(--pencil-red); font-family: var(--sans); font-weight: 700; }

.note {
  background: var(--panel);
  border-color: var(--line);
  border-left: 4px solid var(--brass);
  border-radius: 2px;
}

/* -------------------------------- the readout: an ebony scale, brass pins -- */

.readout {
  background-color: var(--readout-bg);
  background-image:
    radial-gradient(circle at 9px 9px, #E9C46A 0 2.5px, #8A5F17 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #E9C46A 0 2.5px, #8A5F17 3px, transparent 3.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #E9C46A 0 2.5px, #8A5F17 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #E9C46A 0 2.5px, #8A5F17 3px, transparent 3.5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #2A2118, #15110C);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px rgba(233, 196, 106, .28), 0 6px 14px -6px rgba(0, 0, 0, .5);
  padding: 0.75rem 1.4rem;
  font-variant-numeric: tabular-nums;
}
.readout .r-label { letter-spacing: 0.1em; font-weight: 700; }

/* ------------------------------------------- the boxwood scale (#rule) ---- */
/* Background and color only: .rule-wrap keeps its padding, border width and
   overflow, and #rule itself is untouched. Ink stays dark in both modes,
   because the wood stays wood. */
.rule-wrap {
  --ink: #1E1609;
  --ink-soft: #5A4520;
  background-color: #E8CF9A;
  background-image:
    repeating-linear-gradient(180deg, rgba(122, 82, 30, .06) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #F2DFB6 0, #E8CF9A 55%, #D7B87A 100%);
  border-color: #9C7B3E;
  box-shadow: 0 2px 0 #B8955A, 0 8px 14px -6px rgba(60, 38, 10, .4);
}

/* ------------------------------------------------------------- controls -- */

.btn {
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(10, 25, 50, .35);
}
.btn:active { box-shadow: none; }
.btn.secondary { background: var(--panel); border-color: var(--line-strong); box-shadow: 0 2px 0 var(--line); }
select, input[type="text"], input[type="number"] { border-radius: 2px; background: var(--panel); }
fieldset.choice { border-radius: 2px; border-color: var(--line); }
fieldset.choice legend,
.readout .r-label { font-family: var(--sans); }
.outline-stage { border-radius: 2px; }

.related li a {
  border-radius: 3px 12px 12px 3px;
  background: var(--panel);
  border-color: var(--line-strong);
  font-weight: 700;
}
.related li a::before { content: "\25CB" / ""; margin-right: 0.45rem; color: var(--brass); font-size: 0.7em; }

/* ---------------------------------------------------- prose tables ------- */

.prose table { border-radius: 2px; background: var(--panel); }
.prose thead th { font-family: var(--sans); font-weight: 700; color: var(--ink); background: var(--accent-soft); }

/* ------------------------------------------- the walnut table edge ------- */

.site-footer {
  --focus: #FFD166;
  position: relative;
  margin-top: 3rem;
  border-top: 0;
  color: #F6EAD2;
  background-color: #3B2616;
  background-image:
    repeating-linear-gradient(178deg, rgba(255, 220, 170, .045) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .06) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #5A3B22 0, #3B2616 18px, #2C1C10 100%);
  box-shadow: inset 0 3px 0 #7A5332;
}
/* A pencil left on the edge of the table. */
.site-footer::before {
  content: "";
  position: absolute;
  right: 16px;
  top: -13px;
  width: 190px;
  height: 17px;
  pointer-events: none;
  background: url("art/pencil.svg") no-repeat center / 190px 17px;
}
.site-footer::after {
  content: "";
  position: absolute;
  right: 214px;
  top: -6px;
  width: 64px;
  height: 32px;
  pointer-events: none;
  background: url("art/crumbs.svg") no-repeat center / 64px 32px;
}
.site-footer .inner { color: #F6EAD2; padding-top: 1.4rem; }
.site-footer a { color: #F6EAD2; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer .promise { font-family: var(--sans); font-weight: 700; color: #E9C46A; letter-spacing: 0.08em; }

/* ------------------------------------------------------- dark: blueprint -- */

@media (prefers-color-scheme: dark) {
  h2::after {
    background:
      url("art/dim.svg") no-repeat left center / 12px 12px,
      url("art/dim-r.svg") no-repeat right center / 12px 12px,
      linear-gradient(#E9C46A, #E9C46A) no-repeat center / calc(100% - 20px) 1.4px;
  }
  .tool-panel, .ref-block, .faq details, .steps > li, .tool-card, .first-run-steps > li {
    box-shadow: 0 0 0 1px rgba(220, 236, 255, .06), 0 8px 18px -8px rgba(0, 0, 0, .6);
  }
  .tool-panel::before, .tool-panel::after, .ref-block::before, .tool-card::before,
  main.wrap.prose::before, main.wrap.prose::after {
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 3px, transparent 3px 6px),
      rgba(214, 196, 140, .72);
  }
  .btn { box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
  .steps > li, .first-run-steps > li, .note { border-left-color: #E9C46A; }
  .related li a::before { color: #E9C46A; }
}

/* ======================================================== `/` the bench === */
/* Colors and backgrounds only. Every px of bench geometry stays bench.css's. */

.bench {
  --blade: #E6C88F;
  --mat: #1B4A80;
  --grid: #D3E6FF;
  --red: #B3261E;
  --sheet: #FFFDF6;
  --on-mat: #F6FAFF;
  --on-mat-dim: #D0E1F5;
}
@media (prefers-color-scheme: dark) {
  .bench { --blade: #DDBE84; --mat: #12345C; }
}

/* The board: a blueprint sheet, with a pencil and eraser crumbs left on it. */
.bench-mat {
  background:
    radial-gradient(120% 70% at 20% 10%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(90% 60% at 90% 100%, rgba(0, 0, 0, .18), transparent 70%),
    var(--mat);
}
.bench-mat::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: 96px;
  width: 260px;
  height: 64px;
  pointer-events: none;
  background:
    url("art/crumbs.svg") no-repeat left 10px top 0 / 84px 42px,
    url("art/pencil.svg") no-repeat right bottom / 230px 20px;
}
/* A blueprint title block, bottom right, where the wide board has room. */
@media (min-width: 960px) {
  .bench-mat::before {
    content: "REAL SIZER\A DRAWING BOARD  ·  SHEET 1 OF 1\A DRAWN IN PENCIL, CHECKED IN INK" / "";
    white-space: pre;
    position: absolute;
    right: 10px;
    bottom: 96px;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid rgba(211, 230, 255, .7);
    box-shadow: inset 0 0 0 3px var(--mat), inset 0 0 0 4px rgba(211, 230, 255, .45);
    color: var(--on-mat-dim);
    font: 400 11px/1.6 var(--sans);
    letter-spacing: 0.14em;
    pointer-events: none;
  }
  .bench-mat::after { bottom: 168px; right: 24px; }
}
.bench-mat .grid .g1 { stroke-opacity: .28; }
.bench-mat .grid .g5 { stroke-opacity: .55; }
.bench-gtag { font: 700 12px/1 var(--sans); }

/* The walnut edge of the drafting table. */
.bench-top {
  background-color: #3B2616;
  background-image:
    repeating-linear-gradient(178deg, rgba(255, 220, 170, .05) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .07) 9px 11px, transparent 11px 21px),
    linear-gradient(180deg, #5A3B22, #3B2616 60%, #2C1C10);
  color: #F6EAD2;
  box-shadow: 0 2px 0 #1A100A;
}
.bench-top .mark b { font: 700 22px/1 var(--hand); letter-spacing: 0; }
.bench-top .mark svg rect:first-child { fill: #E8CF9A; }
.bench-top .mark svg rect + rect { fill: #B5832A; }
.bench-top .mark svg path { stroke: #1C2A3F; }
@media (min-width: 960px) {
  .bench-top .nav a { color: #E3CFA6; font: 700 15px/1 var(--sans); }
  .bench-top .nav a[aria-current="page"] { color: #FFF6E0; box-shadow: inset 0 -3px 0 #E9C46A; }
  .bench-top .nav a:hover { color: #FFF6E0; }
}

/* The boxwood scale: grain along its length, a brass zero cap, ink-blue
   decade plates. Same box, same ticks, same numbers. */
.bench-blade {
  background-color: var(--blade);
  background-image:
    repeating-linear-gradient(90deg, rgba(122, 82, 30, .07) 0 1px, transparent 1px 5px, rgba(122, 82, 30, .045) 5px 6px, transparent 6px 13px),
    linear-gradient(90deg, #C9A766 0, var(--blade) 14%, #F3E0B6 46%, var(--blade) 74%, #CDAA6A 100%);
  box-shadow: 2px 0 0 #9C7B3E, 5px 0 12px rgba(0, 0, 0, .32);
}
@media (min-width: 960px) {
  .bench-blade-h {
    background-color: var(--blade);
    background-image:
      repeating-linear-gradient(180deg, rgba(122, 82, 30, .07) 0 1px, transparent 1px 5px, rgba(122, 82, 30, .045) 5px 6px, transparent 6px 13px),
      linear-gradient(180deg, #C9A766 0, var(--blade) 14%, #F3E0B6 46%, var(--blade) 74%, #CDAA6A 100%);
    box-shadow: 0 2px 0 #9C7B3E, 0 5px 12px rgba(0, 0, 0, .32);
  }
  /* Where the two scales meet: a brass corner plate. */
  .bench-corner { background: linear-gradient(135deg, #F0D58A, #B5832A 55%, #8A5F17); }
  .bench-corner::after { border-color: #2B1D0A; }
}
.bench-blade .t1, .bench-blade .t5, .bench-blade .t10,
.bench-blade-h .t1, .bench-blade-h .t5, .bench-blade-h .t10 { stroke: #1E1609; }
.bench-blade .n, .bench-blade-h .n { fill: #1E1609; font-family: var(--tick); }
.bench-blade .dm, .bench-blade-h .dm { fill: #1F3F73; }
.bench-blade .z, .bench-blade-h .z { fill: #B5832A; }

/* The ghost card, drawn in white pencil on the blueprint. */
.bench .card-outline { border-color: rgba(246, 250, 255, .9); }

/* The grip: a brass slider with knurled ridges. */
.bench input#card-px::-webkit-slider-thumb {
  background:
    repeating-linear-gradient(90deg, rgba(60, 40, 8, .5) 0 1px, transparent 1px 4px) center / 13px 18px no-repeat,
    linear-gradient(90deg, #8A5F17, #F0D58A 45%, #B5832A 70%, #8A5F17);
  border: 1px solid #4E360B;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}
.bench input#card-px::-moz-range-thumb {
  background:
    repeating-linear-gradient(90deg, rgba(60, 40, 8, .5) 0 1px, transparent 1px 4px) center / 13px 18px no-repeat,
    linear-gradient(90deg, #8A5F17, #F0D58A 45%, #B5832A 70%, #8A5F17);
  border: 1px solid #4E360B;
}
.bench .match-controls output { background: rgba(59, 38, 22, .92); color: #F6EAD2; font-family: var(--sans); }

/* "Not calibrated yet": a scrap of paper taped to the board. */
.bench-pill {
  border-radius: 2px;
  background: #FFFDF6;
  color: #1C2A3F;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 8px 18px rgba(0, 0, 0, .3);
}
.bench-pill b { font: 700 15px/1.1 var(--hand); }
.bench-pill .dot { border-color: #B3261E; }
.bench-pill::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 54px;
  height: 16px;
  margin-left: -27px;
  transform: rotate(-3deg);
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 3px, transparent 3px 6px),
    rgba(236, 219, 165, .9);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
}

/* "CALIBRATED": a red rubber stamp on a cream tag. */
.bench-stamp {
  background: #FFFDF6;
  color: #A3201A;
  border: 2px solid #A3201A;
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #FFFDF6, inset 0 0 0 4.5px #A3201A, 0 6px 14px rgba(0, 0, 0, .35);
}
.bench-stamp .s1 { font: 700 14px/1.05 var(--sans); letter-spacing: 0.16em; }
.bench-stamp .s2 { font: 700 10px/1.2 var(--sans); color: #6E1712; }
.bench-stamp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* "This matches my card": a brass button, the one thing to press. */
.bench-confirm > .btn:not(.secondary) {
  background: linear-gradient(180deg, #F0D58A, #E2B654);
  border-color: #6B4A12;
  color: #20160A;
  box-shadow: 0 2px 0 #6B4A12;
}
.bench-confirm > .btn.secondary { background: #FFFDF6; color: #1C2A3F; border-color: #8C7C56; }
.bench-options { background: rgba(59, 38, 22, .88); }
.bench-options summary { font-weight: 700; color: #F6EAD2; }
.bench-options summary::before { color: #E9C46A; }

/* The dock: the table's pencil tray. */
.bench-dock {
  background-color: #3B2616;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 7px),
    repeating-linear-gradient(178deg, rgba(255, 220, 170, .05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #4A301C, #2C1C10);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px #7A5332, 0 6px 20px rgba(0, 0, 0, .35);
}
.bench-dock :where(a, button):not(.bench-options-panel *) { color: #E8D6B0; }
.bench-dock a[aria-current="page"], .bench-dock button[aria-current="page"] { color: #FFF6E0; }
.bench-dock a[aria-current="page"] svg * { fill: #E9C46A; }
.bench-dock .bench-confirm > .btn,
.bench-dock .bench-confirm > details.bench-options > summary { color: #F6EAD2; box-shadow: none; }
.bench-dock .bench-confirm > .btn:not(.secondary) { color: #F5D27A; background: none; border: 0; }
.bench-dock .bench-confirm > .btn.secondary { background: none; border: 0; }

.bench-options-panel { border-radius: 4px; border-top: 4px solid var(--pencil-red); }
/* A clean white sheet in light mode (bench-live's M2 focus check reads it). */
@media (prefers-color-scheme: light) { .bench-options-panel { background: #ffffff; } }
.bench-menu-panel { border-radius: 4px; }
.bench-menu-panel a { font-weight: 700; }

/* ------------------------------------------- /printable-ruler/ ----------- */

/* The catalog is a plan chest: each PDF is a drawing sheet with a title
   block, pinned by a strip of tape, the size tabs below it. */
.pdf-card {
  position: relative;
  overflow: visible;
  border-radius: 2px;
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(60, 40, 10, .08), 0 6px 14px -6px rgba(60, 40, 10, .3);
}
.pdf-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 46px;
  height: 15px;
  margin-left: -23px;
  transform: rotate(-2deg);
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 3px, transparent 3px 6px),
    rgba(236, 219, 165, .9);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
}
.pdf-card .pg {
  --ink-soft: #46516A;
  --line-strong: #8C7C56;
  --ink: #1C2A3F;
  height: 56px;
  background-color: #F7FAFF;
  background-image:
    linear-gradient(rgba(31, 79, 143, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 79, 143, .12) 1px, transparent 1px);
  background-size: 8px 8px;
  border-bottom: 1.5px solid var(--ink);
}
.pdf-card .pt { border-bottom: 1px solid var(--line); }
.pdf-card .pt b { font: 700 1rem/1.15 var(--hand); color: var(--ink); }
.pdf-chips { gap: 0.35rem; }
.pdf-chip {
  border-radius: 3px;
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 2px 0 var(--line);
}
.pdf-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--panel); }
@media (prefers-reduced-motion: no-preference) {
  .pdf-card { transition: box-shadow .15s ease, translate .15s ease; }
  .pdf-card:hover { translate: 0 -2px; box-shadow: 0 1px 0 rgba(60, 40, 10, .08), 0 12px 20px -8px rgba(60, 40, 10, .38); }
}

/* The sheet preview, taped flat to a pale drafting-board vinyl. The SVG
   keeps every size it had; only the board around it changes. */
.sheet-wrap {
  position: relative;
  border-radius: 2px;
  border-color: #9DB3A4;
  background-color: #D8E3D6;
  background-image:
    linear-gradient(rgba(40, 80, 60, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 80, 60, .08) 1px, transparent 1px);
  background-size: 20px 20px;
}
.sheet-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.55rem;
  width: 70px;
  height: 18px;
  margin-left: -35px;
  transform: rotate(-2deg);
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 3px, transparent 3px 6px),
    rgba(236, 219, 165, .9);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
}
#sheet { box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 10px 22px -8px rgba(30, 40, 30, .45); }
.gen-controls > label, .gen-controls > .len-field { font-weight: 700; color: var(--ink); }
.lengths a { border-left-color: var(--brass); border-radius: 2px; }
.mech-line { font-family: var(--sans); }

/* ------------------------------------------------ /screen-ruler/ --------- */
/* Brass knobs on the measuring line. Their size and offsets are measure.css's. */
.m-handle {
  background: radial-gradient(circle at 35% 30%, #FFF2C4, #E9C46A 40%, #B5832A 75%, #8A5F17);
  border-color: #4E360B;
  color: #20160A;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.m-grip { background: linear-gradient(180deg, #F0D58A, #C99A3E); }
.m-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.spec-bar { border-radius: 1px; }
.win-line { font-family: var(--sans); }

@media (prefers-color-scheme: dark) {
  .sheet-wrap { background-color: #1B3F66; border-color: #4B74A3; background-image:
    linear-gradient(rgba(220, 236, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 236, 255, .08) 1px, transparent 1px); }
  .pdf-card .pg { background-color: #F7FAFF; }
}

/* --------------------------------------- prose pages: one drawing sheet -- */
/* About, contact, privacy, terms and the 404 are prose from top to bottom
   (main.wrap.prose); each becomes one sheet of vellum with a drawn border,
   taped to the board. Nothing on these pages measures anything. */
main.wrap.prose {
  position: relative;
  width: calc(100% - 1rem);
  margin: 1.4rem auto 0;
  padding: 1.75rem clamp(1rem, 4.5vw, 2.75rem) 2.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 6px var(--panel), inset 0 0 0 7px var(--line),
    0 1px 0 rgba(60, 40, 10, .08), 0 8px 18px -8px rgba(60, 40, 10, .3);
}
@media (prefers-color-scheme: dark) {
  main.wrap.prose {
    box-shadow:
      inset 0 0 0 6px var(--panel), inset 0 0 0 7px var(--line),
      0 0 0 1px rgba(220, 236, 255, .06), 0 10px 22px -8px rgba(0, 0, 0, .6);
  }
}

/* The 404 (the one page without the site nav): a mostly blank sheet with
   the eraser crumbs of whatever was rubbed out. */
body:not(:has(.site-nav)) main.wrap.prose {
  min-height: min(26rem, 55vh);
  background: url("art/crumbs.svg") no-repeat right 1.4rem bottom 1.2rem / 104px 52px, var(--panel);
}

/* Short pages end on the table, not on more board: below the footer the
   walnut carries on to the bottom of the window. `isolate` keeps the
   wide-margin tools (body::before, z-index -1) above the board. */
:root:not(:has(#bench)) { background-color: #2C1C10; }
:root:not(:has(#bench)) body { isolation: isolate; }

/* Narrow phones: the five nav links fit on one line, so every tool starts
   one line higher (the first PDF download sits inside a 360x740 screen). */
@media (max-width: 380px) {
  .site-header .inner { padding-left: 1.05rem; padding-right: 0.5rem; }
  .site-nav { gap: 0 0.5rem; }
  .site-nav a { font-size: 0.8rem; }
}

} /* @media screen */