/* =========================================================
   Bonobo — tokens
   ========================================================= */
:root {
	--ink: #0d0d0d;
	--ink-2: #191919;
	--cream: #f7f1e3;
	--cream-2: #efe6d2;
	--lime: #cbe62e;
	--lime-deep: #a9c418;
	--pink: #e340ab;
	--pink-deep: #b8218a;
	--purple: #5b57e8;
	--green: #1f8a4c;
	--white: #fff;

	/* Dark-theme surfaces. --bg is the page ground (a warm near-black, distinct
	   from the pure --ink used for panels/buttons so the two read as separate
	   depths). --bg-alt is one step up for cards, inputs and placeholders.
	   --text is the default light body copy — same value --cream already had,
	   since --cream continues to serve as "light text on an --ink panel"
	   everywhere it was used that way. */
	--bg: #14111a;
	--bg-alt: #201a29;
	--text: #f7f1e3;

	/* Bebas Neue replaces Shrikhand/Anton for every heading role sitewide.
	   The hero headline itself is an exact image of the client's "bar / love
	   / food" wordmark (assets/img/hero-wordmark.png) rather than a font —
	   no typeface matches bespoke brand lettering closely enough. */
	--font-display: "Bebas Neue", "Arial Narrow", sans-serif;
	--font-heading: "Bebas Neue", "Arial Narrow", sans-serif;
	--font-body: "Space Grotesk", Helvetica, Arial, sans-serif;
	--font-mono: "Space Mono", ui-monospace, Menlo, monospace;

	--radius: 26px;
	--container: 1240px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dock-h: 92px;

	color-scheme: dark;
}

/* ---------------------------------------------------------
   Self-hosted fonts — client-supplied files, not Google Fonts.
   Bebas Neue ships as five separate static weights (no variable
   axis in the files provided), so each gets its own @font-face
   tied to a font-weight value rather than one variable declaration.
   --------------------------------------------------------- */
@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/bebas-neue-thin.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/bebas-neue-light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/bebas-neue-book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/bebas-neue-regular.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/bebas-neue-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	padding-bottom: var(--dock-h);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
button { font: inherit; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 780px; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; background: var(--ink); color: var(--white); padding: 12px 20px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Type ---------- */
.display {
	font-family: var(--font-display);
	font-weight: 700;
	/* Bebas Neue Bold — condensed enough that anything under ~1.0 line-height
	   still collides across lines. */
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 0 0 0.4em;
	font-size: clamp(2.7rem, 6.4vw, 6rem);
	text-wrap: balance;
}
.display--xl { font-size: clamp(3rem, 8.2vw, 8rem); }
.display--lime { color: var(--lime); }

h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.12; margin: 0 0 0.4em; font-size: clamp(1.4rem, 2.2vw, 2rem); }

.mono-label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	opacity: 0.75;
	display: block;
	margin-bottom: 1.1em;
}

.inline-art {
	display: inline-block; vertical-align: -0.14em;
	width: 0.78em; height: 0.78em; object-fit: contain;
	margin-left: 0.06em;
	animation: wobble 5s ease-in-out infinite;
}
@keyframes wobble { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 30px; border-radius: 999px; border: 2px solid transparent;
	font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem;
	text-transform: uppercase; letter-spacing: 0.09em; cursor: pointer;
	transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
	will-change: transform;
}
.btn__arrow { transition: transform 0.3s var(--ease); display: inline-block; }
.btn:hover .btn__arrow { transform: translate(4px, -4px); }
.btn--lg { padding: 20px 38px; font-size: 0.95rem; }
.btn--primary { background: var(--pink); color: var(--white); }
.btn--primary:hover { background: var(--ink); color: var(--lime); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--pink); color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); padding: 12px 24px; }
.btn--outline { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.btn--outline:hover { background: var(--pink); border-color: var(--pink); color: var(--white); }
.btn--sm { padding: 11px 20px; font-size: 0.72rem; }
.btn--full { width: 100%; justify-content: center; }

/* =========================================================
   Top bar
   ========================================================= */
.topbar {
	position: relative; z-index: 60;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 22px 34px; gap: 20px;
}
.topbar--over { position: absolute; top: 0; left: 0; right: 0; }
.topbar__side { display: flex; }
.topbar__side--right { justify-content: flex-end; }
.topbar .mono-label { margin: 0; opacity: 0.65; font-size: 0.68rem; }

.brand { display: block; justify-self: center; line-height: 0; }
.brand__logo {
	width: auto; height: 78px; display: block;
	transition: transform 0.35s var(--ease);
}
.brand:hover .brand__logo { transform: scale(1.04); }

.hero--video ~ * .topbar, .topbar--over.on-dark { color: var(--cream); }

/* =========================================================
   Floating dock nav (the signature element)
   ========================================================= */
.dock {
	position: fixed; z-index: 90;
	left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
	border-radius: 999px; padding: 7px;
	background: linear-gradient(95deg, var(--pink) 0%, var(--lime) 55%, var(--purple) 100%);
	box-shadow: 0 16px 44px rgba(0,0,0,0.28);
}
.dock__list { display: flex; align-items: center; gap: 2px; }
.dock__link {
	position: relative; display: block; padding: 13px 22px; border-radius: 999px;
	font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem;
	text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink);
	transition: background 0.25s var(--ease), color 0.25s var(--ease);
	white-space: nowrap;
}
.dock__link:hover, .dock__link.is-current { background: var(--ink); color: var(--cream); }

.dock__has-menu { position: relative; }

/* Mega-panel: 36 categories won't fit a single list, so each section gets a
   column and Bar (22 items) splits into two. */
.dock__mega {
	position: absolute; bottom: calc(100% + 14px); left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: min(940px, calc(100vw - 48px));
	background: var(--ink); color: var(--cream);
	border-radius: 24px; padding: 28px 30px;
	display: grid; grid-template-columns: 1fr 2fr 1.15fr; gap: 30px;
	max-height: min(64vh, 540px); overflow-y: auto;
	opacity: 0; visibility: hidden;
	/* Close is delayed so a slightly wandering cursor doesn't dismiss the panel. */
	transition: opacity 0.25s var(--ease) 0.35s, transform 0.25s var(--ease) 0.35s, visibility 0s linear 0.6s;
	box-shadow: 0 26px 64px rgba(0,0,0,0.45);
}
/* Invisible bridge across the gap between the dock and the panel so the
   hover never drops while the pointer travels up. */
.dock__has-menu:hover::after,
.dock__has-menu:focus-within::after,
.dock__has-menu.is-open::after { content: ""; position: absolute; left: -70px; right: -70px; bottom: 100%; height: 22px; }
.dock__has-menu:hover .dock__mega,
.dock__has-menu:focus-within .dock__mega,
.dock__has-menu.is-open .dock__mega {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}

.mega__title {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--lime);
	padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.18);
}
.mega__all {
	font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
	letter-spacing: 0.12em; color: rgba(255,255,255,0.55); white-space: nowrap;
}
.mega__title:hover .mega__all { color: var(--pink); }

.mega__list { display: grid; gap: 1px; }
.mega__list--split { display: block; columns: 2; column-gap: 26px; }
.mega__list--split li { break-inside: avoid; }
.mega__list a {
	display: block; padding: 7px 10px; border-radius: 9px;
	font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
	color: rgba(255,255,255,0.78);
}
.mega__list a:hover { background: var(--lime); color: var(--ink); }
@media (pointer: coarse) {
	.mega__list a { padding: 12px 12px; font-size: 0.82rem; }
	.dock__link { padding: 15px 22px; }
}
a, button, .btn, .dock__link { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* =========================================================
   Hamburger / mobile nav
   ========================================================= */
.hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; justify-self: end; background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
.hamburger span { width: 26px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	display: none; position: fixed; inset: 0; z-index: 200;
	background: var(--ink); color: var(--cream); padding: 110px 32px 40px;
	transform: translateY(-100%); transition: transform 0.45s var(--ease); overflow-y: auto;
}
.mobile-nav.is-open { transform: translateY(0); }
.nav-open .topbar { z-index: 250; color: var(--cream); }
.mobile-nav > ul > li > a, .mobile-nav__submenu > span {
	display: block; padding: 18px 4px; font-family: var(--font-display); font-weight: 700;
	font-size: 2rem; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.mobile-nav__submenu ul { padding-left: 18px; }
.mobile-nav__submenu ul li a { font-family: var(--font-mono); font-size: 0.9rem; padding: 12px 4px; text-transform: uppercase; letter-spacing: 0.1em; border: none; display: block; }
.mobile-nav__social { display: inline-block; padding: 12px 0; margin-top: 28px; color: var(--lime); font-family: var(--font-mono); font-weight: 700; }

/* =========================================================
   Doodles
   ========================================================= */
.doodle { position: absolute; opacity: 0.92; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
.slab__doodle { position: absolute; opacity: 0.85; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.28)); }
.slab__doodle--tl { top: 6%; left: 3%; }
.slab__doodle--tr { top: 8%; right: 4%; }
.slab__doodle--bl { bottom: 8%; left: 5%; }
.slab__doodle--br { bottom: 7%; right: 4%; }

@keyframes floaty {
	0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
	50%      { transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
.doodle--float { animation: floaty 7s ease-in-out infinite; }

.hero__doodles .doodle:nth-child(1) { top: 17%; left: 7%;   --rot: -12deg; animation-delay: 0s; }
.hero__doodles .doodle:nth-child(2) { top: 11%; right: 9%;  --rot: 14deg;  animation-delay: 1.1s; }
.hero__doodles .doodle:nth-child(3) { top: 46%; right: 5%;  --rot: 8deg;   animation-delay: 2.2s; }
.hero__doodles .doodle:nth-child(4) { bottom: 26%; left: 11%; --rot: -10deg; animation-delay: 0.6s; }

/* =========================================================
   Rotating badge
   ========================================================= */
.spin-badge { width: 150px; height: 150px; animation: spin 22s linear infinite; }
.spin-badge text {
	font-family: var(--font-mono); font-size: 13px; font-weight: 700;
	letter-spacing: 0.16em; fill: currentColor;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Hero
   ========================================================= */
.hero {
	position: relative; min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; text-align: center; padding: 120px 24px 170px;
}
/* Keep the fixed top bar clear of the WP admin bar in logged-in previews */
.admin-bar .topbar--over { top: 32px; }
@media (max-width: 782px) { .admin-bar .topbar--over { top: 46px; } }
.hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(circle at 14% 22%, rgba(203,230,46,0.55), transparent 46%),
		radial-gradient(circle at 86% 16%, rgba(227,64,171,0.5), transparent 46%),
		radial-gradient(circle at 50% 92%, rgba(91,87,232,0.45), transparent 52%),
		var(--bg);
}
.hero__slides { overflow: hidden; }
.hero__slide {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; animation: heroFade 16s infinite; animation-delay: var(--d, 0s); transform: scale(1.04);
}
@keyframes heroFade {
	0%   { opacity: 0; transform: scale(1.04); }
	2.5% { opacity: 1; }
	14%  { opacity: 1; }
	17%  { opacity: 0; transform: scale(1.12); }
	100% { opacity: 0; transform: scale(1.12); }
}
.reduce-motion .hero__slide { animation: none; }
.reduce-motion .hero__slide:first-child { opacity: 1; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at center, rgba(13,13,13,0.55), transparent 70%), linear-gradient(180deg, rgba(13,13,13,0.6), rgba(13,13,13,0.45) 45%, rgba(13,13,13,0.85)); }
.hero--video { color: var(--cream); }
.hero--video .doodle { opacity: 0.55; }

.hero__doodles { position: absolute; inset: 0; z-index: 1; }
.hero__inner { position: relative; z-index: 2; }
/* The hero headline is the client's own "bar / love / food" wordmark
   artwork (assets/img/hero-wordmark.png) — no web font matches bespoke
   brand lettering closely enough, so this renders as an exact image rather
   than an approximation. Sized by height so it scales with viewport the same
   way the old type-based version did. */
.hero__title { margin: 0 0 0.5em; line-height: 0; }
.hero__title-img {
	width: auto; height: clamp(11rem, min(24vw, 40vh), 30rem);
	margin: 0 auto;
}
.hero__cta { margin-top: 0.4em; }

.hero__badge { position: absolute; z-index: 2; right: 7%; bottom: 13%; opacity: 0.55; }
.hero__corner { position: absolute; z-index: 2; bottom: 5%; margin: 0; font-size: 0.68rem; opacity: 0.6; }
.hero__corner--left { left: 4%; }
.hero__corner--right { right: 4%; }

/* =========================================================
   Marquee
   ========================================================= */
.marquee { overflow: hidden; padding: 20px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.marquee--lime { background: var(--lime); color: var(--ink); }
.marquee__track { display: flex; align-items: center; gap: 26px; white-space: nowrap; width: max-content; animation: slide 34s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.marquee__dot { opacity: 0.5; }
@keyframes slide { to { transform: translateX(-50%); } }

.photo-marquee { overflow: hidden; padding: 40px 0 56px; }
.photo-marquee__track { display: flex; gap: 22px; width: max-content; animation: slide 44s linear infinite; }
.photo-tile {
	width: 260px; height: 320px; flex: none; border-radius: 18px;
	background: var(--bg-alt); overflow: hidden;
	transition: transform 0.35s var(--ease);
}
.photo-tile:nth-child(odd)  { transform: rotate(-2.5deg); }
.photo-tile:nth-child(even) { transform: rotate(2.5deg); }

/* =========================================================
   Slabs (full-bleed colour sections)
   ========================================================= */
.slab { position: relative; padding: 120px 0; overflow: hidden; }
.slab--cream { background: var(--bg); }
.slab--ink { background: var(--ink); color: var(--cream); }
.slab--lime { background: var(--lime); color: var(--ink); }
.slab--pink { background: var(--pink); color: var(--white); }
.slab--ink .slab__doodle, .slab--pink .slab__doodle { opacity: 0.9; }
.slab--lime .slab__doodle { opacity: 0.82; filter: drop-shadow(0 6px 14px rgba(13,13,13,0.2)); }
.slab__head { max-width: 780px; margin-bottom: 60px; }
.slab__head--center { text-align: center; margin-left: auto; margin-right: auto; }

.dotted-rule { border-top: 2px dotted rgba(255,255,255,0.22); margin: 0; }
.slab--pink .dotted-rule { border-color: rgba(255,255,255,0.3); }
.slab--lime .dotted-rule { border-color: rgba(13,13,13,0.25); }

/* ---------- Pillar rows (editorial list) ---------- */
.pillar-row {
	position: relative;
	display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 40px;
	padding: 46px 0;
}
.pillar-row__label { display: flex; align-items: baseline; gap: 14px; }
.pillar-row__num { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.5; }
.pillar-row__label h3 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.pillar-row__text { margin: 0; max-width: 46ch; opacity: 0.82; }

/* ---------- Tilted cards ---------- */
.tilt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.tilt-card {
	position: relative; display: block; border-radius: var(--radius); padding: 44px 40px 40px;
	color: var(--white); overflow: hidden;
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tilt-card--purple { background: var(--purple); transform: rotate(-1.6deg); }
.tilt-card--green  { background: var(--green);  transform: rotate(1.6deg); }
.tilt-card:hover { transform: rotate(0deg) translateY(-10px); box-shadow: 0 26px 60px rgba(0,0,0,0.35); }
.tilt-card .mono-label { opacity: 0.85; margin-bottom: 0.8em; }
.tilt-card h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom: 0.3em; }
.tilt-card p { opacity: 0.9; margin-bottom: 1.6em; max-width: 34ch; }
.tilt-card__badge {
	position: absolute; top: 26px; right: 26px; z-index: 2; background: var(--lime); color: var(--ink);
	font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem;
	text-transform: uppercase; letter-spacing: 0.1em; padding: 7px 15px; border-radius: 999px;
}
.tilt-card__doodle { position: absolute; right: -18px; bottom: -18px; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3)); }

/* ---- Flyer cards: the real 99 / Old School posters as the card art.
   Image on top at its own aspect ratio, copy in a solid panel below — the
   same proven split used for the Upcoming Events cards. An overlaid scrim
   was tried first and rejected: its gradient stops are a % of the card's
   own height, which varies with wrapped text, so on narrower cards the text
   landed outside the darkened zone and read directly over the busy flyer art. */
.tilt-card--flyer { padding: 0; display: flex; flex-direction: column; }
.tilt-card__media { position: relative; display: block; aspect-ratio: 1600 / 1131; overflow: hidden; }
.tilt-card__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.tilt-card:hover .tilt-card__img { transform: scale(1.06); }
.tilt-card__body { display: block; padding: 28px 40px 40px; }
.tilt-card--flyer .mono-label { margin-bottom: 0.7em; }
.tilt-card--flyer h3 { margin-bottom: 0.3em; }
.tilt-card--flyer p { margin-bottom: 1.4em; }

/* ---------- Statement sections ---------- */
.statement__inner { max-width: 900px; position: relative; z-index: 1; }
.statement__lede { font-size: 1.18rem; max-width: 50ch; margin-bottom: 1.8em; opacity: 0.9; }
/* Statement copy is left-aligned and wide, so only keep corner doodles where
   there is genuinely free space to the right of the text column. */
.statement .slab__doodle--tl, .statement .slab__doodle--bl { display: none; }
@media (max-width: 1180px) { .statement .slab__doodle { display: none; } }

/* =========================================================
   Page hero (inner pages)
   ========================================================= */
.page-hero { position: relative; padding: 90px 0 70px; text-align: center; overflow: hidden; background: var(--bg-alt); }
.page-hero h1 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; margin: 0 0 0.34em; font-size: clamp(2.8rem, 7vw, 6rem); text-wrap: balance; }
.page-hero--menu { background: var(--ink); color: var(--cream); }
.page-hero--events { background: var(--purple); color: var(--white); }
.page-hero--host { background: var(--pink); color: var(--white); }
.page-hero__lede { max-width: 52ch; margin: 0 auto; font-size: 1.1rem; opacity: 0.88; }

/* =========================================================
   About page
   ========================================================= */
.prose-section { padding: 90px 0; }
.prose-section p { font-size: 1.1rem; }
.values-strip { padding: 10px 0 100px; }
.values-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card { position: relative; border-radius: var(--radius); padding: 40px 34px; overflow: hidden; }
.value-card:nth-child(1) { background: var(--pink); color: var(--white); transform: rotate(-1.4deg); }
.value-card:nth-child(2) { background: var(--ink); color: var(--lime); }
.value-card:nth-child(3) { background: var(--lime); color: var(--ink); transform: rotate(1.4deg); }
.gallery-section { padding-bottom: 110px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.gallery-tile { aspect-ratio: 1; background: var(--bg-alt); border-radius: 16px; overflow: hidden; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile--tall { aspect-ratio: 1 / 1.4; }

/* =========================================================
   Upcoming events (dated one-offs)
   ========================================================= */
.event-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 34px 30px; margin-top: 44px;
}

.event-poster { display: flex; flex-direction: column; height: 100%; }

/* ---- poster ---- */
.event-poster__media {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4 / 5; border-radius: var(--radius);
	background: var(--bg-alt);
}
.event-poster__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.event-poster:hover .event-poster__img { transform: scale(1.05); }

/* Fallback treatment while no flyer has been uploaded */
.event-poster__media--purple { background: var(--purple); color: var(--white); }
.event-poster__media--green  { background: var(--green);  color: var(--white); }
.event-poster__media--pink   { background: var(--pink);   color: var(--white); }
.event-poster__media--ink    { background: var(--ink);    color: var(--lime); }

.event-poster__fallback {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 18px; padding: 32px; text-align: center;
}
.event-poster__doodle { opacity: 0.85; flex: none; }
.event-poster__fallback-title {
	font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.06;
	max-width: 14ch;
}

/* ---- date chip on the poster ---- */
.event-poster__date {
	position: absolute; top: 16px; left: 16px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 66px; height: 66px; border-radius: 18px;
	background: var(--lime); color: var(--ink); line-height: 1;
	box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
.event-poster__day { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; }
.event-poster__month {
	font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.14em; margin-top: 4px;
}

/* ---- details below ---- */
.event-poster__body { padding-top: 20px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
/* Reserve two lines: a long date + time string wraps on some cards and would
   otherwise push that card's title and button out of line with its neighbours. */
.event-poster__body .mono-label { margin-bottom: 0.6em; min-height: 3.1em; }
.event-poster__body h3 { margin: 0 0 0.4em; }
.event-poster__desc {
	margin: 0 0 20px; opacity: 0.78; font-size: 0.94rem;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
	overflow: hidden; /* keeps cards level when descriptions differ in length */
}
/* Pin the CTA to the bottom so every card's button sits on the same line. */
.event-poster__body .btn { margin-top: auto; }

.upcoming__more { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 760px) {
	.event-grid { grid-template-columns: 1fr; gap: 34px; }
	.event-poster__media { aspect-ratio: 3 / 2; }
	.event-poster__desc { -webkit-line-clamp: 3; }
	.event-poster__body .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Events page
   ========================================================= */
.events-list { padding: 80px 0 110px; }
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.event-card { position: relative; border-radius: var(--radius); padding: 44px 40px; color: var(--white); overflow: hidden; }
.event-card--green { background: var(--green); }
.event-card--purple { background: var(--purple); }
.event-card__day { display: inline-block; background: rgba(255,255,255,0.2); padding: 7px 15px; border-radius: 999px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.event-card__meta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 0 0 0.25em; line-height: 1.06; }
.event-card__tag { opacity: 0.9; margin-bottom: 26px; }
.event-card__prices { display: grid; gap: 11px; position: relative; z-index: 1; }
.event-card__prices li { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px dotted rgba(255,255,255,0.35); padding-bottom: 9px; font-size: 0.94rem; }
.event-card__prices strong { font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }

/* =========================================================
   Menu page
   ========================================================= */
.menu-tabs { position: sticky; top: 0; z-index: 55; background: var(--ink); }
.menu-tabs__row { display: flex; gap: 8px; padding: 14px 28px 10px; overflow-x: auto; }

/* Category rail — the actual fix for hunting through a long section.
   One rail per section, only the in-view section's rail is displayed. */
.menu-subnav { border-top: 1px solid rgba(255,255,255,0.12); }
.menu-subnav__rail { display: none; gap: 7px; padding: 11px 28px; overflow-x: auto; scrollbar-width: none; }
.menu-subnav__rail::-webkit-scrollbar { display: none; }
.menu-subnav__rail.is-active { display: flex; }
.menu-subnav__pill {
	flex: none; padding: 7px 15px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.7);
	font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
	white-space: nowrap;
	transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.menu-subnav__pill:hover { border-color: var(--lime); color: var(--cream); }
.menu-subnav__pill.is-active { background: var(--pink); border-color: var(--pink); color: var(--white); }
.menu-tabs__tab {
	flex: none; padding: 12px 26px; border-radius: 999px; color: var(--cream);
	font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
	text-transform: uppercase; letter-spacing: 0.09em; border: 2px solid transparent;
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu-tabs__tab:hover { border-color: var(--lime); }
.menu-tabs__tab.is-active { background: var(--lime); color: var(--ink); }

/* --menu-sticky is measured from the real sticky bar height by main.js. */
.menu-section { position: relative; padding: 100px 0; scroll-margin-top: var(--menu-sticky, 140px); overflow: hidden; }
.menu-category { scroll-margin-top: var(--menu-sticky, 140px); }
.menu-section--food { background: var(--bg); }
.menu-section--bar { background: var(--ink); color: var(--cream); }
.menu-section--happy-hour { background: var(--lime); color: var(--ink); }
.menu-section__head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.menu-section__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5.5vw, 4.5rem); line-height: 1.02; margin: 0; }
.menu-section--bar .menu-category__title { color: var(--lime); }
.menu-section--happy-hour .menu-category__title { color: var(--ink); }

.menu-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 64px; }
.menu-category__title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; padding-bottom: 11px; border-bottom: 2px solid currentColor; margin: 0 0 18px; color: var(--pink); }
.menu-items { display: grid; gap: 17px; }
.menu-item__row { display: flex; align-items: baseline; gap: 9px; }
.menu-item__name { font-weight: 700; }
.menu-item__dots { flex: 1; border-bottom: 2px dotted currentColor; opacity: 0.35; transform: translateY(-4px); min-width: 20px; }
.menu-item__price { font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
.menu-item__desc { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.72; }
/* Brightened from the standard FSSAI dark green/red — those read as near-black
   against the theme's dark backgrounds and the mark disappears. */
.diet-dot { display: inline-block; width: 12px; height: 12px; border: 2px solid #5fd873; border-radius: 3px; margin-left: 6px; vertical-align: middle; position: relative; }
.diet-dot::after { content: ""; position: absolute; inset: 2px; background: #5fd873; border-radius: 50%; }
.diet-dot--nonveg { border-color: #ff6b5e; }
.diet-dot--nonveg::after { background: #ff6b5e; }
.diet-dot--vegan { width: auto; height: auto; border: none; font-size: 0.6rem; font-weight: 800; color: #5fd873; }
.diet-dot--vegan::after { display: none; }
.menu-empty { text-align: center; opacity: 0.7; }

/* =========================================================
   Forms
   ========================================================= */
.contact-section, .host-event-section { padding: 90px 0 120px; }
.contact-grid, .host-event-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.contact-info h2, .host-event-info h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.06; margin: 0 0 0.6em; }
.contact-details { display: grid; gap: 20px; margin: 26px 0; }
.contact-details li { display: flex; flex-direction: column; gap: 3px; }
.contact-details strong { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--pink); }
.map-embed { margin-top: 32px; border-radius: var(--radius); border: 2px dashed rgba(255,255,255,0.22); aspect-ratio: 16/10; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); padding: 22px; text-align: center; font-family: var(--font-mono); font-size: 0.76rem; opacity: 0.75; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.check-list { display: grid; gap: 13px; margin: 22px 0 26px; }
.check-list li { padding-left: 32px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--pink); font-weight: 800; }

.contact-form-wrap { background: var(--ink); border: 2px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 42px; }
.bonobo-form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 7px; }
.form-row--split { grid-template-columns: 1fr 1fr; gap: 20px; }
/* Each half of a split row is its own label+field stack. */
.form-row--split > div { display: grid; gap: 7px; align-content: start; }
.form-row label { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.form-row input, .form-row select, .form-row textarea {
	font: inherit; width: 100%; padding: 14px 15px; border-radius: 14px; border: 2px solid rgba(255,255,255,0.22);
	background: var(--bg-alt); color: var(--text); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(247,241,227,0.4); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
	outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(227,64,171,0.16);
}
.form-note { font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.55; margin: 0; }
.form-notice { text-align: center; padding: 44px 20px; }
.form-notice h3 { color: var(--pink); }
.form-notice__note { display: block; font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.55; margin-top: 10px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--ink); color: var(--cream); padding: 90px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 54px; border-bottom: 1px dotted rgba(255,255,255,0.28); }
.footer-brand__logo { width: 175px; height: auto; margin-bottom: 18px; }
.footer-col h3 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--pink); margin-bottom: 16px; }
.footer-col p { color: rgba(255,255,255,0.72); font-size: 0.92rem; }
.footer-links { display: grid; gap: 9px; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.5); }

/* =========================================================
   Reveal base state
   ========================================================= */
/* Only hide pre-animation when JS is actually running, so a script failure
   never leaves the page blank. `.js` is set by an inline script in header.php. */
.js .reveal { opacity: 0; }
.reduce-motion .reveal { opacity: 1 !important; transform: none !important; }
.reduce-motion .doodle--float,
.reduce-motion .spin-badge,
.reduce-motion .inline-art,
.reduce-motion .marquee__track,
.reduce-motion .photo-marquee__track { animation: none !important; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
	.dock__link { padding: 12px 16px; font-size: 0.74rem; }
}

@media (max-width: 980px) {
	.pillar-row { grid-template-columns: 1fr; gap: 18px; padding: 38px 0; }
	.tilt-grid { grid-template-columns: 1fr; }
	.tilt-card--purple, .tilt-card--green { transform: none; }
	.values-strip__grid { grid-template-columns: 1fr; }
	.value-card { transform: none !important; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.events-grid { grid-template-columns: 1fr; }
	.menu-categories { grid-template-columns: 1fr; }
	.contact-grid, .host-event-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.slab { padding: 90px 0; }
	.slab__doodle { opacity: 0.7; }
}

@media (max-width: 760px) {
	:root { --dock-h: 84px; }
	.topbar { grid-template-columns: auto auto; padding: 14px 20px; }
	.topbar__side { display: none; }
	.brand { justify-self: start; }
	.brand__logo { height: 54px; }
	.hamburger { display: flex; }
	.mobile-nav { display: block; }
	.dock { display: none; }
	body { padding-bottom: 0; }
	.hero { min-height: 88vh; min-height: 88svh; padding: 100px 20px 60px; }
	/* Only the SVG box shrinks — the viewBox scales the text with it, so never
	   override font-size here or the label stops fitting its circle. */
	.hero__badge { width: 88px; height: 88px; right: 5%; bottom: 6%; opacity: 0.4; }
	.hero__corner { display: none; }
	/* Doodles are decoration — keep them small enough that they never compete
	   with the headline on a phone. */
	.hero__doodles .doodle { max-width: 58px !important; max-height: 58px !important; opacity: 0.85; }
	.hero__doodles .doodle:nth-child(1) { top: 13%; left: 6%; }
	.hero__doodles .doodle:nth-child(2) { top: 10%; right: 6%; }
	/* Keep the bolt clear of the rotating badge in the bottom-right corner. */
	.hero__doodles .doodle:nth-child(3) { top: 44%; bottom: auto; right: 7%; }
	.hero__doodles .doodle:nth-child(4) { bottom: 22%; left: 7%; }
	.slab__doodle { max-width: 76px !important; max-height: 76px !important; opacity: 0.65; }
	.footer-grid { grid-template-columns: 1fr; }
	.form-row--split { grid-template-columns: 1fr; }
	.marquee__track span { font-size: 1.15rem; }
	.photo-tile { width: 200px; height: 250px; }
}

/* Touch-friendly footer/contact links: 44px hit areas without changing layout. */
@media (pointer: coarse) {
	.site-footer a, .contact-info a { display: inline-block; padding: 10px 0; }
}

/* Smash Balloon Instagram feed — sits on the dark ground */
.social__feed { padding: 40px 0 56px; }
.social__feed #sb_instagram .sbi_photo_wrap, .social__feed #sb_instagram .sbi_photo { border-radius: 14px; overflow: hidden; }
.social__feed #sb_instagram #sbi_load .sbi_load_btn, .social__feed #sb_instagram .sbi_follow_btn a { border-radius: 999px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; }

.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Form validation states */
.field-error { margin: 0; color: #ff8a7a; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.4; }
.form-row input[aria-invalid="true"], .form-row select[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: #ff6b5e; }
.form-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: rgba(255,107,94,0.14); border: 1px solid #ff6b5e; font-size: 0.9rem; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }