/* After Dark Fireworks, night edition.
   One idea: the page is the night sky, and light comes only from fireworks. The bursts in the hero
   light the headline, each box glows in its own colour when you point at it, and the plates
   the boxes sit on are lit like a shop shelf. Gold (a lit fuse) is the only interface colour. */

@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/cabinet-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/cabinet-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('/fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  --night: #07060c;
  --night-2: #0e0c16;
  --night-3: #171423;
  --line: rgb(255 255 255 / 0.09);
  --line-2: rgb(255 255 255 / 0.16);
  --ink: #f4efe6;
  --muted: #a69fb3;
  --spark: #ffb547;
  --spark-ink: #1a1206;
  --plate: #efe9e0;
  --plate-lit: #fffaf2;
  --glow: #ffb547;

  --s-hero: clamp(3.4rem, 1.2rem + 9.4vw, 10.5rem);
  --s-h1: clamp(2.5rem, 1.4rem + 4vw, 5rem);
  --s-h2: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  --s-h3: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
  --s-lead: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --s-body: 1.0625rem;
  --s-small: 0.94rem;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1400px;
  --radius: 14px;
  --radius-sm: 8px;
  --bar: 68px;
  --tabbar: 0px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-mid: 320ms;
  --t-slow: 700ms;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 var(--s-body)/1.6 'Cabinet Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--spark); color: var(--spark-ink); }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }

.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--spark); color: var(--spark-ink); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 800; text-decoration: none; transition: top var(--t-fast); }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.h1 { font-size: var(--s-h1); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.h2 { font-size: var(--s-h2); font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.h3 { font-size: var(--s-h3); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }

.link { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-fast), color var(--t-fast); }
.link:hover { text-decoration-color: var(--spark); color: #fff; }
.link--strong { text-decoration-color: var(--spark); }
.link--arrow { text-decoration: none; font-weight: 500; display: inline-flex; gap: 0.5em; align-items: center; }
.link--arrow::after { content: ''; width: 0.9em; height: 0.9em; background: currentColor; clip-path: polygon(0 45%, 70% 45%, 45% 15%, 55% 5%, 100% 50%, 55% 95%, 45% 85%, 70% 55%, 0 55%); transition: transform var(--t-mid) var(--ease-out); }
.link--arrow:hover { color: var(--spark); }
.link--arrow:hover::after { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
  --h: 52px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 800; font-size: 1rem; letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn--sm { --h: 42px; padding: 0 18px; font-size: 0.95rem; }
.btn--block { width: 100%; }
.btn--gold { background: var(--spark); color: var(--spark-ink); box-shadow: 0 0 0 0 rgb(255 181 71 / 0); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
/* A sheen of light runs across the gold on hover, like a fuse catching. */
.btn--gold::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.55) 48%, transparent 66%); transform: translateX(-110%); } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.btn--gold:hover { box-shadow: 0 8px 32px -8px rgb(255 181 71 / 0.6); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.btn--ghost { border-color: var(--line-2); background: rgb(255 255 255 / 0.03); }
.btn--ghost:hover { border-color: var(--ink); background: rgb(255 255 255 / 0.07); }
.btn--quiet { background: none; color: var(--muted); padding: 0 12px; }
.btn--quiet:hover { color: var(--ink); }
.btn[aria-pressed="true"].btn--gold { background: var(--ink); }

.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.03); display: grid; place-items: center; cursor: pointer; transition: border-color var(--t-mid), background-color var(--t-mid), transform var(--t-fast); }
.round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { border-color: var(--ink); background: rgb(255 255 255 / 0.08); }
.round:active { transform: scale(0.94); }
.round:disabled { opacity: 0.35; cursor: default; }

/* ---------- The fuse: reading progress that burns along the top ---------- */
.fuse { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; display: none; }
@supports (animation-timeline: scroll()) {
  .fuse { display: block; }
  .fuse::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 181 71 / 0.15), var(--spark)); transform-origin: left; transform: scaleX(0); animation: fuse-burn linear both; animation-timeline: scroll(root); } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
  .fuse__head { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff4dc; box-shadow: 0 0 10px 3px var(--spark), 0 0 22px 6px rgb(255 140 40 / 0.5); animation: fuse-head linear both; animation-timeline: scroll(root); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
}
@keyframes fuse-burn { to { transform: scaleX(1); } }
@keyframes fuse-head { from { left: 0; opacity: 0; } 2% { opacity: 1; } to { left: calc(100% - 8px); } }

/* ---------- Top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--bar); padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  transition: background-color var(--t-mid), border-color var(--t-mid), height var(--t-mid) var(--ease-out);
  border-bottom: 1px solid transparent; /* taste-skill-ignore: divider between rows of a list or table */
}
.bar.is-solid { background: rgb(7 6 12 / 0.82); backdrop-filter: blur(14px) saturate(1.4); border-bottom-color: var(--line); --bar: 60px; } /* avoid-ai-design-ignore: K3 (the sticky bar sits over scrolling content) */
.page-home .bar { position: fixed; inset: 0 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand .spark { width: 22px; height: 22px; fill: var(--spark); transition: transform var(--t-slow) var(--ease-out); filter: drop-shadow(0 0 6px rgb(255 181 71 / 0.6)); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.brand:hover .spark { transform: rotate(72deg) scale(1.1); }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav__link { position: relative; padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; transition: color var(--t-fast), background-color var(--t-fast); }
.nav__link:hover, .nav__link[aria-current] { color: var(--ink); background: rgb(255 255 255 / 0.06); }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mylist { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--muted); transition: color var(--t-fast), background-color var(--t-fast); }
.mylist:hover, .mylist[aria-current] { color: var(--ink); background: rgb(255 255 255 / 0.06); }
.mylist svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mylist__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--spark); color: var(--spark-ink); font-size: 0.8rem; font-weight: 800; display: grid; place-items: center; }
.mylist__count.is-bump { animation: bump 500ms var(--ease-out); }
@keyframes bump { 30% { transform: scale(1.35); } }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.menu-btn span, .menu__close span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-btn span:first-child { top: 17px; } .menu-btn span:last-child { top: 25px; }

.menu { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: calc(var(--bar) + 24px) var(--gutter) 32px; background: rgb(7 6 12 / 0.97); color: var(--ink); flex-direction: column; gap: 28px; }
.menu:popover-open { display: flex; animation: menu-in 400ms var(--ease-out); }
@keyframes menu-in { from { opacity: 0; clip-path: circle(0 at calc(100% - 40px) 34px); } to { opacity: 1; clip-path: circle(150% at calc(100% - 40px) 34px); } }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.menu__close { position: absolute; top: 12px; right: calc(var(--gutter) - 8px); width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.menu__close span { top: 21px; } .menu__close span:first-child { transform: rotate(45deg); } .menu__close span:last-child { transform: rotate(-45deg); }
.menu__note { color: var(--muted); }

/* ---------- Tab bar: phones only ---------- */
.tabbar { display: none; }
.tabbar__tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 54px; border-radius: 12px; text-decoration: none; color: var(--muted); font-size: 0.74rem; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: color var(--t-fast), background-color var(--t-fast); }
.tabbar__tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease-out); }
.tabbar__tab:active { background: rgb(255 255 255 / 0.07); }
.tabbar__tab:active svg { transform: scale(0.9); }
.tabbar__tab[aria-current] { color: var(--ink); }
.tabbar__tab[aria-current] svg { stroke: var(--spark); }
.tabbar__count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--spark); color: var(--spark-ink); font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; }

/* ---------- Hero: a night sky that lights the headline ---------- */
.hero {
  --lit: 0; --lit-x: 50%; --lit-y: 30%; --lit-c: 255 181 71;
  position: relative; min-height: 100svh; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; padding: calc(var(--bar) + 24px) var(--gutter) 28px;
  background:
    radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / 0.7), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1px 1px at 28% 62%, rgb(255 255 255 / 0.45), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1.5px 1.5px at 44% 12%, rgb(255 255 255 / 0.6), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1px 1px at 63% 38%, rgb(255 255 255 / 0.5), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1px 1px at 78% 16%, rgb(255 255 255 / 0.7), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1.5px 1.5px at 88% 54%, rgb(255 255 255 / 0.4), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1px 1px at 6% 82%, rgb(255 255 255 / 0.35), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(1px 1px at 54% 78%, rgb(255 255 255 / 0.3), transparent), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    radial-gradient(120% 70% at 50% 120%, #1d1430 0%, transparent 60%), /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
    var(--night);
  cursor: crosshair;
}
.hero a, .hero button { cursor: pointer; }
.hero__sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* The light of the latest burst, spilling over the page. */
.hero__light { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 55% at var(--lit-x) var(--lit-y), rgb(var(--lit-c) / calc(var(--lit) * 0.32)), transparent 70%); } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.hero::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; background: linear-gradient(transparent, var(--night)); pointer-events: none; } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.hero__inner { align-self: end; max-width: calc(var(--max) - var(--gutter) * 2); width: 100%; margin: 0 auto; padding-bottom: clamp(24px, 6vh, 72px); }
.hero__title {
  font-size: var(--s-hero); font-weight: 800; line-height: 0.86; letter-spacing: -0.055em; margin-left: -0.04em;
  color: color-mix(in oklab, var(--ink) calc(72% + var(--lit) * 28%), #6d6480);
  text-shadow: 0 0 calc(var(--lit) * 60px) rgb(var(--lit-c) / calc(var(--lit) * 0.55)); /* taste-skill-ignore: light or glow from a firework, or a real overlay */
}
.hero__title span { display: block; }
.hero__lede { font-size: var(--s-lead); max-width: 34ch; margin-top: 24px; color: #d8d1e0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__foot { max-width: calc(var(--max) - var(--gutter) * 2); width: 100%; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; align-items: baseline; padding-top: 20px; border-top: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.tonight { color: var(--ink); }
.tonight__k { color: var(--spark); font-weight: 800; margin-right: 8px; }
.hero__hint { color: var(--muted); font-size: var(--s-small); }

/* ---------- Section rhythm ---------- */
main > section:not(.hero), .range, .legal, .product, .mylist-page { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head__sub { color: var(--muted); margin-top: 12px; }

/* ---------- When to buy: a lit timeline of the season ---------- */
.season { padding-block: clamp(72px, 9vw, 128px) clamp(56px, 7vw, 100px); }
.season__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.season__status { font-size: var(--s-lead); color: var(--muted); max-width: 36ch; }
.season__status strong { color: var(--ink); font-weight: 800; }
.season__status.is-live strong::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--spark); margin-right: 10px; vertical-align: 0.12em; box-shadow: 0 0 0 0 rgb(255 181 71 / 0.6); animation: live 2.4s ease-out 3; } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
@keyframes live { 70% { box-shadow: 0 0 0 10px rgb(255 181 71 / 0); } } /* taste-skill-ignore: light or glow from a firework, or a real overlay */

.timeline { margin-bottom: 40px; }
.timeline__track { position: relative; height: 56px; border-radius: var(--radius-sm); background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 5)), var(--night-2); border: 1px solid var(--line); overflow: hidden; } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.timeline__seg { position: absolute; top: 10px; bottom: 10px; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 4px; background: rgb(255 181 71 / 0.28); border: 1px solid rgb(255 181 71 / 0.5); transform-origin: left; }
.timeline__seg.tl-diwali { top: 18px; bottom: 18px; background: rgb(255 120 180 / 0.45); border-color: rgb(255 150 200 / 0.8); }
.timeline__seg.is-now { background: var(--spark); border-color: #ffd89a; box-shadow: 0 0 24px rgb(255 181 71 / 0.55); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.timeline__seg.tl-diwali.is-now { background: #ff7bb8; box-shadow: 0 0 24px rgb(255 123 184 / 0.6); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.timeline__seg.is-past { opacity: 0.35; }
.timeline__today { position: absolute; top: 0; bottom: 0; left: var(--t, -10%); width: 2px; background: #fff; box-shadow: 0 0 12px #fff; } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.timeline__today span { position: absolute; top: 4px; left: 6px; font-size: 0.72rem; font-weight: 800; color: #fff; text-shadow: 0 0 6px var(--night); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.timeline__months { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; color: var(--muted); font-size: var(--s-small); }
.js .timeline__seg { transform: scaleX(0); transition: transform 1s var(--ease-out); }
.js .timeline.is-in .timeline__seg { transform: none; }
.js .timeline.is-in .timeline__seg:nth-child(2) { transition-delay: 150ms; }
.js .timeline.is-in .timeline__seg:nth-child(3) { transition-delay: 300ms; }
.js .timeline.is-in .timeline__seg:nth-child(4) { transition-delay: 450ms; }

.windows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.window { background: var(--night); padding: 24px; display: grid; gap: 6px; align-content: start; transition: background-color var(--t-mid); }
.window__dates { font-size: var(--s-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.window__label { font-weight: 500; }
.window__note { color: var(--muted); font-size: var(--s-small); }
.window__state { margin-top: 12px; font-size: var(--s-small); font-weight: 800; color: var(--muted); }
.window.is-now { background: #1c150d; }
.window.is-now .window__state { color: var(--spark); }
.window.is-past { opacity: 0.55; }

.curfew { margin-top: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 24px 64px; }
.curfew__h { font-size: var(--s-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; max-width: 14ch; }
.curfew__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.curfew__list dt { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.curfew__list div:nth-child(2) dt { color: var(--spark); }
.curfew__list dd { color: var(--muted); margin-top: 8px; max-width: 22ch; }
.curfew__note { grid-column: 2; color: var(--muted); font-size: var(--s-small); }

/* ---------- Categories: a lit index ---------- */
.cats { padding-block: clamp(56px, 8vw, 120px); }
.cats__list { border-top: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.cat {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) 120px 228px; align-items: center; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; /* taste-skill-ignore: divider between rows of a list or table */
}
/* Light from the category's own colour sweeps in from the left. */
.cat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--glow) 22%, transparent), transparent 75%); opacity: 0; transform: translateX(-30%); transition: opacity var(--t-mid), transform var(--t-slow) var(--ease-out); } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.cat__name { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; transition: transform var(--t-mid) var(--ease-out), color var(--t-mid); }
.cat__desc { color: var(--muted); max-width: 44ch; }
.cat__count { color: var(--muted); font-size: var(--s-small); text-align: right; }
.cat__thumbs { display: flex; justify-content: flex-end; padding-right: 8px; }
.cat__thumb { width: 72px; height: 72px; border-radius: 10px; margin-left: -18px; border: 2px solid var(--night); transition: transform var(--t-mid) var(--ease-out), margin var(--t-mid) var(--ease-out); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.cat__thumb:nth-child(1) { transform: rotate(-6deg); } .cat__thumb:nth-child(3) { transform: rotate(5deg); }
.cat:hover::before, .cat:focus-visible::before { opacity: 1; transform: none; }
.cat:hover .cat__name, .cat:focus-visible .cat__name { transform: translateX(10px); color: #fff; }
.cat:hover .cat__thumb, .cat:focus-visible .cat__thumb { margin-left: 6px; transform: translateY(-4px) rotate(0); --lit: 1; }

/* ---------- Plates: the boxes sit on a lit shelf ---------- */
.plate {
  --lit: 0;
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1;
  background: radial-gradient(85% 70% at 50% 18%, var(--plate-lit), var(--plate) 72%); /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
  filter: brightness(calc(0.93 + var(--lit) * 0.07)) saturate(calc(0.92 + var(--lit) * 0.08));
  transition: filter var(--t-mid);
}
.plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.plate__none { color: #5a5263; font-weight: 500; text-align: center; padding: 16px; font-size: var(--s-small); line-height: 1.4; }

/* ---------- Product cards ---------- */
.card { position: relative; }
.card__link { display: grid; gap: 14px; text-decoration: none; border-radius: var(--radius); outline-offset: 6px; }
.card__plate { border-radius: var(--radius); transition: filter var(--t-mid), transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid); }
/* The box's own colour, cast as light underneath it. */
.card__plate::after { content: ''; position: absolute; inset: auto 10% -30% 10%; height: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--glow) 70%, transparent), transparent); opacity: 0; filter: blur(12px); transition: opacity var(--t-mid); mix-blend-mode: multiply; } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.card__img { transition: transform var(--t-slow) var(--ease-out); }
.card__text { display: grid; gap: 2px; padding-inline: 4px; }
.card__name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.2; }
.card__meta { color: var(--muted); font-size: 1rem; }
.card__badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--night); color: var(--ink); font-size: 0.78rem; font-weight: 800; }
.card__badge--inline { position: static; margin-left: 8px; vertical-align: 0.1em; }
.card__link:hover .card__plate, .card__link:focus-visible .card__plate { --lit: 1; transform: translateY(-6px); box-shadow: 0 24px 60px -18px color-mix(in oklab, var(--glow) 65%, transparent), 0 0 0 1px color-mix(in oklab, var(--glow) 40%, transparent); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.card__link:hover .card__img { transform: scale(1.05); }
.card__link:hover .card__name { color: #fff; }
/* Torchlight: a soft light follows the pointer across the grid (fine pointers only, set by app.js). */
.torch .card__plate::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgb(255 248 230 / 0.35), transparent 65%); mix-blend-mode: soft-light; } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */

.save {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgb(7 6 12 / 0.82); color: var(--ink);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-mid);
}
.save svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--t-mid) var(--ease-out); }
.save:hover { background: var(--night); transform: scale(1.06); }
.save:active { transform: scale(0.9); }
.save[aria-pressed="true"] { color: var(--spark); }
.save[aria-pressed="true"] svg, .btn[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }
.ember { position: fixed; z-index: 80; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; background: #ffe2a8; box-shadow: 0 0 8px 2px var(--spark); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */

/* ---------- Biggest boxes rail ---------- */
.big { padding-block: clamp(56px, 8vw, 120px); }
.big__controls { display: flex; gap: 10px; }
.big__rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 320px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 12px var(--gutter) 28px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.big__rail::-webkit-scrollbar { display: none; }
.big__rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.big__rail.is-dragging a { pointer-events: none; }
.big__item { position: relative; scroll-snap-align: start; }
.big__rank { position: absolute; z-index: 2; left: 10px; top: 10px; height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px; background: var(--night); color: var(--spark); font-weight: 800; font-size: 1rem; pointer-events: none; }
.big__rank::before { content: "No."; color: var(--muted); font-weight: 500; }

/* ---------- Visit ---------- */
.visit { padding-block: clamp(56px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.visit__photo { grid-area: 1 / 1; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.8); }
.visit__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgb(7 6 12 / 0.6)); } /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
.visit__photo figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; font-size: var(--s-small); color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 0.8); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.visit__card { grid-area: 1 / 2; margin-left: -64px; position: relative; z-index: 1; background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 44px); display: grid; gap: 22px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.9); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.visit__address { font-style: normal; font-size: var(--s-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.visit__rows div { display: flex; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.visit__rows dt { color: var(--muted); min-width: 64px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: #d8d1e0; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 12px; height: 7px; border-left: 2px solid var(--spark); border-bottom: 2px solid var(--spark); transform: rotate(-45deg); } /* avoid-ai-design-ignore: K4 (this draws a tick mark from two borders, not a stripe) */

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(56px, 8vw, 120px) clamp(80px, 10vw, 140px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px 64px; align-items: start; }
.faq__list { border-top: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.faq__item { border-bottom: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: var(--s-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; transition: color var(--t-fast); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: #fff; }
.faq__icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform var(--t-mid) var(--ease-out), background-color var(--t-mid), border-color var(--t-mid); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 2px; transition: transform var(--t-mid) var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(180deg); background: var(--spark); border-color: var(--spark); color: var(--spark-ink); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__item p { color: #d8d1e0; padding-bottom: 24px; max-width: 60ch; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-mid) var(--ease-out), content-visibility var(--t-mid) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
.faq__more { grid-column: 2; }

/* ---------- All fireworks ---------- */
.range { padding-top: calc(var(--bar) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(80px, 10vw, 140px); }
.page-range .bar, .page-product .bar, .page-list .bar, .page-legal .bar, .page-notfound .bar { position: fixed; inset: 0 0 auto; }
.range__head { max-width: 900px; margin-bottom: 32px; }
.crumbs { color: var(--muted); font-size: var(--s-small); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.range__intro { font-size: var(--s-lead); color: var(--muted); margin-top: 18px; max-width: 52ch; }
.finder { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.toolbar { position: sticky; top: calc(var(--bar) - 1px); transition: top var(--t-mid) var(--ease-out); z-index: 20; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 14px var(--gutter); margin-inline: calc(var(--gutter) * -1); background: rgb(7 6 12 / 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */ /* avoid-ai-design-ignore: K3 (the sticky filter bar sits over scrolling cards) */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px; padding: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.chip__n { color: var(--muted); font-size: 0.82rem; transition: color var(--t-fast); }
.chip:hover { border-color: var(--ink); }
.chip[aria-current] { background: var(--spark); border-color: var(--spark); color: var(--spark-ink); font-weight: 800; }
.chip[aria-current] .chip__n { color: rgb(26 18 6 / 0.7); }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input { width: min(340px, 100%); min-height: 42px; padding: 0 14px 0 42px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--night-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--spark); box-shadow: 0 0 0 3px rgb(255 181 71 / 0.2); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.sort select { min-height: 42px; padding: 0 38px 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--night-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a69fb3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; appearance: none; cursor: pointer; }
.range__count { color: var(--muted); font-size: var(--s-small); margin: 24px 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.state { padding: 64px 0; color: var(--muted); display: grid; gap: 16px; justify-items: start; }
.state__big { font-size: var(--s-h3); font-weight: 800; color: var(--ink); }

::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
/* Page changes move the way you're going: up or down the site, or sideways to the next firework.
   The bars keep their own names so they stay put while the page underneath moves. */
.bar { view-transition-name: bar; }
.tabbar { view-transition-name: tabbar; }
html:active-view-transition-type(up) { --vt-y: -1; }
html:active-view-transition-type(down) { --vt-y: 1; }
html:active-view-transition-type(next) { --vt-x: 1; }
html:active-view-transition-type(prev) { --vt-x: -1; }
@media (prefers-reduced-motion: no-preference) {
  html:active-view-transition-type(up, down, next, prev)::view-transition-old(root),
  html:active-view-transition-type(up, down, next, prev)::view-transition-old(*):only-child { animation: vt-leave 180ms cubic-bezier(0.4, 0, 1, 1) both; }
  html:active-view-transition-type(up, down, next, prev)::view-transition-new(root),
  html:active-view-transition-type(up, down, next, prev)::view-transition-new(*):only-child { animation: vt-enter 440ms var(--ease-out) 150ms both; }
}
@keyframes vt-leave { to { opacity: 0; transform: translate(calc(var(--vt-x, 0) * -20px), calc(var(--vt-y, 0) * -20px)); } }
@keyframes vt-enter { from { opacity: 0; transform: translate(calc(var(--vt-x, 0) * 28px), calc(var(--vt-y, 0) * 28px)); } }

/* ---------- One firework ---------- */
.product { padding-top: calc(var(--bar) + clamp(20px, 3vw, 40px)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.product__crumb { grid-column: 1 / -1; margin-bottom: 0; }
.product__media { position: sticky; top: calc(var(--bar) + 20px); }
.product__media .save { z-index: 3; }
.product__plate { --lit: 1; border-radius: calc(var(--radius) + 6px); box-shadow: 0 40px 120px -40px color-mix(in oklab, var(--glow) 60%, transparent); cursor: zoom-in; } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
.zoom-lens { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background-repeat: no-repeat; background-size: 220%; background-color: var(--plate-lit); transition: opacity var(--t-mid); clip-path: circle(110px at var(--zx, 50%) var(--zy, 50%)); }
.product__plate.is-zooming .zoom-lens { opacity: 1; }
.product__hint { color: var(--muted); font-size: var(--s-small); margin-top: 12px; text-align: center; }
.on-touch { display: none; }
.save--plate { top: 14px; right: 14px; width: 48px; height: 48px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.stepper__where { color: var(--muted); font-size: var(--s-small); text-align: center; }
.round.is-off { opacity: 0.25; }
a.round { color: inherit; }
.product__img { transition: transform var(--t-mid) var(--ease-out); }
.viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--ink); overflow: auto; }
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: #000; }
.viewer img { width: 100%; max-width: 900px; height: auto; background: var(--plate-lit); touch-action: pinch-zoom; }
.viewer form { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.viewer__close { background: rgb(7 6 12 / 0.85); }
.viewer__hint { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: var(--muted); font-size: var(--s-small); }
.product__info { display: grid; gap: 22px; align-content: start; padding-bottom: 24px; }
.product__name { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; text-wrap: balance; }
.product__by { color: var(--muted); font-size: var(--s-lead); margin-top: -8px; }
.bigfacts { display: flex; flex-wrap: wrap; gap: 12px; }
.bigfacts div { flex: 1 1 150px; padding: 20px; border-radius: var(--radius); background: color-mix(in oklab, var(--glow) 10%, var(--night-2)); }
.bigfacts dt { color: var(--muted); font-size: var(--s-small); }
.bigfacts dd { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.product__about { color: #d8d1e0; font-size: var(--s-lead); max-width: 46ch; }
.product__h { font-size: var(--s-small); font-weight: 800; color: var(--muted); margin-bottom: -10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--s-small); }
.facts { border-top: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.facts dt { color: var(--muted); }
.facts dd { font-weight: 500; text-align: right; }
.product__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product__notes { font-size: var(--s-small); }
.before { margin-top: clamp(56px, 8vw, 100px); padding: clamp(24px, 4vw, 48px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--night-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) auto; gap: 24px 48px; align-items: center; width: calc(100% - var(--gutter) * 2); max-width: calc(var(--max) - var(--gutter) * 2); margin-inline: auto; }
.before__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.before__list li { counter-increment: step; color: var(--muted); }
.before__list li::before { content: counter(step); display: block; font-weight: 800; color: var(--spark); margin-bottom: 6px; }
.before__list strong { color: var(--ink); }
.related { padding-block: clamp(56px, 8vw, 120px); }

/* ---------- My list ---------- */
.mylist-page { padding-top: calc(var(--bar) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(80px, 10vw, 140px); }
.mylist-page__head { margin-bottom: 32px; }
.mylist-page__tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.saved { display: grid; gap: 12px; }
.saved__item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px; border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--line); transition: opacity var(--t-mid), transform var(--t-mid) var(--ease-out); }
.saved__item .plate { border-radius: 10px; --lit: 1; }
.saved__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; text-decoration: none; }
.saved__meta { color: var(--muted); font-size: var(--s-small); }
.saved__item.is-leaving { opacity: 0; transform: translateX(24px); }
.is-counter .saved__item { grid-template-columns: 140px minmax(0, 1fr) auto; }
.is-counter .saved__name { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.is-counter .mylist-page__head, .is-counter .bar, .is-counter .footer { display: none; }
.is-counter .mylist-page { padding-top: 32px; }

/* ---------- Safety & law ---------- */
.legal { padding-top: calc(var(--bar) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(80px, 10vw, 140px); display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 40px clamp(32px, 6vw, 96px); }
.legal > * { min-width: 0; }
.legal__head { grid-column: 1 / -1; max-width: 900px; }
.toc { position: sticky; top: calc(var(--bar) + 24px); display: grid; gap: 2px; align-self: start; }
.toc__h { font-size: var(--s-small); color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.toc__link { position: relative; padding: 7px 0 7px 16px; color: var(--muted); text-decoration: none; border-left: 1px solid var(--line); transition: color var(--t-fast), border-color var(--t-fast); } /* taste-skill-ignore: divider between rows of a list or table */
.toc__link:hover { color: var(--ink); }
.toc__link.is-active { color: var(--ink); border-left-color: var(--spark); }
.prose section { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); } /* taste-skill-ignore: divider between rows of a list or table */
.prose section:last-child { border-bottom: 0; }
.prose h2 { font-size: var(--s-h3); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; }
.prose h3 { font-size: 1.15rem; font-weight: 800; margin: 28px 0 8px; }
.prose p, .prose li { color: #d8d1e0; }
.prose p + p { margin-top: 12px; }
.prose ul, .prose ol { display: grid; gap: 10px; margin: 14px 0; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); }
.prose ol.code { counter-reset: code; }
.prose ol.code li { counter-increment: code; display: grid; grid-template-columns: 40px 1fr; }
.prose ol.code li::before { content: counter(code); color: var(--spark); font-weight: 800; font-variant-numeric: tabular-nums; }
.notice-block { padding: 24px; border-radius: var(--radius); border: 2px solid var(--spark); background: rgb(255 181 71 / 0.07); margin-bottom: 24px; }
.notice-block p { color: var(--ink); font-weight: 800; font-size: 1.1rem; }
.table-wrap { overflow-x: auto; margin: 18px 0; }
.table { width: 100%; border-collapse: collapse; min-width: 480px; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-weight: 500; font-size: var(--s-small); }
.table td:first-child { font-weight: 800; color: var(--spark); }

/* ---------- 404 ---------- */
.notfound { min-height: 80svh; display: grid; align-content: center; justify-items: start; gap: 18px; padding-top: var(--bar); }
.notfound__code { font-size: clamp(6rem, 20vw, 16rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); }
.notfound p { color: var(--muted); }

/* ---------- Footer: the name, lit as you reach it ---------- */
.footer { border-top: 1px solid var(--line); padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 32px; overflow: hidden; } /* taste-skill-ignore: divider between rows of a list or table */
.footer__name {
  max-width: var(--max); margin: 0 auto; padding-top: clamp(40px, 6vw, 80px);
  font-size: clamp(4.5rem, 17vw, 17rem); font-weight: 800; letter-spacing: -0.065em; line-height: 0.8; white-space: nowrap;
  background: radial-gradient(40% 120% at var(--fx, 50%) 100%, var(--spark), rgb(255 181 71 / 0.15) 60%, rgb(255 255 255 / 0.06)) text; /* taste-skill-ignore: light, not fill: bursts, lit plates and glows are the lighting brief */
  color: transparent; transition: --fx 1.2s var(--ease-out);
}
.footer__grid { max-width: var(--max); margin: clamp(40px, 5vw, 64px) auto 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 32px; }
.footer__h { font-size: var(--s-small); color: var(--muted); font-weight: 800; margin-bottom: 14px; }
.footer__links { display: grid; gap: 8px; }
.footer__grid p + p { margin-top: 10px; }
.footer__notice { padding: 20px; border: 1px solid rgb(255 181 71 / 0.45); border-radius: var(--radius); align-self: start; }
.footer__notice p { font-weight: 800; font-size: 0.98rem; }
.footer__notice p + p { margin-top: 10px; }
.footer__legal { max-width: var(--max); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px 48px; font-size: var(--s-small); color: var(--muted); } /* taste-skill-ignore: divider between rows of a list or table */
.footer__legal p { max-width: 70ch; }
.footer__legal a { white-space: nowrap; }
@property --fx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

/* ---------- Motion (all of it opts out under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn--gold:hover::after { transform: translateX(110%); transition: transform 700ms var(--ease-in-out); }
  .js [data-rise] { opacity: 0; transform: translateY(20px); animation: rise 700ms var(--ease-out) forwards; }
  .js [data-rise]:nth-child(2) { animation-delay: 90ms; }
  .js [data-rise]:nth-child(3) { animation-delay: 180ms; }
  .js .hero__foot[data-rise] { animation-delay: 300ms; }
  .js .hero__title[data-rise] { opacity: 1; transform: none; animation: none; }
  .js .hero__title[data-rise] span { display: block; clip-path: inset(0 0 100% 0); transform: translateY(0.25em); animation: title-in 800ms var(--ease-out) forwards; }
  .js .hero__title[data-rise] span:last-child { animation-delay: 90ms; }
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-card].is-pending { opacity: 0; transform: translateY(28px) scale(0.98); }
  .js [data-card] { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .window { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), background-color var(--t-mid); }
  .js .windows.is-in .window { opacity: 1; transform: none; }
  .js .windows.is-in .window:nth-child(2) { transition-delay: 90ms; }
  .js .windows.is-in .window:nth-child(3) { transition-delay: 180ms; }
  .js .windows.is-in .window:nth-child(4) { transition-delay: 270ms; }
  .timeline__seg.is-now { animation: glow-breathe 3.2s ease-in-out 3 1s; }
  .saved__item { animation: rise 500ms var(--ease-out); }

  /* Headings light up as they scroll into view: dim, then a warm flash, then settled. */
  @supports (animation-timeline: view()) {
    [data-lightup] { animation: light-up linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .footer__name { animation: footer-light linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes title-in { 99% { clip-path: inset(-10% -5% -15% -5%); } to { clip-path: inset(-100%); transform: none; } }
@keyframes light-up {
  0% { color: var(--muted); text-shadow: none; } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
  60% { color: #fff6e4; text-shadow: 0 0 28px rgb(255 181 71 / 0.6); } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
  100% { color: var(--ink); text-shadow: none; } /* taste-skill-ignore: light or glow from a firework, or a real overlay */
}
@keyframes footer-light { from { --fx: 0%; filter: brightness(0.4); } to { --fx: 50%; filter: brightness(1); } }
@keyframes glow-breathe { 50% { box-shadow: 0 0 40px rgb(255 181 71 / 0.85); } } /* taste-skill-ignore: light or glow from a firework, or a real overlay */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .bar__cta { display: none; }
  .cat { grid-template-columns: minmax(0, 1fr) 168px; }
  .cat__desc, .cat__count { display: none; }
  .windows { grid-template-columns: repeat(2, 1fr); }
  .curfew { grid-template-columns: 1fr; }
  .curfew__note { grid-column: 1; }
  .faq { grid-template-columns: 1fr; }
  .faq__more { grid-column: 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .before { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --tabbar: 66px; }
  body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0; z-index: 55; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgb(7 6 12 / 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transition: transform var(--t-mid) var(--ease-out); } /* avoid-ai-design-ignore: K3 (the tab bar sits over scrolling content) */ /* taste-skill-ignore: the edge between a fixed bar and the content scrolling under it */
  .is-typing .tabbar, .is-counter .tabbar { transform: translateY(110%); }
  .mylist { display: none; }
  .bar { transition: transform var(--t-mid) var(--ease-out), background-color var(--t-mid), border-color var(--t-mid); }
  .bar-hidden .bar { transform: translateY(-100%); }
  .bar-hidden .toolbar, .bar-hidden .toc { top: 0; }
  .hero { min-height: calc(100svh - var(--tabbar) - env(safe-area-inset-bottom)); }
  .big__controls { display: none; }
  .toc { position: sticky; top: calc(var(--bar) - 1px); z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter); background: var(--night); border-bottom: 1px solid var(--line); transition: top var(--t-mid) var(--ease-out); } /* taste-skill-ignore: the edge between a fixed bar and the content scrolling under it */
  .toc::-webkit-scrollbar { display: none; }
  .toc__h { display: none; }
  .toc__link { flex: none; display: grid; place-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; white-space: nowrap; }
  .toc__link.is-active { background: var(--spark); color: var(--spark-ink); border-color: var(--spark); font-weight: 800; }
  .season__head { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .visit__card { grid-area: auto; margin: -64px 16px 0; }
  .product { grid-template-columns: 1fr; }
  .product__media { position: relative; top: auto; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root { --bar: 60px; }
  .mylist span:not(.mylist__count) { display: none; }
  .mylist { padding: 0 10px; }
  .hero { padding-bottom: 20px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__foot { display: grid; gap: 6px; }
  .windows { grid-template-columns: 1fr; }
  .window { padding: 16px 18px; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .window__dates { font-size: 1.2rem; }
  .window__state { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .window__note { grid-column: 1 / -1; }
  .finder .search { flex: 1 1 200px; }
  .chips { mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 32px; } /* taste-skill-ignore: fade hints that the chip row scrolls */
  .curfew__list { grid-template-columns: 1fr; gap: 20px; }
  .cat { grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; padding: 18px 0; }
  .cat__thumb { width: 54px; height: 54px; margin-left: -22px; }
  .timeline__months span:nth-child(even) { visibility: hidden; }
  .search input { width: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .card__name { font-size: 1rem; }
  .card__meta { font-size: 0.82rem; }
  .save { top: 6px; right: 6px; }
  .before__list { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; }
  .saved__item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; }
  .is-counter .saved__item { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

@media (hover: none) {
  .on-hover { display: none; }
  .on-touch { display: inline; }
  .plate { --lit: 0.7; }
  .zoom-lens { display: none; }
  .product__plate { cursor: default; }
}