/* Mono: numbered chapters and monospace utility chrome on a dark ground.
 * Prose uses the sans face. The fixed bar reserves its own document space.
 * Accent fills use their own ink. Shared interactions need no family script.
 */
/* ── Web fonts (self-hosted, generated) ──────────────────────────────────
 * Regenerate with `node scripts/fetch-template-fonts.mjs`. The files live in
 * the site's own `fonts/` folder, so a page load reaches no third party.
 * Rules for every approved pair are listed; only the pair named in the brand
 * block is ever requested, and a build copies only that pair's files. */

/* geist-mono-geist */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/geist-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-mono-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* plex-mono-sans */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* redhat-mono-text */
@font-face {
  font-family: 'Red Hat Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/red-hat-mono-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/red-hat-text-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/red-hat-text-normal-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── end web fonts ── */

/* ── Brand parameters (per-site) ── */

:root {
  --color-accent: #dd9a5a;
  --color-on-accent: #1b1008;
  --color-surface: #141110;
  --color-surface-alt: #1f1916;
  --color-text: #f5efe6;
  --color-muted: #c4b6a6;
  --color-border: rgba(245,239,230,.12);
  --color-border-faint: rgba(245,239,230,.06);
  --font-heading: 'IBM Plex Mono', monospace;
  --font-body: 'IBM Plex Sans', sans-serif;
  --scrim: rgba(10,6,4,.6);
}

/* ── end Brand parameters ── */

:root {
  --step--1: .833rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;
  --step-5: 2.488rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-s: 4px;
  --radius-pill: 999px;
  --shadow-float: 0 -8px 32px rgba(0,0,0,.18);
  --container: 1280px;
  --gutter: 40px;
  --section-pad: 96px;
}

/* A stable scrollbar avoids a shift behind the native image dialog. */

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

html {
  scrollbar-gutter: stable;
  scroll-padding-top: 88px;
  scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--color-surface);
}

body {
  margin: 0;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,p,figure,ul,dl,dd {
  margin: 0;
}

h1,h2,h3 {
  font-weight: 600;
  line-height: 1.12;
  overflow-wrap: anywhere;
  hyphens: auto;
  hyphenate-limit-chars: 16 5 4;
}

a {
  color: inherit;
  text-underline-offset: .2em;
}

button,input,textarea,select {
  font: inherit;
}

button,a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

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

button,input,textarea {
  border-radius: 0;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

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

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: none;
}

/* Inner pages keep a compact header; the home chapter index follows its opening. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 72px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  width: min(var(--container),calc(100% - var(--gutter)*2));
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 12px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: .14em;
}

.site-header__mark {
  width: 10px;
  height: 10px;
  background: var(--color-accent);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.nav__index {
  color: var(--color-muted);
  font-size: 10px;
}

.nav__link:hover,.nav__link[aria-current] {
  color: var(--color-accent);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.nav__toggle-bars,.nav__toggle-bars::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.nav__toggle-bars {
  position: relative;
  margin: auto;
}

.nav__toggle-bars::after {
  content: '';
  position: absolute;
  top: 6px;
}

main {
  padding-top: 0;
}

/* Original composition stages the art first; alternate compositions retain the same hooks. */

.hero {
  padding: 80px 0 48px;
  border-bottom: 1px solid var(--color-border);
}

.hero__inner {
  width: min(var(--container),calc(100% - var(--gutter)*2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,1fr);
  align-items: center;
  gap: 64px;
}

.hero__body {
  min-width: 0;
}

.hero__mark {
  display: block;
  width: fit-content;
  margin-bottom: 32px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 12px;
}

.hero__kicker {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.hero__title {
  max-width: 15ch;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem,3.85vw,3.5rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}

.hero__text {
  font-size: clamp(1.375rem,2.1vw,2rem);
  line-height: 1.4;
  max-width: 30ch;
  margin-top: 28px;
  color: var(--color-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}

.hero__media {
  position: relative;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-surface-alt);
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg,var(--scrim),transparent 35%);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: inherit;
  border-radius: inherit;
}

.hero__media img[src$='.svg'] {
  object-fit: contain;
}

.hero--compact {
  padding-block: 56px;
}

.hero--compact .hero__media {
  aspect-ratio: 8/5;
}

.hero--compact .hero__title {
  font-size: clamp(1.75rem,3.4vw,3rem);
}

.hero__words {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.hero__words span::before {
  content: '+ ';
  color: var(--color-accent);
}

.vault-preview__copy--split-editorial .hero__title,.vault-preview__copy--split-editorial .hero__text {
  margin-inline: auto;
}

.vault-preview__copy--split-editorial .hero__mark {
  margin-inline: auto;
}

.vault-preview__copy--split-editorial .hero__actions {
  justify-content: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
}

.button--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:focus-visible {
  outline-color: var(--color-text);
}

.button--quiet {
  background: transparent;
  color: var(--color-text);
}

.button:hover {
  border-color: var(--color-text);
}

.button--primary:hover {
  border-color: var(--color-on-accent);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-accent);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin-top: 40px;
  border-top: 1px solid var(--color-border);
}

.stats__item {
  padding: 24px 24px 0 0;
  min-width: 0;
}

.stats__number {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
}

.stats__label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-muted);
}

/* Chapters flow normally; their spines are decorative location labels. */

.section {
  padding-block: var(--section-pad);
}

.section--alt {
  background: var(--color-surface-alt);
}

.chapter {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.chapter__spine {
  position: absolute;
  right: 12px;
  top: 48px;
  writing-mode: vertical-rl;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 64px;
  margin-bottom: 40px;
  align-items: end;
}

.chapter__number {
  display: block;
  grid-column: 1/-1;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section__title {
  font-size: clamp(1.75rem,3.6vw,3.5rem);
  letter-spacing: -.04em;
  font-weight: 400;
  max-width: 20ch;
}

.section__lead {
  color: var(--color-muted);
  font-size: 18px;
  max-width: 52ch;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(18rem,100%),1fr));
  gap: 24px;
}

.card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
}

.card__media {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}

.card__body {
  padding: 28px;
}

.card__number {
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--color-accent);
}

.card__title {
  margin-top: 16px;
  font-size: 24px;
  font-weight: 400;
}

.card__text {
  margin-top: 16px;
  color: var(--color-muted);
}

.card__body .text-link {
  margin-top: 16px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 64px;
}

.split__media {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.split__body .section__title {
  margin-top: 24px;
}

.split__body p {
  margin-top: 24px;
  color: var(--color-muted);
  font-size: 18px;
}

.split__body .text-link {
  margin-top: 24px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 64px;
}

.gallery__item {
  min-width: 0;
}

.gallery__link {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
}

.gallery__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: inherit;
}

.gallery__caption {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--color-muted);
}

.gallery--single {
  grid-template-columns: minmax(0,1fr);
  max-width: 860px;
  margin-inline: auto;
}

.js .gallery__link {
  cursor: zoom-in;
}

/* Both dialog and backdrop are dark: browsers composite these separately. */

html.lightbox-open {
  overflow: hidden;
}

html.lightbox-open .bar {
  display: none;
}

.lightbox {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 76px 24px 128px;
  border: 0;
  background: color-mix(in srgb,var(--color-surface-alt) 94%,transparent);
  color: var(--color-text);
}

.lightbox::backdrop {
  background: color-mix(in srgb,var(--color-surface-alt) 94%,transparent);
}

.lightbox[open] {
  display: grid;
  align-items: center;
  justify-items: center;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  width: min(1100px,100%);
  min-height: 0;
  gap: 12px;
}

.lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 240px);
  object-fit: contain;
}

.lightbox__caption {
  font-size: 13px;
  text-align: center;
}

.lightbox__close,.lightbox__prev,.lightbox__next {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 12px;
}

.lightbox__close {
  top: 16px;
  right: 24px;
}

.lightbox__prev {
  bottom: 48px;
  right: calc(50% + 8px);
}

.lightbox__next {
  bottom: 48px;
  left: calc(50% + 8px);
}

.lightbox__count {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-muted);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(18rem,100%),1fr));
  gap: 24px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border);
  border-radius: var(--radius-s);
}

.plan--featured {
  border-top-color: var(--color-accent);
  background: var(--color-surface-alt);
}

.plan__badge {
  padding: 4px 10px;
  margin-bottom: 24px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--color-accent);
}

.plan__name {
  font-size: 24px;
  font-weight: 400;
}

.plan__price {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.plan__prefix,.plan__period {
  font-size: 12px;
  color: var(--color-muted);
}

.plan__list {
  width: 100%;
  list-style: none;
  padding: 0;
  margin-block: 28px;
}

.plan__list li {
  padding-block: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 14px;
}

.plan__action {
  margin-top: auto;
  padding-top: 8px;
}

.cta {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  align-items: center;
  gap: 64px;
}

.cta .section__title {
  margin-top: 24px;
}

.cta__body p {
  color: var(--color-muted);
  font-size: 20px;
}

.cta__body .button {
  margin-top: 28px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.info-card {
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  min-width: 0;
}

.info-card h2 {
  font-size: 24px;
  font-weight: 400;
}

.info-card p {
  margin-top: 20px;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.hours {
  margin-top: 20px;
  font-family: var(--font-heading);
  font-size: 12px;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
  border-bottom: 1px solid var(--color-border);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
  gap: 64px;
}

.contact-layout .section__lead {
  margin-top: 24px;
}

.contact-form {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
}

.form__field {
  display: grid;
  gap: 8px;
}

.form__label {
  font-family: var(--font-heading);
  font-size: 12px;
}

.form__input,.form__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-s);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.form__textarea {
  min-height: 160px;
  resize: vertical;
}

.form__note {
  font-size: 13px;
  color: var(--color-muted);
}

.contact-form .button {
  justify-self: start;
}

.prose {
  max-width: 760px;
}

.prose h1 {
  font-size: 48px;
  font-weight: 400;
}

.prose h2 {
  margin-top: 40px;
  font-size: 28px;
}

.prose p {
  margin-top: 20px;
  color: var(--color-muted);
}

.site-footer {
  padding: 64px 0 32px;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: clamp(40px,8vw,96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--font-heading);
  font-size: 12px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer__note {
  margin-top: 24px;
  max-width: 88ch;
  color: var(--color-muted);
  font-size: 12px;
}

.site-footer__legal {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--color-muted);
}

/* Keep utility controls reachable without covering the footer or dialog. */

.bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-float);
}

.bar__inner {
  width: min(var(--container),calc(100% - var(--gutter)*2));
  height: 55px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 24px;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 12px;
}

.bar__name {
  letter-spacing: .16em;
}

.bar__phone {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  text-underline-offset: 4px;
}

.bar__action {
  min-height: 44px;
  padding: 10px 20px;
}

.cookie-banner {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 45;
  padding: 24px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 63.99rem) {
  :root {
    --gutter: 28px;
    --section-pad: 80px;
  }

  .chapter__spine {
    display: none;
  }

  .hero__inner,.split,.contact-layout {
    gap: 40px;
  }

  .hero__title {
    font-size: clamp(1.75rem,3.8vw,2.8rem);
  }

  .card-grid,.plan-grid {
    grid-template-columns: repeat(auto-fit,minmax(min(16rem,100%),1fr));
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 47.99rem) {
  :root {
    --gutter: 20px;
    --section-pad: 64px;
  }

  .site-header__brand {
    font-size: 20px;
  }

  .nav__toggle {
    display: block;
  }

  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 20px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
  }

  .nav__menu {
    display: none;
  }

  .nav__menu--open {
    display: flex;
  }

  .nav__link {
    width: 100%;
    font-size: 14px;
  }

  .hero {
    padding-block: 40px;
  }

  .hero__inner,.split,.contact-layout,.cta {
    grid-template-columns: minmax(0,1fr);
    gap: 40px;
  }

  .hero__mark {
    margin-bottom: 24px;
  }

  .hero__kicker {
    font-size: 10px;
    letter-spacing: .14em;
    margin-bottom: 20px;
  }

  .hero__title {
    font-size: 28px;
    max-width: 17ch;
  }

  .hero__text {
    font-size: 22px;
    margin-top: 24px;
  }

  .hero__actions {
    margin-top: 28px;
  }

  .hero__media {
    aspect-ratio: 4/3;
  }

  .hero--compact .hero__media {
    aspect-ratio: 4/3;
  }

  .hero__words {
    margin-top: 32px;
    gap: 12px 20px;
  }

  .stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px 16px;
    margin-top: 28px;
  }

  .stats__item {
    padding: 20px 0 0;
  }

  .stats__number {
    font-size: 28px;
  }

  .section__head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }

  .section__title {
    font-size: 32px;
  }

  .section__lead {
    font-size: 17px;
  }

  .card-grid,.plan-grid,.gallery {
    grid-template-columns: minmax(0,1fr);
  }

  .card__body,.plan,.info-card {
    padding: 24px;
  }

  .gallery {
    margin-top: 40px;
  }

  .split__media {
    aspect-ratio: 4/3;
  }

  .form__row {
    grid-template-columns: minmax(0,1fr);
  }

  .site-footer {
    padding-top: 48px;
  }

  .site-footer__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 24px;
  }

  .bar__inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  .bar__name {
    font-size: 12px;
  }

  .bar__action {
    padding-inline: 18px;
  }

  .lightbox {
    padding-inline: 16px;
  }

}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  a,button {
    transition: color 160ms,border-color 160ms,background-color 160ms;
  }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 480ms ease,transform 480ms ease;
    transition-delay: calc(var(--reveal-index,0)*60ms);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

}

/* The graphic opening is full-width; customer media stays a real editable image. */
.hero--identity { padding-top: 24px; padding-bottom: 48px; }
.hero__inner:where(.hero--identity *) { grid-template-columns: minmax(0,1fr); gap: 40px; }
.hero__body:where(.hero--identity *) { max-width: 76rem; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 16px 72px; align-items: start; }
.hero--identity .hero__mark { grid-column: 1 / -1; margin-bottom: 0; padding: 0; border: 0; }
.hero--identity .hero__kicker { grid-column: 1 / -1; margin: 0; }
.hero--identity .hero__title { font-size: clamp(2rem,3.8vw,3.75rem); }
.hero--identity .hero__text { margin-top: 0; font-size: clamp(1.125rem,1.8vw,1.5rem); }
.hero--identity .hero__actions { grid-column: 2; margin-top: 8px; }
.hero__media:where(.hero--identity *) { aspect-ratio: 1400/650; border: 0; border-radius: 0; background: var(--color-surface); }
.hero--identity .hero__media::after { display: none; }
.hero--identity .hero__media img { object-fit: contain; }
.hero--identity .hero__words { margin-top: 40px; }
.mono-home { padding-bottom: 0; }
.mono-home .chapter__spine { display: none; }
.chapter { scroll-margin-top: 16px; }
.chapter-nav .site-header__brand { display: none; }
.chapter-nav .site-header__inner { min-height: 80px; padding-block: 12px; }
.chapter-nav nav { width: 100%; min-width: 0; }
.chapter-nav .nav__menu { justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.chapter-nav .nav__link { min-height: 48px; padding: 8px 12px; border-bottom: 2px solid transparent; }
.chapter-nav .nav__link[aria-current="location"] { border-bottom-color: var(--color-accent); }
.chapter-nav .nav__link { overflow-wrap: anywhere; white-space: normal; }
.chapter-nav .nav__toggle { width: 100%; height: auto; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; font-family: var(--font-heading); font-size: 13px; text-align: left; }
/* Alternative compositions deliberately return copy to its single reading column. */
.hero--identity .vault-preview__layout { gap: 40px; }
.vault-preview__copy--split-image-led,
.vault-preview__copy--split-editorial,
.vault-preview__copy--split-compact { display: block; }
.vault-preview__copy--split-image-led .hero__text,
.vault-preview__copy--split-editorial .hero__text,
.vault-preview__copy--split-compact .hero__text { margin-top: 24px; }
.vault-preview__copy--split-image-led .hero__actions,
.vault-preview__copy--split-editorial .hero__actions,
.vault-preview__copy--split-compact .hero__actions { margin-top: 24px; }
@media (max-width: 47.99rem) {
  .hero--identity { padding-top: 16px; }
  .hero__body:where(.hero--identity *) { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .hero--identity .hero__actions { grid-column: 1; }
  .hero__media:where(.hero--identity *) { aspect-ratio: 1.45; }
  .hero--identity .hero__title { font-size: clamp(1.75rem,7.5vw,2.75rem); }
  .chapter-nav .nav__toggle { display: flex; }
  .chapter-nav .nav__menu { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .nav__menu { max-height: calc(100svh - 100px); overflow-y: auto; overflow-x: hidden; }
  .nav__menu li { min-width: 0; width: 100%; }
  .nav__link { white-space: normal; overflow-wrap: anywhere; }

}

/* Customer comparisons must retain the source business label independently of its image. */
.nicer-template-preview .site-header__brand { display: inline-flex; }
.nicer-template-preview .chapter-nav .site-header__inner { flex-wrap: wrap; gap: 12px; }

@media (max-width: 47.99rem) and (scripting: none) {
  .nav__menu { display: flex; }
  html:not(.js):not(.nicer-nav-ready) .chapter-nav .nav__toggle { display: none; }
  html:not(.js):not(.nicer-nav-ready) .chapter-nav .nav__menu { position: static; max-height: none; }
  html:not(.js):not(.nicer-nav-ready) .chapter-nav { position: static; }
}

/* A lower-edge opening must expose its menu immediately, without another page scroll. */
@media (max-width: 47.99rem) {
  .site-header:has(.nav__menu--open) { position: fixed; inset: 0 0 auto; }
}

/* ── Site-specific composition ── */
/* Logo opening: the square artwork sits beside the copy on wide screens, stacked on phones. */
.hero--logo .hero__inner { grid-template-columns: minmax(0,440px) minmax(0,1fr); align-items: center; gap: 64px; }
.hero--logo .hero__body { grid-template-columns: minmax(0,1fr); }
.hero--logo .hero__actions { grid-column: 1; }
.hero--logo .hero__media { aspect-ratio: 1; }
.hero__media picture { display: block; height: 100%; }
.hero--square .hero__media { aspect-ratio: 1; }
.hero--text .hero__inner { grid-template-columns: minmax(0,1fr); }
.site-header__mark { flex-shrink: 0; }
.site-header__brand { min-width: 0; }
.site-footer__brand { font-size: clamp(28px,5vw,64px); overflow-wrap: anywhere; }
/* Release cards keep the square cover; the track list reads in the heading face. */
.card--release .card__tracks { list-style: none; margin: 16px 0 0; padding: 0; font-family: var(--font-heading); font-size: 12px; color: var(--color-muted); }
.card--release .card__tracks li { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-top: 1px solid var(--color-border-faint); }
.card--release .card__tracks span { flex-shrink: 0; }
/* Click-to-load players: the stage keeps its size whether it shows the poster or the frame. */
.embed { min-width: 0; }
.embed__stage { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-surface-alt); }
.embed--audio .embed__stage { aspect-ratio: 1; }
.card--release .embed__stage { border: 0; border-radius: var(--radius-s) var(--radius-s) 0 0; }
.embed__stage picture, .embed__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.embed__panel { display: none; position: absolute; inset: auto 0 0; padding: 24px; gap: 12px; background: linear-gradient(0deg,var(--scrim) 60%,transparent); }
.js .embed__panel { display: grid; justify-items: start; }
.embed__note { font-size: 12px; color: var(--color-text); max-width: 44ch; }
.embed__frame { display: block; width: 100%; height: 100%; border: 0; }
.embed__body { padding-top: 16px; }
.embed__title { font-size: 18px; font-weight: 400; }
.embed-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap: 32px 24px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(22rem,100%),1fr)); gap: 0 32px; }
.link-list li { min-width: 0; border-top: 1px solid var(--color-border-faint); }
.link-list .text-link { min-height: 48px; overflow-wrap: anywhere; }
/* Past shows read as a dated index. */
.shows { list-style: none; margin: 0; padding: 0; }
.shows li { display: grid; grid-template-columns: minmax(0,9rem) minmax(0,1fr); gap: 8px 24px; padding-block: 16px; border-top: 1px solid var(--color-border); }
.shows__date { font-family: var(--font-heading); font-size: 12px; color: var(--color-accent); }
.shows__venue { color: var(--color-muted); }
.platform-list { list-style: none; margin: 20px 0 0; padding: 0; }
.platform-list li { border-top: 1px solid var(--color-border-faint); }
.platform-list .text-link { width: 100%; min-height: 48px; justify-content: space-between; }
.card-grid + .section__head { margin-top: 64px; }
@media (max-width: 63.99rem) {
  .hero--logo .hero__inner { grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 40px; }
}
@media (max-width: 47.99rem) {
  .hero--logo .hero__inner { grid-template-columns: minmax(0,1fr); }
  .hero--logo .hero__media { max-width: 420px; }
  .site-header__brand { font-size: 15px; letter-spacing: .1em; }
  .shows li { grid-template-columns: minmax(0,1fr); }
  .embed__panel { padding: 16px; }
}
@media (max-width: 22.49rem) {
  .site-header__brand { font-size: 13px; }
  .hero--identity .hero__title { font-size: 1.6rem; }
  .section__title { font-size: 1.6rem; }
}
.card--release .card__media { aspect-ratio: 1; }
.card__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.split__media--poster { aspect-ratio: auto; }
.site-footer__links--platforms { margin-top: 24px; }
.shows__what { display: block; }
.embed--video .embed__stage { aspect-ratio: 16/9; }
.embed__load { gap: 12px; }
/* Under 360 px the pinned bar keeps only its phone and action; the name cell is too narrow for the wordmark. */
@media (max-width: 22.49rem) { .bar__name { display: none; } }
.prose a { overflow-wrap: anywhere; }