/* ==========================================================================
   Eden Shalev — site styles.
   Theme tokens (--om-*) override the Nocturne design-system roles
   (--color-bg / -surface / -text / -accent / -divider) so every .btn, .tag,
   .field and .input from nocturne.css inherits the warm bronze palette.
   ========================================================================== */

:root {
  --om-bg: #e3d6c2;
  --om-surface: #ece0cd;
  --om-surface-hi: #f3e9d9;
  --om-panel: #dccdb7;
  --om-ink: #1e1811;
  --om-ink-2: #33291f;
  --om-bronze: #8a6035;
  --om-bronze-hi: #6d4a26;
  --om-muted: #5f5346;
  --om-sand: #d8c9b1;
  /* Ink for anything sitting on --om-sand. That background is the same light
     tone in both themes, so this must NOT flip with the theme. */
  --om-on-sand: #33291f;
  /* The source design left this as a self-reference (`--om-line: var(--om-line)`),
     a CSS cycle, so every light-theme border and divider drawn from it silently
     resolved to nothing. Restored at the weight the dark theme uses, which is
     what the design intended — see .om-stats for the one place that needs the
     paint confined to the grid gaps. */
  --om-line: color-mix(in srgb, #1e1811 14%, transparent);
  --om-deep: #171110;
  --om-deep-2: #2a1f18;

  /* Design-system role overrides */
  --color-bg: var(--om-bg);
  --color-surface: var(--om-surface);
  --color-text: var(--om-ink);
  --color-accent: var(--om-bronze);
  --color-divider: color-mix(in srgb, var(--om-ink) 26%, transparent);

  --om-shell: 1360px;
  --om-page: 1240px;
  --om-gutter: clamp(24px, 4vw, 48px);
}

html[data-theme="dark"] {
  --om-bg: #17130f;
  --om-surface: #211a14;
  --om-surface-hi: #2a2119;
  --om-panel: #1c1712;
  --om-ink: #f0e7d8;
  --om-ink-2: #ddd0bb;
  --om-bronze: #c79f6c;
  --om-bronze-hi: #e0bc8c;
  --om-muted: #a8927a;
  --om-sand: #d8c9b1;
  --om-line: color-mix(in srgb, #f0e7d8 20%, transparent);
  --om-deep: #100d0b;
  --om-deep-2: #241c16;
}

/* — accessibility preference hooks — */
html[data-a11y-contrast="on"] {
  --om-muted: var(--om-ink);
  --om-line: color-mix(in srgb, var(--om-ink) 60%, transparent);
  --color-divider: color-mix(in srgb, var(--om-ink) 60%, transparent);
}
html[data-a11y-links="on"] a { text-decoration: underline; text-underline-offset: 3px; }
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--om-bg);
  color: var(--om-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--om-bronze); }
a:hover { color: var(--om-bronze-hi); }

@keyframes om-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes om-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes om-glow { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }

/* Sections settle in as they enter — the same rise the hero opens with, so the
   page reads as one movement. Only ever applied when the browser reports
   support for the observer AND motion is allowed (see .js-reveal on <html>). */
.js-reveal .om-reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .om-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
html[data-a11y-motion="off"] .om-reveal,
html[data-a11y-motion="off"] .om-reveal.is-in { opacity: 1; transform: none; }

/* nocturne.css caps images with max-width:100% but leaves height alone, so a
   width/height pair in the markup would render as a fixed (stretched) box. */
img { height: auto; }

/* Icons — an inlined Phosphor sprite, so nothing depends on a CDN.
   Sized in em to match the font-size the design set on each icon. */
.om-sprite { display: none; }
.ic {
  width: 1em; height: 1em; flex: none;
  fill: currentColor; vertical-align: -0.125em;
}
.ic[hidden] { display: none; }

/* — cursor glow ————————————————————————————————————————————————
   A bronze bloom trailing the pointer. It sits above the page and only ever
   lightens (screen), so it can never reduce the contrast of text underneath.
   The light theme uses multiply instead, where screen would be invisible.
   Activated by JS only for a real mouse with motion allowed — see initGlow. */
.om-cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 55;
  width: 380px; height: 380px; margin: -190px 0 0 -190px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .45s ease;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--om-bronze) 42%, transparent) 0%,
    color-mix(in srgb, var(--om-bronze) 16%, transparent) 42%,
    transparent 72%);
  mix-blend-mode: screen;
}
:root:not([data-theme="dark"]) .om-cursor-glow {
  mix-blend-mode: multiply;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--om-bronze) 26%, transparent) 0%,
    color-mix(in srgb, var(--om-bronze) 10%, transparent) 45%,
    transparent 72%);
}
.om-cursor-glow.is-on { opacity: 1; }
/* Never shown when motion is off, on touch input, or when the extra light
   would work against a high-contrast reading mode. */
html[data-a11y-motion="off"] .om-cursor-glow,
html[data-a11y-contrast="on"] .om-cursor-glow { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-a11y-motion="on"]) .om-cursor-glow { display: none; }
}
@media (hover: none), (pointer: coarse) { .om-cursor-glow { display: none; } }

.om-page { min-height: 100vh; background: var(--color-bg); overflow-x: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--om-ink); color: var(--om-bg); text-decoration: none; font-size: 13px;
}
.skip-link:focus-visible { top: 8px; color: var(--om-bg); }

/* — shared marks — */
.om-kicker { display: flex; align-items: center; gap: 12px; }
.om-kicker-rule { width: 46px; height: 1px; background: var(--om-bronze); flex: none; }
.om-kicker-text {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--om-bronze);
}

/* -- header ------------------------------------------------------------- */
.om-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--om-bg) 84%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
/* The rule under the header only earns its place once the page has moved. */
.om-header.is-stuck {
  border-bottom-color: var(--om-line);
  background: color-mix(in srgb, var(--om-bg) 92%, transparent);
}
.om-nav {
  display: flex; align-items: center; gap: 28px;
  max-width: var(--om-shell); margin: 0 auto;
  padding: 15px clamp(24px, 4vw, 48px);
}
.om-brand {
  font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 15px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--om-ink); text-decoration: none; margin-right: auto; white-space: nowrap;
}
.om-brand:hover { color: var(--om-bronze); }
.om-navlink {
  position: relative; padding-block: 4px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--om-muted); text-decoration: none;
  transition: color .2s ease;
}
.om-navlink:hover { color: var(--om-bronze); }
/* A short accent mark for the section you are in — the design's own vocabulary
   for "you are here" (the same rule that sits beside every section kicker). */
.om-navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--om-bronze); transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.om-navlink:hover::after,
.om-navlink[aria-current="true"]::after { transform: scaleX(1); }
.om-navlink[aria-current="true"] { color: var(--om-ink); }
.om-theme-btn { font-size: 17px; color: var(--om-ink); width: 34px; height: 34px; }
.om-nav-cta {
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px;
  padding: 9px 18px; white-space: nowrap;
}

/* -- hero --------------------------------------------------------------- */
.om-hero {
  position: relative; min-height: 94vh; display: flex; align-items: center;
  overflow: hidden; background: var(--color-bg);
}
.om-hero-wash {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%;
  background: linear-gradient(200deg, var(--om-deep-2) 0%, var(--om-deep) 62%, #0b0908 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 30%, #000 60%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 30%, #000 60%);
}
.om-hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: 100%;
  object-fit: cover; object-position: 54% 14%;
  filter: contrast(1.06) saturate(0.94) brightness(0.97) sepia(0.05);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 28%, #000 56%),
    linear-gradient(to top, transparent 0%, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 28%, #000 56%),
    linear-gradient(to top, transparent 0%, #000 20%);
  mask-composite: intersect;
}
.om-hero-glow {
  position: absolute; top: 2%; right: 8%; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #c79f6c 26%, transparent) 0%, transparent 68%);
  filter: blur(40px); animation: om-glow 12s ease-in-out infinite;
}
.om-hero-genre {
  position: absolute; bottom: 26px; right: clamp(24px, 4vw, 48px);
  display: flex; align-items: center; gap: 12px; z-index: 3;
}
.om-hero-genre .om-rule {
  width: 34px; height: 1px; background: color-mix(in srgb, #d8c9b1 55%, transparent);
}
.om-hero-genre .om-label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: color-mix(in srgb, #d8c9b1 72%, transparent);
}
.om-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--om-shell); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px clamp(32px, 5vw, 72px) 90px clamp(28px, 6vw, 120px);
  animation: om-rise 0.9s cubic-bezier(.2,.7,.2,1) both;
}
.om-hero-eyebrow { margin-bottom: 26px; }
.om-hero h1 {
  font-family: Inter, system-ui, sans-serif; font-weight: 500;
  font-size: clamp(52px, 7.6vw, 118px); line-height: 0.9; letter-spacing: -0.045em;
  text-transform: uppercase; margin: 0 0 30px; color: var(--om-ink);
}
.om-hero-lede {
  font-size: 18px; line-height: 1.55; max-width: 32ch;
  color: var(--om-muted); text-wrap: pretty; margin: 0 0 30px;
}
.om-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.om-hero-tags { margin-bottom: 36px; }
.om-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.om-btn-lg { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 28px; }
.om-social { display: flex; gap: 6px; }
.om-hero-social { margin-top: 42px; }
.om-social .btn-icon { font-size: 19px; color: var(--om-ink); }

/* -- label ticker ------------------------------------------------------- */
.om-ticker { padding: 18px 0; overflow: hidden; background: var(--om-deep); }
/* Duration scales with the list: the loop travels half the track, so adding
   names to a fixed duration would speed it up. 56s keeps it an unhurried read. */
.om-ticker-track { display: flex; width: max-content; animation: om-ticker 56s linear infinite; }
.om-ticker-row {
  display: flex; align-items: center; gap: 44px; padding-right: 44px;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: color-mix(in srgb, #d8c9b1 70%, transparent); white-space: nowrap;
}
.om-ticker-row .om-diamond { color: #a97b46; }
/* Pause on hover so a name can actually be read. */
.om-ticker:hover .om-ticker-track { animation-play-state: paused; }

/* Without motion the strip must not simply freeze: the track is wider than the
   screen, so a stopped marquee sits mid-scroll with the first and last names
   sliced off. Collapse it to a centred, wrapped list instead — same content,
   fully readable, no movement. */
.om-ticker.is-static { padding: 16px var(--om-gutter); }
.om-ticker.is-static .om-ticker-track { width: auto; animation: none; }
.om-ticker.is-static .om-ticker-row {
  flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  padding-right: 0; white-space: normal;
}
.om-ticker.is-static .om-ticker-row[aria-hidden="true"] { display: none; }

/* -- stats -------------------------------------------------------------- */
/* The 1px grid gap is the divider: the container's colour shows through it.
   Clipping to the content box keeps that colour out of the section's own
   padding, which would otherwise paint as a slab behind the whole band. */
.om-stats {
  max-width: var(--om-page); margin: 0 auto;
  padding: 72px var(--om-gutter) 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--om-line);
  background-clip: content-box;
}
.om-stat { background: var(--color-bg); padding: 24px 30px; }
.om-stat:first-child { padding-left: 0; }
.om-stat:last-child { padding-right: 0; }
.om-stat-value {
  font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 44px;
  line-height: 1; letter-spacing: -0.03em; color: var(--om-ink);
}
.om-stat-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--om-muted); margin-top: 12px;
}

/* -- section headings --------------------------------------------------- */
.om-section { max-width: var(--om-page); margin: 0 auto; padding: 88px var(--om-gutter) 0; }
.om-section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 32px; flex-wrap: wrap; }
.om-section-head h2 {
  font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; text-transform: uppercase;
  margin: 0; color: var(--om-ink);
}
.om-section-head span {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--om-bronze);
}

/* -- music -------------------------------------------------------------- */
.om-videos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.om-video {
  border: 1px solid var(--om-line); border-radius: 8px; overflow: hidden;
  background: var(--om-deep);
  transition: border-color .18s ease;
}
.om-video:hover, .om-video:focus-within { border-color: var(--om-bronze); }
/* The newest track carries a marker; the badge sits over the player's top-left
   corner, clear of YouTube's own title overlay on the right. */
.om-video { position: relative; }
.om-video-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 6px;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--om-bronze); color: var(--om-deep);
  box-shadow: 0 2px 10px rgba(16, 13, 11, 0.45);
  pointer-events: none;
}

.om-video-frame { position: relative; aspect-ratio: 16 / 9; }
.om-video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 1;
}
/* Sits behind the player. Only ever seen if the embed is blocked (a strict
   host CSP, a tracking blocker, no network) — then the card stays useful. */
.om-video-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; text-align: center; text-decoration: none;
  background: linear-gradient(200deg, var(--om-deep-2), var(--om-deep));
  color: #f0e7d8;
}
.om-video-play {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid #c79f6c; color: #c79f6c; font-size: 20px;
}
.om-video-title { font-size: 15px; letter-spacing: 0.02em; }
.om-video-cta {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, #d8c9b1 70%, transparent);
}

.om-platforms {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px;
}
.om-platform {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--om-line); border-radius: 8px; text-decoration: none;
  color: var(--om-ink); background: var(--color-surface);
  transition: border-color .18s ease, background-color .18s ease,
              transform .18s cubic-bezier(.2,.7,.2,1);
}
.om-platform:hover {
  border-color: var(--om-bronze); background: var(--om-surface-hi);
  color: var(--om-ink); transform: translateY(-2px);
}
.om-platform:active { transform: translateY(0); }
.om-platform:hover .om-platform-arrow { color: var(--om-bronze); transform: translate(2px, -2px); }
.om-platform-icon { font-size: 26px; color: var(--om-bronze); }
.om-platform-text { display: flex; flex-direction: column; gap: 2px; }
.om-platform-name { font-size: 15px; }
.om-platform-meta {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--om-muted);
}
.om-platform-arrow {
  margin-left: auto; font-size: 15px; color: var(--om-muted);
  transition: color .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}

/* -- about -------------------------------------------------------------- */
.om-about {
  max-width: var(--om-page); margin: 0 auto; padding: 96px var(--om-gutter) 0;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center;
}
.om-portrait-wrap { position: relative; }
.om-portrait-glow {
  position: absolute; inset: 6% 8% 26%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #c79f6c 22%, transparent), transparent 70%);
  filter: blur(34px);
}
.om-portrait {
  position: relative; width: 100%; display: block;
  filter: contrast(1.05) saturate(0.92) sepia(0.05);
  -webkit-mask-image: radial-gradient(115% 100% at 50% 42%, #000 52%, transparent 88%);
  mask-image: radial-gradient(115% 100% at 50% 42%, #000 52%, transparent 88%);
}
.om-about h2 {
  font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; margin: 0 0 24px;
  text-wrap: pretty; color: var(--om-ink);
}
.om-about-body {
  font-size: 17px; line-height: 1.7; color: var(--om-ink-2); text-wrap: pretty; max-width: 62ch;
  margin: 0;
}
.om-about .om-kicker { margin-bottom: 22px; }
.om-about-tags { margin-top: 26px; }
/* The sand chip keeps its light background in both themes, so its text must
   stay dark in both. Using --om-ink-2 here (as the source design did) put
   light-on-light in the dark theme and the labels became unreadable. */
.tag-sand { background: var(--om-sand); color: var(--om-on-sand); }

/* -- booking ------------------------------------------------------------ */
.om-booking { margin-top: 104px; background: var(--om-panel); border-top: 1px solid var(--om-line); }
.om-booking-inner {
  max-width: var(--om-page); margin: 0 auto;
  padding: 76px var(--om-gutter) 84px;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px;
}
.om-booking .om-kicker { margin-bottom: 22px; }
.om-booking h2 {
  font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.03em; text-transform: uppercase;
  margin: 0 0 20px; line-height: 0.95; color: var(--om-ink);
}
.om-booking-lede { font-size: 16px; line-height: 1.65; color: var(--om-muted); max-width: 34ch; }
.om-mail-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 15px;
  color: var(--om-ink); text-decoration: none;
  border-bottom: 1px solid var(--om-bronze); padding-bottom: 3px;
}
.om-mail-link:hover { color: var(--om-bronze); }
.om-mail-link i { font-size: 18px; color: var(--om-bronze); }
.om-booking-social { margin-top: 28px; }

.om-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.om-form .field-wide { grid-column: 1 / -1; }

/* Required fields are marked, and a field only turns red once the visitor has
   actually engaged with it — :user-invalid, not :invalid, so an untouched
   empty form is never shown as broken. */
.field > label .req { color: var(--om-bronze); margin-left: 2px; }
.om-form .input:user-invalid {
  border-color: #b4472f;
  background: color-mix(in srgb, #b4472f 6%, var(--color-surface));
}
html[data-theme="dark"] .om-form .input:user-invalid { border-color: #e08163; }
.field-error {
  display: none; margin-top: 5px; font-size: 11.5px; line-height: 1.4;
}
.om-form .input:user-invalid ~ .field-error { display: block; color: #973924; }
html[data-theme="dark"] .om-form .input:user-invalid ~ .field-error { color: #e08163; }
/* Honeypot — off-canvas rather than display:none, which some bots skip. */
.om-trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.om-captcha .om-captcha-row { display: flex; align-items: center; gap: 10px; }
.om-captcha-q {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 14px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--om-line); background: var(--om-surface-hi);
  color: var(--om-ink); font-size: 15px; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; user-select: none;
}
.om-captcha-new { width: 36px; height: 36px; padding: 0; font-size: 15px; color: var(--om-muted); flex: none; }
.om-captcha-new:hover { color: var(--om-bronze); }
.om-captcha-input { max-width: 140px; }
.om-captcha.is-ok .om-captcha-q { border-color: var(--om-bronze); color: var(--om-bronze); }

.om-form-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 4px;
}
.om-form-note { font-size: 12px; color: var(--om-muted); }
.om-submit { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 30px; }

.om-sent {
  border: 1px solid var(--om-bronze); border-radius: 8px; padding: 34px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  background: var(--om-surface-hi);
}
.om-sent[hidden], .om-form[hidden] { display: none; }
.om-sent-icon { font-size: 34px; color: var(--om-bronze); }
.om-sent h3 { margin: 0; font-size: 24px; color: var(--om-ink); }
.om-sent p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--om-muted); max-width: 46ch; }
.om-sent p strong { color: var(--om-ink); }
.om-sent pre {
  width: 100%; margin: 0; padding: 16px; border-radius: 8px;
  background: var(--om-panel); border: 1px solid var(--om-line);
  font: 13px/1.7 ui-monospace, monospace; color: var(--om-ink-2);
  white-space: pre-wrap; overflow-x: auto;
}
.om-sent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.om-btn-sm { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; }

/* -- accessibility dock ------------------------------------------------- */
.om-a11y {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.om-a11y-panel {
  width: 252px; padding: 16px; border-radius: 8px;
  background: var(--om-surface); border: 1px solid var(--om-line);
  box-shadow: 0 14px 34px rgba(20,16,11,0.28);
  display: flex; flex-direction: column; gap: 12px;
}
.om-a11y-panel[hidden] { display: none; }
.om-a11y-head { display: flex; align-items: center; gap: 8px; }
.om-a11y-head span {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--om-bronze); margin-right: auto;
}
.om-a11y-close { font-size: 16px; padding: 2px 6px; color: var(--om-ink); }
.om-a11y-row { display: flex; align-items: center; gap: 8px; }
.om-a11y-row > span { font-size: 13px; color: var(--om-ink); margin-right: auto; }
.om-a11y-step { width: 34px; height: 34px; padding: 0; font-size: 15px; color: var(--om-ink); }
.om-a11y-toggle {
  justify-content: flex-start; gap: 10px; font-size: 13px; padding: 10px 12px; color: var(--om-ink);
}
.om-a11y-toggle i { font-size: 17px; }
.om-a11y-state {
  margin-left: auto; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--om-bronze);
}
.om-a11y-reset { font-size: 12px; align-self: flex-start; }
.om-a11y-fab {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; font-size: 22px; color: var(--om-bg); background: var(--om-ink);
  border: 1px solid var(--om-ink); box-shadow: 0 8px 20px rgba(20,16,11,0.3);
  transition: background-color .18s ease, border-color .18s ease;
}
.om-a11y-fab:hover { background: var(--om-bronze); border-color: var(--om-bronze); }

/* -- footer ------------------------------------------------------------- */
.om-footer { background: var(--om-deep); }
.om-footer-inner {
  max-width: var(--om-page); margin: 0 auto; padding: 34px var(--om-gutter);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.om-footer-brand {
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--om-sand);
}
.om-footer-mail {
  font-size: 13px; color: color-mix(in srgb, #d8c9b1 78%, transparent);
  text-decoration: none; margin-right: auto;
}
.om-footer-mail:hover { color: #c79f6c; }
/* Clears the fixed accessibility button, which otherwise sits on top of the
   last social link once the page is scrolled to the bottom. */
.om-footer-social { display: flex; gap: 18px; font-size: 20px; padding-right: 56px; }
.om-footer-social a { color: color-mix(in srgb, #d8c9b1 70%, transparent); }
.om-footer-social a:hover { color: #c79f6c; }

/* == responsive ========================================================== */
@media (max-width: 1024px) {
  .om-about, .om-booking-inner { grid-template-columns: 1fr; gap: 40px; }
  .om-about { padding-top: 80px; }
  .om-portrait-wrap { max-width: 420px; margin: 0 auto; }
  .om-booking { margin-top: 80px; }
}

@media (max-width: 860px) {
  /* The design is a desktop artboard: its hero puts the photo behind the copy.
     On a narrow screen that would sit dark-on-dark under the text, so the
     hero stacks instead — copy first, photo as a band beneath it. */
  .om-hero { min-height: 0; display: flex; flex-direction: column; }
  .om-hero-inner { order: 1; padding: 60px var(--om-gutter) 40px; }
  .om-hero-photo {
    order: 2; position: static; width: 100%; height: 96vw; max-height: 620px;
    object-position: 54% 10%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%);
    mask-composite: add;
  }
  .om-hero-wash { display: none; }
  .om-hero-lede, .om-booking-lede { max-width: 46ch; }
  .om-hero-glow { width: 78%; right: -10%; top: 26%; }
  .om-hero-genre { bottom: 14px; }
  .om-stats { grid-template-columns: 1fr; padding-top: 56px; }
  .om-stat { padding: 20px 0; }
  .om-section { padding-top: 72px; }
  .om-form { grid-template-columns: 1fr; }
  .om-form .field-wide { grid-column: auto; }
}

@media (max-width: 620px) {
  .om-nav { gap: 12px; padding-inline: 18px; }
  .om-brand { font-size: 12px; letter-spacing: 0.14em; }
  .om-navlink { font-size: 11px; letter-spacing: 0.1em; }
  .om-nav-cta { padding: 8px 12px; font-size: 10px; letter-spacing: 0.08em; }
  .om-theme-btn { width: 30px; height: 30px; font-size: 15px; }
  .om-sent { padding: 24px; }
  .om-footer-inner { gap: 14px; }
  .om-footer-mail { margin-right: 0; flex-basis: 100%; }
  .om-a11y { right: 12px; bottom: 12px; }
  .om-a11y-panel { width: min(252px, calc(100vw - 24px)); }
}

/* The OS setting is the default; the accessibility panel's motion toggle
   overrides it in both directions (it stamps data-a11y-motion on <html>). */
@media (prefers-reduced-motion: reduce) {
  html:not([data-a11y-motion="on"]) { scroll-behavior: auto; }
  html:not([data-a11y-motion="on"]) .om-ticker-track,
  html:not([data-a11y-motion="on"]) .om-hero-glow,
  html:not([data-a11y-motion="on"]) .om-hero-inner { animation: none; }
}

@media print {
  .om-header, .om-a11y, .om-ticker, .om-hero-photo, .om-hero-wash, .om-hero-glow { display: none; }
  body { background: #fff; color: #000; }
}