/* THE ACCESS -- the Survey system, shared shell styles.
   Source of law: cornerstone-map/design/system-book-2026-07-06.dc.html + tokens-survey.md.
   The shell owns no chroma: cream, carbon, hairlines, roman numerals.
   The red fist is the only ink it borrows. No rounded corners. Never true black -- carbon. */

@font-face { font-family:'Bodoni Moda'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(./fonts/BodoniModa-normal-400-900.woff2) format('woff2'); }
@font-face { font-family:'Bodoni Moda'; font-style:italic; font-weight:400 900; font-display:swap;
  src:url(./fonts/BodoniModa-italic-400-900.woff2) format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(./fonts/Newsreader-normal-300-700.woff2) format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url(./fonts/Newsreader-italic-300-700.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(./fonts/IBMPlexMono-normal-400.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(./fonts/IBMPlexMono-normal-500.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url(./fonts/IBMPlexMono-normal-600.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:italic; font-weight:400; font-display:swap;
  src:url(./fonts/IBMPlexMono-italic-400.woff2) format('woff2'); }

:root {
  --cream:#F3EDDF; --panel:#F6F1E4; --ink:#1C1914; --art:#DA291C; --cyan:#235789;
  --venous:#47150F; --blush:#EFC9BC;
  --disp:'Bodoni Moda', serif; --text:'Newsreader', serif; --mono:'IBM Plex Mono', monospace;
  --pen: cubic-bezier(.62,0,.30,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--text);
       -webkit-font-smoothing:antialiased; }
::selection { background:var(--art); color:var(--cream); }
a { color:inherit; }

/* wove grain, site-wide, multiply */
.grain { position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.32; mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22 opacity=%220.5%22/%3E%3C/svg%3E'); }
/* the plate frame */
.frame { position:fixed; inset:14px; border:1px solid var(--ink); pointer-events:none; z-index:80; }

/* header + footer strips */
.strip { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--ink);
         border-bottom:1px solid var(--ink); padding:8px 2px;
         font-family:var(--mono); font-size:11px; letter-spacing:.16em; }
.strip a { text-decoration:none; }
.strip a:hover { color:var(--art); }

/* section header: mono, numbered, hairline extending right */
.sect { display:flex; align-items:center; gap:12px; margin:64px 0 22px;
        font-family:var(--mono); font-size:11px; letter-spacing:.2em; }
.sect .rule { flex:1; height:1px; background:var(--ink); opacity:.5; }

/* the restrained index row (gallery shell) */
.idx { border-top:1px solid var(--ink); }
.idx .row { display:flex; align-items:baseline; gap:16px; padding:14px 2px;
            border-bottom:1px solid rgba(28,25,20,.35); text-decoration:none; }
.idx .row:last-child { border-bottom:1px solid var(--ink); }
.idx .row .n { font-family:var(--mono); font-size:12px; min-width:28px; }
.idx .row .t { font-family:var(--text); font-size:18px; flex:1; }
.idx .row .t em { font-style:italic; opacity:.7; }
.idx .row .m { font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-align:right; }
.idx .row .f { color:var(--art); }
.idx a.row:hover .t { color:var(--art); }
.idx .row.dim .t, .idx .row.dim .m { opacity:.55; }

/* apparatus plate block */
.plateblock { border:1px solid var(--ink); padding:18px 20px; text-align:left; background:var(--cream); }
.plateblock .ph { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
                  border-bottom:1px solid var(--ink); padding-bottom:8px; }
.plateblock .ph .t { font-family:var(--disp); font-weight:750; font-size:26px; }
.plateblock .ph .s { font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
.plateblock .meta { margin-top:10px; font-family:var(--mono); font-size:11.5px; line-height:1.75;
                    letter-spacing:.04em; }
.plateblock .fist { margin-top:12px; font-family:var(--text); font-size:15.5px; }
.plateblock .fist a { text-decoration:none; }
.plateblock .fist a:hover { color:var(--art); }

/* ---- the framed sheet -- Proof II, the essay page ---- */
.sheet { max-width:860px; margin:0 auto; background:#F8F3E7; border:1px solid var(--ink);
         padding:56px 72px 40px; }
.sheet .strip3 { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--ink);
                 border-bottom:1px solid var(--ink); padding:7px 2px;
                 font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; }
.sheet .strip3 a { text-decoration:none; }
.sheet .strip3 a:hover { color:var(--art); }
.sheethead { text-align:center; padding:40px 0 8px; }
.sheethead .title { font-family:var(--disp); font-weight:800; font-size:clamp(44px, 9vw, 84px);
                    line-height:.98; margin:0; }
.sheethead .deck { font-family:var(--text); font-style:italic; font-size:21px; line-height:1.5;
                   max-width:620px; margin:16px auto 0; }
.sheethead .byline { margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; }
.essaybody { margin-top:26px; }
.measure { max-width:620px; margin:0 auto; }
.esect { display:flex; align-items:baseline; gap:14px; margin:34px 0 8px; }
.measure > .esect:first-child { margin-top:0; }
.esect .num { font-family:var(--disp); font-weight:750; font-size:30px; color:var(--art); }
.esect .lab { font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:rgba(28,25,20,.75); }
.esect .rule { flex:1; height:1px; background:rgba(28,25,20,.35); align-self:center; }
.sheetfoot { border-top:1px solid var(--ink); margin-top:44px; padding-top:12px;
             display:flex; justify-content:space-between; gap:16px;
             font-family:var(--mono); font-size:10px; line-height:1.7; letter-spacing:.05em; }
.sheetfoot .fistend { align-self:center; font-size:15px; }
.sheetfoot a { text-decoration:none; }
.sheetfoot a:hover { color:var(--art); }

/* typeset essay body -- prose 18.5/1.65 on the 620 measure */
.essay p, .essaybody p { font-size:18.5px; line-height:1.65; margin:0 0 16px; font-weight:400; }
.essaybody p:last-child { margin-bottom:0; }

/* statement field -- one per work, or none; no tag; full-bleed to the sheet padding */
.statement { margin:40px 0; padding:52px 40px; background:var(--art); color:var(--cream);
             border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); text-align:center; }
.statement .s1 { font-family:var(--disp); font-weight:800; font-size:clamp(30px, 5.5vw, 52px);
                 line-height:1.06; text-transform:uppercase; letter-spacing:.01em; }
.sheet .statement { margin:40px -72px; padding:52px 72px; }

/* figurative plate -- warm register (Plate XII): marigold mount + commentary column */
/* the book's plate:commentary ratio is ~2:1 (1fr/380px on the 1120 canvas); the ratio carries,
   not the absolute pixel, so the artwork keeps its dominance on narrower canvases */
.warmplate { display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:stretch;
             margin:26px 0 0; }
.warmplate .wmount { border:1px solid var(--ink); background:#ECA72C; padding:16px; }
.warmplate .wband { display:flex; justify-content:space-between; gap:12px; font-family:var(--mono);
                    font-size:10px; letter-spacing:.14em; padding:0 2px 10px; }
.warmplate .wart { border:1px dashed rgba(28,25,20,.55); }
.warmplate .wart img { display:block; width:100%; height:auto; }
.warmplate .wtitle { background:#F8F3E7; border-top:1px solid var(--ink); padding:12px 14px;
                     display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.warmplate .wtitle .t { font-family:var(--disp); font-weight:750; font-size:24px; }
.warmplate .wtitle .s { font-family:var(--mono); font-size:10px; letter-spacing:.1em;
                        text-align:right; }
.warmplate .wcomm { border:1px solid rgba(28,25,20,.4); padding:18px 20px; display:flex;
                    flex-direction:column; gap:10px; justify-content:center; }
.warmplate .wcomm .k { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; line-height:1.9; }
.warmplate .wcomm p { font-family:var(--text); font-size:15px; line-height:1.55; margin:0; }

/* the plate wears its own apparatus -- Proof I */
.plate { background:var(--cream); border:1px solid var(--ink);
         box-shadow:0 3px 18px rgba(28,25,20,.22); padding:24px; }
.plate .pstrip { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--ink);
                 border-bottom:1px solid var(--ink); padding:6px 2px;
                 font-family:var(--mono); font-size:10px; letter-spacing:.14em; }
.plate .ptitle { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
                 padding:14px 2px 6px; }
.plate .ptitle .t { font-family:var(--disp); font-weight:750; font-size:clamp(24px, 3.4vw, 44px);
                    line-height:1.05; }
.plate .ptitle .s { font-family:var(--mono); font-size:10px; letter-spacing:.12em; }
.plate .pview { overflow-x:auto; }
.plate .pview img, .plate .pview svg { display:block; max-width:100%; height:auto; margin:0 auto; }
.plate .papp { display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--ink);
               margin-top:10px; padding-top:9px; font-family:var(--mono); font-size:9.5px;
               line-height:1.7; letter-spacing:.05em; }
.plate .papp .sig { display:flex; align-items:center; gap:10px; }
.plate .papp .sigband { width:92px; height:30px; flex:none;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 8px,transparent 8px 10px,var(--ink) 10px 11px,transparent 11px 15px); }
.plate .papp .fistend { font-size:16px; align-self:center; }
.plate .papp a { text-decoration:none; }
.plate .papp a:hover { color:var(--art); }

/* plate artifact holder -- generated views sit inside a 1px carbon frame */
.artifact { border:1px solid var(--ink); background:var(--panel); padding:18px; overflow-x:auto; }
.artifact img, .artifact svg { display:block; max-width:100%; height:auto; margin:0 auto; }
.artifact.wide img { max-width:none; width:1400px; }
.caption { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; margin-top:10px; opacity:.75; }

/* ---- the map-plate template -- Second State Board 1a (proof boards 2026-07-08) ----
   Apparatus for drawn maps mounted as plates: diagram field + annotation margin
   (reserved for the Cartographer's Pass), KEY block, chop slot in the signature band.
   Wide grammar = margin right (216px); tall grammar = margin left (150px). */
.mp-grid { display:grid; grid-template-columns:1fr 216px; gap:24px; align-items:start; margin-top:12px; }
.mp-grid.tall { grid-template-columns:150px 1fr; }
.mp-field { border:1px solid var(--ink); background:var(--panel); padding:14px; overflow-x:auto; }
.mp-field svg { display:block; height:auto; margin:0 auto; }
.mp-margin .mh { font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
                 color:rgba(28,25,20,.6); border-bottom:.5px solid rgba(28,25,20,.35); padding-bottom:6px; }
.mp-margin .mnote { font-family:var(--text); font-style:italic; font-size:13px; line-height:1.5; margin-top:12px; }
.mp-key { display:inline-block; background:var(--cream); border:1px solid var(--ink);
          padding:10px 12px; margin-top:16px; min-width:214px; vertical-align:top; }
.mp-key .kh { font-family:var(--mono); font-size:9px; letter-spacing:.2em;
              border-bottom:.5px solid rgba(28,25,20,.5); padding-bottom:5px; margin-bottom:3px; }
.mp-key .krow { display:grid; grid-template-columns:34px 1fr; gap:6px 9px; align-items:center;
                font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; margin-top:6px; }
.mp-key .krow svg { display:block; }
.mp-chop { width:40px; height:40px; border:1px dashed rgba(28,25,20,.6); flex:none; align-self:center; }
@media (max-width:900px) {
  .mp-grid, .mp-grid.tall { grid-template-columns:1fr; }
  .mp-grid.tall .mp-margin { order:2; }
}

/* generated matrix table */
table.gen { border-collapse:collapse; width:100%; font-size:13px; }
table.gen th, table.gen td { border:1px solid rgba(28,25,20,.35); padding:8px 10px; vertical-align:top;
                             text-align:left; }
table.gen thead th { font-family:var(--mono); font-size:10px; letter-spacing:.08em; font-weight:600; }
table.gen td.rowhead { font-family:var(--text); font-weight:600; font-size:14px; white-space:nowrap; }
table.gen td.group { font-family:var(--mono); font-size:10px; letter-spacing:.2em; font-weight:600;
                     border-left:none; border-right:none; padding-top:16px; }
table.gen td .rid { font-family:var(--mono); font-size:9.5px; opacity:.6; }
table.gen td { font-family:var(--mono); font-size:11px; line-height:1.6; }

/* footnote list */
.foot { font-family:var(--mono); font-size:11px; line-height:1.8; letter-spacing:.02em; }
.foot b { font-weight:600; }

footer.site { max-width:1180px; margin:40px auto 30px; padding:0 56px; }
footer.site .fstrip { display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--ink);
                      padding-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; opacity:.8; }

.page { max-width:1180px; margin:0 auto; padding:48px 56px 40px; }
@media (max-width:900px) {
  .page { padding:36px 24px; }
  .idx .row { flex-wrap:wrap; }
  .idx .row .m { text-align:left; }
  footer.site { padding:0 24px; }
  /* plates stay legible on small screens: the frame scrolls, the drawing keeps its size */
  .artifact.scrollplate svg, .plate .pview.scroll svg { min-width:920px; }
  .frame { inset:8px; }
  .statement { padding:44px 24px; }
  .sheet { padding:36px 24px 28px; }
  .sheet .strip3 { flex-wrap:wrap; gap:4px 12px; }
  .sheet .statement { margin:40px -24px; padding:44px 24px; }
  .sheetfoot { flex-wrap:wrap; }
  .warmplate { grid-template-columns:1fr; }
  .plate { padding:14px; }
  .plate .papp { flex-wrap:wrap; }
  table.gen { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}