/* Sweets of NY — "After Dark on Sutphin" · v2
   One stylesheet, no framework. Palette is defined once, here.
   v2 adds: gold-foil display type, hairline rules with a diamond ornament, glass cards,
   a drifting light layer, a marquee strip, a mobile dock, and a full 280/360/390 fit pass. */

:root {
  --ink:        #0B0A0E;   /* ground */
  --ink-2:      #131118;   /* raised panel */
  --ink-3:      #1B1822;   /* hairline / field */
  --pink:       #FF2D7A;   /* the "Sweets" note — display + accents only */
  --pink-soft:  rgba(255, 45, 122, .18);
  --gold:       #E8B54A;   /* CTAs only */
  --gold-lit:   #F7DE9C;   /* the highlight inside the foil gradient */
  --gold-deep:  #C9962F;
  --gold-hair:  rgba(232, 181, 74, .30);   /* the 1px rules between sections */
  --paper:      #F4F1EC;   /* body text */
  --paper-dim:  #BDB7B0;   /* secondary text, >=4.5:1 on --ink */
  --line:       rgba(244, 241, 236, .14);
  --glass:      rgba(255, 255, 255, .045);
  --glass-line: rgba(255, 255, 255, .10);
  --focus:      #7FD7FF;
  --maxw:       1120px;
  --radius:     16px;
  --gutter:     16px;
  --display: "Bebas Neue", "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

a { color: var(--paper); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Grain: one fixed SVG-noise layer, no image files ─────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .26; mix-blend-mode: soft-light;
}
.grain svg { width: 100%; height: 100%; display: block; }

/* ── Skip link ────────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--gold); color: #17120A; padding: 12px 18px;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus-visible { left: 0; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; z-index: 2; padding: clamp(42px, 7.5vw, 84px) 0; }

h1, h2, h3, .wordmark, .stat, .gate-title, .marquee, .dock b {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
h2 {
  font-size: clamp(30px, 6.6vw, 48px);
  text-wrap: balance;
  overflow-wrap: break-word;
  max-width: 16ch;            /* forces a deliberate break, never a stray orphan */
}
h3 {
  font-size: clamp(19px, 4.4vw, 25px); letter-spacing: .04em;
  text-wrap: balance; overflow-wrap: break-word;
}
p  { margin: 0 0 1em; }
.lede { color: var(--paper); font-size: clamp(16px, 3.6vw, 19px); max-width: 58ch; text-wrap: pretty; }
.muted { color: var(--paper-dim); }
.small { font-size: 15px; }

/* Letterspaced small-caps eyebrow, in gold. The one place gold is used as text. */
.eyebrow {
  font-family: var(--body); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::after {
  content: ""; height: 1px; flex: 1 1 auto; min-width: 20px;
  background: linear-gradient(90deg, var(--gold-hair), transparent);
}
.eyebrow.pinkline { color: var(--pink); }

/* ── Gold foil ────────────────────────────────────────────────────────────── */
/* A slow sheen travelling across a gold gradient. Used on the wordmark and two display words,
   and nowhere else — restraint is the whole point. */
.foil {
  background: linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold) 18%, var(--gold-lit) 34%,
    var(--gold) 50%, var(--gold-deep) 68%, var(--gold) 86%, var(--gold-lit) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen { 0% { background-position: 0% 50%; } 100% { background-position: 260% 50%; } }
a:hover > .foil, .foil:hover { animation-duration: 2.4s; }

/* ── Hairline rule with a centred diamond ─────────────────────────────────── */
.rule {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  color: var(--gold);
}
.rule::before, .rule::after {
  content: ""; height: 1px; flex: 1 1 auto; background: var(--gold-hair);
}
.rule svg { flex: none; opacity: .75; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 20px;
  border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--body); font-size: 16px; font-weight: 600;
  text-decoration: none; color: var(--paper); background: transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(244,241,236,.4); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-lit) -10%, var(--gold) 28%, var(--gold-deep) 100%);
  color: #17120A; border-color: rgba(255, 240, 200, .5); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 22px -12px rgba(232,181,74,.9);
}
.btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px -12px rgba(232,181,74,1); }
.btn-gold:active { box-shadow: inset 0 2px 5px rgba(80,48,0,.35); }
.btn-ghost { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(6px); }
.btn-wide { width: 100%; }
/* Second-tier hero action: gold outline, same height as the gold button. */
.btn-outline { background: rgba(232,181,74,.08); border-color: rgba(232,181,74,.55); color: var(--gold); font-weight: 700; }
.btn-outline:hover { background: rgba(232,181,74,.16); border-color: var(--gold); }
.hero-cta .btn-outline { flex: 1 1 100%; }
.addr { cursor: pointer; }
.addr-transit { font-size: 12px; letter-spacing: .08em; color: var(--paper-dim); font-weight: 600; }
.btn svg { flex: none; }

/* ── Age gate ─────────────────────────────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: #07060A;
}
/* Shown only once JS decides it should be — a no-JS visitor is never trapped. */
.gate.is-open { display: flex; }
.gate-card {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--ink-2); border: 1px solid var(--glass-line);
  border-radius: var(--radius); padding: clamp(22px, 6vw, 36px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.gate-card .eyebrow { justify-content: center; }
.gate-card .eyebrow::after { display: none; }
.gate-card .gate-title { font-size: clamp(28px, 8vw, 44px); color: var(--paper); }
.gate-card .pink { color: var(--pink); }
.gate-actions { display: grid; gap: 10px; margin-top: 20px; }

/* The one-line notice a no-JS visitor sees instead of the gate. */
.nojs-notice {
  position: relative; z-index: 3;
  background: var(--pink-soft); border-bottom: 1px solid var(--line);
  color: var(--paper); font-size: 14px; text-align: center; padding: 8px 16px;
}

/* ── Sticky top bar ───────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 10, 14, .90);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  display: flex; align-items: center; gap: 10px;
  min-height: 62px; flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px;
}
.wordmark {
  display: flex; align-items: baseline; gap: 6px;
  font-size: clamp(22px, 6vw, 30px); margin: 0; color: var(--paper);
  text-decoration: none; letter-spacing: .06em;
  white-space: nowrap; flex: none;             /* the wordmark never wraps */
}
.wordmark b { font-weight: 400; }
.wordmark span {
  font-family: var(--body); font-size: 10px; letter-spacing: .2em;
  color: var(--pink); text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
.bar-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: nowrap; flex: none; }
.bar .btn { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.bar .btn svg { width: 17px; height: 17px; }

/* ≤480: the wordmark drops its second line and the buttons tighten one notch, so the
   wordmark, the switch and both actions still sit on one line. The threshold is 480
   rather than 400 because Spanish is the wider language: "Llamar" and "Reservar" need
   room that "Call" and "Reserve" do not. */
@media (max-width: 480px) {
  .bar .btn { padding: 10px 10px; font-size: 14px; gap: 5px; }
  .bar-in { gap: 8px; }
  .bar-actions { gap: 6px; }
  .wordmark span { display: none; }
  .langsw a { min-width: 32px; padding: 0 7px; font-size: 12px; letter-spacing: .04em; }
}
/* 280–340. Spanish is the wider language here: "Llamar" and "Reservar" are longer
   than "Call" and "Reserve", so the squeeze is sized for Spanish and English simply
   gets more air. */
@media (max-width: 340px) {
  .wordmark { font-size: 19px; }
  .bar-in { gap: 5px; }
  .bar-actions { gap: 4px; }
  .bar .btn { padding: 10px 5px; font-size: 13px; gap: 3px; }
  .bar .btn svg { width: 16px; height: 16px; }
  .langsw a { min-width: 24px; padding: 0 4px; font-size: 11px; letter-spacing: 0; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: clip; min-height: 100svh; min-height: 100vh; display: flex; align-items: flex-end; padding: clamp(96px, 16vh, 160px) 0 clamp(40px, 7vh, 72px); }
@supports (height: 100svh) { .hero { min-height: 100svh; } }
/* The video fills the whole first screen; the section is at least one viewport tall. */
.hero-play { position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; border: 1px solid rgba(232,181,74,.6); background: rgba(11,10,14,.72); color: var(--gold); font: 700 15px/1 var(--body); letter-spacing: .04em; backdrop-filter: blur(6px); cursor: pointer; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #0B0A0E url('/assets/video/hero-poster.jpg') center 40% / cover no-repeat; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0; transition: opacity 1.2s ease; }
.hero-video.is-on { opacity: 1; }
/* The shade is what keeps the type readable over any frame: heavier at the bottom where the
   buttons sit, a soft band at the top for the wordmark bar. */
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(11,10,14,.80) 0%, rgba(11,10,14,.58) 30%, rgba(11,10,14,.64) 58%, rgba(11,10,14,.94) 100%),
  radial-gradient(120% 80% at 50% 60%, rgba(11,10,14,0) 30%, rgba(11,10,14,.55) 100%); }
.hero-lights { position: absolute; inset: -25%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .6; }
.hero-lights i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(52px); opacity: .22;
}
/* Three light leaks, each drifting on its own long loop. Nothing faster than 30s. */
.hero-lights i:nth-child(1) { width: 58vw; height: 58vw; left: -12vw; top: 2vw;  background: radial-gradient(circle, rgba(255,45,122,.55), transparent 68%); animation: drift-a 34s ease-in-out infinite; }
.hero-lights i:nth-child(2) { width: 46vw; height: 46vw; right: -8vw; top: 20vw; background: radial-gradient(circle, rgba(232,181,74,.40), transparent 68%); animation: drift-b 42s ease-in-out infinite; }
.hero-lights i:nth-child(3) { width: 36vw; height: 36vw; left: 38vw;  top: -10vw; background: radial-gradient(circle, rgba(140,90,255,.34), transparent 68%); animation: drift-c 52s ease-in-out infinite; }
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: .20; }
  33%      { transform: translate3d(7%, 5%, 0) scale(1.14); opacity: .46; }
  66%      { transform: translate3d(-4%, 9%, 0) scale(.96); opacity: .30; }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05);   opacity: .26; }
  50%      { transform: translate3d(-8%, -6%, 0) scale(.92); opacity: .48; }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.98);   opacity: .16; }
  40%      { transform: translate3d(5%, 11%, 0) scale(1.16); opacity: .38; }
  75%      { transform: translate3d(-6%, 3%, 0) scale(1.02); opacity: .24; }
}
.hero-in { position: relative; z-index: 2; }
.hero-in .sub, .hero-in .hours, .hero-in .hero-note { text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 3px rgba(0,0,0,.8); }
.hero-in .sub { color: var(--paper); }
/* Gradient-filled type cannot take a text-shadow (it paints through the transparent fill and
   muddies the gold); a drop-shadow filter on the block does the same job cleanly. */
.hero h1 { filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(0,0,0,.45)); }
.hero h1 {
  font-size: clamp(44px, 14.5vw, 132px);
  letter-spacing: .01em; margin: 0 0 .22em; line-height: 1.02;
  overflow-wrap: break-word;
}
.hero h1 .l1 {
  display: block;
  background: linear-gradient(100deg, var(--paper) 14%, var(--pink) 74%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .l2 { display: block; }
.hero .sub { font-family: var(--body); font-size: clamp(14px, 3.6vw, 18px); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); margin: 0 0 8px; }
.hero .hours {
  font-family: var(--display); font-size: clamp(22px, 5.8vw, 34px);
  color: var(--gold); letter-spacing: .07em; margin: 0 0 10px; text-wrap: balance;
}
/* One plain line under the hours: what the room is, in the words the wording guide allows.
   Body face, not the display face, so it reads as a statement of fact rather than a headline. */
.hero .hero-note {
  font-family: var(--body); font-size: clamp(13px, 3.3vw, 15.5px); line-height: 1.5;
  color: var(--paper); margin: 0 0 20px; max-width: 34ch; text-wrap: balance;
}
.nb { white-space: nowrap; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-cta .btn { flex: 1 1 170px; }
.hero-cta .btn-ghost { flex: 1 1 calc(50% - 5px); min-width: 0; white-space: nowrap; }
.hero-cta .btn-gold { flex: 1 1 100%; }

/* The address card is one tap target: pin, two-line address, and a gold "Directions" on the
   right, all on one row. Nothing here can wrap mid-sentence. */
.addr {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 14px 16px; max-width: 30rem;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--paper); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.addr:hover { border-color: var(--gold-hair); background: rgba(232, 181, 74, .06); }
.addr-pin { flex: none; color: var(--pink); }
.addr-text { flex: 1 1 auto; min-width: 0; font-size: clamp(15px, 3.7vw, 17px); line-height: 1.35; }
.addr-go {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  color: var(--gold); font-size: 14px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  padding-left: 12px; border-left: 1px solid var(--gold-hair); align-self: stretch;
}
.addr:hover .addr-go svg { transform: translateX(2px); }
.addr-go svg { transition: transform .2s; }
@media (max-width: 329px) { .addr-go { font-size: 0; gap: 0; } .addr-go svg { width: 22px; height: 22px; } }

/* ── Marquee strip ────────────────────────────────────────────────────────── */
.strip {
  position: relative; z-index: 3;
  border-top: 1px solid var(--gold-hair); border-bottom: 1px solid var(--gold-hair);
  background: linear-gradient(180deg, rgba(232,181,74,.07), rgba(232,181,74,.02));
  overflow: hidden; padding: 0;
}
.marquee {
  display: flex; width: max-content; margin: 0;
  font-size: clamp(15px, 3.4vw, 19px); letter-spacing: .20em; color: var(--gold);
  line-height: 1; padding: 13px 0;
  animation: slide 38s linear infinite;
}
.marquee span { padding-right: 2.2em; white-space: nowrap; }
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.strip:hover .marquee, .strip:focus-within .marquee { animation-play-state: paused; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.card {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
/* Glass: used for events, bottle categories, the experience pillars and the form panel. */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -34px rgba(0,0,0,.9);
}
.card h3 { color: var(--paper); margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.tag {
  display: inline-block; font-size: 10px; letter-spacing: .20em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-hair); background: rgba(232,181,74,.08);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 12px; font-weight: 600;
}
.icon { color: var(--pink); margin-bottom: 14px; display: block; }
.icon-gold { color: var(--gold); }
.card-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 600; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Event card action row: I'm in · Add to calendar · Share. Wraps cleanly at 280. */
.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 9px 14px; flex: 1 1 auto;
  border-radius: 999px; border: 1px solid var(--glass-line);
  background: var(--glass); color: var(--paper);
  font-family: var(--body); font-size: 14px; font-weight: 600; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--gold-hair); color: var(--gold); }
.chip[aria-pressed="true"] { background: rgba(232,181,74,.14); border-color: var(--gold); color: var(--gold); }
.chip svg { flex: none; }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.form {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--glass-line); border-radius: var(--radius);
  padding: clamp(18px, 4.5vw, 30px);
  backdrop-filter: blur(14px) saturate(115%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 26px 60px -48px #000;
}
/* On a wide screen a full-bleed form looks like a spreadsheet. Cap it. */
@media (min-width: 760px) { .form { max-width: 620px; } .done { max-width: 620px; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.field .hint { display: block; font-size: 14px; color: var(--paper-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--body); font-size: 16px; /* >=16px keeps iOS from zooming */
  color: var(--paper); background: var(--ink-3);
  border: 1px solid var(--line); border-radius: 10px;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8C8790; }
/* Two on a row only when there is room for both; one column below 360. */
.field.two { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
@media (min-width: 480px) { .field.two { grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: end; } }
.field.two > .field { min-width: 0; }
/* iOS gives date inputs an intrinsic width and a shorter box; force them to behave like the rest. */
.field input[type="date"] { display: block; -webkit-appearance: none; appearance: none; min-width: 0; box-sizing: border-box; line-height: 22px; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 22px; }
.field input, .field select, .field textarea { box-sizing: border-box; min-width: 0; }
.field label .muted { color: var(--paper-dim); font-weight: 400; }
.err { display: none; color: #FF8FB2; font-size: 14px; margin-top: 6px; }
.field.has-err .err { display: block; }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: #FF8FB2; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; }
.check input { width: 24px; height: 24px; min-height: 24px; min-width: 24px; margin-top: 12px; accent-color: var(--pink); }
.check label { font-size: 14px; color: var(--paper-dim); font-weight: 400; line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; color: var(--paper-dim); margin-top: 12px; }
.form-fail { display: none; margin-top: 14px; color: #FF8FB2; font-size: 15px; }
.done { text-align: center; padding: clamp(24px, 6vw, 40px); }
.done .icon { margin: 0 auto 14px; color: var(--gold); }
[hidden] { display: none !important; }

/* ── Map card ─────────────────────────────────────────────────────────────── */
.mapcard {
  background: var(--ink-2); border: 1px solid var(--glass-line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.mapcard svg { display: block; width: 100%; height: auto; background: #0E0D13; }
.mapcard .mapfoot { padding: 18px 20px; }

/* ── Transit rows: one fact per row, icon + text, nothing wraps mid-fact ──── */
.transit { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.transit li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 56px;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.transit svg { flex: none; color: var(--pink); }
.transit .t-k {
  font-family: var(--display); font-size: 17px; letter-spacing: .10em;
  color: var(--gold); line-height: 1; flex: none; white-space: nowrap;
}
.transit .t-v { font-size: 14.5px; color: var(--paper-dim); line-height: 1.35; min-width: 0; }
@media (max-width: 330px) {
  .transit li { flex-wrap: wrap; border-radius: 14px; gap: 8px 10px; }
  .transit .t-v { flex: 1 1 100%; }
}

/* ── Rules ────────────────────────────────────────────────────────────────── */
.rules { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rules li {
  background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 14px 16px; font-size: 16px;
}

/* ── "Open from 3 PM" ─────────────────────────────────────────────────────── */
/* No new design language: the same card treatment the house rules already use, with the
   lead-in phrase picked out in gold so the three facts read at a glance on a phone. */
#day .lede { margin: 0 0 18px; }
.day-list { display: grid; gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; }
.day-list li {
  background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 14px 16px; font-size: 16px; color: var(--paper-dim);
}
.day-list li b { color: var(--paper); font-weight: 600; }

/* ── Inside Sweets ────────────────────────────────────────────────────────── */
/* Two owner photographs, the same glass cards the rest of the page uses, and one
   strip of facts. No new colours and no new type: only a full-bleed image band
   the house did not have before. Every image carries width/height and an
   aspect-ratio, so the section never moves once the photos land. */
#experience { padding-bottom: clamp(36px, 6vw, 70px); }
#experience > .wrap + .inside-lead { margin-top: 4px; }

.inside-lead { position: relative; margin: 0 0 clamp(16px, 3vw, 26px); }
.inside-lead-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 58%;
  background: var(--ink-2);
  border-top: 1px solid var(--gold-hair); border-bottom: 1px solid var(--gold-hair);
}
@media (min-width: 620px) { .inside-lead-img { aspect-ratio: 16 / 10; } }
@media (min-width: 1000px) { .inside-lead-img { aspect-ratio: 16 / 9; } }

/* The caption sits on the photo, on a gradient dark enough to read over any frame. */
.inside-lead-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 0 clamp(16px, 3vw, 26px);
  background: linear-gradient(180deg, rgba(11,10,14,0) 0%, rgba(11,10,14,.72) 46%, rgba(11,10,14,.94) 100%);
}
.inside-display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.02; text-wrap: balance;
  font-size: clamp(28px, 7.4vw, 54px); color: var(--paper);
  margin: 0 0 .28em; max-width: 18ch;
}
.inside-display span { display: inline-block; }   /* a sentence never breaks across two lines */
.inside-sell { color: var(--paper-dim); font-size: clamp(15px, 3.4vw, 18px); max-width: 46ch; margin: 0; text-wrap: pretty; }

/* Two up: the photo card on one side, the copy on the other. Stacked below 860. */
.inside-2up { display: grid; gap: 14px; margin: 0 0 clamp(18px, 3vw, 26px); }
.inside-card { display: flex; flex-direction: column; overflow: hidden; }
.inside-card .tag { align-self: flex-start; }
.inside-card p:last-of-type { margin-bottom: 0; }

/* The photo bleeds to the card's edges, so the card reads as a picture with a
   caption rather than a box with a picture in it. */
.inside-shot { margin: -20px -20px 16px; }
.inside-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1000 / 870; object-fit: cover;
  background: var(--ink-2);
  border-bottom: 1px solid var(--glass-line);
}
.inside-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.inside-cta .btn { flex: 1 1 auto; }
@media (min-width: 860px) {
  .inside-2up { grid-template-columns: 1fr 1fr; align-items: stretch; }
  /* The copy panel is as tall as the photo beside it, with its text centred in it. */
  .inside-2up > .inside-card:last-child { justify-content: center; }
  .inside-shot img { aspect-ratio: 4 / 3; }
}

/* Amenities: one fact per pill, icon in gold, wraps on its own at any width. */
.amen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.amen li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--glass-line); background: var(--glass);
  color: var(--paper-dim); font-size: 14px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}
.amen li svg { flex: none; color: var(--gold); }
@media (max-width: 360px) { .amen li { font-size: 13px; padding: 8px 12px; } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq details {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px 16px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 0; min-height: 44px;
  font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; gap: 14px; align-items: center;
  text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 26px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--paper-dim); margin: 0 0 16px; }

/* ── Footer: 2 columns at 390, 1 at 280 ───────────────────────────────────── */
footer { position: relative; z-index: 2; border-top: 1px solid var(--gold-hair); padding: 40px 0 calc(96px + env(safe-area-inset-bottom)); color: var(--paper-dim); font-size: 15px; }
footer a { color: var(--paper); }
.foot-grid { display: grid; gap: 22px 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 319px) { .foot-grid { grid-template-columns: 1fr; } }
@media (min-width: 760px)  { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
.foot-grid h3 { font-size: 16px; color: var(--gold); letter-spacing: .14em; margin-bottom: .5em; }
.foot-grid p { margin-bottom: .5em; }
.foot-grid a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; text-wrap: pretty; }
@media (min-width: 900px) { footer { padding-bottom: 56px; } }

/* ── Mobile dock: Call · Chat · Reserve ───────────────────────────────────── */
/* Appears once the hero has scrolled off. Three equal 48px targets, safe-area aware. */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--gold-hair);
  border-top: 1px solid var(--gold-hair);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translate3d(0, 110%, 0);
  transition: transform .28s ease;
  pointer-events: none;
}
.dock.is-up { transform: translate3d(0, 0, 0); pointer-events: auto; }
.dock a,
.dock button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 7px 4px 8px;
  background: rgba(11, 10, 14, .96); backdrop-filter: blur(12px);
  color: var(--paper); text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.dock button { width: 100%; border: 0; border-radius: 0; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dock a svg, .dock button svg { flex: none; }
.dock a.go {
  background: linear-gradient(180deg, var(--gold-lit) -20%, var(--gold) 30%, var(--gold-deep) 100%);
  color: #17120A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.dock a:active, .dock button:active { filter: brightness(.9); }
@media (min-width: 900px) { .dock { display: none; } }

/* ── Prose (privacy / 404) ────────────────────────────────────────────────── */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; max-width: none; }
.prose h3 { margin-top: 1.4em; color: var(--paper); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .5em; }
.prose code { background: var(--ink-3); padding: 2px 6px; border-radius: 5px; font-size: 14px; }

/* ── Language switch: EN | ES ─────────────────────────────────────────────── */
/* One hairline pill holding two 44px targets. Both languages are always shown, so
   the control is the same width in English and in Spanish and the top bar never
   reflows when the page language changes. The current language is the filled half. */
.langsw {
  display: flex; flex: none; align-items: stretch;
  border: 1px solid var(--glass-line); border-radius: 999px;
  background: var(--glass); overflow: hidden;
}
.langsw a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 38px; padding: 0 9px;
  font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--paper-dim); text-decoration: none;
}
.langsw a + a { border-left: 1px solid var(--glass-line); }
.langsw a:hover { color: var(--paper); }
.langsw a[aria-current="true"] { background: var(--pink-soft); color: var(--paper); }
/* Below 700 the bar is already carrying a wordmark and two buttons, and Spanish
   labels are the longer ones, so the switch shrinks to a single pill: the language
   you can move TO. The one you are on is redundant there — it is this page. The
   full EN | ES pair appears from 700 up, where there is room for it. */
@media (max-width: 699px) {
  .langsw a[aria-current="true"] { display: none; }
  .langsw a + a { border-left: 0; }
  .langsw a { min-width: 34px; padding: 0 9px; }
}

/* The footer copy of the same switch, spelled out in full words. */
.foot-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 26px 0 0; font-size: 14px; }
.foot-lang-k { color: var(--gold); font-family: var(--display); letter-spacing: .14em; font-size: 15px; }
.foot-lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); }
.foot-lang a[aria-current="true"] { color: var(--gold); }
.foot-lang-sep { color: var(--paper-dim); }

/* ── Look what you missed ─────────────────────────────────────────────────── */
/* The section ships empty and hidden; the feed script fills .lwym-grid and drops
   the hidden attribute. One column at 280, two from 390, three from 900. */
.lwym-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
/* On phones the reel swipes sideways like a story strip: big cards, snap to each, a peek of the next. */
@media (max-width: 899px) {
  .lwym-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 2px var(--gutter, 16px) 10px; margin: 0 calc(-1 * var(--gutter, 16px)); scrollbar-width: none; }
  .lwym-grid::-webkit-scrollbar { display: none; }
  .lwym-grid > * { flex: 0 0 78vw; max-width: 340px; scroll-snap-align: start; }
}
@media (min-width: 900px) { .lwym-grid { grid-template-columns: repeat(3, 1fr); } }
.lwym { padding-top: clamp(28px, 6vw, 56px); }
.lwym-card {
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius); padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  min-width: 0;
}
.lwym-card img, .lwym-card video { aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; }
.lwym-card img, .lwym-card video { display: block; width: 100%; background: var(--ink-2); }
.lwym-card figcaption, .lwym-card .lwym-cap {
  display: block; margin: 10px 2px 2px; font-size: 14px; line-height: 1.4;
  color: var(--paper-dim); text-wrap: pretty;
}

/* ── Chat widget: position only ───────────────────────────────────────────── */
/* The widget itself is styled by the script that owns it. All this file does is
   keep the button clear of the mobile dock, which is 56px plus its safe area. */
.chat-fab {
  position: fixed; right: 16px; z-index: 46;
  bottom: calc(72px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .chat-fab { bottom: 24px; } }
.chat-fab.is-tucked { opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.chat-fab { transition: opacity .25s, transform .25s; }

/* ── Narrow-phone pass (280–340) ──────────────────────────────────────────── */
@media (max-width: 340px) {
  :root { --gutter: 13px; }
  body { font-size: 16px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .card { padding: 16px; }
  .chip { flex: 1 1 100%; }
  .marquee { letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .hero-lights i { opacity: .30; }
  /* A marquee that cannot move must not clip its own text: it wraps and sits still, and the
     duplicate copy that only exists to make the loop seamless is removed. */
  .marquee { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee .dup { display: none; }
  .foil { background-position: 30% 50%; }
}