/* Blueprint — background grids and outlines. Drafting paper from two background grids at different sizes; boxes
   drawn with outlines; dimension lines and labels from ::before and ::after.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: dark;
  --blue: #0b3d7a;
  --deep: #082c5a;
  --line: #e9f4ff;
  --cyan: #8fe3ff;
  --faint: rgba(190, 225, 255, .14);
  --fainter: rgba(190, 225, 255, .07);
  --mono: "DejaVu Sans Mono", "Courier New", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  min-width: 320px; margin: 0; color: var(--line); font: 16px/1.65 var(--mono);
  background-color: var(--blue);
  background-image:
    linear-gradient(var(--faint) 1px, transparent 1px), linear-gradient(90deg, var(--faint) 1px, transparent 1px),
    linear-gradient(var(--fainter) 1px, transparent 1px), linear-gradient(90deg, var(--fainter) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
a { color: var(--cyan); text-underline-offset: 3px; }
:where(a, [tabindex]):focus-visible { outline: 2px dashed var(--line); outline-offset: 4px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 10px; top: -80px; z-index: 10; padding: 8px 14px; background: var(--deep); outline: 1px solid var(--line); color: var(--line); }
.skip:focus { top: 10px; }
.page { max-width: 1100px; margin: auto; padding: 0 24px; }
.main:focus { outline: none; }
.extra { display: none; }
h1, h2 { margin: 0; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.15; }

/* title block, like the corner of a drawing */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 24px; padding: 12px 16px; outline: 1px solid var(--line); outline-offset: 4px; background: var(--deep); }
.masthead { display: flex; align-items: center; gap: 14px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 8px; background: var(--line); }
.masthead .brand img { display: block; height: 22px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 14px; border-left: 1px solid var(--line); color: var(--line); font-weight: 700; letter-spacing: .1em; text-decoration: none; }
.site-name::before { content: "DWG "; color: var(--cyan); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; }

.title-block { position: relative; margin: 56px 0 40px; padding: 36px 28px 28px; border: 1px solid var(--line); background: rgba(8, 44, 90, .85); }
.title-block::before { content: "SHEET 1 OF 1 · SCALE 1:1"; position: absolute; top: -11px; left: 20px; padding: 0 8px; background: var(--blue); color: var(--cyan); font-size: 12px; letter-spacing: .1em; }
.edition { margin: 0 0 12px; color: var(--cyan); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.title { position: relative; font-size: clamp(34px, 7vw, 84px); letter-spacing: .04em; }
.title::after { content: ""; display: block; height: 14px; margin-top: 14px; border-inline: 1px solid var(--cyan); background: linear-gradient(var(--cyan), var(--cyan)) center / 100% 1px no-repeat; }
.subtitle { margin: 16px 0 0; max-width: 52ch; }

.contents { position: relative; margin: 0 0 48px; padding: 20px 24px; outline: 1px dashed var(--cyan); outline-offset: -8px; background: rgba(8, 44, 90, .85); }
.contents-title { font-size: 15px; color: var(--cyan); }
.contents-list { columns: 2 16em; margin: 12px 0 0; padding-left: 2.2em; }
.contents-list li::marker { color: var(--cyan); content: counter(list-item, decimal-leading-zero) "  "; }
.contents-list a { display: inline-block; min-height: 30px; }

.chapter { position: relative; margin: 0 0 48px; padding: 32px 28px 20px; border: 1px solid var(--line); background: rgba(8, 44, 90, .88); scroll-margin-top: 16px; }
.chapter::before { content: ""; position: absolute; inset: -9px 0 auto; height: 6px; border-inline: 1px solid var(--cyan); background: linear-gradient(var(--cyan), var(--cyan)) center / 100% 1px no-repeat; }
.chapter::after { content: "DETAIL " counter(ch, upper-alpha); counter-increment: ch; position: absolute; right: 12px; bottom: -11px; padding: 0 8px; background: var(--blue); color: var(--cyan); font-size: 12px; letter-spacing: .1em; }
.manual { counter-reset: ch; }
.chapter-title { font-size: clamp(20px, 3vw, 30px); margin-bottom: 16px; }
.chapter-num { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin-right: .4em; border: 1px solid var(--line); border-radius: 50%; color: var(--cyan); font-size: .8em; }
.chapter-body { max-width: 70ch; }
.first { font-size: 17px; }
.plate { position: relative; margin: 28px 0 8px; padding: 10px; outline: 1px solid var(--line); }
.plate img { display: block; width: 100%; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .85; }
.plate figcaption { margin-top: 10px; color: var(--cyan); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.tools, .rules { padding-left: 0; list-style: none; }
.tools li, .rules li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px dotted rgba(233, 244, 255, .4); }
.tools li::before { content: "+"; position: absolute; left: 6px; color: var(--cyan); }
.rules { counter-reset: r; }
.rules li::before { content: counter(r, decimal-leading-zero); counter-increment: r; position: absolute; left: 0; color: var(--cyan); }
.note { margin: 20px 0; padding: 14px 18px; border: 2px solid var(--cyan); }
.note p { margin: 0; }
.note::before { content: "NOTE:"; display: block; color: var(--cyan); font-weight: 700; letter-spacing: .1em; }
.saying { margin: 24px 0; padding: 14px 18px; border-left: 4px double var(--line); font-size: 18px; }
.saying p { margin: 0; }
.saying footer { margin-top: 8px; color: var(--cyan); font-size: 13px; text-transform: uppercase; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
caption { padding-bottom: 8px; color: var(--cyan); text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
th, td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { color: var(--cyan); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; }
.hazard { padding: 12px 14px; outline: 1px solid var(--line); outline-offset: 3px; }
.hazard dt { color: var(--cyan); font-weight: 700; text-transform: uppercase; }
.hazard dd { margin: 4px 0 0; font-size: 14px; }
.glossary dt { color: var(--cyan); font-weight: 700; }
.glossary dd { margin: 0 0 10px 2ch; }

.outfits { margin: 0 0 40px; padding: 28px; border: 1px solid var(--line); background: rgba(8, 44, 90, .9); }
.outfits-title { font-size: clamp(20px, 3vw, 28px); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; margin: 20px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 0; border-bottom: 1px dotted rgba(233, 244, 255, .4); font-size: 14px; }
.outfit-link { display: inline-block; min-height: 28px; font-weight: 700; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; font-size: 12px; }
#th-blueprint { margin: 6px 0; padding: 10px 12px; outline: 2px solid var(--cyan); outline-offset: -2px; background: var(--deep); }
#th-blueprint .outfit-link::before { content: "▸ ON SHEET: "; color: var(--cyan); }
#th-blueprint .outfit-note { display: block; font-size: 12px; }

.site-foot { margin-bottom: 40px; padding: 16px 20px; border: 1px solid var(--line); background: var(--deep); font-size: 13px; }
.site-foot p { margin: 4px 0; }

@media (max-width: 640px) {
  .page { padding: 0 14px; }
  .title-block, .chapter, .outfits { padding-inline: 16px; }
}

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }