/* =============================================================================
   Ronnie Ro — site stylesheet (single file; every page loads css/styles.css).
   Static, hand-built site: no build step, no framework. Edit CSS directly.

   Design tokens below live in :root (dark, the default) and
   html[data-theme="light"]. Key colors:
     Palette rule (Joe 2026-07-31): LIGHT theme = WINE RED family only
     (#722f37 text accents, #5e1721 fills). DARK theme = DARK PURPLE family
     only (#5b3ea0 accents, #3a2270 fills). Accents derive from each base;
     never mix families across themes, never yellow.
   Theme is toggled by js/site.js and persisted in localStorage("ronnie-ro-theme").
   Each page's <head> has an inline anti-FOUC script that sets the theme pre-paint.
   ============================================================================= */
:root {
  color-scheme: dark;
  --paper: #171212;
  --ink: #f3f0e5;
  --muted: #b6b1a0;
  --panel: #201a1a;
  --panel-strong: #2a2323;
  --line: #433b3a;
  --accent: #4a2d7a;
  --accent-2: #2c1850;
  --accent-hi: #6a4aa8;
  --tri-2: #6a4aa8;   /* dark theme = dark purple family (Joe 2026-07-31) */
  --tri-3: #1c0e38;   /* deepest purple: selection pop only */
  --cool: #6a4aa8;
  --button-ink: #f6efe9;
  --header-bg: rgba(23, 18, 18, 0.94);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  --display-font: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body-font: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --paper: #f3f0e7;
  --ink: #1f1918;
  --muted: #5f5b4e;
  --panel: #fcfaf4;
  --panel-strong: #e7e3d4;
  --line: #d3ccb7;
  --accent: #722f37;
  --accent-2: #5e1721;
  --accent-hi: #722f37;
  --tri-2: #722f37;
  --tri-3: #4a1118;
  --cool: #722f37;
  --button-ink: #f6efe9;
  --header-bg: rgba(243, 240, 231, 0.95);
  --shadow: 0 18px 48px rgba(26, 18, 12, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 14% -8%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(900px 560px at 100% 18%, color-mix(in oklch, var(--accent-2) 13%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(127, 127, 127, 0.055) 34px 35px),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  transition: background-color .25s ease, color .25s ease;
}

body,
button,
input,
textarea {
  letter-spacing: 0;
}

img,
iframe {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  overflow-wrap: anywhere;
}

p {
  margin: 0;
  color: var(--muted);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.08;
  font-family: var(--display-font);
  letter-spacing: -.01em;
}

h1,
.display-title {
  font-size: 3rem;
  font-weight: 600;
}

h2 {
  font-size: 1.85rem;
  font-weight: 600;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

button,
.button {
  min-height: 46px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 0.92rem/1 var(--body-font);
  padding: 13px 20px;
  text-align: center;
  transition: transform .15s ease, background-color .2s ease;
}

button:hover,
.button:hover {
  transform: translateY(-1px);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--cool);
  outline-offset: 3px;
}

.button.primary {
  background: var(--accent-2);
  color: var(--button-ink);
}

.button.dark {
  background: var(--ink);
  color: var(--paper);
}

.skip-link {
  background: var(--accent-2);
  color: var(--button-ink);
  left: 12px;
  padding: 10px 12px;
  position: fixed;
  top: 12px;
  transform: translateY(-160%);
  z-index: 50;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---- header: brand (left) · nav (centered, fills middle) · actions (right) ---- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  transition: background-color .25s ease, border-color .25s ease;
}

.header-inner {
  align-items: center;
  display: flex;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
  min-height: 72px;
  padding: 12px 20px;
  position: relative;
}

.brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
  min-width: 0;
}

/* .brand-mark (the red "RO" monogram box) was removed 2026-07 — the header is
   now a plain name wordmark, so only .brand-text remains. */
.brand-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brand-text strong {
  font: 600 1.15rem/1 var(--display-font);
  letter-spacing: -.01em;
}

.brand-text em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.header-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}

/* ---- theme toggle: icon-based switch, not a bare text button ---- */
.theme-toggle {
  min-height: 42px;
  width: 42px;
  padding: 0;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.theme-toggle .icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}

.theme-toggle .icon svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}

.theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}

.menu-toggle {
  min-height: 42px;
  padding: 10px 14px;
}

.site-nav {
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  gap: 3px;
  left: 14px;
  padding: 10px;
  position: absolute;
  right: 14px;
  top: 72px;
  border-radius: 8px;
}

.site-header.is-open .site-nav {
  display: flex;
}

.site-nav a {
  border-radius: 5px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  padding: 12px 14px;
  transition: background-color .15s ease, color .15s ease;
}

.site-nav a[aria-current="page"],
.site-nav a:hover {
  background: var(--panel-strong);
  color: var(--ink);
}

.page-shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: 32px 20px 64px;
}

.poster-hero {
  display: grid;
  gap: 36px;
  padding: 20px 0 36px;
}

.hero-copy {
  align-self: center;
  display: grid;
  gap: 18px;
}

.eyebrow {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hero-name {
  color: var(--accent-hi);
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--body-font);
}

.hero-lead,
.lead {
  color: var(--ink);
  font-size: 1.08rem;
  max-width: 780px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.poster-card {
  margin: 0;
  max-width: 560px;
  position: relative;
}

.poster-card::before {
  background: var(--accent-2);
  border: 3px solid var(--ink);
  content: "";
  inset: 14px -8px -10px 10px;
  position: absolute;
  transform: rotate(-2deg);
  z-index: -1;
}

.poster-card img {
  aspect-ratio: 4 / 5;
  border: 4px solid var(--ink);
  object-fit: cover;
  width: 100%;
}

.poster-card figcaption {
  background: var(--accent);
  border: 2px solid var(--ink);
  bottom: 16px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  left: -6px;
  max-width: calc(100% - 16px);
  padding: 9px 12px;
  position: absolute;
  transform: rotate(-2deg);
}

.quick-nav,
.content-grid,
.media-grid,
.product-grid,
.stat-band {
  display: grid;
  gap: 18px;
}

.quick-nav {
  grid-template-columns: 1fr;
  margin: 8px 0 32px;
}

.quick-nav a,
.content-card,
.media-link,
.product-card,
.proof-list,
.fit-list {
  background: linear-gradient(155deg, var(--panel), var(--panel-strong));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.quick-nav a:hover,
.content-card:hover,
.media-link:hover,
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
}

.quick-nav a {
  border-left: 5px solid var(--accent);
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 20px 20px 20px 24px;
  position: relative;
  overflow: hidden;
}

.quick-nav a::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent-2) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.content-card {
  position: relative;
  overflow: hidden;
}

.content-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--accent), var(--accent-2));
}

.quick-nav span,
.content-card span,
.media-link span,
.stat span,
.proof-list span,
.fit-list span,
.product-card span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.quick-nav strong {
  color: var(--ink);
  font-size: 1.02rem;
}

.section,
.page-section {
  border-top: 1px solid var(--line);
  padding: 40px 0;
}

.proof-section,
.feature-split {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 28px;
  padding: 40px 0;
}

.proof-section > div,
.page-intro,
.section-head {
  display: grid;
  gap: 16px;
}

.proof-section h2,
.page-intro h1 {
  max-width: 820px;
}

.proof-list,
.fit-list {
  padding: 22px;
}

ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

li {
  color: var(--muted);
  margin: 8px 0;
}

.stat-band {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.stat {
  background: linear-gradient(155deg, var(--panel), var(--panel-strong));
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-2);
  border-radius: 8px;
  color: var(--ink);
  padding: 20px;
}

.stat strong {
  display: block;
  font: 600 2.1rem/1 var(--display-font);
  color: var(--accent-hi);
}

.page-intro {
  padding: 26px 0 36px;
}

.page-intro p {
  max-width: 780px;
}

.feature-split {
  align-items: start;
  padding-top: 56px;
}

.feature-split > div {
  display: grid;
  gap: 18px;
}

.text-stack {
  display: grid;
  gap: 14px;
}

.text-stack strong {
  color: var(--ink);
}

.portrait-frame,
.video-frame {
  margin: 0;
}

.portrait-frame {
  max-width: 460px;
  position: relative;
}

.portrait-frame::before {
  border: 3px solid var(--accent);
  content: "";
  inset: 12px -8px -10px 9px;
  position: absolute;
  transform: rotate(2deg);
  z-index: -1;
}

.portrait-frame img {
  aspect-ratio: 4 / 5;
  border: 4px solid var(--ink);
  object-fit: cover;
  width: 100%;
}

.video-frame {
  background: #000;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  width: 100%;
}

.video-frame iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  width: 100%;
}

.content-grid,
.media-grid,
.product-grid {
  grid-template-columns: 1fr;
  padding: 6px 0 36px;
}

.content-card {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.content-card h2,
.content-card h3 {
  font-size: 1.3rem;
}

.text-link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  font-family: var(--body-font);
}

.media-link,
.product-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.media-link {
  padding-bottom: 20px;
}

.media-link img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.product-card img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
  background: #f3f0e7;
  padding: 18px;
}

.media-link span,
.media-link strong,
.product-card span {
  margin-left: 18px;
  margin-right: 18px;
}

.media-link strong {
  color: var(--ink);
  font-size: 1.1rem;
  margin-bottom: 4px;
  font-family: var(--body-font);
  font-weight: 700;
}

.product-card {
  padding-bottom: 20px;
}

.product-card span {
  color: var(--ink);
  font-size: 1.02rem;
  font-family: var(--body-font);
  font-weight: 600;
}

.download-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 8px 0 32px;
}

.download-card {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.download-card strong {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid var(--line);
  margin: 16px auto 0;
  max-width: 1180px;
  padding: 30px 20px 40px;
}

.site-footer p {
  margin-bottom: 16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-nav a {
  color: var(--ink);
  font-weight: 800;
}

@media (min-width: 560px) {
  .quick-nav,
  .stat-band,
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  h1,
  .display-title {
    font-size: 3.9rem;
  }

  h2 {
    font-size: 2.1rem;
  }

  .page-shell {
    padding-left: 28px;
    padding-right: 28px;
  }

  .poster-hero,
  .proof-section,
  .feature-split {
    grid-template-columns: minmax(0, 1.02fr) minmax(280px, 0.78fr);
  }

  .quick-nav,
  .content-grid,
  .media-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 920px) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 0;
    position: static;
  }

  .site-nav a {
    padding: 10px 14px;
  }

  .poster-hero {
    padding-top: 40px;
  }

  .content-grid,
  .media-grid,
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  h1,
  .display-title {
    font-size: 4.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Premium pass 2026-07-29: harmonized OKLCH palette + footer credit */
.poster-card figcaption {
  color: var(--button-ink);
}

html[data-theme="light"] .poster-card figcaption {
  color: #fff;
}

.powered-by {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 18px 0 0;
}

.powered-by a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.powered-by a:hover,
.powered-by a:focus-visible {
  color: var(--accent-hi);
  text-decoration: underline;
}

/* Mobile hardening 2026-07-29 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

.button,
.menu-toggle,
.theme-toggle,
.quick-nav a,
.media-link,
.product-card {
  touch-action: manipulation;
}

/* width/height attrs provide CLS hints; CSS aspect-ratio must win */
.poster-card img,
.portrait-frame img,
.media-link img,
.product-card img {
  height: auto;
}

/* ============ Premium design pass 2026-07-29 ============ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Poster-scale fluid type */
h1 {
  font-size: clamp(2.9rem, 2rem + 2.4vw, 4.2rem);
  line-height: 0.98;
}

.display-title {
  font-size: clamp(3.4rem, 2.2rem + 4.8vw, 6.8rem);
  line-height: 0.88;
}

h2 {
  font-size: clamp(1.85rem, 1.5rem + 1.1vw, 2.5rem);
}

h1,
h2 {
  text-wrap: balance;
}

/* Film grain — tactile poster texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="light"] body::after {
  opacity: 0.035;
}

/* Stage spotlight behind the hero */
.poster-hero {
  position: relative;
}

.poster-hero::before {
  content: "";
  position: absolute;
  inset: -12% -20%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 46% 42% at 68% 34%, color-mix(in oklch, var(--accent-2) 16%, transparent), transparent 70%);
}

/* Spotlight-dim: hovered tile stays lit, siblings dim (desktop) */
@media (min-width: 760px) and (hover: hover) {
  .quick-nav a,
  .media-link,
  .product-card {
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .quick-nav:hover a,
  .media-grid:hover .media-link,
  .product-grid:hover .product-card {
    opacity: 0.55;
  }

  .quick-nav a:hover,
  .media-grid .media-link:hover,
  .product-grid .product-card:hover {
    opacity: 1;
  }
}

/* Photo zoom inside clipped cards */
.media-link,
.product-card {
  overflow: hidden;
}

.media-link img,
.product-card img {
  transition: transform 0.35s ease;
}

.media-link:hover img,
.product-card:hover img {
  transform: scale(1.04);
}

/* Button micro-feedback */
.button {
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button:active {
  transform: scale(0.97);
}

/* Hero entrance */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.poster-hero .hero-copy {
  animation: rise-in 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.poster-hero .poster-card {
  animation: rise-in 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.12s both;
}

/* Scroll reveals — progressive, no JS */
@supports (animation-timeline: view()) {
  .feature-split,
  .content-card,
  .proof-section,
  .stat {
    animation: rise-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-hero .hero-copy,
  .poster-hero .poster-card,
  .feature-split,
  .content-card,
  .proof-section,
  .stat {
    animation: none !important;
  }
}

/* Cross-page crossfade on modern browsers */
@view-transition {
  navigation: auto;
}

/* Mobile sticky CTA bar */
.sticky-cta {
  display: none;
}

@media (max-width: 759px) {
  .sticky-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--paper) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }

  .sticky-cta .button {
    flex: 1;
    text-align: center;
  }

  body:has(.sticky-cta) {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  /* :has() fallback (older Firefox/WebViews): pad unconditionally on mobile
     so the fixed bar can never cover footer content. */
  @supports not selector(:has(*)) {
    body {
      padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }
  }
}

/* NexVerto footer wordmark - two-span brand mark, tenant accent on "Verto" */
.powered-by .nv-brand { text-decoration: none; font-weight: 700; }
.powered-by .nv-brand .nv-brand-nex { color: var(--ink, inherit); }
.powered-by .nv-brand .nv-brand-verto { color: var(--accent); }
.powered-by .nv-brand:hover .nv-brand-verto,
.powered-by .nv-brand:focus-visible .nv-brand-verto { color: var(--accent-hi); }

/* Booking/contact form (relay on /api/contact) */
.contact-form-section form { display: grid; gap: 14px; margin-top: 18px; }
.contact-form-section .form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .contact-form-section .form-row { grid-template-columns: 1fr; } }
.contact-form-section label { display: grid; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.contact-form-section input,
.contact-form-section textarea {
  font: inherit; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 10px; padding: 12px 14px;
}
.contact-form-section input:focus,
.contact-form-section textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-form-section .hp-field { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
#form-status { font-weight: 600; color: var(--accent); }

/* Uplift 2026-07-30: mobile + a11y hardening */
.theme-toggle,
.menu-toggle {
  min-width: 44px;
  min-height: 44px;
}
.footer-nav a {
  padding: 8px 6px;
  display: inline-block;
}
:where([id]) {
  scroll-margin-top: 96px;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Footer layout: tagline full-width, nav left, powered-by bottom right */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}
.site-footer > p:first-child {
  flex: 1 1 100%;
  margin: 0;
}
.site-footer .footer-nav {
  margin: 0;
}
.site-footer .powered-by {
  margin: 0 0 0 auto;
}

/* Powered-by NexVerto popout */
.nv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nv-modal-overlay.open { display: flex; }
body.nv-modal-lock { overflow: hidden; }
.nv-modal {
  position: relative;
  width: min(480px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px 26px;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7);
}
.nv-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.nv-modal-close:hover { color: var(--ink); }
.nv-modal-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.nv-modal-kicker .nv-brand-nex { color: var(--ink); }
.nv-modal-kicker .nv-brand-verto { color: var(--accent); }
.nv-modal h2 { margin: 0 0 10px; font-size: 1.35rem; }
.nv-modal-blurb { color: var(--muted); font-size: 0.92rem; margin: 0 0 18px; }
.nv-modal-links { display: grid; gap: 10px; }
.nv-modal-links .button {
  display: block;
  text-align: left;
  padding: 13px 16px;
}
.nv-modal-links .button strong { display: block; }
.nv-modal-links .button span {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* Palette application: maroon primary, deep-purple secondary voice + selection */
.eyebrow { color: var(--tri-2); }
::selection { background: var(--tri-3); color: #fff; }
.contact-form-section input:focus,
.contact-form-section textarea:focus { outline-color: var(--tri-2); }
#form-status { color: var(--tri-2); }

/* RR-SHOW-POSTERS v2 — upcoming-show poster cards (shows page), tightened sizing */
.show-grid { display: grid; gap: 20px; margin: 8px 0 34px; }
.show-card {
  background: linear-gradient(155deg, var(--panel), var(--panel-strong));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: grid;
  overflow: hidden;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.show-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
  transform: translateY(-3px);
}
.show-card .show-art { background: #0d0a0a; margin: 0; }
.show-card .show-art img { display: block; height: auto; width: 100%; }
.show-card .show-info { align-content: center; display: grid; gap: 10px; padding: 20px 22px 22px; }
.show-card .show-date {
  color: var(--accent-hi);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.show-card h2 { font-size: 1.35rem; margin: 0; }
.show-card p { color: var(--muted); margin: 0; max-width: 62ch; }
.show-card .action-row { margin-top: 6px; }
@media (min-width: 760px) {
  .show-card.split { grid-template-columns: 264px 1fr; }
  .show-card.split .show-art { height: 100%; display: flex; align-items: center;
    justify-content: center; }
  /* CONTAIN, NOT COVER.
     The art column is a fixed 264px but the card's HEIGHT comes from the text beside it.
     The posters are 4:3 landscape (1080x810, 1408x1056), so at 264px wide they only want
     198px of height -- less than the copy produces. object-fit:cover closed that gap by
     scaling the poster up until it filled the height and then cropping the overflow off
     the SIDES, so the left and right edges of the client's own promotional artwork were
     cut away. `contain` fits the whole poster and centres it against the card's
     background (#0d0a0a), which is what .show-card.banner below already does.
     If the art ever changes to portrait, cover would crop top-and-bottom instead --
     either way it crops, which is why the fix is contain and not a tuned height. */
  .show-card.split .show-art img { height: 100%; width: 100%;
    object-fit: contain; object-position: center; }
  .show-card.banner .show-art img {
    height: 232px;
    margin: 0 auto;
    object-fit: contain;
    width: auto;
    max-width: 100%;
  }
}

/* Footer row 2026-08-25 - the default: copyright left, Contact / Privacy centered, Powered by NexVerto right */
.footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.footer-copy { justify-self: start; color: var(--muted); font-size: 0.8rem; }
.footer-legal { justify-self: center; color: var(--muted); font-size: 0.85rem; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--ink); text-decoration: underline; }
.footer-row .powered-by { justify-self: end; margin: 0; }