:root {
  --sand: #DDD6C8;
  --paper: #F5F1E8;
  --ink: #11110E;
  --ink-soft: #292621;
  --signal: #D9653F;
  --petrol: #175E63;
  --muted: #6F6A61;
  --line: rgba(17, 17, 15, .18);
  --line-light: rgba(244, 240, 230, .18);
  --pad: clamp(20px, 2.8vw, 44px);
  --display: "Archivo Black", Arial Black, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --ease: cubic-bezier(.2, .72, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scrollbar-color: var(--signal) var(--ink); }
body { margin: 0; overflow-x: hidden; background: var(--sand); color: var(--ink); font-family: var(--body); text-rendering: optimizeLegibility; }
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--signal); color: var(--ink); }

.grain { position: fixed; z-index: 90; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: multiply; background-image: repeating-radial-gradient(circle at 17% 23%, rgba(0,0,0,.55) 0 0.45px, transparent .7px 3px); background-size: 5px 5px; }
.masthead { position: fixed; z-index: 80; top: 22px; left: var(--pad); right: var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 34px; color: var(--ink); transition: opacity .25s linear; }
.masthead.is-compact { top: 22px; }
.aq-mark { justify-self: start; display: flex; align-items: center; gap: 10px; font: 700 9px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.aq-mark b { display: grid; width: 32px; height: 32px; place-items: center; background: var(--ink); color: var(--paper); font: 400 13px/1 var(--display); letter-spacing: -.06em; }
.aq-mark span { font-size: 7px; }
.masthead-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); font: 700 8px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.masthead-nav a { position: relative; padding: 8px 0; }
.masthead-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: currentColor; transition: right .28s var(--ease); }
.masthead-nav a:hover::after, .masthead-nav a:focus-visible::after { right: 0; }
.masthead-actions { justify-self: end; display: flex; align-items: center; gap: 19px; font: 700 8px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.masthead-contact { padding-bottom: 4px; border-bottom: 1px solid currentColor; }

.story-rail { position: fixed; z-index: 86; top: clamp(76px, 8.5vh, 94px); left: clamp(24px, 2.25vw, 34px); bottom: clamp(26px, 3.2vh, 34px); width: clamp(235px, 17vw, 248px); pointer-events: none; color: var(--ink); font: 700 clamp(11px, .78vw, 12px)/1 var(--body); letter-spacing: .075em; text-transform: uppercase; }
.story-rail-spine { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(17,17,15,.28); opacity: 0; transform: scaleY(0); transform-origin: top; }
.story-rail-identity, .story-rail-nav, .story-rail-actions { position: relative; padding-left: clamp(15px, 1.15vw, 18px); }
.story-rail-nav, .story-rail-actions { opacity: 0; }
.story-rail-identity { display: grid; grid-template-columns: clamp(42px, 3.1vw, 46px) minmax(0, 1fr); gap: clamp(10px, .85vw, 13px); align-items: start; padding-bottom: 18px; border-bottom: 1px solid rgba(17,17,14,.24); }
.story-rail-aq { display: grid; width: clamp(42px, 3.1vw, 46px); height: clamp(42px, 3.1vw, 46px); place-items: center; background: transparent; color: var(--paper); font: 400 clamp(14px, 1vw, 16px)/1 var(--display); letter-spacing: -.06em; }
.story-rail-profile { display: grid; grid-template-columns: clamp(48px, 3.7vw, 54px) minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.story-rail-portrait { position: relative; display: block; overflow: visible; width: clamp(48px, 3.7vw, 54px); height: clamp(48px, 3.7vw, 54px); background: transparent; }
.story-rail-portrait img { display: block; width: 100%; height: auto; }
.story-rail-name { display: block; min-width: 0; line-height: 1.1; }
.story-rail-name strong { display: block; margin-bottom: 8px; font-size: clamp(11px, .8vw, 12px); line-height: 1.05; letter-spacing: .035em; }
.story-rail-name span { display: block; color: var(--muted); font-size: clamp(7px, .55vw, 8px); line-height: 1.38; letter-spacing: .065em; }
.story-rail-nav { display: grid; gap: 0; margin-top: clamp(46px, 5.2vh, 58px); font-size: clamp(12px, .86vw, 13px); letter-spacing: .055em; }
.story-rail-nav a { position: relative; display: grid; grid-template-columns: clamp(28px, 2.2vw, 34px) 1fr 16px; align-items: center; min-height: clamp(50px, 5.8vh, 54px); border-top: 1px solid rgba(17,17,14,.22); transition: color .25s var(--ease), font-weight .25s var(--ease); }
.story-rail-nav a:last-child { border-bottom: 1px solid rgba(17,17,14,.22); }
.story-rail-nav a::after { content: "→"; justify-self: end; opacity: 0; color: var(--signal); font-size: 12px; transform: translateX(-5px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.story-rail-nav b { color: #8B857A; font-size: clamp(8px, .58vw, 9px); font-weight: 700; transition: color .25s var(--ease); }
.story-rail-nav a::before { content: ""; position: absolute; left: calc(-1 * clamp(15px, 1.15vw, 18px)); top: 50%; width: 0; height: 2px; background: var(--signal); transform: translateY(-50%); transition: width .3s var(--ease); }
.story-rail-nav a.is-active { font-weight: 700; }
.story-rail-nav a.is-active::before { width: clamp(18px, 1.6vw, 24px); }
.story-rail-nav a.is-active::after { opacity: 1; transform: translateX(0); }
.story-rail-nav a.is-active b { color: var(--signal); }
.story-rail-nav a[data-rail-section="bridge"]:hover, .story-rail-nav a[data-rail-section="bridge"]:focus-visible, .story-rail-nav a[data-rail-section="focus"]:hover, .story-rail-nav a[data-rail-section="focus"]:focus-visible { color: var(--petrol); }
.story-rail-actions { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0; }
.story-rail-actions a { display: flex; justify-content: space-between; width: 100%; padding: 13px 0; border-top: 1px solid rgba(17,17,14,.22); font-size: clamp(11px, .78vw, 12px); }
.story-rail-actions a:last-child { border-bottom: 1px solid rgba(17,17,14,.22); }
.story-rail-aq .aq-core { display: grid; place-items: center; background: var(--ink); color: var(--paper); width: 100%; height: 100%; font: 400 16px/1 var(--display); }
.story-rail-name .aq-name { display: block; margin: 0; color: var(--ink); font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.story-rail-portrait .hero-portrait { position: relative; inset: auto; display: block; width: 100%; height: auto; min-height: 0; margin: 0; transform: none; }
.story-rail-portrait .hero-portrait img { position: static; width: 100%; height: auto; max-width: none; filter: none; }
.js .story-rail-name > span { opacity: 0; }
.js .story-rail-identity { border-bottom-color: transparent; }
.rail-established .story-rail { pointer-events: auto; }
.rail-established .masthead { pointer-events: none; }

.hero { position: relative; z-index: 1; height: calc(100svh + 600px); min-height: 1320px; background: var(--sand); }
.hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; }
.hero-sticky::after { content: ""; position: absolute; z-index: 8; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: rgba(17,17,15,.24); }
.hero-kicker { position: absolute; z-index: 6; top: clamp(108px, 14vh, 132px); left: var(--pad); margin: 0; font: 700 9px/1.1 var(--body); letter-spacing: .09em; text-transform: uppercase; }
.hero-descriptor { position: absolute; z-index: 6; top: clamp(131px, 16.7vh, 156px); left: var(--pad); margin: 0; color: var(--muted); font: 700 7px/1.1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.hero-portrait { position: absolute; z-index: 4; top: 8svh; left: calc(50% - 28.1svh); right: auto; bottom: auto; width: auto; height: 76svh; margin: 0; pointer-events: none; transform: none; transform-origin: left top; will-change: transform; }
.hero-portrait img { display: block; width: auto; height: 100%; max-width: none; filter: drop-shadow(0 24px 24px rgba(35,29,18,.08)); }
.hero-title-block { position: absolute; z-index: 3; top: clamp(176px, 23vh, 218px); left: var(--pad); width: calc(100vw - (2 * var(--pad))); color: var(--ink); transform-origin: left top; }
.hero-title-block h1 { margin: 0; font: 400 clamp(108px, 10.25vw, 166px)/.79 var(--display); letter-spacing: -.083em; }
.hero-line { display: block; width: 100%; overflow: hidden; padding-right: .08em; }
.hero-line > span { display: block; will-change: transform; }
.hero-personality { position: absolute; z-index: 6; top: clamp(174px, 22vh, 205px); right: var(--pad); display: grid; gap: 5px; justify-items: end; opacity: .72; font: 700 6px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.hero-personality span::before { content: "·"; margin-right: 6px; color: var(--signal); }
.hero-support { position: absolute; z-index: 6; left: var(--pad); bottom: 76px; width: min(27vw, 355px); }
.hero-support > p { margin: 0 0 18px; font-size: 13px; line-height: 1.38; }
.hero-actions { display: flex; gap: 22px; align-items: center; font: 700 9px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.hero-actions a { padding-bottom: 5px; border-bottom: 1px solid var(--ink); }
.hero-actions span { margin-left: 9px; color: var(--signal); }
.hero-actions [data-ui-source] { margin: 0; color: inherit; }
[data-ui-source]:not(.hero-metric) { display: inline-block; }
.hero-metrics { position: absolute; z-index: 6; right: var(--pad); bottom: 62px; display: grid; grid-template-columns: repeat(3, minmax(112px, 1fr)); gap: clamp(22px, 3vw, 52px); width: min(56vw, 800px); transform-origin: left center; }
.hero-metrics > div { display: grid; grid-template-columns: auto minmax(84px, 1fr); gap: 10px; align-items: end; padding-top: 10px; border-top: 1px solid rgba(17,17,15,.36); }
.hero-metrics strong { color: var(--signal); font: 400 clamp(24px, 2.35vw, 37px)/.8 var(--display); letter-spacing: -.07em; white-space: nowrap; }
.hero-metrics span { max-width: 118px; font: 600 8px/1.15 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.hero-scroll { position: absolute; z-index: 7; left: var(--pad); bottom: 24px; margin: 0; font: 700 7px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.hero-scroll span { margin-left: 7px; color: var(--signal); }

@media (min-width: 981px) {
  .hero-bottom-dock { position:absolute; left:var(--pad); bottom:14px; width:calc(100vw - 2 * var(--pad)); height:44px; display:grid; grid-template-columns:44px .85fr .95fr .85fr 1.5fr 1.35fr 1.05fr 1fr; align-items:stretch; font:700 10px/1.1 var(--body); letter-spacing:.04em; text-transform:uppercase; }
  .hero-bottom-dock.is-compressed { width:calc(72vw - 2 * var(--pad)); grid-template-columns:44px .8fr .9fr .8fr 1.55fr 1.4fr 1fr 1fr; }
  .hero-bottom-dock .dock-cell { position:relative; display:grid; grid-template-columns:0px 1fr 0px; align-items:center; min-width:0; height:44px; padding:0 12px; font:inherit; }
  .hero-bottom-dock .dock-cell b { position:absolute; opacity:0; }
  .hero-bottom-dock .dock-label { display:block; white-space:normal; }
  .hero-bottom-dock .story-rail-aq { width:44px; height:44px; }
  .has-bottom-dock { display:grid; grid-template-columns:1fr; grid-template-rows:max-content max-content 1fr; pointer-events:auto; }
  .has-bottom-dock .story-rail-profile { grid-column:2; grid-row:1; }
  .has-bottom-dock .story-rail-aq { grid-column:1; grid-row:1; }
  .has-bottom-dock .dock-label { position:relative; z-index:2; }
  .has-bottom-dock .dock-cell { min-width:0; }
  .dock-cell-edge { position:absolute; inset:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-right:1px solid var(--line); opacity:var(--dock-edge, 1); pointer-events:none; }
  .has-bottom-dock .story-rail-actions a { height:33px; min-height:33px; padding:0; position:relative; }
  .has-bottom-dock .story-rail-actions .dock-label { position:absolute; top:-9px; left:0; font-size:13px; white-space:nowrap; }
  .has-bottom-dock .story-rail-actions a:last-child .dock-label { top:16px; }
  .has-bottom-dock ~ main .hero-scroll { visibility:hidden; }
}

.about { position: relative; z-index: 2; overflow: hidden; background: var(--paper); }
.hero + .about .section-intro { padding-top: clamp(92px, 8vw, 128px); }
.section-intro { display: grid; grid-template-columns: 24% minmax(0, 1fr); gap: 4vw; align-items: start; min-height: 100vh; padding: clamp(130px, 13vw, 210px) var(--pad) 8vw; }
.section-code { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
.section-code > span { font-size: 10px; }
.section-code p { margin: 0; font: 700 16px/.98 var(--body); letter-spacing: -.02em; }
.section-code em { color: var(--muted); font-style: normal; }
.micro-label { margin: 0 0 16px; color: var(--muted); font: 700 9px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.about-thesis { max-width: 1180px; }
.about-thesis h2 { margin: 0; font: 400 clamp(56px, 7.7vw, 124px)/.92 var(--display); letter-spacing: -.06em; }
.about-thesis h2 span { color: #8f8a80; }
.about-editorial { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: clamp(50px, 9vw, 150px); align-items: center; min-height: 120vh; padding: 8vw max(var(--pad), 7vw) 12vw; }
.about-portrait { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.about-image-crop { position: relative; overflow: hidden; aspect-ratio: .83; min-height: 560px; border-radius: 20px; background: var(--signal); }
.about-image-crop::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(transparent, rgba(17,17,15,.14)); pointer-events: none; }
.about-image-crop img { position: absolute; left: -24%; top: -10%; width: 148%; max-width: none; height: 120%; object-fit: contain; object-position: 50% 0; }
.about-image-label { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 9px 11px; border-radius: 7px; background: var(--paper); font: 700 8px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.about-portrait > p { margin: 18px 0 0; font: 600 12px/1.25 var(--body); text-transform: uppercase; }
.about-narrative { padding-top: 5vw; }
.about-lead { max-width: 880px; margin: 0 0 9vw; font: 500 clamp(27px, 3.45vw, 54px)/1.08 var(--body); letter-spacing: -.04em; }
.about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); }
.about-columns p { margin: 0; color: #4f4b43; font-size: 15px; line-height: 1.55; }
.principles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 50px; }
.principles span { padding: 11px 13px; border: 1px solid var(--line); border-radius: 999px; font: 600 9px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.belief-line { overflow: hidden; border-block: 1px solid var(--line); padding: 19px 0; color: var(--signal); font: 400 24px/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.belief-line div { width: max-content; animation: marquee 34s linear infinite; }

.journey { position: relative; height: 520vh; min-height: 4200px; background: var(--ink); color: var(--paper); }
.journey-sticky { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); height: 100svh; min-height: 720px; overflow: hidden; }
.journey-stage { position: relative; overflow: hidden; background: #151512; }
.journey-stage::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 72px 72px; }
.journey-axis { position: absolute; z-index: 1; left: 1vw; top: 58%; width: 275vw; height: 2px; background: rgba(244,240,230,.58); transform: rotate(-4deg); transform-origin: left center; }
.journey-axis i { position: absolute; top: 50%; width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 50%; background: var(--signal); transform: translate(-50%, -50%); }
.journey-axis i:nth-child(1){left:8%}.journey-axis i:nth-child(2){left:22%}.journey-axis i:nth-child(3){left:36%}.journey-axis i:nth-child(4){left:50%}.journey-axis i:nth-child(5){left:64%}.journey-axis i:nth-child(6){left:78%}.journey-axis i:nth-child(7){left:92%}
.journey-track { position: absolute; z-index: 2; left: 7vw; top: 50%; display: flex; align-items: center; gap: 11vw; width: max-content; transform: translate3d(0,-50%,0); will-change: transform; }
.journey-card { position: relative; flex: 0 0 min(47vw, 700px); width: min(47vw, 700px); min-height: min(650px, 76vh); padding: clamp(24px, 2.2vw, 34px); overflow: hidden; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.32); opacity: .28; transform: translateY(var(--lift)) rotate(var(--tilt)) scale(.92); transition: opacity .5s var(--ease), transform .6s var(--ease), background .3s; }
.journey-card.is-active { opacity: 1; transform: translateY(var(--lift)) rotate(0) scale(1); }
.chapter-feature { background: var(--signal); }
.chapter-now { background: #d8d1c2; }
.chapter-top, .chapter-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.chapter-top { font: 700 9px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.chapter-top b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 9px; }
.chapter-year { margin: 5.5vh 0 10px; color: var(--signal); font: 400 clamp(74px, 8vw, 132px)/.78 var(--display); letter-spacing: -.08em; }
.chapter-feature .chapter-year { color: var(--ink); }
.chapter-now .chapter-year { font-size: clamp(62px, 6.2vw, 105px); }
.journey-card h3 { max-width: 590px; margin: 0; font: 400 clamp(34px, 3.7vw, 61px)/.92 var(--display); letter-spacing: -.055em; }
.chapter-copy { max-width: 590px; margin: 25px 0 36px; color: #5a564e; font-size: 14px; line-height: 1.5; }
.chapter-feature .chapter-copy { color: #342016; }
.chapter-bottom { position: absolute; left: clamp(24px, 2.2vw, 34px); right: clamp(24px, 2.2vw, 34px); bottom: clamp(22px, 2vw, 31px); }
.chapter-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chapter-tags span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; font: 700 8px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.chapter-more { display: flex; align-items: center; gap: 14px; padding: 11px 13px; border: 0; border-radius: 8px; background: var(--ink); color: var(--paper); font: 700 9px/1 var(--body); cursor: pointer; }
.chapter-more b { color: var(--signal); font-size: 16px; font-weight: 400; transition: transform .3s; }
.journey-card.is-expanded .chapter-more b { transform: rotate(45deg); }
.chapter-detail { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 60px); background: var(--ink); color: var(--paper); opacity: 0; visibility: hidden; clip-path: inset(100% 0 0); transition: clip-path .55s var(--ease), opacity .3s, visibility 0s linear .55s; }
.chapter-detail::before { content: "Close  ×"; position: absolute; top: 26px; right: 28px; color: var(--signal); font: 700 9px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.journey-card.is-expanded .chapter-detail { opacity: 1; visibility: visible; clip-path: inset(0); transition-delay: 0s; }
.chapter-detail .micro-label { color: var(--signal); }
.chapter-detail > p:last-child { max-width: 580px; margin: 0; font: 500 clamp(24px, 2.7vw, 42px)/1.08 var(--body); letter-spacing: -.035em; }
.journey-counter { position: absolute; z-index: 3; right: 25px; bottom: 22px; display: flex; align-items: center; gap: 10px; font: 700 9px/1 var(--body); }
.journey-counter i { width: 58px; height: 1px; background: #615e56; }
.journey-counter b { color: #77736b; }
.journey-instruction { position: absolute; z-index: 3; top: 24px; right: 25px; margin: 0; color: #8d887f; font: 700 8px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.journey-instruction span { margin-left: 9px; color: var(--signal); }

.impact { overflow: hidden; padding: clamp(120px, 13vw, 210px) 0 80px; background: var(--sand); }
.impact-heading { display: grid; grid-template-columns: 22% minmax(0, 1fr) 25%; gap: 3vw; align-items: end; padding: 0 var(--pad); margin-bottom: 75px; }
.impact-heading h2, .focus-intro h2 { margin: 0; font: 400 clamp(58px, 7.2vw, 116px)/.9 var(--display); letter-spacing: -.06em; }
.impact-heading h2 span, .focus-intro h2 span { color: #918b80; }
.impact-heading > p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.impact-track { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--pad) 12px; cursor: grab; scrollbar-width: none; scroll-snap-type: x mandatory; }
.impact-track::-webkit-scrollbar { display: none; }
.impact-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.impact-card { flex: 0 0 min(44vw, 650px); min-height: 610px; padding: 28px; border-radius: 22px; display: flex; flex-direction: column; scroll-snap-align: start; }
.impact-card-dark { background: var(--ink); color: var(--paper); }
.impact-card-signal { background: var(--signal); }
.impact-card-light { background: var(--paper); }
.impact-card-petrol { background: var(--petrol); color: var(--paper); }
.impact-card-top { display: flex; justify-content: space-between; font: 700 8px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.impact-card-top i { opacity: .6; font-style: normal; }
.impact-card strong { margin: auto 0 36px; font: 400 clamp(98px, 10.5vw, 178px)/.72 var(--display); letter-spacing: -.09em; }
.impact-card-dark strong { color: var(--signal); }
.impact-card h3 { max-width: 500px; margin: 0 0 16px; font: 400 clamp(29px, 3.2vw, 48px)/.94 var(--display); letter-spacing: -.05em; }
.impact-card > p { max-width: 470px; margin: 0; opacity: .68; font-size: 13px; line-height: 1.48; }
.impact-control { display: flex; align-items: center; gap: 16px; padding: 24px var(--pad) 0; color: var(--muted); font: 700 8px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; }
.impact-control i { flex: 1; height: 1px; background: var(--line); }
.impact-control b { color: var(--ink); }

.bridge { min-height: 128vh; padding: clamp(130px, 13vw, 210px) var(--pad); overflow: hidden; background: var(--paper); }
.bridge-copy { text-align: center; }
.bridge-copy h2 { display: flex; align-items: center; justify-content: center; gap: 2vw; margin: 0; font: 400 clamp(88px, 12.7vw, 205px)/.76 var(--display); letter-spacing: -.075em; }
.bridge-copy h2 span:last-child { color: var(--signal); }
.bridge-copy h2 i { display: grid; flex: 0 0 .72em; width: .72em; height: .72em; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 500 .45em/1 var(--body); }
.bridge-copy > p:last-child { max-width: 470px; margin: 40px auto 110px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.bridge-system { display: grid; grid-template-columns: 1fr minmax(220px, 320px) 1fr; gap: 4vw; align-items: center; padding: 50px 0; border-block: 1px solid var(--line); }
.bridge-column > span { font: 700 8px/1 var(--body); letter-spacing: .15em; text-transform: uppercase; }
.bridge-column strong { display: block; margin-top: 18px; font: 400 clamp(40px, 5.4vw, 84px)/.88 var(--display); letter-spacing: -.055em; }
.bridge-column-right { text-align: right; }
.bridge-orbit { position: relative; display: grid; width: min(24vw, 320px); aspect-ratio: 1; place-items: center; margin: auto; }
.bridge-orbit::before, .bridge-orbit i { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.bridge-orbit::before { inset: 0; }
.bridge-orbit i { inset: 18%; border-color: var(--signal); }
.bridge-orbit span { z-index: 2; font: 400 clamp(32px, 4vw, 58px)/1 var(--display); letter-spacing: -.07em; }
.bridge-orbit b { position: absolute; width: 118%; color: var(--muted); font: 700 8px/1 var(--body); letter-spacing: .13em; text-align: center; text-transform: uppercase; animation: pulse 3s ease-in-out infinite; }

.focus { padding: clamp(130px, 13vw, 210px) var(--pad); background: #cec7b8; }
.focus-intro { display: grid; grid-template-columns: 22% minmax(0, 1fr) 24%; gap: 3vw; align-items: end; margin-bottom: 90px; }
.focus-intro > p { color: var(--muted); font-size: 13px; }
.focus-list { border-bottom: 1px solid var(--line); }
.focus-item { position: relative; display: grid; grid-template-columns: 54px minmax(280px, 1fr) minmax(260px, .7fr) 150px 36px; gap: 22px; align-items: center; min-height: 128px; padding: 18px 8px; overflow: hidden; border-top: 1px solid var(--line); outline: none; transition: padding .4s var(--ease), color .3s; }
.focus-item::before { content: ""; position: absolute; z-index: 0; inset: 0; background: var(--signal); transform: translateY(102%); transition: transform .45s var(--ease); }
.focus-item:hover::before, .focus-item:focus-visible::before { transform: translateY(0); }
.focus-item > * { position: relative; z-index: 1; }
.focus-item > span { font: 700 9px/1 var(--body); }
.focus-item h3 { margin: 0; font: 400 clamp(30px, 3.4vw, 53px)/.92 var(--display); letter-spacing: -.055em; }
.focus-item > p { margin: 0; color: #5e5a51; font-size: 12px; line-height: 1.45; }
.focus-item > b { font-size: 25px; font-weight: 400; }
.focus-glyph { position: relative; width: 130px; height: 84px; justify-self: center; }
.focus-glyph i { position: absolute; display: block; }
.glyph-energy i { left: 14px; bottom: 10px; width: 14px; border-radius: 7px 7px 2px 2px; background: var(--ink); }
.glyph-energy i:nth-child(1){height:30px}.glyph-energy i:nth-child(2){left:52px;height:52px}.glyph-energy i:nth-child(3){left:90px;height:72px}
.glyph-data { display: grid; grid-template-columns: repeat(2, 34px); gap: 8px; place-content: center; }
.glyph-data i { position: static; width: 34px; height: 28px; border: 2px solid var(--ink); border-radius: 5px; }
.glyph-ai i { inset: 8px 30px; border: 2px solid var(--ink); border-radius: 50%; }
.glyph-ai i::before, .glyph-ai i::after { content:""; position:absolute; background:var(--ink); }
.glyph-ai i::before { left:50%; top:-9px; width:2px; height:68px; }
.glyph-ai i::after { left:-9px; top:50%; width:68px; height:2px; }
.glyph-consumer i { width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 50%; }
.glyph-consumer i:nth-child(1){left:18px;top:14px}.glyph-consumer i:nth-child(2){right:18px;top:14px}
.glyph-cross i { top:40px; width:72px; height:2px; background:var(--ink); }
.glyph-cross i:nth-child(1){left:5px;transform:rotate(19deg)}.glyph-cross i:nth-child(2){right:5px;transform:rotate(-19deg)}

.manifesto { position: relative; min-height: 94vh; display: flex; flex-direction: column; justify-content: center; padding: 10vw var(--pad); overflow: hidden; background: var(--signal); }
.manifesto::after { content: "AQ"; position: absolute; right: -2vw; bottom: -7vw; opacity: .09; font: 400 31vw/.7 var(--display); letter-spacing: -.12em; }
.manifesto h2 { position: relative; z-index: 1; max-width: 1350px; margin: 0; font: 400 clamp(55px, 7.8vw, 126px)/.91 var(--display); letter-spacing: -.06em; }
.manifesto h2 span { color: var(--paper); }
.manifesto-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; margin-top: 80px; padding-top: 17px; border-top: 1px solid rgba(17,17,15,.32); font: 700 8px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }

.contact { min-height: 112vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(100px, 10vw, 160px) var(--pad) 28px; overflow: hidden; background: var(--ink); color: var(--paper); }
.contact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.contact-head p { margin: 0; color: #aaa59b; font-size: 13px; }
.contact-head a { display: inline-block; border-bottom: 3px solid var(--paper); font: 400 clamp(46px, 6.2vw, 100px)/.95 var(--display); letter-spacing: -.055em; }
.contact-head a span { color: var(--signal); }
.contact-statement { margin: auto 0; padding: 100px 0; color: var(--paper); font: 400 clamp(108px, 15vw, 245px)/.71 var(--display); letter-spacing: -.082em; }
.contact-statement span { display: block; white-space: nowrap; }
.contact-statement span:last-child { color: var(--signal); text-align: right; }
.contact footer { display: grid; grid-template-columns: 1fr 2fr auto auto; gap: 30px; align-items: end; padding-top: 18px; border-top: 1px solid var(--line-light); color: #9d988e; font: 600 9px/1.3 var(--body); letter-spacing: .04em; }
.contact footer i { font-style: normal; }
.contact footer a { color: var(--paper); }

.js .reveal { opacity: 0; transform: translateY(40px); }

@media (min-width: 981px) {
  .hero-line:first-child > span { font-size: .94em; }
  .story-rail { width: clamp(240px, 18vw, 260px); }
  .story-rail-identity { grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 24px; }
  .story-rail-profile { display: block; }
  .story-rail-portrait { width: 108px; height: auto; }
  .story-rail-name { margin-top: 16px; }
  .story-rail-name strong { font-size: 13px; line-height: 1.15; margin-bottom: 9px; }
  .story-rail-name > span { font-size: 10px; line-height: 1.5; letter-spacing: .035em; }
  .story-rail-nav { margin-top: 32px; font-size: 13px; }
  .story-rail-nav a { min-height: 56px; border-color: rgba(17,17,14,.32); }
  .story-rail-nav b { font-size: 10px; }
  .story-rail-actions a { font-size: 13px; padding: 16px 0; }
  main > section:not(.hero) { margin-left: clamp(292px, 21.2vw, 320px); width: calc(100% - clamp(292px, 21.2vw, 320px)); }
}

@keyframes marquee { to { transform: translateX(-33.333%); } }
@keyframes pulse { 0%,100% { opacity:.5; transform:scale(.96) } 50% { opacity:1; transform:scale(1) } }

@media (max-width: 1100px) {
  .masthead-nav { gap: 12px; }
  .aq-mark span, .masthead-actions > a:first-child { display: none; }
  .hero-title-block { width: calc(100vw - (2 * var(--pad))); }
  .hero-title-block h1 { font-size: 9.65vw; }
  .hero-portrait { left: calc(50% - 28.1svh); right: auto; width: auto; }
  .hero-personality { gap: 5px; }
  .hero-metrics { width: 61vw; gap: 18px; }
  .about-editorial { grid-template-columns: .9fr 1.1fr; gap: 7vw; }
  .about-columns { grid-template-columns: 1fr; gap: 24px; }
  .impact-heading, .focus-intro { grid-template-columns: 19% 1fr; }
  .impact-heading > p, .focus-intro > p { grid-column: 2; max-width: 420px; }
  .focus-item { grid-template-columns: 44px 1fr minmax(220px,.65fr) 110px 30px; }
}

@media (max-width: 980px) {
  .masthead-nav { display: none; }
  .masthead { grid-template-columns: 1fr 1fr; }
  .story-rail { top: 58px; left: 10px; right: 10px; bottom: auto; width: auto; height: 72px; padding: 9px 10px; background: rgba(216,209,194,.88); backdrop-filter: blur(14px); opacity: 0; }
  .story-rail-spine { top: auto; left: 10px; right: 10px; bottom: 0; width: auto; height: 1px; transform: scaleX(0); transform-origin: left; }
  .story-rail-identity { display: flex; gap: 8px; align-items: center; padding-left: 0; }
  .story-rail-aq::before { content: "AQ"; }
  .story-rail-name strong::before { content: "Abdulaziz Qambar"; }
  .story-rail-profile { display: contents; }
  .story-rail-portrait { display: none; }
  .story-rail-name span { display: inline; }
  .story-rail-name span + span::before { content: " "; }
  .story-rail-nav { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; margin: 0; padding: 0; }
  .story-rail-nav a { display: flex; gap: 4px; min-height: 0; border: 0; }
  .story-rail-nav a:last-child { border: 0; }
  .story-rail-nav b { font-size: 5px; }
  .story-rail-nav a::before { left: 0; top: auto; bottom: -5px; }
  .story-rail-actions { top: 11px; right: 10px; bottom: auto; left: auto; display: flex; gap: 10px; padding: 0; }
  .hero { height: calc(100svh + 600px); min-height: 1360px; }
  .hero-sticky { position: sticky; min-height: 760px; }
  .hero-kicker { top: 118px; }
  .hero-descriptor { top: 140px; }
  .hero-title-block { top: 180px; width: calc(100vw - (2 * var(--pad))); }
  .hero-title-block h1 { font-size: 11.4vw; }
  .hero-portrait { top: 20svh; left: calc(50% - 22.2svh); right: auto; width: auto; height: 60svh; }
  .hero-personality { top: 158px; right: var(--pad); }
  .hero-support { bottom: 116px; width: 34vw; }
  .hero-metrics { bottom: 55px; width: 61vw; }
  .section-intro { grid-template-columns: 1fr; gap: 80px; min-height: auto; }
  .about-editorial { grid-template-columns: 1fr; min-height: auto; }
  .about-portrait { max-width: 620px; }
  .about-narrative { padding-top: 0; }
  .about-lead { margin-bottom: 60px; }
  .journey { height: auto; min-height: 0; }
  .journey-sticky { position: relative; display: block; height: auto; min-height: 0; overflow: visible; }
  .journey-stage { padding: 0 var(--pad) 110px; }
  .journey-axis, .journey-counter, .journey-instruction { display: none; }
  .journey-track { position: static; display: grid; gap: 18px; width: auto; transform: none !important; }
  .journey-card, .journey-card.is-active { width: 100%; min-height: 610px; opacity: 1; transform: none; }
  .chapter-year { margin-top: 60px; }
  .impact-card { flex-basis: 68vw; }
  .bridge-system { grid-template-columns: 1fr 220px 1fr; }
  .focus-item { grid-template-columns: 38px 1fr 38px; padding-block: 26px; }
  .focus-item > p { grid-column: 2; max-width: 520px; }
  .focus-glyph { grid-column: 2; justify-self: start; }
  .focus-item > b { grid-column: 3; grid-row: 1; }
}

@media (max-width: 640px) {
  :root { --pad: 18px; }
  .grain { opacity: .055; }
  .masthead { top: 13px; min-height: 30px; }
  .masthead.is-compact { top: 13px; }
  .aq-mark b { width: 30px; height: 30px; font-size: 12px; }
  .masthead-actions { font-size: 8px; }
  .masthead-contact { padding: 0 0 4px; }
  .story-rail { top: 49px; height: 70px; }
  .story-rail-aq { width: 24px; height: 24px; font-size: 9px; }
  .story-rail-aq::before { content: "AQ"; }
  .story-rail-name strong::before { content: "Abdulaziz Qambar"; }
  .story-rail-nav { font-size: 5.5px; letter-spacing: .04em; }
  .story-rail-nav b { display: none; }
  .story-rail-actions { font-size: 5.5px; }
  .hero { height: calc(100svh + 600px); min-height: 1320px; }
  .hero-sticky { height: 100svh; min-height: 760px; max-height: none; }
  .hero-kicker { top: 78px; left: 18px; max-width: 280px; font-size: 7px; line-height: 1.25; }
  .hero-descriptor { top: 98px; left: 18px; font-size: 5.5px; }
  .hero-title-block { top: 135px; left: 18px; width: calc(100% - 36px); }
  .hero-title-block h1 { font-size: clamp(49px, 15vw, 63px); line-height: .84; letter-spacing: -.078em; }
  .hero-line:nth-child(1) > span { font-size: .58em; letter-spacing: -.085em; }
  .hero-portrait { z-index: 4; top: 268px; left: calc(50% - min(14.05svh, 119px)); right: auto; bottom: auto; width: auto; height: min(38svh, 322px); min-height: 0; transform: none; }
  .hero-portrait img { width: auto; height: 100%; }
  .hero-personality { top: 318px; left: 18px; right: auto; width: 110px; display: grid; gap: 5px; justify-content: start; font-size: 5.5px; }
  .hero-personality span::before { content: "·"; }
  .hero-support { bottom: 151px; left: 18px; width: 47vw; }
  .hero-support > p { margin-bottom: 13px; font-size: 9px; line-height: 1.35; }
  .hero-actions { display: grid; gap: 9px; justify-items: start; font-size: 7px; }
  .hero-metrics { left: 18px; right: 18px; bottom: 37px; width: auto; gap: 9px; }
  .hero-metrics > div { display: block; padding-top: 7px; }
  .hero-metrics strong { display: block; margin-bottom: 5px; font-size: 19px; }
  .hero-metrics span { display: block; max-width: 96px; font-size: 5.5px; line-height: 1.18; }
  .hero-scroll { display: none; }
  .section-intro { gap: 66px; padding: 100px 18px 82px; }
  .section-code p { font-size: 14px; }
  .about-thesis h2 { font-size: clamp(48px, 14.5vw, 68px); line-height: .92; }
  .about-editorial { gap: 70px; padding: 30px 18px 110px; }
  .about-image-crop { min-height: 0; aspect-ratio: .86; }
  .about-lead { margin-bottom: 50px; font-size: 29px; }
  .about-columns { grid-template-columns: 1fr; }
  .principles { align-items: flex-start; flex-direction: column; }
  .belief-line { font-size: 17px; }
  .journey-stage { padding: 0 10px 90px; }
  .journey-track { gap: 12px; }
  .journey-card, .journey-card.is-active { min-height: 650px; padding: 22px; border-radius: 17px; }
  .chapter-year { margin-top: 58px; font-size: 88px; }
  .chapter-now .chapter-year { font-size: 72px; }
  .journey-card h3 { font-size: 40px; }
  .chapter-copy { font-size: 13px; }
  .chapter-bottom { left: 22px; right: 22px; bottom: 22px; align-items: flex-end; }
  .chapter-tags { max-width: 58%; }
  .chapter-more { gap: 8px; padding: 10px; }
  .chapter-detail { padding: 26px; }
  .chapter-detail > p:last-child { font-size: 27px; }
  .impact { padding-top: 110px; }
  .impact-heading, .focus-intro { display: block; }
  .impact-heading .section-code, .focus-intro .section-code { margin-bottom: 65px; }
  .impact-heading h2, .focus-intro h2 { font-size: clamp(52px, 14vw, 68px); }
  .impact-heading > p, .focus-intro > p { margin-top: 30px; }
  .impact-track { gap: 10px; }
  .impact-card { flex-basis: 88vw; min-height: 520px; padding: 22px; border-radius: 17px; }
  .impact-card strong { margin-bottom: 30px; font-size: 105px; }
  .impact-card h3 { font-size: 34px; }
  .bridge { min-height: 0; padding: 110px 18px; }
  .bridge-copy h2 { display: block; font-size: 25vw; line-height: .78; }
  .bridge-copy h2 span, .bridge-copy h2 i { display: block; }
  .bridge-copy h2 i { width: 1em; height: 1em; margin: 22px auto; font-size: .28em; }
  .bridge-copy > p:last-child { margin: 42px auto 80px; }
  .bridge-system { grid-template-columns: 1fr; gap: 45px; text-align: center; }
  .bridge-column-right { text-align: center; }
  .bridge-orbit { width: 220px; }
  .bridge-column strong { font-size: 54px; }
  .focus { padding: 110px 18px; }
  .focus-intro { margin-bottom: 70px; }
  .focus-item { grid-template-columns: 30px 1fr 28px; gap: 13px; min-height: 0; padding: 28px 0; }
  .focus-item h3 { font-size: 35px; }
  .focus-item > p { font-size: 11px; }
  .focus-glyph { display: none; }
  .manifesto { min-height: 820px; padding: 110px 18px; }
  .manifesto h2 { font-size: clamp(50px, 13.8vw, 67px); }
  .manifesto-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
  .contact { min-height: 980px; padding: 100px 18px 24px; }
  .contact-head { display: block; }
  .contact-head a { margin-top: 34px; font-size: 50px; }
  .contact-statement { padding: 90px 0; font-size: 21vw; line-height: .75; }
  .contact-statement span:last-child { margin-top: 14px; text-align: left; }
  .contact footer { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* Transition landing: preserve the hero geometry and bring content alongside it. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .js .hero + .about { margin-top: calc(-1 * max(100svh, 720px)); visibility: hidden; }
  .story-rail-portrait { width: 120px; }
  .story-rail-name strong { font-size: 12px; }
  .story-rail-name > span { font-size: 10px; }
  .story-rail-name { position: relative; }
  .js .story-rail-name > [data-ui-slot] { min-height: 15px; opacity: 1; }
  .story-rail-name [data-ui-source] { color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .035em; white-space: nowrap; }
  .story-rail-nav [data-rail-target] { position: relative; min-height: 14px; }
  .story-rail-nav [data-ui-source]:not(.hero-metric) { white-space: nowrap; }
  .story-rail-actions [data-ui-source] { width: max-content; white-space: nowrap; }
  .story-rail-actions { opacity: 1; }
  .story-rail-nav { opacity: 1; }
  .story-rail-nav a { border-color: transparent; --rule: 0; }
  .story-rail-nav a:last-child { border-bottom-color: transparent; }
  .story-rail-nav a::before { transform: translateY(-50%) scaleX(var(--rule)); transform-origin: right; }
  .story-rail-nav a.is-active::after { opacity: var(--rule); }
  .story-rail-nav a .rail-rule { position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--line); transform-origin: left center; transform: scaleX(var(--rule)); }
  .story-rail-actions a { border-color: transparent; }
  .story-rail-actions a:last-child { border-bottom-color: transparent; }
  .rail-metric-slot { position: absolute; z-index: 2; top: -1px; left: 0; width: 100%; height: 40px; pointer-events: none; }
  .rail-metric-slot .hero-metric { display: grid; grid-template-columns: auto minmax(84px, 1fr); align-items: end; gap: 10px; width: 100%; padding-top: 10px; border-top: 1px solid var(--line); transform-origin: left top; }
  .rail-metric-slot strong { color: var(--signal); font: 400 clamp(24px, 2.35vw, 37px)/.8 var(--display); letter-spacing: -.07em; white-space: nowrap; }
  .rail-metric-slot .hero-metric > span { max-width: 118px; font: 600 8px/1.15 var(--body); letter-spacing: .04em; text-transform: uppercase; }
  .rail-stat-strip { position: absolute; left: 17px; top: 237px; display: flex; align-items: center; gap: 12px; height: 18px; transform-origin: left center; pointer-events: none; }
  .rail-stat-value { position: relative; display: block; height: 16px; }
  .rail-stat-value strong { display: block; color: var(--signal); font: 400 14px/1 var(--display); letter-spacing: -.07em; white-space: nowrap; }
  .rail-stat-strip i { color: var(--muted); font-size: 12px; font-style: normal; }
  .story-rail-nav [data-ui-source] { z-index: 5; }
}
@media (max-width: 640px) {
  .masthead-actions, .hero-kicker, .hero-descriptor, .hero-personality, .hero-actions { font-size: 10px; }
  .hero-descriptor { top: 111px; letter-spacing: .015em; }
  .hero-personality { width: 108px; letter-spacing: 0; }
  .hero-support { top: 610px; bottom: auto; width: calc(100% - 36px); }
  .hero-support > p { font-size: 11px; margin-bottom: 12px; }
  .hero-actions { display: flex; gap: 20px; }
  .hero-metrics { bottom: 25px; grid-template-columns: .95fr 1.3fr .75fr; }
  .hero-metrics strong { font-size: 30px; }
  .hero-metrics span { font-size: 10px; line-height: 1.25; max-width: 110px; letter-spacing: 0; }
  .story-rail-nav, .story-rail-actions, .story-rail-name strong, .story-rail-name > span { font-size: 10px; }
  .story-rail { height: auto; min-height: 106px; }
  .story-rail-nav { flex-wrap: wrap; row-gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .masthead { display: none; }
  .story-rail { pointer-events: auto; }
  .story-rail-spine { opacity: 1; transform: none; }
  .story-rail-identity, .story-rail-nav, .story-rail-actions { opacity: 1; }
  .belief-line div, .bridge-orbit b { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .journey-card { transition: none; }
}
/* Journey belongs to the master rail. These slots never enter the hero Flip. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.journey-submenu { position: absolute; top: 112px; left: clamp(15px, 1.15vw, 18px); right: 0; display: grid; height: 0; overflow: hidden; opacity: 0; transition: height .38s ease, opacity .25s ease; }
.journey-submenu button { position: relative; display: grid; grid-template-columns: 23px 1fr; align-items: center; width: 100%; height: 24px; padding: 0 0 0 8px; border: 0; background: transparent; color: var(--muted); font: 500 10.5px/1.2 var(--body); text-align: left; letter-spacing: 0; cursor: pointer; transition: color .2s ease; }
.journey-submenu button b { font-size: 9px; font-weight: 500; }
.journey-submenu button::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 1px; background: var(--muted); opacity: .3; transition: background .2s ease, opacity .2s ease; }
.journey-submenu button.is-active { color: var(--signal); font-weight: 600; }
.journey-submenu button.is-active::before { background: var(--signal); opacity: 1; }
.journey-submenu button.is-active b { color: inherit; }
.journey-submenu button:focus-visible { outline: 1px solid var(--signal); outline-offset: -1px; }
.journey-open .journey-submenu { height: 168px; opacity: 1; }
.mobile-story-toggle { display: none; }
@media (min-width: 981px) {
  .story-rail-nav > a:nth-child(n+3) { transition: top .38s ease, color .25s ease; }
  .journey-open .story-rail-nav > a:nth-child(n+3) { top: 168px !important; }
  .journey-open .story-rail-nav { height: 448px !important; max-height: calc(100svh - 430px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--sand) transparent; }
}
@media (max-width: 980px) {
  .story-rail { visibility: hidden !important; pointer-events: none !important; }
  .mobile-story-toggle:not([hidden]) { display: block; position: fixed; z-index: 102; top: 16px; right: 18px; padding: 12px 16px; border: 1px solid var(--muted); background: var(--paper); color: var(--ink); font: 700 12px/1 var(--body); }
  .story-rail.mobile-menu-open { visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; inset: 0; width: auto; height: 100dvh; min-height: 0; padding: 62px 24px 24px; background: var(--paper); overflow-y: auto; }
  .mobile-menu-open .story-rail-spine, .mobile-menu-open .story-rail-identity { display: none; }
  .mobile-menu-open .story-rail-nav { position: relative; inset: auto; display: flex; flex-direction: column; margin: 0; padding: 0; height: auto !important; opacity: 1 !important; gap: 0; font-size: 13px; }
  .mobile-menu-open .story-rail-nav > a { display: grid; grid-template-columns: 30px 1fr 16px; min-height: 45px; border-top: 1px solid var(--line); }
  .mobile-menu-open .story-rail-nav > a b { display: block; font-size: 10px; }
  .mobile-menu-open .story-rail-nav > a::before { display: none; }
  .mobile-menu-open [data-rail-section="about"] { order: 0; }
  .mobile-menu-open [data-rail-section="journey"] { order: 1; }
  .mobile-menu-open .journey-submenu { order: 2; position: relative; inset: auto; width: 100%; flex-shrink: 0; }
  .mobile-menu-open [data-rail-section="impact"] { order: 3; }
  .mobile-menu-open [data-rail-section="bridge"] { order: 4; }
  .mobile-menu-open [data-rail-section="focus"] { order: 5; }
  .mobile-menu-open.journey-open .journey-submenu { height: 245px; max-height: max(70px, calc(100dvh - 420px)); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-menu-open .journey-submenu button { height: 35px; padding-left: 30px; font-size: 12px; }
  .mobile-menu-open .journey-submenu button::before { left: 15px; width: 8px; }
  .mobile-menu-open .journey-submenu button b { display: block; font-size: 10px; }
  .mobile-menu-open .story-rail-actions { position: relative; inset: auto; display: grid; gap: 0; margin-top: 24px; padding: 0; opacity: 1 !important; font-size: 12px; }
  .mobile-menu-open .story-rail-actions a { padding: 15px 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .journey-submenu, .story-rail-nav > a { transition: none; }
}
/* Quieter supporting details keep the cinematic headline as the card's focus. */
.journey-card .chapter-copy { max-width: 550px; margin-top: 30px; line-height: 1.6; }
.journey-card .chapter-tags { gap: 8px 12px; }
.journey-card .chapter-tags span { padding: 3px 0; border: 0; border-radius: 0; font-size: 9px; font-weight: 500; letter-spacing: .04em; }
.journey-card .chapter-more { padding: 9px 0; border-radius: 0; background: transparent; color: inherit; font-size: 10px; font-weight: 500; border-bottom: 1px solid currentColor; }
.journey-card .chapter-more b { font-size: 14px; }
@media (max-width: 980px) {
  .journey-card .chapter-tags span, .journey-card .chapter-more { font-size: 11px; }
}