/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ht-font-body); font-size: 1rem; line-height: 1.6; color: rgb(var(--ht-ink));
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip;
  background-color: rgb(var(--ht-paper));
  background-image:
    radial-gradient(52rem 38rem at 92% 28%, rgb(var(--ht-brand) / .06), transparent 60%),
    radial-gradient(46rem 36rem at 0% 72%, rgb(var(--ht-navy) / .06), transparent 60%);
}
@media (min-width: 1024px) { body { background-attachment: fixed; } } /* fixed backgrounds jank on mobile */
h1, h2, h3, h4, .font-display { font-family: var(--ht-font-display); letter-spacing: -0.02em; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-family: var(--ht-font-body); }
button, .ht-btn { font-family: var(--ht-font-display); }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid rgb(var(--ht-brand-deep)); outline-offset: 3px; border-radius: 8px; }
.ht-mesh :focus-visible { outline-color: #fff; }
::selection { background: rgb(var(--ht-brand-deep)); color: #fff; }
[id] { scroll-margin-top: 6rem; }

/* ---------- Layout rhythm (8pt grid) ---------- */
.ht-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
.ht-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.ht-section + .ht-section { padding-top: 0; } /* one gap between stacked sections, never two */
.ht-hero-pad { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.ht-h1 { font-size: clamp(2.25rem, 6.2vw, 4.75rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; }
.ht-h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; }
.ht-lede { font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.65; color: rgb(255 255 255 / .78); }

/* ---------- Glass ---------- */
.ht-glass {
  background: var(--ht-glass); border: 1px solid var(--ht-hairline);
  -webkit-backdrop-filter: blur(var(--ht-blur)) saturate(170%); backdrop-filter: blur(var(--ht-blur)) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), var(--ht-shadow-md);
}
.ht-glass-dark {
  background: var(--ht-glass-dark); border: 1px solid var(--ht-hairline-dark);
  -webkit-backdrop-filter: blur(var(--ht-blur)) saturate(150%); backdrop-filter: blur(var(--ht-blur)) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 24px 48px -24px rgb(0 0 0 / .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ht-glass { background: rgb(255 255 255 / .94); }
  .ht-glass-dark { background: rgb(38 46 58 / .9); }
}

/* ---------- Mesh gradient ---------- */
.ht-mesh { position: relative; isolation: isolate; overflow: hidden; background: rgb(var(--ht-ink-deep)); color: #fff; }
.ht-hero { margin: calc(.75rem - 3.5rem) .75rem 0; padding-top: 4.5rem; border-radius: 2rem; }
.ht-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); will-change: transform; animation: ht-drift 22s ease-in-out infinite alternate; }
.ht-blob.b1 { width: 32rem; height: 32rem; left: -10rem; top: -13rem; background: rgb(var(--ht-accent)); opacity: .8; }
.ht-blob.b2 { width: 28rem; height: 28rem; right: -8rem; top: -6rem; background: rgb(var(--ht-wine)); opacity: .95; animation-duration: 26s; animation-delay: -7s; }
.ht-blob.b3 { width: 28rem; height: 28rem; right: 18%; bottom: -16rem; background: rgb(var(--ht-navy)); opacity: .8; animation-duration: 30s; animation-delay: -12s; }
.ht-blob.b4 { width: 18rem; height: 18rem; right: 4%; bottom: -6rem; background: rgb(var(--ht-rose)); opacity: .35; animation-duration: 24s; animation-delay: -3s; }
@keyframes ht-drift { to { transform: translate3d(3.5rem, 2.5rem, 0) scale(1.15); } }
.ht-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; /* keeps text >= 4.5:1 over the brightest part of the mesh */
  background: linear-gradient(180deg, rgb(var(--ht-ink-deep) / .5), rgb(var(--ht-ink-deep) / .3)); }
@media (min-width: 1024px) { .ht-scrim { background: linear-gradient(90deg, rgb(var(--ht-ink-deep) / .72) 0%, rgb(var(--ht-ink-deep) / .4) 52%, transparent 100%); } }
.ht-mesh::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ht-grad-text { background: linear-gradient(100deg, #fff 0%, rgb(255 200 184) 55%, rgb(255 138 112) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Navbar ---------- */
.ht-navbar { background: rgb(255 255 255 / .74); transition: background-color var(--ht-base), box-shadow var(--ht-base); }
.ht-header.is-scrolled .ht-navbar { background: rgb(255 255 255 / .9); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), var(--ht-shadow-lg); }
.ht-navlink { display: inline-flex; align-items: center; height: 2.5rem; padding-inline: 1rem; border-radius: 999px; transition: background-color var(--ht-fast); }
.ht-navlink:hover { background: rgb(29 39 51 / .06); }
.ht-navlink[aria-current="page"] { background: rgb(29 39 51 / .08); }
.ht-menu { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity var(--ht-base) var(--ht-ease), transform var(--ht-base) var(--ht-ease), visibility 0s linear var(--ht-base); }
.ht-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ht-menu nav { background: rgb(255 255 255 / .95); }

/* ---------- Buttons (44px+ tap targets) ---------- */
.ht-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; border-radius: 999px; font-weight: 700; font-size: .9rem; line-height: 1; padding: .8rem 1.5rem; transition: transform var(--ht-fast) var(--ht-ease), background-color var(--ht-fast), box-shadow var(--ht-base), border-color var(--ht-fast), color var(--ht-fast); }
.ht-btn:active { transform: scale(.97); }
.ht-btn i { transition: transform var(--ht-base) var(--ht-ease); }
.ht-btn-ink { background: rgb(var(--ht-ink)); color: #fff; padding-inline: 1.15rem; }
.ht-btn-brand { color: #fff; background: linear-gradient(180deg, rgb(214 38 44), rgb(180 22 30)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(120 10 20 / .4), 0 10px 24px -10px rgb(var(--ht-brand-deep) / .8); }
.ht-btn-brand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .32) 50%, transparent 70%); transform: translateX(-120%); }
.ht-btn-ghost { border: 1px solid var(--ht-hairline); background: rgb(255 255 255 / .6); box-shadow: var(--ht-shadow-sm); }
@media (hover: hover) {
  .ht-btn:hover i.bi-arrow-up-right { transform: translate(2px, -2px); }
  .ht-btn-ink:hover { background: rgb(var(--ht-brand-deep)); }
  .ht-btn-brand:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 1px 2px rgb(120 10 20 / .4), 0 16px 30px -10px rgb(var(--ht-brand-deep) / .9); }
  .ht-btn-brand:hover::after { transform: translateX(120%); transition: transform 700ms var(--ht-ease); }
  .ht-btn-ghost:hover { border-color: rgb(var(--ht-brand-deep) / .5); color: rgb(var(--ht-brand-deep)); }
}

/* ---------- Search (on dark mesh) ---------- */
.ht-search { display: flex; align-items: center; gap: .5rem; padding: .375rem .375rem .375rem 1.125rem; border-radius: 999px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(var(--ht-blur)); backdrop-filter: blur(var(--ht-blur)); transition: border-color var(--ht-base), background-color var(--ht-base), box-shadow var(--ht-base); }
.ht-search:focus-within { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .16); box-shadow: 0 0 0 4px rgb(var(--ht-brand) / .32), 0 24px 44px -22px rgb(0 0 0 / .7); }
.ht-search input { flex: 1; min-width: 0; height: 2.75rem; background: transparent; color: #fff; font-size: 1rem; } /* 16px stops iOS zoom */
.ht-search input::placeholder { color: rgb(255 255 255 / .62); }
.ht-search input:focus-visible { outline: none; }
.ht-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.ht-search kbd { font-family: var(--ht-font-display); font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border: 1px solid rgb(255 255 255 / .26); border-radius: 6px; color: rgb(255 255 255 / .68); transition: opacity var(--ht-fast); }
.ht-search:focus-within kbd { opacity: 0; }
.ht-search-btn { flex: none; width: 2.75rem; height: 2.75rem; padding: 0; }
@media (min-width: 640px) { .ht-search-btn { width: auto; padding-inline: 1.5rem; } }

/* ---------- Chips ---------- */
.ht-chip { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; min-height: 2.25rem; padding-inline: 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; line-height: 1; color: rgb(255 255 255 / .92); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2); transition: background-color var(--ht-fast), color var(--ht-fast), transform var(--ht-fast) var(--ht-ease), border-color var(--ht-fast); }
a.ht-chip { min-height: 2.5rem; }
a.ht-chip:active { transform: scale(.96); }
@media (hover: hover) { a.ht-chip:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .4); transform: translateY(-1px); } }
.ht-chip[aria-current="true"] { background: #fff; color: rgb(var(--ht-ink)); border-color: #fff; }
.ht-chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(clamp(1.25rem, 4vw, 2rem) * -1); padding-inline: clamp(1.25rem, 4vw, 2rem); }
.ht-chips::-webkit-scrollbar { display: none; }
.ht-chips > * { scroll-snap-align: start; flex: none; }
@media (min-width: 768px) { .ht-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* ---------- Restaurant card ---------- */
.ht-card { position: relative; height: 100%; padding: .5rem; border-radius: var(--ht-radius-card); transition: transform var(--ht-base) var(--ht-ease), border-color var(--ht-base), box-shadow var(--ht-base) var(--ht-ease); }
.ht-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity var(--ht-base);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--ht-brand) / .12), transparent 45%); }
.ht-card:active { transform: scale(.99); }
@media (hover: hover) {
  .ht-card:hover { transform: translateY(-6px); border-color: rgb(var(--ht-brand-deep) / .32); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 30px 44px -24px rgb(var(--ht-brand-deep) / .4); }
  .ht-card:hover::before { opacity: 1; }
  .ht-card:hover .ht-card-title { color: rgb(var(--ht-brand-deep)); }
  .ht-card:hover .ht-thumb-inner { transform: scale(1.08); }
  .ht-card:hover .ht-initial { color: rgb(255 255 255 / .2); }
}
.ht-thumb { position: relative; overflow: hidden; border-radius: var(--ht-radius-inner); background: rgb(var(--tone, var(--ht-brand))); }
.ht-thumb::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(at 12% 8%, rgb(255 255 255 / .36), transparent 52%), radial-gradient(at 92% 100%, rgb(0 0 0 / .4), transparent 58%); }
.ht-thumb-inner { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 700ms var(--ht-ease); }
.ht-initial { font-family: var(--ht-font-display); font-weight: 800; font-size: clamp(5rem, 22vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .8); user-select: none; transition: color var(--ht-base); }
.ht-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; height: 1.75rem; padding-inline: .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; font-family: var(--ht-font-display); color: #fff; background: rgb(0 0 0 / .4); border: 1px solid rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ht-pill i { color: rgb(255 204 90); font-size: .72rem; }
.ht-price span { color: rgb(var(--ht-smoke) / .45); }
.ht-price span.on { color: rgb(var(--ht-ink)); }

/* ---------- Save button ---------- */
.ht-save { position: absolute; z-index: 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: #fff; font-size: 1.05rem; background: rgb(0 0 0 / .36); border: 1px solid rgb(255 255 255 / .26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform var(--ht-fast) var(--ht-ease), background-color var(--ht-fast); }
.ht-save--static { position: relative; }
.ht-save:active { transform: scale(.9); }
@media (hover: hover) { .ht-save:hover { transform: scale(1.08); background: rgb(0 0 0 / .5); } }
.ht-save .on { display: none; }
.ht-save[aria-pressed="true"] .off { display: none; }
.ht-save[aria-pressed="true"] .on { display: block; color: rgb(255 110 118); animation: ht-pop 460ms var(--ht-ease); }
.ht-save::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgb(255 110 118); opacity: 0; }
.ht-save[aria-pressed="true"]::after { animation: ht-ring 600ms var(--ht-ease); }
@keyframes ht-pop { 0% { transform: scale(.6); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes ht-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }

/* ---------- Tilt, rows, tiles ---------- */
.ht-tilt { transition: transform 260ms ease-out; will-change: transform; }
.ht-row { position: relative; transition: background-color var(--ht-fast), padding var(--ht-base) var(--ht-ease); }
.ht-row::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: rgb(var(--ht-brand-deep)); transform: scaleY(0); transition: transform var(--ht-base) var(--ht-ease); }
@media (hover: hover) { .ht-row:hover { background: rgb(var(--ht-brand) / .05); } .ht-row:hover::before { transform: scaleY(1); } }
.ht-icon-tile { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; color: #fff; font-size: 1.15rem; background: linear-gradient(180deg, rgb(214 38 44), rgb(150 18 40)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 8px 18px -8px rgb(var(--ht-brand-deep) / .7); }
.ht-link-arrow i { display: inline-block; transition: transform var(--ht-base) var(--ht-ease); }
@media (hover: hover) { .ht-link-arrow:hover i { transform: translate(3px, -3px); } }

/* ---------- Motion ---------- */
.ht-rise { opacity: 0; transform: translateY(20px); animation: ht-rise 800ms var(--ht-ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes ht-rise { to { opacity: 1; transform: none; } }
.js .ht-reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ht-ease), transform 700ms var(--ht-ease); transition-delay: var(--d, 0ms); }
.js .ht-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ht-rise, .js .ht-reveal { opacity: 1; transform: none; }
}