/* bluzari.win: the Print Run look on the scroll-craft floor. Three inks (blue, ink, paper), Big Shoulders slams, Space Mono text,
   real footage as printed plates with a hard ink shadow, grey ink = plain Axiom, colour = Bluzari. Each chapter paints its own
   ground (chaptered editorial: hard cuts, no drift). The engine files are untouched; this file themes them and styles our markup. */

:root {
  --blue: #4D8EFF; --ink: #05070C; --paper: #F2EFE6; --grey: #A9B1C2;
  --sc-canvas: var(--ink);
  --sc-surface: #0D1119;
  --sc-ink: var(--paper);
  --sc-ink-soft: #B9C0CE;
  --sc-accent: var(--blue);
  --sc-accent-ink: var(--ink);
  --sc-font-display: "Big Shoulders", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Space Mono", ui-monospace, monospace;
  --sc-font-mono: "Space Mono", ui-monospace, monospace;
  --sc-t-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --sc-measure: 54ch;
  --sc-leading-body: 1.65;
  --sc-r-sm: 0;
  --shadow: 8px 8px 0 var(--ink);
  --folio-w: 0px;
}
@media (min-width: 1100px) { :root { --folio-w: 72px; } }

body { padding-left: var(--folio-w); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ grounds -- */
.ch { position: relative; }
.ch--blue  { background: var(--blue);  --sc-ink: var(--ink);   --sc-ink-soft: #0B1A38; --shadow: 8px 8px 0 var(--ink);  color: var(--sc-ink); }
.ch--paper { background: var(--paper); --sc-ink: var(--ink);   --sc-ink-soft: #3A4150; --shadow: 8px 8px 0 var(--ink);  color: var(--sc-ink); }
.ch--ink   { background: var(--ink);   --sc-ink: var(--paper); --sc-ink-soft: #B9C0CE; --shadow: 8px 8px 0 var(--blue); color: var(--sc-ink); }
.ch--blue ::selection, .ch--paper ::selection { background: var(--ink); color: var(--paper); }
.ch--blue :focus-visible { outline-color: var(--ink); }

/* ------------------------------------------------------------- type -- */
.slam {
  font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase;
  line-height: 0.82; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
  font-optical-sizing: auto;
}
.slam--title { font-size: clamp(4.4rem, 15.5vw, 15.5rem); }
.slam--ch { font-size: clamp(3rem, 7vw, 7rem); }
.slam--sub { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 0.88; }
.sc-body { color: var(--sc-ink-soft); }
.ch--blue .sc-body, .ch--paper .sc-body { color: var(--sc-ink); }
.chap, .kicker, .note, figcaption, .act__p, .ticket__k {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
.chap { font-weight: 700; margin: 0; }
.kicker { font-weight: 700; margin: 0 0 var(--sc-5); }
.note { color: var(--sc-ink-soft); margin: 0; line-height: 1.55; max-width: 52ch; }
.num { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-stack > .slam { margin-top: var(--sc-4); }
.sc-stack > .chap + .slam { margin-top: var(--sc-4); }

/* ------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1; padding: 0.55em 0.8em 0.5em;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--paper); }
.ch--paper .btn--ink { box-shadow: 6px 6px 0 var(--blue); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--paper); } .ch--paper .btn:hover { box-shadow: 8px 8px 0 var(--blue); } }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--paper); }
.btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.ch--paper .btn:focus-visible { outline-color: var(--blue); }
.textlink {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.textlink:hover { text-decoration-thickness: 3px; }

/* ---------------------------------------------- folio + the one action -- */
.mark, .folio, .access-link { position: fixed; z-index: var(--sc-z-chrome); }
.mark {
  top: 14px; left: 14px; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--blue); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--ink); border: 2px solid var(--ink);
  font: 900 1.6rem/1 var(--sc-font-display); letter-spacing: -0.03em;
}
.folio {
  display: none; margin: 0; left: 0; top: 50%; width: var(--folio-w); translate: 0 -50%;
  font: 700 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  writing-mode: vertical-rl; rotate: 180deg; align-items: center; justify-content: center; gap: 1.2em;
  color: var(--ink); mix-blend-mode: normal;
}
.folio__n { background: var(--ink); color: var(--paper); padding: 0.7em 0.35em; }
.folio__t { padding: 0.4em 0; }
.folio-ground { position: fixed; z-index: calc(var(--sc-z-chrome) - 1); left: 0; top: 0; bottom: 0; width: var(--folio-w); background: var(--paper); border-right: 2px solid var(--ink); }
@media (min-width: 1100px) { .folio { display: flex; } }
.access-link {
  top: 14px; right: 14px; background: var(--ink); color: var(--paper); text-decoration: none;
  font: 900 1.15rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.02em; padding: 0.7em 0.9em 0.62em;
  box-shadow: 4px 4px 0 var(--blue); transition: transform 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .access-link:hover { transform: translate(-2px, -2px); } }
.access-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------- plates -- */
.plate { margin: 0; position: relative; }
.plate > img, .plate > div > img, .plate > picture img { width: 100%; height: auto; box-shadow: var(--shadow); background: var(--ink); }
.plate > div[data-sc-parallax] { will-change: transform; }
.plate figcaption { margin-top: calc(var(--sc-3) + 8px); color: var(--sc-ink-soft); }
.ch--blue .plate figcaption, .ch--paper .plate figcaption { color: var(--sc-ink); }
.plate--blue > img, .plate--blue > div > img { box-shadow: 8px 8px 0 var(--blue); }

/* --------------------------------------------------------- 0 · title -- */
.title { min-height: 100svh; display: flex; align-items: stretch; }
.title__inner { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(5.5rem, 12vh, 9rem) clamp(3rem, 8vh, 6rem); }
.title .slam--title { margin-left: -0.04em; }
.title__foot { margin-top: clamp(2rem, 6vh, 4.5rem); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sc-6); }
.offer {
  margin: 0; background: var(--ink); color: var(--paper); padding: 0.55em 0.8em 0.5em;
  font: 900 clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem)/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0;
  box-shadow: 6px 6px 0 var(--paper);
}
.offer strong { color: var(--blue); font-weight: 900; }
.title__actions { margin: 0; display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }

/* ---------------------------------------------------- spreads (1, 3, 4) -- */
.spread__grid, .try__grid, .rows__grid, .settings__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
@media (min-width: 900px) {
  .spread__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .try__grid { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); }
  .try__plate { order: -1; }
  .rows__grid { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
  .settings__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.spread__media img { filter: none; }

/* --------------------------------------------------- 2 · the peak (scrub) -- */
.peak__stage { display: grid; align-items: center; background: var(--ink); }
.peak__copy { position: relative; z-index: var(--sc-z-copy); }
.peak__copy .slam { margin-top: var(--sc-4); }
.peak__body { margin-top: var(--sc-5); }
.peak__copy .note { margin-top: var(--sc-5); }
.peak__media { margin: 0; }
.peak__frame { position: relative; aspect-ratio: 1274 / 1080; box-shadow: 8px 8px 0 var(--blue); background: var(--ink); }
.peak__media figcaption { margin-top: calc(var(--sc-3) + 8px); color: var(--sc-ink-soft); }
@media (min-width: 861px) {
  .peak__stage { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); padding-inline: var(--sc-gutter); }
  .peak__frame { height: min(78svh, calc((100vw - var(--folio-w)) * 0.5 * 1080 / 1274)); width: auto; margin-left: auto; }
}
@media (max-width: 860px) {
  .peak__stage { grid-template-rows: auto auto; align-content: center; gap: var(--sc-5); padding: 4.5rem var(--sc-gutter) var(--sc-5); }
  .peak__media { order: -1; }
  .peak__frame { aspect-ratio: 546 / 720; height: min(52svh, 120vw); margin-inline: auto; }
  .peak__copy .slam--ch { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .peak__copy .note { display: none; }
}

/* ------------------------------------------- 3 · try it (signature move) -- */
.try__frame { position: relative; }
.try__base { width: 100%; height: auto; display: block; box-shadow: var(--shadow); background: var(--ink); }
.try__layer {
  position: absolute; top: 0; height: auto; pointer-events: none; opacity: 0;
  transition: opacity 110ms var(--sc-ease-out);
}
/* the layers + live rows sit in .try__frame (the image only), so their % positions never count the caption */
.try__frame > .try__layer--final { left: 0; width: 49.853%; }
.try__frame > .try__layer--migrated { left: 49.853%; width: 50.147%; }
.try__frame[data-on="final"] .try__layer--final, .try__frame[data-on="migrated"] .try__layer--migrated { opacity: 1; }
.try__row {
  position: absolute; z-index: 2; height: 12.41%; width: 26.6%; padding: 0; cursor: pointer;
  background: transparent; border: 2px dashed var(--paper); outline-offset: 2px;
}
.try__row span:not(.sr) {
  position: absolute; left: -2px; bottom: calc(100% + 6px); background: var(--blue); color: var(--ink);
  font: 700 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45em 0.6em; white-space: nowrap;
  transition: opacity 140ms var(--sc-ease-out);
}
.try__row--final { left: 22.3%; top: 19.2%; }
.try__row--migrated { left: 72.09%; top: 6.79%; }
.try__frame[data-on] .try__row span:not(.sr) { opacity: 0; }
.try__row:focus-visible { outline: 3px solid var(--blue); }
.try__plate figcaption { margin-top: calc(var(--sc-3) + 8px); }
.try__state { min-height: 1.6em; }

/* ------------------------------------------------- 4 · rows (the wipe) -- */
.rows__media { width: min(100%, 30rem); justify-self: center; }
.rows__media > img { width: 100%; height: auto; box-shadow: var(--shadow); }
.rows__after { position: absolute; inset: 0 0 auto 0; }
.rows__after img { width: 100%; height: auto; display: block; }
.aside { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sc-5); align-items: center; margin-top: var(--sc-7) !important; }
.aside img { width: 100%; height: auto; box-shadow: 5px 5px 0 var(--ink); }

/* ------------------------------------------------------- 5 · layout -- */
.layout__head { max-width: 52rem; }
.layout__pair { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .layout__pair { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: end; }
  .layout__before { padding-bottom: 12%; }
}
.width { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(4rem, 9vw, 8rem); }
@media (min-width: 900px) { .width { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); } .width__media { order: 2; } }
.width__media { max-width: 36rem; }

/* --------------------------------------------------------- 6 · the Wall -- */
.wall__stage { display: flex; align-items: center; background: var(--ink); }
.wall__rail { gap: clamp(2rem, 4vw, 4rem); padding-inline: var(--sc-gutter); align-items: center; }
.wall__lead { flex: 0 0 min(40rem, 82vw); }
.wall__overview { margin-top: var(--sc-6) !important; }
.act { flex: 0 0 min(26rem, 74vw); margin: 0; }
.act .plate img { box-shadow: 8px 8px 0 var(--blue); }
.act__h { font: 900 clamp(2rem, 3vw, 2.8rem)/0.9 var(--sc-font-display); text-transform: uppercase; margin: var(--sc-6) 0 var(--sc-3); }
.act__p { color: var(--sc-ink-soft); margin: 0; text-transform: none; letter-spacing: 0.01em; font-size: var(--sc-t-sm); line-height: 1.55; }
.wall__note {
  flex: 0 0 auto; margin: 0; padding-right: var(--sc-gutter);
  font: 900 clamp(2.4rem, 5vw, 4.6rem)/0.88 var(--sc-font-display); text-transform: uppercase; max-width: 9ch; color: var(--blue);
}
@media (prefers-reduced-motion: no-preference) {
  .wall .act { opacity: clamp(0.55, calc(var(--sc-p, 0) * 6 - var(--i, 0) * 0.9 + 0.4), 1); }
}

/* ------------------------------------------------------ 7 · settings -- */
.settings__plates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.settings__b { margin-top: 18%; }

/* ---------------------------------------------------------- 8 · price -- */
.price__plates { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .price__plates { grid-template-columns: 1fr 1fr; max-width: 64rem; } }
.ticket { background: var(--ink); color: var(--paper); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 8px 8px 0 var(--blue); }
.ticket--blue { background: var(--blue); color: var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.ticket__k { margin: 0; font-weight: 700; }
.ticket__big { margin: var(--sc-4) 0; font: 900 clamp(3.4rem, 7vw, 6.2rem)/0.82 var(--sc-font-display); text-transform: uppercase; }
.ticket__p { margin: 0; max-width: 40ch; font-size: var(--sc-t-sm); }
.price__go { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5) var(--sc-6); }

/* ------------------------------------------------------------ 9 · FAQ -- */
@media (min-width: 900px) { .faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } }
.faq__list { margin-top: var(--sc-6); }
@media (min-width: 900px) { .faq__list { margin-top: 0; } }
.faq details { border-top: 2px solid color-mix(in oklab, var(--paper) 22%, transparent); }
.faq details:last-child { border-bottom: 2px solid color-mix(in oklab, var(--paper) 22%, transparent); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sc-5) 2.4rem var(--sc-5) 0; position: relative;
  font: 900 clamp(1.4rem, 1.15rem + 0.9vw, 2rem)/1 var(--sc-font-display); text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; translate: 0 -50%; color: var(--blue); font-size: 1.4em; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 60ch; }

/* ------------------------------------------------------- 10 · masthead -- */
.masthead { min-height: 92svh; display: flex; align-items: stretch; }
.masthead__inner { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(5rem, 12vh, 8rem) var(--sc-6); }
.masthead__line { font: 700 clamp(1rem, 0.9rem + 0.5vw, 1.35rem)/1.5 var(--sc-font-mono); max-width: 46ch; margin: clamp(2rem, 4vh, 3rem) 0 var(--sc-6); }
.masthead__line a { font-weight: 700; text-decoration-thickness: 2px; }
.colophon { margin-top: clamp(3rem, 10vh, 6rem); padding-top: var(--sc-5); border-top: 2px solid var(--ink); font: 400 var(--sc-t-xs)/1.7 var(--sc-font-mono); }
.colophon p { margin: 0; }
.colophon a { font-weight: 700; }

/* ------------------------------------------------------------- the film -- */
.film { padding: 0; border: 0; background: var(--ink); width: min(92vw, 1280px); box-shadow: 10px 10px 0 var(--blue); }
.film::backdrop { background: color-mix(in oklab, var(--ink) 86%, transparent); }
.film video { display: block; width: 100%; height: auto; }
.film__close {
  position: absolute; top: -3rem; right: 0; background: var(--paper); color: var(--ink); border: 0; cursor: pointer;
  font: 700 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.8em 1em;
}
.film { overflow: visible; }

/* ------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  .mark { width: 40px; height: 40px; font-size: 1.4rem; }
  .access-link { font-size: 1rem; }
  .title__foot { flex-direction: column; align-items: flex-start; }
  .aside { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .settings__plates { grid-template-columns: 1fr 1fr; }
  .try__row span:not(.sr) { font-size: 0.62rem; }
}