/* ============================================================================
   CODEX.CSS — The House Codex, translated to the web
   ============================================================================

   Implements the approved brandbook (VM-Branding-House-Brandbook.pdf,
   No. 01, MMXXVI). Token values are copied from the brandbook's own
   stylesheet so the site and the book cannot drift apart.

   Loaded AFTER layout.css so it overrides the previous visual layer.
   Structure, i18n keys, Stripe hooks and form behaviour are untouched.

   Page references in comments point at the brandbook plate they translate.
   ========================================================================== */

:root {
  /* ── Primary palette — verified against the live stylesheet ── */
  --cx-noir:      #000000;
  --cx-charcoal:  #111111;
  --cx-graphite:  #4F4F4F;
  --cx-soft:      #F5F5F2;
  --cx-chrome:    #D8D8D8;
  --cx-silver:    #C0C0C0;
  --cx-sage:      #8FA36F;

  /* ── Secondary editorial accents ── */
  --cx-porcelain: #EEEAE3;
  --cx-pearl:     #E6DCCB;
  --cx-gold:      #B08A55;
  --cx-teal:      #1C2A2E;
  --cx-blue:      #2E5C93;

  /* ── VM Studio sub-identity ── */
  --cx-abyss:     #070A0B;
  --cx-fog:       #CFD6D6;
  --cx-candle:    #E8E6E1;

  /* ── Type ── */
  --cx-cond:  'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --cx-serif: 'Cormorant Garamond', Georgia, serif;
  --cx-sans:  'Montserrat', system-ui, sans-serif;

  /* The brandbook's 0.25 mm hairline, at screen density */
  --cx-hair: 1px;
}

/* ── Shared editorial devices (brandbook p18 · SYSTEM) ───────────────── */

/* Small tracked label. The book's .caps, set for screen. */
.cx-caps {
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.58rem, .72vw, .72rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 1.5;
}
.cx-caps--sm { font-size: clamp(.54rem, .62vw, .64rem); letter-spacing: .26em; }

/* Monumental condensed display. Big Shoulders 900, line-height .8. */
.cx-display {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .8;
  letter-spacing: -.005em;
  /* Big Shoulders is very condensed — optical sizing needs it set large */
  font-size: clamp(3.2rem, 11.5vw, 11rem);
  display: block;
}

/* The italic counterweight. The book's core type tension (p16 · TYPE). */
.cx-ital {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
}

.cx-rule { border: 0; border-top: var(--cx-hair) solid currentColor; opacity: .35; margin: 0; }

/* Outlined pill button (p27 · the proposed hero CTA) */
.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  border: var(--cx-hair) solid currentColor;
  border-radius: 100px;
  padding: 1.05em 2.2em;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.6rem, .74vw, .72rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background .45s cubic-bezier(.2,.7,.3,1),
              color      .45s cubic-bezier(.2,.7,.3,1);
}
.cx-pill:hover,
.cx-pill:focus-visible { background: var(--cx-porcelain); color: var(--cx-noir); }

/* The monogram signature. Brandbook rule (ref 01): the mark always sits
   bottom-right, and only ever over photography — never over type tiles. */
.cx-sig {
  position: absolute;
  right: clamp(1.1rem, 2.4vw, 2.6rem);
  bottom: clamp(1.1rem, 2.4vw, 2.6rem);
  width: clamp(44px, 6vw, 86px);
  height: auto;
  z-index: 4;
  pointer-events: none;
}

/* ============================================================================
   HERO — brandbook p27, "HERO · PROPOSED ART DIRECTION FOR THE EXISTING
   SITE STRUCTURE". Noir panel left, liquid chrome right, hard vertical split.
   ========================================================================== */

/* The homepage header sits ON the hero, as in the book's plate, rather than
   above it as a 240px band. Scoped to the home page only. */
body.has-codex-hero .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: 0;
}
body.has-codex-hero { position: relative; }
/* layout.css offsets <main> by the header height so content clears a header
   that is in normal flow. On the home page the header now floats over the
   hero, so that offset would push the composition down by ~240px. */
body.has-codex-hero main { padding-top: 0; }

/* layout.css lays a soft-white scrim over the hero so dark text could read
   against the chrome photograph. The codex hero is noir with porcelain type,
   so that scrim would wash the whole panel grey. */
.hero.home-hero::after,
.hero.home-hero::before { content: none; background: none; }

/* Over the noir hero the nav is porcelain and compact — the book sets it as
   two tracked-caps lines, not a 240px logo band (p27). */
body.codex .site-header .nav {
  align-items: flex-start;
  padding-top: clamp(1.1rem, 2.4vw, 2.2rem);
  padding-bottom: clamp(.8rem, 1.6vw, 1.4rem);
}
body.codex .site-header .brand-mark {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  /* layout.css pulls the mark up to overlap the band it used to sit in;
     with the header floating, that clipped it against the viewport edge. */
  margin-top: 0;
  transform: none;
}
/* The header mark uses the brandbook's cleaned master (assets/vm-mark.png),
   which is tightly cropped — only ~3% empty margin. layout.css pulls the old
   logo-mark.png up and down with negative margins to reclaim 21%/22.6% of
   empty artwork; applied to a tightly-cropped file inside an overflow:hidden
   box, that collapsed the mark to zero height. The mark is not recoloured
   or redrawn — only the file and its margins change (p12 · USAGE). */
body.codex .site-header .brand { --logo-w: clamp(52px, 5.4vw, 78px); }
body.codex .site-header .site-logo {
  content: url("../assets/vm-mark.png");
  width: clamp(52px, 5.4vw, 78px);
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
}
body.has-codex-hero .site-header .brand-mark {
  overflow: visible;
  line-height: 0;
}
body.codex .site-header .brand-by,
body.codex .site-header .brand-wordmark,
body.codex .site-header .brand-tagline {
  color: var(--cx-porcelain);
  opacity: .85;
}
body.codex .site-header .nav-links > li > a,
body.codex .site-header .nav-dropdown-toggle {
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.55rem, .68vw, .66rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cx-porcelain);
}
body.codex .site-header .nav-links > li > a:hover,
body.codex .site-header .nav-dropdown-toggle:hover { color: #fff; }
body.codex .site-header .hamburger span { background: var(--cx-porcelain); }
body.codex .site-header .lang-selector button { color: var(--cx-porcelain); }

/* Once scrolled past the hero the header regains a solid ground so the nav
   stays legible over the pale sections below. */
body.has-codex-hero .site-header.is-scrolled {
  position: fixed;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
}

.hero.home-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* The book's split: type panel is the larger field, chrome the narrower */
  grid-template-columns: 1.62fr 1fr;
  grid-template-rows: 1fr;
  /* layout.css centres hero items; the chrome panel must stretch instead,
     because every one of its children is absolutely positioned. */
  align-items: stretch;
  /* layout.css adds 128px block padding — the panels carry their own now */
  padding: 0;
  background: var(--cx-noir);
  color: var(--cx-porcelain);
  overflow: hidden;
  isolation: isolate;
}

/* Left: the type panel */
.hero.home-hero .hero-inner {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* editorial asymmetry — never centred */
  text-align: left;
  padding: clamp(7rem, 15vh, 11rem) clamp(1.4rem, 4vw, 4.5rem) clamp(2rem, 5vw, 5rem);
  max-width: none;
  width: 100%;
}

.hero.home-hero .hero-label {
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.58rem, .72vw, .72rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cx-porcelain);
  opacity: .92;
  margin: 0 0 clamp(1.6rem, 4vw, 3.4rem);
}

/* The headline carries both treatments: condensed caps over italic serif. */
.hero.home-hero .hero-headline {
  margin: 0;
  color: var(--cx-porcelain);
  text-transform: none;
  letter-spacing: normal;
}
.hero.home-hero .ch-display {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .78;
  letter-spacing: -.008em;
  font-size: clamp(3rem, 8.6vw, 9rem);
  display: block;
  color: var(--cx-porcelain);
  /* Big Shoulders sits high in its box; pull the italic line up to it */
  margin-bottom: .1em;
}
.hero.home-hero .ch-tail {
  display: block;
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: .005em;
  color: var(--cx-porcelain);
  opacity: .96;
}

/* The lede sits quietly under the type tension; it is not the hero's voice. */
.hero.home-hero .hero-body {
  margin: clamp(1.6rem, 3.4vw, 2.8rem) 0 0;
  max-width: 46ch;
  text-align: left;
}
.hero.home-hero .hero-body p {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.82rem, 1.02vw, .95rem);
  line-height: 1.75;
  letter-spacing: .012em;
  color: rgba(238, 234, 227, .74);
  margin: 0;
}
/* Only the first paragraph belongs in the hero composition — the second is
   kept in the DOM for its translation and for screen readers. */
.hero.home-hero .hero-body p + p {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero.home-hero .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  margin-top: clamp(1.8rem, 3.6vw, 3rem);
  justify-content: flex-start;
}

/* Both hero buttons become brandbook pills; the primary is filled. */
.hero.home-hero .hero-ctas .btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  border-radius: 100px;
  padding: 1.05em 2.2em;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.6rem, .74vw, .72rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  border: var(--cx-hair) solid var(--cx-porcelain);
  transition: background .45s cubic-bezier(.2,.7,.3,1),
              color .45s cubic-bezier(.2,.7,.3,1);
}
.hero.home-hero .hero-ctas .btn-primary {
  background: var(--cx-porcelain);
  color: var(--cx-noir);
}
.hero.home-hero .hero-ctas .btn-primary:hover,
.hero.home-hero .hero-ctas .btn-primary:focus-visible {
  background: transparent;
  color: var(--cx-porcelain);
}
.hero.home-hero .hero-ctas .btn-outline {
  background: transparent;
  color: var(--cx-porcelain);
}
.hero.home-hero .hero-ctas .btn-outline:hover,
.hero.home-hero .hero-ctas .btn-outline:focus-visible {
  background: var(--cx-porcelain);
  color: var(--cx-noir);
}
.hero.home-hero .btn-arrow { width: 13px; height: 13px; }

/* ── Right: the chrome panel ──────────────────────────────────────────
   The photograph is NOT replaced. chrome.js flows this same asset through
   a shader; if WebGL is unavailable the image below stays visible. */
.hero-chrome {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  background: var(--cx-noir);
}
.hero-chrome .chrome-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/chrome-liquid-bg.jpg");
  background-size: cover;
  background-position: 54% center;
  background-repeat: no-repeat;
  filter: contrast(1.08);
  will-change: transform;
}
.hero-chrome canvas[data-chrome] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
/* While the shader is live the still underneath is redundant. */
.hero-chrome.is-live .chrome-bg { opacity: 0; }

/* Running head, top-right of the chrome panel (p01 · COVER) */
.hero-runhead {
  position: absolute;
  top: clamp(1.1rem, 2.4vw, 2.4rem);
  left: clamp(1.1rem, 2vw, 2rem);
  right: clamp(1.1rem, 2vw, 2rem);
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--cx-porcelain);
  mix-blend-mode: difference;
  pointer-events: none;
}

/* ── Mobile: the split stacks, chrome becomes a band ── */
@media (max-width: 900px) {
  .hero.home-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 42svh auto;
    min-height: 100svh;
  }
  .hero.home-hero .hero-inner {
    grid-column: 1;
    grid-row: 2;
    padding: clamp(1.8rem, 7vw, 3rem) 16px clamp(2.6rem, 9vw, 4rem);
  }
  .hero-chrome { grid-column: 1; grid-row: 1; }
  .hero.home-hero { align-items: stretch; }
  .hero.home-hero .ch-display { font-size: clamp(2.7rem, 13.5vw, 4.6rem); }
  .hero.home-hero .ch-tail    { font-size: clamp(1.05rem, 4.6vw, 1.5rem); }
  .hero.home-hero .hero-body  { max-width: none; }
  .cx-sig { width: 46px; }
  /* At phone width the floating header sits over the chrome band, so the
     running head would collide with the mark and the language selector. */
  .hero-runhead { display: none; }
}

/* ============================================================================
   VM EDITIONS — brandbook p08 (ARCHITECTURE), lower-right plate.
   Noir ground, porcelain cards, roman numerals, editorial serif.
   Prices and Stripe hooks are untouched.
   ========================================================================== */

.editions-section {
  background: var(--cx-noir);
  color: var(--cx-porcelain);
  position: relative;
}
/* "Do not centre every section." The book's chapter openers are left-set
   against the margin with the lede held to a narrow measure (p08). */
.editions-section .editions-head {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.editions-section .editions-head > * { margin-left: 0; margin-right: 0; }

.editions-section .editions-label {
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.56rem, .7vw, .68rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cx-gold);
}
.editions-section .editions-headline {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  line-height: 1.06;
  color: var(--cx-porcelain);
  letter-spacing: 0;
  text-transform: none;
}
.editions-section .editions-intro {
  font-family: var(--cx-sans);
  font-weight: 300;
  color: rgba(238,234,227,.7);
  max-width: 52ch;
}

.editions-section .edition-card {
  background: var(--cx-porcelain);
  color: var(--cx-noir);
  border: 0;
  border-radius: 0;                 /* the book has no rounded panels */
  position: relative;
}
.editions-section .edition-numeral {
  font-family: var(--cx-serif);
  font-weight: 300;
  color: var(--cx-gold);
  letter-spacing: .08em;
}
.editions-section .edition-title {
  font-family: var(--cx-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.editions-section .edition-price {
  font-family: var(--cx-cond);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--cx-noir);
}
.editions-section .edition-note {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--cx-graphite);
}
.editions-section .edition-meta,
.editions-section .edition-features li {
  font-family: var(--cx-sans);
  font-weight: 300;
}
.editions-section .edition-cta {
  border-radius: 100px;
  background: var(--cx-noir);
  color: var(--cx-porcelain);
  font-family: var(--cx-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ============================================================================
   VM STUDIO — brandbook p28 / p30. Night Teal, lowercase Cormorant,
   4-point sparkles, pill tags. Deliberately distinct from the House.
   ========================================================================== */

.studio.studio-band {
  background: radial-gradient(120% 80% at 70% 20%,
              #24363b 0%, #121b1e 55%, var(--cx-abyss) 100%);
  color: var(--cx-candle);
}
.studio.studio-band .studio-eyebrow,
.studio.studio-band .section-label {
  font-family: var(--cx-sans);
  font-weight: 400;
  font-size: clamp(.56rem, .7vw, .68rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cx-fog);
}
/* The Studio speaks in lowercase italic serif, never condensed caps. */
.studio.studio-band .studio-headline,
.studio.studio-band h2 {
  font-family: var(--cx-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 5vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--cx-candle);
}
.studio.studio-band .studio-headline em { font-style: italic; }
.studio.studio-band p {
  font-family: var(--cx-sans);
  font-weight: 300;
  color: rgba(207,214,214,.84);
}

/* ============================================================================
   Accessibility — the brandbook's motion must never override this.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-chrome canvas[data-chrome] { display: none; }
  .hero-chrome.is-live .chrome-bg  { opacity: 1; }
  .cx-pill, .hero.home-hero .hero-ctas .btn { transition: none; }
}

/* ============================================================================
   CHAPTER 01 · ESSENCE — brandbook p04/05
   Plate (full-bleed still life) against Manifesto (porcelain editorial page).
   ========================================================================== */

.cx-essence {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* the book's two facing pages */
  background: var(--cx-porcelain);
  color: var(--cx-noir);
  align-items: stretch;
}

/* ── The Plate ── */
.cx-plate {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: clamp(460px, 78vh, 900px);
  background: var(--cx-pearl);
}
.cx-plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}
/* The outlined chapter numeral: transparent fill, hairline stroke (p18) */
.cx-plate-num {
  position: absolute;
  left: .18em; top: -.06em;
  z-index: 2;
  font-family: var(--cx-cond);
  font-weight: 900;
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,.82);
  text-stroke: 1.2px rgba(255,255,255,.82);
  pointer-events: none;
}
.cx-plate-cap {
  position: absolute;
  left: 0; bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 2;
  background: rgba(0,0,0,.62);
  color: var(--cx-porcelain);
  padding: .55em 1.1em;
}

/* ── The Manifesto page ── */
.cx-manifesto {
  padding: clamp(2rem, 4.4vw, 4.6rem) clamp(1.4rem, 3.4vw, 3.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cx-run {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: var(--cx-hair) solid currentColor;
  margin-bottom: clamp(1.6rem, 4vw, 3.4rem);
}

/* "SET THE" monumental, "tone." italic gold, offset and overlapping (p04) */
.cx-ess-title { margin: 0 0 clamp(1.4rem, 3vw, 2.6rem); line-height: .8; }
.cx-ess-set {
  display: block;
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 9.6vw, 9rem);
  line-height: .8;
  letter-spacing: -.012em;
  color: var(--cx-noir);
}
.cx-ess-tone {
  display: block;
  text-align: right;
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 6rem);
  line-height: .9;
  color: var(--cx-gold);
  /* the book tucks "tone." up under the baseline of SET THE */
  margin-top: -.22em;
  padding-right: .06em;
}

.cx-essence .cx-rule { color: var(--cx-graphite); opacity: .5; }

/* Lede beside the pull quote, divided by a vertical hairline */
.cx-ess-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding: clamp(1.3rem, 2.6vw, 2.2rem) 0;
}
.cx-ess-lede p {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.78rem, .95vw, .9rem);
  line-height: 1.72;
  color: var(--cx-charcoal);
  margin: 0 0 1em;
}
.cx-ess-quote {
  margin: 0;
  padding-left: clamp(1.1rem, 2.4vw, 2.2rem);
  border-left: var(--cx-hair) solid rgba(79,79,79,.5);
}
.cx-ess-quote p {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.95rem);
  line-height: 1.16;
  color: var(--cx-noir);
  margin: 0 0 .9em;
}
.cx-ess-quote cite { font-style: normal; color: var(--cx-graphite); }

/* Three numbered columns (p04, lower band) */
.cx-ess-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  padding-top: clamp(1.3rem, 2.6vw, 2.2rem);
}
.cx-col-lbl { display: block; color: var(--cx-graphite); }
.cx-col-h {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.12;
  margin: .7em 0 .5em;
  color: var(--cx-noir);
}
.cx-ess-cols p {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.7rem, .84vw, .8rem);
  line-height: 1.62;
  color: var(--cx-graphite);
  margin: 0;
}

@media (max-width: 980px) {
  .cx-essence { grid-template-columns: 1fr; }
  .cx-plate { min-height: 58svh; }
  .cx-ess-two,
  .cx-ess-cols { grid-template-columns: 1fr; }
  .cx-ess-quote { padding-left: 0; border-left: 0; border-top: var(--cx-hair) solid rgba(79,79,79,.5); padding-top: 1.2rem; }
  .cx-ess-tone { text-align: left; margin-top: -.1em; }
}

/* ============================================================================
   THE REST OF THE HOUSE — grounds, type and devices applied page-wide
   so the site reads as one publication rather than one redesigned hero.
   Brandbook p14 (COLOUR), p16 (TYPE), p18 (EDITORIAL SYSTEM & GRID).
   ========================================================================== */

/* ── Grounds ──────────────────────────────────────────────────────────
   The book has no pure-white page. Soft White and Porcelain carry the
   light spreads; Noir and Charcoal carry the dark ones. */
body.codex .section-white,
body.codex .section-light,
body.codex .service-preview.section-light { background: var(--cx-porcelain); }
body.codex .section-black  { background: var(--cx-noir); }
body.codex .section-charcoal { background: var(--cx-charcoal); }

/* ── Service spreads — the "Split" archetype (p18) ────────────────────
   Alternating sides, a chapter numeral, a hairline, and a display title
   against an italic serif line. Never a repeating card grid. */
body.codex .service-preview { position: relative; overflow: hidden; }

body.codex .service-preview-label {
  display: block;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.56rem, .7vw, .68rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cx-gold);
  padding-bottom: .9rem;
  border-bottom: var(--cx-hair) solid rgba(79,79,79,.42);
  margin-bottom: clamp(1rem, 2.4vw, 1.8rem);
}
body.codex .section-black .service-preview-label,
body.codex .section-charcoal .service-preview-label {
  border-bottom-color: rgba(238,234,227,.3);
}

body.codex .service-preview-title {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.4vw, 5rem);
  line-height: .84;
  letter-spacing: -.01em;
  margin: 0 0 clamp(.9rem, 2vw, 1.5rem);
}
body.codex .service-preview-copy p {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.8rem, .98vw, .92rem);
  line-height: 1.74;
  max-width: 48ch;
}
body.codex .explore-link {
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.58rem, .72vw, .7rem);
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ── Shop tiers as an editorial index, not a grid of cards (p08) ────── */
body.codex .shop-tier-label {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  line-height: .84;
  letter-spacing: -.008em;
  color: var(--cx-noir);
}
body.codex .section-black .shop-tier-label { color: var(--cx-porcelain); }
body.codex .shop-tier-head {
  text-align: left;
  padding-bottom: clamp(1rem, 2.2vw, 1.6rem);
  border-bottom: var(--cx-hair) solid rgba(79,79,79,.42);
  margin-bottom: clamp(1.6rem, 3.4vw, 2.8rem);
}
body.codex .shop-tier-desc {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  color: var(--cx-graphite);
  max-width: 54ch;
  margin: .8em 0 0;
}

body.codex .shop-home-item {
  background: transparent;
  border: 0;
  border-top: var(--cx-hair) solid rgba(79,79,79,.34);
  border-radius: 0;
  position: relative;
  padding-top: clamp(1.2rem, 2.4vw, 2rem);
}
body.codex .shop-home-num {
  font-family: var(--cx-serif);
  font-weight: 300;
  font-size: clamp(.8rem, 1vw, .95rem);
  letter-spacing: .18em;
  color: var(--cx-gold);
}
body.codex .shop-home-title {
  font-family: var(--cx-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  margin: .5em 0 .25em;
}
body.codex .shop-home-price {
  font-family: var(--cx-cond);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--cx-noir);
}
body.codex .section-black .shop-home-price { color: var(--cx-porcelain); }
body.codex .shop-home-desc {
  font-family: var(--cx-sans);
  font-weight: 300;
  /* layout.css sets this at display scale; in an index row the description
     is body copy and must sit under the title, not compete with it. */
  font-size: clamp(.76rem, .92vw, .86rem);
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--cx-graphite);
  margin: .9em 0 1.1em;
  max-width: 42ch;
}
body.codex .section-black .shop-home-desc { color: rgba(238,234,227,.72); }
body.codex .shop-home-scope li {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.66rem, .78vw, .74rem);
  line-height: 1.75;
  letter-spacing: .02em;
}
body.codex .shop-home-cta,
body.codex .edition-cta,
body.codex .cta-section .btn {
  border-radius: 100px;
  font-family: var(--cx-sans);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: clamp(.56rem, .7vw, .68rem);
}

/* ── Archetypes, bespoke and CTA bands ──────────────────────────────── */
body.codex .arch-section { background: var(--cx-pearl); }
body.codex .section-label,
body.codex .arch-label {
  font-family: var(--cx-sans);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-size: clamp(.56rem, .7vw, .68rem);
  color: var(--cx-gold);
}
body.codex .cta-section {
  background: var(--cx-noir);
  color: var(--cx-porcelain);
  position: relative;
}
body.codex .cta-section h2,
body.codex .section-black h2,
body.codex .arch-section h2 {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.6vw, 5.4rem);
  line-height: .84;
  letter-spacing: -.01em;
}

/* ── Footer — the back cover (p34): noir, monogram, hairline ────────── */
body.codex .site-footer {
  background: var(--cx-noir);
  color: var(--cx-porcelain);
  border-top: var(--cx-hair) solid rgba(238,234,227,.22);
}
body.codex .footer-logo-wordmark {
  font-family: var(--cx-cond);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--cx-porcelain);
}
body.codex .footer-col-title {
  font-family: var(--cx-sans);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: clamp(.54rem, .66vw, .64rem);
  color: var(--cx-gold);
}
body.codex .footer-tagline,
body.codex .footer-signature-name {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
}
body.codex .footer-links a,
body.codex .footer-contact-list span,
body.codex .footer-copy {
  font-family: var(--cx-sans);
  font-weight: 300;
}

/* ── VM Studio keeps its own voice ──────────────────────────────────
   The Studio never speaks in the House's condensed caps (p30). Any
   display heading inside a Studio band resets to lowercase Cormorant. */
body.codex .studio-band h2,
body.codex .studio-band h3,
body.codex .studio-worlds h2,
body.codex .studio-worlds h3,
body.codex [class*="studio"] h2 {
  font-family: var(--cx-serif);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: .94;
  color: var(--cx-candle);
}

/* ============================================================================
   BESPOKE · CTA · CONTACT — the closing bands (p24 VOICE, p34 BACK)
   ========================================================================== */

/* Bespoke: two inquiry columns divided by a hairline, no cards. */
body.codex .custom-grid {
  border-top: var(--cx-hair) solid rgba(238,234,227,.26);
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}
body.codex .custom-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
body.codex .custom-item + .custom-item {
  border-left: var(--cx-hair) solid rgba(238,234,227,.26);
  padding-left: clamp(1.4rem, 3vw, 2.6rem);
}
body.codex .custom-item-title {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-porcelain);
  margin-bottom: .7em;
}
body.codex .custom-item-desc {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.76rem, .92vw, .86rem);
  line-height: 1.72;
  color: rgba(238,234,227,.7);
  max-width: 44ch;
}
body.codex .explore-link-white { color: var(--cx-gold); }

/* The closing call — the book's back cover: centred mark, one italic line. */
body.codex .cta-section { text-align: left; }
body.codex .cta-section p {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1.2;
  color: rgba(238,234,227,.82);
  max-width: 46ch;
}

/* Contact block on porcelain, fields as hairline rules (p26 · stationery) */
body.codex .form-field input,
body.codex .form-field textarea,
body.codex .form-field select {
  background: transparent;
  border: 0;
  border-bottom: var(--cx-hair) solid rgba(79,79,79,.45);
  border-radius: 0;
  font-family: var(--cx-sans);
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
}
body.codex .form-field input:focus,
body.codex .form-field textarea:focus,
body.codex .form-field select:focus {
  outline: none;
  border-bottom-color: var(--cx-gold);
}
body.codex .form-field label {
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.54rem, .66vw, .64rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cx-graphite);
}
body.codex .btn-primary:not(.hero-ctas .btn) {
  border-radius: 100px;
  font-family: var(--cx-sans);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  body.codex .custom-item + .custom-item {
    border-left: 0;
    padding-left: 0;
    border-top: var(--cx-hair) solid rgba(238,234,227,.26);
    padding-top: clamp(1.2rem, 4vw, 2rem);
    margin-top: clamp(1.2rem, 4vw, 2rem);
  }
}

/* ============================================================================
   INNER PAGE CHAPTER OPENERS — every page but the home page
   The book opens each chapter the same way: a running label in gold tracked
   caps, a monumental condensed title, and an italic serif line beneath
   (p06 PERSONALITY, p08 ARCHITECTURE, p24 VOICE).
   ========================================================================== */

body.codex .page-hero {
  background: var(--cx-noir);
  color: var(--cx-porcelain);
  position: relative;
}
body.codex .page-hero-inner {
  text-align: left;          /* never centred — editorial asymmetry */
  max-width: none;
  padding-block: clamp(3.4rem, 9vh, 7rem);
}
body.codex .page-hero-label {
  display: block;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.56rem, .7vw, .68rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cx-gold);
  padding-bottom: .9rem;
  border-bottom: var(--cx-hair) solid rgba(238,234,227,.3);
  margin-bottom: clamp(1.1rem, 2.6vw, 2rem);
}
body.codex .page-hero-title {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  line-height: .82;
  letter-spacing: -.012em;
  color: var(--cx-porcelain);
  margin: 0;
}
body.codex .page-hero-line {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 2.1vw, 2rem);
  line-height: 1.16;
  color: rgba(238,234,227,.88);
  max-width: 34ch;
  margin-top: clamp(.9rem, 2vw, 1.6rem);
}

/* Section headers inside inner pages follow the same chapter rhythm. */
body.codex .section-header { text-align: left; }
body.codex .section-header h2,
body.codex .section-title {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  line-height: .84;
  letter-spacing: -.01em;
}
body.codex .section-header p,
body.codex .section-intro {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  color: var(--cx-graphite);
  max-width: 52ch;
}
body.codex .section-black .section-header p,
body.codex .section-black .section-intro { color: rgba(238,234,227,.72); }

/* Shop page: the catalogue uses the same index rows as the home page. */
body.codex .shop-item,
body.codex .shop-service {
  background: transparent;
  border: 0;
  border-top: var(--cx-hair) solid rgba(79,79,79,.34);
  border-radius: 0;
}
body.codex .shop-item-title,
body.codex .shop-service-title {
  font-family: var(--cx-serif);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.codex .shop-item-price,
body.codex .shop-service-price {
  font-family: var(--cx-cond);
  font-weight: 900;
  letter-spacing: -.01em;
}

/* VM Studio page keeps the Studio sub-identity, not the House voice. */
body.codex .studio-hero { background: var(--cx-abyss); }
body.codex .studio-hero h1,
body.codex .studio-hero-title {
  font-family: var(--cx-serif);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: .92;
  color: var(--cx-candle);
}

@media (max-width: 860px) {
  body.codex .page-hero-title { font-size: clamp(2.4rem, 13vw, 4.2rem); }
  body.codex .page-hero-line  { font-size: clamp(1rem, 4.4vw, 1.4rem); max-width: none; }
}


/* The header is the same object on every page: noir ground, porcelain
   tracked caps, the enamel mark at small size (p27). On the home page it
   floats transparently over the hero; everywhere else it is a solid band
   that sits flush above the chapter opener. */
body.codex:not(.has-codex-hero) .site-header {
  background: var(--cx-noir);
  border-bottom: var(--cx-hair) solid rgba(238,234,227,.18);
}

/* ============================================================================
   VM STUDIO — brandbook sheets 15 & 16 (plates 28/29 and 30/31)
   Night Teal → Abyss ground, the enamel-mark lockup, a centred lowercase
   Cormorant headline among four-point sparkles, the manifesto row, and the
   worlds set as Treatment A: "image top, lowercase title, single sparkle,
   Night Teal base."
   ========================================================================== */

/* The four-point sparkle — the Studio's ornament (p30: "four-point
   sparkles, serpentine"). The House never uses it; it uses hairlines. */
.cx-sparkle { fill: currentColor; width: 1em; height: 1em; display: inline-block; }

.studio.studio-band {
  background: radial-gradient(120% 80% at 70% 20%,
              #24363b 0%, #121b1e 55%, var(--cx-abyss) 100%);
  color: var(--cx-candle);
}

/* ── The Studio page is centred — the one place the book centres (p29) ── */
.cx-studio { text-align: center; }

.cx-st-run {
  display: block;
  color: var(--cx-fog);
  margin-bottom: clamp(1.4rem, 3.4vw, 2.8rem);
}

/* The lockup: enamel mark stacked over "studio" in lowercase Cormorant
   italic, with one sparkle to the right (p30). The mark is never redrawn. */
.cx-st-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  margin-bottom: clamp(1rem, 2.4vw, 2rem);
  position: relative;
}
.cx-st-lockup img {
  width: clamp(82px, 11vw, 168px);
  height: auto;
  display: block;
}
.cx-st-word {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--cx-candle);
  text-transform: lowercase;
}
.cx-st-lockup .cx-sparkle {
  position: absolute;
  right: -1.5em;
  bottom: .55em;
  width: clamp(14px, 1.6vw, 24px);
  height: auto;
  color: var(--cx-candle);
  opacity: .92;
}

/* The headline: lowercase Cormorant light, second sentence italic (p29) */
.cx-st-head {
  position: relative;
  font-family: var(--cx-serif);
  font-weight: 300;
  text-transform: lowercase;
  letter-spacing: -.012em;
  line-height: .92;
  font-size: clamp(2rem, 5.4vw, 5rem);
  color: var(--cx-candle);
  margin: 0 auto clamp(1.2rem, 2.8vw, 2.2rem);
  max-width: 17ch;
}
.cx-st-head .cx-st-a,
.cx-st-head .cx-st-b { display: inline; }
.cx-st-head .cx-st-b { font-style: italic; }

/* The constellation around the headline (p29) */
.cx-st-head::before,
.cx-st-head::after {
  content: "";
  position: absolute;
  width: clamp(16px, 2vw, 34px);
  aspect-ratio: 1;
  background: currentColor;
  opacity: .9;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  pointer-events: none;
}
.cx-st-head::before { left: -.4em;  top: .06em; }
.cx-st-head::after  { right: -.5em; top: -.18em; width: clamp(11px, 1.3vw, 22px); opacity: .75; }

.cx-st-lede {
  font-family: var(--cx-sans);
  font-weight: 400;
  font-size: clamp(.58rem, .76vw, .74rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--cx-fog);
  max-width: 58ch;
  margin: 0 auto;
}

/* ── Manifesto row (p29) ── */
.cx-st-manifesto {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.2rem, 3vw, 3rem);
  border-top: var(--cx-hair) solid rgba(232,230,225,.32);
  padding-top: clamp(1.1rem, 2.4vw, 2rem);
  margin-bottom: clamp(1.6rem, 3.4vw, 2.8rem);
  text-align: left;
}
.cx-st-reject {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.95rem, 1.6vw, 1.5rem);
  line-height: 1.28;
  color: var(--cx-candle);
  margin: 0;
}
.cx-st-reject span { display: block; }
.cx-st-universe {
  font-family: var(--cx-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(.95rem, 1.8vw, 1.7rem);
  line-height: 1.04;
  letter-spacing: .02em;
  color: var(--cx-candle);
  text-align: right;
  margin: 0;
  max-width: 14ch;
}

/* ── The Worlds — the campaign plate (p31) ───────────────────────────
   The poster treatment: the type sits ON the film, which is desaturated
   and veiled back so it reads as ground, not as picture. Alternating
   frames carry the exhibition hairline from treatment C. */
.studio-band .worlds-head { text-align: left; }
.studio-band .worlds-title {
  font-family: var(--cx-serif);
  font-weight: 300;
  font-style: italic;
  text-transform: lowercase;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: var(--cx-candle);
}

.studio-band .world {
  background: var(--cx-abyss);
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.studio-band .world-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 8;          /* the poster format of the campaign plate */
  overflow: hidden;
  background: var(--cx-abyss);
}
.studio-band .world-frame video,
.studio-band .world-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Desaturated, as the book specifies for the poster treatment. */
  filter: saturate(.38) contrast(1.06) brightness(.82);
}
/* The veil — keeps the serif legible over any frame of the film. */
.studio-band .world-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(7,10,11,.58) 0%,
      rgba(7,10,11,.22) 26%,
      rgba(7,10,11,.30) 52%,
      rgba(7,10,11,.80) 100%);
}

/* The constellation of sparkles (p31, treatment B) */
.studio-band .world-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.studio-band .world-stars .cx-sparkle {
  position: absolute;
  color: var(--cx-candle);
  height: auto;
}
.studio-band .world-stars .cx-sparkle:nth-child(1) { left: 9%;  top: 34%; width: clamp(14px, 1.7vw, 26px); opacity: .95; }
.studio-band .world-stars .cx-sparkle:nth-child(2) { right: 11%; top: 61%; width: clamp(10px, 1.2vw, 19px); opacity: .85; }
.studio-band .world-stars .cx-sparkle:nth-child(3) { right: 22%; top: 24%; width: clamp(6px, .7vw, 11px);  opacity: .55; }

/* The type plate, set over the film */
.studio-band .world-plate {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) clamp(.9rem, 1.6vw, 1.4rem);
}
.studio-band .world-presents {
  position: absolute;
  top: clamp(1.1rem, 2.2vw, 1.9rem);
  left: 0; right: 0;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.46rem, .58vw, .58rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cx-candle);
  opacity: .9;
}
/* Centred serif, second line italic — "the stone / angels" */
.studio-band .world-name {
  font-family: var(--cx-serif);
  font-weight: 300;
  font-style: normal;
  text-transform: lowercase;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--cx-candle);
  margin: 0;
  text-shadow: 0 2px 26px rgba(7,10,11,.55);
}
.studio-band .world-name .wn-a,
.studio-band .world-name .wn-b { display: block; }
.studio-band .world-name .wn-b { font-style: italic; }

.studio-band .world-concept {
  font-family: var(--cx-sans);
  font-weight: 300;
  font-size: clamp(.7rem, .82vw, .78rem);
  line-height: 1.66;
  color: rgba(207,214,214,.78);
  margin: .9em 0 0;
}
.studio-band .world-concept:empty { display: none; }

/* "A VM STUDIO WORLD · NO. 02" — tracked caps, bottom of the plate */
.studio-band .world-index {
  position: absolute;
  left: 0; right: 0;
  top: auto;
  bottom: calc(clamp(1.1rem, 2.2vw, 1.9rem) + 3.1em);
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.46rem, .56vw, .56rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cx-fog);
  opacity: .8;
  background: none;
  display: block;
}
/* The tag becomes a pill — shared between House and Studio (p30) */
.studio-band .world-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.1rem, 2.2vw, 1.9rem);
  white-space: nowrap;
  display: inline-block;
  border: var(--cx-hair) solid rgba(232,230,225,.55);
  border-radius: 100px;
  padding: .55em 1.15em .5em;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: clamp(.44rem, .55vw, .54rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cx-candle);
  background: rgba(7,10,11,.28);
  backdrop-filter: blur(2px);
}

/* ── Alternating frames: the exhibition hairline from treatment C ───── */
.studio-band .world--framed .world-rule {
  position: absolute;
  inset: clamp(.7rem, 1.3vw, 1.2rem);
  z-index: 2;
  border: var(--cx-hair) solid rgba(232,230,225,.42);
  pointer-events: none;
}
.studio-band .world--framed .world-plate { padding: clamp(2rem, 3.4vw, 3rem); }
.studio-band .world--framed .world-presents { top: clamp(2rem, 3.4vw, 3rem); }
.studio-band .world--framed .world-index { bottom: calc(clamp(2rem, 3.4vw, 3rem) + 3.1em); }
.studio-band .world--framed .world-tag { bottom: clamp(2rem, 3.4vw, 3rem); }
.studio-band .world--framed .world-name .wn-a {
  font-family: var(--cx-cond);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .92;
  font-size: 1.18em;
}

.studio-band .worlds-head .world-tag {
  position: static; transform: none; white-space: normal; backdrop-filter: none;
  border: 0; padding: 0; letter-spacing: .02em; text-transform: none;
  font-family: var(--cx-sans); font-size: clamp(.7rem,.84vw,.8rem);
  color: rgba(207,214,214,.78); background: none;
}

@media (max-width: 860px) {
  .cx-st-manifesto { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .cx-st-universe { text-align: left; max-width: none; }
  .cx-st-head::before { left: -.1em; }
  .cx-st-head::after  { right: -.1em; }
}

/* ── Corrections after reviewing against p29 ──────────────────────────
   1. The generic Studio heading rule above (body.codex .studio-band h2)
      sets text-transform:none and outranks .cx-st-head. The opener must be
      lowercase, so restate it at matching specificity.
   2. In the book this type sits on the Night Teal → Abyss gradient, not on
      a photograph. The film is kept, but veiled back until it reads as the
      gradient it stands in for. */
body.codex .studio-band .cx-st-head {
  text-transform: lowercase;
  font-family: var(--cx-serif);
  font-weight: 300;
}
body.codex .studio-band .cx-st-word { text-transform: lowercase; }

.studio-band .studio-hero { position: relative; }
.studio-band .studio-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(28,42,46,.72) 0%, rgba(18,27,30,.9) 55%, rgba(7,10,11,.96) 100%);
  pointer-events: none;
}
.studio-band .studio-inner { position: relative; z-index: 2; }

/* The generic Studio heading rule (body.codex .studio-band h3) sets
   text-transform:none and outranks .world-name. Treatment A is explicit
   that the world title is lowercase, so restate it at equal specificity. */
body.codex .studio-band .world-name {
  text-transform: lowercase;
  font-family: var(--cx-serif);
  font-style: normal;
  font-weight: 300;
}
body.codex .studio-band .world-name .wn-b { font-style: italic; }
body.codex .studio-band .world--framed .world-name .wn-a {
  font-family: var(--cx-cond);
  font-weight: 700;
  text-transform: uppercase;
}

/* ============================================================================
   SHOP — giving the catalogue the book's rhythm
   A chapter opener with a plate, and still-life bands breaking the tiers,
   so the page reads as chapters rather than one long list.
   ========================================================================== */

/* Chapter opener as a split: type left, plate right (the book's Plate pair) */
body.codex .page-hero.has-plate {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  /* Both panels share row 1. Without this, declaring grid-column on each
     makes auto-placement open a second row and the plate stops filling. */
  grid-template-rows: 1fr;
  align-items: stretch;
  padding-block: 0;
  overflow: hidden;
}
body.codex .page-hero.has-plate .page-hero-inner {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-inline: clamp(1.4rem, 4vw, 4.5rem);
}
body.codex .cx-hero-plate {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  min-height: clamp(300px, 46vh, 560px);
}
body.codex .cx-hero-plate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
body.codex .cx-hero-plate .cx-plate-cap { left: 0; }

/* Plate band: a full-bleed photograph with an outlined numeral and one
   italic line — the book's way of turning a page. */
body.codex .cx-band {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: clamp(260px, 42vh, 520px);
  background: var(--cx-noir);
}
body.codex .cx-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
body.codex .cx-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%);
}
body.codex .cx-band-num {
  position: absolute;
  left: clamp(.6rem, 2vw, 2rem);
  top: -.1em;
  z-index: 2;
  font-family: var(--cx-cond);
  font-weight: 900;
  font-size: clamp(6rem, 15vw, 14rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(238,234,227,.5);
  pointer-events: none;
}
body.codex .cx-band figcaption {
  position: absolute;
  left: clamp(1.2rem, 3.4vw, 3.4rem);
  bottom: clamp(1.4rem, 3.4vw, 3rem);
  z-index: 2;
  max-width: 34ch;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-start;
}
body.codex .cx-band-quote {
  font-family: var(--cx-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 2.1rem);
  line-height: 1.14;
  color: var(--cx-porcelain);
}
body.codex .cx-band .cx-plate-cap { position: static; }

/* Editions on the shop page keep the roman numerals in gold. */
body.codex .shop-item-num {
  font-family: var(--cx-serif);
  font-weight: 300;
  letter-spacing: .14em;
  color: var(--cx-gold);
}
body.codex .shop-item.is-edition { background: var(--cx-porcelain); }

@media (max-width: 900px) {
  body.codex .page-hero.has-plate { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  body.codex .page-hero.has-plate .page-hero-inner { grid-column: 1; grid-row: 2; padding-block: clamp(2rem,7vw,3rem); }
  body.codex .cx-hero-plate { grid-column: 1; grid-row: 1; min-height: 38svh; }
  body.codex .cx-band { min-height: 34svh; }
}