/* THE DRAWING SHEET - the theme stylesheet for a speculative design site (theme "drawing-sheet").
   HAND WRITTEN, not compiled, linked instead of static/site.css by templates-drawing-sheet/partials/head.html.
   No font is fetched: the condensed technical stack falls back through Liberation Sans Narrow and Arial Narrow
   to the system sans, so the page needs no third party origin and the strict CSP covers it unchanged.
   The format is an engineering drawing sheet, and the honest part is structural: the title block is an ISO 7200
   style field list where the disclosure is a REQUIRED FIELD (DRAWN BY: AI GENERATED, STATUS: SPECULATIVE,
   FLIGHT: NONE), so a sheet cannot be published without saying what it is. Sources and the contrast
   measurements are in S1YZ/next24/site-designs/mara-quill/DESIGN.md (ink on sheet 15.03:1, drawing blue 8.86:1).
   FLAG PINS: the nginx CSP forbids style="", so a pin is one of the preset positions .p1 to .p8 below and the
   content picks one. A pin is never placed by an inline style and never by script. */
:root{
  --sheet:#E9ECEE; --ink:#14181C; --ink2:#39434B; --draw:#16406F; --flag:#A33F0B; --flagline:#B4470E;
  --hair:#B9C2C8; --block:#10161B; --blockkey:#E8862F; --block2:#9FB4C4; --box:#D7DCE0;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Liberation Sans",Arial,sans-serif;
  --cond:"Roboto Condensed","Archivo Narrow","Liberation Sans Narrow","Arial Narrow","Inter",system-ui,sans-serif;
  --data:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sheet);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:27px}
a{color:var(--draw);text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.lbl{font-family:var(--data);font-size:10px;line-height:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.mono{font-family:var(--data);font-variant-numeric:tabular-nums}

header{border-bottom:1px solid var(--hair);background:var(--sheet);position:sticky;top:0;z-index:5}
.bar{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;padding:12px 0}
.mark{font-family:var(--cond);font-size:21px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.mark span{display:block;font-family:var(--data);font-size:10px;letter-spacing:.16em;color:var(--ink2);font-weight:400}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0}
nav a{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);text-decoration:none;display:inline-block;min-height:24px;padding:6px 0}
nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--flagline)}
.disclose{border-top:1px solid var(--hair);background:#DFE4E7;padding:7px 0;font-family:var(--data);font-size:12px;line-height:18px;letter-spacing:.04em}
.disclose b{color:var(--flag)}

/* the sheet */
.sheet{border:1px solid var(--ink);margin:28px 0 40px;background:
   repeating-linear-gradient(0deg,transparent 0 39px,rgba(185,194,200,.55) 39px 40px),
   repeating-linear-gradient(90deg,transparent 0 39px,rgba(185,194,200,.55) 39px 40px),
   var(--sheet)}
.sheethead{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--ink);padding:10px 14px;background:var(--sheet)}
.sheethead h1{font-family:var(--cond);font-size:30px;line-height:36px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0}
.sheethead .no{font-family:var(--data);font-size:22px;line-height:26px;font-variant-numeric:tabular-nums;color:var(--draw)}
.field{display:flex;gap:16px}

.figwrap{display:grid;grid-template-columns:22px 1fr 22px;border-bottom:1px solid var(--ink)}
.rail{display:grid;grid-template-rows:repeat(4,1fr);border-inline:1px solid var(--hair);background:var(--sheet)}
.rail span{font-family:var(--data);font-size:10px;letter-spacing:.2em;color:var(--ink2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--hair)}
.rail span:last-child{border-bottom:0}
.fig{position:relative;background:var(--box);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--ink2);font-family:var(--data);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:20px}
.flagpin{position:absolute;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--data);font-size:13px;font-weight:700;color:#fff;background:var(--flagline);border:1px solid var(--ink)}
.p1{top:22%;left:28%} .p2{top:58%;left:47%} .p3{top:34%;left:71%} .p4{top:73%;left:19%}
.zonetop{display:flex;border-bottom:1px solid var(--hair);background:var(--sheet)}
.zonetop span{flex:1;text-align:center;font-family:var(--data);font-size:10px;letter-spacing:.2em;color:var(--ink2);border-right:1px solid var(--hair);padding:2px 0}
.zonetop span:last-child{border-right:0}

.lower{display:grid;grid-template-columns:1fr 360px}
.notes{padding:14px;border-right:1px solid var(--ink)}
.notes h2{font-family:var(--cond);font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--draw)}
ol.flagnotes{list-style:none;margin:0 0 14px;padding:0}
ol.flagnotes li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:16px;line-height:24px}
ol.flagnotes b{font-family:var(--data);font-size:13px;color:#fff;background:var(--flagline);border:1px solid var(--ink);
  height:22px;display:inline-flex;align-items:center;justify-content:center}
details{border:1px solid var(--flagline);background:#E3E7EA;padding:10px 12px}
summary{font-family:var(--data);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--flag);cursor:pointer;min-height:24px}
details p{margin:8px 0 0;font-size:16px;line-height:25px}

/* title block: ISO 7200 fields, bottom right of the sheet */
.titleblock{background:var(--block);color:var(--sheet);padding:12px 14px}
.titleblock table{width:100%;border-collapse:collapse}
.titleblock th,.titleblock td{border:1px solid #2A343C;padding:5px 7px;text-align:left;vertical-align:top}
.titleblock th{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--block2);font-weight:400;width:44%}
.titleblock td{font-family:var(--data);font-size:14px;line-height:18px;font-variant-numeric:tabular-nums}
.titleblock .key{color:var(--blockkey);font-weight:700}
.titleblock caption{caption-side:top;text-align:left;font-family:var(--data);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--block2);padding-bottom:8px}

section.blk{border-top:1px solid var(--ink);padding:14px}
section.blk h2{font-family:var(--cond);font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--draw)}
h1.pagetitle{font-size:24px;line-height:30px;font-weight:700;margin:0 0 8px}
table.spec{width:100%;border-collapse:collapse;background:var(--sheet)}
table.spec caption{text-align:left;font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--flag);padding-bottom:8px}
table.spec th,table.spec td{font-family:var(--data);font-size:15px;line-height:22px;border:1px solid var(--hair);padding:7px 9px;text-align:left}
table.spec thead th{background:#DFE4E7;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
table.spec td.n{text-align:right;font-variant-numeric:tabular-nums}

/* hangar index */
.hangar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{border:1px solid var(--hair);background:var(--sheet);padding:8px;text-decoration:none;color:var(--ink);display:block;min-height:44px}
.tile:hover{border-color:var(--ink)}
.tile .thumb{background:var(--box);border:1px solid var(--hair);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-align:center;padding:8px}
.tile .row{display:flex;justify-content:space-between;gap:8px;padding-top:7px;font-family:var(--data);font-size:11px;letter-spacing:.06em}
.tile .st{color:var(--flag)}
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
figure{margin:0}
.clipbox{background:#0C1114;border:1px solid var(--hair);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  color:var(--block2);font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:12px}
figcaption{font-family:var(--data);font-size:13px;line-height:20px;color:var(--ink2);padding-top:8px}
.lede{max-width:74ch}
.mail{font-family:var(--data);font-size:17px}

footer{background:var(--block);color:var(--sheet);margin-top:36px;padding:32px 0 40px}
footer a{color:var(--blockkey)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
footer h2{font-family:var(--data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--block2);margin:0 0 8px;font-weight:400}
footer p{font-size:16px;line-height:25px;margin:0;max-width:44ch}
.fbot{border-top:1px solid #2A343C;margin-top:24px;padding-top:14px;font-family:var(--data);font-size:11px;letter-spacing:.08em;color:var(--block2);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

@media (max-width:1023px){
  .lower{grid-template-columns:1fr}
  .notes{border-right:0;border-bottom:1px solid var(--ink)}
  .hangar{grid-template-columns:repeat(2,1fr)}
  .clips,.fgrid{grid-template-columns:1fr}
  .sheethead h1{font-size:23px;line-height:28px}
  .figwrap{grid-template-columns:18px 1fr 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- what the real build needs on top of the prototype -------------------------------------- */
/* a figure is a real render: the pins sit over it, so the wrapper is the positioning context */
.fig.plate{padding:0;background:var(--box);overflow:hidden}
.fig.plate img{display:block;width:100%;height:100%;object-fit:cover}
.p5{top:18%;left:58%} .p6{top:66%;left:70%} .p7{top:44%;left:12%} .p8{top:80%;left:52%}
/* the archive contact sheet, same plate numbering as every other theme */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.plates figure{margin:0;border:1px solid var(--hair);background:var(--sheet)}
.plates img{display:block;width:100%;height:auto;background:var(--box)}
.plates figcaption{font-family:var(--data);font-size:11px;line-height:16px;color:var(--ink2);padding:6px 8px}
.plates .pn{color:var(--ink);font-weight:700}
/* the facts strip, which is this theme's comp card */
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:0;padding:0;list-style:none;background:var(--sheet)}
.facts li{flex:1 1 170px;padding:8px 12px 10px;border-right:1px solid var(--hair)}
.facts li:last-child{border-right:0}
.facts .v{font-family:var(--data);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;display:block}
.prose p{margin:0 0 16px;max-width:70ch}
.rowlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.rowlist li{border-bottom:1px solid var(--hair);padding:10px 0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between}
.rowlist .q{font-family:var(--cond);font-size:17px;letter-spacing:.02em}
.rowlist .mono{font-size:13px;color:var(--ink2)}
.player video{display:block;width:auto;max-width:100%;height:auto;max-height:80vh;margin-inline:auto;background:#000;border:1px solid var(--ink)}

/* a spoken note is another annotation on the sheet, so it lives in the notes column */
.spoken{margin-top:14px;border-top:1px solid var(--block2);padding-top:10px}
.spoken audio{width:100%;max-width:460px;display:block;margin:8px 0}
.spoken .said{font-size:14px;line-height:22px;margin:0 0 8px;color:var(--ink)}
/* SHOW ME ON THE PAGE (admin.html, owner only): a picture place carries id="slot-<slot id>", so the link
   page.html#slot-<id> lands on it and this outline marks it. No script: this page ships script-src 'none'.
   The scroll margin clears the sticky header, which carries the disclosure band. */
[id^="slot-"]{scroll-margin-top:180px}
[id^="slot-"]:target{outline:3px solid var(--flag);outline-offset:6px}