/* ============================================================
   Raw.Space — concrete exhibition system  [PROTOTYPE]
   System-wide. Pages link this and use the classes; per-page
   <style> only overrides --sheet-max (and --coordw on the catalogue).

   Scroll model (fix 1): the left rule + wordmark + masthead bracket are
   part of the document and scroll (frame announces, then recedes). The
   ONLY position:fixed chrome is the working title-block. Content is
   left-anchored with a reserved right gutter, so no chrome overlaps the
   body column at any scroll position.

   Mobile (fix 2): below 760px the fixed title-block folds into flow at
   the foot, the catalogue coordinate-column stacks and wraps, the bracket
   simplifies, and expandable terms get touch-comfortable hit areas.
   ============================================================ */

@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Light.woff2') format('woff2'),url('../fonts/IBMPlexMono-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap;}
@font-face{font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'),url('../fonts/IBMPlexMono-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Source Serif 4'; src:url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Source Serif 4'; src:url('../fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap;}
@font-face{font-family:'Source Serif 4'; src:url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap;}

:root{
  --ground:#f5f5f4; --ink:#1A1A1A; --oxblood:#6c0000;
  --frame:rgba(26,26,26,.14); --tick-col:rgba(26,26,26,.62);
  --hairline:rgba(26,26,26,.16); --hairline-strong:rgba(26,26,26,.42);
  --hard:rgba(26,26,26,.55); --desc:#5b5b58;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --inset:24px; --tick:15px;
  --rail:46px;            /* left structural rule x */
  --coordw:17.5rem;       /* catalogue coordinate column / spine x */
  --sheet-max:720px;      /* content column cap (pages override) */
  --tb-gutter:270px;      /* right margin reserved for the fixed title-block */
}

*{box-sizing:border-box;}
html,body{margin:0;}
html{background:var(--ground);}
body{background:var(--ground); color:var(--ink); font-family:var(--serif); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* left structural rule — scrolls with the document (only on framed pages) */
body:has(.sheet){position:relative; min-height:100vh;}
body:has(.sheet)::before{content:""; position:absolute; left:var(--rail); top:0; bottom:0; width:2px; background:var(--ink); pointer-events:none; z-index:0;}

/* ---- legacy frame (used by serif-test.html) ---- */
.frame-border{position:fixed; inset:var(--inset); border:1px solid var(--frame); pointer-events:none; z-index:30;}
.frame-tick{position:fixed; width:var(--tick); height:var(--tick); border:0 solid var(--tick-col); pointer-events:none; z-index:50;}
.frame-tick.tl{top:var(--inset); left:var(--inset);  border-top-width:1px; border-left-width:1px;}
.frame-tick.tr{top:var(--inset); right:var(--inset); border-top-width:1px; border-right-width:1px;}
.frame-tick.bl{bottom:var(--inset); left:var(--inset);  border-bottom-width:1px; border-left-width:1px;}
.frame-tick.br{bottom:var(--inset); right:var(--inset); border-bottom-width:1px; border-right-width:1px;}
.coordinate{position:fixed; z-index:60; pointer-events:none; top:calc(var(--inset) - 7px); left:calc(var(--inset) + 20px); display:flex; align-items:center; background:var(--ground); padding:0 9px; font-family:var(--mono); font-weight:300; font-size:11px; letter-spacing:.16em; color:var(--ink);}
.coordinate .wm{opacity:.78;}
.coordinate .rule{display:inline-block; width:34px; height:0; border-top:1px solid var(--hairline-strong); margin:0 12px;}
.coordinate .loc{color:var(--oxblood);}
.controls{position:fixed; z-index:60; bottom:calc(var(--inset) - 7px); right:calc(var(--inset) + 20px); display:flex; align-items:center; gap:24px; background:var(--ground); padding:0 9px; font-family:var(--mono); font-weight:300; font-size:11px; letter-spacing:.16em;}
.controls a{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
.controls a:hover, .controls a:focus{color:var(--oxblood);}

/* ============================================================
   STRUCTURAL SYSTEM
   ============================================================ */
.left-rule{display:none;}   /* superseded by the scrolling body::before */

.wordmark{display:block; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.2em; color:var(--ink); margin:30px 0 0 calc(var(--rail) + 42px);}
/* the wordmark is the route home — a genuine link, monochrome at rest with the same
   interaction treatment as the title-block rows (§2: oxblood = interaction heat only,
   on hover AND focus; focus ring is a shape, not colour alone). */
.wordmark a{ color:inherit; text-decoration:none; letter-spacing:inherit; }
.wordmark a:hover, .wordmark a:focus-visible{ color:var(--oxblood); }
.wordmark a:focus-visible{ outline:2px solid var(--oxblood); outline-offset:3px; }

.sheet{position:relative; max-width:var(--sheet-max); margin:30px var(--tb-gutter) 200px calc(var(--rail) + 42px);}
.sheet:has(.row)::before{content:""; position:absolute; top:0; bottom:0; left:var(--coordw); width:2px; background:var(--ink);}  /* coordinate spine */

/* ---- catalogue rows ---- */
.row{display:grid; grid-template-columns:var(--coordw) 1fr; align-items:start;}
.row > .coord{font-family:var(--mono); font-weight:400; font-size:8.5px; letter-spacing:-.02em; line-height:1.5; color:var(--ink); text-align:right; padding:0 14px 0 0; white-space:nowrap; overflow:hidden;}
.row > .main, .row > .work{padding-left:22px;}
.row.masthead{margin-bottom:34px;}

.page-title{font-family:var(--serif); font-weight:400; font-size:clamp(44px,7vw,62px); line-height:.98; letter-spacing:-.015em; margin:0 0 .34em;}
.lede{font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--ink); margin:0; max-width:46ch;}

.entry{padding:0;}
.entry .work{border-bottom:1px solid var(--hard); padding-top:18px; padding-bottom:18px;}   /* divider meets the spine, never the gutter */
.entry .coord{padding-top:24px;}
.entry__title{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.2; margin:0;}
.entry__title a{color:var(--ink); text-decoration:none;}
.entry__title a:hover, .entry__title a:focus{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--oxblood);}
.entry__desc{font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.5; color:var(--desc); margin:5px 0 0; max-width:52ch;}
.entry:hover .coord, .entry:focus-within .coord{color:var(--oxblood);}
.sec{margin-top:34px;}
.sec .work{border-top:2px solid var(--ink); padding-top:14px;}
.cat-section{font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink); margin:0;}

/* ---- reading-page masthead bracket (essays / poem) ---- */
.masthead:not(.row){position:relative; border-left:2px solid var(--ink); padding:0 0 0 26px; margin-bottom:54px;}
.masthead:not(.row)::before{content:""; position:absolute; left:0; top:0; width:14px; height:2px; background:var(--ink);}
.masthead:not(.row)::after{content:""; position:absolute; left:0; bottom:0; width:14px; height:2px; background:var(--ink);}
.coord-top{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink); opacity:.8; margin:0 0 14px;}
.essay-title{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,48px); line-height:1.04; letter-spacing:-.01em; margin:0 0 .4em;}
.poem-title{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,48px); line-height:1; letter-spacing:-.01em; margin:0;}
.dek{font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.45; color:var(--desc); margin:0;}

/* ---- reading body ---- */
.read p{font-family:var(--serif); font-size:19px; line-height:1.65; margin:0 0 1.25em; color:var(--ink);}
.read blockquote{font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.5; margin:1.7em 0; padding-left:18px; border-left:2px solid var(--hard); color:var(--ink);}
.read blockquote span{display:block; font-style:normal; font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--desc); margin-top:8px;}
/* in-body subheads + lists (reading register: serif, weighted) */
.read h2{font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.25; letter-spacing:-.01em; margin:1.9em 0 .5em; color:var(--ink);}
.read h3{font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.3; margin:1.6em 0 .4em; color:var(--ink);}
.read h4{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:1.8em 0 .6em; color:var(--ink);}
.read ul, .read ol{font-family:var(--serif); font-size:19px; line-height:1.6; margin:0 0 1.25em; padding-left:1.4em; color:var(--ink);}
.read li{margin:0 0 .45em;}
.read hr{border:0; border-top:1px solid var(--hairline-strong); margin:2.2em 0;}
/* in-body links: monochrome (ink + underline so colour is not the sole signifier — WCAG
   1.4.1); oxblood only as interactive heat on hover/focus (§2). Never browser-blue. */
.read a, .lede a, .dek a, .explanation a, .entry__desc a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;}
.read a:hover, .read a:focus, .lede a:hover, .lede a:focus, .dek a:hover, .dek a:focus, .explanation a:hover, .explanation a:focus, .entry__desc a:hover, .entry__desc a:focus{color:var(--oxblood); text-decoration-color:var(--oxblood);}
.poem p{font-family:var(--serif); font-size:22px; line-height:1.88; margin:0 0 1.9em; color:var(--ink);}

/* ---- expandable gloss (DEFAULT CLOSED; opens only on .show) ---- */
.expandable{text-decoration:underline; text-decoration-color:var(--oxblood); text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer;}
.expandable:hover, .expandable:focus{text-decoration-thickness:2px;}
/* gloss = a revealed action, so its rule is oxblood; this also keeps it distinct from a
   citation (neutral grey rule + mono byline). They must not share one treatment. */
.explanation{max-height:0; overflow:hidden; font-style:italic; color:var(--desc); border-left:2px solid var(--oxblood); padding-left:14px; margin:0; transition:max-height .3s ease, margin .3s ease;}
.explanation.show{max-height:600px; margin:14px 0;}

/* ---- redaction (poem final line); flip background to var(--ink) for black ---- */
.redact{position:relative;}
.redact::after{content:""; position:absolute; left:-3px; right:0; top:2px; bottom:3px; background:var(--oxblood);}

/* ---- foot (reading pages): closing rule / terminus only. Navigation lives
   solely in the title-block (one nav object, per §4); no competing foot nav. ---- */
.foot{margin-top:40px; border-top:2px solid var(--ink);}

/* ---- working title-block — the ONLY fixed chrome ---- */
.titleblock{position:fixed; right:30px; bottom:28px; z-index:60; background:var(--ground); border:1px solid var(--ink); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;}
.tb-row{display:grid; grid-template-columns:5rem auto; border-bottom:1px solid var(--ink);}
.tb-k{padding:6px 10px; border-right:1px solid var(--ink); text-transform:uppercase; opacity:.5;}
.tb-v{padding:6px 16px 6px 12px; text-align:right; min-width:7rem; opacity:.78;}
.tb-v.loc{color:var(--oxblood); opacity:1; font-weight:500;}
.tb-nav{display:flex;}
.tb-nav a{flex:1; text-align:center; padding:7px 14px; color:var(--ink); text-decoration:none; text-transform:uppercase; letter-spacing:.16em;}
.tb-nav a:first-child{border-right:1px solid var(--ink);}
.tb-nav a:hover, .tb-nav a:focus{color:var(--oxblood);}

/* ============================================================
   MOBILE — fold the fixed corner chrome into the document flow
   ============================================================ */
@media (max-width:760px){
  :root{--rail:16px;}
  html, body{overflow-x:hidden;}                                            /* no horizontal scroll */
  .wordmark{margin:22px 0 4px calc(var(--rail) + 18px);}
  /* padding-based width (border-box) so the column can never exceed the viewport */
  .sheet{max-width:100%; width:auto; margin:14px 0 56px 0; padding:0 18px 0 calc(var(--rail) + 18px);}
  .sheet:has(.row)::before{display:none;}                                   /* spine off */
  .row{grid-template-columns:1fr; gap:2px;}
  .row > *{min-width:0;}                                                    /* let grid items shrink + wrap */
  .row > .coord{text-align:left; white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:break-word; font-size:11px; letter-spacing:0; padding:0 0 4px 0;}  /* stack + break the long slug */
  .row > .main, .row > .work{padding-left:0;}
  .entry .coord{padding-top:18px;}
  .lede, .entry__desc, .read p, .read blockquote, .poem p{max-width:100%;}  /* wrap to the column, not a ch-measure wider than it */
  .row.masthead{margin-bottom:24px;}
  .masthead:not(.row){padding-left:18px; margin-bottom:34px;}               /* bracket simplifies */
  .page-title{font-size:clamp(32px,9vw,46px);}
  .read p{font-size:18px;}
  .poem p{font-size:19px; line-height:1.8;}
  .expandable{padding:.18em 0;}                                             /* touch-comfortable */
  /* the only fixed element folds into flow at the foot */
  .titleblock{position:static; display:inline-block; margin:44px 18px 0 calc(var(--rail) + 18px);}
}

@media (prefers-reduced-motion:reduce){ .explanation{transition:none;} }