/* ==========================================================================
   Luiz theme — tokens and base styles.
   Frozen contract: themes/luiz/SPEC.md. Tokens come from DESIGN.md via the
   SPEC token map; components consume variables only — never inline hex.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Color primitives (DESIGN.md `colors`, SPEC §2). */
  --color-canvas: #000000;
  --color-surface-soft: #0d0d0d;
  --color-surface-card: #1a1a1a;
  --color-surface-elevated: #262626;
  --color-hairline: #3c3c3c;
  --color-ink: #ffffff;
  --color-body: #bbbbbb;
  --color-body-strong: #e6e6e6;
  --color-muted: #7e7e7e;

  /* Signature accent — role frozen, values pending Luiz (SPEC §9).
     Marker-only: short 4px dividers and identity moments, never fills or
     CTA surfaces. Grayscale placeholders until Luiz picks the stops. */
  --signature-1: #ffffff;
  --signature-2: #bbbbbb;
  --signature-3: #7e7e7e;

  /* Semantic states (authored gap — SPEC §6). */
  --color-success: #0fa336;
  --color-warning: #f4b400;
  --color-error: #e5484d;

  /* Typography (DESIGN.md `typography`, Inter substitute per ADR). */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --weight-display: 700;
  --weight-regular: 400;
  --weight-body: 300;
  --tracking-display: -0.5px;
  --tracking-label: 1.5px;
  --tracking-caption: 0.5px;

  /* Fluid display sizes between the 375–1440px viewport window. */
  --type-display-xl: clamp(3rem, 2.296rem + 3.005vw, 5rem);
  --type-display-lg: clamp(2.125rem, 1.641rem + 2.066vw, 3.5rem);
  --type-display-md: clamp(1.625rem, 1.317rem + 1.315vw, 2.5rem);
  --type-display-sm: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);

  /* Fixed sizes at and below the title tier. */
  --type-title-lg: 1.5rem;
  --type-title-md: 1.25rem;
  --type-title-sm: 1.125rem;
  --type-body: 1rem;
  --type-body-sm: 0.875rem;
  --type-label: 0.875rem;
  --type-nav: 0.875rem;
  --type-caption: 0.75rem;

  /* Hero logo wordmark (hero-logo component, SPEC §4). Fluid between the
     375–1440px window like the display tier. */
  --type-hero-logo: clamp(1.75rem, 0.9rem + 3.6vw, 2.75rem);

  /* Spacing (DESIGN.md `spacing`). */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --space-section: 96px;

  /* Radius (DESIGN.md `rounded`): sharp by default. */
  --radius: 0;
  --radius-full: 9999px;

  /* Layout: hybrid grid — full-bleed photo bands, constrained columns. */
  --column: 56rem;
  --measure: 40rem;
  --gutter: 1.25rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: 1.5;
  /* The Light cut of the body voice is the editorial signature (SPEC §1.3). */
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-ink);
  color: var(--color-canvas);
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  color: var(--color-ink);
  font-weight: var(--weight-display);
  margin: 0;
}

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

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

p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--color-canvas);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.skip:focus {
  top: 0.5rem;
}

.draft-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
  padding: 0.45rem 0.75rem;
  background: var(--color-surface-elevated);
  color: var(--color-body-strong);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  text-align: center;
  text-transform: uppercase;
}

.draft-banner__spinner {
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: draft-banner-spin 0.7s linear infinite;
}

.draft-banner:has(.draft-banner__sizes:disabled) .draft-banner__spinner {
  display: inline-block;
}

@keyframes draft-banner-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .draft-banner__spinner {
    animation: none;
  }
}

.draft-banner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.draft-banner__device {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.draft-banner__icon {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
}

.draft-banner__sizes,
.draft-banner__stop {
  margin: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.draft-banner__sizes {
  padding: 0.1rem 0.3rem;
  background: var(--color-canvas);
  color: var(--color-ink);
  color-scheme: dark;
  text-transform: none;
}

.draft-banner__sizes:disabled {
  opacity: 0.35;
  cursor: default;
}

.draft-banner__stop {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem;
  cursor: pointer;
}

.draft-banner__stop:disabled {
  opacity: 0.35;
  cursor: default;
}

body.is-preview-framed {
  overflow: hidden;
}

body.is-preview-framed > :not(.draft-banner):not(.preview-stage) {
  display: none;
}

.preview-stage {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0.75rem 0;
  overflow: hidden;
  background: #111;
}

.preview-frame {
  position: relative;
  overflow: hidden;
}

.preview-stage iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  background: #000;
  transform-origin: top left;
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

.site-header,
.site-footer {
  width: min(var(--column), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-hairline);
}

.site-name,
.site-nav,
.locale-switcher {
  display: flex;
  flex: none;
  align-items: center;
  width: max-content;
}

.site-name {
  color: var(--color-ink);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
}

/* Uploaded mark in the home link. Height follows the display-sm step so the
   wordmark stays in the bar; width keeps the file's aspect (SPEC §6). */
.site-name__logo {
  display: block;
  height: 1.125rem;
  width: auto;
}

/* The wrapper is not a box: logo, nav, and locale are the header's three columns. */
.site-header__links {
  display: contents;
}

.site-nav {
  flex-wrap: nowrap;
  gap: var(--space-xs);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--color-body);
  font-size: var(--type-nav);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caption);
  line-height: 1.2;
  white-space: nowrap;
}

/* Active page marker borrows the category-tab underline (SPEC §4). */
.site-nav a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.locale-switcher {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.locale-switcher summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.locale-switcher__current {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.locale-switcher summary::-webkit-details-marker {
  display: none;
}

.locale-switcher summary::after {
  content: "";
  border-inline: var(--space-xxs) solid transparent;
  border-top: var(--space-xxs) solid currentColor;
}

.locale-switcher nav {
  position: absolute;
  inset-inline-end: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
}

.locale-switcher a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: var(--space-md);
  color: var(--color-body);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.locale-switcher a[aria-current="true"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-xl);
  padding: var(--space-md) 0 var(--space-xxl);
  border-top: 1px solid var(--color-hairline);
}

.site-footer__logos,
.site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-xl);
}

.site-footer__logo {
  display: block;
  height: 1.125rem;
  width: auto;
}

.site-footer__text {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-caption);
}

.site-footer__anchor,
.social-links a {
  color: var(--color-body);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Page bands
   -------------------------------------------------------------------------- */

main {
  display: block;
}

.page {
  width: min(var(--column), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding: var(--space-xl) 0 var(--space-xxl);
}

/* Media kit breaks the column. The stage fills the space between the header
   and the footer. Mural and carousel do not scroll. The grid scrolls inside
   that stage. */
.page[data-page="media-kit"] {
  width: 100%;
  margin: 0;
  padding: var(--space-lg);
}

body:has([data-kit-stage]) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

body:has([data-kit-stage]) main {
  flex: 1;
  min-height: 0;
}

.page[data-kit-stage] {
  position: relative;
  height: 100%;
  padding: 0;
}

.page[data-kit-stage] .page-intro {
  display: none;
}

.page-intro {
  max-width: var(--measure);
  font-size: var(--type-title-md);
  font-weight: var(--weight-regular);
  color: var(--color-body-strong);
}

/* --------------------------------------------------------------------------
   Feed: cards
   -------------------------------------------------------------------------- */

.feed {
  display: grid;
  gap: var(--space-xxl);
}

.card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: transparent;
}

/* Introductory text sits above the player. Agenda and media-kit cards
   still use card__body because they are not an intro-plus-player pair. */
.card__header,
.card__body {
  padding: var(--space-lg);
}

.card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.yt-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-card);
}

.yt-player picture {
  position: absolute;
  inset: 0;
}

.yt-player img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sp-player {
  border-radius: 0;
  line-height: 0;
}

.sp-player iframe {
  display: block;
  box-sizing: content-box;
  width: 100%;
  border: 0;
  border-radius: 0;
  /* The page declares color-scheme: dark. Spotify's embed does not, so the
     browser paints an opaque white canvas behind the widget's rounded
     corners and the surface color never shows through. normal matches the
     embed and keeps that canvas transparent. */
  color-scheme: normal;
  background: transparent;
}

.sp-player--compact iframe {
  height: 152px;
}

.sp-player--expanded iframe {
  height: 352px;
}

.sc-player {
  border-radius: 0;
  line-height: 0;
}

.sc-player iframe {
  display: block;
  box-sizing: content-box;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sc-player--track iframe {
  height: 166px;
}

.sc-player--playlist iframe {
  height: 450px;
}

.sc-player--visual iframe {
  height: 320px;
}

/* Instagram renders a white card with no dark-mode parameter. It sits on a
   soft dark island inside the card, centered at the 326–540px embed width,
   so the widget reads as a framed print instead of an unstyled canvas. */
.ig-player {
  display: flex;
  justify-content: center;
  padding: var(--space-md);
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-hairline);
}

.ig-player iframe {
  display: block;
  width: 100%;
  max-width: 540px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.yt-player__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.85);
  cursor: pointer;
}

.card h2 {
  font-size: var(--type-title-lg);
  line-height: 1.3;
  margin-top: var(--space-xxs);
}

.card__header h2 {
  margin-top: 0;
}

.card p + p {
  margin-top: var(--space-xs);
}

.card--text .card__body > p:first-of-type {
  font-size: var(--type-title-sm);
  font-weight: var(--weight-regular);
  color: var(--color-body-strong);
}

.kicker {
  margin: 0 0 var(--space-xxs);
  color: var(--color-muted);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.meta {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caption);
}

/* Uppercase tracked action links with the trailing chevron (text-link). */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.links a,
.ticket {
  color: var(--color-ink);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.links a::after,
.ticket::after {
  content: " \2192";
}

/* Platform link: same label voice as text-link, with ↗ because it leaves the site. */
.outbound {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--type-caption);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.outbound::after {
  content: " \2197";
}

/* Featured items are full-bleed photo bands (model-card analog): the photo
   breaks out of the column, the body stays inside it. */
.card--featured {
  border-color: transparent;
  background: transparent;
}

.card--featured .card__media {
  margin-inline: calc(50% - 50vw);
}

.card--featured .card__media img {
  aspect-ratio: 21 / 9;
}

.card--featured .card__body {
  padding-inline: 0;
}

.card--featured h2 {
  font-size: var(--type-display-md);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.empty {
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Agenda: spec grid (spec-cell analog, SPEC §4)
   -------------------------------------------------------------------------- */

.card--spec {
  border-color: transparent;
}

.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.spec-cell {
  background: var(--color-surface-soft);
  padding: var(--space-lg);
}

.spec-cell .value {
  font-size: var(--type-title-lg);
  font-weight: var(--weight-display);
  line-height: 1.3;
  color: var(--color-ink);
}

.spec-cell .label {
  margin-top: var(--space-xxs);
  color: var(--color-muted);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ticket {
  display: inline-block;
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Bio
   -------------------------------------------------------------------------- */

.bio__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Bias toward the upper-middle of the frame to protect the face crop. */
  object-fit: cover;
  object-position: 50% 20%;
}

.bio-name {
  margin-top: var(--space-xl);
  font-size: var(--type-display-md);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-ink);
}

.headline {
  margin-top: var(--space-xs);
  max-width: var(--measure);
  font-size: var(--type-title-md);
  font-weight: var(--weight-regular);
  color: var(--color-body-strong);
}

.bio-prose {
  max-width: var(--measure);
  margin-top: var(--space-lg);
}

.bio-prose p + p {
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Media kit photo mural (ADR-2026-10-09-media-kit-mural.md)
   -------------------------------------------------------------------------- */

/*
 * The viewport clips the board. Pan and zoom live on a transform so the
 * page has no scrollbar. The board stays at least as large as a contain
 * fit and no larger than a capped cover zoom.
 */
.mural {
  height: 100%;
}

.mural__viewport {
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.mural__viewport:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.mural__viewport.is-dragging {
  cursor: grabbing;
}

.mural__viewport[data-mural-board="desktop"] {
  display: none;
}

.mural__board {
  position: relative;
  transform-origin: 0 0;
  /* The board is the canvas: a photo may be composed past its edge, and the
     viewport crops it there. */
  overflow: hidden;
}

.mural__board--desktop {
  /* Board 2688x1512; the wide reference viewport shows most of the frame. */
  width: 140vw;
  min-width: 100vw;
  min-height: 100svh;
  aspect-ratio: 2688 / 1512;
}

.mural__board--mobile {
  /* Board 780x1688; the phone reference viewport shows most of the frame. */
  width: 200vw;
  min-width: 100vw;
  min-height: 100svh;
  aspect-ratio: 780 / 1688;
}

.mural__photo {
  position: absolute;
  left: var(--mural-left);
  top: var(--mural-top);
  width: var(--mural-width);
  padding: 0;
  border: none;
  background: none;
  cursor: grab;
}

.mural__photo img {
  display: block;
  width: 100%;
  aspect-ratio: var(--mural-aspect);
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.mural__label {
  position: absolute;
  left: 0;
  bottom: var(--space-sm);
  padding: var(--space-xxs) var(--space-sm);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  opacity: 0;
  transition: opacity 160ms ease;
}

.mural__photo:hover .mural__label,
.mural__photo:focus-visible .mural__label {
  opacity: 1;
}

/* Touch has no hover: the label is always visible there. */
@media (hover: none) {
  .mural__label {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mural__label {
    transition: none;
  }
}

@media (min-width: 768px) {
  .mural__viewport[data-mural-board="mobile"] {
    display: none;
  }

  .mural__viewport[data-mural-board="desktop"] {
    display: block;
  }
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-content: start;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: var(--space-lg);
  overflow: auto;
  list-style: none;
}

.kit-grid > li {
  display: flex;
  align-items: center;
  min-width: 0;
}

@media (min-width: 768px) {
  .kit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1920px) {
  .kit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 2560px) {
  .kit-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.kit-grid__photo,
.kit-carousel__photo {
  display: grid;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}

.kit-grid__photo {
  position: relative;
  display: block;
}

.kit-grid__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.kit-carousel__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.kit-grid__label,
.kit-carousel__label {
  font-size: var(--type-body-sm);
}

.kit-grid__label {
  position: absolute;
  left: 0;
  bottom: var(--space-sm);
  padding: var(--space-xxs) var(--space-sm);
  background: var(--color-canvas);
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 160ms ease;
}

.kit-grid__photo:hover .kit-grid__label,
.kit-grid__photo:focus-visible .kit-grid__label {
  opacity: 1;
}

@media (hover: none) {
  .kit-grid__label {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kit-grid__label {
    transition: none;
  }
}

.kit-carousel {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.kit-carousel.is-dragging {
  cursor: grabbing;
}

.kit-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(640px, 42vw, 62vh);
  aspect-ratio: 1;
  border: 2px solid var(--color-ink);
  background: var(--color-canvas);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%) scale(0.55);
  transition: transform 220ms ease, opacity 220ms ease;
}

.kit-carousel__slide[data-slot="-2"] {
  opacity: 1;
  z-index: 1;
  transform: translate(calc(-50% - 118%), -50%) scale(0.58);
}

.kit-carousel__slide[data-slot="-1"] {
  opacity: 1;
  z-index: 2;
  transform: translate(calc(-50% - 68%), -50%) scale(0.76);
}

.kit-carousel__slide[data-slot="0"] {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.kit-carousel__slide[data-slot="1"] {
  opacity: 1;
  z-index: 2;
  transform: translate(calc(-50% + 68%), -50%) scale(0.76);
}

.kit-carousel__slide[data-slot="2"] {
  opacity: 1;
  z-index: 1;
  transform: translate(calc(-50% + 118%), -50%) scale(0.58);
}

.kit-carousel__photo,
.kit-carousel__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.kit-carousel__photo {
  overflow: hidden;
}

.kit-carousel__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: scale(var(--cover, 1));
  transition: transform 220ms ease;
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 767px) {
  .kit-carousel__slide {
    width: min(640px, 78vw);
    aspect-ratio: 3 / 5;
  }
}

.kit-carousel__slide.is-active .kit-carousel__photo img {
  transform: scale(1);
}

.kit-carousel__label {
  position: absolute;
  left: 0;
  bottom: var(--space-sm);
  padding: var(--space-xxs) var(--space-sm);
  background: var(--color-canvas);
  color: var(--color-ink);
  opacity: 0;
  transition: opacity 160ms ease;
}

.kit-carousel__slide.is-active .kit-carousel__photo:hover .kit-carousel__label,
.kit-carousel__slide.is-active .kit-carousel__photo:focus-visible .kit-carousel__label {
  opacity: 1;
}

.kit-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  transform: translateY(-50%);
  cursor: pointer;
}

.kit-carousel__arrow svg {
  width: 2rem;
  height: 2rem;
}

.kit-carousel__arrow--prev {
  left: var(--space-md);
}

.kit-carousel__arrow--next {
  right: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  .kit-carousel__slide,
  .kit-carousel__photo img,
  .kit-carousel__label {
    transition: none;
  }
}

.button.kit-get {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  background: var(--color-ink);
  color: var(--color-canvas);
}

.button.kit-get:active {
  background: var(--color-canvas);
  color: var(--color-ink);
}

.page[data-kit-stage] .kit-get {
  position: absolute;
}

.kit-get[hidden] {
  display: none;
}


/* Request dialog. Grid and carousel open it from a photo. The mural opens
   it from the floating Get images button. The form reuses .field, .consent,
   and .button. */
.mural-request {
  width: min(32rem, calc(100vw - 2 * var(--space-lg)));
  padding: var(--space-xl);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-surface-soft);
  color: var(--color-body-strong);
}

.mural-request::backdrop {
  background: rgb(0 0 0 / 70%);
}

.mural-request h2 {
  font-size: var(--type-display-sm);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.mural-request p {
  margin-top: var(--space-sm);
  max-width: var(--measure);
}

.mural-request__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  margin: 0;
}

.mural-request__close button {
  padding: var(--space-xs);
  min-height: 48px;
  min-width: 48px;
  border: none;
  background: none;
  color: var(--color-ink);
  font-size: var(--type-title-lg);
  line-height: 1;
  cursor: pointer;
}

.mural-request__form {
  margin-top: var(--space-lg);
}

.mural-request__status {
  min-height: 1.5em;
  margin-top: var(--space-sm);
  color: var(--color-body-strong);
  font-size: var(--type-body-sm);
}

.mural-request .button {
  width: 100%;
}

.field {
  display: block;
  margin: 0 0 var(--space-lg);
  color: var(--color-body-strong);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-regular);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-xxs);
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-surface-card);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Focus thickens the hairline to white without layout shift. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-ink);
}

/* Native validation, no JS: invalid input gets the error border. */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

.consent {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin: 0 0 var(--space-lg);
}

.consent input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-ink);
}

/* Primary CTA: 1px ink outline, uppercase tracked label, 48px tall. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-md) 32px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--type-label);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.button:active {
  background: var(--color-ink);
  color: var(--color-canvas);
}

/* --------------------------------------------------------------------------
   Hero exposure effect (behavior frozen in ADR-2026-09-30; colors re-tokenized)
   -------------------------------------------------------------------------- */

.hero-exposure {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-canvas);
}

.hero-exposure__still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Height-fit letterboxing matches the shader's fit, not a cover crop. */
  object-fit: contain;
  object-position: center;
  /* Vertical feather only. The sides stay solid; the top and bottom
     fade so the portrait dissolves into the page. The ramp holds a
     transparent plateau across the outer 40% of the fade zone. */
  --hero-edge-fade: clamp(96px, 14vmin, 224px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--hero-edge-fade) * 0.4), #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent calc(100% - var(--hero-edge-fade) * 0.4), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--hero-edge-fade) * 0.4), #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent calc(100% - var(--hero-edge-fade) * 0.4), transparent 100%);
}

.hero-exposure__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Same vertical feather as the still, so photo and effect dim together. */
  --hero-edge-fade: clamp(96px, 14vmin, 224px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--hero-edge-fade) * 0.4), #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent calc(100% - var(--hero-edge-fade) * 0.4), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--hero-edge-fade) * 0.4), #000 var(--hero-edge-fade), #000 calc(100% - var(--hero-edge-fade)), transparent calc(100% - var(--hero-edge-fade) * 0.4), transparent 100%);
  /* Desktop owns touch so a touchscreen pull is not a page scroll.
     Mobile restores native vertical scrolling; see the 767px rule. */
  touch-action: none;
}

@media (max-width: 767px) {
  .hero-exposure__canvas {
    touch-action: pan-y;
  }
}


/* Failure fallback: keep the still photo, drop the dead canvas. */
.hero-exposure--failed .hero-exposure__canvas {
  display: none;
}

/* While the hero is on screen the header steps aside; the hero module reveals
   it as a fixed overlay once the hero scrolls away. Gated on .hero-js so
   browsers without JavaScript keep the normal in-flow header. */
html.hero-js body.home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: auto;
  margin-inline: 0;
  padding-block: 0.375rem;
  padding-inline: max(var(--gutter), calc((100% - var(--column)) / 2));
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
  opacity: 0;
  transform: translateY(-0.35rem);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

html.hero-js body.home.hero-ready.hero-scrolled .site-header {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.hero-js body.home .site-header {
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Hero logo (identity moment inside the hero, SPEC §4)
   Wordmark: display voice — uppercase, weight 700, negative tracking. The
   "X" is a stroked outline; the RGB-split text shadow and grain overlay are
   the frozen glitch identity moment (values pending the signature accent,
   SPEC §9). Fades in once, then bites on a random cadence (hero-logo.js).
   -------------------------------------------------------------------------- */

.hero-logo {
  position: absolute;
  z-index: 2;
  /* Mobile: centered in the black band above the head, wide enough
     to read as the mark rather than a caption. */
  width: clamp(14rem, 72vw, 22rem);
  max-width: 90vw;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  /* Entrance: blur-to-sharp fade after the hero settles (demo: 420ms). */
  opacity: 0;
  filter: blur(12px);
  animation: hero-logo-in 1s ease-out 0.42s forwards;
}

@media (min-width: 768px) {
  .hero-exposure__still {
    object-position: right center;
  }

  /* The still sits under the canvas. While the effect is running, the
     edge fade would reveal a second, misaligned copy of the portrait. */
  html.hero-js .hero-exposure:not(.hero-exposure--failed) .hero-exposure__still {
    visibility: hidden;
  }

  .hero-logo {
    /* Hung from the left, vertically centered. Width keeps growing with
       the viewport instead of stopping at a small cap. */
    left: clamp(1.5rem, 3vw, 3.5rem);
    top: 50%;
    width: clamp(16rem, 32vw, 72rem);
    max-width: 38%;
    transform: translateY(-50%);
  }
}

@keyframes hero-logo-in {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.hero-logo__scan {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-logo__wordmark {
  font-size: var(--type-hero-logo);
  font-weight: var(--weight-display);
  line-height: 1;
  /* −0.04em of the wordmark size, expressed from the size token itself. */
  letter-spacing: calc(var(--type-hero-logo) * -0.04);
  text-transform: uppercase;
  color: var(--color-ink);
  /* RGB split — identity-moment effect values, not surface colors. */
  text-shadow:
    rgba(255, 80, 120, 0.35) -1px 0,
    rgba(100, 180, 255, 0.35) 1px 0,
    rgba(255, 255, 255, 0.22) 0 0 18px,
    rgba(181, 140, 255, 0.18) 0 0 42px;
}

.hero-logo__x {
  color: transparent;
  -webkit-text-stroke: 0.045em var(--color-ink);
}

.hero-logo__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero-logo__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

@media (min-width: 768px) {
  .hero-logo__image {
    width: 100%;
    max-height: none;
    height: auto;
  }

  .hero-logo__wordmark {
    font-size: clamp(3rem, 6.5vw, 8rem);
  }
}

/* Glitch bite: hard clip slices with a skew, stepped for the digital bite.
   Class is applied by hero-logo.js on a random cadence (140–360ms). */
.hero-logo--glitch .hero-logo__wordmark,
.hero-logo--glitch .hero-logo__image {
  text-shadow:
    rgba(255, 60, 90, 0.75) -3px 0,
    rgba(80, 160, 255, 0.75) 3px 0,
    rgba(255, 255, 255, 0.3) 0 0 18px;
  animation: hero-logo-bite 0.22s steps(2) 1;
}

@keyframes hero-logo-bite {
  0% {
    clip-path: inset(0);
    transform: translate(0) skewX(0);
  }
  25% {
    clip-path: inset(18% 0 55%);
    transform: translate(-3px, 1px) skewX(-2deg);
  }
  50% {
    clip-path: inset(48% 0 12%);
    transform: translate(3px, -1px) skewX(2deg);
  }
  100% {
    clip-path: inset(0);
    transform: translate(0) skewX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .hero-logo--glitch .hero-logo__wordmark,
  .hero-logo--glitch .hero-logo__image {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive (SPEC §8)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .card--featured .card__media img {
    aspect-ratio: 16 / 9;
  }
}