/* ============================================================
   site.css — website chrome for the Media Strategy site.
   Only styles the home page, the top navigation bar, and the
   footer prev/next. Slides keep using deck-design-rules CSS.
   Palette mirrors the deck: gold=King, blue-green=Law,
   oxblood=Subversion, green=Restore.
   ============================================================ */
:root{
  --bg: #f2ede6; /* parchment, but dirtier / less bridal */
  --bg2: #FBFAF7; /* parchment, but dirtier / less bridal */
  --bg3: #F3E9DA;
  --ink: #11100E; /* near-black ink */
  --ink2: #32302C;
  --accent: #B8860B; /* KING bronze */
  --accent2: #D39C21; /* hard gold highlight */
  --paper: #f2f0ed; /* warm document card */
  --line: #A99A87; /* stronger rule line */
  --chrome: #080806; /* crisis / intelligence black */
  --muted: #5E554B; /* readable muted text */
  --good: #1E6B3A; /* NARRATIVE UP / repair */
  --good-dark: #3F5A35;
  --bad: #8B1E1E; /* SUBVERSION burgundy */
  --sub-dark: #5C1E1A;
  --warn: #E67E22; /* WARNING / drift amber */
  --gold: #ffd24a; /* highlight gold */
  --law: #0d114c; /* LAW slate-blue */
  --law2: #4fadff; /* LAW electric teal */
  --lawbg: #D9F0F2; /* LAW light field */
  --king: #d99f0d; /* KING bronze */
  --kingdark: #592d00; /* KING dark bronze */
  --kingbg: #f7edd2; /* KING light field */
  --erase: #34444F; /* ERASE grey-blue */
  --bg-color: #0f172a;
  --grey-bg: #1e293b;
  --border-grey: #334155;
  --erase-muted: #94a3b8;
  --redbg: #F6DADA; /* subversion field */
  --greenbg: #E7EFE1; /* repair field */
  --erase-light: #687782;
	--mint:#5fe3c1; --mint-soft:#9becdd; --coral:#eb5636; --coral-soft:#f5a295;
    --sun:#ffc42e; --sun-soft:#ffd968; --peri:#5f7fe8; --peri-soft:#aebdf2;
    --lilac:#f3d4f8; --magenta:#d24fd4; --plum:#160a24; --ink3:#101418; --cream:#f6efe5;
}

/* ============================================================
   DESIGN SYSTEM UTILITIES & COMPONENTS
   Extracted from 1,960+ inline styles for responsive scaling
   ============================================================ */
.u-text-hero {
  font-size: clamp(32px, 5vw, 66px) !important;
  line-height: 1.15;
}
.u-text-sub {
  font-size: clamp(20px, 3vw, 30px) !important;
  line-height: 1.35;
}
.u-mt-10 { margin-top: 10px !important; }
.u-mt-14 { margin-top: 14px !important; }
.u-mt-18 { margin-top: 18px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mt-26 { margin-top: 26px !important; }
.u-mt-28 { margin-top: 28px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-34 { margin-top: 34px !important; }
.u-mt-42 { margin-top: 42px !important; }
.u-max-1120 { max-width: 1120px !important; }
.u-max-1080 { max-width: 1080px !important; }
.u-max-1040 { max-width: 1040px !important; }
.u-max-1000 { max-width: 1000px !important; }
.u-max-900  { max-width: 900px !important; }

/* The recurring watermark component */
.rbs-mark {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 600;
  pointer-events: none;
  font: 10px/1 'SF Mono', Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffd24a;
  background: rgba(8, 8, 6, .72);
  padding: 5px 10px;
  border-radius: 999px;
}

/* Mobile Resets for Grids */
@media (max-width: 768px) {
  .grid3, .grid2, .cols2, .bigrows, .bigrow {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .slide .hero, .slide .center {
    padding: 0 16px !important;
  }
  .bigrows .head {
    display: none !important; /* Hide table headers on mobile */
  }
  .bigrow {
    border: 1px solid var(--border-grey);
    padding: 16px !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
  }
}


/* OS machine mobile/tablet fix: the dictionary visual is built as a
   desktop overlay, so release its two-column parent and absolute grid
   before it can overflow narrower screens. */
@media(max-width:820px){
  .site-page .slide .visual-pair{
    grid-template-columns:1fr !important;
    gap:18px !important;
    align-items:stretch !important;
  }
  .site-page .slide .built-visual.os-machine{
    min-height:0 !important;
    padding:16px !important;
    overflow:visible !important;
  }
  .site-page .slide .os-machine .viz-label,
  .site-page .slide .os-machine .os-grid,
	.strategy .ring-item,
	.strategy .ring-core,
  .site-page .slide .os-machine .os-core{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
  }
  .site-page .slide .os-machine .viz-label{
    margin-bottom:12px !important;
  }
  .site-page .slide .os-machine .os-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    gap:10px !important;
  }
  .site-page .slide .os-machine .os-node,
  .site-page .slide .os-machine .os-core{
    min-height:0 !important;
    padding:14px 12px !important;
    line-height:1.15 !important;
  }
  .site-page .slide .os-machine .os-core{
    margin-top:10px !important;
  }
}
.page-modes-tabs-wrapper {
  margin: 48px 0;
  max-width: 900px;
}
.page-modes-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.page-tab {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  padding: 0 0 16px 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease;
}
.page-tab.active {
  color: var(--hl);
  border-bottom: 1px solid var(--hl);
}
.page-tab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.8);
}
.page-mode-panel[hidden] {
  display: none !important;
}
.page-mode-panel {
  animation: modeFadeIn 0.3s ease;
}
@keyframes modeFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---------- shared reset for site chrome ---------- */
.site-home,.site-page{
  margin:0;
  min-height:100vh;
  max-width:100vw;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html:has(> body.site-home){background:#0b0a08;}
body.site-home{overflow-x:hidden;}
.site-home *,.site-page .sitebar *,.site-page .pagenav *{box-sizing:border-box;}

/* ============================================================
   TOP NAV BAR (article pages)
   ============================================================ */
/* UX-DESIGNER CHANGE 2026-07-08: keep the title inline with the
   chapters menu, matching the original sitebar placement. */
.sitebar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:22px;
  width:100%;
  max-width:100vw;
  overflow:hidden;
  padding:10px 22px;
  background:rgba(10,9,8,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-family:"SF Mono",Menlo,monospace;
}
.sitebar .brand{
  flex:0 0 auto;
  color:var(--gold); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:13px; text-decoration:none;
  white-space:nowrap;
}
.sitebar .chapters{
  flex:1 1 auto; min-width:0;
  max-width:100%;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.sitebar .chapters::-webkit-scrollbar{display:none;}
.sitebar .chapters a{
  color:#cfc7ba; text-decoration:none; font-size:11.5px;
  letter-spacing:.03em; padding:6px 10px; border-radius:6px;
  white-space:nowrap; transition:.15s;
}
.sitebar .chapters a:hover{color:#fff; background:rgba(255,255,255,.06);}
.sitebar .chapters a.on{
  color:var(--bg); background:var(--gold); font-weight:600;
}
/* chapter number chip inside each nav link */
.sitebar .chapters a .n{
  color:var(--muted); font-size:10px; letter-spacing:.08em;
  margin-right:6px; vertical-align:1px;
}
.sitebar .chapters a.on .n{color:var(--ink2);}
/* interludes = the between-article slide runs; shown as quieter, italic */
.sitebar .chapters a.interlude,.sitebar .chapters a.appendix{font-style:italic; color:#9c9384;}
.sitebar .chapters a.interlude.on,.sitebar .chapters a.appendix.on{color:var(--bg); font-style:italic;}
.sitebar .chapters a.policy{
  margin-left:8px;
  border:1px solid rgba(79,173,255,.35);
  color:#d7ecff;
  background:rgba(79,173,255,.08);
}
.sitebar .chapters a.policy:hover{border-color:rgba(79,173,255,.7); background:rgba(79,173,255,.15);}
.sitebar .chapters a.policy.on{color:#07121d; background:var(--law2); border-color:var(--law2); font-weight:700;}
.sitebar .chapters a.policy .n{color:#9bd3ff;}
.sitebar .chapters a.policy.on .n{color:#0d3150;}
/* appendix = reference material, marked distinctly */
.sitebar .chapters a.appendix::before{content:"§ "; color:var(--law2);}

/* keep the deck flow readable inside the page */
.deckflow{display:block;}

/* ============================================================
   FOOTER PREV / NEXT
   ============================================================ */
.pagenav{
  display:flex; justify-content:space-between; gap:16px;
  padding:26px 22px 60px;
  background:var(--ink); border-top:1px solid var(--line);
  font-family:"SF Mono",Menlo,monospace;
}
.pagenav .nv{
  color:#e8e2d8; text-decoration:none; font-size:14px;
  padding:14px 20px; border:1px solid var(--line); border-radius:10px;
  max-width:46%; transition:.15s; background:rgba(255,255,255,.02);
}
.pagenav .nv:hover{border-color:var(--gold); color:#fff;}
.pagenav .next{text-align:right; margin-left:auto;}

.story-bridge{
  max-width:1180px; margin:0 auto; padding:24px 28px 0;
  font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif;
}
.story-bridge{
  display:grid; grid-template-columns:minmax(190px,.62fr) minmax(260px,1fr);
  gap:10px 22px; align-items:start;
  background:var(--ink); color:#f6efe3;
  border-top:1px solid rgba(255,210,74,.55);
  border-bottom:1px solid rgba(169,154,135,.38);
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
.story-bridge-k{
  grid-row:span 3;
  font-family:"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  padding-top:4px;
}
.story-bridge strong{
  font-family:Georgia,"Times New Roman",serif; font-size:28px;
  line-height:1.08; font-weight:700;
}
.story-bridge p{
  margin:0; max-width:760px; color:#cfc7ba; font-size:16px; line-height:1.5;
}
.story-bridge-action{
  font-family:"SF Mono",Menlo,monospace; font-size:13px;
  letter-spacing:.05em; color:#f8f0e4;
	margin-bottom: 12px;
}

/* ============================================================
   HOME PAGE
   ============================================================ */
/* UX-DESIGNER CHANGE 2026-07-07: the index carries the same chapters
   menu as the article pages. The KGB bar and the menu ride together
   in one sticky header stack: thesis bar, then title, then menu. */
.index-top{position:sticky; top:0; z-index:1000;}
.index-top .kgb-bar,.index-top .sitebar{position:static;}

/* UX-DESIGNER CHANGE 2026-07-07: static thesis bar — the KGB line
   stays pinned to the top of the index while everything scrolls. */
.kgb-bar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  padding:12px 22px; text-align:center;
  background:rgba(8,8,6,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,210,74,.5);
  font-family:"SF Mono",Menlo,monospace;
}
.kgb-bar .kgb-bar-k{
  color:var(--gold); font-weight:900; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.kgb-bar .kgb-bar-sep{color:var(--muted);}
.kgb-bar .kgb-bar-t{
  color:#f5eee2; font-size:12.5px; letter-spacing:.09em;
  font-weight:700;
}

/* The same line carried in the hero at headline weight. */
.hero-thesis{
  margin-bottom: 6px; max-width:720px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,3vw,31px); line-height:1.18;
  color:#f6efe3; font-weight:700;
}
.hero-thesis .kgb{color:var(--warn);}

.site-home{
  background:
    radial-gradient( rgba(6,8,8,0.7) 10%, rgba(6,8,8,1) 90%),
    url("deck-assets/img/kipur.jpg") center top / 100%  auto no-repeat,
    #0b0a08;
  color:var(--paper); min-height:100vh;
  font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif;

}

.mission-header{
  position:relative;
  margin:0 auto;
  padding:clamp(46px,7vw,88px) clamp(28px,4vw,84px) clamp(34px,5vw,64px);
  color:#fbfaf7;
	  background:linear-gradient(145deg, rgba(8,8,6,1) 10%,  rgba(8,8,6,0) 65%) padding-box, 
    url("deck-assets/bg/dress torch.png") right top / cover  no-repeat,
    linear-gradient(110deg,var(--king)  , rgba(217, 159, 13,0) ) border-box;

	  border-left:12px solid transparent;
}
.mission-header::before{
  content:"";
  position:absolute;
  left:clamp(28px,4vw,84px);
  top:clamp(32px,5vw,58px);
  width:76px;
  height:6px;
  background:var(--gold);
}
.mission-kicker{
  margin:0 0 18px;
  padding-top:22px;
  font-family:"SF Mono",Menlo,monospace;
  font-size:13px;
  line-height:1.35;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:900;
}
.mission-header h1{
  max-width:920px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,8vw,96px);
  line-height:.98;
  letter-spacing:0;
  font-style:italic;
  color:#fbfaf7;
}
.mission-copy{
  max-width:860px;
  margin:24px 0 0;
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.38;
  color:#d8cfc0;
  font-weight:650;
}
.mission-charge{
  min-width:0;
  margin-top:30px;
  max-width:760px;

  padding:22px 28px 20px;
}
.mission-charge-call{
  margin:0 0 16px;
  font-family:"SF Mono",Menlo,monospace;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:800;
}
.mission-charge-hit{
  margin:0 0 18px;
  font-family:  'Handlee', cursive, Georgia, "Montserrat", "Acumin Pro", serif;
  font-weight: 200;
  font-size:clamp(32px,4.1vw,52px);
  line-height:1.02;
  letter-spacing:-.01em;
  color:#fbfaf7;
}
.mission-charge-hit .gold{color:var(--gold);}
.mission-charge-line{
  margin:0;
  font-size:18px;
  line-height:1.45;
  color:#d8cfc0;
  overflow-wrap:anywhere;
}
.mission-charge-line + .mission-charge-line{margin-top:9px;}
.mission-charge-line strong{color:#f6efe3;}
.mission-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:28px;
  padding:12px 16px;
  border-radius:8px;
  background:var(--gold);
  border:1px solid var(--gold);
  color:#171006;
  text-decoration:none;
  font-family:"SF Mono",Menlo,monospace;
  font-size:13px;
  letter-spacing:.04em;
  font-weight:800;
  transition:transform .16s, background .16s;
}
.mission-link:hover{transform:translateY(-2px); background:#ffe08a;}

.covenant-quote{
 padding:34px clamp(28px,4vw,84px) 12px;
 color:#f6efe3;
 border-top:1px solid rgba(255,210,74,.26);
}
.covenant-quote blockquote{
 margin:0;
 max-width:860px;
 padding:0 0 0 24px;
 border-left:8px solid var(--gold);
}
.covenant-quote p{
 margin:0;
 font-family:Georgia,"Times New Roman",serif;
 font-size:clamp(24px,3vw,38px);
 line-height:1.22;
 font-weight:700;
 color:#fbfaf7;
}
.covenant-quote cite{
 display:block;
 margin-top:14px;
 font-family:"SF Mono",Menlo,monospace;
 font-style:normal;
 font-size:12px;
 letter-spacing:.16em;
 text-transform:uppercase;
 color:var(--gold);
}

/* hero container — the deck stylesheet also defines .hero for slides,
so the home hero asserts its own geometry explicitly */
.site-home .hero{
  max-width:1180px; margin:0 auto;
  padding:74px 28px 36px;
  display:grid; grid-template-columns:minmax(0,1fr) 360px;
  gap:40px; align-items:end;
  min-height:520px;
}
.hero-copy{max-width:760px;}
.hero .kick,.hero .kicker{
  font-family:"SF Mono",Menlo,monospace; color:var(--gold);
  letter-spacing:.22em; text-transform:uppercase; font-size:13px;
  margin-bottom:26px;
}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(48px,9vw,104px); line-height:.98; margin:0;
  font-weight:700; letter-spacing:-.02em;

}
.hero .lede{
  max-width:670px; margin-top:26px; font-size:20px; line-height:1.5;
  color:#cfc7ba;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;
  font-family:"SF Mono",Menlo,monospace; font-size:13px; letter-spacing:.04em;
}
.hero-actions a{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:8px; text-decoration:none;
  transition:transform .16s, border-color .16s, background .16s, color .16s;
}
.hero-actions a:hover{transform:translateY(-2px);}
.primary-action{background:var(--gold); color:#171006; border:1px solid var(--gold);}
.secondary-action{color:#f6efe3; border:1px solid rgba(255,255,255,.35); background:rgba(8,8,6,.46);}
.secondary-action:hover{border-color:var(--gold); background:rgba(255,210,74,.08);}
.hero-feature{
  position:relative; min-height:300px; border-radius:8px; overflow:hidden;
  padding:24px; color:#fff; text-decoration:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(8,8,6,.08), rgba(8,8,6,.82)),
    url("deck-assets/img/Portrait_of_Yuri_Bezmenov,_c._1985.jpg") center / cover;
  box-shadow:0 22px 70px rgba(0,0,0,.42);
  transition:transform .16s, border-color .16s;
}
.hero-feature:hover{transform:translateY(-4px); border-color:rgba(255,210,74,.72);}

.pain-path-feature .feature-title{max-width:340px;}
.pain-path-feature .feature-copy{max-width:340px;}

/* UX-DESIGNER CHANGE 2026-07-17 (v4): the opening is literally a slide —
   section.spotlight.slide.dark, same base as the bridge slide. The deck's
   fixed 720px stage grows to fit the opening content instead of clipping. */
.site-home .slide.hero-slide{
  height:auto; min-height:min(86vh,780px); overflow:visible;
  margin-top:18px;
  padding:44px clamp(28px,4vw,84px) 96px;
  /* the slide carries the burning-book image the old hero sat on,
     under the dark idiom's dot grid and a legibility scrim */
  background-color:var(--chrome);
  background-image:
    radial-gradient(rgba(244,194,71,.06) 1px, transparent 1px),
    linear-gradient(100deg, rgba(8,8,6,.88) 34%, rgba(8,8,6,.42) 68%, rgba(8,8,6,.72)),
    url("deck-assets/bg/AIbookremoval.png");
  background-size:40px 40px, auto, cover;
  background-position:0 0, 0 0, center top;
  background-repeat:repeat, no-repeat, no-repeat;
}
.hero-slide .kicker{margin-bottom:26px;}

/* Opening deck · a dedicated moral-standard beat after “one law.” */
.opening-standard-slide{
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(5,4,2,.97) 0%,rgba(5,4,2,.9) 48%,rgba(5,4,2,.2) 82%),
    url("deck-assets/bg/thegoldencalf.JPG") right center / auto no-repeat;
}
.opening-standard-slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72));
}
.opening-standard-slide > *{z-index:1;}
.opening-standard-copy{
  width:min(650px,70%);
  margin:auto 0;
  padding:34px 38px 32px;
  border-left:5px solid var(--gold);
  background:linear-gradient(90deg,rgba(8,7,4,.82),rgba(8,7,4,.36));
  box-shadow:0 30px 80px rgba(0,0,0,.3);
}
.opening-standard-copy p{margin:0;}
.opening-standard-lead{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4.3vw,48px);
  line-height:1.08;
  color:#fbfaf7;
}
.opening-standard-lead strong{color:var(--gold);font-weight:400;}
.opening-standard-rule{
  width:92px;
  height:1px;
  margin:24px 0 20px;
  background:var(--gold);
}
.opening-standard-test{
  max-width:610px;
  font-size:clamp(18px,2.2vw,25px);
  line-height:1.42;
  color:#ded4c3;
}
.opening-standard-lift{
  margin-top:24px !important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,3.4vw,38px);
  line-height:1.1;
  font-style:italic;
  color:#fff;
}
@media(max-width:760px){
  .opening-standard-slide{
    background:
      linear-gradient(180deg,rgba(5,4,2,.72),rgba(5,4,2,.98) 62%),
      url('deck-assets/bg/thegoldencalf.JPG') right top / auto no-repeat;
  }
  .opening-standard-copy{
    width:auto;
    margin:auto 0 0;
    padding:24px 22px;
  }
}
.hero-slide .opening-core{
  flex:1; display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:44px; align-items:center;
}
.hero-slide .opening-copy{min-width:0;}
.hero-slide .hero-thesis{margin:0 0 10px;}
.hero-slide .opening-title{
  margin:0 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic; font-weight:700;
  font-size:clamp(44px,6.6vw,88px); line-height:.98; letter-spacing:-.02em;
  color:#fbfaf7;
}
/* deck brandfoot is fixed at left:78px; track this slide's fluid padding */
.hero-slide .brandfoot{left:clamp(28px,4vw,84px);}
.feature-tag{
  position:absolute; top:16px; left:16px;
  font-family:"SF Mono",Menlo,monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#171006; background:var(--gold);
  padding:7px 9px; border-radius:6px;
}
.feature-title{
  font-family:Georgia,"Times New Roman",serif; font-size:32px; line-height:1.04;
  font-weight:700; max-width:280px;
}
.feature-copy{margin-top:10px; color:#e7dfd1; font-size:15px; line-height:1.42;}
main{display:block;}
.spotlight,.path{
  max-width:1180px; margin:0 auto; padding:24px 28px 0;
}
.section-head{max-width:720px; margin-bottom:18px;}
.section-head.compact{margin-top:28px;}
.eyebrow{
  display:block; font-family:"SF Mono",Menlo,monospace; color:var(--gold);
  letter-spacing:.18em; text-transform:uppercase; font-size:12px; margin-bottom:9px;
}
.section-head h2{
  margin:0; font-family:Georgia,"Times New Roman",serif; font-size:38px;
  line-height:1.08; color:#f8f0e4;
}
.section-head p{margin:10px 0 0; color:#bdb4a6; font-size:16px; line-height:1.5;}
.spotlight-grid{
  display:grid; gap:16px; grid-template-columns:1.15fr repeat(2,minmax(0,1fr));
}
.spotlight-card{
  min-height:220px; position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  color:#f8f0e4; text-decoration:none; border-radius:8px; overflow:hidden;
  border:1px solid rgba(169,154,135,.48); background:#17130f;
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.spotlight-card.lead{grid-row:span 2; min-height:456px;}
.spotlight-card.levers{min-height:456px;}
.spotlight-card:hover{
  transform:translateY(-3px); border-color:rgba(255,210,74,.72);
  box-shadow:0 16px 44px rgba(0,0,0,.32);
}
.spotlight-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(.95) contrast(1.04);
}
.spotlight-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,6,.05), rgba(8,8,6,.82) 72%);
}
.spotlight-img.os{background-image:url("deck-assets/img/fakeperson.jpg");}
.spotlight-img.op{background-image:url("deck-assets/img/op.jpg");}
.spotlight-img.path2{background-image:url("deck-assets/img/path2.jpg");}
.spotlight-img.ai{background-image:url("deck-assets/bg/brokenwest.png");}
.spotlight-img.whatway{background-image:url("deck-assets/bg/whatfuture.png");}
.spotlight-img.moses{background-image:url("deck-assets/img/respectmoses.jpg");}
.spotlight-img.weird{background-image:url("deck-assets/img/weird.JPG");}
.spotlight-img.path{background-image:url("deck-assets/bg/path.jpg");}
.spotlight-img.dots{background-image:url("deck-assets/bg/worlddots.png");}
.spotlight-img.mover{background-image:url("deck-assets/bg/mover.JPG");}
.spotlight-img.win{background-image:url("deck-assets/img/win.png");}
.spotlight-img.creators{background-image:url("deck-assets/bg/creator.jpeg");}
.spotlight-img.bible{background-image:url("deck-assets/bg/bibletoday.png"); background-position:left;}
.spotlight-img.memory{background-image:url("deck-assets/bg/blood/britain.png");}
.spotlight-img.yazidi{background-image:url("deck-assets/bg/blood/yazidi.png");}
.spotlight-body{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:20px;
}
.spotlight-card.lead .spotlight-body{padding:26px;}
.spotlight-body .num{
  font-family:"SF Mono",Menlo,monospace; color:var(--gold); letter-spacing:.14em; font-size:12px;
}
.spotlight-body strong{
  font-family:Georgia,"Times New Roman",serif; font-size:25px; line-height:1.08;
}
.spotlight-card.lead .spotlight-body strong{font-size:36px;}
.spotlight-body span:last-child{color:#d7cec0; font-size:15px; line-height:1.42;}
.bridge-map{
 max-width:1180px; margin:0 auto; padding:44px 28px 0;
}
/* UX-DESIGNER CHANGE 2026-07-06: bridge cards are a chapterwalkthrough-derived review map, not inserted slide copy. */
.bridge-grid{
 display:grid; gap:14px;
 grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.bridge-card{
 min-height:188px; display:flex; flex-direction:column; gap:10px;
 padding:20px; border-radius:8px; text-decoration:none;
 color:#f8f0e4; background:rgba(255,255,255,.035);
 border:1px solid rgba(169,154,135,.44);
 transition:transform .16s, border-color .16s, background .16s;
}
.bridge-card:hover{
 transform:translateY(-3px);
 border-color:rgba(255,210,74,.68);
 background:rgba(255,255,255,.065);
}
.bridge-k{
 font-family:"SF Mono",Menlo,monospace; font-size:11px;
 letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.bridge-card strong{
 font-family:Georgia,"Times New Roman",serif;
 font-size:23px; line-height:1.08; font-weight:700;
}
.bridge-card span:last-child{color:#cfc7ba; font-size:14.5px; line-height:1.42;}
.grid{
 max-width:1180px; margin:0 auto; padding:0 0 80px;
 display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{
  position:relative; display:flex; flex-direction:column;
  padding:26px 24px 22px; border-radius:8px; text-decoration:none;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  color:var(--paper); transition:.18s; overflow:hidden; min-height:190px;
}
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--gold); opacity:.85;
}
.card:nth-child(4n+2)::before{background:var(--law2);}
.card:nth-child(4n+3)::before{background:var(--bad);}
.card:nth-child(4n+4)::before{background:var(--good);}
.card:hover{
  transform:translateY(-3px); border-color:rgba(217,159,13,.5);
  background:rgba(255,255,255,.06);
}
.card .num{
  font-family:"SF Mono",Menlo,monospace; font-size:13px;
  color:var(--gold); letter-spacing:.12em;
}
.card h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px; line-height:1.1; margin:10px 0 8px; font-weight:700;
}
.card p{margin:0; color:var(--ink2); font-size:18px; line-height:1.45; flex:1;}
.dark .card p{margin:0; color:var(--bg2); font-size:18px; line-height:1.45; flex:1;}
/* interlude + appendix cards read as secondary to the chapters */
.card.interlude,.card.appendix{background:rgba(255,255,255,.015); min-height:150px;}
.card.interlude::before,.card.appendix::before{opacity:.4; width:3px;}
.card.interlude h2,.card.appendix h2{font-style:italic; font-size:23px; color:#d8cfc0;}
.card.interlude .num,.card.appendix .num{color:var(--muted);}
.card.policy{
  background:rgba(79,173,255,.07);
  border-color:rgba(79,173,255,.34);
}
.card.policy::before{background:var(--law2); width:5px; opacity:.9;}
.card.policy h2{color:#e4f4ff;}
.card.policy .num{color:#9bd3ff;}
.card.appendix::before{background:var(--erase-light); opacity:.7;}
.card .go{
  margin-top:16px; font-family:"SF Mono",Menlo,monospace;
  font-size:13px; color:#e8e2d8; letter-spacing:.04em;
}
/* full-width divider between the chapter run and the standalone P# decks */
.grid .divide{
  grid-column:1/-1; display:flex; align-items:center; gap:14px;
  margin:26px 0 4px;
  font-family:"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.grid .divide::before,.grid .divide::after{
  content:""; flex:1; height:1px; background:var(--line); opacity:.45;
}
/* UX-DESIGNER CHANGE 2026-07-18: lighter sub-divider for subject clusters
   inside the standalone-presentations grid — same shape, quieter weight. */
.grid .divide.sub{
  margin:14px 0 2px; font-size:11px; letter-spacing:.16em; opacity:.8;
}
.grid .divide.sub::before,.grid .divide.sub::after{ opacity:.28; }


/* ============================================================
   UX-DESIGNER CHANGE 2026-07-07: the levers are links now — each
   word routes to the segment that defines it. The lever keeps its
   playful.css machine look; the link layer adds pull affordance.
   ============================================================ */
.play a.lever{
  text-decoration:none; cursor:pointer;
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.play a.lever:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:6px 10px 0 rgba(17,16,14,.12), 0 14px 34px rgba(0,0,0,.4);
}
.play a.lever:focus-visible{outline:3px solid var(--law2); outline-offset:3px;}

/* UX-DESIGNER CHANGE 2026-07-09: the Operating System lead card sits beside
   the control panel — the card names the machine, the levers pull it. */
.play .lever-deck{
  display:grid; grid-template-columns:minmax(280px,340px) 1fr;
  gap:18px; align-items:stretch; margin-top:42px;
}
.play .lever-deck .control{margin-top:0;}
.play .lever-deck .spotlight-body strong{font-size:30px;}
@media(max-width:920px){
  .play .lever-deck{grid-template-columns:1fr; margin-top:24px;}
  .play .lever-deck .spotlight-card{min-height:280px;}
}

/* Deep links land on individual slides: keep the anchored slide
   clear of the sticky bars instead of hiding underneath them. */
.site-page .slide[id]{scroll-margin-top:calc(var(--sitebar-h,42px) + 16px);}
.page-operating-system .slide[id]{scroll-margin-top:calc(var(--sitebar-h,42px) + 56px);}

 .flowchart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 600px;
            width: 100%;
        }



@media(max-width:640px){
  .sitebar{
    flex-wrap: wrap;
    gap: 0;
    padding: 12px 14px 8px;
  }
  .sitebar .brand{
    flex: 1 1 auto;
    max-width: none;
    font-size: 13px;
  }
  .sitebar > a.support-nav{
    flex: 0 0 auto;
    max-width: none;
  }
  .sitebar .chapters {
    flex: 1 1 100%;
    order: 3;
    margin-top: 12px;
    padding-bottom: 4px;
  }
  .pagenav .nv{font-size:12px; padding:12px 14px;}
  .story-bridge{display:block; padding:20px 18px 0;}
  .story-bridge strong{display:block; margin-top:10px; font-size:23px;}
  .story-bridge p{margin-top:8px; font-size:15px;}
  .story-bridge-action{display:block; margin-top:10px;}
}

@media(max-width:920px){
  .site-home .hero{grid-template-columns:1fr; min-height:auto; padding-top:58px;}
  .site-home .slide.hero-slide{
    width:100%; max-width:100%; min-height:0;
    padding-left:28px; padding-right:28px; padding-bottom:52px;
  }
  .hero-slide .opening-core{grid-template-columns:1fr; gap:28px;}
  .hero-slide .opening-copy,
  .hero-slide .hero-thesis{max-width:100%;}
  .hero-slide .brandfoot{position:static; margin-top:26px;}
  .hero-feature{min-height:240px;}
  .spotlight-grid{grid-template-columns:1fr 1fr;}
  .spotlight-card.lead{grid-column:1/-1; min-height:320px;}
  /* UX-DESIGNER CHANGE 2026-07-07: index data reflows to columns.
     The lever panel becomes a grid, and the KGB time-scale bridge
     drops its fixed 1280x720 deck geometry to stack in one column. */
  .play .control{grid-template-columns:repeat(3,1fr);}
  .site-home .slide{
    width:auto; height:auto; min-height:0; overflow:visible;
    padding:38px 26px 44px;
  }
  .kgb-time-bridge .bridge-core{grid-template-columns:1fr; gap:30px;}
  .kgb-time-bridge .bottom-line{
    position:static; left:auto; right:auto; bottom:auto; margin-top:28px;
  }
  .kgb-time-bridge .brandfoot{position:static; margin-top:18px;}
}

@media(max-width:640px){
  .site-home{background-size:auto 420px;}
  .kgb-bar{
    padding-left:18px;
    padding-right:18px;
  }
  .kgb-bar .kgb-bar-k,
  .kgb-bar .kgb-bar-t{
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .kgb-bar .kgb-bar-k{
    font-size:10.5px;
    letter-spacing:.14em;
  }
  .kgb-bar .kgb-bar-t{
    max-width:300px;
    font-size:10.5px;
    line-height:1.35;
    letter-spacing:.04em;
  }
  .mission-header{
    width:100vw;
    max-width:100vw;
    margin:0;
    padding:38px 18px 32px;
    overflow:hidden;
  }
  .mission-header::before{
    left:18px;
    top:28px;
    width:58px;
    height:5px;
  }
  .mission-kicker{
    max-width:300px;
    font-size:10.5px;
    line-height:1.45;
    letter-spacing:.1em;
    padding-top:18px;
    overflow-wrap:break-word;
  }
  .mission-header h1{
    max-width:100%;
    font-size:39px;
    line-height:1;
    overflow-wrap:break-word;
  }
  .mission-copy{
    max-width:300px;
    font-size:16px;
    line-height:1.42;
    overflow-wrap:break-word;
  }
  .mission-charge{
    max-width:300px;
    padding:18px 18px 15px;
    border-left-width:8px;
  }
  .mission-charge-call{
    font-size:11px;
    letter-spacing:.12em;
    overflow-wrap:anywhere;
  }
  .mission-charge-hit{font-size:32px;}
  .mission-charge-line{font-size:16px;}
 .mission-link{
 width:100%;
 }
 .covenant-quote{
 width:100vw;
 max-width:100vw;
 margin:0;
 padding:26px 18px 22px;
 overflow:hidden;
 }
 .covenant-quote blockquote{
 max-width:320px;
 padding-left:16px;
 border-left-width:6px;
 }
 .covenant-quote p{
 font-size:22px;
 line-height:1.24;
 overflow-wrap:break-word;
 }
 .site-home .hero{padding:48px 18px 28px; gap:24px;}
  .hero .lede{font-size:17px;}
  .site-home .slide.hero-slide{padding-left:28px; padding-right:28px;}
  .hero-slide .opening-title{font-size:40px;}
  .hero-thesis{font-size:21px;}
  .hero-actions{flex-direction:column;}
  .hero-actions a{width:100%;}
  .spotlight,.path{padding-left:18px; padding-right:18px;}
  .section-head h2{font-size:30px;}
  .spotlight-grid{grid-template-columns:1fr;}
  .spotlight-card,.spotlight-card.lead{min-height:260px;}
  .grid{grid-template-columns:1fr; gap:14px; padding-bottom:54px;}
  .kgb-bar{gap:6px; padding:8px 14px;}
  .kgb-bar .kgb-bar-sep{display:none;}
  .kgb-bar .kgb-bar-k,.kgb-bar .kgb-bar-t{font-size:11px;}
  /* control panel: two levers across, machine geometry scaled down */
  .play .control{grid-template-columns:repeat(2,1fr); gap:10px;}
  .play .lever{height:220px; font-size:15px;}
  .play .lever:before{height:105px;}
  .play .lever:nth-child(even):after{top:72px;}
  .kgb-time-bridge .main-hit{font-size:44px; letter-spacing:-1px;}
  .kgb-time-bridge .subhit{font-size:19px; margin-top:16px;}
  .kgb-time-bridge .slow-chain{padding:20px 18px 16px;}
  .kgb-time-bridge .chain-step{font-size:20px;}
  .kgb-time-bridge .bottom-line{font-size:20px; padding:12px 16px;}
}

/* ============================================================
   SLIDE REFLOW  ·  all chapter pages (.site-page)
   The deck renders every .slide as a fixed 1280x720 box with
   overflow:hidden — fine for a projector, wrong for a web page
   (dead space + clipped text). On the site, slides keep their
   width cap but grow to natural height so nothing clips, and
   shrink with the viewport. min-height preserves roughly the
   deck's 16:9 composition on wide screens.
   ============================================================ */
.site-page{background:#0b0a08;}
.site-page .deckflow{
  max-width:1180px; margin:0 auto; padding:34px 20px 10px;
}
.site-page details.chapter-block{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:0 auto 30px;
}
.site-page .slide{
  box-sizing:border-box;
  width:100%; height:auto; max-width:100%;
  min-height:clamp(360px,54vw,640px);
  overflow:visible;                 /* stop clipping long content */
  margin:0 auto 30px; border-radius:16px;
  padding:clamp(26px,4vw,54px);
  box-shadow:0 6px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(17,16,14,.18);
}
/* tame the oversized deck headings for on-screen reading */
.site-page .slide h2{font-size:clamp(24px,3.4vw,40px); line-height:1.14;}
.site-page .slide .huge{font-size:clamp(30px,5vw,56px);}
.site-page .slide .sub,.site-page .slide .note{max-width:100%;}
/* images never overflow the reflowed slide */
.site-page .slide img{max-width:100%; height:auto;}
/* collapsible chapter headers */
.site-page details.chapter-block > summary.kicker{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  min-height:48px;
  padding-inline:clamp(18px,4vw,78px);
  list-style:none;
  user-select:none;
  touch-action:manipulation;
}
.site-page details.chapter-block > summary.kicker::-webkit-details-marker{display:none;}
.site-page details.chapter-block > summary.kicker::after{
  content:"+";
  display:grid; place-items:center; flex:0 0 28px;
  width:28px; height:28px; border-radius:999px;
  border:1px solid rgba(255,210,74,.58);
  color:var(--gold); background:rgba(255,210,74,.08);
  font:900 19px/1 "SF Mono",Menlo,monospace;
}
.site-page details.chapter-block[open] > summary.kicker::after{content:"-";}
.site-page details.chapter-block > summary.kicker:hover{
  background:#17140f;
  color:#ffe08a;
}
.site-page details.chapter-block > summary.kicker:focus-visible{
  outline:3px solid var(--law2);
  outline-offset:-3px;
}
/* ============================================================
   OPERATING SYSTEM PAGE · element rail + clickable machine
   The OS chapter is the core of the presentation: a sticky rail
   under the sitebar lists its seven elements, and the machine
   diagram (slide 01) + capstone grid (slide 46) jump to them.
   --sitebar-h is measured by os-nav.js (fallback 42px).
   ============================================================ */
.os-subnav{
  position:sticky; top:var(--sitebar-h,42px); z-index:900;
  display:flex; align-items:center; gap:16px;
  padding:6px 22px;
  background:rgba(16,14,11,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(169,154,135,.4);
  font-family:"SF Mono",Menlo,monospace;
}
.os-subnav .lbl{
  color:var(--muted); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap;
}
.os-subnav .elements{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;}
.os-subnav .elements::-webkit-scrollbar{display:none;}
.os-subnav .elements a{
  display:inline-flex; align-items:center; gap:8px;
  color:#cfc7ba; text-decoration:none; font-size:11.5px;
  padding:6px 10px; border-radius:6px; white-space:nowrap;
  border-bottom:2px solid transparent; transition:.15s;
}
.os-subnav .elements a .n{color:var(--muted); font-size:10px; letter-spacing:.08em;}
/* element swatch — same color-as-mechanism coding as the machine diagram */
.os-subnav .elements a::before{
  content:""; flex:0 0 8px; width:8px; height:8px; border-radius:2px;
  background:var(--el,#cfc7ba);
}
.os-subnav .elements a.el-bad{--el:var(--bad);}
.os-subnav .elements a.el-king{--el:var(--king);}
.os-subnav .elements a.el-erase{--el:var(--erase);}
.os-subnav .elements a.el-law{--el:var(--law2);}
.os-subnav .elements a.el-laws{--el:var(--law);}
.os-subnav .elements a.el-good{--el:var(--good);}
.os-subnav .elements a.el-core{--el:var(--paper);}
.os-subnav .elements a:hover{color:#fff; background:rgba(255,255,255,.06);}
.os-subnav .elements a.on,
.os-subnav .elements a[aria-current="true"]{
  color:#fff; background:rgba(255,255,255,.09);
  border-bottom-color:var(--el,#cfc7ba);
}
.os-subnav .elements a:focus-visible{outline:3px solid var(--law2); outline-offset:-3px;}
/* anchored element blocks land below the two sticky bars */
.page-operating-system details.chapter-block{
  scroll-margin-top:calc(var(--sitebar-h,42px) + 56px);
}
/* the machine diagram + capstone grid double as navigation */
.site-page a.os-node,.site-page a.tnode,.site-page button.os-node{
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.site-page button.os-node{
 appearance:none; -webkit-appearance:none;
}
.site-page a.os-node:hover,.site-page a.tnode:hover,.site-page button.os-node:hover{
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.2);
}
/* os-core already carries a transform — hover uses glow only */
.site-page a.os-core{color:var(--paper); text-decoration:none; cursor:pointer; transition:box-shadow .15s;}
.site-page a.os-core:hover{box-shadow:0 14px 30px rgba(0,0,0,.5);}
.site-page a.os-node:focus-visible,.site-page a.os-core:focus-visible,.site-page a.tnode:focus-visible,.site-page button.os-node:focus-visible{
  outline:3px solid var(--law2); outline-offset:2px;
}
@media(max-width:640px){
  .os-subnav{padding:6px 14px; gap:10px;}
  .os-subnav .lbl{display:none;}
}


/* UX-DESIGNER CHANGE 2026-07-21: Crime Scene is an intro, while the
   Operating System dictionary is split into software/kernel pages. */
.sitebar .chapters a.intro{
  color:#d8d0c4;
  border:1px solid rgba(169,154,135,.34);
  background:rgba(255,255,255,.025);
}
.sitebar .chapters a.intro .n{color:var(--gold);}
.sitebar .chapters a.intro.on{
  color:#11100e;
  background:#e8dcc9;
  border-color:#e8dcc9;
  font-weight:700;
}
.sitebar .chapters a.intro.on .n{color:#5e554b;}
.os-subnav .elements a.is-muted,
.site-page a.os-node.is-muted,
.site-page a.os-core.is-muted,
.site-page a.os-node.muted,
.site-page a.os-core.muted,
.site-page a.tnode.muted{
  opacity:.42;
  filter:grayscale(.75);
}
.os-subnav .elements a.is-muted:hover,
.site-page a.os-node.is-muted:hover,
.site-page a.os-core.is-muted:hover,
.site-page a.os-node.muted:hover,
.site-page a.os-core.muted:hover,
.site-page a.tnode.muted:hover{
  opacity:.72;
  filter:grayscale(.35);
}

/* comparison + asymmetry blocks reflow on narrow viewports */
@media(max-width:820px){
  .page-operation .system-compare{grid-template-columns:1fr;}
  .page-operation .system-card{min-height:0;}
  .page-operation .info-row{grid-template-columns:120px 1fr;}
  .page-operation .asymmetry-board{min-height:520px;}
}
@media(max-width:560px){
  .page-operation .market-field,.page-operation .control-field{
    position:static; width:auto; margin-bottom:14px; font-size:20px;
  }
  .page-operation .purchase-arrow,.page-operation .asymmetry-note{display:none;}
  .page-operation .asymmetry-board{min-height:0;}
}

/* === INSERTED BRIDGE: KGB TIME SCALE === */
.slide.kgb-time-bridge {
	 width:auto; height:auto; 
	padding: 36px;
  border-top-color: var(--warn);
	border-top-width: 2px;
  background: var(--chrome);
  color: var(--bg2);
  background-image: radial-gradient(rgba(255,210,74,.06) 1px, transparent 1px), linear-gradient(135deg, rgba(139,30,30,.22), rgba(8,8,6,0));
  background-size: 36px 36px, cover;
}
.kgb-time-bridge .kicker { color: var(--warn); }
.kgb-time-bridge .bridge-core {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.kgb-time-bridge .main-hit {
  font-size: 76px;
  line-height: .96;
  font-weight: 950;
  letter-spacing: -2px;
  color: #fbfaf7;
}
.kgb-time-bridge .main-hit .gold { color: var(--gold); }
.kgb-time-bridge .subhit {
  margin-top: 24px;
  max-width: 670px;
  font-size: 26px;
  line-height: 1.2;
  color: #d8cabc;
  font-weight: 760;
}
.kgb-time-bridge .slow-chain {
  border: 2px solid rgba(255,210,74,.7);
  box-shadow: 9px 9px 0 rgba(0,0,0,.34);
  background: rgba(251,250,247,.06);
  padding: 28px 28px 24px;
}
.kgb-time-bridge .chain-title {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 950;
  margin-bottom: 18px;
}
.kgb-time-bridge .chain-step {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 29px;
  line-height: 1;
  font-weight: 920;
  color: #fbfaf7;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,210,74,.18);
}
.kgb-time-bridge .chain-step:last-child { border-bottom: 0; }
.kgb-time-bridge .num {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--bad);
  color: #fff;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  border-radius: 4px;
}
.kgb-time-bridge .bottom-line {
  position: absolute;
  left: 78px;
  right: 78px;
  bottom: 72px;
  border-left: 12px solid var(--warn);
  padding: 14px 22px;
  background: rgba(255,210,74,.10);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 900;
  color: #fbfaf7;
}

/* Image tiles slotted between chapter cards on the home grid. */
.grid .visual{
  border-radius:8px; overflow:hidden; min-height:190px;
  border:1px solid var(--line);
}
.grid .visual img{width:100%; height:100%; object-fit:cover; display:block;}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-07 · deck cross-links, hover-first.
   Cross-references live in the chapter pages, not the home page.
   At rest the text reads as copy; hover reveals the route.
   ============================================================ */
.site-page .xref{
  color:inherit; text-decoration:none; cursor:pointer;
  border-bottom:1px dotted transparent;
  transition:border-color .15s, color .15s;
}
.site-page .xref:hover{color:var(--gold); border-bottom-color:var(--gold);}
.site-page .slide:not(.dark) .xref:hover{color:var(--accent); border-bottom-color:var(--accent);}
.site-page .xref:focus-visible{outline:3px solid var(--law2); outline-offset:2px;}

/* Story bridges are now links: the whole card routes to the chapter
   it teases. Hover lifts the card and arms the action line. */
a.story-bridge{color:#f6efe3; text-decoration:none; cursor:pointer;
  transition:transform .18s, box-shadow .18s, border-color .18s;}
a.story-bridge:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 60px rgba(0,0,0,.3);
  border-top-color:var(--gold);
}
a.story-bridge .story-bridge-action::after{
  content:" \2192"; color:var(--gold);
  opacity:0; transition:opacity .18s;
}
a.story-bridge:hover .story-bridge-action{color:var(--gold);}
a.story-bridge:hover .story-bridge-action::after{opacity:1;}
a.story-bridge:focus-visible{outline:3px solid var(--law2); outline-offset:3px;}

/* ============================================================
   OPERATING SYSTEM · definitions read as numbered sub-chapters.
   Each summary carries its element color (--el) on a left rail,
   a mono counter, and the word set like a chapter title.
   ============================================================ */
.page-operating-system details.chapter-block details.chapter-block > summary.kicker{
  --el:var(--gold);
  justify-content:flex-start;
  min-height:64px;
  margin:10px 0;
  border-left:12px solid var(--el);
}
.page-operating-system details.chapter-block details.chapter-block > summary.kicker::after{
  margin-left:auto;
}
.page-operating-system summary.kicker .sc-num{
  font:900 13px/1 "SF Mono",Menlo,monospace;
  letter-spacing:.12em; color:var(--el);
  border:1px solid var(--el); border-radius:3px;
  padding:6px 8px; flex:0 0 auto;
}
.page-operating-system summary.kicker .sc-word{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,2.6vw,30px); font-weight:700;
  letter-spacing:0; text-transform:none; color:#f1e9db;
}
.page-operating-system summary.kicker .sc-preview {
  display: block;
  flex: 0 0 100%;
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #7d7264;
  margin-top: 4px;
}
.dark summary.kicker .sc-preview {
  color: rgba(246,239,229,.6);
}
.page-operating-system summary.kicker .sc-role{
  font:600 11px/1.3 "SF Mono",Menlo,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:#9a8f80;
}
/* Open Graph Style Definition Cards (Dropper) */
.page-operating-system summary.og-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  transition: all 0.2s ease;
  position: relative;
  min-height: 120px;
  list-style: none;
  cursor: pointer;
}
.page-operating-system summary.og-card::-webkit-details-marker { display: none; }
.page-operating-system summary.og-card:hover {
  background: rgba(255, 255, 255, 0.06);
}
.page-operating-system details[open] > summary.og-card {
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0.04);
}

/* Add the Plus/Minus Dropper Icon */
.page-operating-system summary.og-card::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  font: 900 22px/1 "SF Mono", Menlo, monospace;
  position: absolute;
  right: clamp(18px, 4vw, 78px);
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}
.page-operating-system details[open] > summary.og-card::after {
  content: "-";
  background: var(--el);
  color: #000;
  border-color: var(--el);
}
.page-operating-system summary.og-card:hover::after {
  border-color: var(--el);
  color: var(--el);
}
.page-operating-system details[open] > summary.og-card:hover::after {
  color: #000;
}

.og-card .og-thumb {
  width: 240px;
  align-self: stretch;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.02);
}
@media (max-width: 600px) {
  .page-operating-system summary.og-card { flex-direction: column; align-items: stretch; }
  .og-card .og-thumb { width: 100%; height: 160px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .page-operating-system summary.og-card::after { top: 80px; right: 16px; }
}
.og-card .og-body {
  padding: 24px clamp(80px, 10vw, 120px) 24px clamp(18px, 4vw, 78px); /* space for icon and standard padding */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 1;
}
.og-card .og-domain {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--el);
  font-weight: 700;
  margin-bottom: 4px;
}
.og-card .og-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  color: #f1e9db;
  line-height: 1.1;
}
.og-card .og-desc {
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #a49e96;
  margin-top: 4px;
}
.page-operating-system summary.el-bad{--el:var(--bad);}
.page-operating-system summary.el-erase{--el:var(--erase-light);}
.page-operating-system summary.el-law{--el:var(--law2);}
.page-operating-system summary.el-good{--el:var(--good);}
.page-operating-system summary.el-king{--el:var(--king);}
.page-operating-system summary.el-laws{--el:var(--law);}
.page-operating-system summary.el-core{--el:var(--gold);}

/* ============================================================
   OPERATING SYSTEM · opener + closer slides.
   Opener: the seven words hang faint above one huge dare.
   Closer: the KGB ladder run upward — numbered, green, ascending.
   ============================================================ */
.page-operating-system .os-open{
  display:flex; flex-direction:column; justify-content:center;
  min-height:640px; position:relative; overflow:hidden;
}
.page-operating-system .os-open .os-open-words{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  font:700 14px/1 "SF Mono",Menlo,monospace;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,239,227,.22);
  max-width:820px; margin-bottom:34px;
}
.page-operating-system .os-open .os-open-words .lit{color:rgba(255,210,74,.55);}
.page-operating-system .os-open .os-open-hit{
  font-size:clamp(64px,9vw,128px); line-height:.95; font-weight:900;
  letter-spacing:-.01em; max-width:900px;
}
.page-operating-system .os-open .os-open-hit .gold{color:var(--gold);}
.page-operating-system .os-open .os-open-sub{
  margin-top:26px; max-width:640px;
  font-size:clamp(20px,2.4vw,28px); line-height:1.25; color:#d8cabc;
}
.page-operating-system .os-open .os-open-rule{
  width:120px; height:10px; background:var(--gold); margin-top:30px;
}
.page-operating-system .os-close .rung{counter-increment:runup;}
.page-operating-system .os-close .ladder{counter-reset:runup;}
.page-operating-system .os-close .rung .rn::before{
  content:counter(runup,decimal-leading-zero) " · ";
  color:rgba(255,255,255,.72);
}
.page-operating-system .os-close .os-close-head{
  margin-bottom:18px;
}
.page-operating-system .os-close .os-close-head .huge{
  font-size:clamp(36px,4.6vw,56px); line-height:1.02; font-weight:900;
}
.page-operating-system .os-close .os-close-head .sub{
  margin-top:10px; font-size:19px; color:var(--good-dark); font-weight:700;
}
/* UX-DESIGNER CHANGE 2026-07-10 · slide 48, third pass.
   The single-column ladder (the mobile rendering) is the one that works —
   desktop now gets the same: one centered rail at reading width, rungs at
   their natural height, Takeover emphasized as the payoff. */
.page-operating-system .os-close .ladder{
  max-width:1020px;
  width:100%;
  margin-left:auto; margin-right:auto;
  gap:9px;
}
.page-operating-system .os-close .os-close-head{
  max-width:1020px; margin-left:auto; margin-right:auto;
}
.page-operating-system .os-close .rung .rn{
  white-space:normal; height:auto; min-height:28px;
  font-size:18px; line-height:1.2; text-align:left;
  justify-content:flex-start; padding:6px 12px;
  flex:0 0 34%;
}
.page-operating-system .os-close .rung .rt{font-size:16px;}
.page-operating-system .os-close .rung:last-child{
  border-color:var(--good); border-left-width:12px; border-width:2px 2px 2px 12px;
}
/* the counter-thesis carries the brandbook glow-opener treatment */
.page-operating-system .os-close .up-glow{
  color:var(--good);
  text-shadow:0 0 26px rgba(30,107,58,.45);
}
@media (max-width:700px){
  .page-operating-system .os-close .rung .rn{flex-basis:100%;}
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-07 · mobile de-overlap pass.
   The deck composes many slides with absolute coordinates that
   assume a 1280x720 canvas. On reflowed narrow screens those
   layers land on top of each other. Below ~700px: text-bearing
   blocks return to normal flow and stack; pure-drawing layers
   that only make sense at deck geometry are hidden.
   ============================================================ */
@media(max-width:700px){
  .site-home .feature-row,
  .site-home .cta-row,
  .site-page .slide .row,
  .spotlight  .row,
  .site-page .slide .row.top,
  .site-page .slide .duo,
  .site-page .slide .split,
  .site-page .slide .rail,
  .site-page .slide .flow,
  .site-page .slide .chain,
  .site-page .slide .arrowRow{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }
  .site-page .slide .row .col{
    width:auto !important;
    max-width:100% !important;
    flex:0 1 auto !important;
  }
  .site-home .hero,
  .site-home .spotlight-grid,
  .site-home .bridge-grid,
  .site-home .kgb-time-bridge .bridge-core,
  .site-home .grid,
  .site-page .slide .grid2,
  .site-page .slide .grid3,
  .site-page .slide .grid4,
  .site-page .slide .grid5,
  .site-page .slide .structure,
  .site-page .slide .bigrows,
  .site-page .slide .table .row,
  .site-page .slide .table.fit .row,
  .site-page .slide .segment-grid,
  .site-page .slide .torah-nomos-slide .torah-stage,
  .site-page .slide .torah-nomos-slide .output-row,
  .site-page .slide .gate-inquiry .gate-layout,
  .site-page .slide .gate-inquiry .investigation-grid,
  .site-page .slide .gate-wrap,
  .site-page .slide .system-compare,
  .site-page .slide .info-row,
  .site-page .slide .strategy-grid,
  .site-page .slide .output-map,
  .site-page .slide .delivery-chain,
  .site-page .slide .download-table,
  .site-page .slide .kingdom-layer,
  .site-page .slide .nojew-grid,
  .site-page .slide .murder-split,
  .site-page .slide .kit-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .site-page .slide .rail .arrow,
  .site-page .slide .flow .arr,
  .site-page .slide .step:not(:last-child)::after{
    transform:none !important;
    position:static !important;
    text-align:center !important;
  }
  .site-home .kgb-time-bridge{
    padding:34px 20px 38px !important;
  }
  .site-home .kgb-time-bridge .bridge-core{
    align-items:stretch !important;
  }
  .site-home .kgb-time-bridge .subhit{
    max-width:100% !important;
    font-size:clamp(17px,4.8vw,20px) !important;
    line-height:1.34 !important;
    margin-top:16px !important;
  }
  .site-home .kgb-time-bridge .slow-chain{
    padding:18px 16px 14px !important;
    box-shadow:5px 5px 0 rgba(0,0,0,.34) !important;
  }
  .site-home .kgb-time-bridge .chain-title{
    font-size:12px !important;
    line-height:1.25 !important;
    margin-bottom:12px !important;
  }
  .site-home .kgb-time-bridge .chain-step{
    align-items:flex-start !important;
    gap:10px !important;
    font-size:clamp(18px,5.5vw,23px) !important;
    line-height:1.14 !important;
    padding:10px 0 !important;
  }
  .site-home .kgb-time-bridge .num{
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
    font-size:12px !important;
  }
  .site-home .kgb-time-bridge .bottom-line,
  .site-home .kgb-time-bridge .brandfoot{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:18px !important;
  }
  .site-home .kgb-time-bridge .bottom-line{
    font-size:clamp(18px,5.4vw,22px) !important;
    line-height:1.16 !important;
    padding:12px 14px !important;
  }
  /* Mobile type scale. The HTML contains many inline font-size values
     from slide composition; these rules intentionally use !important so
     phone layouts get readable, non-overlapping text anyway. */
  .site-home h1,
  .site-page .slide h1,
  .site-page .slide .title-wrap h1{
    font-size:clamp(34px,10vw,52px) !important;
    line-height:1.02 !important;
    letter-spacing:0 !important;
  }
  .site-home h2,
  .spotlight h2,
  .site-page .slide h2,
  .site-page .slide .added-title{
    font-size:clamp(28px,8.4vw,42px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
  }
  .site-home h3,
  .site-page .slide h3,
  .site-page .slide .title,
  .site-page .slide .head,
  .site-page .slide .nm,
  .site-page .slide .main{
    font-size:clamp(21px,6.2vw,30px) !important;
    line-height:1.12 !important;
    letter-spacing:0 !important;
  }
  .site-home p,
  .site-home li,
  .site-page .slide p,
  .site-page .slide li,
  .site-page .slide .sub,
  .site-page .slide .note,
  .site-page .slide .body,
  .site-page .slide .copy,
  .site-page .slide .txt,
  .site-page .slide .small,
  .site-page .slide .corr,
  .site-page .slide .means,
  .site-page .slide .strategy-sub{
    font-size:clamp(16px,4.8vw,20px) !important;
    line-height:1.34 !important;
    letter-spacing:0 !important;
  }
  .site-home .huge,
  .site-home .big,
  .site-home .main-hit,
  .site-page .slide .huge,
  .site-page .slide .big,
  .site-page .slide .bigstate,
  .site-page .slide .pull,
  .site-page .slide .quote,
  .site-page .slide .promise,
  .site-page .slide .punch,
  .site-page .slide .final,
  .site-page .slide .pt{
    font-size:clamp(30px,9vw,46px) !important;
    line-height:1.06 !important;
    letter-spacing:0 !important;
  }
  .site-home .kicker,
  .site-home .eyebrow,
  .site-home .label,
  .site-page .slide .kicker,
  .site-page .slide .label,
  .site-page .slide .lab,
  .site-page .slide .tag,
  .site-page .slide .steptag,
  .site-page .slide .snum,
  .site-page .slide .path,
  .site-page .slide .brandfoot,
  .site-page .slide .slidenum{
    font-size:clamp(11px,3.3vw,14px) !important;
    line-height:1.25 !important;
  }
  .site-home [style*="font-size"],
  .site-page .slide [style*="font-size"]{
    font-size:clamp(16px,5vw,22px) !important;
    line-height:1.28 !important;
    letter-spacing:0 !important;
  }
  .site-home .huge[style*="font-size"],
  .site-home .big[style*="font-size"],
  .site-home .main-hit[style*="font-size"],
  .site-page .slide h1[style*="font-size"],
  .site-page .slide h2[style*="font-size"],
  .site-page .slide .huge[style*="font-size"],
  .site-page .slide .big[style*="font-size"],
  .site-page .slide .bigstate[style*="font-size"],
  .site-page .slide .pull[style*="font-size"],
  .site-page .slide .quote[style*="font-size"],
  .site-page .slide .promise[style*="font-size"],
  .site-page .slide .punch[style*="font-size"],
  .site-page .slide .final[style*="font-size"],
  .site-page .slide .pt[style*="font-size"]{
    font-size:clamp(28px,8.5vw,44px) !important;
    line-height:1.08 !important;
  }
  .site-page .slide svg text[style*="font-size"]{
    font-size:18px !important;
  }
  /* slide metadata (footer line, slide number) back into flow */
  .site-page .slide .brandfoot,
  .site-page .slide .slidenum,
  .site-page .slide .foot,
  .site-page .slide .sourcefoot,
  .site-page .slide .viz-label,
  .site-page .slide .viz-caption{
    position:static !important; display:block;
    margin:14px 0 0; text-align:left;
  }
  /* absolutely-placed text blocks stack in reading order */
  .site-page .slide .gate-text,
  .site-page .slide .gate-rule,
  .site-page .slide .control-line,
  .site-page .slide .release,
  .site-page .slide .deletion,
  .site-page .slide .scale-note,
  .site-page .slide .time-label,
  .site-page .slide .op-grid,
  .site-page .slide .selector-center,
  .site-page .slide .selector-chip,
  .site-page .slide .banner,
  .site-page .slide .pin-card,
  .site-page .slide .machine-rung,
  .site-page .slide .icon-text,
  .site-page .slide .strategy .ring-core,
  .site-page .slide .strategy .ring-item,
  .site-page .slide .bubble,
  .site-page .slide .loopnode,
  .site-page .slide .case-file,
  .site-page .slide .poster-form,
  .site-page .slide .router-person,
  .site-page .slide .router-node,
  .site-page .slide .podium,
  .site-page .slide .citizen-tool,
  .site-page .slide .pan,
  .site-page .slide .stage,
  .site-page .slide .layer,
  .site-page .slide .market-field,
  .site-page .slide .control-field,
  .site-page .slide .os-core{
    position:static !important; inset:auto !important;
    width:auto !important; max-width:100% !important;
    height:auto !important; min-height:0 !important;
    margin:10px 0 0 !important; transform:none !important;
  }
  /* containers sized around those drawings lose fixed geometry */
  .site-page .slide .scale,
  .site-page .slide .gate,
  .site-page .slide .layers,
  .site-page .slide .pipeline,
  .site-page .slide .hierarchy,
  .site-page .slide .strategy,
  .site-page .slide .levers,
  .site-page .slide .os-grid{
    position:static !important; inset:auto !important;
    width:auto !important; height:auto !important; min-height:0 !important;
  }
  .site-page .slide .os-grid{display:grid; grid-template-columns:1fr; gap:10px;}
  .site-page .slide .levers{display:flex; flex-direction:column; gap:8px;}
  .site-page .slide .levers .lever{height:auto; padding:10px 0; border-left:0; justify-content:flex-start;}
  .site-page .slide .levers .lever .knob{display:none;}
  .site-page .slide .levers .lever .lab{position:static; width:auto; text-align:left;}
  /* AI chapter evidence tables and timeline chips need their own reflow.
     The source deck uses flex rows, so grid-only mobile overrides do not
     stop four-column table cells from overflowing narrow screens. */
  .site-page .slide .bigrow{
    flex-direction:column !important;
    overflow:visible !important;
    border-radius:8px !important;
  }
  .site-page .slide .bigrow.head{
    display:none !important;
  }
  .site-page .slide .bigrow .cell{
    min-width:0 !important;
    width:100% !important;
    flex:0 1 auto !important;
    padding:12px 14px !important;
    border-left:0 !important;
    border-top:1px solid var(--line) !important;
    font-size:clamp(15px,4.4vw,18px) !important;
    line-height:1.32 !important;
    overflow-wrap:anywhere !important;
  }
  .site-page .slide .bigrow .cell:first-child{
    border-top:0 !important;
  }
  .site-page .slide .airow{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }
  .site-page .slide .aitem{
    flex:1 1 calc(50% - 10px) !important;
    min-width:132px !important;
    min-height:76px !important;
    padding:10px !important;
    font-size:clamp(15px,4.4vw,18px) !important;
    box-shadow:4px 4px 0 rgba(17,16,14,.12) !important;
    overflow-wrap:anywhere !important;
  }
  .site-page .slide .missingbox{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin-top:14px !important;
    padding:14px !important;
  }
  .site-page .slide .missingbox div{
    flex:1 0 100% !important;
    margin-right:0 !important;
    font-size:clamp(15px,4vw,18px) !important;
    line-height:1.2 !important;
    letter-spacing:.06em !important;
  }
  .site-page .slide .missingbox span{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:9px 10px !important;
    font-size:clamp(15px,4.4vw,18px) !important;
    text-align:center !important;
    overflow-wrap:anywhere !important;
  }
  .site-page .slide .promise{
    font-size:clamp(19px,5.4vw,28px) !important;
    line-height:1.18 !important;
    padding:16px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow-wrap:anywhere !important;
  }
  .site-page .slide .strategy,
  .site-page .slide .ancient-ring,
  .site-page .slide .bridge-lines,
  .site-page .slide .row,
  .site-page .slide .pillars,
  .site-page .slide .pipeline,
  .site-page .slide .junction-board,
  .site-page .slide .receipt-wall,
  .site-page .slide .receipts,
  .site-page .slide .playbook{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
  }
  .site-page .slide .ring-item,
  .site-page .slide .ring-core,
  .site-page .slide .strategy-card,
  .site-page .slide .source-card,
  .site-page .slide .photo,
  .site-page .slide .ref,
  .site-page .slide .txt,
  .site-page .slide .language-block,
  .site-page .slide .pillar,
  .site-page .slide .scard,
  .site-page .slide .junction-card,
  .site-page .slide .receipt,
  .site-page .slide .play-step,
  .site-page .slide .stage,
  .site-page .slide .col,
  .site-page .slide .card,
  .site-page .slide .hero,
  .site-page .slide .bridge-line{
    position:static !important;
    inset:auto !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    transform:none !important;
    overflow-wrap:anywhere !important;
  }
  .site-page .slide .photo img,
  .site-page .slide svg{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
  .site-page .slide .arrow,
  .site-page .slide .junction-arrow{
    position:static !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    transform:none !important;
    text-align:center !important;
    font-size:clamp(22px,7vw,32px) !important;
  }
  /* Preserve diagram grammar instead of flattening these into lists. */
  .site-page .slide .doc-row{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    padding-bottom:8px !important;
  }
  .site-page .slide .doc-row .mini-doc{
    flex:0 0 74% !important;
    height:178px !important;
    min-width:230px !important;
  }
  .site-page .slide .doc-row .mini-arrow{
    flex:0 0 auto !important;
  }
  .site-page .slide .court-board{
    display:grid !important;
    grid-template-columns:minmax(230px,1fr) 42px minmax(230px,1fr) !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    padding-bottom:8px !important;
  }
  .site-page .slide .court-board .court-frame{
    min-height:220px !important;
    padding:18px !important;
  }
  .site-page .slide .court-board .court-arrow{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:clamp(26px,8vw,38px) !important;
  }
  .site-page .slide table,
  .site-page .slide .os-kernel-table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    white-space:normal !important;
    font-size:clamp(13px,3.4vw,15px) !important;
  }
  .site-page .slide th,
  .site-page .slide td{
    min-width:96px !important;
    padding:9px 8px !important;
    overflow-wrap:anywhere !important;
  }
  /* drawing-only layers built for the 1280x720 canvas */
  .site-page .slide .timebar,
  .site-page .slide .beam,
  .site-page .slide .post,
  .site-page .slide .base,
  .site-page .slide .tower,
  .site-page .slide .arch,
  .site-page .slide .door,
  .site-page .slide .pipe,
  .site-page .slide .router-line,
  .site-page .slide .machine-arrow,
  .site-page .slide .capture-arrow,
  .site-page .slide .snap-line,
  .site-page .slide .red-thread,
  .site-page .slide .wave,
  .site-page .slide .crowd-dots,
  .site-page .slide .loyalty-rays,
  .site-page .slide .gov-building,
  .site-page .slide .seal,
  .site-page .slide .reframe-path,
  .site-page .slide .missing-origin-bg,
  .site-page .slide .purchase-arrow{
    display:none !important;
  }
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-10 · brandbook-inspo pass.
   Source: media-network/brandbookinspo.pdf, applied per
   site/NOTES-brandbook-inspo.md. System ideas only — the mutable
   glyph, the traveling thread, the glow opener, the manifesto —
   in the site's own parchment/mechanism palette.
   ============================================================ */

/* 1 · The mutable glyph. One small mark in the sitebar brand takes the
   current page's mechanism color; the wordmark itself never changes. */
.sitebar .brand-mark{
  display:inline-block; width:9px; height:9px; margin-right:9px;
  background:var(--gold); border-radius:2px;
  transform:rotate(45deg); vertical-align:1px;
}
.page-operating-system .sitebar .brand-mark{background:var(--law2); border-radius:50%;}
.page-operation .sitebar .brand-mark{background:var(--warn);}
.page-creators .sitebar .brand-mark{background:#57b271; border-radius:50% 2px 50% 2px;}
.page-framework .sitebar .brand-mark{background:var(--gold); border-radius:50% 2px 50% 2px;}

/* 2 · The traveling thread. One thin gold line snakes between the
   spotlight run and the chapter index — narrative as a single thread. */
.thread-divide{
  max-width:1200px; margin:24px auto -6px; padding:0 22px;
  color:var(--gold); opacity:.5; height:60px;
}
.thread-divide svg{width:100%; height:100%; display:block;}

/* 3 · Glow opener on the hero title — restrained, gold, brandbook-style. */
.site-home .hero h1{text-shadow:0 0 38px rgba(255,210,74,.22);}

/* 4 · The manifesto card. The rallying h2 inside the spotlight grid gets
   a deliberate slot instead of falling through the grid unstyled. */
.spotlight-grid .manifesto{
  margin:0; align-self:center; justify-self:center;
  grid-column:2/-1;
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(22px,2.3vw,30px); line-height:1.28;
  color:#f6efe3; text-align:center; padding:18px 8px;
}
.spotlight-grid .manifesto .hl{
  color:var(--gold);
  text-shadow:0 0 22px rgba(255,210,74,.35);
}
@media (max-width:700px){
  .spotlight-grid .manifesto{grid-column:1/-1;}
}

/* 5 · Action springs. Primary calls lift on hover; arrows stay put. */
.primary-action,.secondary-action{transition:transform .15s, box-shadow .15s, border-color .15s;}
.primary-action:hover{transform:translateY(-2px); box-shadow:0 6px 22px rgba(255,210,74,.28);}

/* 6 · The run-up finale (v2). After the dark KGB bridge, daylight:
   a light repair-green band quoting slide 48 — the site's last word
   is the counter-play, and it is bright. */
.runup-finale{
  background:var(--greenbg);
  border-top:6px solid var(--good);
  padding:72px 22px 78px;
}
.runup-inner{max-width:880px; margin:0 auto; text-align:center;}
.runup-kicker{
  font-family:"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--good);
  margin-bottom:18px;
}
.runup-finale h2{
  margin:0; font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4.4vw,54px); line-height:1.06;
  color:var(--ink); font-weight:700; letter-spacing:-.5px;
}
.runup-finale h2 .up{color:var(--good);}
.runup-sub{
  margin:18px auto 30px; max-width:560px;
  font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.55; color:var(--muted);
}
.runup-steps{
  list-style:none; counter-reset:rf; margin:0 0 34px; padding:0;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif;
}
.runup-steps li{
  counter-increment:rf;
  background:#fff; border:1px solid rgba(30,107,58,.32); border-radius:999px;
  padding:9px 16px 9px 12px; font-size:14.5px; font-weight:600; color:var(--ink2);
}
.runup-steps li::before{
  content:counter(rf); display:inline-block; width:20px; height:20px;
  margin-right:8px; border-radius:50%; background:var(--good); color:#fff;
  font-size:12px; font-weight:700; text-align:center; line-height:20px;
}
.runup-cta{
  display:inline-block; text-decoration:none;
  font-family:"SF Mono",Menlo,monospace; font-size:14px; letter-spacing:.04em;
  color:var(--greenbg); background:var(--ink); border-radius:10px;
  padding:14px 26px; transition:transform .15s, box-shadow .15s;
}
.runup-cta:hover{transform:translateY(-2px); box-shadow:0 8px 26px rgba(30,107,58,.3);}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-10 · triangulation pass, per
   site/NOTES-triangulation-site-plan.md.
   1) The hero manifesto gets a deliberate slot (it moved out of
      the spotlight grid, so the old rule no longer reached it).
   2) The loop — Funding / Creators / Research as a real triangle.
   3) The archive drawer — the chapter grid folds until asked for.
   ============================================================ */

/* 1 · manifesto inside the hero: full-width closing row, centered. */
.hero .manifesto{
  grid-column:1/-1; margin:34px 0 0; padding:22px 8px 0;
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(21px,2.4vw,30px); line-height:1.3;
  color:#f6efe3; text-align:center;
}
.hero .manifesto .hl{
  color:var(--gold);
  text-shadow:0 0 22px rgba(255,210,74,.35);
}

/* 2 · the loop. Three corner doors on a dashed triangle; the center
   states the thesis. Corners carry mechanism colors: research=law,
   creators=repair green, funding=gold. */
.site-home .netloop.slide{
  width:auto; height:auto; max-width:1180px; min-height:0;
  margin:34px auto 0; padding:38px 28px 34px;
  overflow:visible; break-before:auto; page-break-before:auto;
  border-radius:0;
  scroll-margin-top:96px;
}
.site-home .netloop .section-head{max-width:780px;}
.site-home .netloop .section-head h2{
  font-size:clamp(42px,6.2vw,76px);
  line-height:.96;
  letter-spacing:0;
}
.site-home .netloop .section-head p{
  max-width:720px;
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.25;
  font-weight:760;
  color:#d8cabc;
}
.netloop-tri{
  position:relative; margin-top:30px; min-height:470px;
}
.netloop-lines{
  position:absolute; inset:0; width:100%; height:100%;
  color:rgba(255,210,74,.4); pointer-events:none;
}
.netloop-center{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  font-family:"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; text-align:center;
  color:var(--gold); line-height:1.9;
}
.netloop-node{
  position:absolute; width:min(300px,30%);
  display:flex; flex-direction:column; gap:8px;
  padding:20px 20px 16px; border-radius:8px; text-decoration:none;
  color:#f8f0e4; background:rgba(255,255,255,.035);
  border:1px solid rgba(169,154,135,.44);
  border-top:4px solid var(--corner,var(--gold));
  transition:transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.netloop-node:hover{
  transform:translateY(-4px);
  border-color:var(--corner,var(--gold));
  background:rgba(255,255,255,.07);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.netloop-node:focus-visible{outline:3px solid var(--law2); outline-offset:3px;}
.netloop-node.research{--corner:var(--redbg); left:50%; top:0; transform:translateX(-50%);}
.netloop-node.research:hover{transform:translateX(-50%) translateY(-4px);}
.netloop-node.creators{--corner:var(--accent); left:0; bottom:0;}
.netloop-node.funding{--corner:var(--warn); right:0; bottom:0;}
.netloop-node .ln-k{
  font-family:"SF Mono",Menlo,monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--corner,var(--gold));
}
.netloop-node strong{
  font-family:Georgia,"Times New Roman",serif; font-size:34px;
  line-height:1; font-weight:700;
}
.netloop-node span:nth-of-type(2){color:#cfc7ba; font-size:14.5px; line-height:1.45;}
.netloop-node .ln-go{
  margin-top:8px; font-family:"SF Mono",Menlo,monospace;
  font-size:12.5px; letter-spacing:.04em; color:#e8e2d8;
}
.netloop-node:hover .ln-go{color:var(--corner,var(--gold));}
.failure-modes{
  margin-top:30px;
  padding:24px;
  border:1px solid rgba(255,210,74,.42);
  background:rgba(251,250,247,.055);
  box-shadow:9px 9px 0 rgba(0,0,0,.28);
}
.failure-intro{
  display:grid;
  grid-template-columns:minmax(170px,.38fr) 1fr;
  gap:18px;
  align-items:end;
  margin-bottom:18px;
}
.failure-intro .eyebrow{margin:0;}
.failure-intro h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,3vw,38px);
  line-height:1.05;
  color:#fbfaf7;
}
.failure-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.failure-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  color:#f8f0e4;
  text-decoration:none;
  background:rgba(8,8,6,.44);
  border:1px solid rgba(169,154,135,.48);
  border-left:6px solid var(--warn);
  transition:transform .16s, border-color .16s, background .16s;
}
.failure-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,210,74,.78);
  background:rgba(8,8,6,.62);
}
.failure-pair{
  font-family:"SF Mono",Menlo,monospace;
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--warn);
}
.failure-card strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:29px;
  line-height:1;
}
.failure-card span:last-child{
  color:#d8cabc;
  font-size:15px;
  line-height:1.42;
}
.failure-close{
  margin:18px 0 0;
  padding-left:14px;
  border-left:8px solid var(--gold);
  color:#fbfaf7;
  font-size:20px;
  line-height:1.3;
  font-weight:850;
}
/* the income line under the triangle — the economy in one breath */
.netloop-income{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 14px; margin:26px; padding:14px 18px;
  border:1px dashed rgba(169,154,135,.5); border-radius:999px;
  font-family:"SF Mono",Menlo,monospace; font-size:12.5px;
  letter-spacing:.06em; color:#bdb4a6;
}
.netloop-income .arr{color:var(--gold);}
@media(max-width:820px){
  .site-home .netloop.slide{
    margin-top:24px;
    padding:30px 18px 28px;
  }
  .netloop-tri{min-height:0; display:flex; flex-direction:column; gap:14px; margin-top:24px;}
  .netloop-lines{display:none;}
  .netloop-node,.netloop-node.research,.netloop-node.creators,.netloop-node.funding{
    position:static; width:auto; transform:none;
  }
  .netloop-node.research:hover{transform:translateY(-4px);}
  .netloop-center{
    position:static; transform:none; order:10;
    padding-top:4px; line-height:1.6;
  }
  .netloop-income{border-radius:14px;}
  .failure-intro{grid-template-columns:1fr;}
  .failure-grid{grid-template-columns:1fr;}
  .failure-card{min-height:0;}
}

/* Research path page. The Einstein case should feel like a clean evidence
   room, not a raw file handoff. */
.page-why-research main,
.page-why-join main,
.page-why-fund main{
  padding-bottom:52px;
}
.research-hero{
  width:auto;
  min-height:0;
  max-width:1180px;
  margin:34px auto 0;
  padding:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,460px);
  gap:34px;
  align-items:center;
  overflow:hidden;
  border-top-color:var(--law2);
}
.research-copy h1{
  margin:0;
  max-width:720px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(46px,7vw,86px);
  line-height:.92;
  letter-spacing:0;
  color:#fbfaf7;
}
.research-copy p{
  max-width:670px;
  margin:22px 0 0;
  color:#d9d0c4;
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.28;
  font-weight:740;
}
.research-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.einstein-visual{
  margin:0;
  padding:12px;
  border:1px solid rgba(79,173,255,.42);
  background:rgba(255,255,255,.055);
  box-shadow:12px 12px 0 rgba(0,0,0,.26);
}
.einstein-visual img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid rgba(251,250,247,.16);
}
.einstein-visual figcaption{
  margin:12px 2px 0;
  color:#c8d8e6;
  font-size:13.5px;
  line-height:1.35;
  font-family:"SF Mono",Menlo,monospace;
}
.research-paper,
.research-flow{
  max-width:1180px;
  margin:0 auto;
}
.research-paper .section-head h2,
.research-flow .section-head h2{
  max-width:930px;
}
.research-question-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.research-question-grid article{
  min-height:245px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px;
  color:var(--ink);
  background:#fbfaf7;
  border:1px solid rgba(13,59,76,.18);
  border-top:6px solid var(--law2);
  box-shadow:8px 8px 0 rgba(13,59,76,.08);
}
.research-question-grid article:first-child{
  border-top-color:var(--warn);
}
.research-question-grid article strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:31px;
  line-height:1.03;
}
.research-question-grid article span:not(.failure-pair){
  color:#4f5d66;
  font-size:17px;
  line-height:1.35;
}
.research-ladder{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  counter-reset:research;
}
.research-ladder span{
  counter-increment:research;
  min-height:118px;
  display:flex;
  align-items:end;
  padding:16px;
  color:#f8f0e4;
  background:#11100e;
  border:1px solid rgba(169,154,135,.5);
  border-bottom:6px solid var(--law2);
  font-family:"SF Mono",Menlo,monospace;
  font-size:13px;
  letter-spacing:.08em;
  line-height:1.25;
  text-transform:uppercase;
  position:relative;
}
.research-ladder span::before{
  content:counter(research);
  position:absolute;
  left:14px;
  top:12px;
  color:var(--law2);
  font-size:24px;
  font-weight:900;
  letter-spacing:0;
}
@media(max-width:900px){
  .research-hero{
    grid-template-columns:1fr;
    margin-top:24px;
    padding:30px 18px 28px;
  }
  .research-question-grid,
  .research-ladder{
    grid-template-columns:1fr;
  }
  .research-question-grid article,
  .research-ladder span{
    min-height:0;
  }
}

/* Role pages (why-join / why-fund) built out from docs/why-creators-join-this.md,
   docs/why-fund-this.md and docs/talent-agency-tool-income-model.md.
   One accent per triangle corner: creators=repair green, funding=gold. */
.role-page{--accent:var(--gold);}
.page-why-join{--accent:#57b271;}
.page-why-fund{--accent:var(--gold);}
.page-why-research main,
.role-page main,
.public-essay main{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto;
  padding-bottom:54px;
}
.role-page .spotlight,
.page-why-research .spotlight{
  width:auto;
  max-width:none;
  margin:28px 0 0;
  padding:42px;
  border-radius:0;
}
.role-hero{
  border-top:7px solid var(--accent);
  padding-bottom:10px;
  background:
    radial-gradient(circle at 78% 16%,rgba(255,210,74,.14),transparent 28%),
    linear-gradient(135deg,#11100e 0%,#201a12 100%);
}
.role-hero .eyebrow{color:var(--accent);}
.role-hero h1{
  margin:10px 0 0; max-width:940px;
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(42px,6.4vw,80px); line-height:.96; color:#fbfaf7;
}
.role-lede{
  max-width:760px; margin:22px 0 0;
  color:#d9d0c4; font-size:clamp(17px,2vw,22px); line-height:1.35; font-weight:700;
}
.role-promise{
  max-width:720px; margin:26px 0 0; padding:16px 20px;
  border-left:6px solid var(--accent); background:rgba(255,255,255,.05);
  color:#f4ead9; font-size:19px; line-height:1.42; font-weight:800;
}
.role-page .product-band{
  margin-top:28px;
  box-shadow:none;
}
.role-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
.role-actions a,
.research-actions a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:8px;
  text-decoration:none;
  font-family:"SF Mono",Menlo,monospace;
  font-size:13px;
  letter-spacing:.04em;
  font-weight:850;
  line-height:1.15;
}
.role-page .section-head{max-width:820px;}
/* two-column deal: what each side brings. "You" column carries the accent. */
.deal-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.deal-col{
  background:#fbfaf7; color:var(--ink);
  border:1px solid rgba(17,16,14,.2); border-top:6px solid #11100e;
  padding:26px; box-shadow:8px 8px 0 rgba(0,0,0,.3);
}
.deal-col.you{border-top-color:var(--accent);}
.deal-col.bad{border-top-color:var(--warn);}
.deal-col h3{
  margin:0 0 16px; font-family:"SF Mono",Menlo,monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#5e554b;
}
.deal-col ul{margin:0; padding:0; list-style:none; display:grid; gap:12px;}
.deal-col li{
  position:relative; padding-left:20px;
  font-size:17.5px; line-height:1.38; font-weight:650;
}
.deal-col li::before{content:"—"; position:absolute; left:0; color:#8b8072;}
/* card grid for "what you get" / "what funding buys" */
.get-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.get-grid article{
  display:flex; flex-direction:column; gap:10px; min-height:190px;
  padding:20px; background:#fbfaf7; color:var(--ink);
  border:1px solid rgba(17,16,14,.2); border-top:6px solid var(--accent);
  box-shadow:6px 6px 0 rgba(0,0,0,.28);
}
.get-grid .gk{
  font-family:"SF Mono",Menlo,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:#5e554b;
}
.get-grid strong{font-family:Georgia,"Times New Roman",serif; font-size:24px; line-height:1.05;}
.get-grid article > span:last-child{color:#4a4238; font-size:15.5px; line-height:1.4;}
/* numbered ladder: revenue streams / durability steps */
.earn-ladder{list-style:none; counter-reset:earn; margin:0; padding:0; display:grid; gap:12px;}
.earn-ladder li{
  counter-increment:earn;
  display:grid; grid-template-columns:56px minmax(200px,300px) 1fr;
  gap:20px; align-items:center; padding:20px 24px;
  background:#11100e; color:#f8f0e4;
  border:1px solid rgba(169,154,135,.5); border-left:8px solid var(--accent);
}
.earn-ladder li::before{
  content:"0" counter(earn);
  font-family:"SF Mono",Menlo,monospace; font-size:26px; font-weight:900;
  color:var(--accent);
}
.earn-ladder strong{font-family:Georgia,"Times New Roman",serif; font-size:26px; line-height:1.05;}
.earn-ladder span{color:#cfc7ba; font-size:15.5px; line-height:1.42;}
/* the funding engine: four stages, gold arrows between */
.engine-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.engine-flow > div{
  position:relative; min-height:170px; display:flex; flex-direction:column; gap:10px;
  padding:20px; background:#11100e; color:#f8f0e4;
  border:1px solid rgba(169,154,135,.5); border-bottom:6px solid var(--accent);
}
.engine-flow > div:not(:last-child)::after{
  content:"\2192"; position:absolute; right:-15px; top:42%; z-index:2;
  color:var(--gold); font-size:26px; font-weight:900;
}
.engine-flow b{font-family:Georgia,"Times New Roman",serif; font-size:27px; line-height:1;}
.engine-flow span{color:#cfc7ba; font-size:15px; line-height:1.42;}
/* the refusals — oxblood, the subversion color */
.not-list{list-style:none; margin:0; padding:0; display:grid; gap:10px; max-width:880px;}
.not-list li{
  padding:15px 20px; font-size:19px; font-weight:800; color:#f3e6dd;
  background:rgba(139,30,30,.16); border:1px solid rgba(139,30,30,.55);
  border-left:8px solid #8b1e1e;
}
/* four blunt funder questions — asked and answered, two sentences each */
.blunt-qa{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.blunt-qa article{
  padding:24px 26px; background:#fbfaf7; color:var(--ink);
  border:1px solid rgba(17,16,14,.2); border-left:8px solid var(--accent);
  box-shadow:8px 8px 0 rgba(0,0,0,.3);
}
.blunt-qa .qk{
  display:block; margin-bottom:10px;
  font-family:"SF Mono",Menlo,monospace; font-size:12px; font-weight:900;
  letter-spacing:.18em; text-transform:uppercase; color:#5e554b;
}
.blunt-qa h3{
  margin:0 0 12px; font-family:Georgia,"Times New Roman",serif;
  font-size:27px; line-height:1.05;
}
.blunt-qa p{margin:0; color:#4a4238; font-size:16px; line-height:1.45;}
/* closing band */
.role-quote{
  max-width:1180px; margin:44px auto 0; padding:46px 36px 42px;
  background:#11100e; border-top:7px solid var(--accent); text-align:center;
}
.role-quote p{
  margin:0 0 26px; font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4.2vw,50px); line-height:1.08; color:#fbfaf7;
}

/* Public pages opened for first-read visitors. Keep them legible without
   Rebecca in the room: article rhythm, clear hierarchy, fewer deck artifacts. */
.public-essay{
  background:#f2ede6;
  color:var(--ink);
  overflow-x:hidden;
}
.public-essay main{
  padding-top:30px;
}
.essay-hero{
  padding:54px 46px 48px;
  color:#fbfaf7;
  background:
    linear-gradient(135deg,rgba(17,16,14,.96),rgba(25,15,31,.96)),
    radial-gradient(circle at 80% 20%,rgba(255,210,74,.28),transparent 32%);
  border-top:7px solid var(--gold);
}
.page-what-no-one .essay-hero{
  background:
    linear-gradient(100deg, rgba(8,8,6,.9), rgba(8,8,6,.62) 58%, rgba(8,8,6,.84)),
    url("deck-assets/img/noprophet.jpg") center / cover;
}
.essay-hero h1{
  max-width:900px;
  margin:12px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,7vw,86px);
  line-height:.96;
  letter-spacing:0;
  color:#fbfaf7;
}
.essay-deck{
  max-width:820px;
  margin:24px 0 0;
  color:#efe3d1;
  font-size:clamp(20px,2.6vw,29px);
  line-height:1.26;
  font-weight:760;
}
.essay-lead,
.essay-section,
.essay-digest{
  margin-top:24px;
  padding:34px 38px;
  background:#fbfaf7;
  border:1px solid rgba(17,16,14,.16);
  border-left:7px solid var(--gold);
}
.essay-lead{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.essay-lead p,
.essay-section p{
  margin:0;
  color:#312b24;
  font-size:19px;
  line-height:1.55;
}
.essay-section p + p{margin-top:18px;}
.essay-k{
  display:block;
  margin-bottom:12px;
  font-family:"SF Mono",Menlo,monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
  color:#8b1e1e;
}
.essay-section h2,
.essay-digest h2{
  max-width:900px;
  margin:0 0 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,4vw,48px);
  line-height:1.04;
  letter-spacing:0;
  color:var(--ink);
}
.essay-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px;
}
.essay-grid.three{grid-template-columns:repeat(3,1fr);}
.essay-grid article{
  min-height:250px;
  padding:28px;
  background:#11100e;
  color:#fbfaf7;
  border-top:7px solid var(--gold);
}
.essay-grid article:nth-child(2){border-top-color:#5fe3c1;}
.essay-grid.three article:nth-child(2){border-top-color:#5f7fe8;}
.essay-grid.three article:nth-child(3){border-top-color:#eb5636;}
.essay-grid h2,
.essay-grid h3{
  margin:0 0 16px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(27px,3.2vw,40px);
  line-height:1.04;
  color:#fbfaf7;
}
.essay-grid p{
  margin:0;
  color:#d7cec0;
  font-size:17px;
  line-height:1.48;
}
.essay-band{
  margin-top:24px;
  padding:34px 38px;
  background:#8b1e1e;
  color:#fff8ea;
}
.essay-band p{
  max-width:980px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4.2vw,52px);
  line-height:1.05;
}
.essay-digest ol{
  counter-reset:digest;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
}
.essay-digest li{
  counter-increment:digest;
  position:relative;
  min-height:58px;
  padding:12px 14px 12px 54px;
  background:#f2ede6;
  color:#352f28;
  border:1px solid rgba(17,16,14,.12);
  font-size:15.5px;
  line-height:1.35;
}
.essay-digest li::before{
  content:counter(digest);
  position:absolute;
  left:14px;
  top:12px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  background:#11100e;
  color:var(--gold);
  font-family:"SF Mono",Menlo,monospace;
  font-size:12px;
  font-weight:900;
}

.page-os-open .story-bridge{
  text-decoration:none;
}

@media(max-width:860px){
  .page-why-research main,
  .role-page main,
  .public-essay main{
    width:min(100% - 28px,1180px);
  }
  .role-page .spotlight,
  .page-why-research .spotlight{
    padding:28px 18px;
  }
  .essay-hero,
  .essay-lead,
  .essay-section,
  .essay-digest,
  .essay-band{
    padding:28px 20px;
  }
  .essay-lead,
  .essay-grid,
  .essay-grid.three,
  .essay-digest ol{
    grid-template-columns:1fr;
  }
  .essay-grid article{min-height:0;}
}

/* About page: CV-derived credibility without turning the page into a resume. */
.page-about{--accent:var(--gold);}
body.page-about{overflow-x:hidden;}
.about-hero{
  border-top:7px solid var(--accent);
  padding-bottom:18px;
}
.about-hero h1{
  margin:10px 0 0; max-width:980px;
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(42px,6.2vw,84px); line-height:.98; color:#fbfaf7;
}
.about-lede{
  max-width:820px; margin:24px 0 0;
  color:#d9d0c4; font-size:clamp(18px,2vw,23px); line-height:1.38;
  font-weight:700;
}
.about-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
.about-actions a{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:8px; text-decoration:none;
  font-family:"SF Mono",Menlo,monospace; font-size:13px; letter-spacing:.04em;
  font-weight:800;
}
.about-proof-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.about-proof-grid article{
  min-height:220px; padding:24px;
  background:#fbfaf7; color:var(--ink);
  border:1px solid rgba(17,16,14,.2);
  border-top:6px solid var(--accent);
  box-shadow:8px 8px 0 rgba(0,0,0,.28);
}
.proof-k{
  display:block; margin-bottom:12px;
  font-family:"SF Mono",Menlo,monospace; font-size:11px; font-weight:900;
  letter-spacing:.18em; text-transform:uppercase; color:#5e554b;
}
.about-proof-grid strong{
  display:block; font-family:Georgia,"Times New Roman",serif;
  font-size:28px; line-height:1.05;
}
.about-proof-grid p{
  margin:14px 0 0; color:#4a4238; font-size:16px; line-height:1.45;
}
.method-list{display:grid; gap:12px;}
.method-list > div{
  display:grid; grid-template-columns:58px minmax(220px,340px) 1fr;
  gap:18px; align-items:start;
  padding:20px 24px;
  background:#11100e; color:#f8f0e4;
  border:1px solid rgba(169,154,135,.5);
  border-left:8px solid var(--accent);
}
.method-list span{
  font-family:"SF Mono",Menlo,monospace; font-size:24px; font-weight:900;
  color:var(--accent);
}
.method-list strong{
  font-family:Georgia,"Times New Roman",serif; font-size:26px; line-height:1.05;
}
.method-list p{margin:0; color:#cfc7ba; font-size:16px; line-height:1.45;}
@media(max-width:860px){
  .deal-cols{grid-template-columns:1fr;}
  .engine-flow{grid-template-columns:1fr;}
  .engine-flow > div{min-height:0;}
  .engine-flow > div:not(:last-child)::after{content:"\2193"; right:auto; left:24px; top:auto; bottom:-24px;}
  .earn-ladder li{grid-template-columns:44px 1fr; grid-template-rows:auto auto;}
  .earn-ladder li::before{grid-row:span 2;}
  .get-grid article{min-height:0;}
  .blunt-qa{grid-template-columns:1fr;}
  .about-proof-grid{grid-template-columns:1fr;}
  .about-proof-grid article{min-height:0;}
  .method-list > div{grid-template-columns:44px 1fr; gap:12px 16px;}
  .method-list p{grid-column:2;}
}
@media(max-width:640px){
  .page-about .spotlight{padding-left:18px; padding-right:18px;}
  .page-about *{box-sizing:border-box;}
  .about-hero h1,
  .about-lede,
  .page-about .section-head,
  .page-about .section-head h2,
  .page-about .section-head p{
    max-width:calc(100vw - 36px);
    overflow-wrap:break-word;
  }
  .about-hero h1,
  .page-about .section-head h2{max-width:300px; font-size:36px; line-height:1;}
  .about-lede,
  .page-about .section-head p{max-width:300px; font-size:17px; line-height:1.42;}
  .about-actions a{width:100%;}
}

/* 3 · the archive drawer. The grid keeps every card; the drawer keeps
   the index calm. Summary reads as one wide, inviting band. */
.archive > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:18px;
  margin:6px 0 26px; padding:20px 24px;
  border:1px solid rgba(255,210,74,.4); border-radius:10px;
  background:rgba(255,210,74,.05);
  transition:border-color .16s, background .16s;
}
.archive > summary::-webkit-details-marker{display:none;}
.archive > summary:hover{border-color:rgba(255,210,74,.8); background:rgba(255,210,74,.09);}
.archive > summary:focus-visible{outline:3px solid var(--law2); outline-offset:3px;}
.archive .a-k{
  font-family:"SF Mono",Menlo,monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(255,210,74,.5); border-radius:4px; padding:6px 8px;
  flex:0 0 auto;
}
.archive .a-t{
  font-family:Georgia,"Times New Roman",serif; font-size:clamp(18px,2.2vw,24px);
  font-weight:700; color:#f8f0e4; line-height:1.15;
}
.archive .a-count{
  margin-left:auto; flex:0 0 auto;
  font-family:"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.08em; color:var(--muted);
}
.archive > summary::after{
  content:"+"; flex:0 0 30px;
  display:grid; place-items:center; width:30px; height:30px;
  border-radius:999px; border:1px solid rgba(255,210,74,.58);
  color:var(--gold); background:rgba(255,210,74,.08);
  font:900 20px/1 "SF Mono",Menlo,monospace;
}
.archive[open] > summary::after{content:"\2212";}
.archive[open] > summary{margin-bottom:30px;}
@media(max-width:640px){
  .archive > summary{flex-wrap:wrap; gap:10px; padding:16px;}
  .archive .a-count{display:none;}
}

/* Failure flavor pages: site-shell pages that explain the three broken
   two-corner models without touching the slide layer. */
.page-flavor{
  min-height:100vh;
  background:#0b0a08;
  color:#f8f0e4;
  font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif;
}
html:has(> body.page-flavor){background:#0b0a08;}
.flavor-shell{
  max-width:1180px;
  margin:0 auto;
  padding:52px 22px 80px;
}
.flavor-hero{
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:34px;
  align-items:center;
  padding:42px;
  border-top:6px solid var(--warn);
  background:var(--chrome);
  background-image:radial-gradient(rgba(255,210,74,.06) 1px, transparent 1px), linear-gradient(135deg, rgba(139,30,30,.22), rgba(8,8,6,0));
  background-size:36px 36px, cover;
  box-shadow:inset 0 0 0 1px rgba(255,210,74,.2), 0 24px 70px rgba(0,0,0,.28);
}
.flavor-kicker{
  font-family:"SF Mono",Menlo,monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--warn);
}
.flavor-hero h1{
  margin:14px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(46px,7vw,84px);
  line-height:.95;
  letter-spacing:0;
}
.flavor-hero .flavor-lede{
  margin:22px 0 0;
  max-width:680px;
  color:#d8cabc;
  font-size:clamp(19px,2vw,25px);
  line-height:1.25;
  font-weight:760;
}
.flavor-proof{
  border:2px solid rgba(255,210,74,.72);
  box-shadow:9px 9px 0 rgba(0,0,0,.34);
  background:rgba(251,250,247,.06);
  padding:26px;
}
.flavor-proof h2{
  margin:0 0 18px;
  font-family:"SF Mono",Menlo,monospace;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.flavor-proof p{
  margin:0 0 14px;
  color:#fbfaf7;
  font-size:22px;
  line-height:1.2;
  font-weight:850;
}
.flavor-proof p:last-child{margin-bottom:0;}
.flavor-sections{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:26px;
}
.flavor-panel{
  padding:22px;
  border:1px solid rgba(169,154,135,.44);
  background:rgba(255,255,255,.035);
}
.flavor-panel h2{
  margin:0 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  line-height:1.08;
}
.flavor-panel p,
.flavor-panel li{
  color:#cfc7ba;
  font-size:15.5px;
  line-height:1.48;
}
.flavor-panel ul{margin:0; padding-left:18px;}
.flavor-panel p{margin:0;}
.flavor-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
.flavor-action{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:12px 16px;
  border:1px solid rgba(255,210,74,.5);
  color:#f8f0e4;
  background:rgba(255,210,74,.08);
  text-decoration:none;
  font-family:"SF Mono",Menlo,monospace;
  font-size:12.5px;
  letter-spacing:.05em;
}
.flavor-action.primary{
  background:var(--gold);
  border-color:var(--gold);
  color:#171006;
  font-weight:800;
}
.flavor-action:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
}
@media(max-width:900px){
  .flavor-hero{grid-template-columns:1fr; padding:28px;}
  .flavor-sections{grid-template-columns:1fr;}
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-12 (v3) · landing layer, per
   site/NOTES-artifact-homepage-inspo.md. Doors rebuilt in the
   house structural grammar (slow-chain / failure-modes /
   netloop-node): square slabs on translucent parchment, hard
   offset shadows, a color-coded top edge per door (creators and
   funding reuse their netloop corner colors), oversized italic
   numerals. Section head follows the standard eyebrow → h2 → p
   grammar; the one-breath line is the section paragraph. */
/* v4: the doors chapter rides directly under the plan board — no
   second section head, one serif bridge line carries the turn.
   The junction margin tightens so plan + doors read as one beat. */
.theplan + .threeways{margin-top:clamp(24px,3vw,44px); }
.ways-bridge{
  margin:0; scroll-margin-top:96px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,3.2vw,40px); line-height:1.06;
  color:#f8f0e4; font-weight:700;
}
.ways-bridge em{font-style:italic; color:var(--gold);}
.onebreath{
  margin:14px 0 0; max-width:760px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px; line-height:1.55; color:#cfc7ba;
}
.onebreath .ob-k{
  font-family:"SF Mono",Menlo,monospace; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  margin-right:6px;
}
.threeways-grid{
  margin-top:26px;
  display:grid; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr));
}
/* failure modes + income strip folded into the operating-model slab:
   one chapter — triangle, then the known failures, then the loop. */
.site-home .netloop .failure-modes{margin-top:38px;}
.site-home .netloop .netloop-income{margin-top:24px;}
.way{
  --door:var(--gold);
  position:relative; display:flex; flex-direction:column; gap:10px;
  min-height:300px; padding:24px 24px 20px;
  background:rgba(251,250,247,.05);
  border:1px solid rgba(169,154,135,.44);
  border-top:6px solid var(--door);
  box-shadow:9px 9px 0 rgba(0,0,0,.3);
  color:#f8f0e4; text-decoration:none;
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.way:hover{
  transform:translate(-2px,-4px);
  border-color:var(--door);
  border-top-color:var(--door);
  box-shadow:13px 13px 0 rgba(0,0,0,.36);
}
.way.new{--door:var(--gold);}
.way.creators{--door:var(--accent);}
.way.funders{--door:var(--warn);}
.way-num{
  font-family:Georgia,"Times New Roman",serif; font-style:italic;
  font-size:68px; line-height:.9; color:var(--door);
}
.way-k{
  margin-top:2px;
  font-family:"SF Mono",Menlo,monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--door);
}
.way strong{
  margin-top:4px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:29px; line-height:1.06; font-weight:700;
}
.way > span:not([class]){font-size:15px; line-height:1.48; color:#cfc7ba;}
.way-go{
  margin-top:auto; padding-top:16px;
  font-family:"SF Mono",Menlo,monospace; font-size:12.5px; letter-spacing:.04em;
  color:#e8e2d8;
}
.way:hover .way-go{color:var(--door);}
@media(max-width:860px){
  .threeways-grid{grid-template-columns:1fr; gap:18px;}
  .way{min-height:0;}
  .way-num{font-size:52px;}
  .onebreath{font-size:17px;}
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-12 · the home goes full-bleed:
   every index segment spans the window; side padding scales with
   the viewport instead of stopping at a 1180px column. Home-only —
   article pages keep their reading column. */
.site-home .hero,
.site-home .spotlight,
.site-home .path,
.site-home .bridge-map,
.site-home .netloop.slide,
.site-home .grid,
.site-home .thread-divide,
.site-home .runup-inner{max-width:none;}
.site-home .hero,
.site-home .spotlight,
.site-home .path,
.site-home .netloop.slide{
  padding-left:clamp(28px,4vw,84px);
  padding-right:clamp(28px,4vw,84px);
}
/* the deck stylesheet gives .slide a fixed 1280px stage; on the
   full-bleed home it stretches with the window instead */
.site-home .slide{width:auto;}

/* UX-DESIGNER CHANGE 2026-07-12 · vertical rhythm: every top-level
   home segment gets one consistent, viewport-scaled gap. Margins,
   not padding, so the dark slabs (bridge, netloop) separate with
   visible page ground rather than growing their own interiors. */
.site-home main > *{margin-top:clamp(48px,6vw,104px);}

/* UX-DESIGNER CHANGE 2026-07-12 (v2) · the plan as a route map:
   four stations on one dashed gold thread (narrative-as-thread),
   mounted on a structural slab like the failure-modes panel. The
   thread runs through the square numerals and exits right — the
   plan points past its own last step. */
.theplan h2 em{font-style:italic; color:var(--gold);}
.plan-board{
  position:relative; margin-top:30px;
  padding:36px 38px 30px;
  border:1px solid rgba(255,210,74,.42);
  background:
    radial-gradient(rgba(255,210,74,.05) 1px, transparent 1px) 0 0/36px 36px,
    rgba(251,250,247,.045);
  box-shadow:9px 9px 0 rgba(0,0,0,.28);
}
.plan-steps{
  position:relative; margin:0; padding:0; list-style:none;
  display:grid; gap:34px; grid-template-columns:repeat(4,minmax(0,1fr));
}
.plan-steps::before{
  content:""; position:absolute; left:4px; right:14px; top:16px;
  border-top:2px dashed rgba(255,210,74,.42);
}
.plan-steps::after{
  content:"\2192"; position:absolute; right:-14px; top:3px;
  font-size:24px; line-height:1; color:rgba(255,210,74,.65);
}
.plan-steps li{
  position:relative; display:flex; flex-direction:column; gap:9px;
}
.ps-num{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:#16120d;
  border:1.5px solid var(--gold); color:var(--gold);
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
  font-family:"SF Mono",Menlo,monospace; font-size:13px; font-weight:700;
}
.plan-steps strong{
  margin-top:4px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px; line-height:1.1; font-weight:700; color:#f8f0e4;
}
.plan-steps span:last-child{font-size:15px; line-height:1.5; color:#cfc7ba;}
.plan-close{
  margin:30px 0 0; padding-top:18px;
  border-top:1px solid rgba(169,154,135,.28);
  font-family:"SF Mono",Menlo,monospace; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
@media(max-width:860px){
  .plan-board{padding:24px 20px 22px;}
  .plan-steps{grid-template-columns:1fr; gap:24px;}
  .plan-steps::before,.plan-steps::after{display:none;}
}
.site-home main > .thread-divide{margin-top:clamp(28px,3.5vw,60px); margin-bottom:clamp(20px,2.5vw,44px);}
.site-home .netloop.slide{margin-top:clamp(48px,6vw,104px);}
.site-home .runup-finale{margin-top:clamp(48px,6vw,104px);}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-14 · ownership colophon.
   After the bright green finale, one thin chrome strip states
   who owns the work — monospace, intelligence-black, a gold
   rule on top. Reads as the file's stamp, not a plea. */
.site-colophon{
  background:var(--chrome); border-top:4px solid var(--accent);
  padding:26px 22px 30px; text-align:center;
  font-family:"SF Mono",Menlo,monospace;
}
.site-colophon .colophon-brand{
  margin:0 0 7px; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}
.site-colophon .colophon-legal{
  margin:0 auto; max-width:640px; font-size:11.5px;
  letter-spacing:.04em; line-height:1.6; color:#8f8676;
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-17: deckflow slide navigation
   (dot rail + floating controls, built by deckflow-nav.js) and
   the "breather" slide — a quiet, mostly-blank pause between
   loud slides. Reader feedback: the decks yelled and only
   scrolled down.
   ============================================================ */
.df-rail{
  position:fixed; right:12px; top:50%; transform:translateY(-50%);
  z-index:520; display:flex; flex-direction:column; gap:7px;
  max-height:72vh; overflow-y:auto; scrollbar-width:none;
  padding:10px 6px; border-radius:999px;
  background:rgba(8,8,6,.55); backdrop-filter:blur(4px);
}
.df-rail::-webkit-scrollbar{ display:none; }
.df-dot{
  width:9px; height:9px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.38); cursor:pointer; flex:0 0 auto;
}
.df-dot:hover{ background:var(--gold); transform:scale(1.35); }
.df-dot.on{ background:var(--gold); transform:scale(1.35); }
.df-ctrl{
  position:fixed; right:10px; bottom:14px; z-index:520;
  display:flex; flex-direction:column; gap:6px;
}
.df-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,210,74,.45);
  background:rgba(8,8,6,.78); color:var(--gold); font-size:15px; line-height:1;
  cursor:pointer; backdrop-filter:blur(4px);
}
.df-btn:hover{ background:var(--gold); color:var(--chrome); }
@media (max-width:900px){
  .df-rail{
    top:auto; right:58px; bottom:14px; left:12px; transform:none;
    flex-direction:row; max-height:none; max-width:none; overflow-x:auto;
    overflow-y:hidden; padding:10px 12px; border-radius:999px;
  }
  .df-dot{
    width:10px; height:10px;
  }
}
@media print{ .df-rail, .df-ctrl{ display:none; } }

/* The question gate: a deliberate pause that still feels like the deck. */
.slide.breather{
  justify-content:center; align-items:flex-start; text-align:left;
  gap:24px;
  background:
    radial-gradient(circle at 72% 22%, rgba(255,210,74,.12), transparent 28%),
    linear-gradient(135deg, rgba(13,17,76,.88), rgba(8,8,6,.98));
  border-top-color:var(--law2);
}
.slide.breather .breath-wrap{
  max-width:760px;
  margin:auto 0;
  padding-left:clamp(0px,3vw,34px);
  border-left:6px solid rgba(255,210,74,.72);
}
.slide.breather .breath-q{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(30px,4.2vw,56px); font-weight:700; font-style:normal;
  color:#fbfaf7; max-width:760px; margin:0; line-height:1.08;
}
.slide.breather.dark .breath-q{ color:#fbfaf7; }
.slide.breather .breath-hint{
  margin-top:26px; font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); opacity:.9;
}

/* Any chapter-block reached by a tap target should clear the sticky site bar. */
.site-page details.chapter-block{
  scroll-margin-top:calc(var(--sitebar-h,42px) + 18px);
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-17: support-the-project ask.
   Three-tier ranking on purpose: one-time coffee is the filled
   primary (lowest friction), Patreon the outlined monthly
   secondary, PayPal a quiet text link — a flat row of three
   equal buttons converts worse than a ranked one.
   ============================================================ */
.support-strip{
   margin:72px  ; padding:42px;
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap; box-sizing:border-box;
  border:1px solid rgba(255,210,74,.28); border-radius:14px;
  background:linear-gradient(135deg, rgba(255,210,74,.08), rgba(8,8,6,0));
}
.support-strip .support-lede{
  margin:0; color:#cfc7ba; font-size:15px; line-height:1.55; max-width:560px;
}
.support-strip .support-lede b{color:var(--gold);}
.support-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.support-btn{
  text-decoration:none; border-radius:999px; padding:11px 20px;
  font-weight:800; font-size:14px; letter-spacing:.02em;
  line-height:1; transition:.15s; white-space:nowrap;
}
.support-btn.bmc{background:var(--gold); color:#080806;}
.support-btn.bmc:hover{background:#ffe08a; transform:translateY(-1px);}
.support-btn.patreon{color:var(--gold); border:1px solid rgba(255,210,74,.55);}
.support-btn.patreon:hover{background:rgba(255,210,74,.12);}
.support-btn.paypal{
  color:#b9ac99; font-weight:600; padding:2px 0; border-radius:0;
  border-bottom:1px solid rgba(185,172,153,.45);
}
.support-btn.paypal:hover{color:#fff; border-bottom-color:#fff;}
/* small gold pill pinned at the sitebar edge, outside the scrolling nav */
.sitebar > a.support-nav, a.support-nav{
  display:inline-flex !important; align-items:center;
  flex:0 0 auto; margin-left:auto; text-decoration:none;
  font-size:11px; letter-spacing:.06em;
  color:#080806 !important; background:var(--gold,#ffd24a) !important; border-radius:999px;
  font-weight:800; padding:4px 12px; z-index:1001;
}
.sitebar > a.support-nav:hover, a.support-nav:hover{background:#ffe08a !important; color:#080806 !important;}
@media(max-width:640px){
  .support-strip{flex-direction:column; align-items:flex-start; padding:18px 20px;}
}
@media print{.support-strip{display:none;}}

.theplan {margin-top: 36px; 
}

/* ---- landing hero v5: one sentence, one proof, three doors ---- */
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:6px;}
.hero-ctas .mission-link{margin-top:22px;}
.mission-link.ghost{background:rgba(8,8,6,.46); color:#f6efe3; border-color:rgba(255,255,255,.35);}
.mission-link.ghost:hover{background:rgba(255,210,74,.08); border-color:var(--gold); color:#fbfaf7;}
.role-doors{display:flex; flex-wrap:wrap; gap:12px; margin-top: 64px;}
.role-door{
  flex:1 1 240px; display:flex; flex-direction:column; gap:6px;
  padding:16px 18px 15px;
  border:1px solid rgba(255,255,255,.16); border-left:4px solid var(--gold);
  background:rgba(255,255,255,.03);
  color:#c9c0b1; text-decoration:none;
  font-size:14px; line-height:1.4;
  transition:transform .15s, border-color .15s, background .15s;
}

.role-door:hover{transform:translateY(-2px); border-color:var(--gold); background:rgba(255,210,74,.07);}


.pain-path-feature{
  position:relative; min-height:300px; border-radius:8px; overflow:hidden;
  padding:64px 24px 24px; color:#fff; text-decoration:none;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(8,8,6,.08), rgba(8,8,6,.82)),
    url("deck-assets/bg/fork.png") center / cover;
	
  transition:transform .16s, border-color .16s;
}
.pain-path-feature:hover{transform:translateY(-2px); border-color:var(--gold); background:linear-gradient(180deg, rgba(8,8,6,.08) 40%, rgba(8,8,6,.88) 90%),
    url("deck-assets/bg/fork.png") center / cover;}

.role-door .rd-k{
  font-family:"SF Mono",Menlo,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:800;
}
.role-door strong{color:#f6efe3; font-size:16px; line-height:1.2;}

/* closing charge band: the old hero charge, now after orientation */
.charge-outro{
  padding:clamp(44px,6vw,76px) clamp(28px,4vw,84px);
  border-top:1px solid rgba(255,210,74,.26);
}
.charge-outro h2{
  max-width:860px; margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif; font-style:italic;
  font-size:clamp(32px,4.6vw,56px); line-height:1.02; color:#fbfaf7;
}
.charge-outro .mission-kicker{padding-top:6px; margin-bottom:0;}
@media (max-width:720px){
  .hero-ctas{flex-direction:column; gap:0;}
  .hero-ctas .mission-link{width:100%; margin-top:14px;}
  .role-doors{margin-top:26px;}
}

/* ===== Product band (Book / tribes / Rome) — additive 2026-07-19 ===== */
.product-band{
  padding:clamp(36px,5vw,72px) clamp(20px,4vw,84px);
  border-top:1px solid rgba(255,210,74,.22);
  border-bottom:1px solid rgba(255,210,74,.12);
  background:linear-gradient(180deg,rgba(255,210,74,.04),transparent 40%);
}
.product-band .section-head{max-width:920px;margin-bottom:28px;}
.product-band .section-head .eyebrow{color:var(--gold,#ffd24a);}
.product-band h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4vw,48px);
  line-height:1.08;
  color:#fbfaf7;
  margin:8px 0 14px;
  font-weight:400;
}
.product-band .product-one{
  max-width:780px;
  font-size:clamp(16px,1.8vw,20px);
  line-height:1.45;
  color:#d8cfc0;
  margin:0;
}
.product-band .product-one b{color:#fbfaf7;}
.product-layers{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:28px 0 24px;
  max-width:1100px;
}
.product-layer{
  border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--gold,#ffd24a);
  background:rgba(0,0,0,.28);
  padding:22px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  transition:border-color .15s, transform .15s, background .15s;
}
a.product-layer:hover{
  border-color:rgba(255,210,74,.45);
  background:rgba(255,210,74,.06);
  transform:translateY(-2px);
}
.product-layer .pl-k{
  font-family:"SF Mono",Menlo,monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold,#ffd24a);
  font-weight:800;
}
.product-layer strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(20px,2.2vw,26px);
  color:#fbfaf7;
  font-weight:400;
  line-height:1.15;
}
.product-layer p{
  margin:0;
  font-size:15px;
  line-height:1.45;
  color:#c9c0b1;
}
.product-band-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-items:center;
  align-content:center;
  margin-top:8px;
}
.product-band-actions .mission-link,
.product-band-actions .primary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  background:var(--gold,#ffd24a);
  color:#1a1408;
  font-weight:800;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.product-band-actions .secondary-action,
.product-band-actions a.ghost{
  color:#f6efe3;
  text-decoration:none;
  font-size:14px;
  border-bottom:1px solid rgba(255,210,74,.45);
  padding-bottom:2px;
}
.product-band-actions a.ghost:hover{border-color:var(--gold,#ffd24a);color:#fff;}
.product-manifesto{
  max-width:820px;
  margin:28px 0 0;
  padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:clamp(17px,2vw,22px);
  line-height:1.4;
  color:#e8dfd0;
}
.product-manifesto .pm-close{
  display:block;
  margin-top:14px;
  font-style:normal;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:14px;
  color:#b8aea0;
  letter-spacing:.02em;
}
/* role / standalone pages */
.site-page .product-band{
  background:linear-gradient(180deg,rgba(255,210,74,.06),transparent 50%);
}
.site-page.product-band h2{color:inherit;}
body.site-page:not(.dark).product-band h2{color:#1a1408;}
body.site-page:not(.dark).product-band .product-one{color:#3a342c;}
body.site-page:not(.dark).product-layer{
  background:#f7f2ea;
  border-color:rgba(0,0,0,.1);
}
body.site-page:not(.dark).product-layer strong{color:#1a1408;}
body.site-page:not(.dark).product-layer p{color:#4a4338;}
body.site-page:not(.dark) .product-manifesto{color:#2a241c;}
@media(max-width:800px){
  .product-layers{grid-template-columns:1fr;}
}


/* ------------------------------------------------------------
   CROSS-LINK GRAPH NODES
   Invisible indexing: Floating buttons next to slides that ask
   questions answered in other chapters.
   ------------------------------------------------------------ */
.site-page .slide {
  position: relative; /* Ensure we can absolute-position relative to slide */
}


/* GLOSSARY TOOLTIPS */
.glossary-link {
  color: var(--grey-bg);
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark .glossary-link {
  color: var(--erase-light);
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.glossary-link:hover {
  background: rgba(255, 215, 0, 0.1);
}

.glossary-link .glossary-card {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 280px;
  background: var(--bg2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  z-index: 1000;
  transition: all 0.2s ease;
  font-family: var(--font-stack);
  text-align: left;
  line-height: 1.4;
  color: var(--ink2);
}

.glossary-link:hover .glossary-card {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.glossary-card strong {
  display: block;
  color: var(--gold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.glossary-card span {
  font-size: 13px;
  color: var(--ink2);
}

/* ==========================================================================
   Q&A Margin Notes Architecture 
   ========================================================================== */

.slide-wrapper {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 1280px; /* Base slide width */
}

.qa-margin-note {
  position: absolute;
  left: 100%; /* Push it perfectly outside the slide bounds */
  top: 10%;
  width: 260px;
  margin-left: 32px; /* Breathing room */
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

.qa-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: -4px;
}

/* Base style for both QA links and direct answers */
.qa-link, .qa-direct {
  display: block;
  padding: 16px;
  background: rgba(244, 194, 71, 0.05);
  border-left: 4px solid var(--gold);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.qa-link:hover {
  background: rgba(244, 194, 71, 0.1);
  transform: translateX(4px);
}

.qa-margin-note .q {
  display: block;
  color: var(--gold);
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.qa-margin-note .a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

/* Mobile & Tablet Fallback: Move it underneath the slide */
@media (max-width: 1700px) {
  .slide-wrapper {
    /* Need to ensure wrapper doesn't constrain it if it falls below */
    display: flex;
    flex-direction: column;
  }
  .qa-margin-note {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 48px auto;
    padding: 0 40px;
  }
}


.qa-margin-note.clickable-qa {
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.qa-margin-note.clickable-qa:hover {
    /* Removed global hover effect */
}

/* Hoverable QA margin note links */
.qa-margin-note a {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}
.qa-margin-note a:hover {
    color: var(--brand);
}


/* ==========================================================================
   Q&A Cluster Interactive Styling 
   ========================================================================== */

details.qa-cluster-wrapper {
  position: absolute;
  left: 100%;
  top: 10%;
  width: 280px;
  margin-left: 32px;
  z-index: 50;
  display: block; /* Override flex if qa-margin-note had it */
}

@media (max-width: 1700px) {
  details.qa-cluster-wrapper {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 48px auto;
    padding: 0 40px;
  }
}

details.qa-cluster-wrapper summary {
  cursor: pointer;
  outline: none;
  padding: 16px;
  background: rgba(244, 194, 71, 0.05);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  list-style: none; /* Hide default triangle */
  transition: background 0.2s ease, transform 0.2s ease;
}

details.qa-cluster-wrapper summary::-webkit-details-marker {
  display: none;
}

details.qa-cluster-wrapper summary:hover {
  background: rgba(244, 194, 71, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

details.qa-cluster-wrapper .qa-summary-sub {
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
  line-height: 1.4;
}

details.qa-cluster-wrapper[open] summary {
  background: rgba(244, 194, 71, 0.1);
  margin-bottom: 16px;
}

details.qa-cluster-wrapper .qa-cluster-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideDown 0.3s ease-out forwards;
}

details.qa-cluster-wrapper .qa-direct.clustered {
  background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid var(--hl);
  border-radius: 4px;
  padding: 16px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

details.qa-cluster-wrapper .qa-direct.clustered:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Access Gates */
.sitebar .chapters a.closed::after {
  content: " 🔒";
  opacity: 0.6;
}
.spotlight-grid a.closed .spotlight-body::after {
  content: " 🔒";
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  opacity: 0.6;
}
.card.closed::after, .profile-step.closed::after, .profile-card.closed::after {
  content: " 🔒";
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 16px;
  opacity: 0.6;
}

/* Navigation Scale for Large Screens */
@media (min-width: 1024px) {
  .sitebar .chapters a { font-size: 17px; padding: 10px 14px; }
  .sitebar .chapters a .n { font-size: 14px; }
  .sitebar .brand { font-size: 18px; }
}

/* OS deck technical cleanup */
.page-os-kernel .slide,
.page-os-software .slide,
.page-os-robust .slide ,
.page-os-narrative .slide {
  overflow: hidden;
}

.page-os-kernel .diagram,
.page-os-kernel .bigrow,
.page-os-kernel .divider,
.page-os-kernel .duo,
.page-os-kernel .row,
.page-os-software .diagram,
.page-os-software .bigrow,
.page-os-software .divider,
.page-os-software .duo,
.page-os-software .row,
.page-os-robust .diagram,
.page-os-narrative .diagram,
.page-os-robust .bigrow,
.page-os-narrative .bigrow,
.page-os-robust .divider,
.page-os-narrative .divider,
.page-os-robust .duo,
.page-os-narrative .duo,
.page-os-robust .row ,
.page-os-narrative .row {
  min-width: 0;
}

.page-os-kernel .diagram,
.page-os-software .diagram,
.page-os-robust .diagram ,
.page-os-narrative .diagram {
  flex-wrap: wrap;
  gap: 12px 16px;
}

.page-os-kernel .diagram .node[style*="display: contents"],
.page-os-software .diagram .node[style*="display: contents"],
.page-os-robust .diagram .node[style*="display: contents"] ,
.page-os-narrative .diagram .node[style*="display: contents"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  min-width: min(100%, 150px);
  max-width: 100%;
  padding: 10px 14px;
  text-align: center;
}

.page-os-kernel .bigrows,
.page-os-software .bigrows,
.page-os-robust .bigrows ,
.page-os-narrative .bigrows {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
}

.page-os-kernel .bigrows .bigrow,
.page-os-software .bigrows .bigrow,
.page-os-robust .bigrows .bigrow ,
.page-os-narrative .bigrows .bigrow {
  min-width: 760px;
}

.page-os-kernel .phase,
.page-os-kernel .duo-grid,
.page-os-kernel .os-grid,
.page-os-software .phase,
.page-os-software .duo-grid,
.page-os-software .os-grid,
.page-os-robust .phase,
.page-os-narrative .phase,
.page-os-robust .duo-grid,
.page-os-narrative .duo-grid,
.page-os-robust .os-grid ,
.page-os-narrative .os-grid {
  max-width: 100%;
}

.page-os-kernel .slidenum + .slidenum,
.page-os-software .slidenum + .slidenum,
.page-os-robust .slidenum + .slidenum ,
.page-os-narrative .slidenum + .slidenum {
  display: none;
}

.page-os-kernel .kernel-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.page-os-kernel .kernel-proof-grid .pane {
  min-width: 0;
  padding: 22px;
}

.page-os-kernel .kernel-proof-grid .nm {
  font-size: 24px;
  margin: 8px 0 10px;
}

.page-os-kernel .kernel-proof-grid .ask {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
}

.page-os-kernel .kernel-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.page-os-kernel .kernel-proof-strip span {
  border: 2px solid rgba(17,16,14,.18);
  background: rgba(255,255,255,.7);
  border-radius: 6px;
  padding: 10px 12px;
  font-weight: 900;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 900px) {
  .page-os-kernel,
  .page-os-software,
  .page-os-robust ,
  .page-os-narrative {
    overflow-x: hidden;
  }

  .page-os-kernel .deckflow,
  .page-os-kernel details.chapter-block,
  .page-os-kernel .slide,
  .page-os-software .deckflow,
  .page-os-software details.chapter-block,
  .page-os-software .slide,
  .page-os-robust .deckflow,
  .page-os-narrative .deckflow,
  .page-os-robust details.chapter-block,
  .page-os-narrative details.chapter-block,
  .page-os-robust .slide ,
  .page-os-narrative .slide {
    width: 100%;
    max-width: calc(100vw - 28px) !important;
    box-sizing: border-box;
  }

  .page-os-kernel .visual-pair,
  .page-os-kernel .row,
  .page-os-kernel .duo,
  .page-os-kernel .duo.tall,
  .page-os-software .visual-pair,
  .page-os-software .row,
  .page-os-software .duo,
  .page-os-software .duo.tall,
  .page-os-robust .visual-pair,
  .page-os-narrative .visual-pair,
  .page-os-robust .row,
  .page-os-narrative .row,
  .page-os-robust .duo,
  .page-os-narrative .duo,
  .page-os-robust .duo.tall ,
  .page-os-narrative .duo.tall {
    flex-direction: column;
  }

  .page-os-kernel .slide,
  .page-os-software .slide,
  .page-os-robust .slide ,
  .page-os-narrative .slide {
    padding-inline: 22px !important;
  }

  .page-os-kernel .visual-pair,
  .page-os-software .visual-pair,
  .page-os-robust .visual-pair ,
  .page-os-narrative .visual-pair {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .page-os-kernel .visual-pair > *,
  .page-os-kernel .divider,
  .page-os-kernel .built-visual,
  .page-os-kernel .hero,
  .page-os-kernel .center,
  .page-os-software .visual-pair > *,
  .page-os-software .divider,
  .page-os-software .built-visual,
  .page-os-software .hero,
  .page-os-software .center,
  .page-os-robust .visual-pair > *,
  .page-os-narrative .visual-pair > *,
  .page-os-robust .divider,
  .page-os-narrative .divider,
  .page-os-robust .built-visual,
  .page-os-narrative .built-visual,
  .page-os-robust .hero,
  .page-os-narrative .hero,
  .page-os-robust .center ,
  .page-os-narrative .center {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .page-os-kernel .photo,
  .page-os-kernel .built-visual,
  .page-os-kernel .os-machine,
  .page-os-software .photo,
  .page-os-software .built-visual,
  .page-os-software .os-machine,
  .page-os-robust .photo,
  .page-os-narrative .photo,
  .page-os-robust .built-visual,
  .page-os-narrative .built-visual,
  .page-os-robust .os-machine ,
  .page-os-narrative .os-machine {
    max-width: 100%;
  }

  .page-os-kernel .os-grid,
  .page-os-software .os-grid,
  .page-os-robust .os-grid ,
  .page-os-narrative .os-grid {
    grid-template-columns: 1fr !important;
  }

  .page-os-kernel .divider .pt,
  .page-os-software .divider .pt,
  .page-os-robust .divider .pt ,
  .page-os-narrative .divider .pt {
    max-width: 230px;
    font-size: clamp(28px, 8.4vw, 34px) !important;
    line-height: 1.04;
    overflow-wrap: break-word;
  }

  .page-os-kernel .divider .sub,
  .page-os-software .divider .sub,
  .page-os-robust .divider .sub ,
  .page-os-narrative .divider .sub {
    width: 100%;
    max-width: 230px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    overflow-wrap: normal;
  }

  .page-os-kernel .slide .brandfoot,
  .page-os-software .slide .brandfoot,
  .page-os-robust .slide .brandfoot ,
  .page-os-narrative .slide .brandfoot {
    max-width: 230px !important;
    white-space: normal;
  }

  .page-os-kernel .huge,
  .page-os-kernel .u-text-hero,
  .page-os-software .huge,
  .page-os-software .u-text-hero,
  .page-os-robust .huge,
  .page-os-narrative .huge,
  .page-os-robust .u-text-hero ,
  .page-os-narrative .u-text-hero {
    font-size: 34px !important;
    line-height: 1.08;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .page-os-kernel .slide .hero > .huge,
  .page-os-kernel .slide .hero > .u-text-hero,
  .page-os-kernel .slide .hero > .sub,
  .page-os-software .slide .hero > .huge,
  .page-os-software .slide .hero > .u-text-hero,
  .page-os-software .slide .hero > .sub,
  .page-os-robust .slide .hero > .huge,
  .page-os-narrative .slide .hero > .huge,
  .page-os-robust .slide .hero > .u-text-hero,
  .page-os-narrative .slide .hero > .u-text-hero,
  .page-os-robust .slide .hero > .sub ,
  .page-os-narrative .slide .hero > .sub {
    max-width: min(100%, 300px) !important;
  }

  .page-os-kernel .kernel-proof-grid {
    grid-template-columns: 1fr;
  }

  .page-os-kernel .kernel-proof-grid .pane {
    padding: 18px;
  }
}

/* Path Contact Form Styles */
.path-contact-section {
  padding-bottom: 60px;
}
.path-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  margin-top: 24px;
}
.path-input, .path-textarea {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 16px;
  color: #fbfaf7;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.path-input:focus, .path-textarea:focus {
  outline: none;
  border-color: rgba(255, 210, 74, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 210, 74, 0.15);
}
.path-textarea {
  min-height: 120px;
  resize: vertical;
}
.path-contact-form .profile-btn {
  align-self: flex-start;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.path-form-status {
  min-height: 1.5em;
  margin: 0;
  color: #d8cfc0;
  font-weight: 750;
}

.path-form-status.success {
  color: #ffd24a;
}

.path-form-status.error {
  color: #ff8d82;
}

/* Presentation Bridge Links */
.presentation-bridge {
  display: block;
  margin: 12px auto;
  padding: 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
		max-width: 93%

}
.presentation-bridge:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
@media (min-width: 1008px) {
  .presentation-bridge {
    margin: 40px auto;
  }
}
@media (max-width: 600px) {
  .presentation-bridge {
    margin: 24px 16px;
    padding: 24px;
    border-radius: 12px;
  }
}
.presentation-bridge .bridge-kicker {
  margin-bottom: 12px;
  display: block;
  font-family: monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.presentation-bridge.theme-mint .bridge-kicker, .presentation-bridge.theme-mint .bridge-go { color: var(--mint); }
.presentation-bridge.theme-peri .bridge-kicker, .presentation-bridge.theme-peri .bridge-go { color: var(--peri); }
.presentation-bridge.theme-fire .bridge-kicker, .presentation-bridge.theme-fire .bridge-go { color: var(--coral); }
.presentation-bridge h3 {
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 12px 0;
  color: #fff;
}
@media (max-width: 600px) {
  .presentation-bridge h3 {
    font-size: 26px;
  }
}
.presentation-bridge p {
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.8;
  color: #fff;
}
.presentation-bridge .bridge-go {
  display: inline-block;
  margin-top: 24px;
  font-weight: bold;
  font-size: 18px;
}