:root{
  --bg:#21080f;
  --bg-2:#140307;
  --panel:#120307;
  --panel-2:#1a070c;
  --ink:#f7f1f1;
  --muted:#cfb2b5;
  --line:#56212a;
  --red:#ff3b4d;
  --red-soft:#ff98a1;
  --max:1120px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(
      circle at top,
      #3a131c 0,
      #21080f 35%,
      #120307 100%
    );
  color:var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height:1.75;
}

::selection{
  background:var(--red);
  color:white;
}

img{
  max-width:100%;
}

a{
  color:inherit;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip{
  position:fixed;
  left:1rem;
  top:-5rem;
  z-index:99;
  background:white;
  color:#000;
  padding:.7rem 1rem;
}

.skip:focus{
  top:1rem;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  background:#090203;
  overflow:hidden;
  border-bottom:1px solid rgba(255,59,77,.16);
}

.hero img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

.hero-fade{
  position:absolute;
  inset:auto 0 0;
  height:20%;
  background:linear-gradient(
    transparent,
    var(--bg)
  );
  pointer-events:none;
}

.hero-accessible-title{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}

/* =========================================================
   NAV
   ========================================================= */

.rail{
  position:sticky;
  top:0;
  z-index:30;
  border-block:1px solid rgba(255,59,77,.16);
  background:rgba(24,4,8,.86);
  backdrop-filter:blur(18px);
}

.rail-inner{
  max-width:var(--max);
  margin:auto;
  min-height:56px;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:2rem;
}

.brand{
  color:var(--ink);
  font-weight:900;
  letter-spacing:.16em;
  text-decoration:none;
}

.brand span{
  color:var(--red);
}

.toc{
  margin-left:auto;
  display:flex;
  gap:1.3rem;
}

.toc a,
.toc-toggle{
  font:700 11px/1 system-ui;
  letter-spacing:.14em;
  color:var(--muted);
  text-decoration:none;
  background:none;
  border:0;
}

.toc a:hover,
.toc-toggle:hover{
  color:var(--ink);
}

.toc-toggle{
  display:none;
  margin-left:auto;
}

/* =========================================================
   ARTICLE
   ========================================================= */

.article{
  max-width:var(--max);
  margin:auto;
  padding:0 24px;
}

.mast{
  padding:8rem 0 7rem;
  max-width:940px;
}

.eyebrow,
.kicker,
.meta{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red-soft);
}

.lede{
  font-size:clamp(1.8rem,3.5vw,3.2rem);
  line-height:1.18;
  letter-spacing:-.03em;
  margin:1.2rem 0 3rem;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.3rem;
  color:var(--muted);
}

/* =========================================================
   CHAPTERS
   ========================================================= */

.chapter{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:2rem;
  padding:8rem 0;
  border-top:1px solid var(--line);
  scroll-margin-top:70px;
}

.chapter-no{
  font:300 3.6rem/1 ui-monospace,monospace;
  color:#7f3945;
}

.chapter-body{
  max-width:840px;
}

.chapter h2{
  font-size:clamp(2.2rem,5vw,4.7rem);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:.6rem 0 2.2rem;
}

.chapter p{
  font-size:1.08rem;
  color:#eadfe0;
  max-width:74ch;
}

.chapter blockquote{
  margin:3rem 0;
  padding:1.5rem 0 1.5rem 2rem;
  border-left:2px solid var(--red);
  font-size:clamp(1.25rem,2.5vw,2rem);
  line-height:1.35;
  color:var(--ink);
}

.accent{
  background:
    linear-gradient(
      180deg,
      rgba(255,59,77,.03),
      rgba(255,59,77,0)
    );
}

/* =========================================================
   TERMINAL
   ========================================================= */

.terminal{
  margin:2.8rem 0;
  padding:1.4rem 1.6rem;
  border:1px solid var(--line);
  background:#0a0204;
  font:14px/1.9 "SFMono-Regular",Consolas,monospace;
  color:#ddcfd1;
  overflow:auto;
}

.terminal span{
  color:var(--red-soft);
}

/* =========================================================
   EQUATION
   ========================================================= */

.equation{
  font:clamp(2rem,5.5vw,4.8rem)/1.08 Georgia,serif;
  text-align:center;
  padding:3.2rem 1rem;
  margin:3rem 0;
  border-block:1px solid var(--line);
  color:#fff7f8;
}

/* =========================================================
   PROCESS GRID
   ========================================================= */

.process-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:2.5rem;
}

.process-grid article,
.ledger article{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.01)
    );
  border:1px solid var(--line);
  padding:1.6rem;
}

.process-grid b,
.ledger b{
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--red-soft);
}

.process-grid h3,
.ledger h3{
  font-size:1.28rem;
  margin:.45rem 0 .7rem;
}

.process-grid p,
.ledger article p{
  font-size:.96rem;
  margin:0;
  color:#e4d7d9;
}

/* =========================================================
   LEDGER / FRAME GRID
   ========================================================= */

.ledger{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:3rem;
}

.frames-ledger img{
  display:block;
  width:100%;
  height:auto;
  margin-top:1rem;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:#080204;
}

.continuity-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* =========================================================
   THESIS CARD
   ========================================================= */

.thesis{
  margin:3rem 0;
  padding:2rem;
  border:1px solid rgba(255,59,77,.35);
  background:
    linear-gradient(
      135deg,
      rgba(255,59,77,.11),
      transparent
    );
  font-size:1.25rem;
}

.thesis span{
  display:block;
  margin-bottom:.8rem;
  font:700 .7rem/1 system-ui;
  letter-spacing:.2em;
  color:var(--red-soft);
}

/* =========================================================
   RECORDING
   ========================================================= */

.recording{
  margin:3rem 0;
  max-width:760px;
}

.recording figcaption{
  margin-top:.9rem;
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.04em;
}

.recording-card{
  width:min(560px,100%);
  margin:3rem auto;
  text-align:left;
}

.recording-player{
  display:block;
  width:min(360px,100%);
  aspect-ratio:258 / 558;
  margin:1.5rem auto;
  background:#000;
  border:1px solid var(--line);
  border-radius:18px;
  object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.recording-meta{
  margin-top:1rem;
  text-align:center;
  font:700 .68rem/1.5 ui-monospace,monospace;
  letter-spacing:.12em;
  color:var(--muted);
}

/* generic video shell if still used elsewhere */
.video-shell{
  display:block;
  width:100%;
  height:auto;
  background:#050505;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

/* =========================================================
   INTENT TWO-COLUMN SECTION
   ========================================================= */

.intent-split{
  display:grid;

  /* Larger visual column */
  grid-template-columns:
    minmax(0,.95fr)
    minmax(380px,1.05fr);

  gap:3rem;
  align-items:start;
}

.intent-copy{
  min-width:0;
}

.intent-copy h2{
  margin-top:.6rem;
}

.intent-visual{
  width:100%;
  margin:.5rem 0 0;
}

.intent-visual img{
  display:block;
  width:100%;

  /* tall editorial crop */
  aspect-ratio:4 / 5;

  object-fit:cover;

  /* move this percentage if you want the crop higher/lower */
  object-position:center 48%;

  border:1px solid var(--line);
  background:#090203;
}

.intent-visual figcaption{
  margin-top:.8rem;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   METADATA SHOT
   ========================================================= */

.metadata-shot{
  margin:3rem 0 0;
  max-width:720px;
}

.metadata-shot img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:#0b0305;
}

.metadata-shot figcaption{
  margin-top:.8rem;
  color:var(--muted);
  font-size:.88rem;
}

/* =========================================================
   CLOSING
   ========================================================= */

.final{
  padding-bottom:10rem;
}

.closing{
  margin-top:4rem!important;
  font-size:clamp(1.5rem,3vw,2.6rem)!important;
  line-height:1.35;
  color:var(--ink)!important;
}

.closing strong{
  color:var(--red-soft);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  border-top:1px solid var(--line);
  padding:3rem 0 5rem;
  display:flex;
  justify-content:space-between;
  gap:2rem;
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.16em;
  line-height:1.8;
}

footer strong{
  color:var(--ink);
}

footer a{
  color:var(--red-soft);
  text-decoration:none;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:820px){

  .toc-toggle{
    display:block;
  }

  .toc{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:56px;
    padding:1rem 24px 1.5rem;
    background:rgba(24,4,8,.98);
    border-bottom:1px solid var(--line);
    flex-direction:column;
  }

  .toc.open{
    display:flex;
  }

  .mast{
    padding:4.8rem 0;
  }

  .chapter{
    grid-template-columns:1fr;
    padding:5rem 0;
  }

  .chapter-no{
    font-size:1.4rem;
  }

  .ledger,
  .process-grid{
    grid-template-columns:1fr;
  }

  .intent-split{
    grid-template-columns:1fr;
    gap:2.5rem;
  }

  .intent-visual{
    width:100%;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }

  footer{
    flex-direction:column;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}