/* NOX — page-specific styles */

/* ============ HERO (tasteful dark motion) ============ */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: saturate(0.85) brightness(0.78) contrast(1.02); }
/* layered cool gradients drifting slowly */
.hero__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(111,179,168,0.14), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, rgba(60,93,87,0.18), transparent 70%),
    linear-gradient(180deg, rgba(10,11,12,0.2) 0%, rgba(10,11,12,0.55) 60%, var(--bg) 100%);
}
.hero__grain { position: absolute; inset: 0; z-index: 2; opacity: 0.05; pointer-events: none; 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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 3; }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero h1 { font-size: var(--text-hero); font-weight: 600; max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub { margin-top: 1.6rem; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.hero__cta { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; font-size: var(--text-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.hero__scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); animation: scrolldot 2.2s var(--ease) infinite; }
@keyframes scrolldot { 0%,100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll i { animation: none; } }

/* ============ generic section heads ============ */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: var(--sp-lg); flex-wrap: wrap; }
.sec-head .eyebrow { margin-bottom: 0.8rem; }
.sec-head__text { max-width: 60ch; }
.sec-head h2 { margin-top: 0.3rem; }

/* ============ intro / split ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) brightness(0.9); }
.split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(111,179,168,0.08)); }
.stat-row { display: flex; gap: var(--sp-lg); margin-top: 2rem; flex-wrap: wrap; }
.stat b { font-family: var(--font-display); font-size: 2rem; color: var(--ink); display: block; }
.stat span { font-size: var(--text-sm); color: var(--ink-3); letter-spacing: 0.04em; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--sp-md); } .split--reverse .split__media { order: 0; } }

/* ============ featured grid ============ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.drink-card .card__body { display: flex; flex-direction: column; gap: 0.4rem; }
.drink-card h3 { color: var(--ink); }
.drink-card .price { color: var(--accent); font-family: var(--font-display); font-size: 1.05rem; }
.drink-card p { font-size: var(--text-sm); }

/* ============ hours / location strip ============ */
.strip { background: var(--bg-2); border-block: 1px solid var(--line); }
.strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); align-items: start; }
.strip__col h4 { font-family: var(--font-display); color: var(--ink); margin-bottom: 0.8rem; font-size: 1.1rem; }
.strip__col p, .strip__col li { font-size: var(--text-sm); color: var(--ink-2); }
.strip__col li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--line); }
.strip__col li b { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .strip__grid { grid-template-columns: 1fr; gap: var(--sp-md); } }

/* ============ CTA band ============ */
.band { text-align: center; position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(3rem, 8vw, 6rem) 2rem; background: radial-gradient(120% 140% at 50% 0%, rgba(60,93,87,0.35), var(--surface) 60%); border: 1px solid var(--line-2); }
.band h2 { margin-bottom: 1rem; }
.band .lead { margin-inline: auto; margin-bottom: 2rem; }

/* ============ MENU page ============ */
.menu-hero { padding-top: calc(var(--nav-h) + var(--sp-xl)); padding-bottom: var(--sp-lg); }
.menu-nav { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(10,11,12,0.82); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.menu-nav__inner { display: flex; gap: 0.6rem; padding-block: 0.9rem; overflow-x: auto; scrollbar-width: none; }
.menu-nav__inner::-webkit-scrollbar { display: none; }
.menu-filter { white-space: nowrap; padding: 0.5rem 1.1rem; border-radius: 100px; border: 1px solid var(--line-2); font-size: var(--text-sm); color: var(--ink-2); transition: all var(--t-fast); }
.menu-filter.active { background: var(--accent); color: #04110e; border-color: var(--accent); font-weight: 600; }
.menu-filter:hover:not(.active) { border-color: var(--accent); color: var(--ink); }

.menu-cat { margin-top: var(--sp-xl); scroll-margin-top: calc(var(--nav-h) + 80px); }
.menu-cat__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: var(--sp-md); }
.menu-cat__head h2 { color: var(--ink); }
.menu-cat__head span { font-size: var(--text-sm); color: var(--ink-3); letter-spacing: 0.1em; }
.menu-cat__head .line { flex: 1; height: 1px; background: var(--line); }
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 3rem; }
@media (max-width: 760px) { .menu-list { grid-template-columns: 1fr; } }
.menu-item { display: flex; align-items: baseline; gap: 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--line); transition: opacity var(--t-fast); }
.menu-item__name { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); font-weight: 500; }
.menu-item__tags { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-left: 0.5rem; }
.menu-item__desc { font-size: var(--text-sm); color: var(--ink-3); display: block; margin-top: 0.2rem; }
.menu-item__dots { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); min-width: 1.5rem; }
.menu-item__price { font-family: var(--font-display); color: var(--accent); font-size: 1.05rem; white-space: nowrap; }
.menu-item.hide { display: none; }

/* ============ LOUNGE page ============ */
.page-hero { position: relative; min-height: 64svh; display: grid; align-items: end; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.85); }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,12,0.4) 0%, transparent 30%, var(--bg) 100%); }
.page-hero__inner { position: relative; z-index: 2; padding-bottom: var(--sp-lg); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); }

.gallery { columns: 3; column-gap: var(--sp-md); }
.gallery img { width: 100%; margin-bottom: var(--sp-md); border-radius: var(--r-md); break-inside: avoid; filter: saturate(0.9) brightness(0.9); transition: filter var(--t-med), transform var(--t-med) var(--ease); }
.gallery img:hover { filter: saturate(1.05) brightness(1); transform: scale(1.01); }
@media (max-width: 860px) { .gallery { columns: 2; } }
@media (max-width: 540px) { .gallery { columns: 1; } }

.nights { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.night { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: 1.6rem var(--sp-md); background: var(--surface); transition: background var(--t-fast); }
.night:hover { background: var(--surface-2); }
.night__day { font-family: var(--font-display); color: var(--accent); font-size: 1.1rem; min-width: 5ch; }
.night h3 { color: var(--ink); }
.night p { font-size: var(--text-sm); margin-top: 0.2rem; }
.night__time { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 640px) { .night { grid-template-columns: 1fr; gap: 0.4rem; } .night__time { color: var(--accent); } }

/* ============ VISIT page ============ */
.visit-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-lg); align-items: stretch; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }
.info-block { margin-bottom: var(--sp-md); }
.info-block h4 { font-family: var(--font-display); color: var(--ink); font-size: 1.15rem; margin-bottom: 0.5rem; }
.info-block p { font-size: 0.95rem; }
.info-block a { color: var(--accent); }
.map-block { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 420px; border: 1px solid var(--line-2); background: var(--surface); display: grid; }
.map-block iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: invert(0.92) hue-rotate(160deg) saturate(0.7) brightness(0.9) contrast(0.95); }
.map-fallback { position: relative; display: grid; place-items: center; text-align: center; padding: 2rem; background:
  repeating-linear-gradient(45deg, var(--surface) 0 18px, var(--surface-2) 18px 36px); }
.map-fallback .pin { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-glow); margin-bottom: 1rem; }
.hours-table { width: 100%; }
.hours-table li { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.hours-table li b { color: var(--ink); font-weight: 500; }
.hours-table .today { color: var(--accent); }

/* ============ RESERVE page ============ */
.reserve-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-lg); align-items: start; }
@media (max-width: 860px) { .reserve-grid { grid-template-columns: 1fr; } }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.6rem); }
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0.85rem 1rem; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.field textarea { resize: vertical; min-height: 90px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-error { color: #e0786f; font-size: 0.78rem; margin-top: 0.35rem; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid select { border-color: #e0786f; }
.party-step { display: flex; align-items: center; gap: 0.8rem; }
.party-step button { width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 1.2rem; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
.party-step button:hover { border-color: var(--accent); background: var(--accent-glow); }
.party-step output { font-family: var(--font-display); font-size: 1.3rem; min-width: 3ch; text-align: center; color: var(--ink); }

/* confirmation state */
.confirm { display: none; text-align: center; padding: clamp(2rem, 6vw, 4rem) 1.5rem; }
.confirm.show { display: block; animation: pop var(--t-med) var(--ease); }
.form.hide { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(0.97) translateY(10px); } to { opacity: 1; transform: none; } }
.confirm__check { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; margin: 0 auto 1.5rem; color: var(--accent); font-size: 1.8rem; box-shadow: 0 0 0 8px var(--accent-glow); }
.confirm__code { font-family: var(--font-display); color: var(--accent); letter-spacing: 0.1em; font-size: 1.2rem; margin: 1rem 0; }
.confirm__detail { display: inline-grid; grid-template-columns: auto auto; gap: 0.5rem 1.5rem; text-align: left; margin: 1.5rem auto; font-size: 0.95rem; }
.confirm__detail dt { color: var(--ink-3); }
.confirm__detail dd { color: var(--ink); }

/* reserve aside */
.reserve-aside h3 { color: var(--ink); margin-bottom: 1rem; }
.reserve-aside ul { display: grid; gap: 1rem; }
.reserve-aside li { display: flex; gap: 0.8rem; font-size: 0.95rem; color: var(--ink-2); }
.reserve-aside li::before { content: "—"; color: var(--accent); }

/* legal pages */
.legal { padding-top: calc(var(--nav-h) + var(--sp-lg)); max-width: 760px; }
.legal h1 { margin-bottom: 0.5rem; }
.legal h2 { font-size: 1.3rem; color: var(--ink); margin-top: 2.5rem; margin-bottom: 0.8rem; }
.legal p, .legal li { color: var(--ink-2); margin-bottom: 1rem; font-size: 0.95rem; }
.legal ul { list-style: disc; padding-left: 1.4rem; }
.legal li { margin-bottom: 0.5rem; }
.legal .muted { font-size: var(--text-sm); }