/* ==========================================================================
   LATE NIGHT BRASSERIE — base: tokens, reset, type, atmosphere, header, nav, intro
   ========================================================================== */
:root {
  --ink: #0f1a13;
  --night: #080c0a;
  --night-2: #0b110d;
  --night-3: #121a15;
  --cream: #efe0c6;
  --cream-2: #f8f0e2;
  --muted: #bfb39c;
  --line: rgba(239, 224, 198, .12);
  --line-2: rgba(239, 224, 198, .24);
  --amber: #f4a922;
  --orange: #d98236;
  --orange-d: #b05a24;
  --red: #c9453a;
  --green: #8dbe45;
  --brass: #c8a45a;
  --brass-hi: #f1d796;
  --brass-lo: #7d5d24;
  --err: #ffa292;
  --paper: #f2e6cf;
  --paper-2: #e6d3b1;
  --paper-muted: #5a4934;
  --ff-d: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-s: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-n: "Tilt Neon", "Manrope", sans-serif;
  --ff-b: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --r: 18px;
  --r-lg: 28px;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --hdr: 72px;
  --hdr-c: 78px; /* compact header: nav row + the locomotive's lane */
  --mbar: 0px;
  --focus: var(--amber);
}
@media (max-width: 859.98px) {
  :root { --hdr: 64px; --hdr-c: 70px; --mbar: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  color: var(--cream);
  font: 400 1rem/1.65 var(--ff-s);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  padding-bottom: var(--mbar);
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
.is-locked body { position: fixed; left: 0; right: 0; overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--ff-d); font-weight: 600; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
main:focus { outline: none; }
.sec[tabindex="-1"]:focus { outline: none; } /* a section reached from the mobile nav takes the focus (main.js goTo) */
::selection { background: var(--amber); color: var(--ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
/* notched phones in landscape (viewport-fit=cover): content stays clear of the sensor housing */
.wrap { padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
/* single-column grids never grow past the viewport because of a wide child */
.hero__grid, .why__list, .best__grid, .beers__grid, .beer-labels, .reviews__layout, .events__grid, .events__list,
.about__grid, .reserve__grid, .contacts, .gift__grid, .steps, .loc__grid, .foot__grid, .fgrid, .bk-lines { grid-template-columns: minmax(0, 1fr); }
.noscript { position: fixed; inset: auto 0 0; z-index: 400; margin: 0; padding: 14px; background: var(--amber); color: var(--ink); text-align: center; font-weight: 700; }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 500;
  padding: 12px 18px; border-radius: 999px; background: var(--amber); color: var(--ink);
  font-weight: 800; text-decoration: none; transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- image placeholder (onerror) ---------- */
.ph {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px;
  background:
    radial-gradient(circle at 50% 40%, rgba(244, 169, 34, .35), transparent 62%),
    repeating-linear-gradient(135deg, rgba(239, 224, 198, .05) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #2a1a10, #120d09);
  color: var(--amber);
}
.ph .ic { width: 38%; height: 38%; max-width: 72px; max-height: 72px; stroke-width: 1.2; filter: drop-shadow(0 0 8px rgba(244, 169, 34, .6)); }

/* ---------- type helpers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .85em;
  font: 600 .8rem/1.2 var(--ff-b); letter-spacing: .26em; text-transform: uppercase; color: var(--brass);
}
.kicker::before { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass)); }
.sec { position: relative; padding: clamp(76px, 10vw, 150px) 0; scroll-margin-top: calc(var(--hdr) - 8px); }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .kicker { justify-content: center; }
.sec-head--center .kicker::after { content: ""; width: 30px; height: 1px; background: linear-gradient(270deg, transparent, var(--brass)); }
.sec-title { margin-top: 16px; font-size: clamp(2.05rem, 4.7vw, 3.9rem); font-weight: 560; font-variation-settings: "opsz" 120; color: var(--cream-2); }
.sec-title--md { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.sec-intro { margin-top: 18px; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.12rem); }

/* split words (reveal) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .14em; margin: -.06em -.02em -.14em; }
.w__i { display: inline-block; }
/* plain ampersand inside Fraunces headings (its swash "&" reads like "®") */
.amp { font-family: var(--ff-s); font-style: normal; font-weight: 500; font-size: .88em; letter-spacing: 0; }

/* ---------- badge (logo on cream) ----------
   The light logo files are transparent (192 px PNG) or printed on this exact cream (640 px JPEG),
   so they sit on the disc as they are. */
.badge {
  position: relative; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: #eedec4; isolation: isolate; overflow: hidden;
}
.badge img { width: 92%; height: 92%; object-fit: contain; }
.badge .ph { min-height: 0; border-radius: 50%; }

/* ---------- buttons ---------- */
.btn {
  --bh: 52px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--bh); padding: 0 1.55em; border-radius: 999px; border: 1px solid transparent;
  font: 700 .95rem/1.1 var(--ff-s); letter-spacing: .015em; text-decoration: none; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), box-shadow .35s, border-color .3s, color .3s, background-color .3s;
}
.btn .ic { width: 1.2em; height: 1.2em; transition: transform .35s var(--ease); }
.btn:hover .ic:last-child { transform: translateX(3px); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--brass {
  color: var(--ink);
  background: linear-gradient(180deg, #f7df9f 0%, #d9b261 52%, #b38a3c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 12px 32px -12px rgba(244, 169, 34, .7);
}
.btn--brass:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 16px 44px -10px rgba(244, 169, 34, .85); }
.btn--ghost { color: var(--cream); border-color: var(--line-2); background: rgba(239, 224, 198, .04); }
.btn--ghost::after { background: linear-gradient(105deg, transparent 30%, rgba(244, 169, 34, .22) 50%, transparent 70%); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-hi); }
.btn--gold { color: var(--brass-hi); background: #0a0a08; border-color: rgba(200, 164, 90, .6); box-shadow: 0 0 0 1px rgba(200, 164, 90, .12) inset, 0 14px 36px -16px rgba(200, 164, 90, .6); }
.btn--gold::after { background: linear-gradient(105deg, transparent 30%, rgba(241, 215, 150, .3) 50%, transparent 70%); }
.btn--gold:hover { border-color: var(--brass-hi); }
.btn--sm { --bh: 44px; padding: 0 1.15em; font-size: .88rem; }
.btn--block { width: 100%; }
.iconbtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(239, 224, 198, .04); color: var(--cream);
  transition: border-color .3s, color .3s, background-color .3s, transform .3s var(--ease);
}
.iconbtn:hover { border-color: var(--brass); color: var(--brass-hi); }
.iconbtn:active { transform: scale(.94); }
.linkbtn { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.linkbtn:hover { color: var(--cream); }
/* "pause animations" switch (aria-pressed): text pill in the footer, round icon by the ticker */
.mtoggle {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 13px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(239, 224, 198, .04); color: var(--cream);
  font: 700 .85rem/1.2 var(--ff-s); transition: border-color .3s, color .3s, background-color .3s;
}
.mtoggle .ic { width: 18px; height: 18px; color: var(--amber); stroke-width: 2.2; }
.mtoggle:hover { border-color: var(--brass); color: var(--brass-hi); }
.mtoggle[aria-pressed="true"] { border-color: var(--amber); color: var(--brass-hi); background: rgba(244, 169, 34, .12); box-shadow: inset 0 0 0 1px rgba(244, 169, 34, .45); }
.mtoggle--icon { justify-content: center; width: 44px; padding: 0; }

/* ---------- atmosphere: vignette + film grain (under the fixed header, action bar and basket) ---------- */
.atmo { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.atmo__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 125% 95% at 50% 45%, transparent 58%, rgba(0, 0, 0, .38) 100%); }
.atmo__grain { position: absolute; inset: 0; overflow: hidden; opacity: .065; }
.atmo__noise {
  position: absolute; inset: -80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.motion .atmo__noise { animation: grain .9s steps(5) infinite; }
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-34px, 22px, 0); }
  40% { transform: translate3d(28px, -40px, 0); }
  60% { transform: translate3d(-18px, -14px, 0); }
  80% { transform: translate3d(40px, 30px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 84px; transition: transform .5s var(--ease); }
.hdr::before { content: ""; position: absolute; inset: 0 0 -30px; background: linear-gradient(180deg, rgba(5, 8, 6, .75), transparent); pointer-events: none; }
.hdr__bg {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s;
  background: linear-gradient(180deg, rgba(8, 12, 10, .94), rgba(8, 12, 10, .84));
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  border-bottom: 1px solid rgba(200, 164, 90, .24);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
}
.hdr__in { position: relative; height: 100%; display: flex; align-items: center; gap: 18px; transition: transform .5s var(--ease); }
/* compact: a two-tier bar (--hdr-c tall): the nav row on top, the locomotive's lane under it */
.hdr.is-compact { transform: translateY(-6px); }
.hdr.is-compact .hdr__bg { opacity: 1; }
.hdr.is-compact .hdr__in { transform: translateY(-9px); }
.hdr.is-compact .brand__badge { transform: scale(.86); }
.hdr.is-compact .burger { transform: scale(.92); }
.hdr__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--orange-d), var(--amber), var(--brass-hi)); box-shadow: 0 0 10px rgba(244, 169, 34, .7); opacity: 0; transition: opacity .4s; }
.hdr.is-compact .hdr__progress { opacity: 1; }

/* the brass line is a rail: a little burger-locomotive (the logo in brass line art) rides it,
   wheels on the line, in a lane of its own that the logo and the nav never reach */
.hdr__rail { position: absolute; left: 0; right: 0; bottom: 1px; height: 26px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hdr.is-compact .hdr__rail { opacity: 1; }
.loco { position: absolute; left: 0; bottom: 0; width: 36px; height: 22px; will-change: transform; filter: drop-shadow(0 0 3px rgba(244, 169, 34, .55)); }
.loco__svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--brass-hi); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.motion .loco__svg { transition: transform .35s var(--ease); }
.loco.is-rev .loco__svg { transform: scaleX(-1); }
.lo-bun { stroke: var(--orange); fill: rgba(217, 130, 54, .22); }
.lo-seed { stroke: var(--cream-2); stroke-width: 1.7; }
.lo-let { stroke: var(--green); }
.lo-win { fill: rgba(244, 169, 34, .5); stroke: var(--amber); }
.lo-lamp { fill: #fff1c9; stroke: var(--amber); stroke-width: .8; }
.lo-wh { fill: #0b0907; stroke: var(--brass); }
.lo-smoke { stroke: rgba(239, 224, 198, .6); }
.loco__puffs { position: absolute; inset: 0; }
.lpuff {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 230, .95) 0 30%, rgba(239, 224, 198, .4) 55%, transparent 72%);
  opacity: 0; animation: lpuff .9s ease-out forwards;
}
@keyframes lpuff {
  0% { opacity: .9; transform: translate3d(var(--x), var(--y), 0) scale(.45); }
  100% { opacity: 0; transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) - var(--dy)), 0) scale(1.7); }
}
/* Where the browser can tie an animation to the page's scroll, the brass line fills and the train
   rides with the scroll itself, moved by the browser along with the page: as smooth as the scroll on
   phones (JB.scrollRide; main.js and fx.js then leave their position alone). A dialog pins the page and
   its scroll reads 0 meanwhile: both hold the spot they had (--scroll-p, set by JB.modal). */
@supports (animation-timeline: scroll()) {
  .hdr__rail { container-type: inline-size; }
  .loco { animation: loco-ride linear both; animation-timeline: scroll(root block); }
  .hdr__progress { animation: rail-fill linear both; animation-timeline: scroll(root block); }
  .is-locked .loco { animation: none; transform: translate3d(calc((100cqw - 100%) * var(--scroll-p, 0)), 0, 0); }
  .is-locked .hdr__progress { animation: none; transform: scaleX(var(--scroll-p, 0)); }
  @keyframes loco-ride { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(100cqw - 100%), 0, 0); } }
  @keyframes rail-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; margin-right: auto; border-radius: 999px; }
.brand__badge { width: 50px; height: 50px; box-shadow: 0 0 0 2px var(--brass), 0 0 0 5px rgba(200, 164, 90, .16), 0 0 26px rgba(244, 169, 34, .38); transition: transform .5s var(--ease); }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__j { font: italic 600 1.32rem/1 var(--ff-d); color: var(--cream-2); }
.brand__bb { margin-top: 5px; font: 600 .75rem/1 var(--ff-b); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; color: var(--brass); }

.hdr__nav { display: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 600; font-size: .92rem; color: rgba(239, 224, 198, .86); text-decoration: none; transition: color .25s;
}
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--amber); box-shadow: 0 0 8px var(--amber), 0 0 16px rgba(244, 169, 34, .6);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--brass-hi); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.hdr__end { display: flex; align-items: center; gap: 10px; }
.hdr__cta { display: none; }

.lang { display: inline-flex; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8, 12, 10, .5); }
/* real links (?lang=fr / ?lang=nl, crawlable); the current one is aria-current */
.lang__btn {
  position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 999px;
  font: 600 .8rem/1 var(--ff-b); letter-spacing: .12em; color: var(--muted); text-decoration: none; transition: color .25s;
}
.lang__btn::before {
  content: ""; position: absolute; inset: 6px 4px; z-index: -1; border-radius: 999px;
  background: linear-gradient(180deg, #f3d995, #c9a254); opacity: 0; transform: scale(.7);
  transition: opacity .3s, transform .35s var(--ease);
}
.lang__btn[aria-current="true"] { color: var(--ink); }
.lang__btn[aria-current="true"]::before { opacity: 1; transform: none; }
.lang__btn:hover { color: var(--cream); }
.lang__btn[aria-current="true"]:hover { color: var(--ink); }

.burger { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(8, 12, 10, .5); display: grid; place-content: center; gap: 5px; transition: transform .5s var(--ease); }
.burger__l { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .3s var(--ease); }
.burger__l:nth-child(3) { width: 13px; }
.burger:hover .burger__l:nth-child(3) { transform: scaleX(1.5); transform-origin: 0 50%; }

@media (min-width: 600px) {
  .hdr__cta { display: inline-flex; }
}
@media (min-width: 1100px) {
  .hdr__nav { display: block; }
  .burger { display: none; }
}
@media (max-width: 859.98px) {
  .hdr { height: 76px; }
  .hdr.is-compact { transform: translateY(-6px); }
  .hdr.is-compact .hdr__in { transform: translateY(-7px); }
  .brand__badge { width: 44px; height: 44px; }
  .brand__j { font-size: 1.15rem; }
  .hdr__rail { height: 22px; }
  .loco { width: 30px; height: 18px; }
}
@media (max-width: 599.98px) { .hdr__cta { display: none; } }
/* short screens, scrolling down: the header steps aside (main.js) and the menu tabs stick to the top */
@media (max-height: 600px) {
  html.hdr-away { --hdr-c: 0px; }
  html.hdr-away .hdr { transform: translate3d(0, -100%, 0); }
}
@media (max-width: 379.98px) {
  .brand { gap: 9px; }
  .brand__bb { letter-spacing: .06em; }
  .hdr__in { gap: 8px; }
  .hdr__end { gap: 6px; }
}
@media (max-width: 339.98px) {
  .brand { gap: 7px; }
  .brand__badge { width: 40px; height: 40px; }
  .brand__bb { letter-spacing: .02em; }
}

/* ---------- mobile nav (dialog) ---------- */
.mnav {
  position: fixed; inset: 0; z-index: 100; display: flex; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(244, 169, 34, .16), transparent 62%),
    radial-gradient(70% 50% at 0% 100%, rgba(176, 90, 36, .18), transparent 60%),
    rgba(6, 9, 7, .98);
  opacity: 0; transition: opacity .38s var(--ease);
}
.mnav.is-open { opacity: 1; }
.mnav__panel { width: 100%; max-width: 640px; margin: 0 auto; padding: 14px var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 26px; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.mnav__close { width: 48px; height: 48px; }
.mnav__links li { opacity: 0; transform: translateY(22px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--i) * 55ms + 90ms); }
.mnav.is-open .mnav__links li { opacity: 1; transform: none; }
.mnav__links a {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line);
  font: 560 clamp(1.9rem, 8.4vw, 2.9rem)/1.1 var(--ff-d); color: var(--cream-2); text-decoration: none;
}
.mnav__links a:hover { color: var(--amber); }
.mnav__n { font: 600 .78rem/1 var(--ff-b); letter-spacing: .2em; color: var(--brass); }
.mnav__contact { display: grid; gap: 10px; color: var(--muted); font-size: .95rem; }
.mnav__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); text-decoration: none; font-weight: 600; }
.mnav__contact .ic { color: var(--amber); }

/* ---------- intro (lights on) ---------- */
.intro { display: none; }
.intro-pending .intro {
  position: fixed; inset: 0; z-index: 300; display: grid !important; place-items: center; align-content: center; gap: 22px;
  background: #040605; animation: introKill .01s 2.4s forwards;
}
.intro__glow {
  position: absolute; left: 50%; top: 46%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 110, .55) 0%, rgba(244, 169, 34, .22) 18%, rgba(176, 90, 36, .08) 38%, transparent 60%);
  opacity: 0; transform: scale(.08);
}
.intro__bulb { position: relative; width: 84px; height: 112px; }
.intro__glass { fill: rgba(255, 220, 160, .04); stroke: rgba(239, 224, 198, .35); stroke-width: 2.5; }
.intro__fil { fill: none; stroke: #ffcf7a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .12; }
.intro__cap { fill: #5b4a2c; }
.intro__name { position: relative; font: italic 560 clamp(1.6rem, 5vw, 2.4rem)/1 var(--ff-d); color: var(--cream-2); opacity: 0; transform: translateY(10px); text-align: center; }
.intro__skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--muted); font-size: .85rem; }
.intro.is-play .intro__fil { animation: filament .8s steps(1) forwards; }
.intro.is-play .intro__glow { animation: glowUp 1s .3s var(--ease) forwards; }
.intro.is-play .intro__name { transition: opacity .5s .4s, transform .7s .4s var(--ease); opacity: 1; transform: none; }
.intro.is-out { opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility 0s .55s; }
@keyframes filament {
  0% { opacity: .12; } 12% { opacity: 1; } 20% { opacity: .2; } 30% { opacity: 1; } 38% { opacity: .35; } 46%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #ffcf7a) drop-shadow(0 0 16px #f4a922); }
}
@keyframes glowUp { to { opacity: 1; transform: scale(1); } }
@keyframes introKill { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- reveal system (only when motion is allowed) ---------- */
.motion [data-reveal]:not([data-reveal="stagger"]) { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal="stagger"] > * { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
.motion [data-reveal] .sec-title .w__i { transform: translate3d(0, 108%, 0); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
.motion [data-reveal].is-in .sec-title .w__i { transform: none; }

/* pause decorative loops off-screen / in background tabs */
.is-off *, .is-off *::before, .is-off *::after,
.is-hidden *, .is-hidden *::before, .is-hidden *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}