/* ============================================================================
   Heavy on the Hookah — redesign mockup
   Carries the live token system forward. What changes is layout and content
   structure, not the architecture.
   No cascade layers here: the ground is locked with !important so a host
   wrapper can't repaint it.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

:root {
  --ink-950: #08080A;
  --ink-900: #0C0C0F;
  --ink-850: #101014;
  --ink-800: #15161A;

  --gold-100: #FBF1D8;
  --gold-300: #F0D79A;
  --gold-400: #E3C275;
  --gold-500: #D0A64C;
  --gold-600: #B98A2A;
  --gold-700: #8A6416;
  --gold-grad: linear-gradient(135deg, #FBF1D8, #E3C275 40%, #C79B3F 70%, #8A6416);

  --ember: #E2703A;

  --text: #F2F1EE;
  --text-soft: #C7C5C0;
  --text-mute: #948F87;

  --line: rgba(227, 194, 117, 0.15);
  --line-soft: rgba(255, 255, 255, 0.07);

  --display: "Fraunces", Georgia, serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --s-1: .75rem; --s0: 1rem; --s1: 1.5rem; --s2: 2.5rem; --s3: 4rem;
  --s4: clamp(4rem, 3rem + 5vw, 7rem);

  --wrap: 78rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
  accent-color: var(--gold-500);
}

/* Ground lock — unlayered AND !important, so nothing repaints it */
html { background-color: #08080A !important; scroll-behavior: smooth; }
body {
  background-color: #08080A !important;
  color: #C7C5C0 !important;
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  color: #F2F1EE !important;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  text-wrap: balance;
}
a { color: var(--gold-400); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 48rem); margin-inline: auto; }
.section { position: relative; z-index: 2; padding-block: var(--s4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .74rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-400);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600)); }

/* Section heads are left-aligned now. The live site centers everything, which
   flattens the hierarchy and reads as "no layout decision was made". */
.head { max-width: 40rem; margin-bottom: var(--s2); }
.head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); margin-block: .6rem .75rem; }
.head p { color: var(--text-mute); font-size: 1.1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .9em 1.6em; border: 0; border-radius: 99px;
  font-weight: 650; line-height: 1; text-decoration: none; cursor: pointer;
  background: var(--gold-grad); color: #1A1305;
  box-shadow: 0 8px 24px -10px rgba(211,166,76,.7), inset 0 1px 0 rgba(255,255,255,.35);
  transition: translate .25s var(--ease), filter .25s var(--ease);
}
.btn:hover { translate: 0 -2px; filter: brightness(1.06); }
.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(8px);
}
.btn--ghost:hover { color: var(--gold-300); border-color: rgba(227,194,117,.45); filter: none; }
.btn--lg { padding: 1.05em 2em; font-size: 1.1rem; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  border-bottom: 1px solid transparent; transition: background .4s, border-color .4s;
}
.nav[data-stuck="true"] {
  background: rgba(12,12,15,.75); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}
.nav__in { display: flex; align-items: center; gap: var(--s1); height: 4.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; margin-right: auto;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  color: var(--text); text-decoration: none; line-height: 1.05;
}
.brand svg { width: 2rem; height: 2rem; }
.brand small {
  display: block; font-family: var(--body); font-size: .58rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-500);
}
.nav__links { display: none; gap: .3rem; }
.nav__links a {
  padding: .5rem .8rem; border-radius: .5rem; font-size: .94rem;
  color: var(--text-soft); text-decoration: none;
}
.nav__links a:hover { color: var(--text); background: rgba(227,194,117,.07); }
@media (min-width: 62em) { .nav__links { display: flex; } }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative; display: grid; align-items: end;
  min-height: min(48rem, 100svh);
  padding-block: 9rem var(--s3);
  overflow: hidden; isolation: isolate;
}
.hero__img { position: absolute; inset: 0; z-index: -3; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.45) 30%, rgba(8,8,10,.82) 70%, #08080A 100%),
    radial-gradient(90% 70% at 15% 70%, rgba(8,8,10,.75), transparent 70%);
}
/* Ember glow — the coal is the light source, not a decorative gradient */
.hero__ember {
  position: absolute; z-index: -2; inset-inline-start: 50%; bottom: 18%;
  width: min(46rem, 90vw); aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(circle, rgba(226,112,58,.22), rgba(226,112,58,.07) 38%, transparent 68%);
  filter: blur(12px); pointer-events: none;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

#smoke { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .55; }

.hero__in { max-width: 44rem; }
.hero h1 {
  font-size: clamp(2.7rem, 1.6rem + 4.8vw, 5.4rem);
  margin-block: var(--s0) var(--s0);
}
.hero h1 em { font-style: italic; font-variation-settings: "SOFT" 50, "WONK" 1; color: var(--gold-300) !important; }
.hero__lede { font-size: 1.2rem; max-width: 34rem; color: var(--text-soft); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s2); }

/* ---------------------------------------------------------- configurator -- */
.build { position: relative; z-index: 2; padding-block: var(--s4); }
.build__grid { display: grid; gap: var(--s2); align-items: start; }
@media (min-width: 62em) { .build__grid { grid-template-columns: 1fr 1fr; gap: var(--s3); } }

.dials {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--line); border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%), var(--ink-850);
}
.dial + .dial { margin-top: var(--s2); }
.dial__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.dial__label { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.dial__val {
  font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.dial__val span { font-family: var(--body); font-size: .85rem; font-weight: 500; -webkit-text-fill-color: var(--text-mute); margin-left: .3rem; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2rem; background: transparent; cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-600) var(--pct, 0%), rgba(255,255,255,.1) var(--pct, 0%));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--gold-600); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.5rem; height: 1.5rem; margin-top: -.55rem; border-radius: 99px;
  background: var(--gold-grad); border: 2px solid #08080A;
  box-shadow: 0 3px 12px -2px rgba(211,166,76,.8);
}
input[type="range"]::-moz-range-thumb {
  width: 1.4rem; height: 1.4rem; border-radius: 99px; border: 2px solid #08080A;
  background: #E3C275; box-shadow: 0 3px 12px -2px rgba(211,166,76,.8);
}
.dial__scale { display: flex; justify-content: space-between; font-size: .74rem; color: #6E6A63; margin-top: -.35rem; }

/* result panel */
.result {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid rgba(227,194,117,.32); border-radius: 1.5rem;
  background: radial-gradient(130% 90% at 50% 0%, rgba(191,144,42,.16), transparent 62%), var(--ink-850);
}
.result__tag { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
.result__name { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin-block: .4rem .2rem; }
.result__price {
  display: flex; align-items: baseline; gap: .5rem; margin-top: var(--s0);
  padding-top: var(--s0); border-top: 1px solid var(--line-soft);
}
.result__price b {
  font-family: var(--display); font-size: 2.6rem; font-weight: 600; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.result__price span { font-size: .85rem; color: var(--text-mute); }
.spec { display: grid; gap: .6rem; margin-top: var(--s1); }
.spec li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .65rem; font-size: .97rem; }
.spec li::before {
  content: ""; width: 1.15rem; height: 1.15rem; margin-top: .22em; border-radius: 99px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.75rem no-repeat, var(--gold-grad);
}
.result__why {
  margin-top: var(--s1); padding: .8rem 1rem;
  border-left: 2px solid var(--gold-600); border-radius: 0 .5rem .5rem 0;
  background: rgba(227,194,117,.06); font-size: .92rem; color: var(--text-soft);
}
.result .btn { margin-top: var(--s1); width: 100%; }
.result__fine { margin-top: .8rem; font-size: .8rem; color: var(--text-mute); text-align: center; }

/* ------------------------------------------------------------- add-ons --- */
.extras { margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid var(--line-soft); }
.extras__title { font-size: 1.15rem; margin-bottom: var(--s0); }
.extras__list { display: grid; gap: .5rem; }
@media (min-width: 52em) { .extras__list { grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; } }
.extras__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem;
  padding: .75rem 0; border-bottom: 1px dashed var(--line-soft);
}
.extras__list b { color: var(--text); font-weight: 600; }
.extras__list span { color: var(--text-mute); font-size: .92rem; margin-right: auto; }
.extras__list i {
  font-style: normal; font-weight: 700; white-space: nowrap;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.extras__note { margin-top: var(--s1); font-size: .92rem; color: var(--text-mute); }
.extras__note b { color: var(--gold-300); }

/* --------------------------------------------------------------- menu ---- */
.menu__group + .menu__group { margin-top: var(--s2); }
.menu__gtitle {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--display); font-size: 1.35rem; color: var(--text);
  margin-bottom: var(--s0);
}
.menu__gtitle::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.menu__list { display: grid; gap: .5rem; }
@media (min-width: 52em) { .menu__list { grid-template-columns: 1fr 1fr; gap: .5rem 2.5rem; } }

.pour {
  display: grid; grid-template-columns: .55rem 1fr; gap: 1rem; align-items: start;
  padding: .9rem 0; border-bottom: 1px dashed var(--line-soft);
}
.pour__swatch {
  width: .55rem; height: 100%; min-height: 3rem; border-radius: 99px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 0 18px -4px var(--c1);
}
.pour__name { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pour__name h4 { font-size: 1.12rem; }
.pour__notes { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-500); white-space: nowrap; }
.pour p { font-size: .92rem; color: var(--text-mute); margin-top: .2rem; }

/* -------------------------------------------------------------- gallery -- */
/* Three photos in three equal squares reads as "we only have three photos".
   An asymmetric feature layout makes the same three look deliberate. */
.shots { display: grid; gap: .75rem; }
@media (min-width: 52em) {
  .shots { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; height: 34rem; }
  .shots figure:first-child { grid-row: span 2; }
}
.shots figure {
  position: relative; margin: 0; border-radius: 1.1rem; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--ink-850); min-height: 12rem;
}
.shots img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.shots figure:hover img { scale: 1.05; }
.shots figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 3rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(8,8,10,.9)); font-size: .92rem; font-weight: 500; color: var(--text);
}

/* ----------------------------------------------------------------- why --- */
.why { display: grid; gap: var(--s2); }
@media (min-width: 62em) { .why { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.creds { display: grid; gap: .75rem; }
.cred {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start;
  padding: 1.1rem; border: 1px solid var(--line-soft); border-radius: .9rem; background: var(--ink-850);
}
.cred__ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem;
  background: rgba(227,194,117,.1); color: var(--gold-400);
}
.cred__ico svg { width: 1.25rem; height: 1.25rem; }
.cred h4 { font-size: 1.02rem; margin-bottom: .2rem; }
.cred p { font-size: .92rem; color: var(--text-mute); }

/* ---------------------------------------------------------------- misc --- */
.strip {
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  padding-block: var(--s0); border-block: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--text-mute);
}
.strip li { display: flex; align-items: center; gap: .45rem; }
.strip svg { width: 1rem; height: 1rem; color: var(--gold-500); }

.foot { padding-block: var(--s3) var(--s2); border-top: 1px solid var(--line-soft); background: #08080A; position: relative; z-index: 2; }
.foot__note { margin-top: var(--s1); font-size: .8rem; color: var(--text-mute); max-width: 46rem; }

.compare { margin-top: var(--s2); }
.compare summary {
  cursor: pointer; font-size: .95rem; color: var(--gold-400);
  padding: .8rem 0; border-top: 1px solid var(--line-soft);
}
.ctable { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: .5rem; }
.ctable th, .ctable td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line-soft); }
.ctable thead th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.ctable td:not(:first-child), .ctable th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ctable tbody tr[data-on="true"] { background: rgba(227,194,117,.07); }
.ctable tbody tr[data-on="true"] td:first-child { color: var(--gold-300); font-weight: 600; }
.scrollx { overflow-x: auto; }

/* ------------------------------------------------- selectable flavors --- */
.menu__count {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4em .9em; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(227,194,117,.07);
  font-size: .82rem; font-weight: 600; color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.menu__count[data-full="true"] { background: var(--gold-grad); color: #1A1305; border-color: transparent; }
.menu__count .dotpips { display: flex; gap: .22rem; }
.menu__count .pip { width: .4rem; height: .4rem; border-radius: 99px; background: currentColor; opacity: .28; }
.menu__count .pip[data-on="true"] { opacity: 1; }

.pour { cursor: pointer; border-radius: .6rem; transition: background .2s var(--ease); position: relative; }
.pour:hover { background: rgba(255,255,255,.025); }
.pour:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.pour__pick {
  grid-column: 3; align-self: center;
  width: 1.5rem; height: 1.5rem; border-radius: 99px; flex: none;
  border: 1.5px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  transition: all .2s var(--ease);
}
.pour__pick svg { width: .8rem; height: .8rem; color: #1A1305; opacity: 0; transition: opacity .15s; }
.pour[aria-pressed="true"] { background: rgba(227,194,117,.075); }
.pour[aria-pressed="true"] .pour__pick { background: var(--gold-grad); border-color: transparent; }
.pour[aria-pressed="true"] .pour__pick svg { opacity: 1; }
.pour[data-locked="true"] { opacity: .45; }
.pour[data-locked="true"] .pour__pick { border-style: dashed; }
.js .pour { grid-template-columns: .55rem 1fr 1.5rem; }

/* --------------------------------------------------------- service map -- */
.map { display: grid; gap: var(--s2); align-items: center; }
@media (min-width: 62em) { .map { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.radar { width: 100%; max-width: 30rem; margin-inline: auto; }
.radar .ring { fill: none; stroke: rgba(227,194,117,.18); stroke-dasharray: 3 5; }
.radar .ring--core { fill: rgba(227,194,117,.05); stroke: rgba(227,194,117,.4); stroke-dasharray: none; }
.radar .city { fill: var(--text-soft); font-size: 11px; font-family: Inter, sans-serif; }
.radar .city--out { fill: #6E6A63; }
.radar .dot { fill: var(--gold-400); }
.radar .dot--out { fill: #4A463F; }
.radar .hub { fill: url(#hubg); }
.radar .label { fill: var(--gold-500); font-size: 9px; font-family: Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------ sticky summary -- */
.summary {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem max(.9rem, env(safe-area-inset-left)) max(.7rem, env(safe-area-inset-bottom));
  background: rgba(12,12,15,.86); backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--line-soft);
  translate: 0 130%; transition: translate .35s var(--ease);
}
.summary[data-show="true"] { translate: 0 0; }
.summary__txt { min-width: 0; font-size: .82rem; line-height: 1.35; color: var(--text-mute); }
.summary__txt b { display: block; color: var(--gold-300); font-size: .95rem; font-weight: 650; }
.summary .btn { margin-left: auto; padding: .75em 1.2em; font-size: .9rem; }
@media (min-width: 62em) { .summary { display: none; } }

/* --------------------------------------------------------------- form --- */
.qform { display: grid; gap: var(--s0); text-align: left; }
@media (min-width: 40em) { .qform { grid-template-columns: 1fr 1fr; } }
.f { display: grid; gap: .35rem; }
.f--wide { grid-column: 1 / -1; }
.f label { font-size: .82rem; font-weight: 600; color: var(--text); }
.f input, .f select, .f textarea {
  width: 100%; padding: .8rem 1rem; border-radius: .7rem;
  border: 1px solid var(--line-soft); background: #08080A; color: var(--text); font-size: 1rem;
}
.f textarea { min-height: 6rem; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: rgba(227,194,117,.55); box-shadow: 0 0 0 3px rgba(227,194,117,.16);
}
.f--locked input { color: var(--gold-300); border-style: dashed; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fnote {
  font-size: .82rem; line-height: 1.45; color: var(--gold-300);
  padding-left: .6rem; border-left: 2px solid rgba(227,194,117,.45);
}
.fnote[hidden] { display: none; }

/* ------------------------------------------------------------ age gate -- */
dialog:not([open]) { display: none; }
.agegate[open] { display: grid; }
.agegate {
  position: fixed; inset: 0; z-index: 300; place-items: center;
  padding: 1rem; border: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  background: transparent; overflow: hidden;
}
.agegate::backdrop { background: rgba(4,4,6,.93); backdrop-filter: blur(14px) saturate(.7); }
.agegate__panel {
  width: min(100%, 27rem); padding: clamp(1.75rem,1.2rem + 2vw,2.75rem); text-align: center;
  border: 1px solid var(--line); border-radius: 1.5rem;
  background: radial-gradient(120% 90% at 50% 0%, rgba(191,144,42,.14), transparent 62%), var(--ink-900);
  box-shadow: 0 32px 64px -24px rgba(0,0,0,.85);
}
.agegate__mark { margin: 0 auto 1rem; width: 3.25rem; height: 3.25rem; }
.agegate__panel h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.agegate__panel p { color: var(--text-mute); }
.agegate__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.agegate__actions .btn { flex: 1 1 9rem; }
.agegate__deny { margin-top: 1rem; font-size: .88rem; color: #F2A08A; display: none; }
.agegate[data-denied="true"] .agegate__deny { display: block; }
.agegate[data-denied="true"] .agegate__actions { display: none; }
.agegate__fine { margin-top: 1rem; font-size: .78rem; color: var(--text-mute); }

/* ----------------------------------------------------------------- faq -- */
.faq { display: grid; gap: .6rem; }
.qa {
  border: 1px solid var(--line-soft); border-radius: .9rem;
  background: color-mix(in srgb, var(--ink-850) 75%, transparent); overflow: hidden;
  transition: border-color .3s var(--ease);
}
.qa[open] { border-color: rgba(227,194,117,.3); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; font-family: var(--display); font-size: 1.12rem;
  color: var(--text); cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: var(--gold-400);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: rotate .3s var(--ease);
}
.qa[open] summary::after { rotate: 135deg; }
.qa > div { padding: 0 1.35rem 1.2rem; color: var(--text-mute); font-size: .97rem; }

/* -------------------------------------------------------------- footer -- */
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot h4 {
  font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-500); margin-bottom: .75rem;
}
.foot ul { display: grid; gap: .45rem; font-size: .94rem; }
.foot ul a { color: var(--text-mute); text-decoration: none; }
.foot ul a:hover { color: var(--gold-300); }
.socials { display: flex; gap: .6rem; margin-top: 1rem; }
.socials a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-soft); border-radius: 99px; color: var(--gold-400);
  transition: all .25s var(--ease);
}
.socials a:hover { border-color: transparent; background: var(--gold-grad); color: #1A1305; translate: 0 -2px; }
.socials svg { width: 1.15rem; height: 1.15rem; }
.foot__base {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center; margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft); font-size: .86rem; color: var(--text-mute);
}
.foot__legal { display: flex; gap: 1.5rem; }
.foot__legal a { color: var(--text-mute); text-decoration: none; }
.foot__legal a:hover { color: var(--gold-300); }

.skip-link {
  position: absolute; left: 50%; translate: -50% -150%; z-index: 200;
  padding: .75rem 1.25rem; background: var(--gold-400); color: #08080A;
  font-weight: 600; border-radius: 0 0 .5rem .5rem; transition: translate .2s var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

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


/* ===========================================================================
   Legacy aliases — privacy.html and terms.html were written against the
   previous class names. Mapping them here means those pages pick up the
   redesign without being rewritten.
   ========================================================================= */
.nav__inner { display: flex; align-items: center; gap: var(--s1); height: 4.5rem; }
.wrap--narrow { width: min(100% - 2.5rem, 48rem); margin-inline: auto; }
.footer { padding-block: var(--s3) var(--s2); border-top: 1px solid var(--line-soft); background: #08080A; position: relative; z-index: 2; }
.footer__base {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center; margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft); font-size: .86rem; color: var(--text-mute);
}
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { color: var(--text-mute); text-decoration: none; }
.footer__legal a:hover { color: var(--gold-300); }

/* Long-form legal pages */
.doc { padding-block: calc(4.5rem + var(--s3)) var(--s4); }
.doc h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); margin-bottom: var(--s0); }
.doc h2 { font-size: 1.5rem; margin-block: var(--s2) var(--s-1); }
.doc p, .doc li { color: var(--text-soft); }
.doc ul { padding-inline-start: 1.25rem; display: grid; gap: .4rem; margin-block: var(--s-1); }
.doc ul li { list-style: disc; }
.doc > p + p { margin-top: var(--s0); }
.doc .updated { color: var(--text-mute); font-size: .9rem; }