/* AVA INC case study, chaptered editorial. Tokens first, then the chapters.
   scrollcraft.css owns the devices; style.css owns the nav and footer. This
   file owns the page. */

.cs-ed {
  --sc-canvas: #08070a;
  --sc-surface: #131119;
  --sc-ink: #f5f2ec;
  --sc-ink-soft: #b3aca3;
  --sc-accent: #ff5a1f;
  --sc-accent-ink: #08070a;
  --sc-good: #3fcf86;
  --sc-font-display: 'Satoshi', 'Outfit', system-ui, sans-serif;
  --sc-font-text: 'Satoshi', 'Inter', system-ui, sans-serif;
  --sc-font-mono: 'Satoshi', ui-monospace, monospace;
  --sc-shadow-color: 260 14% 3%;
  --ed-paper: #f5f3ef;
  --ed-paper-ink: #14110d;
  --ed-paper-soft: #4a453d;
  --ed-paper-accent: #c53c05;
  --ed-measure: 58ch;
  --ed-gutter: clamp(1.25rem, 5vw, 6rem);
  --ed-strip-w: 15rem;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  letter-spacing: var(--sc-track-normal);
  font-weight: 500;
  /* style.css sets perspective on body, which makes body the containing
     block for every fixed descendant. The strip would pin to the document
     bottom instead of the viewport. */
  perspective: none;
}
.cs-ed .sc-display { font-weight: 900; }
.cs-ed .sc-label { font-family: var(--sc-font-text); font-weight: 700; letter-spacing: 0.12em; }

/* The site nav scrolls away with the title page. The folio is the chrome. */
.cs-ed__nav.premium-nav { position: static !important; }
.cs-ed .logo-link:focus-visible, .cs-ed .nav-cta:focus-visible { outline: 2px solid var(--sc-accent) !important; outline-offset: 3px !important; }
/* a focused element inside a not-yet-revealed stagger group is shown at once */
.cs-ed [data-sc-stagger] > :focus-within, .cs-ed [data-sc-in]:focus-within { opacity: 1 !important; transform: none !important; }

/* ── the health strip ─────────────────────────────────────────────── */
.strip {
  position: fixed; left: var(--ed-gutter); bottom: clamp(1.25rem, 3vh, 2.25rem);
  z-index: var(--sc-z-chrome);
  width: var(--ed-strip-w);
  display: grid; gap: 0.6rem;
  padding: 0.75rem 0.75rem 0.75rem;
  border-radius: var(--sc-r-lg);
  /* a backing plate in the chapter's own ground, so the folio reads over a
     sticky caption instead of colliding with it */
  background: color-mix(in oklab, var(--sc-canvas) 84%, transparent);
  backdrop-filter: blur(14px);
  cursor: pointer;
  pointer-events: auto;
}
.strip:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.is-paper .strip { background: color-mix(in oklab, var(--ed-paper) 86%, transparent); }
.is-close .strip { background: rgba(255,90,31,0.86); }
.strip__folio { display: grid; gap: 0.15rem; }
.strip__num {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.strip__title { font-size: var(--sc-t-sm); font-weight: 700; color: var(--sc-ink); line-height: 1.3; text-wrap: balance; }
.strip__status {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.65rem;
  padding: 0.55rem 0.8rem 0.55rem 0.7rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
  background: color-mix(in oklab, var(--sc-surface) 86%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.strip__status::before {
  content: ""; grid-row: 1 / 3; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 22%, transparent);
  transition: background var(--sc-d-slow) var(--sc-ease-out), box-shadow var(--sc-d-slow) var(--sc-ease-out);
}
.strip__k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sc-ink-soft); }
.strip__v { font-size: var(--sc-t-sm); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sc-accent); transition: color var(--sc-d-slow) var(--sc-ease-out); }
.strip__status[data-state="review"]::before { background: var(--sc-ink-soft); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-ink-soft) 22%, transparent); }
.strip__status[data-state="review"] .strip__v { color: var(--sc-ink); }
.strip__status[data-state="verified"]::before { background: var(--sc-good); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-good) 24%, transparent); }
.strip__status[data-state="verified"] .strip__v { color: var(--sc-good); }
@keyframes strip-flip { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.strip__status.is-flip { animation: strip-flip 520ms var(--sc-ease-out); }
/* on the paper chapter and the orange close plate the strip re-inks */
.is-paper .strip__num, .is-paper .strip__k { color: var(--ed-paper-soft); }
.is-paper .strip__title { color: var(--ed-paper-ink); }
.is-paper .strip__status { background: color-mix(in oklab, #fff 88%, transparent); border-color: rgba(20,16,12,0.14); }
.is-paper .strip__v { color: var(--ed-paper-accent); }
.is-close .strip__num, .is-close .strip__k { color: rgba(8,7,10,0.62); }
.is-close .strip__title { color: var(--sc-accent-ink); }
.is-close .strip__status { background: rgba(8,7,10,0.92); border-color: rgba(8,7,10,0.5); }
.is-close .strip__k { color: var(--sc-ink-soft); }

/* ── chapters ─────────────────────────────────────────────────────── */
.ch { position: relative; background: var(--sc-canvas); color: var(--sc-ink); }
.ch__wrap { max-width: 88rem; margin-inline: auto; padding-inline: var(--ed-gutter); }
.ch__folio {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-accent); margin: 0 0 var(--sc-4);
}
.ch__folio--ink { color: var(--sc-accent-ink); opacity: 0.7; }
.ch h2.sc-display { margin: 0; }
.ch h2.sc-display + .ch__p { margin-top: var(--sc-6); }
.ch__p { max-width: var(--ed-measure); font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.ch__p--first { color: var(--sc-ink); }
.ch__p--you { color: var(--sc-ink); font-weight: 700; }
.ch__p--small { font-size: var(--sc-t-base); }
.sc-stack > .ch__p + .ch__p { margin-top: var(--sc-5); }
.ch__link {
  display: inline-block; margin-top: var(--sc-5);
  font-weight: 700; color: var(--sc-accent);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.ch__link:hover { color: var(--sc-ink); }

/* title page: type on the ground, sized so chapter one's plate edge shows
   at the fold. Media is chapter one's, not the title's. */
.ch--title { min-height: 86svh; display: grid; align-items: end; padding-block: var(--sc-8) var(--sc-7); }
.ch__wrap--title { width: 100%; }
.ch__kicker { margin: 0 0 var(--sc-5); color: var(--sc-accent); }
.ch__h1 { max-width: 15ch; margin: 0; }
.ch__lede { margin-top: var(--sc-6); color: var(--sc-ink-soft); max-width: 40ch; }
.ch__titlemeta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: var(--sc-7) 0 0;
  font-size: var(--sc-t-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.ch__titlemeta span { position: relative; }
.ch__titlemeta span + span::before { content: ""; position: absolute; left: -1.05rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--sc-accent); transform: translateY(-50%); }

/* a full-column photographic plate with its caption in the margin */
.ch__plate { margin: 0; position: relative; }
.ch__plate img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ch__plate figcaption {
  max-width: 44ch; padding: var(--sc-4) var(--ed-gutter) 0;
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft);
}
.ch__plate--inset { margin-top: var(--sc-7); }
.ch__plate--inset img { border-radius: var(--sc-r-md); }
.ch__plate--inset figcaption { padding-inline: 0; }

/* the spread: lead column and text column */
.ch__spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 7rem); padding-block: var(--sc-7) var(--sc-8); }
.ch__col--lead { position: sticky; top: var(--sc-7); align-self: start; }
.ch__col--text { padding-top: 0.5rem; }

/* chapter one */
.ch--one { background: #0d0c11; }
.ch--one .ch__spread { padding-top: var(--sc-7); padding-bottom: var(--sc-7); }

/* chapter two, on paper: the ink tokens are restated AND color is, because
   color inherits as a computed value. */
.ch--two {
  --sc-ink: var(--ed-paper-ink); --sc-ink-soft: var(--ed-paper-soft); --sc-accent: var(--ed-paper-accent);
  background: var(--ed-paper); color: var(--sc-ink);
}
.ch__spread--portrait { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; padding-block: var(--sc-9); }
.ch__col--media { position: sticky; top: var(--sc-7); }
.ch__portrait { margin: 0; }
.ch__portrait-img { overflow: hidden; border-radius: var(--sc-r-lg); box-shadow: 0 30px 70px -30px rgba(20,16,12,0.45); }
.ch__portrait-img img { width: 100%; height: auto; display: block; }
.ch__portrait figcaption { margin-top: var(--sc-4); font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); max-width: 36ch; }
.ch__proof {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: var(--sc-6);
  padding: 0.7rem 1rem 0.7rem 0.8rem; border: 1px solid rgba(20,16,12,0.14); border-radius: var(--sc-r-pill);
  background: #fff; color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.ch__proof b { font-weight: 900; margin-left: 0.5rem; }
.ch__proof-go { color: var(--sc-accent); font-weight: 900; }
.ch__proof:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(20,16,12,0.5); }
.ch__proof:active { transform: translateY(1px); }

/* chapter three: the method */
.ch--three { background: var(--sc-canvas); }
.ch__spread--method { align-items: start; }
.ch__method { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ch__method li { position: relative; padding: var(--sc-6) 0 var(--sc-6) 4.25rem; border-top: 1px solid var(--sc-hairline); }
.ch__method li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ch__step { position: absolute; left: 0; top: var(--sc-6); font-size: var(--sc-t-lg); font-weight: 900; color: var(--sc-accent); letter-spacing: -0.02em; }
.ch__method h3 { margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 900; letter-spacing: var(--sc-track-snug); line-height: 1.1; color: var(--sc-ink); }
.ch__method p { margin: 0; max-width: 52ch; font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); }

/* the silence */
.ch--silence { min-height: 78svh; display: grid; place-items: center; background: var(--sc-canvas); }
.ch__silence { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); color: var(--sc-ink-soft); }

/* chapter four: the peak */
.ch--four { background: #0d0c11; }
.ch__plate--peak img { aspect-ratio: 16 / 9; }
.ch__spread--peak { padding-block: var(--sc-9) var(--sc-11); }
.ch__big { margin: 0 0 var(--sc-5); display: flex; align-items: baseline; gap: 0.35em; font-family: var(--sc-font-display); font-weight: 900; letter-spacing: -0.04em; line-height: 0.9; color: var(--sc-good); }
.ch__big .sc-nums { font-size: clamp(5rem, 14vw, 11rem); font-variant-numeric: tabular-nums; }
.ch__big-unit { font-size: var(--sc-t-xl); color: var(--sc-ink); letter-spacing: var(--sc-track-snug); }

/* chapter five: the rail */
.ch--five { background: var(--sc-surface); }
.rail-stage { display: flex; align-items: center; }
.rail { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--ed-gutter); padding-block: var(--sc-7); }
.rail__lead { flex: 0 0 auto; width: clamp(18rem, 32vw, 30rem); align-self: center; padding-right: clamp(1rem, 3vw, 3rem); }
.rail__lead .ch__p { margin-top: var(--sc-5); font-size: var(--sc-t-base); }
.rail__item {
  flex: 0 0 auto; width: clamp(16rem, 24vw, 21rem);
  display: flex; flex-direction: column; gap: var(--sc-3);
  padding: var(--sc-6) var(--sc-5);
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-canvas) 60%, transparent);
  color: var(--sc-ink); text-decoration: none;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.rail__item:hover { border-color: var(--sc-accent); transform: translateY(-2px); }
.rail__item:focus-visible { opacity: 1 !important; border-color: var(--sc-accent); }
.rail__item:active { transform: translateY(1px); }
.rail__k { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); }
.rail__item h3 { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 900; letter-spacing: var(--sc-track-snug); line-height: 1.08; text-wrap: balance; }
.rail__item p { margin: 0.35rem 0 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); }
.rail__note { flex: 0 0 auto; width: clamp(20rem, 34vw, 32rem); align-self: center; padding-left: clamp(1rem, 3vw, 3rem); }
.rail__results { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-4); }
.rail__results li { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); padding-left: 1.1rem; position: relative; }
.rail__results li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-good); }
.rail__results b { color: var(--sc-ink); font-weight: 900; }
/* items settle in as the rail is pulled, exempting the lead, floored at .55 */
@media (prefers-reduced-motion: no-preference) {
  .rail__item { opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 1) * 9 - var(--i, 0)), 1)); }
  .rail__item:nth-child(2) { --i: 0; } .rail__item:nth-child(3) { --i: 0.7; } .rail__item:nth-child(4) { --i: 1.4; }
  .rail__item:nth-child(5) { --i: 2.1; } .rail__item:nth-child(6) { --i: 2.8; } .rail__item:nth-child(7) { --i: 3.5; }
  .rail__item:nth-child(8) { --i: 4.2; } .rail__item:nth-child(9) { --i: 4.9; }
}
@media (prefers-reduced-motion: reduce) {
  .rail { scroll-snap-type: x proximity; }
  .rail__lead, .rail__item, .rail__note { scroll-snap-align: start; }
}

/* colophon: the orange plate. Ink is restated with the tokens. */
.ch--close {
  --sc-ink: #08070a; --sc-ink-soft: rgba(8,7,10,0.8); --sc-accent: #08070a;
  background: #ff5a1f; color: var(--sc-ink);
}
.ch__close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 7rem); padding-block: var(--sc-9); }
.ch__close .ch__p { color: var(--sc-ink); }
.ch__close .ch__p--small { color: var(--sc-ink-soft); margin-top: var(--sc-5); }
.ch__close h2 { margin-bottom: var(--sc-5); }
.ch__cta {
  color: var(--sc-ink); font-weight: 900;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.22em;
  white-space: nowrap; transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
.ch__cta:hover { text-decoration-color: rgba(8,7,10,0.4); }
.ch__close a { color: var(--sc-ink); }
.ch__side-k { margin: 0 0 var(--sc-3); font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ch__reviews, .ch__reading { list-style: none; margin: 0 0 var(--sc-6); padding: 0; display: grid; gap: 0.45rem; }
.ch__reviews li { font-size: var(--sc-t-sm); font-weight: 700; color: var(--sc-ink); line-height: 1.45; }
.ch__reviews li span { font-weight: 500; color: var(--sc-ink-soft); }
.ch__reviews li span::before { content: " "; }
.ch__reading li { font-size: var(--sc-t-sm); line-height: 1.45; }
.ch__reading a { text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.cs-ed__footer { position: relative; z-index: 2; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ch__spread, .ch__spread--portrait, .ch__close { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .ch__col--lead, .ch__col--media { position: static; }
  .ch__portrait { max-width: 30rem; }
}
@media (max-width: 860px) {
  .cs-ed { --ed-strip-w: auto; }
  .strip {
    left: 0; right: 0; bottom: 0;
    width: auto; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
    padding: 0.6rem var(--ed-gutter) max(0.6rem, env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
    backdrop-filter: blur(12px); border-top: 1px solid var(--sc-hairline);
  }
  .is-paper .strip { background: color-mix(in oklab, var(--ed-paper) 94%, transparent); border-top-color: rgba(20,16,12,0.1); }
  .is-close .strip { background: rgba(255,90,31,0.94); }
  .strip { border-radius: 0; padding: 0.6rem var(--ed-gutter) max(0.6rem, env(safe-area-inset-bottom)); }
  .strip__status { padding: 0.4rem 0.7rem 0.4rem 0.6rem; box-shadow: none; }
  .strip__k { display: none; }
  .strip__status::before { grid-row: 1; }
  .ch--title { min-height: 82svh; }
  .ch__h1 { font-size: var(--sc-t-2xl); max-width: none; }
  .ch__plate figcaption { padding-inline: var(--ed-gutter); }
  .ch__method li { padding-left: 3.25rem; }
  .rail { padding-block: var(--sc-6); }
  .rail__lead { width: 78vw; }
  .rail__item { width: 74vw; }
  .rail__note { width: 82vw; }
  .ch--silence { min-height: 60svh; }
  .ch__spread--peak { padding-block: var(--sc-8) var(--sc-9); }
  main { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .strip__status.is-flip { animation: none; }
}