/* Narrative composition: same typography and rules as the editorial chapters. */
.home-editorial .hero {
  isolation: isolate; background: #13161A; padding: 132px 0 48px; min-height: 100svh;
}
.home-editorial .hero-media { z-index: 0; }
.home-editorial .hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(19,22,26,.86), rgba(19,22,26,.38) 58%, rgba(19,22,26,.08)),
              linear-gradient(0deg, rgba(19,22,26,.65), transparent 65%);
}
.home-editorial .hero > .wrap { position: relative; z-index: 1; width: 100%; max-width: 1600px; }
.home-editorial .hero__grid { text-align: left; }
.home-editorial .hero__num { display: none; }
.home-editorial .hero h1 {
  font-size: clamp(58px, 8.7vw, 134px); font-weight: 500; line-height: .92;
  letter-spacing: .5px; max-width: 880px; margin: 38px 0 0; text-wrap: balance;
}
.home-editorial .hero-phrase { display: block; }
.home-editorial .hero-phrase--second { color: var(--sage); }
.home-editorial .hero-word { display: inline-block; }
.home-editorial .hero__sats {
  justify-content: space-between; gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--rule);
}
.home-editorial .hero__sat { font-family: var(--body); font-weight: 400; font-size: 10px; letter-spacing: .1em; color: var(--paper); }
.home-editorial .hero__sub { margin: 26px 0 0; max-width: 420px; font-size: 16px; }
.home-editorial .hero__cta { justify-content: flex-start; margin-top: 24px; }
.home-editorial .hero__offer { text-align: left; font-family: var(--body); max-width: 520px; line-height: 1.65; }
.home-editorial .hero .data-strip { justify-content: flex-start; font-family: var(--body); margin-top: 26px; }
.home-editorial .hero .rv { opacity: 1; transform: none; transition: none; }
.hero-opening { display: none; }
.home-editorial .hero-narrative { height: 100svh; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.hero-narrative .hero-opening {
  display: block; position: fixed; inset: 0; width: 100vw; height: 100dvh;
  z-index: 50; pointer-events: none; overflow: hidden; background: #000;
}
.hero-opening__half { position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); background: #000; overflow: hidden; }
.hero-opening__half--left { left: 0; }
.hero-opening__half--right { right: 0; }
.hero-opening__half img { position: absolute; width: clamp(120px, 18vw, 230px); max-width: none; top: 50%; transform: translate(-50%, -50%); }
.hero-opening__half--left img { left: 100%; }
.hero-opening__half--right img { left: 0; }
body.hero-opening-active :is(.nav,.ticker,.cursor) { visibility: hidden; }
body:not(.hero-opening-active) .hero-narrative .hero-opening { visibility: hidden; }
.home-editorial .hero-narrative h1 { position: relative; min-height: 2.1em; font-size: clamp(46px, min(8.7vw, 11svh), 134px); }
.hero-narrative .hero-phrase { position: absolute; left: 0; top: 0; max-width: 10ch; }
.hero-narrative .hero-phrase--second { max-width: 9ch; }
.hero-narrative .hero-word,
.home-editorial .hero-narrative :is(.hero__sats,.hero__values,.hero__sub,.hero__cta) { opacity: 0; }
.hero-narrative .hero__cta[inert] { pointer-events: none; }

/* Original evidence and preparation now live in their corresponding Chain stops. */
.home-editorial .station--roast, .home-editorial .station--cup { position: relative; isolation: isolate; }
.home-editorial .station--roast { overflow: hidden; padding: clamp(28px, 4vw, 64px); background: #13161A; }
.home-editorial .station--roast > .station__ph {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  z-index: -2; opacity: .46; clip-path: none !important;
}
.home-editorial .station--roast > .station__ph img { width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.home-editorial .station--roast::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(19,22,26,.45), rgba(19,22,26,.85)); pointer-events: none; }
.home-editorial .station--roast > div:nth-child(2) { grid-column: 2/-1; }
.home-editorial .station--roast > div:nth-child(2) p { max-width: 620px; }
.home-editorial #chain :is(#proof,#method) { grid-column: 1/-1; width: 100%; min-width: 0; padding-block: 36px 0; background: transparent; }
.home-editorial #chain :is(#proof,#method) > .wrap { padding: 0; }
.home-editorial #chain :is(#proof,#method) .chapter-num { margin-bottom: 28px; }
.home-editorial #chain :is(#proof,#method) .h2 { font-size: clamp(34px, 4.8vw, 72px); max-width: 950px; }
.home-editorial #chain .proof { margin-top: 40px; gap: 32px; }
.home-editorial #chain .proof .card {
  background: rgba(19,22,26,.84); border: 1px solid var(--rule); padding: clamp(18px, 2.5vw, 34px);
}
@supports (backdrop-filter: blur(6px)) {
  @media (min-width: 801px) {
    .home-editorial #chain .proof .card { background: rgba(19,22,26,.72); backdrop-filter: blur(6px); }
  }
}
.home-editorial #chain .proof h3 { font-size: 12px; }
.home-editorial #chain .proof p { font-size: 14px; max-width: none; }
.home-editorial #chain .proof .curve-svg { width: 100%; }
.home-editorial #chain #method .method { margin-top: 40px; }
@media (max-width: 800px) {
  .home-editorial .hero { padding-top: 122px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .home-editorial .hero h1 { font-size: clamp(46px, 12.3vw, 78px); margin-top: 24px; }
  .home-editorial .hero__sat { font-size: 9px; }
  .home-editorial .hero__sats { gap: 8px; }
  .home-editorial .hero__sub { font-size: 14px; max-width: 30ch; margin-top: 18px; }
  .home-editorial .hero__cta { gap: 8px 18px; margin-top: 18px; }
  .home-editorial .hero .btn { padding: 14px 18px; min-height: 46px; }
  .home-editorial .hero__quiz-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 10px; }
  .home-editorial .hero__offer { font-size: 8px; margin-top: 12px; }
  .home-editorial .hero .data-strip { font-size: 9px; gap: 8px; margin-top: 16px; }
  .home-editorial .hero-media::after { background: linear-gradient(90deg, rgba(19,22,26,.7), rgba(19,22,26,.2)), linear-gradient(0deg, rgba(19,22,26,.85), transparent); }
  .home-editorial .station--roast { padding: 28px 16px; }
  .home-editorial #chain :is(#proof,#method) .h2 { font-size: clamp(30px, 7.8vw, 42px); overflow-wrap: break-word; }
  .home-editorial #chain .proof { gap: 24px; }
}
@media (max-height: 720px) and (min-height: 561px) {
  .home-editorial .hero-narrative h1 { font-size: clamp(40px, 9vw, 78px); margin-top: 16px; min-height: 2.1em; }
  .home-editorial .hero-narrative .hero__sub { margin-top: 12px; font-size: 13px; }
  .home-editorial .hero-narrative .data-strip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-opening { display: none !important; }
  .home-editorial .hero { height: auto; }
  .home-editorial .hero-phrase { position: static; max-width: none; }
  .home-editorial .hero-word { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .home-editorial #chain .proof .card { backdrop-filter: none; }
}

/* Evidence moves from paper to a dark photographic surface. */
.home-editorial #chain .proof { --k60: rgba(253,255,252,.78); --k40: #B0B3B8; --k12: rgba(253,255,252,.24); --k06: rgba(253,255,252,.12); }
.home-editorial #chain .proof h3 { color: var(--sage); }
.home-editorial #chain .proof .fill { transition: none; }
.home-editorial #chain .proof .bar.hi .fill { background: var(--sage); }
.home-editorial #chain .proof .cv-path { stroke: var(--paper); }
.home-editorial #chain .proof .cv-mark { fill: var(--paper); }
.home-editorial #chain .proof .cv-val { fill: var(--paper); }

/* Chain prologue: origin enters as moving image before the evidence system. */
body.home-editorial section.chain-prologue {
  position: relative;
  height: 300svh;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  background: #13161A;
}
/* A short boundary fade follows the page scroll; the video remains fully visible in the middle. */
body.home-editorial section.chain-prologue::before,
body.home-editorial section.chain-prologue::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
}
body.home-editorial section.chain-prologue::before {
  top: 0;
  height: min(18svh, 170px);
  background: linear-gradient(180deg, #13161A, transparent);
}
body.home-editorial section.chain-prologue::after {
  bottom: 0;
  height: min(22svh, 210px);
  background: linear-gradient(180deg, transparent, #13161A);
}
.chain-prologue__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: #080706 url('/assets/video/chain-origin-poster.webp') center / cover no-repeat;
}
.chain-prologue__video,
.chain-prologue__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.chain-prologue__frames { display: none; }
.chain-prologue__video { object-fit: cover; z-index: 0; transform: scale(1.035); opacity: 0; transition: opacity .25s ease; }
.chain-prologue.is-ready .chain-prologue__video { opacity: 1; }
.chain-prologue.has-video-error .chain-prologue__video { display: none; }
.chain-prologue__shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,.18), rgba(10,10,10,.1) 42%, rgba(19,22,26,.88) 100%),
    linear-gradient(90deg, rgba(10,10,10,.62), transparent 58%);
}
.chain-prologue__copy { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(42px, 8vw, 100px); }
.chain-prologue__title {
  max-width: 10ch;
  font: 900 clamp(44px, 8.2vw, 118px)/.9 var(--ui);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.chain-prologue__line { display: block; overflow: hidden; will-change: transform, opacity; }
.chain-prologue__title em { font-family: var(--disp); font-weight: 400; text-transform: none; color: var(--sage); }
.chain-prologue__origin {
  margin-top: 22px;
  font: 700 11px/1.1 var(--ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(253,255,252,.72);
}
.chain-prologue__progress {
  position: absolute;
  z-index: 3;
  right: clamp(18px, 3vw, 48px);
  top: 50%;
  width: 1px;
  height: min(32svh, 280px);
  background: rgba(253,255,252,.22);
}
.chain-prologue__progress i { display: block; width: 100%; height: 100%; background: var(--sage); }
.chain-prologue__progress span {
  position: absolute;
  left: 12px;
  top: 0;
  color: rgba(253,255,252,.62);
  font: 700 9px/1 var(--ui);
  letter-spacing: 1.2px;
  writing-mode: vertical-rl;
}

@media (max-width: 800px) {
  body.home-editorial section.chain-prologue { height: 290svh; }
  .chain-prologue__copy { padding-bottom: 64px; }
  .chain-prologue__progress { right: 12px; height: 24svh; }
  .chain-prologue__progress span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-editorial section.chain-prologue { height: auto; min-height: 72svh; }
  .chain-prologue__sticky { position: relative; min-height: 72svh; }
  .chain-prologue__video, .chain-prologue__progress { display: none; }
  .chain-prologue__frames { background-position: 0% 0% !important; }
  .chain-prologue__line, .chain-prologue__kicker, .chain-prologue__origin { opacity: 1 !important; transform: none !important; }
}

/* Quiet topography: a trace of the Sierra, not a decorative wallpaper. */
.home-editorial .chain-surface,
.home-editorial .brand-object { isolation: isolate; }
.home-editorial .chain-surface::before,
.home-editorial .brand-object::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg width='760' height='520' viewBox='0 0 760 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2396C1AE' stroke-width='.8' opacity='.48'%3E%3Cpath d='M-30 420C100 310 146 370 246 268S445 74 792 184'/%3E%3Cpath d='M-18 444C103 337 170 397 271 291S464 104 790 208'/%3E%3Cpath d='M-8 468C118 362 188 425 294 318S490 139 780 236'/%3E%3Cpath d='M16 490C137 392 211 451 319 347S520 178 770 270'/%3E%3Cpath d='M81 512C180 435 245 475 350 381S548 225 744 311'/%3E%3Cpath d='M330 -16C415 52 448 9 525 92S641 234 792 207'/%3E%3Cpath d='M289 -10C387 83 424 42 500 119S622 264 791 238'/%3E%3C/g%3E%3C/svg%3E");
  background-size: min(760px, 86vw) auto;
  background-position: 105% 8%;
  background-repeat: no-repeat;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
}

/* Floating brand object inspired by a physical medium-roast artifact. */
.home-editorial .brand-object { padding-block: clamp(80px, 12vw, 160px); overflow: clip; }
.brand-object__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
  gap: clamp(36px, 8vw, 110px);
  align-items: center;
}
.brand-object__copy .lead-lg { max-width: 42ch; }
.brand-object__data { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.brand-object__data span {
  border: 1px solid rgba(150,193,174,.4);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--sage);
  font: 700 10px/1 var(--ui);
  letter-spacing: .8px;
}
.brand-object__scene {
  position: relative;
  min-height: clamp(410px, 48vw, 650px);
  perspective: 1100px;
  transform-style: preserve-3d;
}
.brand-object__orbit {
  position: absolute;
  inset: 10% 2%;
  border: 1px solid rgba(150,193,174,.22);
  border-radius: 50%;
  transform: rotate(-14deg) rotateX(66deg);
  box-shadow: 0 0 70px rgba(150,193,174,.08);
}
.brand-object__bean {
  position: absolute;
  width: clamp(150px, 24vw, 300px);
  aspect-ratio: .72;
  left: 9%;
  top: 17%;
  border-radius: 49% 51% 46% 54% / 57% 44% 56% 43%;
  transform: rotate(-22deg) rotateY(18deg);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,187,116,.26), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(10,4,2,.82), transparent 50%),
    linear-gradient(145deg, #8d4e26 0%, #52240f 45%, #2c1008 100%);
  box-shadow: inset 18px 10px 28px rgba(255,184,105,.12), inset -28px -20px 38px rgba(0,0,0,.56), 0 34px 80px rgba(0,0,0,.54);
  animation: bean-float 7s ease-in-out infinite;
}
.brand-object__bean::after {
  content: "";
  position: absolute;
  inset: 8% 43%;
  border-radius: 60% 40% 58% 42%;
  background: linear-gradient(90deg, rgba(18,6,3,.95), rgba(126,67,29,.82) 45%, rgba(25,8,4,.9));
  transform: rotate(8deg);
  box-shadow: 4px 0 8px rgba(255,185,111,.09);
}
.brand-object__bean i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .2;
  background-image: radial-gradient(circle, #f0b27a 0 1px, transparent 1.2px);
  background-size: 8px 8px;
}
.brand-object__plaque {
  position: absolute;
  width: clamp(230px, 31vw, 420px);
  aspect-ratio: 1;
  right: 1%;
  bottom: 3%;
  display: grid;
  place-items: center;
  padding: 12%;
  border: 1px solid rgba(253,255,252,.14);
  background: linear-gradient(145deg, rgba(25,27,30,.96), rgba(7,7,8,.98));
  box-shadow: -24px 34px 70px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.08);
  transform: rotateY(-18deg) rotateX(8deg) rotateZ(7deg);
  transform-style: preserve-3d;
  animation: plaque-float 8s ease-in-out infinite;
}
.brand-object__plaque::before,
.brand-object__plaque::after {
  content: "";
  position: absolute;
  inset: 8px -9px -9px 8px;
  z-index: -1;
  border: 1px solid rgba(150,193,174,.18);
  background: #08090a;
  transform: translateZ(-12px);
}
.brand-object__plaque::after { inset: 16px -17px -17px 16px; opacity: .5; transform: translateZ(-24px); }
.brand-object__plaque img { width: 100%; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); }
@keyframes bean-float { 50% { transform: translate3d(14px,-18px,24px) rotate(-17deg) rotateY(34deg); } }
@keyframes plaque-float { 50% { transform: translate3d(-8px,-16px,34px) rotateY(-9deg) rotateX(4deg) rotateZ(4deg); } }

@media (max-width: 800px) {
  body.home-editorial section.chain-prologue { min-height: 70svh; }
  .chain-prologue__video { display: none; }
  .chain-prologue__frames {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #13161A url('/assets/video/chain-origin-mobile-atlas.webp') 0% 0% / 400% 800% no-repeat;
    transform: scale(1.035);
  }
  .chain-prologue__shade { background: linear-gradient(180deg, rgba(19,22,26,.18), rgba(19,22,26,.1) 48%, rgba(19,22,26,.46) 75%, #13161A 100%); }
  .chain-prologue__title { font-size: clamp(40px, 13vw, 68px); }
  .brand-object__grid { grid-template-columns: 1fr; }
  .brand-object__scene { min-height: min(118vw, 520px); }
  .brand-object__bean { width: 42vw; left: 4%; }
  .brand-object__plaque { width: 62vw; right: 2%; }
  .home-editorial .chain-surface::before,
  .home-editorial .brand-object::before { opacity: .13; background-position: 60% 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .chain-prologue__video { display: none; }
  .brand-object__bean,
  .brand-object__plaque { animation: none; }
}