/* Bloq Industries — production styles. Dark-only. Tokens from source/reference/tokens.css. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2');
}

:root {
  --void: #0A0C0F;
  --void-deep: #07090B;
  --panel: #11151A;
  --line: #232A33;
  --line-strong: #3A4552;
  --text: #E7ECF2;
  --text-2: #B5BFCA;
  --text-3: #8F9BA8;
  --ice: #7FD3FF;
  --amber: #FFB547;
  --on-ice: #0A0C0F;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-hero: clamp(46px, 6.2vw, 88px);
  --fs-h2: clamp(38px, 4.5vw, 64px);
  --fs-h2-section: clamp(34px, 3.9vw, 56px);
  --fs-cta: clamp(40px, 5vw, 72px);
  --fs-body-lg: 19px;
  --fs-body: 18px;
  --fs-label: 12px;
  --lh-body: 1.55;
  --tracking-display: -0.025em;
  --tracking-mono: 0.08em;

  --gutter: 48px;
  --cap-inset: 64px;
  --tap: 44px;
  --header-h: 85px;        /* .site-header: 20px + 44px tap target + 20px + 1px border */

  /* Scroll sequence: must match TIMELINE.total × pacePx in js/scroll-sequence.js. */
  --seq-scroll: 4260px;
  --stage-h: max(100vh, 560px);

  color-scheme: dark;
}
@supports (height: 100svh) {
  :root { --stage-h: max(100svh, 560px); }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --cap-inset: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color: var(--text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); background: var(--void); }
a { color: var(--ice); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
img, video, svg { display: block; }

.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.disp { font-family: var(--font-display); }
.eyebrow { margin: 0; font-size: var(--fs-label); line-height: 1.4; color: var(--ice); }

.skip {
  position: absolute; left: var(--gutter); top: 12px; z-index: 10;
  padding: 12px 16px; background: var(--ice); color: var(--on-ice);
  font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-mono);
  text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; }
.skip:hover { color: var(--on-ice); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 18px;
  font-size: var(--fs-label); font-weight: 500; line-height: 1;
  text-decoration: none; border: 1px solid var(--ice);
}
.btn-outline { color: var(--ice); background: transparent; }
.btn-outline:hover { color: var(--on-ice); background: var(--ice); }
.btn-fill { min-height: 48px; padding: 0 24px; color: var(--on-ice); background: var(--ice); }
.btn-fill:hover { color: var(--on-ice); background: var(--text); border-color: var(--text); }

/* ---- header ------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px var(--gutter); border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap);
  font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .14em;
  color: var(--text); text-decoration: none;
}
.wordmark svg { stroke: var(--ice); }

/* ---- hero scroll sequence ----------------------------------------------- */
.seq { position: relative; background: var(--void-deep); }
.seq-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; background: var(--void-deep); }
.seq-clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--void-deep); opacity: 0;
  will-change: transform, opacity;
}
.seq-clip:first-of-type { opacity: 1; }
.seq-scrim {
  position: absolute; left: 0; bottom: 0; width: 70%; height: 60%; pointer-events: none;
  background: radial-gradient(ellipse at 0% 100%, rgba(7, 9, 11, .85) 0%, rgba(7, 9, 11, 0) 70%);
}
.seq-meta {
  position: absolute; left: var(--cap-inset); right: var(--cap-inset); top: 40px;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; color: var(--text-2);
}
.seq-rail {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
.seq-rail > span { --fill: 0; position: relative; width: 2px; height: 48px; background: var(--line); }
.seq-rail > span::after {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: calc(var(--fill) * 100%); background: var(--ice);
}
.seq-cap { position: absolute; left: var(--cap-inset); right: var(--cap-inset); bottom: 96px; max-width: 640px; }
/* The hero caption is on screen at load, while the header still pushes the stage down. */
.seq-cap[data-first] { bottom: calc(96px + var(--header-h)); }
.seq-cap [data-seq-line] { will-change: transform, opacity; }
.seq-cap:not([data-first]) [data-seq-line] { opacity: 0; }

.hero {
  margin: 22px 0 0; font-size: var(--fs-hero); line-height: .94; font-weight: 600;
  letter-spacing: var(--tracking-display); text-wrap: balance;
}
.hero-lede { margin: 22px 0 0; max-width: 540px; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-2); }
.cap-h { margin: 12px 0; font-size: var(--fs-h2); line-height: 1; font-weight: 600; text-wrap: balance; }
.cap-body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }

/* With JS (class set in <head>), the section is sized up front so init causes no layout shift. */
.js .seq { height: calc(var(--stage-h) + var(--seq-scroll)); }

/* No JS: a static poster with every chapter's text readable below it. */
html:not(.js) .seq { height: auto; }
html:not(.js) .seq-stage { position: relative; height: auto; overflow: visible; }
html:not(.js) .seq-clip:not(:first-of-type),
html:not(.js) .seq-rail,
html:not(.js) .seq-meta,
html:not(.js) .seq-scrim { display: none; }
html:not(.js) .seq-clip:first-of-type { position: relative; height: 70vh; }
html:not(.js) .seq-cap { position: static; margin: 48px var(--gutter); }
html:not(.js) .seq-cap [data-seq-line] { opacity: 1; }

@media (max-width: 760px) {
  .seq-rail, .hide-sm { display: none; }
  .seq-cap { bottom: 72px; }
  .seq-cap[data-first] { bottom: calc(72px + var(--header-h)); }
}

/* ---- the base layer ----------------------------------------------------- */
.stack { padding: 128px var(--gutter); }
.section-h {
  margin: 16px 0 48px; max-width: 820px;
  font-size: var(--fs-h2-section); line-height: 1; font-weight: 600; text-wrap: balance;
}
.layers { display: flex; flex-direction: column; gap: 8px; max-width: 1100px; margin: 0; padding: 0; list-style: none; }
.layer {
  --accent: var(--text-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 20px 24px; background: var(--panel); border: 1px solid var(--line);
}
.layer-ice { --accent: var(--ice); border-color: var(--ice); }
.layer-amber { --accent: var(--amber); border-color: var(--amber); }
.layer-id { width: 48px; font-size: 11px; color: var(--accent); }
.layer-name { flex: 1 1 220px; font-size: 21px; font-weight: 500; line-height: 1.25; }
.layer-owner { font-size: 11px; color: var(--accent); }

/* ---- closing CTA -------------------------------------------------------- */
.cta { padding: 140px var(--gutter); border-top: 1px solid var(--line); text-align: center; }
.cta-h {
  margin: 0 auto 20px; max-width: 900px;
  font-size: var(--fs-cta); line-height: .95; font-weight: 600; text-wrap: balance;
}
.cta-body { margin: 0 auto 36px; max-width: 560px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }

/* ---- footer ------------------------------------------------------------- */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding: 28px var(--gutter); border-top: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; color: var(--text-3);
}
.site-footer p { margin: 0; }

/* ---- 404 ---------------------------------------------------------------- */
.notfound { min-height: 60vh; padding: 128px var(--gutter); }