/* Editorial landing (home page only): bold serif headlines, cream cards, a full-screen WebGL canvas behind.
   Loaded after site.css. All styles are external (strict CSP). */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --cream: #f9f8f6;
  --charcoal: #1a1a1a;
  --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

body.editorial { background: var(--ink); }
.editorial .rule-strip, .editorial .site-footer { position: relative; z-index: 2; } /* stay above the fixed canvas (the cookie notice already has z-index 80) */
.editorial main { position: relative; }
.editorial main > section { position: relative; z-index: 1; }

/* The background canvas. Shown only once the script has started it. */
#stage-canvas {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; display: none; pointer-events: none; background: var(--ink);
}
html.has-stage #stage-canvas { display: block; }
/* No script, or no canvas: stage sections still get a navy backdrop. */
html:not(.has-stage) .stage, html:not(.has-stage) .pin { background: linear-gradient(180deg, #030a22 0%, #082d56 100%); }

/* Type */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 1.3em; font-family: var(--font-mono); font-size: .72rem; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); }
.kicker-sep { display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.editorial h1, .editorial .stage h2, .editorial .demo h2, .card-h { font-family: var(--font-serif); }
.editorial em { font-style: italic; font-weight: 500; }

/* Hero */
.stage { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-block: clamp(36px, 7vw, 88px); }
.stage-inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; position: relative; }
.stage-hero { min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); }
.stage-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,10,34,.9) 0%, rgba(3,10,34,.62) 42%, rgba(3,10,34,0) 78%), linear-gradient(0deg, rgba(3,10,34,.7) 0%, rgba(3,10,34,0) 38%); }
.stage-hero h1 { font-weight: 600; font-size: clamp(3.1rem, 9.4vw, 8.2rem); line-height: .94; letter-spacing: -.035em; color: #fff; max-width: 12ch; margin: 0 0 .28em; }
.stage-hero h1 em { color: var(--phone); font-weight: 500; }
.stage-hero .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #dbe4f7; max-width: 58ch; margin: 0 0 1.6em; }
.stage-hero .lede strong { color: #fff; font-weight: 600; }
.stage-hero .hero-actions { margin-bottom: clamp(24px, 4vw, 44px); }
.scroll-cue { margin: 0; color: #c6d9f3; }
.cue-line { display: inline-block; width: 56px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleX(.3); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }

/* Cream editorial cards */
.card { background: rgba(249,248,246,.94); color: var(--charcoal); border: 1px solid rgba(26,26,26,.16); border-radius: 6px; padding: clamp(22px, 3.2vw, 40px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.card .kicker { color: #4a4a4a; }
.card h2, .card .card-h { font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.025em; color: var(--charcoal); margin: 0 0 .45em; }
.card em { color: #0050c9; }
.card p { color: #2f2f2f; max-width: 46ch; font-size: 1.04rem; }
.card p:last-child { margin-bottom: 0; }
.card .btn-dark { background: var(--charcoal); }
.card .btn-dark:hover { background: #000; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 1.4em; }
.ticks { list-style: none; margin: 1.1em 0 0; padding: 0; border-top: 1px solid rgba(26,26,26,.18); }
.ticks li { padding: .62em 0 .62em 1.6em; border-bottom: 1px solid rgba(26,26,26,.12); position: relative; font-size: .98rem; }
.ticks li::before { content: ""; position: absolute; left: .2em; top: 1.05em; width: .7em; height: .38em; border-left: 2px solid #0050c9; border-bottom: 2px solid #0050c9; transform: rotate(-45deg); }

/* Feature (right) and closing (centre) */
.stage-feature .stage-inner { display: flex; justify-content: flex-end; }
.card-right { width: min(540px, 100%); }
.stage-close { align-items: center; text-align: center; }
.stage-close .stage-inner { display: flex; justify-content: center; }
.card-center { width: min(780px, 100%); }
.card-center p { margin-inline: auto; max-width: 54ch; }
.card-actions-center { justify-content: center; }
.stage-close .card h2 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); }

/* Pinned sequence */
.pin { padding: 0; }
.steps { list-style: none; margin: 0 auto; padding: 0; width: min(100% - 2 * var(--gutter), var(--wrap)); }
.step { padding-block: clamp(36px, 8vw, 80px); min-height: 70vh; display: flex; align-items: flex-end; }
.step .card { width: min(520px, 100%); }
.pin-dots { display: none; }
html.js-pin .pin { height: 400vh; height: 400svh; } /* four steps, one screen of scroll each */
html.js-pin .pin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.js-pin .steps { position: relative; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; height: 100%; }
html.js-pin .step { position: absolute; inset: auto 0 0 0; min-height: 0; padding: 0 0 clamp(52px, 9vh, 96px); opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
html.js-pin .step.is-active { opacity: 1; transform: none; pointer-events: auto; }
html.js-pin .pin-dots { display: flex; flex-direction: column; gap: 10px; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
.pin-dots i { display: block; width: 3px; height: 26px; border-radius: 2px; background: rgba(255,255,255,.28); transition: height .3s ease, background-color .3s ease; }
.pin-dots i.is-on { height: 46px; background: var(--phone); }

/* HUD: scene counter, bottom right */
.hud { position: fixed; right: var(--gutter); top: 84px; z-index: 5; display: none; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #cfe0ff; text-shadow: 0 1px 8px #030a22; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
html.has-stage .hud { display: flex; }
.hud.is-on { opacity: 1; }
.hud-n { color: var(--phone); font-weight: 500; }

/* Demo section: solid navy, covers the canvas */
.demo { padding-block: clamp(64px, 9vw, 128px); }
.demo .kicker { color: var(--blue-light); }
.demo .section-head h2 { font-weight: 600; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.03em; color: #fff; }
.demo .section-head h2 em { color: var(--phone); }
.demo .section-head p { color: #c6d9f3; }

@media (max-width: 760px) {
  .stage-hero { min-height: calc(100svh - 96px); }
  .stage-feature .stage-inner { justify-content: stretch; }
  .card-right, .step .card { width: 100%; }
  html.js-pin .step { padding-bottom: clamp(48px, 8vh, 72px); }
  .hud { display: none !important; }
  .pin-dots { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cue-line { animation: none; }
  html.js-pin .step { transition: none; transform: none; }
}