/* ==========================================================================
   FE ONYX — Design System
   Dark luxury × future technology × quiet power × intelligent minimalism
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout
   5.  Motion / reveal
   6.  Header & navigation
   7.  Buttons & links
   8.  Hero
   9.  Editorial & statement blocks
   10. Name / brand story
   11. Ventures
   12. Principles
   13. Manifesto
   14. Next generation
   15. The Forge
   16. Contact & forms
   17. Footer
   18. Utilities
   19. Responsive
   20. Reduced motion / print
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* Core surface */
  --onyx-void:    #060607;
  --onyx:         #0B0B0D;   /* Onyx Black */
  --onyx-raised:  #131316;
  --charcoal:     #1B1B1E;   /* Charcoal */
  --charcoal-2:   #2A2A2E;   /* Stone */
  --hairline:     rgba(245, 245, 245, 0.09);
  --hairline-2:   rgba(245, 245, 245, 0.17);

  /* Ink */
  --bone:         #F5F5F5;   /* Off White */
  --bone-2:       #C5C1B9;
  --iron:         #8B8378;   /* Taupe Metal */
  --iron-dim:     #63605A;

  /* Metal + heat — used sparingly */
  --ember:        #CFA46A;   /* Bronze — structural accent */
  --ember-hot:    #FF8A3D;   /* Ember — heat moments only */
  --amber:        #FFB77A;
  --bronze:       #8A6B3C;

  /* Effects */
  --glow-ember:   rgba(255, 138, 61, 0.16);
  --glow-soft:    rgba(255, 138, 61, 0.07);

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-brand:   "Bebas Neue", "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Scale */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.81rem, 0.78rem + 0.14vw, 0.90rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.50rem + 1.45vw, 2.90rem);
  --step-4:  clamp(2.25rem, 1.70rem + 2.65vw, 4.30rem);
  --step-5:  clamp(2.85rem, 1.85rem + 4.80vw, 6.60rem);
  --step-6:  clamp(3.15rem, 1.60rem + 7.70vw, 9.20rem);

  /* Space */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(5.5rem, 11vw, 11rem);
  --maxw:    1320px;
  --measure: 62ch;

  /* Motion */
  --ease:      cubic-bezier(0.16, 1, 0.30, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.7s;
  --dur-fast:  0.35s;

  --radius: 2px;
  --header-h: 76px;
}

/* 2. RESET & BASE ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--onyx);
  color: var(--bone-2);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

/* Fine grain — gives the black a stone-like density rather than flat ink */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--ember); color: #FFF; }

:focus-visible {
  outline: 1px solid var(--ember-hot);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--bone);
  color: var(--onyx);
  padding: 0.75rem 1.25rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Custom scrollbar (desktop) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--onyx-void); }
  ::-webkit-scrollbar-thumb { background: #26262c; }
  ::-webkit-scrollbar-thumb:hover { background: #34343d; }
}

/* 3. TYPOGRAPHY ============================================================ */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--bone);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.015em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

strong { color: var(--bone); font-weight: 500; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--bone-2);
  font-weight: 300;
  letter-spacing: -0.005em;
}

.display {
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 0.90;
  letter-spacing: -0.034em;
}

.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: var(--bone);
  max-width: 20ch;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--iron);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--ember), rgba(207, 164, 106, 0));
  flex: none;
}

.index-num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  color: var(--iron-dim);
}

.hot { color: var(--ember-hot); }
.bone { color: var(--bone); }

/* 4. LAYOUT ================================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--void { background: var(--onyx-void); }
.section--raised { background: var(--onyx-raised); }

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.grid-sticky { position: sticky; top: calc(var(--header-h) + 40px); }

/* Hairline column texture used behind several sections */
.ruled {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 25% 100%;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}

/* 5. MOTION / REVEAL ======================================================= */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur) var(--ease) var(--delay, 0s),
    transform var(--dur) var(--ease) var(--delay, 0s),
    clip-path var(--dur) var(--ease) var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal="mask"] {
  transform: none;
  clip-path: inset(0 0 100% 0);
  opacity: 1;
}
[data-reveal="mask"].is-in { clip-path: inset(0 0 -5% 0); }

[data-reveal="words"] { opacity: 1; transform: none; }

[data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
  transition: transform 1.1s var(--ease) var(--delay, 0s);
}
[data-reveal="line"].is-in { transform: scaleX(1); }

/* Word-by-word display headline */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-word > span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--ease) var(--delay, 0s);
}
.is-in .split-word > span { transform: none; }

/* Page transition veil */
.veil {
  position: fixed;
  inset: 0;
  background: var(--onyx-void);
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s var(--ease-io);
}
.veil.is-out { opacity: 1; }

/* 6. HEADER & NAVIGATION =================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.45s var(--ease), backdrop-filter 0.45s var(--ease), border-color 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--hairline);
}
.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-family: var(--font-display);
  color: var(--bone);
  line-height: 1;
  white-space: nowrap;
}
.wordmark__fe {
  font-weight: 700;
  letter-spacing: 0.015em;
  font-size: 1.14rem;
}
.wordmark__sep {
  width: 1px;
  height: 1.05em;
  background: rgba(207, 164, 106, 0.55);
  display: inline-block;
  transition: background 0.5s var(--ease);
}
.wordmark__onyx {
  font-weight: 400;
  letter-spacing: 0.30em;
  font-size: 1.05rem;
  color: var(--ember);
  padding-right: 0.1em;
  transition: color 0.5s var(--ease);
}
.wordmark:hover .wordmark__sep { background: var(--ember-hot); }
.wordmark:hover .wordmark__onyx { color: var(--amber); }

/* Framed Fe lockup — footer */
.footer__lockup {
  width: clamp(104px, 11vw, 132px);
  height: auto;
  opacity: 0.94;
  transition: opacity 0.5s var(--ease);
}
.footer__lockup:hover { opacity: 1; }

/* Desktop nav */
.nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.6rem); }
.nav__link {
  font-size: var(--step--1);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--iron);
  font-weight: 400;
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover { color: var(--bone); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--bone); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--hairline-2); }

.nav__cta { margin-left: 0.4rem; }

/* Mobile toggle */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1px;
  background: var(--bone);
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 7900;
  background: var(--onyx-void);
  padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -1.5%, 0);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0.5s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__nav { display: flex; flex-direction: column; gap: 0.2rem; }
.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.034em;
  color: var(--bone);
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link .index-num { font-size: 0.62rem; }
.drawer__foot {
  color: var(--iron-dim);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 7. BUTTONS & LINKS ======================================================= */

.btn {
  --btn-fg: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btn-fg);
  padding: 1.02rem 1.85rem;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  background: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, rgba(207, 164, 106, 0.22), rgba(255, 138, 61, 0.10) 45%, transparent 78%);
  opacity: 0;
  transform: translate3d(-18%, 0, 0);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.btn:hover { border-color: rgba(255, 138, 61, 0.55); }
.btn:hover::before { opacity: 1; transform: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--bone);
  color: var(--onyx);
  border-color: var(--bone);
  font-weight: 600;
}
.btn--primary::before {
  background: linear-gradient(120deg, var(--amber), var(--ember-hot) 60%, var(--ember));
}
.btn--primary:hover { color: #120A05; border-color: var(--amber); }

.btn--sm { padding: 0.72rem 1.25rem; font-size: var(--step--2); }

.btn__arrow { width: 16px; height: 8px; flex: none; transition: transform 0.5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Quiet text link */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--hairline-2);
  transition: border-color 0.45s var(--ease), color 0.35s var(--ease), gap 0.45s var(--ease);
}
.tlink:hover { border-color: var(--ember-hot); gap: 0.95rem; }
.tlink svg { width: 15px; height: 8px; }

/* 8. HERO ================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  background: var(--onyx-void);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.hero__canvas.is-lit { opacity: 1; }

/* Slow light travelling across black stone */
.hero__stone {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 74% 26%, rgba(255, 138, 61, 0.085), transparent 62%),
    radial-gradient(46% 38% at 22% 78%, rgba(138, 107, 60, 0.10), transparent 66%),
    radial-gradient(90% 70% at 50% 50%, rgba(255, 255, 255, 0.026), transparent 70%);
  filter: blur(6px);
  animation: drift 44s var(--ease-io) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -2.5%, 0) scale(1.08); }
}

/* Cursor-responsive light */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 40%), rgba(255, 183, 122, 0.075), transparent 70%);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hero:hover .hero__light { opacity: 1; }

.hero__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 6, 0.92) 72%, var(--onyx) 100%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__mark {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  line-height: 1;
}
.hero__fe {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--bone);
}
.hero__hair {
  flex: none;
  width: clamp(24px, 4vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, var(--ember), rgba(139, 131, 120, 0.35));
  transform: translateY(-0.32em);
}
.hero__onyx {
  font-size: var(--step-3);
  font-weight: 400;
  letter-spacing: 0.34em;
  color: var(--ember);
}

.hero__headline {
  font-size: var(--step-6);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.034em;
  color: var(--bone);
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
  max-width: 14ch;
}

.hero__sub {
  font-size: var(--step-1);
  color: var(--bone-2);
  max-width: 46ch;
  font-weight: 300;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron-dim);
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 7vw, 6rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--iron-dim);
  writing-mode: vertical-rl;
}
.scroll-cue__line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--hairline-2), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, var(--ember-hot), transparent);
  animation: cue 3.4s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}

/* 9. EDITORIAL & STATEMENT ================================================= */

.intro__statement {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: var(--bone);
  max-width: 17ch;
  margin: 0;
}

.intro__body { max-width: 46ch; }
.intro__body p + p { margin-top: 1.4em; }

.quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.034em;
  color: var(--bone);
  max-width: 24ch;
}

/* 10. NAME / BRAND STORY =================================================== */

.name {
  background: var(--onyx-void);
  position: relative;
  overflow: hidden;
}

.name__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.name__panel {
  position: relative;
  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 2.6vw, 2.6rem) clamp(3rem, 5vw, 4.5rem);
  border-left: 1px solid var(--hairline);
  overflow: hidden;
  transition: background 0.7s var(--ease);
  cursor: default;
}
.name__panel:first-child { border-left: 0; }
.name__panel::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ember), rgba(255, 183, 122, 0.15));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.name__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 100%, rgba(207, 164, 106, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.name__panel:hover::before, .name__panel:focus-within::before { transform: scaleX(1); }
.name__panel:hover::after, .name__panel:focus-within::after { opacity: 1; }
.name__panel:hover { background: rgba(255, 255, 255, 0.012); }

.name__symbol {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.034em;
  line-height: 1;
  color: var(--bone);
  margin-bottom: 1.6rem;
  display: block;
}
.name__panel:nth-child(2) .name__symbol { letter-spacing: 0.08em; font-weight: 400; }
.name__panel:nth-child(3) .name__symbol { font-size: var(--step-3); letter-spacing: 0.02em; }
.name__panel:nth-child(3) .name__symbol em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--bone-2);
}

.name__key {
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ember-hot);
  display: block;
  margin-bottom: 0.85rem;
}
.name__copy { color: var(--bone-2); max-width: 30ch; margin: 0; }

.name__close {
  padding-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: 0.25rem;
}
.name__close span {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.08;
  color: var(--iron);
}
.name__close span + span { color: var(--bone); }

/* 11. VENTURES ============================================================= */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1140px) {
  .cat-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Clash Display runs wide — step down the label in the 5-up layout */
  .cat-grid--5 .cat__title { font-size: var(--step-1); }
}
@media (max-width: 520px)  { .cat-grid { grid-template-columns: 1fr; } }

.cat {
  position: relative;
  display: block;
  padding: clamp(2rem, 3vw, 2.9rem) clamp(1.4rem, 2vw, 2rem) clamp(2.6rem, 4vw, 3.6rem);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  overflow: hidden;
  transition: background 0.6s var(--ease);
  min-height: clamp(220px, 22vw, 300px);
  display: flex;
  flex-direction: column;
}
.cat:hover { background: rgba(255, 255, 255, 0.015); }
.cat::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--ember-hot), rgba(207, 164, 106, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease);
}
.cat:hover::after { transform: scaleX(1); }

.cat__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--iron-dim);
  margin-bottom: auto;
}
.cat__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  overflow-wrap: break-word;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--bone);
  margin: 2.4rem 0 0.8rem;
  transition: transform 0.6s var(--ease);
}
.cat:hover .cat__title { transform: translateX(5px); }
.cat__copy { font-size: var(--step--1); color: var(--iron); max-width: 30ch; margin: 0; line-height: 1.6; }

/* Venture cards */
.v-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.v-card {
  position: relative;
  background: var(--onyx);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(1.75rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 300px;
  overflow: hidden;
  transition: background 0.55s var(--ease), transform 0.55s var(--ease);
}
.v-card:hover { background: var(--onyx-raised); }
.v-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 320px at var(--mx, 50%) var(--my, 50%), rgba(255, 138, 61, 0.075), transparent 68%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.v-card:hover::after { opacity: 1; }

.v-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.v-card__glyph {
  width: 42px; height: 42px;
  border: 1px solid var(--hairline-2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bone-2);
  flex: none;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.v-card:hover .v-card__glyph { border-color: rgba(255, 138, 61, 0.5); color: var(--bone); }

.v-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--bone);
  margin: auto 0 0;
  line-height: 1.05;
}
.v-card__tag { color: var(--iron); font-size: var(--step--1); margin: 0; max-width: 34ch; line-height: 1.6; }
.v-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iron-dim);
}
.v-card__arrow { width: 18px; height: 9px; color: var(--iron); transition: transform 0.5s var(--ease), color 0.5s var(--ease); }
.v-card:hover .v-card__arrow { transform: translateX(5px); color: var(--ember-hot); }
.v-card__link { position: absolute; inset: 0; z-index: 2; }
.v-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--iron);
  border: 1px solid var(--hairline-2);
  padding: 0.36rem 0.7rem;
  border-radius: 100px;
  white-space: nowrap;
}
.pill__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--iron); flex: none; }
.pill--live { color: var(--amber); border-color: rgba(255, 183, 122, 0.34); }
.pill--live .pill__dot {
  background: var(--ember-hot);
  box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.55);
  animation: pulse 3.2s var(--ease-io) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 138, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); }
}
.pill--building .pill__dot { background: var(--bone-2); }
.pill--building { color: var(--bone-2); }
.pill--incubating .pill__dot { background: var(--iron); }
.pill--experimental { color: var(--iron-dim); border-style: dashed; }
.pill--spun-out { color: var(--bone-2); }

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter {
  font-family: var(--font-body);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--iron);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 0.62rem 1.15rem;
  cursor: pointer;
  transition: color 0.35s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.filter:hover { color: var(--bone); border-color: var(--hairline-2); }
.filter[aria-pressed="true"] {
  color: var(--onyx);
  background: var(--bone);
  border-color: var(--bone);
}
.filter__count { opacity: 0.55; margin-left: 0.45rem; font-family: var(--font-mono); }

.v-empty {
  padding: clamp(3rem, 8vw, 6rem) 0;
  color: var(--iron);
  text-align: center;
  border: 1px dashed var(--hairline-2);
}

/* Venture detail */
.v-hero { padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem)); }
.v-hero__name {
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 0.94;
  margin: 0 0 1.4rem;
}
.v-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.v-fact {
  padding: 1.6rem 1.4rem 1.8rem 0;
  border-left: 1px solid var(--hairline);
  padding-left: 1.4rem;
}
.v-fact:first-child { border-left: 0; padding-left: 0; }
.v-fact dt {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron-dim);
  margin-bottom: 0.7rem;
}
.v-fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.v-body p { max-width: 60ch; }
.v-body p + p { margin-top: 1.3em; }

.h-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.h-list li { background: var(--onyx); padding: 1.15rem 0 1.15rem 1.6rem; position: relative; color: var(--bone-2); }
.h-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.72rem;
  width: 7px; height: 1px;
  background: var(--ember-hot);
}

/* 12. PRINCIPLES =========================================================== */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  border-top: 1px solid var(--hairline);
}
.principle {
  padding: clamp(2rem, 3vw, 2.8rem) clamp(1.4rem, 2vw, 2rem) clamp(2.4rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  position: relative;
}
.principle__num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--iron-dim);
  display: block;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.principle__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--bone);
  margin: 0 0 0.75rem;
  line-height: 1.1;
}
.principle__copy { font-size: var(--step--1); color: var(--iron); margin: 0; max-width: 26ch; }
.principle::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, var(--ember), transparent 70%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s var(--ease);
}
.principle:hover::after { transform: scaleY(1); }

/* 13. MANIFESTO ============================================================ */

.manifesto {
  background: var(--onyx-void);
  position: relative;
  overflow: hidden;
}
.manifesto__inner { position: relative; z-index: 1; }
.manifesto__lines {
  display: grid;
  gap: 0.15em;
  margin: 0;
}
.manifesto__lines p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.034em;
  color: var(--iron);
  margin: 0;
  max-width: 20ch;
  transition: color 0.6s var(--ease);
}
.manifesto__lines p.is-key { color: var(--bone); }
.manifesto__lines p.is-hot { color: var(--ember-hot); }
.manifesto__lines .gap { height: 0.7em; }

.manifesto::before {
  content: "";
  position: absolute;
  right: -12%;
  top: 12%;
  width: min(58vw, 620px);
  height: min(58vw, 620px);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 138, 61, 0.14), rgba(138, 107, 60, 0.05) 42%, transparent 66%);
  filter: blur(28px);
  pointer-events: none;
}

/* 14. NEXT GENERATION ====================================================== */

.next {
  position: relative;
  overflow: hidden;
  background: var(--onyx-void);
  min-height: clamp(520px, 78vh, 820px);
  display: flex;
  align-items: center;
}
.next__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s var(--ease);
}
.next__canvas.is-lit { opacity: 1; }
.next__inner { position: relative; z-index: 1; width: 100%; }
.next__headline {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.034em;
  color: var(--bone);
  max-width: 15ch;
  margin: 0 0 1.6rem;
}
.next__copy { color: var(--bone-2); max-width: 40ch; }

/* 15. THE FORGE ============================================================ */

.forge-list {
  border-top: 1px solid var(--hairline);
}
.forge-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.15fr) minmax(0, 1.5fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.6rem, 2.6vw, 2.3rem) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: background 0.5s var(--ease);
}
.forge-item::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  background: rgba(255, 255, 255, 0.014);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.forge-item:hover::before { opacity: 1; }
.forge-item__num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--iron-dim); }
.forge-item__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--bone);
  margin: 0;
  position: relative;
  z-index: 1;
}
.forge-item__copy { color: var(--iron); font-size: var(--step--1); margin: 0; position: relative; z-index: 1; }
.forge-item__status { justify-self: end; position: relative; z-index: 1; }

/* 16. CONTACT & FORMS ====================================================== */

.form { display: grid; gap: 1.6rem; max-width: 620px; }
.field { display: grid; gap: 0.6rem; }
.field label {
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iron);
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--bone);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-2);
  border-radius: 0;
  padding: 0.85rem 0;
  width: 100%;
  transition: border-color 0.45s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8378' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}
.field select option { background: var(--charcoal); color: var(--bone); }
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--ember-hot); }
.field input::placeholder, .field textarea::placeholder { color: var(--iron-dim); }

.field--hp { position: absolute; left: -9999px; }

.form__note { font-size: var(--step--2); color: var(--iron-dim); max-width: 46ch; line-height: 1.7; }

.form__status {
  font-size: var(--step--1);
  color: var(--amber);
  border-left: 1px solid var(--ember);
  padding-left: 1rem;
  display: none;
}
.form__status.is-shown { display: block; }

.contact-routes { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); max-width: 860px; }
.contact-route {
  background: var(--onyx);
  padding: 1.25rem 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--bone-2);
  font-size: var(--step--1);
}
.contact-route span:first-child { color: var(--bone); letter-spacing: 0.02em; }
.contact-route span:last-child { color: var(--iron-dim); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; text-align: right; }

/* 17. FOOTER =============================================================== */

.footer {
  background: var(--onyx-void);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer__mark { display: grid; gap: 1.4rem; justify-items: start; }
.footer__tag {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--bone);
  margin: 0;
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.6rem 3rem; align-content: start; }
.footer__col { display: grid; gap: 0.85rem; align-content: start; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron-dim);
  margin: 0 0 0.4rem;
  font-weight: 500;
}
.footer__link {
  font-size: var(--step--1);
  color: var(--bone-2);
  transition: color 0.35s var(--ease);
  width: fit-content;
}
.footer__link:hover { color: var(--ember-hot); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.8rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iron-dim);
}

/* 18. UTILITIES ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.stack > * + * { margin-top: var(--stack, 1.5rem); }
.mt-l { margin-top: clamp(2rem, 4vw, 3.5rem); }
.mt-xl { margin-top: clamp(3rem, 6vw, 5rem); }
.max-45 { max-width: 45ch; }
.max-32 { max-width: 32ch; }
.text-iron { color: var(--iron); }

/* 19. RESPONSIVE =========================================================== */

@media (max-width: 1024px) {
  .name__grid { grid-template-columns: 1fr; }
  .name__panel { border-left: 0; border-top: 1px solid var(--hairline); }
  .name__panel:first-child { border-top: 0; }
  .forge-item { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .forge-item__copy { grid-column: 2 / -1; }
}

@media (max-width: 880px) {
  :root { --header-h: 66px; }
  .nav { display: none; }
  .burger { display: block; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-sticky { position: static; }
  .footer__top { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .hero { align-items: center; }
  .v-facts { grid-template-columns: repeat(2, 1fr); }
  .v-fact { border-left: 0; padding-left: 0; padding-right: 1rem; }
}

@media (max-width: 620px) {
  .hero__headline { max-width: 11ch; }
  .hero__meta { flex-direction: column; gap: 0.4rem; }
  .btn-row .btn { width: 100%; }
  .cat { min-height: 0; }
  .forge-item { grid-template-columns: 1fr auto; gap: 0.55rem 1rem; }
  .forge-item__num { grid-row: 1; }
  .forge-item__name { grid-column: 1 / -1; }
  .forge-item__copy { grid-column: 1 / -1; }
  .forge-item__status { grid-row: 1; justify-self: end; }
  .v-facts { grid-template-columns: 1fr; }
  .v-fact { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; }
  .v-fact:first-child { border-top: 0; }
  .contact-route { flex-direction: column; gap: 0.3rem; }
  .contact-route span:last-child { text-align: left; }
  .footer__nav { gap: 2rem; }
}

/* 20. REDUCED MOTION / PRINT =============================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .split-word > span { transform: none !important; }
  .hero__canvas, .next__canvas { opacity: 1; }
}

@media print {
  body { background: #fff; color: #000; }
  .header, .drawer, .hero__canvas, .next__canvas, .scroll-cue, .veil { display: none !important; }
  * { color: #000 !important; }
}

/* 20b. THE BRAND LINE =====================================================
   "Forging what comes next." — and only that sentence — is set in Bebas
   Neue. Condensed, industrial, foundry signage. It is the one place the
   brand raises its voice. Used anywhere else it stops meaning anything,
   so it is used nowhere else.

   TO CHANGE THE TREATMENT: this block is the only place to edit.
   ========================================================================== */

.brandline {
  font-family: var(--font-brand);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.008em;
  line-height: 0.88;
  word-spacing: 0.04em;
  text-wrap: balance;
}

.hero__headline.brandline {
  font-size: clamp(3.55rem, 1.35rem + 9.60vw, 10.60rem);
  font-weight: 400;
  letter-spacing: 0.006em;
  line-height: 0.86;
  max-width: 13ch;
}

.footer__tag.brandline {
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  letter-spacing: 0.014em;
  line-height: 0.94;
}

.drawer__foot.brandline {
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  line-height: 0.95;
  color: var(--bone-2);
}

/* 21. THE SCANNER =========================================================
   A single point of light travelling behind a slit — eased at the turns,
   with persistence trailing behind it. Cylon Centurion / Larson scanner
   mechanics, rendered in ember rather than red so it stays on brand.
   Sound is off until the visitor asks for it. Never autoplays.
   ========================================================================== */

.scanner-block { display: grid; gap: 1.1rem; }

.scanner {
  position: relative;
  width: 100%;
  height: clamp(34px, 4.6vw, 58px);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.9)),
    var(--onyx-void);
  border-top: 1px solid rgba(245, 245, 245, 0.10);
  border-bottom: 1px solid rgba(245, 245, 245, 0.06);
  overflow: hidden;
  isolation: isolate;
}

/* Machined slot: a hairline groove the light sits inside */
.scanner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(245,245,245,0.055) 0,
      rgba(245,245,245,0) 14%,
      rgba(0,0,0,0) 86%,
      rgba(0,0,0,0.45) 100%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 3px,
      rgba(0,0,0,0.22) 3px 4px);
}

.scanner__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.scanner__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron-dim);
}

.scanner__label { display: inline-flex; align-items: center; gap: 0.7rem; }
.scanner__label b {
  font-weight: 400;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

.scanner__audio {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iron);
  transition: color 0.35s var(--ease), border-color 0.4s var(--ease);
}
.scanner__audio:hover { color: var(--bone); border-color: var(--hairline-2); }
.scanner__audio[aria-pressed="true"] { color: var(--ember-hot); border-color: rgba(255, 138, 61, 0.45); }

.scanner__wave { width: 16px; height: 10px; flex: none; }
.scanner__wave rect { fill: currentColor; opacity: 0.45; }
.scanner__audio[aria-pressed="true"] .scanner__wave rect { opacity: 1; }
.scanner__audio[aria-pressed="true"] .scanner__wave rect:nth-child(2) { animation: lvl 0.62s var(--ease-io) infinite alternate; }
.scanner__audio[aria-pressed="true"] .scanner__wave rect:nth-child(3) { animation: lvl 0.44s var(--ease-io) 0.1s infinite alternate; }
@keyframes lvl { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
.scanner__wave rect { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .scanner__audio[aria-pressed="true"] .scanner__wave rect { animation: none; }
}

/* 22. PUBLISHING ==========================================================
   Booky McBookface catalogue. One row per title: cover left, everything
   else right. Stacks on mobile. Works with or without a cover image.
   ========================================================================== */

.book-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.book {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.book:first-child { border-top: 0; padding-top: 0; }

.book__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--charcoal);
  border: 1px solid var(--hairline-2);
  overflow: hidden;
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(245,245,245,0.07), transparent 42%);
}

/* No cover yet — a typographic stand-in rather than a broken image */
.book__placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 138, 61, 0.10), transparent 70%),
    var(--onyx-raised);
}
.book__placeholder span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.book__placeholder b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bone);
}

.book__body { display: grid; gap: 1rem; }
.book__top { display: flex; align-items: center; gap: 1rem; }

.book__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--bone);
  margin: 0;
}
.book__subtitle {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--bone-2);
  margin: -0.3rem 0 0;
}
.book__blurb { color: var(--bone-2); margin: 0; max-width: 56ch; }

.book__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
  margin: 0.4rem 0 0;
}
.book__facts > div { background: var(--onyx); padding: 0.95rem 1rem 1.05rem 0; }
.book__facts dt {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron-dim);
  margin-bottom: 0.5rem;
}
.book__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--bone);
}

.book__buy { margin-top: 0.6rem; }
.book__buy code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--ember);
}

@media (max-width: 720px) {
  .book { grid-template-columns: 1fr; }
  .book__cover { max-width: 220px; }
}

/* 23. TOOLKIT CARD ========================================================
   Link from the FE ONYX publishing page out to the book's companion page.
   The toolkit itself keeps its own warm cream identity — it is aimed at
   readers in difficulty, not at investors. This card is the doorway.
   ========================================================================== */

.toolkit-card {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 138, 61, 0.09), transparent 62%),
    var(--onyx-raised);
  border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--ember);
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.toolkit-card:hover { border-left-color: var(--ember-hot); background: var(--charcoal); }

.toolkit-card__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.toolkit-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.toolkit-card__copy { color: var(--bone-2); max-width: 52ch; font-size: var(--step--1); }
.toolkit-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bone);
}
.toolkit-card:hover .toolkit-card__go { color: var(--ember-hot); }

/* ==========================================================================
   24. HUB UPGRADE — anchor offsets, tile alignment, hero index panel
   ========================================================================== */

/* 24a. Sticky-header clearance. Without this, any in-page anchor lands with
   its heading tucked under the fixed header. */
:target,
section[id],
h2[id], h3[id],
[data-anchor] { scroll-margin-top: clamp(84px, 11vh, 132px); }

/* 24b. Category tiles — force a common baseline.
   Titles previously floated to wherever the description height left them,
   so a two-line description shunted its title down and the row read crooked. */
.cat {
  display: grid;
  grid-template-rows: auto auto auto 1fr;   /* slack goes to the BOTTOM */
  align-content: start;
  row-gap: 0;
}
.cat__title {
  margin: 2.2rem 0 0.7rem;
  min-height: 2.08em;        /* one- and two-line titles reserve the same box */
  display: flex;
  align-items: flex-start;
}
.cat__copy { align-self: start; margin-bottom: 0; }

/* 24c. THE HERO INDEX — the live portfolio panel.
   Fills the dead right-hand third of the hero and makes the hub legible in
   the first two seconds: what exists, and what state it is in. */
@media (min-width: 1080px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 388px);
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
  }
  .hero__content { min-width: 0; }
}

.hero-index {
  display: none;
  border-top: 1px solid var(--hairline);
  align-self: center;
}
@media (min-width: 1080px) { .hero-index { display: block; } }

.hero-index__label {
  font-family: var(--font-display);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--iron);
  padding: 1.05rem 0 1.15rem;
}

.hero-index__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.92rem 0.15rem;
  border-top: 1px solid var(--hairline);
  color: var(--bone-2);
  text-decoration: none;
  transition: color 0.45s var(--ease), padding-left 0.45s var(--ease),
              background 0.45s var(--ease);
}
.hero-index__row:hover,
.hero-index__row:focus-visible {
  color: var(--bone);
  padding-left: 0.75rem;
  background: linear-gradient(90deg, rgba(207,164,106,0.09), transparent 70%);
}

.hero-index__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-index__sector {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iron-dim);
  margin-top: 0.25rem;
}

.hero-index__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--iron);
  white-space: nowrap;
}
.hero-index__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--iron-dim); flex: none;
}
.hero-index__row[data-state="live"] .hero-index__dot {
  background: var(--ember-hot);
  box-shadow: 0 0 0 3px rgba(255,138,61,0.16);
}
.hero-index__row[data-state="live"] .hero-index__state { color: var(--amber); }
.hero-index__row[data-state="building"] .hero-index__dot { background: var(--ember); }

.hero-index__foot {
  border-top: 1px solid var(--hairline);
  padding-top: 1.05rem;
  margin-top: 0.2rem;
}
.hero-index__foot a {
  font-family: var(--font-display);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ember);
  text-decoration: none;
}
.hero-index__foot a:hover { color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .hero-index__row { transition: none; }
  .hero-index__row:hover { padding-left: 0.15rem; }
}

/* ==========================================================================
   25. THE SLOW BURN — hero cinematics
   Everything here is deliberately unhurried. Nothing snaps, nothing bounces,
   nothing finishes before the eye has arrived. If it feels a touch too slow
   in isolation, it is correct in context.
   ========================================================================== */

/* 25a. The opening bloom. The page arrives out of black rather than
   appearing in it. One long fade over the whole hero, once. */
@keyframes forge-bloom {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero { animation: forge-bloom 1.9s var(--ease-io) both; }

/* The ambient field takes even longer to come up than the content, so the
   light reads as something warming rather than something switching on. */
.hero__canvas { transition: opacity 4.2s var(--ease-io); }

/* 25b. Heat radiating off the brand line.
   NOTE: background-clip:text cannot be used here — data-split wraps each word
   in its own span, and a child span has no background to clip against, so the
   headline vanishes. Glow instead: text-shadow inherits into the split words
   correctly and reads as heat coming off the metal rather than a gimmick. */
@keyframes forge-glow {
  0%, 100% {
    text-shadow: 0 0 26px rgba(255,138,61,0.10);
  }
  50% {
    text-shadow:
      0 0 34px rgba(255,152,72,0.30),
      0 0 96px rgba(255,116,34,0.15);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__headline.brandline {
    animation: forge-glow 9.5s var(--ease-io) 2.2s infinite;
  }
}

/* 25c. The recede. Base state only — the transform is driven from JS. */
.hero__inner {
  will-change: transform, opacity;
  transform-origin: 50% 30%;
}

/* 25d. Slow the hero's own entrance well past the site default, and let the
   portfolio index arrive last, row by row. */
.hero [data-reveal] { transition-duration: 1.65s; }
.hero__sub[data-reveal] { transition-duration: 2.1s; }

.hero-index__row {
  opacity: 0;
  transform: translateY(14px);
  animation: index-in 1.5s var(--ease-io) forwards;
}
.hero-index__row:nth-child(2) { animation-delay: 1.45s; }
.hero-index__row:nth-child(3) { animation-delay: 1.62s; }
.hero-index__row:nth-child(4) { animation-delay: 1.79s; }
.hero-index__row:nth-child(5) { animation-delay: 1.96s; }
.hero-index__row:nth-child(6) { animation-delay: 2.13s; }
.hero-index__label,
.hero-index__foot { animation: index-in 1.6s var(--ease-io) 1.28s both; }
.hero-index__foot { animation-delay: 2.34s; }

@keyframes index-in {
  to { opacity: 1; transform: translateY(0); }
}

/* 25e. A single hairline of light drawn slowly across the fold — the seam
   where the hero meets the page, lit like cooling metal. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(207,164,106,0.00) 12%,
    rgba(255,138,61,0.55) 50%,
    rgba(207,164,106,0.00) 88%,
    transparent 100%);
  background-size: 220% 100%;
  animation: seam 17s var(--ease-io) 1.4s infinite;
  pointer-events: none;
}
@keyframes seam {
  0%,  6%   { background-position: -110% 0; opacity: 0.35; }
  50%       { opacity: 0.9; }
  60%, 100% { background-position: 210% 0;  opacity: 0.35; }
}

/* 25f. Everything above is motion. All of it stops on request. */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero::after,
  .hero-index__row,
  .hero-index__label,
  .hero-index__foot { animation: none !important; }
  .hero-index__row,
  .hero-index__label,
  .hero-index__foot { opacity: 1; transform: none; }
  .hero__inner { transform: none !important; opacity: 1 !important; }
  .hero__headline.brandline {
    color: var(--bone);
    -webkit-text-fill-color: var(--bone);
    background-image: none;
  }
}

/* ==========================================================================
   26. THE HARD EDGE — display type + dimensional surfaces
   Archivo was doing the display work and reading soft next to the hero.
   Bebas takes every large heading now; Archivo keeps the small mechanical
   jobs (nav, buttons, eyebrows, labels, readouts) where its clarity wins.
   Body copy stays Manrope. Three faces, three jobs — the jobs just moved.
   ========================================================================== */

h1, h2,
.display,
.statement,
.principle__title,
.cat__title,
.manifesto__lines p,
.v-card__name,
.next__title {
  font-family: var(--font-brand);
  font-weight: 400;              /* Bebas ships one weight — never fake-bold it */
  letter-spacing: 0.008em;       /* condensed caps need air, not tightening */
  line-height: 0.94;
  text-transform: uppercase;
}

/* Bebas sits optically smaller than Archivo at the same value. Compensate,
   then let the condensed width buy back the line length. */
h1 { font-size: clamp(3.1rem, 2.0rem + 5.2vw, 7.2rem); letter-spacing: 0.004em; }
h2, .statement { font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.9rem); }
.statement { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0.008em;
             line-height: 0.94; text-transform: uppercase; }
.principle__title,
.cat__title { font-size: var(--step-2); letter-spacing: 0.016em; line-height: 1.02; }

/* The hero keeps its own sizing — do not let the above touch it. */
.hero__headline.brandline { font-size: var(--step-6); letter-spacing: 0.005em; }

/* 26a. THE MANIFESTO, REBUILT
   Was a narrow stack of soft sentences beside half a screen of nothing.
   Now: full-measure condensed caps on a perspective stage, each line lying
   back and rotating flat as it passes the centre of the viewport — plates
   coming off a press. Depth is driven from JS; this is the resting state. */
.manifesto__lines {
  perspective: 1400px;
  perspective-origin: 30% 50%;
  gap: 0.06em;
}
.manifesto__lines p {
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: 0.006em;
  max-width: 26ch;
  color: var(--iron-dim);
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
  will-change: transform, opacity, color;
  transition: color 1.1s var(--ease);
}
.manifesto__lines p.is-key { color: var(--bone-2); }
.manifesto__lines p.is-lit { color: var(--bone); }
.manifesto__lines p.is-hot.is-lit,
.manifesto__lines p.is-hot { color: var(--ember-hot); }
.manifesto__lines .gap { height: 0.44em; }

/* Give the manifesto the room the type now needs. */
.manifesto .grid-2 { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .manifesto .grid-2 { grid-template-columns: 1fr; }
  .manifesto__lines { perspective: 900px; perspective-origin: 50% 50%; }
  .manifesto__lines p { max-width: none; }
}

/* 26b. DIMENSIONAL SURFACES
   Cards sit on a perspective stage and tip toward the cursor. Small angles
   only — 6 degrees reads as a physical plate, 15 reads as a novelty. */
.principles, .cat-grid { perspective: 1600px; }

.principle, .cat {
  transform-style: preserve-3d;
  transition: transform 0.75s var(--ease), background 0.6s var(--ease),
              box-shadow 0.75s var(--ease);
  will-change: transform;
}
.principle::after, .cat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  background:
    radial-gradient(420px 420px at var(--px, 50%) var(--py, 50%),
      rgba(255,138,61,0.10), transparent 62%);
}
.principle.is-tilt::after, .cat.is-tilt::after { opacity: 1; }
.principle.is-tilt, .cat.is-tilt {
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(207,164,106,0.18) inset;
}
.principle { position: relative; overflow: hidden; }

/* 26c. Motion off means flat and legible. Type change stays — it is the brand,
   not an effect — but nothing tilts, lifts or rotates. */
@media (prefers-reduced-motion: reduce) {
  .manifesto__lines p { transform: none !important; opacity: 1 !important; color: var(--bone-2); }
  .manifesto__lines p.is-hot { color: var(--ember-hot); }
  .principle, .cat { transform: none !important; }
  .principle::after, .cat::after { display: none; }
}

/* 26d. Venture cards — same baseline discipline as the category tiles.
   The footer was already pinned; the name floated on the tagline's height,
   so a three-line tagline lifted its heading out of the row. */
.v-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
}
.v-card__name { min-height: 1.05em; align-self: start; }
.v-card__tag  { align-self: start; }

/* ==========================================================================
   27. THE FORGING — the name section as three plates under heat
   This is the brand story: two elements, pressure, a third thing. It was
   three flat columns of text. Now the panels sit on a stage, lean apart,
   and swing square to the viewer as the section is read — iron and stone
   converging into the name. The third panel runs hot; it is the outcome.
   ========================================================================== */
.name__grid {
  perspective: 1900px;
  perspective-origin: 50% 42%;
}
.name__panel {
  transform-style: preserve-3d;
  will-change: transform, opacity;
  position: relative;
  transition: background 0.8s var(--ease), box-shadow 0.9s var(--ease);
}

/* The symbol is the hero of each plate — set it in the brand face, big. */
.name__symbol {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 2.2rem + 5.2vw, 7rem);
  display: block;
}
.name__symbol em {
  font-style: normal;
  color: var(--ember);
  letter-spacing: 0.05em;
}
.name__key {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--step--1);
}

/* Heat rises through the plate as it squares up. Driven by --heat from JS. */
.name__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--heat, 0);
  transition: opacity 1.1s var(--ease);
  background:
    linear-gradient(180deg, transparent 34%, rgba(255,138,61,0.10) 100%),
    radial-gradient(120% 60% at 50% 108%, rgba(255,116,34,0.20), transparent 68%);
}
/* The third plate — the outcome — always runs hotter than the other two. */
.name__panel:nth-child(3)::before {
  background:
    linear-gradient(180deg, transparent 26%, rgba(255,138,61,0.17) 100%),
    radial-gradient(120% 66% at 50% 108%, rgba(255,116,34,0.30), transparent 70%);
}

.name__close span {
  font-family: var(--font-brand);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.98;
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.9rem);
}

@media (prefers-reduced-motion: reduce) {
  .name__panel { transform: none !important; opacity: 1 !important; }
  .name__panel::before { opacity: 0.35; }
}

/* ==========================================================================
   28. ONE DISPLAY VOICE — the canonical list
   Section 26 named the display classes it knew about and missed six. The
   result was Archivo surviving at 65px on the homepage intro while every
   heading around it had gone condensed — exactly the inconsistency this
   block exists to prevent.

   THIS IS THE ONLY PLACE DISPLAY TYPE IS ASSIGNED. Any new large-text
   class gets added here, not styled locally. If something looks wide and
   soft next to its neighbours, it is missing from this list.
   ========================================================================== */
h1, h2, h3,
.display,
.statement,
.intro__statement,
.quote,
.principle__title,
.cat__title,
.manifesto__lines p,
.v-card__name,
.book__title,
.toolkit-card__title,
.forge-item__name,
.next__title,
.next__headline,
.name__symbol,
.name__close span,
.drawer__link,
.sec-title,
.stat__value {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.008em;
  line-height: 0.94;
  text-transform: uppercase;
}

/* Optical sizing. Bebas is condensed and reads small at a given value, so
   each tier is set deliberately rather than inherited from the old scale. */
.intro__statement,
.quote            { font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.9rem); }
.book__title      { font-size: clamp(2.0rem, 1.5rem + 2.1vw, 3.4rem); }
.toolkit-card__title,
.forge-item__name { font-size: var(--step-2); letter-spacing: 0.016em; line-height: 1.02; }
.next__headline   { font-size: clamp(2.5rem, 1.9rem + 2.9vw, 4.9rem); }

/* The stand-in book cover — it is display type set on a cover, not body copy. */
.book__placeholder b {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.014em;
  line-height: 0.96;
  text-transform: uppercase;
}

/* Inline bold inside body copy is body copy — it must not inherit a display
   face just because the paragraph it sits in is large. */
.lede b, .lede strong, .next__copy b, .next__copy strong, p b, p strong {
  font-family: inherit;
  text-transform: none;
}
.drawer__link     { letter-spacing: 0.02em; }

/* THE TWO DELIBERATE EXCEPTIONS — do not "fix" these.
   1. The wordmark. FE / ONYX in the header is Archivo because the SVG mark,
      the favicon and the app icons are drawn from Archivo outlines. Setting
      the live text in Bebas would make the header disagree with its own logo.
   2. Body copy, ledes and pull-quotes stay Manrope at any size. A 23px lede
      is body text that happens to be large — not display type. */
.hero__fe, .hero__onyx { font-family: var(--font-display); text-transform: none; }
.lede, .hero__sub, .next__copy { font-family: var(--font-body); text-transform: none; }