/* ============================================
   KROMSKY CORE | Reset + Tokens
   Version: 3.13.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);

  /* 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 ---------- */

/*
  Contract (07_kromsky_design.md):
  - Viewport discards traditional top navigation. Only the SK
    seal (global chrome, outside this section) sits top left.
  - Sculpture asset aligns far right and bleeds off the screen
    edge. The H1 anchors bottom left, overlapping the negative
    space and the asset itself.
  - GSAP rule: .krm-hero__asset-frame, .krm-hero__h1, and
    .krm-hero__subhead are reveal targets. Zero CSS transforms
    on them. Overlap is built with grid placement + z-index,
    the bleed with a negative margin.
  - .krm-hero__h1-mask clips the H1 rise (liquid reveal).
*/

.krm-hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--void-black);
  /* No right padding: the asset must reach and pass the edge. */
  padding: clamp(6rem, 13vh, 9rem) 0 clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 5vw, 5rem);
  display: flex;
}

.krm-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Sculpture: far right, cut by the viewport edge */
.krm-hero__asset-frame {
  grid-column: 6 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  z-index: 1;
  width: min(63vw, 980px);
  margin-right: -8vw; /* the bleed. body overflow-x hidden absorbs it */
}

.krm-hero__asset {
  width: 100%;
  max-height: 93svh;
  object-fit: contain;
  object-position: right center;
}

/* Copy block: bottom left, stacked above the asset */
.krm-hero__copy {
  grid-column: 1 / span 9;
  grid-row: 2;
  align-self: end;
  z-index: 2;
  padding-right: clamp(1rem, 3vw, 3rem);
}

/* Clip container for the GSAP rise. Only overflow lives here. */
.krm-hero__h1-mask {
  overflow: hidden;
}

.krm-hero__h1 {
  font-size: clamp(3.25rem, 11vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

/* Unusually small against the massive H1. Blunt. */
.krm-hero__subhead {
  max-width: 34ch;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  padding-left: 1rem;
  border-left: var(--border-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

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

@media (max-width: 900px) {
  .krm-hero {
    padding-left: 1.25rem;
    padding-bottom: 2.5rem;
  }

  .krm-hero__grid {
    grid-template-rows: auto auto;
    align-content: space-between;
  }

  .krm-hero__asset-frame {
    grid-column: 3 / -1;
    grid-row: 1;
    align-self: start;
    width: 82vw;
    margin-right: -14vw;
  }

  .krm-hero__asset {
    max-height: 58svh;
  }

  .krm-hero__copy {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-right: 1.25rem;
  }

  .krm-hero__h1 {
    font-size: clamp(2.75rem, 14vw, 5.5rem);
  }
}

/* ---------- 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: clamp(5rem, 14vh, 11rem) clamp(1.25rem, 5vw, 5rem);
  border-top: var(--border-thin);
}

.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__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) clamp(1.25rem, 3vw, 2.5rem);
  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. */
.krm-topbar--scrolled .krm-seal {
  width: clamp(3rem, 4vw, 4rem);
}

.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) clamp(1.25rem, 5vw, 5rem);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  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: clamp(6rem, 15vh, 10rem) clamp(1.25rem, 5vw, 5rem);
}

.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: clamp(5rem, 12vh, 10rem) clamp(1.25rem, 5vw, 5rem);
  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: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 5vw, 5rem);
  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 | MANIFESTO (THE MYTHOS) ---------- */

/*
  High-end editorial. Extreme size contrast: clinical Inter
  paragraphs against a massive Oswald title and pull quote.
  Full-bleed imagery escapes the column. No Acid Lime here.
*/

.krm-manifesto {
  background-color: var(--void-black);
  padding: clamp(6rem, 16vh, 12rem) clamp(1.25rem, 12vw, 16rem) clamp(5rem, 12vh, 9rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vh, 7rem);
  overflow-x: clip;
}

.krm-manifesto__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);
}

/* Clinical, unusually small, asymmetric column */
.krm-manifesto__text {
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.krm-manifesto__text--offset {
  align-self: flex-end;
  text-align: left;
}

/* Full bleed: escapes the section padding to the viewport edges */
.krm-manifesto__bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.krm-manifesto__bleed img {
  width: 100%;
  max-height: 88svh;
  object-fit: cover;
}

/* Massive Oswald pull quote */
.krm-manifesto__quote {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 6vw, 5.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-left: 4px solid var(--titanium-white);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 24ch;
}

@media (max-width: 700px) {
  .krm-manifesto {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .krm-manifesto__text--offset {
    align-self: flex-start;
  }
}

/* ---------- 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: clamp(6rem, 16vh, 12rem) clamp(1.25rem, 5vw, 5rem) clamp(5rem, 12vh, 9rem);
}

.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 */
.krm-vault__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--titanium-white);
  border: var(--border-thin);
}

.krm-vault__cell {
  background-color: var(--void-black);
  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);
}

/* Notification badge: permitted lime */
.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__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);
}

.krm-nav__link {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  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.6875rem;
  letter-spacing: 0.3em;
  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: clamp(7rem, 16vh, 12rem) clamp(1.25rem, 5vw, 5rem) clamp(5rem, 12vh, 9rem);
  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: clamp(7rem, 16vh, 12rem) clamp(1.25rem, 8vw, 10rem) clamp(5rem, 12vh, 9rem);
  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;
}

.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__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;
}

.krm-artifact__story {
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.9;
}

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

.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);
}