/* ==========================================================================
   Miss Vivienne — Fallen Angel
   DRAFT stylesheet. Not live. Pending attorney review before publishing.
   ========================================================================== */

:root {
  /* Near-black — SECONDARY color. Card panels, header, footer, deep-contrast sections. */
  --ink: #0d0a0c;
  --ink-2: #170f11;
  --ink-3: #1c171a;

  /* Muted leather oxblood — DOMINANT color. Primary background across hero/sections. */
  --oxblood: #742830;
  --oxblood-hover: #8f333c;
  --oxblood-bright: #b8515c;

  /* Metal tone — gunmetal / antiqued silver. Dividers, studs, chain, lace motifs.
     Fixed range #6b6b6b–#8a8a8a. Never shift toward gold — a sibling brand owns that. */
  --silver: #8a8a8a;
  --gunmetal: #6b6b6b;

  /* Off-white / cream — primary text, reads clean against both the oxblood dominant
     and near-black secondary backgrounds. */
  --bone: #f0e6df;
  --bone-dim: #d6cdc8;
  --bone-faint: #b8afac;

  /* Type: Monsieur La Doulaise on Fallen, Bodoni on Angel, Elsie (S19) on subheads,
     Cormorant italic (S03) on body, Figtree on nav and buttons. */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", Times, serif;
  --font-sub: "Elsie", "Bodoni Moda", "Didot", "Times New Roman", Times, serif;
  --font-lede: "Cormorant Garamond", Georgia, serif;
  --font-times: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-label: "Figtree", "Segoe UI", sans-serif;
  --font-script: "Monsieur La Doulaise", "Snell Roundhand", cursive;
  --font-body: var(--font-times);

  --max-width: 1180px;
  --radius: 2px;

  /* Materials. Hatching alone reads as stripes, so each surface carries a lit
     turbulence relief instead — feDiffuseLighting over noise gives real bumps.
     Lighting-colour is held near mid-grey so `overlay` embosses the hide
     without lightening or desaturating the oxblood underneath. */
  --relief-hide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='11'/%3E%3CfeDiffuseLighting surfaceScale='1.1' diffuseConstant='1' lighting-color='%238c8c8c'%3E%3CfeDistantLight azimuth='135' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)'/%3E%3C/svg%3E");
  --relief-pebble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='2' seed='7'/%3E%3CfeDiffuseLighting surfaceScale='1.9' diffuseConstant='1' lighting-color='%238c8c8c'%3E%3CfeDistantLight azimuth='135' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  --nap-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='2'/%3E%3CfeDiffuseLighting surfaceScale='1.1' diffuseConstant='1' lighting-color='%238a8a8a'%3E%3CfeDistantLight azimuth='140' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
  --nap-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='5'/%3E%3CfeDiffuseLighting surfaceScale='1.2' diffuseConstant='0.85' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='145' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
  --veil-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23h)'/%3E%3C/svg%3E");

  /* Wing artwork is a token so the studio can swap in generated art without
     touching the stylesheet. Every wing on the site reads from these two. */
  --wing-matte: url("media/wing-matte.svg");
  --wing-lace: url("media/wing-lace.svg");

  /* Surface strengths — the studio writes these live. Set any to 0 for flat. */
  /* Tones are mixed from the two base colours, so recolouring the site means
     changing --oxblood and --ink and nothing else. */
  --tone-up: color-mix(in srgb, var(--oxblood), #ffffff 7%);
  --tone-down: color-mix(in srgb, var(--oxblood), #000000 8%);
  --tone-deep: color-mix(in srgb, var(--oxblood), #000000 22%);
  --suede-up: color-mix(in srgb, var(--ink), #ffffff 9%);
  --suede-mid: color-mix(in srgb, var(--ink), #ffffff 3%);
  --suede-down: color-mix(in srgb, var(--ink), #000000 45%);

  --veil-strength: .22;
  --lace-wash-strength: .1;
  --lace-panel-strength: .07;

  /* Soft-touch lace — edges blurred in the SVG so it sits in the surface
     instead of printing on top of it. Dark for red hide, pale for suede. */
  --lace-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)' fill='none' stroke='%23000000' stroke-width='1.2' opacity='0.55'%3E%3Cpath d='M0 30 C15 2 45 2 60 30 C75 58 105 58 120 30'/%3E%3Cpath d='M0 90 C15 62 45 62 60 90 C75 118 105 118 120 90'/%3E%3Cellipse cx='30' cy='60' rx='13' ry='7'/%3E%3Cellipse cx='90' cy='60' rx='13' ry='7'/%3E%3Ccircle cx='60' cy='60' r='5'/%3E%3Ccircle cx='0' cy='60' r='5'/%3E%3Ccircle cx='120' cy='60' r='5'/%3E%3C/g%3E%3Cg filter='url(%23s)' fill='%23000000' opacity='0.4'%3E%3Ccircle cx='30' cy='16' r='1.8'/%3E%3Ccircle cx='90' cy='16' r='1.8'/%3E%3Ccircle cx='30' cy='104' r='1.8'/%3E%3Ccircle cx='90' cy='104' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --lace-soft-pale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeGaussianBlur stdDeviation='0.7'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)' fill='none' stroke='%23f0e6df' stroke-width='1.2' opacity='0.55'%3E%3Cpath d='M0 30 C15 2 45 2 60 30 C75 58 105 58 120 30'/%3E%3Cpath d='M0 90 C15 62 45 62 60 90 C75 118 105 118 120 90'/%3E%3Cellipse cx='30' cy='60' rx='13' ry='7'/%3E%3Cellipse cx='90' cy='60' rx='13' ry='7'/%3E%3Ccircle cx='60' cy='60' r='5'/%3E%3Ccircle cx='0' cy='60' r='5'/%3E%3Ccircle cx='120' cy='60' r='5'/%3E%3C/g%3E%3Cg filter='url(%23s)' fill='%23f0e6df' opacity='0.4'%3E%3Ccircle cx='30' cy='16' r='1.8'/%3E%3Ccircle cx='90' cy='16' r='1.8'/%3E%3Ccircle cx='30' cy='104' r='1.8'/%3E%3Ccircle cx='90' cy='104' r='1.8'/%3E%3C/g%3E%3C/svg%3E");

  /* Button galloon — cream scallop. Depth 15px (Kwani, 2026-08-29). */
  --btn-lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='20' viewBox='0 0 48 20'%3E%3Cpath d='M0 20 L0 11 C5 11 7 2 12 2 C17 2 19 11 24 11 C29 11 31 2 36 2 C41 2 43 11 48 11 L48 20 Z' fill='%23f0e6df'/%3E%3Cpath d='M0 11 C5 11 7 2 12 2 C17 2 19 11 24 11 C29 11 31 2 36 2 C41 2 43 11 48 11' fill='none' stroke='%235c141c' stroke-width='0.7'/%3E%3Ccircle cx='12' cy='8.5' r='2.3' fill='none' stroke='%235c141c' stroke-width='0.55'/%3E%3Ccircle cx='36' cy='8.5' r='2.3' fill='none' stroke='%235c141c' stroke-width='0.55'/%3E%3Ccircle cx='24' cy='13' r='1.6' fill='none' stroke='%23742830' stroke-width='0.5'/%3E%3Ccircle cx='6' cy='15' r='0.7' fill='%23742830'/%3E%3Ccircle cx='42' cy='15' r='0.7' fill='%23742830'/%3E%3Ccircle cx='24' cy='4.2' r='0.6' fill='%23742830'/%3E%3C/svg%3E");
  --btn-lace-h: 15px;
  --btn-lace-tile: 36px 15px;
  --btn-lace-shift: -6px;
  --btn-lace-after: block;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--oxblood);
  background-image:
    var(--relief-hide),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.035) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.025) 0%, transparent 40%),
    linear-gradient(180deg, var(--tone-up), var(--tone-down));
  background-size: 260px 260px, auto, auto, auto;
  background-blend-mode: overlay, overlay, overlay, normal;
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.26rem, 1.16rem + 0.5vw, 1.4rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   Leather textures — several oxblood grains, assigned per block.
   Matte hides the luster sweep; patent/worn keep a slow shine.
   ------------------------------------------------------------------------- */

.leather-bg,
.leather-pebbled,
.leather-patent,
.leather-worn,
.leather-suede {
  position: relative;
  isolation: isolate;
}

/* Smooth hide — tight grain, the baseline surface. */
.leather-bg {
  background-color: var(--oxblood);
  background-image:
    var(--relief-hide),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.035) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.025) 0%, transparent 40%),
    linear-gradient(180deg, var(--tone-up), var(--tone-down));
  background-size: 260px 260px, auto, auto, auto;
  background-blend-mode: overlay, overlay, overlay, normal;
}

/* Pebbled hide — coarse irregular relief. A fixed dot grid reads as a waffle,
   so the bumps come from low-frequency turbulence instead. */
.leather-pebbled {
  background-color: var(--oxblood);
  background-image:
    var(--relief-pebble),
    radial-gradient(ellipse at 45% 6%, rgba(255,255,255,0.05), transparent 58%),
    linear-gradient(180deg, var(--tone-up), var(--tone-down));
  background-size: 240px 240px, auto, auto;
  background-blend-mode: overlay, overlay, normal;
}

.leather-patent {
  background-color: #5c1c24;
  background-image:
    radial-gradient(ellipse at 30% 12%, rgba(255,255,255,0.16), transparent 42%),
    radial-gradient(ellipse at 80% 88%, rgba(0,0,0,0.45), transparent 50%),
    repeating-linear-gradient(18deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 7px);
  overflow: hidden;
}

.leather-worn {
  background-color: #4e181e;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.45), transparent 40%),
    repeating-linear-gradient(95deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-20deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 8px);
}

/* Red nubuck — the softest of the three: fine nap plus a broad sheen that
   shifts across the block, the way brushed suede catches a room light. */
.leather-suede {
  background-color: var(--oxblood);
  background-image:
    var(--nap-red),
    radial-gradient(120% 100% at 25% -5%, rgba(255,255,255,0.09), transparent 60%),
    radial-gradient(100% 90% at 85% 105%, rgba(0,0,0,0.4), transparent 65%),
    linear-gradient(165deg, var(--tone-up), var(--tone-deep));
  background-size: 200px 200px, auto, auto, auto;
  background-blend-mode: overlay, screen, multiply, normal;
}

/* Every full-width hide block gets the same fold at its seams. */
.leather-bg,
.leather-pebbled,
.leather-suede,
.leather-worn {
  box-shadow:
    inset 0 42px 56px -46px rgba(0,0,0,0.85),
    inset 0 -42px 56px -46px rgba(0,0,0,0.85);
}

/* One grain over the whole page so panels, hide and photo share a surface. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--veil-noise);
  background-size: 180px 180px;
  opacity: var(--veil-strength, .22);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 60;
}

/* Soft lace wash on the red hide — barely there, but it kills the flatness. */
.leather-bg::after,
.leather-pebbled::after,
.leather-suede::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lace-soft);
  background-size: 120px 120px;
  opacity: var(--lace-wash-strength, .1);
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------------------------------------
   Black suede — soft-touch. Matte nap, no specular: it absorbs light where
   the patent leather throws it back. Every dark panel is cut from this.
   ------------------------------------------------------------------------- */

.suede,
.host-card,
.menu-col,
.hours-card,
.card,
header.site-header,
footer.site-footer {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
  background-image:
    var(--nap-black),
    radial-gradient(135% 105% at 16% -6%, rgba(255,255,255,0.07), transparent 58%),
    radial-gradient(105% 85% at 88% 106%, rgba(0,0,0,0.55), transparent 64%),
    linear-gradient(168deg, var(--suede-up), var(--suede-down) 62%, var(--suede-mid));
  background-size: 200px 200px, auto, auto, auto;
  background-blend-mode: overlay, screen, multiply, normal;
}

.host-card,
.menu-col,
.hours-card,
.card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 44px rgba(0,0,0,0.5),
    0 2px 3px rgba(0,0,0,0.55),
    0 24px 50px rgba(8,2,4,0.5);
}

/* Soft-touch lace pressed into the nap. Pale and blurred, so it reads as
   texture under the hand rather than a printed pattern. */
.host-card::after,
.menu-col::after,
.hours-card::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lace-soft-pale);
  background-size: 120px 120px;
  opacity: var(--lace-panel-strength, .07);
  pointer-events: none;
  z-index: 0;
}

/* Deepest block on the page — suede at a coarser nap, no edge light. */
.deep-bg {
  position: relative;
  isolation: isolate;
  background-color: color-mix(in srgb, var(--ink), #000000 25%);
  background-image:
    var(--nap-black),
    radial-gradient(140% 120% at 50% -20%, rgba(255,255,255,0.05), transparent 62%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,0.7), transparent 60%),
    linear-gradient(180deg, var(--suede-up), var(--suede-down));
  background-size: 260px 260px, auto, auto, auto;
  background-blend-mode: overlay, screen, multiply, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 60px 80px -60px rgba(0,0,0,0.9);
}

.deep-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lace-soft-pale);
  background-size: 120px 120px;
  opacity: calc(var(--lace-panel-strength, .07) * 0.7);
  pointer-events: none;
  z-index: 0;
}

/* Slow specular — patent leather, glossy buttons. Transform only. */
.luster::after,
.leather-patent::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 38%;
  height: 140%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.16) 48%, transparent 72%);
  transform: translateX(-140%) skewX(-16deg);
  animation: luster-sweep 8.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.leather-patent > *,
.host-card > *,
.menu-col > *,
.hours-card > * {
  position: relative;
  z-index: 2;
}

@keyframes luster-sweep {
  0%, 18% { transform: translateX(-140%) skewX(-16deg); opacity: 0; }
  32% { opacity: 1; }
  55% { transform: translateX(320%) skewX(-16deg); opacity: 0.15; }
  100% { transform: translateX(320%) skewX(-16deg); opacity: 0; }
}

/* -------------------------------------------------------------------------
   Wings — fallen angel. Mirrored pairs, shoulders inward, placed not tiled.
   Loose feathers survive only as the "fallen" detail drifting off a wing.
   ------------------------------------------------------------------------- */

.wing {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  aspect-ratio: 444 / 384;
}

.wing--matte {
  background-image: var(--wing-matte);
}

.wing--lace {
  background-image: var(--wing-lace);
}

/* The drawn wing is a right wing: shoulder at its left, feathers sweeping out
   to the lower right. Mirroring it gives the opposing wing of a pair. */
.wing--left {
  transform: scaleX(-1);
}

.wing--breathe {
  animation: wing-breathe 19s ease-in-out infinite;
}

.wing--left.wing--breathe {
  animation-name: wing-breathe-left;
}

@keyframes wing-breathe {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-1.8deg) translateY(-12px); }
}

@keyframes wing-breathe-left {
  0%, 100% { transform: scaleX(-1) rotate(0deg) translateY(0); }
  50% { transform: scaleX(-1) rotate(-1.8deg) translateY(-12px); }
}

.feather {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.feather--lace {
  background-image: url("media/feather-lace.svg?v=2");
}

.feather--cutwork {
  background-image: url("media/feather-cutwork.svg?v=2");
}

.feather--flip {
  transform: scaleX(-1);
}

.feather--drift {
  animation: feather-drift 14s ease-in-out infinite;
}

.feather--drift-slow {
  animation: feather-drift 22s ease-in-out infinite reverse;
}

@keyframes feather-drift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

.feather--flip.feather--drift {
  animation-name: feather-drift-flip;
}

@keyframes feather-drift-flip {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2deg); }
  50% { transform: scaleX(-1) translateY(-10px) rotate(3deg); }
}

/* -------------------------------------------------------------------------
   Black lace — several weaves. Assigned as dividers, overlays, button edges.
   ------------------------------------------------------------------------- */

.lace-divider,
.lace-chantilly,
.lace-guipure,
.lace-scallop {
  width: 100%;
  pointer-events: none;
}

.lace-divider {
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cg fill='none' stroke='%23110a0c' stroke-width='0.8' opacity='0.72'%3E%3Ccircle cx='10' cy='17' r='7'/%3E%3Ccircle cx='30' cy='17' r='7'/%3E%3Ccircle cx='50' cy='17' r='7'/%3E%3Ccircle cx='70' cy='17' r='7'/%3E%3Ccircle cx='90' cy='17' r='7'/%3E%3Ccircle cx='110' cy='17' r='7'/%3E%3Cpath d='M0 17 L120 17' stroke-dasharray='1 3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.85;
}

.lace-chantilly {
  height: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='52' viewBox='0 0 90 52'%3E%3Cg fill='none' stroke='%23000000' stroke-width='0.7' opacity='0.7'%3E%3Cpath d='M0 26 C12 6 22 6 32 26 C42 46 52 46 62 26 C72 6 82 6 92 26'/%3E%3Cpath d='M8 26 C16 14 24 14 32 26 C40 38 48 38 56 26'/%3E%3Ccircle cx='16' cy='18' r='3.2'/%3E%3Ccircle cx='48' cy='34' r='3.2'/%3E%3Ccircle cx='78' cy='18' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

.lace-guipure {
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cg fill='%23000000' opacity='0.62'%3E%3Cpolygon points='18,2 28,14 18,26 8,14'/%3E%3Ccircle cx='4' cy='14' r='2'/%3E%3Ccircle cx='32' cy='14' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

.lace-scallop {
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'%3E%3Cpath d='M0 0 H28 V6 A14 14 0 0 1 0 6 Z' fill='%23000000' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top;
}

.lace-veil {
  position: relative;
}

.lace-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000000' stroke-width='0.55' opacity='0.28'%3E%3Ccircle cx='32' cy='32' r='14'/%3E%3Ccircle cx='0' cy='32' r='14'/%3E%3Ccircle cx='64' cy='32' r='14'/%3E%3Ccircle cx='32' cy='0' r='14'/%3E%3Ccircle cx='32' cy='64' r='14'/%3E%3Cpath d='M18 18 L46 46 M46 18 L18 46'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

.stud-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  max-width: 220px;
}

.stud-divider span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9c9c9, var(--silver) 60%, #4a4a4a 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

.stud-divider::before,
.stud-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--silver), transparent);
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header.site-header {
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(6, 1, 3, 0.55);
}

header.site-header::before {
  content: "";
  position: absolute;
  left: -66px;
  top: -34px;
  width: 220px;
  height: 190px;
  background: var(--wing-matte) center / contain no-repeat;
  opacity: .55;
  transform: rotate(-8deg);
  pointer-events: none;
}

header.site-header::after {
  content: "";
  display: block;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'%3E%3Cpath d='M0 0 H28 V4 A14 14 0 0 1 0 4 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  opacity: 0.85;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bone);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--bone);
}

.brand-tagline {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood-bright);
}

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

nav.main-nav a {
  font-family: var(--font-label);
  color: var(--bone-dim);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.5s ease, border-color 0.5s ease;
}

nav.main-nav a:hover,
nav.main-nav a:focus-visible {
  color: var(--bone);
  border-bottom-color: var(--oxblood-bright);
}

nav.main-nav a[aria-current="page"] {
  color: var(--bone);
  border-bottom-color: var(--silver);
}

.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  margin: -8px -6px -8px 0;
  padding: 10px 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--bone);
  margin: 7px 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8.5px) rotate(40deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-40deg);
}

main {
  flex: 1;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
  /* Keeps content above the surface washes painted by the section's ::after. */
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  padding: 108px 0 96px;
  text-align: center;
  position: relative;
}

.hero-eyebrow {
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 18px;
}

.hero h1,
.hero-copy-col h1 {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 9vw, 6.4rem);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--bone);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  overflow: visible;
}

.hero-copy-col h1 .title-the {
  font-family: var(--font-lede);
  font-size: 0.52em;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--bone);
}

.hero h1 em,
.hero-copy-col h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--oxblood-bright);
  background-image:
    linear-gradient(180deg, #e4a0a6 0%, #c45c66 36%, #8a2430 72%, #5c141c 100%),
    var(--lace-soft-pale);
  background-size: 100% 100%, 56px 56px;
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 em .title-fallen,
.hero-copy-col h1 em .title-fallen {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.38em;
  letter-spacing: 0.01em;
  line-height: 1.25;
  display: inline-block;
  padding: 0.12em 0.08em 0.22em 0;
  background-image:
    linear-gradient(180deg, #f0b4b8 0%, #c45c66 28%, #7a1c26 100%),
    var(--lace-soft-pale);
  background-size: 100% 100%, 38px 38px;
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(3px 5px 0 #000)
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.75));
}

.hero h1 em .title-angel,
.hero-copy-col h1 em .title-angel {
  -webkit-text-stroke: 1.35px var(--bone);
  paint-order: stroke fill;
}

.hero-tagline {
  font-family: var(--font-lede);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  color: var(--bone-dim);
  margin: 0 0 28px;
}

.hero-copy {
  max-width: 38em;
  margin: 0 auto 42px;
  color: var(--bone);
  font-family: var(--font-times);
  font-style: italic;
  font-size: 1.38rem;
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Home — copy sits above a widescreen photo band
   ------------------------------------------------------------------------- */

.hero-stage {
  padding: 0;
  position: relative;
  min-height: min(78vh, 820px);
  overflow: hidden;
}

.hero-top {
  padding: 72px 0 88px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* S02 sits in the photo band behind this. Left-weighted leather so
     the copy reads; the right side of the still stays open. */
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--ink) 82%, var(--oxblood) 18%) 0%,
      color-mix(in srgb, var(--oxblood) 48%, transparent) 38%,
      color-mix(in srgb, var(--oxblood) 18%, transparent) 68%,
      transparent 100%);
}

.hero-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--relief-hide);
  background-size: 260px 260px;
  opacity: 0.28;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.hero-stage > .lace-chantilly {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

/* A spread pair behind the copy: shoulders meeting at centre, feathers falling
   away to both edges. Kept dark and low so it deepens the panel, never washes
   out the type sitting on it. */
.hero-wings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-wings .wing {
  width: min(54%, 700px);
  top: 2%;
  opacity: .22;
}

.hero-wings .wing--right {
  left: 44%;
}

.hero-wings .wing--left {
  right: 44%;
}

.hero-wings .wing--right.wing--breathe {
  animation-name: hero-wing-right;
}

.hero-wings .wing--left.wing--breathe {
  animation-name: hero-wing-left;
}

@keyframes hero-wing-right {
  0%, 100% { transform: rotate(-27deg) translateY(0); }
  50% { transform: rotate(-31deg) translateY(-14px); }
}

@keyframes hero-wing-left {
  0%, 100% { transform: scaleX(-1) rotate(-27deg) translateY(0); }
  50% { transform: scaleX(-1) rotate(-31deg) translateY(-14px); }
}

.hero-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.hero-copy-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  max-width: 42em;
  padding: 12px 0;
  position: relative;
  z-index: 1;
}

.hero-copy-col .hero-copy {
  margin: 0 0 32px;
}

.hero-copy-col .hero-tagline {
  margin: 0 0 22px;
}

.hero-photo-band {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  container-type: size;
  background-color: #4a161c;
  background-image:
    radial-gradient(ellipse at 30% 12%, rgba(255,255,255,0.14), transparent 42%),
    radial-gradient(ellipse at 80% 88%, rgba(0,0,0,0.5), transparent 50%),
    repeating-linear-gradient(18deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(115deg, rgba(0,0,0,0.2) 0 1px, transparent 1px 4px);
  overflow: hidden;
}

.hero-photo-band::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 38%;
  height: 140%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.12) 48%, transparent 72%);
  transform: translateX(-140%) skewX(-16deg);
  animation: luster-sweep 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

.hero-photo-band .hero-photo,
.hero-photo-band .hero-photo-pixel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  /* S02 is a portrait file with the Anora script running up the long edge.
     90° clockwise lays that script across the hero. */
  width: 100cqh;
  height: 100cqw;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) rotate(90deg);
}

.hero-photo-band .hero-photo-pixel {
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hero-photo-band.has-photo .hero-photo,
.hero-photo-band.has-photo .hero-photo-pixel {
  display: block;
}

.hero-photo-band .hero-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px 28px;
  pointer-events: none;
}

.hero-photo-band .hero-photo-fallback span {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,230,223,0.45);
}

.hero-photo-band.has-photo .hero-photo-fallback {
  display: none;
}

.hero-photo-band.has-photo .wing,
.hero-photo-band.has-photo .feather,
.hero-photo-band.has-photo::after {
  display: none;
}

/* Wings frame the photo from both edges; the loose feathers read as shed. */
.hero-photo-band .wing,
.hero-photo-band .feather {
  z-index: 2;
}

.hero-photo-band .wing--matte {
  width: min(40%, 480px);
  left: -7%;
  bottom: -14%;
  opacity: .34;
}

.hero-photo-band .wing--lace {
  width: min(34%, 400px);
  right: -6%;
  top: -12%;
  opacity: .3;
}

.hero-photo-band .feather--cutwork {
  width: 54px;
  height: 140px;
  left: 34%;
  bottom: 8%;
  opacity: .3;
}

.hero-photo-band .feather--cutwork.feather--drift {
  animation-name: feather-drift-cut;
}

@keyframes feather-drift-cut {
  0%, 100% { transform: rotate(-16deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-14px); }
}

.hero-photo-band .feather--lace {
  width: 44px;
  height: 116px;
  right: 30%;
  top: 14%;
  opacity: .34;
}

.hero-photo-band .feather--lace.feather--flip {
  animation-name: feather-drift-lace;
}

@keyframes feather-drift-lace {
  0%, 100% { transform: scaleX(-1) rotate(10deg) translateY(0); }
  50% { transform: scaleX(-1) rotate(18deg) translateY(-12px); }
}

.hero-photo-lace {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.hero-photo-lace--top {
  top: 0;
}

.hero-photo-lace--bottom {
  bottom: 0;
  transform: scaleY(-1);
}

.host-card {
  z-index: 1;
  border: 1px solid rgba(138,138,138,0.28);
  border-left: 3px solid var(--oxblood-bright);
  padding: 28px 26px 24px;
  overflow: hidden;
}

.host-card::before {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 168px;
  height: 145px;
  background: var(--wing-lace) center / contain no-repeat;
  opacity: .2;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}

.host-kicker {
  margin: 0 0 14px;
  font-family: var(--font-label);
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood-bright);
}

.host-places {
  list-style: none;
  margin: 0;
  padding: 0;
}

.host-places li {
  font-family: var(--font-times);
  font-style: italic;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--bone);
  line-height: 1.3;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding: 6px 0;
}

.host-note {
  margin: 10px 0 22px;
  font-family: var(--font-times);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--bone-dim);
}

.host-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}

.host-stats div {
  margin: 0;
}

.host-stats dt {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 4px;
}

.host-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--bone);
  line-height: 1;
}

.about-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.about-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 0.9fr);
  gap: 48px 56px;
  align-items: center;
}

.about-card {
  max-width: 420px;
}

.menu-section {
  padding-top: 64px;
  position: relative;
  overflow: hidden;
}

.menu-section::before {
  content: "";
  position: absolute;
  right: -60px;
  top: 18px;
  width: 420px;
  height: 364px;
  background: var(--wing-lace) center / contain no-repeat;
  opacity: .3;
  transform: scaleX(-1);
  pointer-events: none;
}

.menu-board {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  margin-top: 40px;
}

.menu-col {
  overflow: hidden;
  padding: 32px 34px 28px;
  border: 1px solid rgba(138,138,138,0.22);
}

.menu-col h3 {
  font-size: 2.5rem;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 8px;
}

.menu-note {
  margin: 0 0 22px;
  font-family: var(--font-times);
  font-style: italic;
  font-size: 1rem;
  color: var(--bone-faint);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "item price"
    "meta price";
  gap: 2px 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,0.22);
  font-style: normal;
}

.menu-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.menu-item {
  grid-area: item;
  color: var(--bone);
  font-family: var(--font-sub);
  font-style: normal;
  font-size: 1.22rem;
}

.menu-item em {
  font-style: italic;
  color: var(--bone-faint);
  font-size: 0.88em;
}

.menu-price {
  grid-area: price;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--oxblood-bright);
  align-self: center;
  white-space: nowrap;
}

.menu-meta {
  grid-area: meta;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.hours-section {
  padding-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.hours-section::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -40px;
  width: 360px;
  height: 312px;
  background: var(--wing-matte) center / contain no-repeat;
  opacity: .26;
  pointer-events: none;
}

.hours-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: 40px;
  align-items: center;
}

.hours-card {
  overflow: hidden;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid rgba(138,138,138,0.28);
}

.hours-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-style: italic;
  color: var(--bone);
  letter-spacing: 0.01em;
}

.hours-caption {
  margin: 8px 0 0;
  font-family: var(--font-label);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver);
}

.hours-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  text-align: left;
}

.hours-editor label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.hours-editor input[type="time"] {
  margin-top: 4px;
}

.close-cta {
  text-align: center;
}

.close-cta .lede {
  margin: 0 auto 30px;
}

.cta-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .about-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .header-inner {
    flex-wrap: wrap;
    align-items: center;
  }
  nav.main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 10px;
  }
  body.nav-open nav.main-nav {
    display: flex;
  }
  nav.main-nav a {
    font-size: 1.02rem;
    padding: 11px 0;
    letter-spacing: 0.14em;
    border-bottom: 1px solid rgba(240, 230, 223, 0.1);
  }
  .hero {
    padding: 76px 0 64px;
  }
}

@media (max-width: 720px) {
  .container,
  .header-inner,
  .footer-inner,
  .hero-grid {
    padding-left: 18px;
    padding-right: 18px;
  }
  .header-inner {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  section {
    padding: 48px 0;
  }
  .hero-stage {
    min-height: 0;
  }
  .hero-top {
    padding: 36px 0 48px;
  }
  .hero-copy-col h1 {
    font-size: clamp(3rem, 14vw, 4rem);
    line-height: 0.95;
    gap: 0 6px;
  }
  .hero-copy {
    font-size: 1.26rem;
    line-height: 1.5;
    margin-bottom: 28px;
  }
  .hero-tagline {
    margin-bottom: 18px;
  }
  .hero-copy-col .btn,
  .cta-row .btn,
  .form-actions .btn {
    width: 100%;
    text-align: center;
  }
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .menu-board,
  .hours-wrap,
  .about-wrap {
    grid-template-columns: 1fr;
  }
  .menu-col {
    padding: 24px 20px 22px;
  }
  .menu-col h3 {
    font-size: 1.85rem;
  }
  .hero-wings .wing {
    width: 74%;
    opacity: .16;
  }
  .hero-photo-band .wing {
    opacity: .24;
  }
  .hero-photo-band .feather {
    display: none;
  }
  .rate-table thead {
    display: none;
  }
  .rate-table,
  .rate-table tbody,
  .rate-table tr,
  .rate-table td {
    display: block;
    width: 100%;
  }
  .rate-table tr {
    padding: 16px 0;
    border-bottom: 1px solid rgba(138, 138, 138, 0.2);
  }
  .rate-table td {
    padding: 2px 0;
    border: 0;
  }
  .rate-table td.rate-price {
    font-size: 1.2rem;
    margin: 4px 0 6px;
  }
  .limits-banner {
    padding: 12px 16px;
    font-size: 0.88rem;
    line-height: 1.45;
    letter-spacing: 0;
  }
  .card {
    padding: 22px 18px;
  }
  .host-places li {
    font-size: 1.42rem;
  }
  .btn {
    padding: 26px 22px 24px;
    letter-spacing: 0.14em;
  }
}

/* -------------------------------------------------------------------------
   Buttons / CTAs — lingerie lace. Cream scallop trim, floral mesh on the
   face, satin (primary) or tulle (outline). Both share the same garment.
   ------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.94rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 30px 44px 28px;
  border-radius: 0;
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, transform 0.25s ease, box-shadow 0.5s ease, filter 0.5s ease;
  border: 1px solid #2a1014;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
}

.btn:active {
  transform: scale(0.98);
}

/* Scalloped lingerie trim — cream lace with oxblood eyelets. Studio can swap the tokens. */
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  height: var(--btn-lace-h);
  background-image: var(--btn-lace);
  background-repeat: repeat-x;
  background-size: var(--btn-lace-tile);
  pointer-events: none;
  z-index: 3;
  transition: background-position 0.6s ease, filter 0.5s ease;
}

.btn::before {
  top: var(--btn-lace-shift);
  background-position: 0 top;
}

.btn::after {
  display: var(--btn-lace-after);
  bottom: var(--btn-lace-shift);
  background-position: 0 top;
  transform: scaleY(-1);
}

.btn:hover::before,
.btn:focus-visible::before {
  background-position: 8px top;
}

.btn:hover::after,
.btn:focus-visible::after {
  background-position: -8px top;
}

.btn-primary {
  color: var(--bone);
  background-color: var(--oxblood);
  background-image:
    var(--lace-soft-pale),
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 38%),
    linear-gradient(180deg, #c45c66 0%, var(--oxblood) 52%, #5a1c24 100%);
  background-size: 88px 88px, auto, auto;
  background-blend-mode: overlay, screen, normal;
  box-shadow:
    inset 0 1px 0 rgba(240,230,223,0.28),
    inset 0 -10px 18px rgba(0,0,0,0.22),
    0 12px 24px rgba(20,4,8,0.38);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--oxblood-hover);
  background-image:
    var(--lace-soft-pale),
    linear-gradient(180deg, rgba(255,255,255,0.26) 0%, transparent 40%),
    linear-gradient(180deg, #d06a72 0%, var(--oxblood-hover) 52%, #6a222a 100%);
  filter: brightness(1.04);
}

.btn-outline {
  color: var(--bone);
  background-color: var(--ink);
  background-image:
    var(--lace-soft-pale),
    radial-gradient(circle, rgba(240,230,223,0.22) 0.65px, transparent 0.75px),
    var(--nap-black),
    linear-gradient(170deg, var(--suede-up), var(--suede-down));
  background-size: 88px 88px, 7px 7px, 200px 200px, auto;
  background-blend-mode: overlay, overlay, overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(240,230,223,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.35),
    0 12px 24px rgba(6,1,3,0.45);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--bone);
  background-color: #171214;
  background-image:
    var(--lace-soft-pale),
    radial-gradient(circle, rgba(240,230,223,0.3) 0.65px, transparent 0.75px),
    var(--nap-black),
    linear-gradient(170deg, var(--suede-up), var(--suede-down));
  filter: brightness(1.08);
}

/* -------------------------------------------------------------------------
   Sections / cards
   ------------------------------------------------------------------------- */

section {
  padding: 72px 0;
}

section + section {
  border-top: 1px solid rgba(138,138,138,0.15);
}

.section-eyebrow {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 10px;
}

h2 {
  font-family: var(--font-sub);
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  font-weight: 400;
  font-style: normal;
  margin: 0 0 18px;
  color: var(--bone);
  letter-spacing: 0.01em;
  line-height: 1.12;
}

h3 {
  font-family: var(--font-sub);
  font-size: 1.85rem;
  font-weight: 400;
  font-style: normal;
  color: var(--bone);
  margin: 0 0 10px;
}

p,
li,
dd {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--bone-dim);
}

p {
  color: var(--bone-dim);
}

.lede {
  font-family: var(--font-lede);
  font-style: italic;
  font-size: clamp(1.42rem, 1.28rem + 0.6vw, 1.65rem);
  line-height: 1.5;
  max-width: 38em;
  color: var(--bone-dim);
}

.card {
  overflow: hidden;
  border: 1px solid rgba(138,138,138,0.22);
  border-radius: var(--radius);
  padding: 28px 30px;
}

.grid {
  display: grid;
  gap: 22px;
}

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

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

@media (max-width: 780px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Pipeline — gated, sequential "how it works" component.
   Shared by index.html (full) and screening.html (.pipeline--compact).
   Nothing skips a step; the chain-link connectors are the point.
   ------------------------------------------------------------------------- */

.pipeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 40px;
}

.pipeline-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

.pipeline-tag {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 6px;
}

.pipeline-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--silver);
  background: radial-gradient(circle at 35% 30%, #2a2224, var(--ink-3) 70%);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(13,10,12,0.35);
}

.pipeline-step--current .pipeline-num {
  border-color: var(--oxblood-bright);
  box-shadow: 0 0 0 4px rgba(184,81,92,0.28);
}

.pipeline-step h3 {
  font-size: 1.08rem;
  margin-bottom: 6px;
}

.pipeline-step p {
  font-size: 0.92rem;
  max-width: 210px;
}

.pipeline-step--optional {
  opacity: 0.85;
}

.pipeline-connector {
  flex: 0 0 44px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 0;
}

.pipeline-connector .link-line {
  width: 100%;
  height: 2px;
  position: relative;
  background: linear-gradient(90deg, transparent, var(--silver) 20%, var(--gunmetal) 50%, var(--silver) 80%, transparent);
}

.pipeline-connector .link-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--silver);
  background: var(--ink-3);
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 780px) {
  .pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .pipeline-step {
    padding: 10px 12px;
  }
  .pipeline-step p {
    max-width: 320px;
  }
  .pipeline-connector {
    flex: 0 0 30px;
    width: 100%;
    height: 30px;
  }
  .pipeline-connector .link-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--silver) 20%, var(--gunmetal) 50%, var(--silver) 80%, transparent);
  }
}

/* Compact modifier — lighter-weight echo of the pipeline for secondary
   placements (e.g. screening.html), reusing the same base component. */
.pipeline--compact .pipeline-num {
  width: 34px;
  height: 34px;
  font-size: 0.82rem;
  margin-bottom: 10px;
}

.pipeline--compact .pipeline-step h3 {
  font-size: 0.94rem;
  margin-bottom: 3px;
}

.pipeline--compact .pipeline-step p {
  font-size: 0.82rem;
  max-width: 180px;
}

.pipeline--compact .pipeline-connector {
  flex-basis: 30px;
  height: 34px;
}

@media (max-width: 780px) {
  .pipeline--compact .pipeline-connector {
    flex-basis: 22px;
    height: 22px;
  }
}

/* -------------------------------------------------------------------------
   Pricing table
   ------------------------------------------------------------------------- */

.rate-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.rate-table th,
.rate-table td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(138,138,138,0.2);
  vertical-align: top;
}

.rate-table th {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 500;
}

.rate-table td.rate-name {
  color: var(--bone);
  font-family: var(--font-sub);
  font-style: normal;
  font-size: 1.15rem;
}

.rate-table td.rate-price {
  color: var(--oxblood-bright);
  font-weight: 600;
  white-space: nowrap;
}

.rate-note {
  font-size: 0.85rem;
  color: var(--bone-faint);
  margin-top: 4px;
}

.terms-strip {
  background: var(--ink-3);
  border: 1px solid rgba(92,26,26,0.4);
  border-left: 3px solid var(--oxblood);
  padding: 24px 28px;
  border-radius: var(--radius);
  margin-top: 34px;
}

.terms-strip ul {
  margin: 0;
  padding-left: 20px;
}

.terms-strip li {
  margin-bottom: 8px;
  color: var(--bone-dim);
}

/* -------------------------------------------------------------------------
   Legible-mode: Limits + Apply pages override the moody defaults.
   High contrast, no texture, large type. Safety surfaces first.
   ------------------------------------------------------------------------- */

.legible {
  background: #14100f;
}

.legible section {
  border-top-color: rgba(180,180,180,0.18);
}

.legible p,
.legible li {
  color: #ece7e4;
  font-size: 1.05rem;
}

.legible .lede {
  color: #f2eeec;
  font-size: 1.15rem;
}

.legible h2 {
  color: #ffffff;
}

.legible .card {
  background: #1c1613;
  border: 1px solid rgba(200,200,200,0.3);
}

.limits-banner {
  background: var(--oxblood);
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.limit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.limit-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #1c1613;
  border: 1px solid rgba(200,200,200,0.25);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 1.08rem;
  color: #f2eeec;
}

.limit-list .mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--oxblood-bright);
  color: var(--oxblood-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.in-scope-list {
  list-style: disc;
  padding-left: 22px;
  color: #ece7e4;
  font-size: 1.05rem;
}

.in-scope-list li {
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   Forms (Apply page — legible mode)
   ------------------------------------------------------------------------- */

form.screening-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

fieldset {
  border: 1px solid rgba(200,200,200,0.28);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
  background: #1c1613;
}

legend {
  font-family: var(--font-sub);
  font-size: 1.15rem;
  font-weight: 400;
  color: #ffffff;
  padding: 0 8px;
}

.field {
  margin-bottom: 18px;
}

.field:last-child {
  margin-bottom: 0;
}

label {
  display: block;
  font-size: 0.92rem;
  color: #f2eeec;
  margin-bottom: 6px;
  font-weight: 500;
}

.field-hint {
  font-size: 0.82rem;
  color: #b8afac;
  margin-top: 4px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="file"],
select,
textarea {
  width: 100%;
  background: #0d0a0c;
  border: 1px solid rgba(200,200,200,0.35);
  color: #f5f2f0;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--oxblood-bright);
  outline-offset: 1px;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #14100f;
  border: 1px solid rgba(200,200,200,0.2);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.radio-option input,
.checkbox-option input {
  margin-top: 3px;
  width: auto;
  flex-shrink: 0;
}

.radio-option label,
.checkbox-option label {
  margin: 0;
  font-weight: 400;
  font-size: 0.95rem;
}

.conditional-block {
  margin-top: 10px;
  margin-left: 30px;
  padding: 14px 16px;
  border-left: 2px solid var(--oxblood);
  background: #14100f;
}

.ack-block {
  background: #1c1613;
  border: 1px solid rgba(200,200,200,0.28);
}

.form-terms {
  border: 1px solid rgba(200,200,200,0.2);
  background: #14100f;
  padding: 14px 16px 8px;
  margin-bottom: 16px;
  max-height: 220px;
  overflow: auto;
}

.form-terms-label {
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b8afac;
  margin: 0 0 10px;
}

.form-terms ul {
  margin: 0;
  padding-left: 18px;
}

.form-terms li {
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.form-note {
  font-size: 0.8rem;
  color: #b8afac;
}

.botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 700px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   FAQ / Etiquette accordions & lists
   ------------------------------------------------------------------------- */

.faq-item {
  border-bottom: 1px solid rgba(138,138,138,0.2);
  padding: 24px 0;
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item h3 {
  margin-bottom: 8px;
}

.rules-list {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.rules-list .card h3 {
  color: var(--oxblood-bright);
  font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

footer.site-footer {
  border-top: 0;
  padding: 0 0 36px;
  overflow: hidden;
}

footer.site-footer::before {
  content: "";
  display: block;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='48' viewBox='0 0 90 48'%3E%3Cg fill='none' stroke='%23000000' stroke-width='0.7'%3E%3Cpath d='M0 24 C12 4 22 4 32 24 C42 44 52 44 62 24 C72 4 82 4 92 24'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Ccircle cx='48' cy='32' r='3'/%3E%3Ccircle cx='78' cy='16' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.8;
  margin-bottom: 28px;
}

footer.site-footer::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: -40px;
  width: 240px;
  height: 208px;
  background: var(--wing-matte) center / contain no-repeat;
  opacity: .3;
  filter: saturate(.7) brightness(.85);
  transform: rotate(4deg);
  pointer-events: none;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.footer-mark {
  width: 26px;
  height: 26px;
  opacity: 0.6;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--font-label);
  color: var(--bone-faint);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-nav a:hover {
  color: var(--bone-dim);
}

.footer-fine {
  font-size: 0.76rem;
  color: var(--bone-faint);
  max-width: 560px;
  line-height: 1.6;
}

.footer-fine strong {
  color: var(--silver);
}

/* -------------------------------------------------------------------------
   Motion — slow fades only
   ------------------------------------------------------------------------- */

.fade-in {
  animation: fadeIn 1.4s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}