/* =============================================================================
   portal.css — the ONE authoritative Green Eggs N Spam portal stylesheet.

   Purpose: drive every portal page off a single sheet. Pages are stripped of
   their own <style>/inline styling and rendered through templates/portal_page.html,
   which links ONLY this file. Editing this file restyles the whole portal.

   Design system = the montclair look the owner already accepted, generalised.
   Palette + fonts are taken VERBATIM from:
     - htdocs/portal/nordstroms/_kit/type.css        (@font-face + base type)
     - htdocs/portal/nordstroms/index.html           (accepted base <style> block)
   Nothing here invents a colour, font, or aesthetic. No teal masthead band.

   SELECTOR STRATEGY: element-first. A stripped page carrying almost no classes
   (just h1-h6, p, table, ul/ol, figure, img, pre, blockquote, details) inherits
   the full look with zero per-page classes. A small set of optional component
   classes (.callout, .num-card, .book-stamp ...) is provided for pages that keep
   semantic hooks, but nothing depends on them.

   SECTIONS
     1. Fonts (@font-face, self-hosted)
     2. Tokens (palette / weight variables)
     3. Base + page frame (body, .wrap, paper texture)
     4. Egg-mark masthead component
     5. Header / title block
     6. Navigation
     7. Typographic elements (h1-h6, p, links, lists, hr, blockquote)
     8. Tables
     9. Figures / images (float-right rule) + svg containers
    10. Code / pre
    11. Callouts, pull-quotes, cards, misc components
    12. Details / summary accordions
    13. Footer (confidential clause)
    14. Responsive
   ============================================================================= */


/* ============================================================================
   1. FONTS — self-hosted, no CDN. woff2 files live in ./fonts/ beside this file.
      Copied verbatim from _kit/type.css. (Sanctioned Fraunces styles: 600 roman
      display, 300 italic editorial, 600 italic quotes, 700 roman restricted.)
   ============================================================================ */
:root{ --f-display:600; --f-editorial:300; --f-quote:600; --f-stat:700; }

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('fonts/fraunces-var-latin.woff2') format('woff2-variations'),
      url('fonts/fraunces-var-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;
  src:url('fonts/fraunces-italic-var-latin.woff2') format('woff2-variations'),
      url('fonts/fraunces-italic-var-latin.woff2') format('woff2');
}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400-latin.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/spectral-700-latin.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-italic-400-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-var-latin.woff2') format('woff2-variations'),url('fonts/jetbrains-mono-var-latin.woff2') format('woff2')}

:where(h1,h2,h3,h4,h5,h6,figcaption,blockquote,.lede,.pull-quote,.callout){font-optical-sizing:auto}


/* ============================================================================
   2. TOKENS — palette copied verbatim from the montclair sources.
      Teal/olive/mustard remain as ACCENTS only (they are part of the accepted
      look); there is deliberately NO teal masthead / top band anywhere.
   ============================================================================ */
:root{
  --paper:#F2EBD8; --paper-2:#EAE2CB;
  --ink:#1F1A14; --ink-soft:#3A352B;
  --rule:#C4B898;
  --rust:#A63E1A; --rust-soft:#C7572F;
  --teal:#2E5959; --olive:#7C7843; --mustard:#C99012;
  --link:#A63E1A; --link-visited:#7A2E14;
  --strength:#2E5959; --weakness:#A63E1A; --opportunity:#7C7843; --threat:#7A2E14;
}


/* ============================================================================
   3. BASE + PAGE FRAME
   ============================================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Spectral',Georgia,serif;font-size:18px;line-height:1.65;
  background-image:
    radial-gradient(circle at 20% 10%,rgba(166,62,26,.04) 0%,transparent 40%),
    radial-gradient(circle at 80% 90%,rgba(46,89,89,.04) 0%,transparent 40%);
  background-attachment:fixed;
}
/* faint paper weave */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:
    repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(31,26,20,.012) 2px,rgba(31,26,20,.012) 3px),
    repeating-linear-gradient(90deg,transparent 0,transparent 2px,rgba(31,26,20,.012) 2px,rgba(31,26,20,.012) 3px);
}
.wrap{max-width:880px;margin:0 auto;padding:0 28px;position:relative;z-index:2}


/* ============================================================================
   4. EGG-MARK MASTHEAD — interactive Big Green Egg. Copied from _kit/type.css.
      Inert on pages without the .egg-mark block. Ink-grey smoke on paper.
   ============================================================================ */
.egg-mark{position:relative;float:right;width:20%;max-width:145px;height:auto;margin:42px 0 12px 26px;shape-outside:margin-box;transform:scaleX(-1);cursor:pointer}
header:has(>.egg-mark)::after{content:"";display:block;clear:both}
.egg-mark img.egg-img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(31,26,20,.25))}
.egg-mark:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
.egg-smoke{position:absolute;bottom:80%;left:53%;transform:translateX(-50%);width:56px;height:110px;pointer-events:none;z-index:2}
.egg-smoke .sp{position:absolute;bottom:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 45% 45%,rgba(112,105,88,.6) 0%,rgba(112,105,88,.34) 45%,transparent 75%);filter:blur(1.5px);opacity:0;animation:eggPuff 3.6s linear infinite}
.egg-smoke .sp:nth-child(2){animation-delay:.3s;left:44%;width:10px;height:10px;margin-left:-5px}
.egg-smoke .sp:nth-child(3){animation-delay:.6s;left:56%;width:14px;height:14px;margin-left:-7px}
.egg-smoke .sp:nth-child(4){animation-delay:.9s;left:48%;width:11px;height:11px;margin-left:-5px}
.egg-smoke .sp:nth-child(5){animation-delay:1.2s;left:53%;width:13px;height:13px;margin-left:-6px}
.egg-smoke .sp:nth-child(6){animation-delay:1.5s;left:46%;width:12px;height:12px}
.egg-smoke .sp:nth-child(7){animation-delay:1.8s;left:55%;width:10px;height:10px;margin-left:-5px}
.egg-smoke .sp:nth-child(8){animation-delay:2.1s;left:50%;width:14px;height:14px;margin-left:-7px}
.egg-smoke .sp:nth-child(9){animation-delay:2.4s;left:45%;width:11px;height:11px;margin-left:-5px}
.egg-smoke .sp:nth-child(10){animation-delay:2.7s;left:54%;width:12px;height:12px}
.egg-smoke .sp:nth-child(11){animation-delay:3s;left:49%;width:10px;height:10px;margin-left:-5px}
.egg-smoke .sp:nth-child(12){animation-delay:3.3s;left:52%;width:13px;height:13px;margin-left:-6px}
@keyframes eggPuff{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  12%{opacity:.75}
  55%{opacity:.45;transform:translate(3px,-52px) scale(1.5)}
  100%{opacity:0;transform:translate(-4px,-96px) scale(2.3)}
}
.egg-burst{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:80%;height:55%;pointer-events:none;z-index:3;opacity:0}
.egg-burst.active{animation:eggBurst .85s ease-out forwards}
.egg-burst .bc{position:absolute;background:radial-gradient(ellipse at center,rgba(250,247,238,1) 0%,rgba(215,208,190,.85) 30%,rgba(150,142,120,.5) 60%,transparent 80%);border-radius:50%;filter:blur(9px)}
@keyframes eggBurst{
  0%{opacity:.9;transform:translateX(-50%) scale(.55)}
  18%{opacity:.85;transform:translateX(-50%) scale(1.1)}
  45%{opacity:.5;transform:translateX(-50%) translateY(-18px) scale(1.4)}
  100%{opacity:0;transform:translateX(-50%) translateY(-52px) scale(1.8)}
}
.egg-mark.egg-off .sp{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.egg-smoke,.egg-burst{display:none}}


/* ============================================================================
   5. HEADER / TITLE BLOCK  (rendered by the template from title/subtitle vars)
   ============================================================================ */
header{border-bottom:2px solid var(--ink);padding:36px 0 0;position:relative}
.title-block{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
h1.book-title{font-family:'Fraunces',serif;font-weight:var(--f-display);font-size:54px;line-height:.95;margin:0 0 4px;letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.book-title em{color:var(--rust);font-style:italic;font-weight:520}
.book-subtitle{font-family:'Fraunces',serif;font-style:italic;font-weight:var(--f-editorial);color:var(--ink-soft);font-size:21px;margin:0 0 16px;max-width:580px}
.book-stamp{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--rust);border:1.5px solid var(--rust);padding:6px 12px;align-self:flex-end;transform:rotate(-1.5deg);margin-bottom:18px;background:var(--paper)}


/* ============================================================================
   6. NAVIGATION  (optional; mono uppercase, rust hover — NO teal band)
   ============================================================================ */
nav.sections,nav.portalnav{position:sticky;top:0;background:var(--paper);border-bottom:1.5px solid var(--ink);padding:14px 0;z-index:10;margin-top:24px}
nav.sections ul,nav.portalnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px;font-family:'JetBrains Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em}
nav.sections a,nav.portalnav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s,border-color .15s}
nav.sections a:hover,nav.portalnav a:hover{color:var(--rust);border-bottom-color:var(--rust);background:none}


/* ============================================================================
   7. TYPOGRAPHIC ELEMENTS — element-first so stripped pages inherit the look.
   ============================================================================ */
section{padding:52px 0 32px;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}

h1{font-family:'Fraunces',serif;font-size:44px;font-weight:var(--f-display);line-height:1;margin:0 0 12px;letter-spacing:-.02em}
h2{font-family:'Fraunces',serif;font-size:40px;font-weight:var(--f-display);line-height:1.05;margin:34px 0 6px;letter-spacing:-.02em}
h2 .num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--rust);letter-spacing:.18em;display:block;margin-bottom:8px;font-weight:400}
h3{font-family:'Fraunces',serif;font-size:24px;font-weight:var(--f-display);margin:36px 0 8px;letter-spacing:-.01em;scroll-margin-top:80px}
h4{font-family:'Fraunces',serif;font-size:17px;font-weight:var(--f-display);text-transform:uppercase;letter-spacing:.08em;margin:24px 0 6px;color:var(--teal);scroll-margin-top:84px}
h5{font-family:'Fraunces',serif;font-size:16px;font-weight:var(--f-display);margin:20px 0 4px;color:var(--ink);scroll-margin-top:84px}
h6{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin:16px 0 4px;scroll-margin-top:84px}

p{margin:0 0 14px}
.lede{font-family:'Fraunces',serif;font-style:italic;font-weight:var(--f-editorial);font-size:21px;color:var(--ink-soft);line-height:1.4;margin:0 0 28px;max-width:660px}

/* links — element-level so bare <a> in stripped body still reads as a portal link */
a,a:link{color:var(--link);text-decoration:none;border-bottom:1px dotted var(--link);transition:color .15s,border-bottom-color .15s,background .15s}
a:visited{color:var(--link-visited);border-bottom-color:var(--link-visited)}
a:hover{color:var(--paper);background:var(--rust);border-bottom-color:var(--rust)}
a:visited:hover{color:var(--paper)} /* keep visited links legible on hover */

ul,ol{padding-left:22px;margin:8px 0 18px}
li{margin-bottom:8px}
ul.simple{padding-left:22px;margin:8px 0 18px}

dl.gloss dt{font-family:'Fraunces',serif;font-weight:var(--f-display);font-size:18px;color:var(--ink);margin-top:18px;scroll-margin-top:80px}
dl.gloss dd{margin:4px 0 8px;color:var(--ink-soft)}

hr{border:none;border-top:1px solid var(--rule);margin:30px 0}

blockquote{margin:18px 0;padding:14px 22px;border-left:3px solid var(--rust);background:rgba(166,62,26,.045)}
blockquote p{margin:0 0 8px}
blockquote p:last-child{margin-bottom:0}


/* ============================================================================
   8. TABLES — the #1 component (in ~135 of 215 pages). montclair table style,
      made readable as a first-class element with zero classes required.
   ============================================================================ */
table{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:16px}
thead th{border-bottom:1.5px solid var(--ink)}
th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);padding:10px 14px 10px 0;border-bottom:1.5px solid var(--ink);font-weight:500;vertical-align:bottom}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
/* first column reads as the row's subject (montclair convention) */
td:first-child{font-weight:var(--f-display);font-family:'Fraunces',serif;color:var(--rust)}
tbody tr:last-child td{border-bottom:1px solid var(--rule)}


/* ============================================================================
   9. FIGURES / IMAGES
      Owner standing rule: content images FLOAT RIGHT, text wraps left, never
      centered. Charts drawn as inline <svg> instead fill the column (block).
      We distinguish with :has(): a figure holding an <img> floats; a figure
      holding an <svg> is a full-width diagram card.
   ============================================================================ */

/* photo figures — float right, text wraps to the left */
figure{float:right;width:min(46%,340px);margin:6px 0 18px 30px;padding:0;clear:right}
figure img{width:100%;height:auto;display:block;border-radius:3px}
figcaption{font-family:'Fraunces',serif;font-style:italic;font-weight:var(--f-editorial);color:var(--ink-soft);font-size:14px;margin-top:8px;padding-left:12px;border-left:2px solid var(--rule)}
figcaption .figno{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:11px;color:var(--rust);letter-spacing:.15em;margin-right:8px}

/* bare inline images (no <figure> wrapper) also float right */
p > img,body > img,.wrap > img,main > img{float:right;max-width:min(46%,340px);height:auto;margin:6px 0 18px 30px;border-radius:3px;clear:right}

/* diagram figures: an <svg> chart is a full-width card, NOT floated.
   svg internals are preserved byte-for-byte by strip.py; we only size the box. */
figure:has(svg){float:none;width:auto;margin:32px 0;clear:both}
figure:has(svg) svg{display:block;width:100%;height:auto;background:var(--paper-2);border:1px solid var(--rule);padding:18px;border-radius:2px}
figure:has(svg) figcaption{font-size:15.5px}

/* standalone svg diagram container (svg not wrapped in a figure) */
.diagram,svg.diagram{display:block;width:100%;height:auto;margin:28px 0;background:var(--paper-2);border:1px solid var(--rule);padding:18px;border-radius:2px;clear:both}


/* ============================================================================
   10. CODE / PRE
   ============================================================================ */
code{font-family:'JetBrains Mono',monospace;font-size:.92em;background:var(--paper-2);padding:1px 5px;border-radius:2px;color:var(--rust);overflow-wrap:anywhere}
pre{background:var(--paper-2);border-left:3px solid var(--teal);padding:18px 22px;margin:20px 0;white-space:pre-wrap;word-wrap:break-word;font-family:'Spectral',Georgia,serif;font-size:16px;line-height:1.62;border-radius:2px;clear:both}
pre code{background:none;color:var(--ink);padding:0;font-family:inherit;font-size:inherit}
pre.sysout{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.55;letter-spacing:0;tab-size:2}
pre.sysout code{font-family:'JetBrains Mono',monospace}


/* ============================================================================
   11. OPTIONAL COMPONENTS — callouts, pull-quotes, cards, number grids.
       Kept for pages that retain semantic hooks; nothing depends on them.
   ============================================================================ */
.callout{background:var(--paper-2);border-left:3px solid var(--rust);padding:18px 22px;margin:24px 0;font-size:17px;clear:both}
.callout .label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);display:block;margin-bottom:8px}
.callout p:last-child{margin-bottom:0}

.pull-quote{font-family:'Fraunces',serif;font-size:24px;font-style:italic;font-weight:var(--f-quote);color:var(--ink);line-height:1.35;margin:32px 0;padding:22px 28px 22px 30px;border-left:4px solid var(--rust);background:linear-gradient(90deg,rgba(166,62,26,.04) 0%,transparent 100%);clear:both}
.pull-quote::before{content:'"';font-size:54px;float:left;margin:-8px 8px -8px -10px;color:var(--rust);font-weight:var(--f-display);line-height:.7}

.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin:24px 0;clear:both}
.num-card{background:var(--paper-2);padding:18px 20px;border-left:3px solid var(--teal)}
/* .number / .label are the non-montclair stat-tile field names (from 702-intel);
   aliased here so the normalized tiles style identically to montclair .big/.lab. */
.num-card .big,.num-card .number{font-family:'Fraunces',serif;font-size:28px;font-weight:var(--f-display);color:var(--ink);line-height:1;display:block}
.num-card .lab,.num-card .label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:6px}

.card{background:var(--paper-2);border-left:3px solid var(--rule);padding:16px 20px;margin:16px 0}
.card:hover{border-left-color:var(--rust)}

.verdict{background:var(--paper-2);border:1px solid var(--rule);border-left:4px solid var(--rust);padding:16px 20px;margin:22px 0;font-size:17px;border-radius:4px;clear:both}
.verdict b{color:var(--rust)}
.caveat{font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.5;color:var(--ink-soft);background:#f4eee0;border:1px dashed var(--rule);padding:11px 14px;margin:16px 0;border-radius:3px;clear:both}


/* ============================================================================
   11b. COMPONENT LAYER — recurring montclair components, copied VERBATIM from
        the montclair sources (nordstroms inline <style> + _kit/type.css). These
        are named components that sit on top of the element-first base. strip.py
        keeps their class names (ALLOWED_CLASSES); everything else is stripped.
   ============================================================================ */

/* Eyebrow / kicker — the mono-uppercase teal label that sits ABOVE a heading,
   almost always as the first child INSIDE the heading:
       <h2><span class="kicker">The room</span>The Venue</h2>
   display:block is what lifts it onto its own line above the title (used in ~49
   montclair pages). Verbatim from the-offering inline <style>. */
.kicker{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin-bottom:8px}

/* Badge / priority pills — verbatim from _kit/type.css. display:inline-block is
   added so a pill also renders standalone (e.g. in a table cell), not only inside
   the flex <summary> rows it was born in. */
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:9px;color:#fff;line-height:1.5;vertical-align:middle}
.p0{background:var(--rust)}
.p1{background:var(--mustard)}
.p2{background:var(--olive)}
.pill.proposed{background:var(--teal)}
.pill.phase{background:var(--ink)}


/* Montclair section nav — the sticky wayfinding bar shown under the header on
   every montclair page. Copied VERBATIM from nordstroms/index.html
   <style id="mc-globalnav">. Non-montclair pages use .portal-back instead. */
.mcnav{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;margin:0;padding:10px 0;background:var(--paper,#F2EBD8);border-bottom:1.5px solid var(--ink,#1F1A14);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.1em;line-height:1.3}
.mcnav a{color:var(--ink-soft,#3A352B);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;background:none}
.mcnav a:visited{color:var(--ink-soft,#3A352B)}
.mcnav a:hover{color:var(--rust,#A63E1A);border-bottom-color:var(--rust,#A63E1A);background:none}
.mcnav .nav-active{color:var(--rust,#A63E1A);font-weight:700;border-bottom:2px solid var(--rust,#A63E1A);padding-bottom:1px}
.mcnav .mcnav-util{margin-left:auto;color:var(--teal,#2E5959)}
.mcnav .mcnav-util:hover{color:var(--rust,#A63E1A);border-bottom-color:var(--rust,#A63E1A)}
@media(max-width:720px){.mcnav{gap:6px 14px}.mcnav .mcnav-util{margin-left:0;flex-basis:100%}}

/* Read-time badge — build-time estimate injected as the last child of a
   substantive <details>' <summary>. Matches the muted summary-meta look:
   small mono, uppercase, ink-soft; margin-left:auto right-aligns it. */
.read-time{margin-left:auto;flex:none;align-self:center;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* Non-montclair back-link — these pages were standalone; a single quiet link
   home, not a fabricated section nav. */
.portal-back{display:inline-block;margin:14px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.portal-back:hover{color:var(--rust);border-bottom-color:var(--rust);background:none}
.portal-back:visited{color:var(--ink-soft)}


/* ============================================================================
   12. DETAILS / SUMMARY ACCORDIONS  (in ~66 pages). montclair accordion look.
       Single-open behaviour is enforced by the template's accordion script.
   ============================================================================ */
details{background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;margin:10px 0;overflow:hidden;transition:border-color .15s;clear:both}
details[open]{border-color:#cdbf9c;box-shadow:0 10px 26px -20px rgba(31,26,20,.5)}
details:target{border-color:var(--teal);box-shadow:0 0 0 2px rgba(46,89,89,.25),0 10px 26px -20px rgba(31,26,20,.5)}
details>summary{position:relative;cursor:pointer;padding:13px 16px;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 11px;font-family:'Spectral',Georgia,serif;font-size:16.5px;line-height:1.45}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";flex:none;align-self:center;width:7px;height:7px;margin-right:2px;border-right:2px solid var(--rust);border-bottom:2px solid var(--rust);transform:rotate(-45deg);transition:transform .18s}
details[open]>summary::before{transform:rotate(45deg)}
details>summary:hover{background:#e3dabd}
details>div,details .body{padding:6px 18px 16px 34px;font-size:16px;line-height:1.6;color:var(--ink-soft)}
details>div>p:first-child{margin-top:0}
@media(max-width:720px){details .body,details>div{padding-left:22px}details>summary{font-size:15.5px}}


/* ============================================================================
   13. FOOTER — confidential / internal-use clause. Rendered by the template.
   ============================================================================ */
footer{padding:32px 0 64px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;border-top:2px solid var(--ink);margin-top:32px;clear:both}


/* ============================================================================
   14. RESPONSIVE
   ============================================================================ */
@media (max-width:720px){
  h1.book-title{font-size:38px}
  h1{font-size:34px}
  .book-subtitle{font-size:18px}
  h2{font-size:28px}
  .lede{font-size:18px}
  body{font-size:17px}
  .pull-quote{font-size:20px;padding:18px 22px}
  figure:has(svg) svg{padding:10px}
  /* on narrow screens, photo figures stop floating and stack full-width */
  figure,p > img,body > img,.wrap > img,main > img{float:none;width:auto;max-width:100%;margin:18px 0}
  .egg-mark{width:34%;max-width:118px;margin:34px 0 10px 14px}
}

/* ---- video facade: click-to-embed YouTube poster (the-pitch reference clip).
   Floats right per the house image rule; anchor opens YouTube when JS is absent. */
figure.mc-video{float:right;width:min(33%,300px);margin:4px 0 16px 26px}
.yt-facade{position:relative;display:block;aspect-ratio:16/9;background:#000;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.yt-facade img{display:block;width:100%;height:100%;object-fit:cover;border:0;background:#000}
.yt-facade .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:38px;background:var(--rust);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.45)}
.yt-facade .play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-38%,-50%);border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--paper)}
.yt-facade:hover .play,.yt-facade:focus-visible .play{background:var(--ink)}
.yt-facade:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.mc-video iframe{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:2px}
figure.mc-video figcaption{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:8px}
@media(max-width:680px){figure.mc-video{float:none;width:100%;max-width:340px;margin:14px auto}}

/* ---- inline chart/diagram figure (svg + caption), full-width, centered ---- */
figure.mc-figure{margin:22px 0;padding:0}
figure.mc-figure svg{display:block;width:100%;height:auto;max-width:720px;margin:0 auto}
figure.mc-figure figcaption{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:8px;max-width:720px}
/* ===== migrated SVG chart CSS (portal one-CSS migration gap fix 20260714) ===== */
.fopen-q{fill:#EAE2CB;opacity:.5}
.fopen-open{fill:none;stroke:#A63E1A;stroke-width:1.6;stroke-dasharray:6 4}
.fopen-opent{fill:#A63E1A;font-size:13px;font-weight:700;letter-spacing:.12em}
.fopen-opens{fill:#3A352B;font-size:11px}
.fopen-opensi{fill:#3A352B;font-size:11px;font-style:italic}
.fopen-ax{stroke:#1F1A14;stroke-width:1.6}
.fopen-mid{stroke:#C4B898;stroke-width:1.2;stroke-dasharray:4 4}
.fopen-axt{fill:#1F1A14;font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:.04em}
.fopen-axty{fill:#1F1A14;font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:.04em}
.fopen-axend{fill:#3A352B;font-size:10.5px}
.fopen-end{text-anchor:end}
.fopen-dot circle{fill:#2E5959}
.fopen-wed{fill:#A63E1A}
.fopen-grp{fill:#1F1A14;font-size:13px;font-weight:700}
.fopen-grps{fill:#3A352B;font-size:10.5px}
.fopen-grpi{fill:#7C7843;font-size:10.5px;font-style:italic}
.fopen-qnote{fill:#7C7843;font-size:10.5px;font-style:italic}
.fopen-star{fill:#A63E1A;stroke:#1F1A14;stroke-width:1}
.fopen-mc{fill:#A63E1A;font-size:13px;font-weight:700;text-anchor:end}
.fopen-mcs{fill:#3A352B;font-size:10.5px;text-anchor:end}
.fopen-read{fill:#1F1A14;font-size:11px}
.fopen-src{fill:#3A352B;font-size:10.5px;font-style:italic}
.cswl-year{fill:#3A352B;font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:.08em}
.cswl-mo text{fill:#3A352B;font-size:11px;text-anchor:middle}
.cswl-grid{stroke:#1F1A14;stroke-width:1.4}
.cswl-mile{stroke:#2E5959;stroke-width:1.2;stroke-dasharray:3 3;opacity:.7}
.cswl-split{stroke:#7C7843;stroke-width:1.6;stroke-dasharray:6 4;opacity:.8}
.cswl-lane text{fill:#A63E1A;font-size:11px;font-weight:700}
.cswl-teal{fill:#2E5959}
.cswl-olive{fill:#7C7843}
.cswl-pl{fill:#F2EBD8;font-size:10px;font-weight:700}
.cswl-ps{fill:#EAE2CB;font-size:9.5px}
.cswl-edit{fill:#EAE2CB;stroke:#C99012;stroke-width:1.6}
.cswl-editl{fill:#1F1A14;font-size:10.5px}
.cswl-front{fill:#F2EBD8;stroke:#2E5959;stroke-width:1.6}
.cswl-frontl{fill:#1F1A14;font-size:10.5px}
.cswl-drum rect{fill:#EAE2CB;stroke:#A63E1A;stroke-width:1.4}
.cswl-dm{fill:#A63E1A;font-size:10px;font-weight:700}
.cswl-dt{fill:#1F1A14;font-size:9.5px}
.cswl-ann text{fill:#3A352B;font-size:11px}
.arcl-teal{fill:#2E5959}
.arcl-rule{stroke:#1F1A14;stroke-width:1.4}
.arcl-name{fill:#3A352B;font-size:13px}
.arcl-hint{fill:#7C7843;font-size:11px}
.arcl-arrow-named line,line.arcl-arrow-named{stroke:#7C7843;stroke-width:1.5;opacity:.9}
.arcl-arrow-cons line,line.arcl-arrow-cons{stroke:#7C7843;stroke-width:1.3;opacity:.7;stroke-dasharray:5 4}
.arcl-box rect{fill:#F2EBD8;stroke:#2E5959;stroke-width:1.6}
.arcl-pend rect{stroke:#C99012;stroke-dasharray:5 4}
.arcl-bt{fill:#1F1A14;font-size:16px;font-weight:700}
.arcl-bs{fill:#3A352B;font-size:11.5px}
.arcl-btag{fill:#A63E1A;font-size:11px;font-weight:700;letter-spacing:.04em}
.arcl-bt2{fill:#1F1A14;font-size:13px;font-weight:600}
.arcl-bs2{fill:#3A352B;font-size:11px;font-weight:400}
.arcl-bs3{fill:#8a6a10;font-size:11px}
.arcl-lg{fill:#3A352B;font-size:11px}
.arcl-lg-dash{fill:#F2EBD8;stroke:#C99012;stroke-width:1.6;stroke-dasharray:5 4}
.mony-kick{fill:#2E5959;font-size:12px;letter-spacing:.02em}
.mony-rung rect{fill:#1F1A14}
.mony-name{fill:#F2EBD8;font-size:15px;font-weight:600}
.mony-sub{fill:#EAE2CB;font-size:11px}
.mony-price{fill:#C99012;font-size:18px;font-weight:700;text-anchor:end}
.mony-core rect{fill:#1F1A14}
.mony-corekick{fill:#C99012;font-size:11px;letter-spacing:.12em}
.mony-corenum{fill:#F2EBD8;font-size:32px;font-weight:600;font-family:'Fraunces',Georgia,serif}
.mony-coresub{fill:#EAE2CB;font-size:12px}
.mony-corenote{fill:#EAE2CB;font-size:11px;text-anchor:end}
.mony-teal{fill:#2E5959}
.mony-olive{fill:#7C7843}
.mony-colsub{fill:#3A352B;font-size:11px;font-style:italic}
.mony-gift rect{fill:#F2EBD8;stroke:#2E5959;stroke-width:1.6;stroke-dasharray:5 4}
.mony-addon rect{fill:#F2EBD8;stroke:#7C7843;stroke-width:1.6;stroke-dasharray:5 4}
.mony-gname{fill:#1F1A14;font-size:13px}
.mony-gprice{fill:#A63E1A;font-size:14px;font-weight:700;text-anchor:end}
.mony-cpg rect{fill:#1F1A14}
.mony-cpgname{fill:#F2EBD8;font-size:13px}
.mony-cpgprice{fill:#C99012;font-size:14px;font-weight:700;text-anchor:end}
.mony-retbox{fill:#EAE2CB;stroke:#C4B898;stroke-width:1}
.mony-rettag{fill:#A63E1A}
.mony-rettagt{fill:#F2EBD8;font-size:10px;letter-spacing:.06em;text-anchor:middle}
.mony-rettxt{fill:#3A352B;font-size:12px}
.mony-lg{fill:#3A352B;font-size:11px}
.mony-lg-solid{fill:#1F1A14}
.mony-lg-dash{fill:#F2EBD8;stroke:#2E5959;stroke-width:1.6;stroke-dasharray:5 4}

/* ================================================================
   HUB DESTINATION CARDS (owner 2026-07-16) — the eight stops on the
   montclair hub (#the-map > ol) presented as launcher-style cards:
   paper-2 tile, rule border, rust left edge, mono number chip,
   Fraunces title, mono audience tag, Spectral description.
   ================================================================ */
#the-map>ol{list-style:none;padding:0;margin:18px 0 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;justify-content:start}
#the-map>ol>li{position:relative;display:flex;gap:14px;height:100%;margin:0;padding:18px 20px;background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--rust);transition:transform .15s ease,border-color .15s ease,background .15s ease}
#the-map>ol>li:hover{background:#FFFDF6;border-left-color:var(--ink);transform:translateY(-2px)}
#the-map>ol>li>span:first-child{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--rust);padding-top:5px}
#the-map>ol>li>div{display:flex;flex-direction:column;gap:6px}
#the-map>ol>li>div>a{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;line-height:1.18;color:var(--rust);text-decoration:none;border-bottom:none}
#the-map>ol>li>div>a:visited{color:var(--rust)}
/* the generic a:hover paints background:var(--rust); with the card title pinned rust
   by the ID rule above that made rust-on-rust = invisible titles. The card's own
   li:hover lift is the hover affordance — the title keeps its color, no pill. */
#the-map>ol>li>div>a:hover{color:var(--rust);background:none}
#the-map>ol>li>div>a::after{content:"";position:absolute;inset:0}
#the-map>ol>li>div>a:focus-visible::after{outline:3px solid var(--rust);outline-offset:3px}
#the-map>ol>li>div>a+span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
#the-map>ol>li>div>span:last-child{font-family:'Spectral',Georgia,serif;font-size:14px;line-height:1.45;color:var(--ink-soft)}
@media (max-width:640px){#the-map>ol{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#the-map>ol>li{transition:none}#the-map>ol>li:hover{transform:none}}

/* Tighter seam under the sticky nav (owner 2026-07-16): the first section after
   .mcnav loses the doubled gap (52px section padding + 34px h2 margin -> 24px). */
#portal-body>div>section:first-child{padding-top:24px}
#portal-body>div>section:first-child h2:first-of-type{margin-top:0}

/* ================================================================
   HUB BELOW-THE-CARDS RESTORATION (owner UX QA 2026-07-16).
   The one-CSS strip removed the static hub's classes and inline
   calendar script; these rules re-dress the classless skeleton by
   structure/id, and style the DOM hub-cal.js regenerates (which
   carries its original classes). Design lifted verbatim from the
   pre-migration hub.
   ================================================================ */

/* -- the three "not a chapter" utility rows (#the-map direct divs) -- */
#the-map>div{margin:22px 0 0;padding:16px 20px;background:var(--paper-2);border-left:3px solid var(--teal);font-size:17px}
#the-map>div>span:first-child{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);display:block;margin-bottom:4px}
#the-map>div a{color:var(--rust)}
/* same specificity trap as the card titles: pinned rust color + generic hover's rust
   background = invisible. Restore the standard portal pill (paper on rust) on hover. */
#the-map>div a:hover{color:var(--paper);background:var(--rust)}

/* -- marketing-calendar drawer: teal accent + kicker/standfirst summary -- */
#marketing-calendar{border-left:3px solid var(--teal);border-radius:0 6px 6px 0;margin:22px 0 0}
#marketing-calendar>summary>span>span:first-child{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);display:block;margin-bottom:4px}
#marketing-calendar>summary>span>span:last-child{font-size:15px;color:var(--ink-soft);display:block}
#marketing-calendar>summary>span{flex:1 1 auto;min-width:0}
#marketing-calendar>div{padding:2px 20px 20px}

/* calendar chrome (skeleton ids/structure) */
#marketing-calendar>div>div:nth-of-type(1){display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 10px;flex-wrap:wrap}
#cal-label{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin:0;min-width:200px;text-align:center}
#cal-prev,#cal-next{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);padding:6px 12px;cursor:pointer;border-radius:2px}
#cal-prev:hover,#cal-next:hover{background:var(--ink);color:var(--paper)}
#cal-prev[disabled],#cal-next[disabled]{opacity:.35;cursor:default}
#cal-prev[disabled]:hover,#cal-next[disabled]:hover{background:var(--paper);color:var(--ink)}
#marketing-calendar>div>ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;padding:0;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
#marketing-calendar>div>ul>li>span:first-child{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px;border-radius:1px}
#marketing-calendar>div>ul>li:nth-child(1)>span:first-child{background:#2E5959}
#marketing-calendar>div>ul>li:nth-child(2)>span:first-child{background:#A63E1A}
#marketing-calendar>div>ul>li:nth-child(3)>span:first-child{background:#7C7843}
#marketing-calendar>div>ul>li:nth-child(4)>span:first-child{background:#C99012}
#marketing-calendar>div>ul>li:nth-child(5)>span:first-child{background:#7A2E14}
#marketing-calendar>div>ul>li:nth-child(6)>span:first-child{background:#1F1A14}
#marketing-calendar>div>div:nth-of-type(2){overflow-x:auto;width:min(1240px,96vw);position:relative;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #E1DFDD;border-radius:4px;box-shadow:0 1.6px 3.6px rgba(0,0,0,.1),0 .3px .9px rgba(0,0,0,.07);margin:4px 0 2px}
#marketing-calendar>div>div:nth-of-type(1),#marketing-calendar>div>ul{width:min(1240px,96vw);position:relative;left:50%;transform:translateX(-50%)}
#cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:980px;background:#fff;border:none}
#cal-grid>.cal-cell:nth-child(7n){border-right:none}
#marketing-calendar>div>p:last-of-type{font-size:13.5px;color:var(--ink-soft);font-style:italic;margin:14px 0 0;max-width:72ch}

/* calendar grid + chips (DOM generated by hub-cal.js, original classes) */
.cal-dow{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#605E5C;padding:10px 8px 8px;border-bottom:1px solid #E1DFDD;background:#fff;text-align:center}
.cal-cell{min-height:118px;border-right:1px solid #EDEBE9;border-bottom:1px solid #EDEBE9;padding:4px 6px 8px;background:#fff}
.cal-cell .dn{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#3B3A39;display:block;text-align:right;padding:2px 4px 1px}
.cal-cell.out{background:#FAF9F8}
.cal-cell.out .dn{color:#605E5C}
.cal-cell.today{background:#EFF6FC}
.cal-cell.today .dn{color:#0F6CBD;font-weight:700}
.ci{display:flex;align-items:baseline;gap:4px;width:100%;min-height:24px;text-align:left;font-family:'Spectral',Georgia,serif;font-size:11.5px;line-height:1.3;color:#252423;background:#fff;border:1px solid #E1DFDD;border-left:3px solid var(--teal);border-radius:3px;padding:4px 6px;margin:3px 0 0;cursor:pointer}
.ci .cit{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci .cn{flex:none;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#605E5C;background:#F3F2F1;border:1px solid #E1DFDD;border-radius:8px;padding:0 5px;line-height:14px}
.ci:hover{background:#F3F2F1;border-left-width:5px}
.ci b{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.04em;font-weight:700;margin-right:4px;flex:none;white-space:nowrap}
.ci.k-aisle{border-left-color:var(--teal)}.ci.k-aisle b{color:var(--teal)}
.ci.k-edit{border-left-color:var(--rust)}.ci.k-edit b{color:var(--rust)}
.ci.k-email{border-left-color:var(--olive)}.ci.k-email b{color:#5C5A2F}
.ci.k-social{border-left-color:var(--mustard)}.ci.k-social b{color:#7A5407}
.ci.k-show{border-left-color:#7A2E14}.ci.k-show b{color:#7A2E14}
.ci.k-phase{border-left-color:var(--ink)}.ci.k-phase b{color:var(--ink)}
.cc-row{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:#fff;border:1px solid #E1DFDD;border-left:3px solid var(--rule);border-radius:3px;padding:6px 8px;margin:0 0 4px;cursor:pointer;font-family:'Spectral',Georgia,serif;font-size:14px;color:#252423;line-height:1.3}
.cc-row:hover{background:#F3F2F1}
.cc-row.cur{background:#EFF6FC;cursor:default}
.cc-row .ccd{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#605E5C;white-space:nowrap;flex:none;min-width:66px}
.cc-row b{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.04em;flex:none}
.cc-row .cct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-row.k-aisle{border-left-color:var(--teal)}
.cc-row.k-edit{border-left-color:var(--rust)}
.cc-row.k-email{border-left-color:var(--olive)}
.cc-row.k-social{border-left-color:var(--mustard)}
.cc-row.k-show{border-left-color:#7A2E14}
.cc-row.k-phase{border-left-color:var(--ink)}
.mcal-camp{display:none;border-top:1px solid var(--rule);padding-top:12px;margin:0 0 16px}
.mcal-camp.on{display:block}
.mcal-camp .cchead{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}

/* item-detail modal (skeleton ids; hidden until hub-cal.js opens it) */
#mcal-overlay{position:fixed;inset:0;background:rgba(31,26,20,.55);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
#mcal-overlay.open{display:flex}
#mcal-overlay>div{background:var(--paper);border:2px solid var(--ink);max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:26px 28px;box-shadow:6px 6px 0 rgba(31,26,20,.25);position:relative}
#mcal-close{position:absolute;top:8px;right:10px;background:none;border:none;font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--ink-soft);cursor:pointer;padding:6px 8px}
#mcal-close:hover{color:var(--rust)}
#mcal-kind{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:6px}
#mcal-overlay h4{font-family:'Fraunces',serif;font-size:23px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em;color:var(--ink);text-transform:none;line-height:1.15}
#mcal-when{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--rust);margin:0 0 12px}
#mcal-desc{font-size:16px;margin:0 0 12px}
#mcal-prov{font-size:13.5px;font-style:italic;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:10px;margin:0 0 16px}
#mcal-go{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--rust);color:var(--paper);padding:11px 16px;text-decoration:none;border-radius:2px}
#mcal-go:hover{background:var(--ink);color:var(--paper)}

/* -- full-index drawers: restore the idx summary + list vocabulary -- */
#the-full-index>details>summary>span:nth-of-type(1){font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--rust);letter-spacing:.1em;flex:none}
#the-full-index>details>summary>span:nth-of-type(2){font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--ink);flex:none;line-height:1.1}
#the-full-index>details>summary>span:nth-of-type(3){font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--teal);border:1px solid var(--rule);border-radius:9px;padding:1px 8px;flex:none;align-self:center;white-space:nowrap}
#the-full-index>details>summary>span:nth-of-type(4){font-size:13.5px;color:var(--ink-soft);font-style:italic;flex:1 1 auto;min-width:0;line-height:1.35;align-self:center}
#idx-07>summary>span:nth-of-type(1){color:var(--teal)}
#idx-08{opacity:.88}
#idx-08>summary>span:nth-of-type(1){color:var(--ink-soft)}
#the-full-index>details>div>a:first-child{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--rust);text-decoration:none;padding:8px 14px;border-radius:2px;margin:2px 0 14px;border-bottom:none}
#the-full-index>details>div>a:first-child:hover{background:var(--ink);color:var(--paper)}
#the-full-index details ul{list-style:none;margin:0;padding:0}
#the-full-index details ul>li{padding:9px 0;border-bottom:1px solid var(--rule);line-height:1.35}
#the-full-index details ul>li:last-child{border-bottom:none}
#the-full-index details ul>li>a{font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;color:var(--rust);text-decoration:none;border-bottom:1.5px dotted var(--rust)}
#the-full-index details ul>li>a:hover{background:var(--rust);color:var(--paper);border-bottom-color:transparent}
#the-full-index details ul>li>a+span{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}
#the-full-index details details{margin:10px 0 2px;border-left:2px solid var(--teal);background:rgba(46,89,89,.045)}

@media (max-width:640px){
  #cal-label{font-size:20px;min-width:150px}
  #the-full-index>details>summary>span:nth-of-type(4){flex-basis:100%;order:5}
}

/* Wide-SVG scroll wrappers (mobile): the strip removed the inline overflow-x:auto
   on figure>div, so 820px+ diagrams overflowed the body on phones. Portal-wide fix. */
figure>div{overflow-x:auto;max-width:100%}

/* ================================================================
   INLINED DOCUMENTS (owner 2026-07-16: all content reads inline, no
   iframes). The server expands <div data-src> accordion slots into
   the child page's body wrapped in .doc-inline; the slot div itself
   survives edit round-trips (the editor empties [data-doc-loaded]).
   ================================================================ */
details.doc-inline{border-left:3px solid var(--teal)}
details.doc-inline>summary>span:not(.read-time){font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.doc-inline h2{font-size:26px;margin:26px 0 6px}
.doc-inline h3{font-size:20px}
.doc-inline .lede{font-size:17px}
.doc-inline .doc-inline{border-left-color:var(--rule)}
section.doc-restricted{margin:12px 0 4px;border-left:2px solid var(--teal);padding:0 0 2px 18px}
.doc-restricted p,.doc-missing{font-size:14px;font-style:italic;color:var(--ink-soft)}

/* ================================================================
   HOMEPAGE PREVIEW PLATE (owner 2026-07-16: the accepted homepage
   core copy "needs css that stands out, and is different"). Scoped
   to the aria-labelled preview section on montclair/the-homepage —
   a dark plate mocking how the copy sits on the public homepage.
   Deliberately unlike all portal chrome: the only dark band anywhere.
   Structural selectors only, so the accepted copy stays byte-exact.
   ================================================================ */
section[aria-label="Homepage preview"]{
  background:var(--ink);color:var(--paper);
  background-image:
    radial-gradient(circle at 78% 8%,rgba(201,144,18,.16) 0%,transparent 44%),
    radial-gradient(circle at 8% 96%,rgba(46,89,89,.30) 0%,transparent 52%);
  border-radius:4px;box-shadow:6px 6px 0 rgba(31,26,20,.22);
  padding:34px 38px 38px;margin:30px 0 34px;clear:both;
}
/* the "Preview:" note becomes a mono kicker strap */
section[aria-label="Homepage preview"]>p:first-child{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mustard);margin:0 0 26px;padding-bottom:12px;border-bottom:1px solid rgba(242,235,216,.18)}
/* hero */
section[aria-label="Homepage preview"] h2{font-family:'Fraunces',serif;font-size:clamp(30px,4.6vw,42px);font-weight:var(--f-display);line-height:1.04;letter-spacing:-.02em;color:var(--paper);margin:0 0 14px}
section[aria-label="Homepage preview"]>div:nth-of-type(1)>p{font-family:'Fraunces',serif;font-style:italic;font-weight:var(--f-editorial);font-size:19.5px;line-height:1.45;color:var(--paper-2);max-width:560px;margin:0 0 8px}
/* three pillars */
section[aria-label="Homepage preview"]>div:nth-of-type(2){display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:30px 0 6px;padding-top:22px;border-top:1px solid rgba(242,235,216,.18)}
section[aria-label="Homepage preview"]>div:nth-of-type(2)>div>p:first-child{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mustard);margin:0 0 10px}
section[aria-label="Homepage preview"]>div:nth-of-type(2) h3{font-family:'Fraunces',serif;font-size:21px;font-weight:var(--f-display);line-height:1.15;color:var(--paper);margin:0 0 10px}
section[aria-label="Homepage preview"]>div:nth-of-type(2)>div>p:last-child{font-size:15px;line-height:1.6;color:rgba(242,235,216,.78);margin:0}
/* CTA band */
section[aria-label="Homepage preview"]>div:last-child{margin-top:30px;padding-top:26px;border-top:1px solid rgba(242,235,216,.18);text-align:center}
section[aria-label="Homepage preview"]>div:last-child a,
section[aria-label="Homepage preview"]>div:last-child a:visited{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);background:var(--rust);padding:14px 34px;border-radius:2px;text-decoration:none;border-bottom:none}
section[aria-label="Homepage preview"]>div:last-child a:hover,
section[aria-label="Homepage preview"]>div:last-child a:visited:hover{background:var(--rust-soft);color:var(--paper)}
section[aria-label="Homepage preview"]>div:last-child p{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,235,216,.62);margin:16px 0 0}
/* the deliberate [VENUE NAME] token */
section[aria-label="Homepage preview"] span[title]{border-bottom:1px dashed var(--mustard);cursor:help}
@media(max-width:720px){
  section[aria-label="Homepage preview"]{padding:24px 20px 28px}
  section[aria-label="Homepage preview"]>div:nth-of-type(2){grid-template-columns:1fr;gap:20px}
}

/* ================================================================
   EXTERNAL VIDEO EMBEDS (owner 2026-07-16: re-embed yt/tiktok/ig).
   Restores the original montclair .video-embed vocabulary the
   one-CSS migration dropped from the allowlist. The 16:9 .frame and
   9:16 .frame-vert boxes size the players; iframes themselves are
   byte-preserved by the edit sanitizer (splice-back), never
   client-editable. .clip-cards rows several embeds side by side.
   ================================================================ */
figure.video-embed{margin:20px 0;clear:both}
.video-embed .frame{position:relative;aspect-ratio:16/9;background:#000;border:1.5px solid var(--rule);border-radius:8px;overflow:hidden}
.video-embed .frame-vert{position:relative;aspect-ratio:9/16;max-width:300px;background:#000;border:1.5px solid var(--rule);border-radius:8px;overflow:hidden}
.video-embed .frame>iframe,.video-embed .frame-vert>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
figure.video-embed>figcaption{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:11px;line-height:1.5;letter-spacing:.02em;color:var(--ink-soft);margin-top:8px;padding-left:0;border-left:none}
.clip-cards{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0;clear:both}
.clip-cards figure.video-embed{flex:1 1 220px;max-width:300px;margin:0}

/* QA-army fixes 2026-07-16: (1) figure.video-grid (the-headliner's two-up clip
   row) lost its class in the migration, so the generic right-float figure rule
   shrank the players to ~156px thumbnails — restore it as an in-flow grid and
   neutralise the generic float on its children. (2) Bare <a><img width=480>
   cards and fixed-width tables overflowed 390px viewports — images may never
   exceed their container, and tables gain a scroll on small screens. */
figure.video-grid{float:none;width:auto;margin:22px 0;padding:0;clear:both;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
figure.video-grid figure.video-embed{float:none;width:auto;margin:0;clear:none}
main img{max-width:100%;height:auto}
@media(max-width:720px){main table{display:block;overflow-x:auto;max-width:100%}}

/* ================================================================
   WEB-APP INTAKE DEMO, phone-framed (owner 2026-07-16: "display the
   web app in a mobile view"). The interactive intake widget
   (#webapp-demo [data-app], driven by webapp-demo.js) renders inside
   a device frame that floats beside the prose on desktop and goes
   full-width on a real phone. Stored shell classes only; the
   JS-rendered screen classes below are runtime-generated.
   ================================================================ */
.phone{position:relative;float:right;width:min(46%,340px);margin:8px 0 22px 32px;background:#17140f;border-radius:38px;padding:26px 12px 14px;box-shadow:0 20px 44px -20px rgba(31,26,20,.6),inset 0 0 0 2px #322c24;clear:right}
.phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:88px;height:5px;border-radius:3px;background:#000;opacity:.5}
.phone .app-demo{margin:0;border:0;border-radius:26px;overflow:hidden;background:var(--paper)}
@media(max-width:720px){.phone{float:none;width:100%;max-width:360px;margin:18px auto;padding:22px 10px 12px}}

.app-demo{border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden;margin:8px 0 4px}
.app-bar{display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);padding:9px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em}
.app-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--rust-soft);flex:0 0 auto}
.app-bar .demo-tag{margin-left:auto;border:1px solid var(--mustard);color:var(--mustard);padding:2px 7px;border-radius:3px;font-size:9.5px;text-transform:uppercase;letter-spacing:.12em}
.app-steps{display:flex;border-bottom:1px solid var(--rule)}
.app-steps .st{flex:1;text-align:center;padding:8px 4px;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-right:1px solid var(--rule);background:var(--paper-2)}
.app-steps .st:last-child{border-right:0}
.app-steps .st.active{background:var(--rust);color:var(--paper);font-weight:700}
.app-steps .st.done{color:var(--teal)}
.app-screen{padding:18px 18px 6px;min-height:196px}
.app-screen h5{font-family:'Fraunces',serif;font-size:19px;margin:0 0 4px;color:var(--ink)}
.app-screen .hint{font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.5;color:var(--ink-soft);letter-spacing:.03em;margin:0 0 14px}
.app-screen .fld{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin:0 0 5px}
.app-row{display:flex;gap:8px;margin:0 0 12px}
.app-input{flex:1;font-family:'Spectral',serif;font-size:15px;padding:9px 11px;border:1.5px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink)}
.app-input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.app-btn{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:9px 16px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:4px;cursor:pointer}
.app-btn:hover{background:var(--rust);border-color:var(--rust)}
.app-btn.ghost{background:transparent;color:var(--ink)}
.app-btn.ghost:hover{background:var(--paper-2);color:var(--rust)}
.app-btn:disabled{opacity:.38;cursor:not-allowed}
.app-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 6px;list-style:none;padding:0}
.app-chips li{background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:5px 8px 5px 12px;font-size:13.5px;display:flex;align-items:center;gap:7px}
.app-chips li button{border:0;background:none;color:var(--rust);cursor:pointer;font-size:15px;line-height:1;padding:0}
.app-drop{border:1.5px dashed var(--rule);border-radius:6px;padding:14px;text-align:center;background:var(--paper-2);cursor:pointer;margin:0 0 11px}
.app-drop:hover{border-color:var(--teal)}
.app-drop .big{font-family:'Fraunces',serif;font-size:15px;color:var(--ink)}
.app-drop .cnt{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--teal);margin-top:4px}
.app-consent{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin:6px 0 4px;line-height:1.45}
.app-err{color:var(--rust);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;margin:6px 0 0}
.app-guests{display:grid;grid-template-columns:1fr;gap:8px;margin:4px 0 10px}
.app-guest{border:1.5px solid var(--rule);border-radius:5px;padding:9px 11px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;background:var(--paper)}
.app-guest .price{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);white-space:nowrap}
.app-guest.on{border-color:var(--rust);background:rgba(166,62,26,.06)}
.app-guest.on .price{color:var(--rust);font-weight:700}
.app-guest:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.app-total{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);letter-spacing:.03em;margin:4px 0 10px}
.app-total b{color:var(--rust)}
.app-summary{font-size:14px;margin:0 0 12px}
.app-summary dt{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-top:9px}
.app-summary dd{margin:2px 0 0}
.app-nav{display:flex;justify-content:space-between;gap:10px;padding:12px 18px 16px;border-top:1px solid var(--rule)}
.app-ok{background:rgba(46,89,89,.08);border-left:3px solid var(--teal);padding:14px 16px;font-size:14.5px;border-radius:3px;line-height:1.5}
.app-ok b{color:var(--teal)}

/* Web-app demo: adopt the Homepage-preview plate's FRAMING (hard offset-shadow
   card + ink border) while staying light, so the two pitch panels read as a
   matched set (owner 2026-07-16: "same look/feel as the homepage, just the
   framing"). Scoped to the demo accordion only. */
#webapp-demo{border:1.5px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 rgba(31,26,20,.2)}
#webapp-demo[open]{border-color:var(--ink);box-shadow:6px 6px 0 rgba(31,26,20,.2)}
#webapp-demo>summary{background:var(--paper-2)}
#webapp-demo[open]>summary{border-bottom:1px solid var(--rule)}

/* Archive retired-docs scaffold lists: put each description on its own line
   under its link (QA 2026-07-16: <a></a><span> rendered run-together). Mirrors
   the #the-full-index a+span treatment. */
#arc-retired ul>li>a+span{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}

/* Long unbroken link text (raw source URLs) must wrap instead of widening the
   page on phones (QA 2026-07-16: the-numbers 390px overflow). No effect on
   links that already fit. */
main a{overflow-wrap:anywhere}