/* ============================================
   KROMSKY CORE | Reset + Tokens
   Version: 5.8.0
   Sections: 00 Reset | 03 Global Chrome | 05 F001 Hero | 10 F002 Material Story | 20 F003 Scarcity | 30 F004 Gatekeeper | 40 Manifesto | 50 Vault | 55 Artifact | 60 Contact
   Constraint: tokens only. No greys, no extra
   colors, no border-radius above 0px.
   GSAP rule: reveal targets ([data-kromsky-reveal])
   never carry CSS transforms. Asymmetry is built
   with grid placement and margins only.
   ============================================ */

/* ---------- 00 | RESET + TOKENS ---------- */

:root {
  /* Color Tokens */
  --void-black: #0A0A0A;
  --titanium-white: #F5F5F7;
  --acid-lime: #CCFF00;

  /* Typography Tokens */
  --font-heading: "Oswald", sans-serif;
  --font-body: "Inter", sans-serif;
  --weight-bold: 700;
  --weight-regular: 400;

  /* Geometry Tokens */
  --radius: 0px;
  --border-thin: 1px solid var(--titanium-white);

  /*
    Spacing scale. Every top-level section uses these and nothing else.

    Before this existed each section carried its own hand-written clamp,
    so at 390px the hero opened with 93px, the material story with 118px
    and the scarcity block with 101px. Three rhythms in one scroll, which
    is what makes a page feel assembled rather than designed.

    --gutter      horizontal page margin, identical on every section
    --section-y   standard vertical breathing between sections
    --section-y-lg  top of a standalone route, clears the fixed top bar
  */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(4.5rem, 12vh, 9rem);
  --section-y-lg: clamp(6rem, 15vh, 11rem);

  /* Motion Tokens */
  --transition: 0.4s ease-in-out;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
}

html {
  scroll-behavior: auto; /* Lenis takes over */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--void-black);
  color: var(--titanium-white);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--acid-lime);
}

button {
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--titanium-white);
  border-radius: var(--radius);
}

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

ul, ol { list-style: none; }

/* Lenis required hook */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- 05 | F001 CINEMATIC HERO ---------- */

/*
  Direction: the sculpture is an OBJECT, not a wallpaper.

  Two earlier attempts failed for the same underlying reason. A full
  bleed backdrop with object-fit: cover either magnifies a portrait
  source until the head swallows the screen, or, once the source is
  padded out to landscape, leaves the sculpture floating small inside
  a dead black rectangle. Neither reads as a gallery piece.

  This layout puts type in the left column and the sculpture in the
  right column, sized to the hero height and bleeding off the right
  edge. The source file is cut tight to the sculpture with zero black
  margin, so the frame is filled by the object itself. No legibility
  wash is needed because the type never sits on the image.

  GSAP rule unchanged: reveal and intro targets carry no CSS
  transforms. kromsky-motion.js owns every transform in this section.
*/

.krm-hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--void-black);
  display: flex;
  align-items: center;
  padding: var(--section-y-lg) 0 var(--section-y) var(--gutter);
  overflow: hidden;
}

/*
  Ghost monument. Oswald outline via text-stroke, fill transparent.
  The colour is the Titanium White token at low alpha: no grey is
  introduced, the value is a token carried at reduced opacity.
  Wider than the viewport on purpose. The overflow is clipped by
  .krm-hero and the surplus is the runway kromsky-motion.js drifts
  through on scroll. z-index 0 keeps it behind grid (1).
*/
.krm-hero__ghost {
  position: absolute;
  top: 50%;
  left: -4vw;
  z-index: 0;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(12rem, 30vw, 34rem);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 245, 247, 0.13);
  pointer-events: none;
  user-select: none;
}

.krm-hero__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2.5rem);
}

/* Right column. In flow, not absolute. Bleeds off the right edge. */
.krm-hero__asset-frame {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: center;
  justify-self: end;
  width: 100%;
  margin-right: clamp(-3rem, -2vw, -1rem);
  pointer-events: none;
}

/*
  Source is cut tight to the sculpture at roughly 1.22:1, matching the
  column. contain, never cover: the object must never be re-cropped by
  the browser. Do not swap in a padded or portrait source here.
*/
.krm-hero__asset {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76svh;
  object-fit: contain;
  object-position: center right;
  margin-left: auto;
  transform-origin: 70% 45%;
}

.krm-hero__copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 100%;
}

/*
  Drop eyebrow. Announces the live piece above the headline instead of
  trailing off the end of the subhead, where it was invisible. Acid
  Lime on the name is the same signal it carries in F003 and F004:
  this is the thing that is live right now.
*/
.krm-hero__release {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.krm-hero__release-label {
  color: rgba(245, 245, 247, 0.55);
}

.krm-hero__release-name {
  color: var(--acid-lime);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
}

/*
  Clip window for the headline reveal. kromsky-motion.js drives the
  H1 up from below this edge on load. Never set a height here: the
  mask must size itself to the type, or the reveal will crop lines.

  padding-bottom is load bearing. At line-height 0.86 the round
  overshoot on O, C, S and G sits below the text box, and overflow
  hidden sliced it clean off. 0.06em was not enough once the headline
  ran to four lines. Do not reduce it.
*/
.krm-hero__h1-mask {
  overflow: hidden;
  padding-bottom: 0.18em;
}

/*
  Width lives on the H1, not on the wrapper, and is expressed in em.
  The ch unit resolves against the element's own font-size: on the
  wrapper that is body Inter at 1rem, which collapsed the column to
  roughly 190px and shattered the headline into two-letter lines.
  em on the H1 scales with the headline itself, so the line breaks
  hold identically at every viewport width.
  Do not reintroduce a ch or overflow-wrap: break-word here.
*/
/*
  Size is tuned to a FOUR line headline. Adding KROMSKY: to the front
  pushed it from three lines to four, and at the old 8.5rem ceiling
  that filled the viewport and killed the air the layout depends on.
  If the headline ever returns to three lines, the ceiling can go back
  up. Check before changing.
*/
.krm-hero__h1 {
  font-size: clamp(2.75rem, 6.6vw, 6.25rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  max-width: 6.5em;
  overflow-wrap: normal;
  hyphens: none;
}

.krm-hero__subhead {
  max-width: 38ch;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  padding-left: 1rem;
  border-left: 2px solid var(--acid-lime);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.78);
}

/* ---------- 05.1 | F001 RESPONSIVE ---------- */

@media (max-width: 900px) {
  /* Stack. Object above, type below. DOM order already matches. */
  .krm-hero {
    align-items: flex-end;
    padding: var(--section-y-lg) var(--gutter) var(--section-y);
  }

  /* Ghost dims and shrinks behind the stacked layout. */
  .krm-hero__ghost {
    font-size: clamp(8rem, 38vw, 12rem);
    -webkit-text-stroke: 1px rgba(245, 245, 247, 0.09);
  }

  .krm-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 4vh, 3rem);
  }

  .krm-hero__asset-frame {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-right: 0;
  }

  .krm-hero__asset {
    max-height: 42svh;
    object-position: center;
    margin-left: 0;
  }

  .krm-hero__copy {
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
  }

  .krm-hero__h1 {
    font-size: clamp(2.25rem, 10vw, 4rem);
    max-width: 100%;
  }

  .krm-hero__release {
    margin-bottom: 0.875rem;
    font-size: 0.6875rem;
  }
}

/* ---------- 10 | F002 MATERIAL STORY ---------- */

/*
  Contract (07_kromsky_design.md):
  - Extreme size contrast: label unusually small (Inter),
    value massive (Oswald).
  - Raw sharp bordered blocks, streetwear collage, no
    symmetrical retail grid.
  - Acid Lime is NOT used here. It stays reserved for
    scarcity and interaction triggers (F003/F004).
*/

.krm-material {
  position: relative;
  background-color: var(--void-black);
  padding: var(--section-y) var(--gutter);
  border-top: var(--border-thin);
}

/*
  Drop intro.

  First version floated as bare prose above the grid and read as text
  someone forgot to style. The section is a collage of bordered plates,
  so the intro has to be a plate too, or it belongs to nothing.

  It borrows the exact language of the spec cards: same border, same
  padding scale, same SPEC eyebrow with a rule under it, and it sits on
  the same 12 column grid at the same span as the first card. What it
  does NOT borrow is min-height, because prose sets its own height, and
  the display type scale, because a paragraph at 6rem Oswald is what
  broke it the first time.

  Kept outside .krm-material__grid on purpose. The cards are placed with
  :nth-child, so adding a sibling inside that grid would shift every
  card into the wrong column.
*/
.krm-material__intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  margin-bottom: clamp(3rem, 8vh, 6rem);
}

/* Full bleed across all twelve columns. The spec cards below are
   deliberately off-grid and asymmetric, so the intro reads as the
   steady thing they scatter away from. */
.krm-material__intro-plate {
  grid-column: 1 / -1;
  border: var(--border-thin);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  text-align: center;
}

/*
  ORIGIN, not SPEC / 00. The spec cards are measurements. This is the
  story, and numbering it as a spec made a promise the content does not
  keep.

  Set here rather than in a field, matching how the spec markers work.
  One word to change, and it is the same for every drop. If it ever
  needs to differ per piece, it becomes an ACF field.
*/
.krm-material__intro-plate::before {
  content: "ORIGIN";
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--titanium-white);
  border-bottom: var(--border-thin);
  padding-bottom: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-align: left;
}

.krm-material__intro-body {
  max-width: 52ch;
  margin-inline: auto;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: rgba(245, 245, 247, 0.86);
}

.krm-material__intro-body p {
  margin-bottom: 1.25em;
}

/* Closing line is the piece speaking. Given the display face and a
   rule above it so it lands as a quote rather than another paragraph. */
.krm-material__intro-body p:last-child {
  max-width: 24ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: var(--border-thin);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--titanium-white);
}

.krm-material__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(3.5rem, 9vh, 7rem);
}

/* Spec plate. GSAP reveal target: no CSS transform here. */
.krm-material__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border: var(--border-thin);
  background-color: var(--void-black);
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  min-height: clamp(16rem, 32vw, 26rem);
}

/* Engraved index marker, driven by data-kromsky-index */
.krm-material__item::before {
  content: "SPEC / 0" attr(data-kromsky-index);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--titanium-white);
  border-bottom: var(--border-thin);
  padding-bottom: 0.75rem;
}

/* Asymmetric collage placement. Margins only, never transform. */
.krm-material__item:nth-child(6n + 1) { grid-column: 1 / span 7; }
.krm-material__item:nth-child(6n + 2) {
  grid-column: 9 / span 4;
  margin-top: clamp(4rem, 10vh, 8rem);
}
.krm-material__item:nth-child(6n + 3) { grid-column: 3 / span 6; }
.krm-material__item:nth-child(6n + 4) {
  grid-column: 1 / span 4;
  margin-top: clamp(2rem, 6vh, 5rem);
}
.krm-material__item:nth-child(6n + 5) { grid-column: 6 / span 7; }
.krm-material__item:nth-child(6n + 6) {
  grid-column: 2 / span 5;
  margin-top: clamp(3rem, 8vh, 6rem);
}

.krm-material__macro-frame {
  border: var(--border-thin);
  overflow: hidden;
}

.krm-material__macro {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition);
}

.krm-material__item:hover .krm-material__macro {
  transform: scale(1.04);
}

.krm-material__spec {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Unusually small. Inter. Hierarchy by scale, never by grey. */
.krm-material__label {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--titanium-white);
}

/* Massive. Oswald via h2 inheritance, sized here. */
.krm-material__value {
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  overflow-wrap: break-word;
}

/* ---------- 10.1 | F002 RESPONSIVE ---------- */

@media (max-width: 900px) {
  .krm-material__intro {
    grid-template-columns: 1fr;
  }

  .krm-material__intro-plate {
    grid-column: 1 / -1;
  }

  .krm-material__grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .krm-material__item:nth-child(6n + 1),
  .krm-material__item:nth-child(6n + 2),
  .krm-material__item:nth-child(6n + 3),
  .krm-material__item:nth-child(6n + 4),
  .krm-material__item:nth-child(6n + 5),
  .krm-material__item:nth-child(6n + 6) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .krm-material__item {
    min-height: 0;
  }

  .krm-material__value {
    font-size: clamp(2.25rem, 11vw, 4rem);
  }
}

/* ---------- 03 | GLOBAL CHROME (theme header.php / footer.php) ---------- */

/* Sticky top bar. Transparent over the hero, Void Black once scrolled. */
.krm-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.75rem, 2vw, 1.5rem) var(--gutter);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition), border-color var(--transition), padding var(--transition);
}

.krm-topbar--scrolled {
  background-color: var(--void-black);
  border-bottom: var(--border-thin);
  padding-top: clamp(0.5rem, 1vw, 0.875rem);
  padding-bottom: clamp(0.5rem, 1vw, 0.875rem);
}

/* SK seal. The only element above the fold besides the hero. */
.krm-seal {
  display: block;
  width: clamp(5rem, 8vw, 8.5rem);
  transition: width var(--transition);
}

/* Compact seal in the scrolled bar so the strip stays thin.
   Was clamp(3rem, 4vw, 4rem), which shrank the mark to the point it
   read as an icon rather than a seal. Backed off. */
.krm-topbar--scrolled .krm-seal {
  width: clamp(4rem, 5.5vw, 5.75rem);
}

.krm-seal__mark {
  width: 100%;
  height: auto;
}

/* Footer strip. Hardcoded chrome, no ACF. */
.krm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: var(--border-thin);
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--gutter);
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.krm-footer__gate {
  border: var(--border-thin);
  padding: 0.75rem 1.5rem;
  transition: color var(--transition), border-color var(--transition);
}

.krm-footer__gate:hover {
  color: var(--acid-lime);
  border-color: var(--acid-lime);
}

/* index.php hierarchy fallback. Never a designed route. */
.krm-fallback {
  min-height: 100svh;
  padding: var(--section-y-lg) var(--gutter);
}

.krm-fallback__title {
  font-size: clamp(2.5rem, 8vw, 6rem);
}

.krm-fallback__content {
  max-width: 60ch;
  margin-top: 2rem;
}

/* ---------- 20 | F003 SCARCITY ENGINE ---------- */

/*
  Contract (07_kromsky_design.md):
  - Inventory metrics and transaction access sit inside a rigid box.
  - Solid horizontal progression bar. Rectangular ACQUIRE ASSET button.
  - Acid Lime enters here and only here: availability bar, countdown
    digits, and the transaction trigger. Nowhere else on the page.
*/

.krm-scarcity {
  padding: var(--section-y) var(--gutter);
  border-top: var(--border-thin);
  background-color: var(--void-black);
}

/* The rigid box */
.krm-scarcity__box {
  max-width: 56rem;
  margin: 0 auto;
  border: var(--border-thin);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.25rem);
}

.krm-scarcity__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: var(--border-thin);
  padding-bottom: 1rem;
}

.krm-scarcity__code {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.krm-scarcity__status {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  border: var(--border-thin);
  padding: 0.5rem 0.875rem;
}

.krm-scarcity[data-drop-status="live"] .krm-scarcity__status {
  border-color: var(--acid-lime);
  color: var(--acid-lime);
}

/* Progression bar */
.krm-scarcity__bar {
  height: 1.5rem;
  border: var(--border-thin);
  overflow: hidden;
}

.krm-scarcity__fill {
  display: block;
  height: 100%;
  background-color: var(--acid-lime);
  transition: width var(--transition);
}

.krm-scarcity[data-drop-status="sold-out"] .krm-scarcity__fill {
  background-color: var(--titanium-white);
}

.krm-scarcity__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.krm-scarcity__meta-alert {
  color: var(--acid-lime);
}

/* Transaction trigger */
.krm-scarcity__cta {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1.25rem 2rem;
  background-color: var(--acid-lime);
  color: var(--void-black);
  border: 1px solid var(--acid-lime);
  transition: background-color var(--transition), color var(--transition);
}

.krm-scarcity__cta:hover {
  background-color: var(--void-black);
  color: var(--acid-lime);
}

.krm-scarcity__cta--dead {
  background-color: var(--void-black);
  color: var(--titanium-white);
  border: var(--border-thin);
  cursor: default;
}

/* Pre-drop countdown. Availability timer = lime per identity rules. */
.krm-scarcity__countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: var(--border-thin);
}

.krm-scarcity__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1rem, 2.5vw, 2rem) 0.5rem;
  border-right: var(--border-thin);
}

.krm-scarcity__cell:last-child {
  border-right: 0;
}

.krm-scarcity__digit {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--acid-lime);
  font-variant-numeric: tabular-nums;
}

.krm-scarcity__unit {
  font-size: 0.625rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .krm-scarcity__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .krm-scarcity__countdown {
    grid-template-columns: repeat(2, 1fr);
  }

  .krm-scarcity__cell:nth-child(2) {
    border-right: 0;
  }

  .krm-scarcity__cell:nth-child(1),
  .krm-scarcity__cell:nth-child(2) {
    border-bottom: var(--border-thin);
  }
}

/* ---------- 30 | F004 GATEKEEPER ---------- */

/*
  Minimalist monolithic input terminal (PRD F004).
  Failure = glitch. The glitch animates the terminal wrapper,
  never a [data-kromsky-reveal] element, so GSAP transforms
  stay untouched (the reveal target is the terminal itself,
  but GSAP releases it after the intro; the denied class is
  only ever added post-interaction, so no conflict window).
*/

.krm-gate {
  min-height: calc(100svh - 10rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-y-lg) var(--gutter) var(--section-y);
  background-color: var(--void-black);
}

.krm-gate__terminal {
  width: 100%;
  max-width: 34rem;
  border: var(--border-thin);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.krm-gate__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: 0.05em;
}

.krm-gate__hint {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.krm-gate__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.krm-gate__input {
  background: transparent;
  border: var(--border-thin);
  color: var(--titanium-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  outline: none;
}

.krm-gate__input:focus {
  border-color: var(--acid-lime);
}

.krm-gate__input::placeholder {
  color: var(--titanium-white);
  opacity: 0.999; /* keep token purity: no grey via opacity tricks */
}

.krm-gate__submit {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1rem;
  border: var(--border-thin);
  transition: border-color var(--transition), color var(--transition);
}

.krm-gate__submit:hover,
.krm-gate__submit:focus-visible {
  border-color: var(--acid-lime);
  color: var(--acid-lime);
}

.krm-gate__submit:disabled {
  cursor: wait;
}

.krm-gate__feedback {
  min-height: 1.2em;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* Denial glitch */
.krm-gate--denied {
  animation: krm-glitch 0.4s steps(2, jump-none) 1;
  border-color: var(--acid-lime);
}

@keyframes krm-glitch {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(7px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* ---------- 40 | MYTHOS (THE MANIFESTO) ---------- */

/*
  Editorial, not a stack of posters. The opening runs as two columns:
  copy left, portrait right, locked to the same top line. Everything
  below sits in a measured column so the page reads like a printed
  feature rather than a slideshow.
*/

.krm-mythos {
  background-color: var(--void-black);
  padding: var(--section-y-lg) var(--gutter) var(--section-y);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vh, 5.5rem);
}

/* Opening: title + first text left, portrait right. */
.krm-mythos__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.krm-mythos__title {
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.krm-mythos__lead {
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.85;
}

.krm-mythos__lead p + p {
  margin-top: 1.15rem;
}

/* Portrait: framed, sticky on tall screens so it tracks the copy. */
.krm-mythos__portrait {
  border: var(--border-thin);
  position: sticky;
  top: clamp(6rem, 12vh, 9rem);
  max-width: 26rem;
  justify-self: end;
}

.krm-mythos__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 34rem;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.krm-mythos__caption {
  border-top: var(--border-thin);
  padding: 0.75rem 1rem;
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Measured column for everything after the opening. */
.krm-mythos__body {
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.9;
}

.krm-mythos__body p + p {
  margin-top: 1.25rem;
}

.krm-mythos__body--offset {
  margin-left: auto;
}

/* Split block: body copy left, supporting image right. */
.krm-mythos__split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/*
  No border here, unlike the portrait above. This slot holds the origin
  sketch, which is drawn on Void Black and is meant to dissolve into the
  page. A hairline frame draws a hard rectangle around an image whose
  whole point is that it has no edge. Width is capped to match the
  portrait's 26rem so the two images down the page read as a pair
  instead of the lower one looking twice the size.
*/
.krm-mythos__still {
  position: sticky;
  top: clamp(6rem, 12vh, 9rem);
  max-width: 26rem;
  justify-self: end;
}

.krm-mythos__still img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Pull quote: full width, hard rules above and below. */
.krm-mythos__quote {
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  padding: clamp(2rem, 5vh, 3.5rem) 0;
  margin: 0;
}

.krm-mythos__quote p {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 5vw, 4.5rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

.krm-mythos__cite {
  display: block;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* Numbered sections: heading left, body right. */
.krm-mythos__block {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  border-top: var(--border-thin);
  padding-top: clamp(1.75rem, 4vh, 3rem);
}

.krm-mythos__heading {
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  position: sticky;
  top: clamp(6rem, 12vh, 9rem);
  align-self: start;
}

/* FAQ */
.krm-faq__list {
  display: flex;
  flex-direction: column;
}

/* Native details accordion: zero JS, answers always in the HTML. */
.krm-faq__row {
  border-top: var(--border-thin);
}

.krm-faq__row:last-child {
  border-bottom: var(--border-thin);
}

.krm-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  padding: clamp(1rem, 2.5vh, 1.5rem) 0;
  list-style: none;
  transition: color var(--transition);
}

.krm-faq__summary::-webkit-details-marker {
  display: none;
}

.krm-faq__summary:hover,
.krm-faq__row[open] .krm-faq__summary {
  color: var(--acid-lime);
}

.krm-faq__question {
  font-size: clamp(1rem, 2vw, 1.375rem);
  letter-spacing: 0.01em;
  margin: 0;
}

/* Brutalist plus that becomes a minus. Squares only, no icons. */
.krm-faq__marker {
  position: relative;
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
}

.krm-faq__marker::before,
.krm-faq__marker::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.krm-faq__marker::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.krm-faq__marker::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  transition: opacity var(--transition);
}

.krm-faq__row[open] .krm-faq__marker::after {
  opacity: 0;
}

.krm-faq__answer {
  max-width: 62ch;
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  font-size: 0.875rem;
  line-height: 1.85;
}

/* Closing image: full bleed as a deliberate break, capped height. */
.krm-mythos__bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}

.krm-mythos__bleed img {
  width: 100%;
  max-height: 70svh;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .krm-mythos__intro,
  .krm-mythos__block,
  .krm-mythos__split {
    grid-template-columns: 1fr;
  }

  .krm-mythos__portrait,
  .krm-mythos__still,
  .krm-mythos__heading {
    position: static;
  }

  .krm-mythos__still {
    max-width: 32rem;
  }

  .krm-mythos__portrait {
    max-width: 32rem;
  }

  .krm-mythos__body--offset {
    margin-left: 0;
  }
}

/* ---------- 50 | VAULT (THE ARCHIVE) ---------- */

/*
  The FOMO engine. Hard-bordered grid of sold-out history.
  Lime appears ONLY as the SOLD notification badge, which the
  identity rules explicitly permit (notification badges).
*/

.krm-vault {
  background-color: var(--void-black);
  padding: var(--section-y-lg) var(--gutter) var(--section-y);
}

.krm-vault__title {
  font-size: clamp(3.5rem, 12vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  border-bottom: var(--border-thin);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
}

/* Collapsed 1px shared borders: gap 1px trick over titanium */
/*
  Hairlines come from the cells, not from the container.

  This used to be a white container showing through a 1px gap, which is
  a common trick and works only while the last row is full. With four
  columns and five pieces, the four empty slots rendered as a large
  white block. The grid must not assume the item count divides evenly.

  Now the container is Void Black and each cell draws its own 1px
  outline via box-shadow. Adjacent shadows meet inside the gap and read
  as a single line, and empty space stays black because there is no
  cell there to draw anything.
*/
.krm-vault__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--void-black);
}

.krm-vault__cell {
  background-color: var(--void-black);
  box-shadow: 0 0 0 1px var(--titanium-white);
  padding: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.krm-vault__frame {
  position: relative;
  border: var(--border-thin);
  overflow: hidden;
}

.krm-vault__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform var(--transition);
}

.krm-vault__cell:hover .krm-vault__thumb {
  transform: scale(1.05);
}

/*
  Status badge. The label and whether it appears at all are set per
  artifact in WordPress, on the Status Badge field.

  States are separated by fill and weight, never by a new colour. The
  palette stays at three values, so a LIVE piece reads differently from
  a SOLD one without inventing an orange.

    sold      solid lime, the loudest, because it is the final word
    live      lime outline, open and active
    reserved  white outline, held but not gone
    coming    white outline at low alpha, not yet real
*/
.krm-vault__badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--acid-lime);
  color: var(--void-black);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  padding: 0.375rem 0.75rem;
}

.krm-vault__badge--live {
  background-color: var(--void-black);
  color: var(--acid-lime);
  box-shadow: inset 0 0 0 1px var(--acid-lime);
}

.krm-vault__badge--reserved {
  background-color: var(--void-black);
  color: var(--titanium-white);
  box-shadow: inset 0 0 0 1px var(--titanium-white);
}

.krm-vault__badge--coming {
  background-color: var(--void-black);
  color: rgba(245, 245, 247, 0.6);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.35);
}

.krm-vault__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.krm-vault__item-title {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  letter-spacing: 0.03em;
}

.krm-vault__item-line {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.krm-vault__empty {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-transform: uppercase;
  border: var(--border-thin);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
}

@media (max-width: 1000px) {
  .krm-vault__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .krm-vault__grid { grid-template-columns: 1fr; }
}

/* ---------- 03.1 | GLOBAL CHROME: ROUTE INDEX ---------- */

/* Top-right route index. Not a nav bar: no background, no border,
   three labels mirroring the seal. Hover = lime (interactive). */
.krm-nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* 0.8125rem, matched exactly by .krm-footer__link below. If either
   changes, change both, or the header and footer stop agreeing. */
.krm-nav__link {
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.krm-nav__link[aria-current="page"] {
  border-bottom: 1px solid var(--acid-lime);
  color: var(--acid-lime);
}

/* Footer route index */
.krm-footer__nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}

.krm-footer__link {
  font-size: 0.8125rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .krm-nav {
    gap: 0.875rem;
  }

  .krm-nav__link {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
  }

  .krm-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* ---------- 60 | CONTACT (DIRECT LINE) ---------- */

/*
  Terminal-plain. The GHL form is a third-party iframe, so we own the
  frame and the surrounding rhythm, not the form's internals.
*/

.krm-contact {
  min-height: calc(100svh - 12rem);
  background-color: var(--void-black);
  padding: var(--section-y-lg) var(--gutter) var(--section-y);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 3.5rem);
}

.krm-contact__head {
  border-bottom: var(--border-thin);
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.krm-contact__title {
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.krm-contact__intro {
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  max-width: 46ch;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.8;
}

.krm-contact__frame {
  border: var(--border-thin);
  max-width: 46rem;
}

.krm-contact__embed {
  display: block;
  width: 100%;
  min-height: 40rem;
  border: 0;
}

.krm-contact__fallback {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .krm-contact__embed { min-height: 46rem; }
}

/* ---------- 55 | ARTIFACT DETAIL (/vault/{slug}) ---------- */

/* Grid cells are links now: kill inherited link styling, keep the plate. */
.krm-vault__link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: inherit;
}

.krm-vault__link:hover {
  color: inherit;
}

.krm-vault__link:hover .krm-vault__item-title {
  color: var(--acid-lime);
}

.krm-vault__pagination {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.krm-vault__pagination a,
.krm-vault__pagination .current {
  border: var(--border-thin);
  padding: 0.5rem 0.875rem;
  margin-right: 0.5rem;
  display: inline-block;
}

.krm-vault__pagination .current {
  border-color: var(--acid-lime);
  color: var(--acid-lime);
}

.krm-artifact {
  background-color: var(--void-black);
  padding: var(--section-y-lg) var(--gutter) var(--section-y);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 4.5rem);
}

.krm-artifact__back {
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.krm-artifact__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: var(--border-thin);
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.krm-artifact__title {
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* Status line on the artifact page. Mirrors the Vault badge states so
   the grid and the detail page can never contradict each other. */
.krm-artifact__status {
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  border: var(--border-thin);
  padding: 0.5rem 0.875rem;
  white-space: nowrap;
}

.krm-artifact__status--sold {
  background-color: var(--acid-lime);
  border-color: var(--acid-lime);
  color: var(--void-black);
}

.krm-artifact__status--live {
  border-color: var(--acid-lime);
  color: var(--acid-lime);
}

.krm-artifact__status--coming {
  border-color: rgba(245, 245, 247, 0.35);
  color: rgba(245, 245, 247, 0.6);
}

.krm-artifact__hero {
  border: var(--border-thin);
}

.krm-artifact__hero-img,
.krm-artifact__detail img {
  width: 100%;
  height: auto;
  display: block;
}

.krm-artifact__detail {
  border: var(--border-thin);
}

/* Spec table: clinical, borrowed from the material story rhythm. */
.krm-artifact__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  background-color: var(--titanium-white);
  border: var(--border-thin);
}

.krm-artifact__spec {
  background-color: var(--void-black);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.krm-artifact__spec-label {
  font-size: 0.625rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.krm-artifact__spec-value {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.125rem, 2.5vw, 1.75rem);
  text-transform: uppercase;
  line-height: 1;
}

/*
  Story plate. Same pattern as the homepage ORIGIN block, and for the
  same reason: the spec bar above it runs full width with borders, so
  bare left aligned prose underneath belongs to nothing.

  Full width, bordered, eyebrow with a rule, and the reading column
  centred inside it. The two sections of the site that carry prose now
  look like the same system.
*/
.krm-artifact__story {
  border: var(--border-thin);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  text-align: center;
}

.krm-artifact__story::before {
  content: "ON THIS PIECE";
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--titanium-white);
  border-bottom: var(--border-thin);
  padding-bottom: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-align: left;
}

.krm-artifact__story p {
  max-width: 52ch;
  margin-inline: auto;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: rgba(245, 245, 247, 0.86);
}

.krm-artifact__story p + p {
  margin-top: 1.25em;
}

/* Closing line lands as a statement, matching the homepage intro. */
.krm-artifact__story p:last-child {
  max-width: 24ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: var(--border-thin);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--titanium-white);
}

.krm-artifact__foot {
  border-top: var(--border-thin);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.krm-artifact__closing {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.krm-artifact__cta {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: var(--border-thin);
  padding: 0.875rem 1.5rem;
  transition: background-color var(--transition), color var(--transition);
}

.krm-artifact__cta:hover {
  background-color: var(--acid-lime);
  border-color: var(--acid-lime);
  color: var(--void-black);
}