:root {
  --orange: #F95603;
  --dark:   #26272A;
  --white:  #FFFFFF;
  --bg:          #0a0a0a;
  --bg-card:     #101010;
  --w80:         rgba(240,237,232,0.80);
  --w55:         rgba(240,237,232,0.55);
  --w30:         rgba(240,237,232,0.30);
  --w12:         rgba(240,237,232,0.12);
  --w06:         rgba(240,237,232,0.06);
  --rule:        rgba(255,255,255,0.07);;
  --sans:   'Host Grotesk', sans-serif;
  --serif:  'Libre Baskerville', serif;
  --word-color: rgba(255,255,255,0.32);
  --fc-radius:   .25rem;
  --fc-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --fc-circle-size:   8px;    /* node circle diameter */
  --fc-border-width:  1px;    /* left accent border width */
}

*, *::before, *::after  { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html {
    overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  overscroll-behavior-x: none;
    scroll-behavior: smooth;
}

body {
  background: var(--dark);
  font-family: var(--sans);
  color: var(--white);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  overscroll-behavior-x: none;
}

.emphasis {
    font-style: italic;
}

/* ── UTILITY ── */
.fw-rule { 
    border: none;
    border-top: 1px solid var(--rule); 
}

.r { 
    opacity: 0; 
    transform: translateY(18px); 
    transition: opacity 0.62s ease, transform 0.62s ease; 
}

.r.v { 
    opacity: 1; 
    transform: none; 
}

code {
  color: var(--white);
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
                                                                      LANDING PAGE
════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */



/* ------------------------------------------------------------------ NAV -------------------------------------------- */


.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--dark); 
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  }


.logo-mark {
  width: 50px;
  cursor: pointer;
  margin-left: 1.5%;
}

.nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
  padding-top: 1rem;
  padding-right: 2%;
  border-bottom: 1px solid #fff;
}
.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s;
}

#emailButton {
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s;
  cursor: pointer;
  padding-right: 2%;
  transition: color 0.3s;
}


.nav-links a:hover,
#emailButton:hover { 
    color: var(--orange); 
    
}

.chapter-jump{
  text-decoration: none;
}

.emailCopied-message {
    position: absolute;
    right: -100%;
    width: 300px;
    top: 80px;
    background-color: var(--orange);
    color: var(--dark);
    padding: 20px;
    border-radius: .25rem;
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
       -o-transition: 0.5s;
       -ms-transition: 0.5s;
       transition: 0.5s;
       z-index: 99;
}

.emailCopied-message p {
    padding-right: 50px;
    width: 260px;
    font-size: .8rem;
    line-height: 1rem;
}

.emailCopied-success {
    right: 0;
}
/* ------------------------------------------------------------------ HERO -------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  background: var(--dark);
  overflow: hidden;
}

#nodalCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease;
}

#nodalCanvas.visible { opacity: 1; }


.hero-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.text-stage {
  text-align: center;
  position: relative;
  /* Reserve enough height for the text so swap doesn't jank layout */
  min-height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared word style for both phrases */
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  /* ─── TIMING KNOB: word reveal transition ───────────────────────────────
     opacity + transform duration: controls how long each word takes to appear.
     Default 0.52s feels smooth. Try 0.35s for snappier, 0.7s for cinematic.
  ──────────────────────────────────────────────────────────────────────── */
  transition: opacity 0.52s ease, transform 0.52s ease;
  font-family: var(--sans);
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--white);
}

.w + .w { margin-left: 0.26em; }
.w.dot   { color: var(--orange); margin-left: 0.05em; }
.dot + .dot { margin-left: 0.02em; }
.w.visible { opacity: 1; transform: translateY(0); }

/* Italic orange "your" in phrase 2 */
.w.your {
  color: var(--orange);
  font-style: italic;
  font-family: var(--serif);
}

/* Phrase containers */
#phraseOne {
  position: absolute;
  white-space: nowrap;
  transition: opacity 0.7s ease;
}
#phraseTwo {
  position: absolute;
  white-space: nowrap;
  /* starts invisible; JS reveals it */
}

/* ── AUTHOR BLOCK ── */
.author-block {
  position: absolute;
  bottom: 3.2rem;
  right: 2.8rem;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 600px;
  opacity: 0;
  /* ─── TIMING KNOB: author block fade-in after phrase 2 appears ─────────
     Delay is set in JS (authorRevealDelay). Default: 600ms after phrase 2.
     Transition duration controls how quickly the block fades in.
  ──────────────────────────────────────────────────────────────────────── */
  transition: opacity 1.1s ease;
}
.author-block.visible { opacity: 1; }

.author-text {
  text-align: right;
  flex: 1;
}

/* Drop-cap editorial "I" */
.drop-cap {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 0.75;
  float: left;
  margin-right: 0.06em;
  margin-top: 0.1em;
  color: var(--orange);
}

.author-intro {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--w55);
  text-align: left;
  overflow: hidden; /* contain the float */
}


/* Profile pic: greyscale + orange bg reads as a large node */
.author-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── HERE BE MONSTERS ── */
.here-be {
  position: absolute;
  bottom: 2rem;
  right: 2.8rem;
  z-index: 16;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: var(--white);
  /* ─── TIMING KNOB: "Here be monsters." base opacity ───────────────────
     Default: 0.09 (barely visible). On scroll, JS increases to ~0.32.
     Lower = more hidden. Raise to 0.15 if you want it more discoverable.
  ──────────────────────────────────────────────────────────────────────── */
  opacity: 0.09;
  pointer-events: none;
  transition: opacity 1.5s ease;
  user-select: none;
}

/* ── SCROLL TEST SECTION ── */
.below-hero {
  width: 100%;
  height: 100vh;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 99;
}
.below-hero p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}

.tr3_main {
  background-color: var(--dark);
   position: relative;
  z-index: 4;
}



/* ------------------------------------------------------------------ VALKEN SECTION -------------------------------------------- */

.valken-section {
  width: 100%;
  min-height: 80vh;
  background: var(--dark);
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--rule);
}



/* ─ Top row: 60% intro / 40% main image ─ */
.top-row {
  display: flex;
  align-items: stretch;
  min-height: 80vh;
  justify-content: flex-end;
}

/* ── STORY INTRO (60%) ── */
.story-intro {
  flex: 0 0 60%;
  padding: 5rem 6.5rem 4.5rem 7.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 60%;
  margin: 0 auto;
}

.story-intro h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.8rem, 4.2vw, 3.5rem);
  letter-spacing: .03em;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 0.5rem;
  text-align: right;
}

.open-quote { color: var(--w30); }
.close-quote { color: var(--w30); }

.story-role {
  font-family: var(--sans);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--orange);
  margin-bottom: 0.3rem;
  padding-bottom: 6px;
  text-align: right;
  border-bottom: 1px solid var(--orange);
}

.story-dates {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.58);
  margin-bottom: 2.2rem;
  text-align: right;
}

.story-body  {
  align-self: flex-end;
}

.story-body  p {
  font-family: var(--serif); 
  font-size: clamp(0.81rem, 0.92vw, 0.90rem); 
  text-wrap: pretty;
  line-height: 1.82; 
  color: var(--w55); 
  max-width: 75ch;
  margin-bottom: 16px;
}

.metrics-section {
    border-top: 1px solid var(--rule);
    padding: 2rem 0 3rem 0;
}

.metrics {
  margin: 24px auto;
  width: 60%;
}

.metric-card-display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}

.metrics-card {
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
}

.metrics-heading {
  font-family: var(--sans);
  color: var(--white);
  padding-bottom: 8px;
  margin-bottom: 8px;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--orange);
}

.metrics-hook {
  color: var(--orange);
  font-size: 1rem;
}

.metrics-copy {
  font-size: 0.9rem;
  color: var(--w55);
  font-family: var(--serif); 
  text-wrap: pretty;
}

.metrics-link {
  font-family: var(--sans);
  color: var(--orange);
  font-size: 0.8rem;
  transition: 500ms ease-in-out;
  letter-spacing: 0.12rem;
}

.metrics-link:hover {
  color: var(--white);
}

/* ── MAIN DISPLAY IMAGE (40%) ── */
.main-image-display {
  position: relative;
  overflow: hidden;
  height: auto;
  width: 40%;
  background: rgba(0,0,0,0.3);
  background-image: url('../images/main/valken_paint_ball_catalog_cover_large.jpg');
  background-size: cover;  
  background-repeat: no-repeat;
}



/* ══════════════════════════════════════════════
   CHAPTERS ROW
══════════════════════════════════════════════ */
.chapters-row {
  display: flex;
  width: 100%;
  border-top: 1px solid var(--rule);
  flex-direction: column;
}

/* ── CHAPTER CARD ── */

.chapter-card {
  display: flex;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: transparent;
  transition: background 0.3s ease;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.chapter-card:last-child { 
  border-right: none; 
}

.chapter-card:hover { 
    background: rgba(255,255,255,0.018); 
  }


.card-content {
  display: flex;
  flex-direction: row;
  flex: 0 0 60%;
}

.card-thumb {
  width: 200px;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}

.story-intro-title {
    text-align: right;
    width: 280px;
    margin-left: 20px;
    padding-top: 16px;
}

.chapter-heading {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--orange);
  margin-bottom: 1rem;
  line-height: 1.2;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--orange);
}

/* Vocabulary word list */
/* ─── VOCABULARY WORDS ─────────────────────────────────────────────────
   class="tech"   → Hanken Grotesk 300 (technical register)
   class="human"  → Libre Baskerville italic (humanist register)
   Color matches the nodal map word color in the hero section.
   --vocab-color CSS variable controls opacity for both types.
─────────────────────────────────────────────────────────────────────── */
.vocab-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-bottom: 1rem;
}

.vocab-word {
  font-size: 0.71rem;
  letter-spacing: 0.03em;
  color: var(--w55);
  line-height: 1.3;
}

.vocab-word.tech {
  font-family: var(--sans);
  font-weight: 300;
}

.vocab-word.human {
  font-family: var(--serif);
  font-style: italic;
}

/* Teaser blurb */
/* ─── TEASER ────────────────────────────────────────────────────────────
   Back-of-paperback register. 3–5 sentences. Intrigue, not explain.
   Edit the <p class="teaser"> content in the HTML chapter cards.
─────────────────────────────────────────────────────────────────────── */
.teaser {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--w55);
  margin: 0 auto;
  max-width: 70ch;
  align-self: center;
  text-wrap: pretty;
  padding: 0 12px;
}

.teaser p {
  margin-bottom: 10px;
}

/* ── CHAPTER NUMBER AREA RIGHT (~38%) ── */
.chap-num-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

/* ─── ORANGE SWEEP — RIGHT TO LEFT ────────────────────────────────────
   The orange background wipes in FROM THE RIGHT on card hover.
   
   GRADIENT VERSION (active): the leading left edge has a slight
   transparency fade, giving an organic sweep feel rather than a
   hard mechanical edge.
   
   TO MAKE IT A HARD EDGE: replace the linear-gradient() with
   just `background: var(--orange);` — same translate animation,
   no soft leading edge.
   
   SWEEP SPEED: change transition `duration` (default 0.55s).
   EASING: cubic-bezier(0.4,0,0.2,1) = slight deceleration at end.
   Try `ease-out` for a simpler version.
─────────────────────────────────────────────────────────────────────── */
.chap-num-area::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Gradient: soft transparent leading edge → solid orange body */
  background: linear-gradient(
    to right,
    rgba(249, 86, 3, 0.45) 0%,
    var(--orange)           28%
  );
  /* Starts fully off-screen RIGHT, slides left on hover */
  transform: translateX(101%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.chapter-card:hover .chap-num-area::before,
.chapter-card:focus .chap-num-area::before {
  transform: translateX(0);
}

/* "Chapter" label */
/* ─── LABEL COLOR ───────────────────────────────────────────────────────
   Default: rgba white (subtle). Hover: var(--dark) for legibility
   against the orange background. Match transition duration to sweep.
─────────────────────────────────────────────────────────────────────── */
.chap-label {
  font-family: var(--serif );
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: var(--w55);
  position: relative;
  z-index: 1;
  transition: color 0.45s ease;
  align-self: center;
  padding-right: 1.25rem;
}

.chapter-card:hover .chap-label,
.chapter-card:focus .chap-label {
  color: var(--dark);
}

/* Overflow container clips the large number */
/* ─── NUMBER CLIP HEIGHT ────────────────────────────────────────────────
   This height determines how much of the large number is visible at rest.
   The number is 10rem tall; a 7rem container clips the bottom ~30%.
   Decrease height → more dramatic partial-visibility / more reveal on hover.
   Increase height → number more fully visible at rest.
─────────────────────────────────────────────────────────────────────── */
.chap-num-wrap {
  height: 6rem;
  padding-right: 10%;
  padding-top: 3rem;
}

/* The large chapter number */
/* ─── NUMBER SIZE ───────────────────────────────────────────────────────
   font-size: 10rem → combined with 7rem clip height = top ~70% visible.
   Increase font-size for larger / more dramatically clipped number.
─────────────────────────────────────────────────────────────────────── */
.chap-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13rem;
  line-height: 1;
  letter-spacing: -.8rem;
  color: rgba(255,255,255,0.88);
  display: block;
  position: relative;
  z-index: 1;
  /* ─── NUMBER SLIDE ────────────────────────────────────────────────────
     translateY(0): number at natural position (top portion visible).
     On hover: translateY(-28%) slides number UP within the clipped
     container, creating the "lift" effect.
     
     ALTERNATIVE — slide UP INTO VIEW from below:
       Default:  transform: translateY(55%);  (mostly hidden below clip)
       Hover:    transform: translateY(0);    (slides up into full view)
     This gives a more dramatic reveal. Swap both values to activate.
     
     Adjust -28% to -15% for a subtler lift, or -40% for more dramatic.
  ─────────────────────────────────────────────────────────────────────── */
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.45s ease;
}

.chapter-card:hover .chap-num,
.chapter-card:focus .chap-num {
  transform: translateY(-24%);
  color: var(--dark);
}






/* ------------------------------------------------------------------ ABOUT -------------------------------------------- */

#about.about_section {
      display: flex;
      flex-direction: row;
      background-color: var(--dark);
      width: 100%;
    }

.about_copy {
      width: 60%;
}



.about-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 80%;
  margin: 0 auto;
  padding: 5rem 0;
}

.about-intro h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.8rem, 4.2vw, 3.5rem);
  letter-spacing: .03em;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 0.5rem;
  text-align: right;
}

.about-body {
  align-self: flex-end;
  margin-top: 3rem;
}

.about-body p {
  font-family: var(--serif); 
  font-size: clamp(0.81rem, 0.92vw, 0.90rem); 
  text-wrap: pretty;
  line-height: 1.82; 
  color: var(--w55); 
  max-width: 75ch;
  margin-bottom: 16px;
}


.about_pic_BG {
  position: relative;
  width: 40%;
  background-color: var(--orange);
  overflow: hidden;
}

/* Pixel effect canvas — sits behind the portrait */
#bgCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* Portrait — always sharp, always on top */
#portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  pointer-events: none;
  z-index: 2;
}


/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
                                                                      CHAPTERS
════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   CONTEXT ACCORDIAN
══════════════════════════════════════════════ */


/* Wrapper — sits between summary paragraph and beat marker */
.fc-block {
    margin-top: 4px;
}

/* Always-visible summary paragraph */
.fc-summary {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--fc-text);
}

/* ── Trigger button ──────────────────────────────────────── */
.fc-trigger {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;           /* keeps content centred as label swaps */
    gap:             0.5rem;
    min-width:       140px;            /* fixed width — no jump between states  */
    background:      none;
    border:          1px solid var(--orange);
    color:           var(--orange);
    font-family:     var(--sans);
    font-size:       0.7rem;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    padding:         0.45rem 0.9rem;
    margin-top:      20px;
    margin-bottom:   4px;
    cursor:          pointer;
    border-radius:   var(--fc-radius);
    transition:      background var(--fc-transition),
                      color var(--fc-transition);
    user-select:     none;
}

.fc-trigger:hover {
    background: var(--orange);
    color:      var(--dark);
}

/* Arrow — rotates on open */
.fc-trigger__arrow {
    display:    inline-block;
    font-style: normal;
    font-size:  0.65rem;
    transition: transform var(--fc-transition);
    line-height: 1;
    flex-shrink: 0;
}

.fc-trigger[aria-expanded="true"] .fc-trigger__arrow {
    transform: rotate(180deg);
}

/* Label swap */

.fc-trigger__label-open  { display: inline; }

.fc-trigger__label-close { display: none;   }

.fc-trigger[aria-expanded="true"] .fc-trigger__label-open  { display: none;   }

.fc-trigger[aria-expanded="true"] .fc-trigger__label-close { display: inline; }

/* ── Accordion panel ─────────────────────────────────────── */

/* .fc-panel — outer shell, overflow visible so circle escapes the clip */

.fc-panel {
    position: overflow;    /* establishes stacking context */
}

/* .fc-panel__clip — handles the height animation and overflow clipping.
    Padding creates the space the node circle needs to sit fully within
    the clipping boundary — no half-circles, no browser quirks.
      padding-left:   8px   = room for circle to clear left edge
      padding-bottom: 6px   = room for circle to clear bottom edge          */


.fc-panel__clip {
    overflow:   hidden;
    max-height: 0;
    opacity:    0;
    padding:    0.75rem 0 6px 8px;
    transition: max-height var(--fc-transition),
                opacity   var(--fc-transition);
}

.fc-panel[aria-hidden="false"] .fc-panel__clip {
    opacity: 1;
    /* max-height set by JS via clip.scrollHeight */
}

/* .fc-panel__inner — the visible card.
    Left corners are SQUARE — the left border and the trigger button
    visually read as a single connected element.
    Right corners keep the radius.                                          */


.fc-panel__inner {
    position:       relative;
    padding:        1.5rem 1.75rem;
    background:     var(--w06);
    border-left:    var(--fc-border-width) solid var(--orange);
    border-radius:  0 var(--fc-radius) var(--fc-radius) 0;
    max-width: 99ch;
}

.fc-panel__inner p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--w55);
}

.fc-panel__inner ul{
  margin-top: 0.4rem;
  margin-bottom: 2.4rem;
  padding-left: 28px;
  text-wrap: pretty;
}

.fc-panel__inner p:last-child {
    margin-bottom: 0;
}

.indent {
  margin-top: 0.4rem;
  margin-bottom: 2.4rem;
  padding-left: 46px;
  text-wrap: pretty;
}

/* ── Node circle ─────────────────────────────────────────── */
/* Sits at the terminus of the left border line.
    Math:
      left: -(border-width/2 + circle-radius) = -(1px + 4px) = -5px
        → centers the circle on the 2px border.
      With .fc-panel__clip padding-left: 8px, the circle left edge
        lands at 8px - 5px = 3px from the clip boundary — within bounds.

      bottom: -(circle-radius) = -4px
        → circle center sits on .fc-panel__inner's bottom edge.
      With .fc-panel__clip padding-bottom: 6px, the circle bottom edge
        lands 4px - 6px = -2px ... within bounds.                         */


.fc-panel__inner::after {
    content:       '';
    position:      absolute;
    bottom:        calc(-1 * var(--fc-circle-size) / 2);   /* -4px */
    left:          calc(
                        -1 * (var(--fc-border-width) / 2) -
                        (var(--fc-circle-size) / 2)
                    );                                        /* -5px */
    width:         var(--fc-circle-size);
    height:        var(--fc-circle-size);
    background:    var(--orange);
    border-radius: 50%;
    opacity:       0;
    transition:    opacity 160ms ease 240ms;   /* fades in after panel opens */
}

/* Show circle only when panel is open */
.fc-panel[aria-hidden="false"] .fc-panel__inner::after {
    opacity: 1;
}

/* Fade circle out quickly when closing */
.fc-panel[aria-hidden="true"] .fc-panel__inner::after {
    transition: opacity 80ms ease;
    opacity: 0;
}


/* ============================================================
    LIGHTBOX COMPONENT 
============================================================ */

/* ── Overlay ── */
.lb-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  background:      rgba(10, 10, 10, 0.93);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         2rem;
  box-sizing:      border-box;
  cursor:          zoom-out;

  /* Hidden state */
  opacity:    0;
  visibility: hidden;
  transition: opacity 280ms ease,
              visibility 280ms ease;
}

.lb-overlay.is-open {
  opacity:    1;
  visibility: visible;
}

/* ── Image wrapper — cursor reset so click-outside stays intuitive ── */

.lb-frame {
  position:   relative;
  cursor:     default;
  max-width:  90vw;
  max-height: 82vh;
  display:    flex;
  flex-direction: column;
  align-items: center;

  /* Scale up from slightly smaller on open */
  transform:  scale(0.94);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lb-overlay.is-open .lb-frame {
    transform: scale(1);
}

/* ── The image ── */
.lb-image {
    display:    block;
    max-width:  90vw;
    max-height: 78vh;
    width:      auto;
    height:     auto;
    object-fit: contain;
    box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}

/* ── Caption ── */
.lb-caption {
    margin-top:  1rem;
    font-family: Georgia, serif;
    font-size:   0.82rem;
    font-style:  italic;
    color:       rgba(255,255,255,0.55);
    text-align:  center;
    max-width:   640px;
    line-height: 1.6;
    min-height:  1em; /* prevent layout shift when empty */
}

/* ── Close button ── */
.lb-close {
    position:        absolute;
    top:             -2.25rem;
    right:           0;
    background:      none;
    border:          1px solid var(--orange);
    color:           var(--orange);
    font-family:     'Arial Narrow', Arial, sans-serif;
    font-size:       0.65rem;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    padding:         0.3rem 0.7rem;
    cursor:          pointer;
    border-radius:   2px;
    transition:      background 200ms ease,
                      color 200ms ease,
                      border-color 200ms ease;
    white-space:     nowrap;
}

.lb-close:hover {
    background:   var(--color-accent, #E8541A);
    border-color: var(--color-accent, #E8541A);
    color:        var(--dark);
}

/* ── Lightbox-eligible images get a cursor hint ── */
figure img.lb-enabled {
    cursor: zoom-in;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    opacity: 0.82; 
    transition: opacity 0.3s, transform 0.4s; 
}

figure img.lb-enabled:hover {
  opacity: 1; 
  transform: scale(1.025); 
}

/* ── Prevent body scroll when open ── */
body.lb-lock {
    overflow: hidden;
}

/* ── Mobile: full-width image, smaller padding ── */
@media (max-width: 768px) {
    .lb-overlay {
        padding: 1rem;
    }
    .lb-image {
        max-height: 70vh;
    }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ CHAPTER HERO +++++++++++++++++++++++ */

.chapter-hero { 
    padding-top: 3.6rem; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    min-height: 100vh; 
  }

.hero-identity { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    padding: 5rem 4rem 4rem; 
    border-right: 1px solid var(--rule); 
    position: relative;
  }

.hero-eyebrow { 
    font-size: 0.68rem; 
    font-weight: 500; 
    letter-spacing: 0.16em; 
    text-transform: uppercase; 
    color: var(--orange); 
    margin-bottom: 1.4rem; 
  }

.hero-title { 
    font-weight: 800; font-size: clamp(3.8rem, 7.5vw, 8rem); 
    line-height: 0.92; 
    letter-spacing: -0.02; 
    color: var(--white); 
    margin-bottom: 2.4rem; 
  }

.hero-tagline { 
    font-family: var(--serif); 
    font-style: italic; 
    font-size: clamp(0.88rem, 1.1vw, 1.05rem); 
    color: var(--w55); 
    line-height: 1.68; 
    max-width: 46ch; 
    border-left: 2px solid var(--orange); 
    padding-left: 1.1rem; 
    margin-bottom: 3rem; 
    text-wrap: pretty;
  }

.hero-disc { 
    display: flex; 
    flex-direction: column; 
    gap: 0.3rem; 
  }

.disc { 
    font-size: 0.66rem; 
    letter-spacing: 0.04em; 
    color: var(--w30); 
  }

.disc.human { 
  font-family: var(--serif); 
  font-style: italic; 
  font-size: 0.7rem; 
  letter-spacing: 0; 
  color: var(--w55); 
}

.hero-num-col { 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  align-items: flex-start; 
  padding: 4rem 3.5rem; 
  position: relative; 
  overflow: hidden; 
}

#chapter-1-hero {
  background-image: url('../images/valken/2023_Airsoft_Catalog_cover.jpg');
  background-size: cover;   
}

#chapter-2-hero {
  background-image: url('../images/valken/chapter_2_hero_LRG.jpg');
  background-size: cover;   
}

#chapter-3-hero {
  background-image: url('../images/valken/chapter_3_hero_LRG.jpg');
  background-size: cover;   
}

#chapter-4-hero {
  background-image: url('../images/valken/chapter_04_hero_LRG.jpg');
  background-size: cover;   
}

#chapter-5-hero {
  background-image: url('../images/valken/chapter_05_hero_LRG.png');
  background-size: cover;   
}

.hero-ctx-bar { 
    position: absolute; 
    bottom: 0; left: 0; right: 0; 
    background: var(--orange); 
    padding: 0.5rem 3.5rem; 
    display: flex; gap: 1.2rem; 
    align-items: center; 
}
.ctx-label { 
    font-size: 0.62rem; 
    font-weight: 700; 
    letter-spacing: 0.14em; 
    text-transform: uppercase; 
    color: var(--dark); 
}
.ctx-val { 
    font-size: 0.62rem; 
    letter-spacing: 0.05em; 
    color: var(--dark); 
}

    /* ── QUOTE BLOCKS ── */
    .quote-block { 
        padding: 4rem; 
        display: flex; 
        flex-direction: column; 
        align-items: flex-end; 
    }

    .quote-block.left { 
        align-items: flex-start; 
    }

    .q-text { 
        font-family: var(--serif); 
        font-style: italic; 
        text-wrap: pretty;
        font-size: clamp(1.2rem, 2vw, 1.9rem); 
        line-height: 1.5; 
        color: var(--white); 
        text-align: right; 
        max-width: 80ch; 
        margin-bottom: 1rem; 
        padding-left: 20px;
        border-left: 1px solid var(--orange);
      }
        
    .q-text.quote-break {
      max-width: 60ch;
    }

    .q-attr { 
        font-size: 0.77rem; 
        font-weight: 300; 
        letter-spacing: 0.12em; 
        text-transform: uppercase; 
        color: var(--orange); 
    }

    /* ── BODY WRAPPER ── */
    .body-wrap { 
        max-width: 90%; 
        margin: 0 auto; 
        padding: 0 4rem; 
    }

    /* ── CHAPTER OPENER ── */
    .chapter-opener { 
        padding: 5rem 0 4rem; 
    }

     .opener-text {
        font-family: var(--serif); 
        font-size: clamp(.91rem, 1.10vw, 1.06rem); 
        line-height: 1.82; 
        color: var(--w55);
        max-width: 80ch;
        margin: 10px auto;
    }

     .opener-text p {
        margin-bottom: 14px;
     }

     .opener-text p:last-child {
        margin-bottom: 14px;
        margin-top: 24px;
        line-height: 4;
     }

    .drop-p { 
        font-family: var(--serif); 
         font-size: clamp(1rem, 1.10vw, 1.06rem);
        line-height: 1.82; color: var(--w55); 
        margin-bottom: 18px;;
    }
    .drop-p::first-letter { 
        font-family: var(--serif); 
        font-weight: 800; 
        font-size: 5.5em; 
        line-height: 0.78; 
        float: left; 
        margin-right: 0.1em; 
        margin-top: 0.06em; 
        color: var(--orange); 
        letter-spacing: -0.03em; }

    /* ── NARRATIVE SECTIONS ── */

    .narr { 
        padding: 4.5rem 0; 
        display: grid; 
        grid-template-columns: 200px 1px 1fr; 
        gap: 0 3rem; }

    .narr-side { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-end; 
        gap: 0.7rem; 
        padding-top: 0.15rem; 
    }

    .side-num { 
        font-weight: 300; 
        font-size: 1.1rem; 
        letter-spacing: 0.08em; 
        color: var(--orange); 
    }

    .side-label { 
        font-size: 0.62rem; 
        font-weight: 300; 
        letter-spacing: 0.1em; 
        text-transform: uppercase; 
        color: var(--w30); 
        text-align: right; 
    }

    .narr-rule { 
        background: var(--rule); 
    }

    .narr-content { 
        display: flex; 
        flex-direction: column; 
        gap: 1.5rem; 
    }

    .narr-heading {
        font-size: 1rem; 
        font-weight: 300; 
        letter-spacing: 0.16em; 
        text-transform: uppercase; 
        color: var(--orange); 
    }

    /* ── BODY COPY ── */

    .bp { 
        font-family: var(--serif); 
        font-size: clamp(0.91rem, 1.02vw, 1.01rem); 
        text-wrap: pretty;
        line-height: 1.82; 
        color: var(--w55); 
        max-width: 85ch;
        margin-bottom: 16px;
    }

    .strong { 
        color: var(--white); 
        font-family: var(--sans); 
        font-weight: 600; 
        font-size: 1.1rem; 
    }

    .bp strong { 
        color: var(--white); 
        font-family: var(--sans); 
        font-weight: 600; 
        font-size: 0.96em; 
    }

    .bp em { 
        color: var(--w80); 
        font-style: italic; 
    }

    .fc-panel__inner > .bp {
      margin-bottom: 36px;
    }

    .bp.beat-marker {
        margin-bottom: 0;
    }

    .bp a {
      color: var(--orange);
      transition: 500ms ease-in-out;
    }

    .bp a:hover {
      color: var(--white);
    }

    ol {
      padding-left: 36px;
      margin-bottom: 28px;
    }

  ol li {
    margin-top: 20px;
  }

    /* ── PHOTO FRAMES ── */

    .ph-strip {
        display: grid; 
        gap: 0.55rem; 
        margin-top: 1.5rem;
        max-width: 100ch;
    }

    .ph-strip.c2 { 
        grid-template-columns: 1fr 1fr; 
    }

    .ph-strip.c3 { 
        grid-template-columns: 1fr 1fr 1fr; 
    }

    .pf { 
        position: relative; 
        background: var(--bg-lift); 
        border: 1px solid var(--w06); 
        overflow: hidden; 
    }

    .pf.portrait  { 
        aspect-ratio: 3/4; }
    .pf.landscape {
        aspect-ratio: 16/10; }
    .pf.square { 
        aspect-ratio: 1; 
    }

    .pf#the_beast {
        aspect-ratio: 2 / 1;
    }

    .pf.cinemascope {
       aspect-ratio: 2 / 1;
    }


    .ph-inner { 
        position: absolute; 
        inset: 0; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        gap: 0.45rem;  
    }

    .ph-inner svg { 
        width: 20px; 
        height: 20px; 
        opacity: 0.13; 
    }

    .ph-lbl { 
        font-size: 0.57rem; 
        letter-spacing: 0.06em; 
        text-transform: uppercase; 
        color: var(--w30); 
        text-align: center; 
    }

    .pf-note { 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        padding: 0.3rem 0.55rem; 
        background: rgba(0,0,0,0.68); 
        backdrop-filter: blur(6px); 
        font-size: 0.57rem; 
        letter-spacing: 0.04em; 
        color: rgba(255,255,255,0.45); 
        line-height: 1.35; }

    .ph-caption { 
        grid-column: 1 / -1; 
        font-size: 0.62rem; 
        font-weight: 300; 
        letter-spacing: 0.03em; 
        color: var(--w30); 
        padding-top: 0.3rem; 
        line-height: 1.4; 
    }

    .solution_design {
        max-width: 100ch;
        margin: 10px auto;
        background-color: var(--w06);
        padding: 50px;
        border-radius: .5rem;
    }

    .solution_design .bp {
        margin-top: 24px;
        color: var(--w80);
    }

    .solution_design .bp .emphasis {
        font-weight: 800;
        font-size: 1.2rem;
        letter-spacing: .09rem;
        font-style: normal;
        font-family: var(--sans);
        color: var(--white);
    }

    .solution_design ul {
        padding-left: 10%;
        margin:20px auto;
        color: var(--w80);
    }

    .solution_design ul li {
        margin-top: 10px;
        letter-spacing: .05rem;
    }

    /* ── STAT BOX ── */
    .stat-box { 
        display: flex; 
        align-items: baseline; 
        gap: 1.2rem; 
        padding: 2rem 2.4rem; 
        border: 1px solid var(--orange-line); 
        background: var(--orange-low); 
    }

    .stat-big { 
        font-weight: 800; 
        font-size: clamp(3.2rem, 5.5vw, 5.5rem); 
        letter-spacing: -0.05em; 
        line-height: 1; 
        color: var(--orange); 
    }

    .stat-desc { 
        font-family: var(--serif); 
        font-style: italic; 
        font-size: 0.9rem; 
        line-height: 1.58; 
        color: var(--w55); 
        max-width: 40ch; 
    }

    /* ── CLOSING PROSE ── */

    .epliogue {
        font-weight: 300;
        font-size: 2.2rem;
        letter-spacing: .09rem;
        font-style: italic;
        font-family: var(--serif);
        color: var(--orange);
        margin-bottom: 20px;
    } 

    .closing-prose { 
        padding: 4rem 0 3rem; 
        max-width: 80ch;
        margin: 10px auto;
    }

    .closing-p { 
        font-family: var(--serif); 
        font-size: clamp(0.91rem, 1.02vw, 1.01rem); 
        line-height: 1.82; 
        color: var(--w55); 
        margin-bottom: 1.5rem; 
    }

    .closing-p em { 
        color: var(--w80); 
    }

    .closing-p strong { 
        color: var(--white); 
        font-family: var(--sans); 
        font-weight: 600; 
        font-size: 0.96em; 
    }

    .closing-final { 
        font-family: var(--serif); 
        font-style: italic; 
        font-size: clamp(1rem, 1.4vw, 1.2rem); 
        color: var(--w30); 
        margin-top: 2.5rem;
     }



/* ══════════════════════════════════════════════
   CHAPTER 2 Map
══════════════════════════════════════════════ */     

.map-header {
            position:   relative;
            max-width:      100ch;
            overflow:   hidden;
            /* Maintain 1800:540 aspect ratio (3.333:1) on all screen widths */
            aspect-ratio: 1800 / 540;
            background: #c8b89a; /* parchment tone — shows during video load */
        }

        /* ── Desktop: video ── */
        .map-header__video {
            display:  block;
            width:    100%;
            height:   100%;
            object-fit: cover;
            object-position: center;
        }

        /* ── Mobile: static image — hidden on desktop ── */
        .map-header__mobile {
            display:    none;
            width:      100%;
            height:     100%;
            object-fit: cover;
            object-position: center;
        }

        /* ── Visibility states — driven by JS ── */

        /* Before intersection: video is invisible, poster shows through */
        .map-header__video.is-waiting {
            opacity: 1; /* poster is visible, video content will appear on play */
        }

        /* Optional: fade the video in when it starts playing */
        .map-header__video.is-playing {
            animation: mapFadeIn 0.4s ease forwards;
        }

        @keyframes mapFadeIn {
            from { opacity: 0.7; }
            to   { opacity: 1;   }
        }

        /* ── Mobile breakpoint ── */
        @media (max-width: 768px) {
            .map-header__video  { display: none;  }
            .map-header__mobile { display: block; }
        }


/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
                                                                      FOOTER
════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
    .chapter_jump {
      max-width: 300px;
      margin: 10px auto;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-around;
      padding: 10px;
    }

    .prev-chapter a,
    .next-chapter a {
      color: var(--w80);
      text-decoration: none;
      text-transform: uppercase;
      transition: 250ms ease-in-out;
    }

    .prev-chapter a:hover,
    .next-chapter a:hover {
      color: var(--orange);
    }

    .ch-footer { 
        padding: 4rem 0 5rem; 
        gap: 4rem; 
        max-width: 60%;
        margin: 10px auto;
    }

    .footer-hd { 
        font-size: 0.61rem; 
        letter-spacing: 0.14em; 
        text-transform: uppercase; 
        color: var(--orange); 
        padding-bottom: 0.8rem; 
        border-bottom: 1px solid var(--rule); 
        margin-bottom: 0.4rem; 
    }

    .n-row { 
        display: flex; 
        align-items: flex-start; 
        gap: 0.7rem; padding: 0.6rem 0; 
        border-bottom: 1px solid var(--rule); 
        text-decoration: none; 
    }

    .n-row img {
        width: 100px;
    }

    .n-row:last-child { 
        border-bottom: none; 
    }


    .nname { 
        font-size: 0.85rem; 
        color: var(--w55); 
        transition: color 0.2s; 
        letter-spacing: .05rem;
        transition: 300ms ease-in-out;
    }

    .n-row:hover .nname { 
        color: var(--white); 
    }

    .ncarry { 
        font-family: var(--serif); 
        font-style: italic; 
        font-size: 0.85rem; 
        color: var(--w30); 
        margin-left: auto; 
        text-align: right; 
        max-width: 60ch; 
        line-height: 1.4; 
        transition: 300ms ease-in-out;
    }

    .n-row:hover .ncarry { 
        color: var(--white); 
    }

    .no-origin { 
        font-family: var(--serif); 
        font-style: italic; 
        font-size: 0.78rem; 
        color: var(--w12); 
        margin-top: 1.5rem; 
        line-height: 1.6; 
    }


    .copywrite_linkedIn {
        border-top: 1px solid var(--rule);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 40px;
        background-color: var(--dark);
    }

    .copywrite {
        font-family: var(--sans);
        font-weight: 200;
        font-size: .6rem;
    }

    #year {
        font-family: var(--sans);
        font-weight: 200;
        font-size: .7rem;
    }

    #copywrite_name {
      font-weight: 200;
      font-size: .7rem;
    }

    .linkedIn svg {
      width: 25px;
      height: 25px;
      margin-left: 4rem;
      margin-top: 4px;
      opacity: .7;
      transition: 200ms ease-in-out;
    }

    .linkedIn svg:hover {
      opacity: 1;
    }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
                                                                      MOBILE
════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
 
@media (max-width: 1565px) { 

  .metrics {
    margin: 24px auto;
    width: 90%;
  }

  .metric-card-display {
    flex-direction: column;
  }

  .metrics-card {
    width: 400px;
  }

  .about_copy {
    width: 50%;
}

  .about_pic_BG {
    width: 50%;
}

}

@media (max-width: 1300px) {
  .chapter-card {
  flex-direction: column;
}

.chapter-card > :last-child {
    order: -1;
  }

.chap-num-wrap {
    height: 6rem;
    padding-right: 10%;
    padding-top: 0;
}

.chap-label {
  font-size: 1rem;
  letter-spacing: 0.25rem;
  padding-right: 1.20rem;
}

.chap-num {
  font-size: 6rem;
  letter-spacing: .2rem;
}

.chapter-card:hover .chap-num, .chapter-card:focus .chap-num {
    transform: translateY(-4%);
    color: var(--dark);
}

.teaser p {
  padding: 0 12px;
}

#about.about_section {
    flex-direction: column;
}

.about_copy {
    width: 100%;
}

  .about_pic_BG {
    width: 100%;
    padding-bottom: 400px;
}

}


@media (max-width: 1200px) {

  .top-row {
    display: block;
    min-height: 90vh;
}

  .main-image-display {
    height: 300px;
    width: 100%;
    background-image: url('../images/main/valken_section_header_mobile.jpg');
    background-size: cover;  
    background-position: center center;
}

.story-intro {
    padding: 2.5rem 1rem;
    max-width: 80%;
    margin: 0 auto;
}



}


@media (max-width: 1000px) {

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px;
}

.card-thumb {
    width: 100%;
}

.story-intro-title {
    width: 80%;
    padding-top: 24px;
    margin-right: 24px;
}

.chapter-heading {
    font-size: 2rem;
    letter-spacing: .2rem;
    color: var(--orange);
    margin-bottom: 1.2rem;
    padding-bottom: 8px;
}

.vocab-list {
    margin-bottom: 2rem;
}

.vocab-word {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--w55);
    line-height: 1.3;
}

.teaser {
  max-width: 80%;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  color: var(--w80);
}

.about-body p {
 color: var(--w80);
}


}


@media (max-width: 860px) {
      
.hero-center {
  background-image: url('../images/main/hero_BG_mobile.jpg');
  background-size: cover; 
}

#nodalCanvas {
  display: none;
}

.w {
    font-size: 1.8rem;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--white);
}

.author-block {
  right: 1.6rem;
  bottom: 2rem;
  max-width: 340px;
}

.author-intro {
    font-size: 0.80rem;
    line-height: 1.65;
    color: var(--w80);
}

.main-image-display {
    height: 300px;
    width: 100%;
    background-image: url('../images/main/valken_section_header_mobile.jpg');
    background-size: cover;  
    background-position: center left;
}



.story-body p {
  color: var(--w80);
  max-width: 80ch;
}

.metrics {
    width: 80%;
}

.metrics-card {
      width: 300px;
    }

      .chapter-hero { 
        grid-template-columns: 1fr; 
      }

      #chapter-1 {
          background-image: url('../images/valken/2023_Airsoft_Catalog_cover.jpg');
          background-size: cover;  
          background-position: 40% center;
      }

      #chapter-2 {
          background-image: url('../images/valken/chapter_2_hero_SML.jpg');
          background-size: cover;  
          background-position: 40% center;
      }

      #chapter-3 {
          background-image: url('../images/valken/chapter_3_hero_SML.jpg');
          background-size: cover;  
          background-position: 40% center;
      }

      #chapter-4 {
          background-image: url('../images/valken/chapter_04_hero_SML.jpg');
          background-size: cover;  
          background-position: 40% center;
      }

       #chapter-5 {
          background-image: url('../images/valken/chapter_05_hero_SML.png');
          background-size: cover;  
          background-position: 40% center;
      }

      .hero-num-col { display: none; }

      .hero-identity { 
        padding: 4rem 1.6rem 3rem; 
        background: linear-gradient(to bottom, transparent .1%, var(--dark)); 
      }

      .hero-identity::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 101%;
        height: 102%;
        background: linear-gradient(to bottom, transparent .1%, var(--dark));
        z-index: 1;
      }

      .hero-eyebrow {
        display: none;
      }

      .hero-title {
        margin-bottom: 1.4rem;
      }

      .hero-tagline {
        margin-bottom: 1rem;
        color: var(--white);
      }
      
      .disc {
        font-size: 0.77rem;
        letter-spacing: 0.05em;
        color: var(--w80);
}

.disc.human {
    font-size: 0.8rem;
    color: var(--white);
}

      .hero-eyebrow,
      .hero-disc,
      .hero-title, 
      .hero-tagline {
        z-index: 2;
      }

      .body-wrap { 
        padding: 0 1.5rem; 
      }

      .opener-text {
        max-width: 80%;
      }

      .narr { 
        grid-template-columns: 1fr; 
        gap: 1.5rem; 
      }

      .narr-rule { display: none; }
      .narr-side { flex-direction: row; align-items: center; gap: 0.6rem; }
      .side-label { text-align: left; }
      .quote-block { padding: 3.5rem 1.5rem; }
      .ch-footer { grid-template-columns: 1fr; gap: 2rem; }
      .ph-strip.c2 { grid-template-columns: 1fr; }
      .ph-strip.c3 { grid-template-columns: 1fr 1fr; }

      
      .solution_design {
        padding: 18px;
      }

      .ch-footer {
        max-width: fit-content;
      }

      .n-row { 
        flex-direction: column;
    }

    }