/* ==========================================================================
   Fathoms 0.2.2 — Concept D "The Waterfront Comes Alive"
   Mobile-first. Tokens → base → components → sections → pages → utilities.
   ========================================================================== */

/* --- Fonts (self-hosted, SIL OFL 1.1; see assets/fonts/LICENSE-*.txt) --- */
@font-face {
	font-family: "Playfair Display Variable";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display Variable";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat Variable";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
	--f-ivory: #f7f4ed;
	--f-sand: #d8c7ae;
	--f-sand-deep: #91aaa5;
	--f-tidal: #183746;
	--f-tidal-deep: #10262f;
	--f-sea: #183746;
	--f-copper: #183746;
	--f-copper-deep: #10262f;
	--f-copper-light: #91aaa5;
	--f-ink: #292d2e;
	--f-mist: #4f5557;
	--f-white: #fff;
	--f-line: rgba(24, 55, 70, 0.14);
	--f-line-light: rgba(247, 244, 237, 0.18);
	/* 0.2.9 (Task 34G): Val's navy palette. Derived shades and the reservation action. */
	--f-on-navy: #e4ded2;        /* long-form light text on navy (11.7:1 on deep navy) */
	--f-seaglass: #91aaa5;       /* sea glass: decorative on light surfaces, text only on navy */
	--f-reserve: #2f7f7a;        /* Ocean Teal: "Reserve a Table" only. White text 4.73:1 */
	--f-reserve-deep: #276a66;   /* hover, white text 6.29:1 */
	--f-reserve-press: #1f5753;  /* active, white text 8.25:1 */
	--f-on-reserve: #fff;        /* pure white: ivory on teal is only 4.31:1 */
	--f-reserve-edge: #d8c7ae;   /* boundary on navy (teal on navy is 2.65:1; sand 7.59:1) */

	--font-display: "Playfair Display Variable", "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body: "Montserrat Variable", Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--container: 80rem;
	--gutter: 1rem;
	--radius: 6px;
	--shadow: 0 18px 48px rgba(16, 38, 47, 0.18);
	--ease: 180ms ease;
	--bar-height: 3.5rem;
}
@media (min-width: 768px) {
	:root { --gutter: 2rem; }
}
@media (min-width: 1280px) {
	:root { --gutter: 3rem; }
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
	margin: 0;
	background: var(--f-ivory);
	color: var(--f-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
@media (max-width: 1023px) {
	body { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px)); }
}
img, video, svg { max-width: 100%; height: auto; display: block; }
img { font-style: italic; color: var(--f-mist); }
a { color: var(--f-sea); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--f-tidal); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--f-copper); outline-offset: 3px; border-radius: 2px; }
.site-footer :focus-visible, .section--tidal :focus-visible, .mobile-nav :focus-visible { outline-color: var(--f-copper-light); }
::selection { background: var(--f-sea); color: var(--f-white); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: 0.75rem 1rem;
	background: var(--f-copper); color: var(--f-white); border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--f-white); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Type ----------------------------------------------------------------- */
.eyebrow {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--f-copper); margin: 0 0 0.9rem;
}
.eyebrow--light { color: var(--f-copper-light); }
.eyebrow--copper { color: var(--f-copper); }
.section__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); color: var(--f-tidal); margin-bottom: 0.6em; }
.section__title--small { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.section--tidal .section__title { color: var(--f-ivory); }
.section__lede { max-width: 38rem; font-size: 1.05rem; color: var(--f-mist); }
.section--tidal .section__lede { color: var(--f-on-navy); }
.section__lede p:last-child { margin-bottom: 0; }
.section__head { max-width: 44rem; margin-bottom: 2rem; }
.section__more { margin: 2rem 0 0; }
.prose { max-width: 44rem; }
.prose h2, .prose h3 { color: var(--f-tidal); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 1em; }
.prose li { margin-bottom: 0.35em; }

/* --- Buttons & links -------------------------------------------------------- */
.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 3rem; padding: 0.75rem 1.4rem; border-radius: var(--radius); border: 1.5px solid transparent;
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; line-height: 1.2;
	cursor: pointer; transition: background-color var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.button .icon { flex: none; }
.button--copper { background: var(--f-copper); color: var(--f-white); border-color: var(--f-copper); }
.button--copper:hover { background: var(--f-copper-deep); border-color: var(--f-copper-deep); color: var(--f-white); }
.button--outline { background: transparent; color: var(--f-tidal); border-color: var(--f-tidal); }
.button--outline:hover { background: var(--f-tidal); color: var(--f-ivory); }
.button--light { background: var(--f-ivory); color: var(--f-tidal); border-color: var(--f-ivory); }
.button--light:hover { background: var(--f-white); color: var(--f-tidal); }
.button--outline-light { background: transparent; color: var(--f-ivory); border-color: rgba(247, 243, 236, 0.6); }
.button--outline-light:hover { background: var(--f-ivory); color: var(--f-tidal); }
.text-link {
	display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--f-tidal); text-decoration: none; border-bottom: 1.5px solid var(--f-copper); padding-bottom: 0.2rem; min-height: 2.75rem;
}
.text-link:hover { color: var(--f-copper); }

.text-link:hover { color: var(--f-copper); }

/* --- Header --------------------------------------------------------------- */
/*
 * Logo: the official PNG (792×329) carries transparent margins (artwork ≈ x20–772,
 * y54–275, i.e. 67 % of the image height). --logo-h is the image box height; the
 * negative margins let the transparent margins overlap the padding so the
 * visible artwork, not the empty canvas, sets the header's rhythm. Nothing is
 * cropped or recoloured: the full file is still rendered.
 * Visible artwork height: 320 px ≈ 39 px · 390 px ≈ 43 px · 768 px ≈ 46 px · ≥1024 px ≈ 50 px
 * (Task 28: 33 px below 1024 px, 39 px above — ≈ +30 %).
 */
.site-header { background: var(--f-white); border-bottom: 1px solid var(--f-line); position: relative; z-index: 70; }
.site-header__strip { background: var(--f-tidal); color: var(--f-on-navy); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.site-header__strip-inner { display: flex; justify-content: space-between; gap: 1rem; min-height: 2rem; align-items: center; }
.site-header__strip p { margin: 0; }
.site-header__today { color: var(--f-copper-light); white-space: nowrap; }
.site-header__bar { --logo-h: 3.65rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 4.5rem; padding-block: 0.75rem; }
.site-header__brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--f-ink); flex: none; border-radius: 2px; }
.site-header__logo {
	width: auto; height: var(--logo-h); max-width: none; object-fit: contain;
	margin: calc(var(--logo-h) * -0.164) calc(var(--logo-h) * -0.061);
}
.site-header__wordmark { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f-tidal); }
.site-nav { display: none; }
.site-nav__list { list-style: none; display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.site-nav__list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--f-ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; border-bottom: 2px solid transparent; }
.site-nav__list a:hover { color: var(--f-tidal); border-bottom-color: var(--f-sand-deep); }
.site-nav__list .current-menu-item > a, .site-nav__list a[aria-current="page"] { color: var(--f-tidal); font-weight: 600; border-bottom-color: var(--f-copper); }
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.site-header__reserve { padding-inline: 0.85rem; font-size: 0.7rem; letter-spacing: 0.08em; max-width: 9.5rem; white-space: normal; text-align: center; line-height: 1.15; }
.site-header__reserve .icon { display: none; }
.site-header__toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; flex: none;
	background: transparent; border: 1.5px solid var(--f-line); border-radius: var(--radius); color: var(--f-tidal); cursor: pointer;
}
@media (max-width: 479px) {
	.site-header__strip-inner { justify-content: center; }
	.site-header__today { display: none; }
	/* 0.2.6 (Task 33B): below 480 px the header is logo + menu; Reserve a Table lives in the fixed action bar (always shown below 1024 px) and in the drawer. */
	.site-header__reserve { display: none; }
}
@media (min-width: 390px) { .site-header__bar { --logo-h: 4.05rem; gap: 0.75rem; } }
@media (min-width: 480px) {
	.site-header__reserve { max-width: none; white-space: nowrap; padding-inline: 1rem; font-size: 0.74rem; }
	.site-header__reserve .icon { display: block; }
}
@media (min-width: 768px) { .site-header__bar { --logo-h: 4.3rem; min-height: 5.25rem; } }
@media (min-width: 1024px) {
	.site-nav { display: block; }
	.site-header__toggle { display: none; }
	.site-header__bar { --logo-h: 4.7rem; min-height: 6.25rem; gap: 2rem; }
	.site-header__reserve { font-size: 0.8rem; letter-spacing: 0.12em; padding-inline: 1.25rem; }
}

/* Mobile drawer */
.mobile-nav { position: fixed; inset: 0; z-index: 100; background: rgba(16, 38, 47, 0.55); }
.mobile-nav[hidden] { display: none; }
.mobile-nav__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(22rem, 88vw); overflow-y: auto;
	background: var(--f-tidal); color: var(--f-ivory); padding: 1rem var(--gutter) 2rem; display: flex; flex-direction: column; gap: 1.5rem;
	transform: translateX(100%); transition: transform 220ms ease;
}
.mobile-nav.is-open .mobile-nav__panel { transform: none; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.mobile-nav__brand { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; padding-right: 1rem; }
.mobile-nav__close { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--f-line-light); border-radius: var(--radius); color: var(--f-ivory); cursor: pointer; }
.mobile-nav__list { list-style: none; }
.mobile-nav__list a { display: block; padding: 0.85rem 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--f-ivory); text-decoration: none; border-bottom: 1px solid var(--f-line-light); }
.mobile-nav__list .current-menu-item > a, .mobile-nav__list a[aria-current="page"] { color: var(--f-copper-light); }
.mobile-nav__secondary { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 1rem; }
.mobile-nav__secondary a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--f-on-navy); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.mobile-nav__secondary .current-menu-item > a, .mobile-nav__secondary a[aria-current="page"] { color: var(--f-copper-light); }
.mobile-nav__actions { display: grid; gap: 0.75rem; }
.mobile-nav__phone { color: var(--f-ivory); font-weight: 600; text-decoration: none; padding: 0.5rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; }
html.nav-open { overflow: hidden; }

/* Mobile action bar */
.mobile-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	background: var(--f-tidal-deep); border-top: 1px solid var(--f-line-light);
	/* 0.2.6: the inset is added to the bar instead of being taken out of it, so labels keep the full 3.5rem when a device reports a bottom inset. */
	height: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bar__item { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; padding-inline: 0.75rem; color: var(--f-ivory); text-decoration: none; text-align: center; line-height: 1.2; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.mobile-bar__item:hover { color: var(--f-white); }
.mobile-bar__item--reserve { background: var(--f-copper); }
/* 0.2.6: narrower phones — tighter tracking (and, below 360 px, no arrow) so each label stays on one line inside its 12 px padding. */
@media (max-width: 389px) { .mobile-bar__item { letter-spacing: 0.08em; } }
@media (max-width: 359px) {
	.mobile-bar__item { letter-spacing: 0.05em; }
	.mobile-bar__item .icon { display: none; }
}
@media (min-width: 1024px) { .mobile-bar { display: none; } }

/* --- Hero ------------------------------------------------------------------ */
.hero { display: grid; background: var(--f-ivory); }
.hero__media { margin: 0; position: relative; overflow: hidden; background: var(--f-sand); }
.hero__media--primary { aspect-ratio: 1 / 1; }
.hero__media--secondary { aspect-ratio: 16 / 10; margin: 0 var(--gutter) 2rem; border-radius: var(--radius); }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--primary .hero__img { object-position: 50% 60%; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.hero__label {
	position: absolute; left: 1rem; bottom: 1rem; padding: 0.4rem 0.7rem; background: rgba(16, 38, 47, 0.8); color: var(--f-ivory);
	font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 3px;
}
.hero__copy { padding: 2rem var(--gutter) 2.25rem; }
.hero__eyebrow { margin-bottom: 1rem; }
.hero__title { font-size: clamp(2.6rem, 1.3rem + 3.6vw, 4.6rem); line-height: 1.03; color: var(--f-tidal); margin-bottom: 0.4em; max-width: 13ch; letter-spacing: -0.015em; }
.hero__title em { font-style: italic; color: var(--f-sea); font-weight: 400; }
.hero__lede { font-size: 1.08rem; color: var(--f-mist); max-width: 30rem; margin-bottom: 1.75rem; }
.hero__lede p:last-child { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__actions .button { flex: 1 1 11rem; }
.hero--no-media .hero__copy { padding-block: 4rem; }
/*
 * 0.2.6 (Task 33B) — phones (< 768 px, where the fixed action bar is shown).
 * The photograph is square on tall phones (unchanged) and gives up height on short ones, so the eyebrow and the whole
 * headline sit above the fixed bar on the first screen: height = 100svh − 23.5rem (≈ header + bar + eyebrow + a
 * three-line headline), never taller than square and never shorter than 12rem. svh is the viewport with the browser
 * toolbars shown; the vh line is the fallback for browsers without it. Same image file, same crop focus.
 * Stage B: a bottom safe-area inset (the bar grows by it) is taken off the height and the 12rem floor, so the
 * headline also clears a taller bar; with no inset (today: no viewport-fit=cover) the result is identical.
 * The caption chip repeats the eyebrow and the Reserve/View Menus pair repeats the bar, so both are hidden here.
 */
@media (max-width: 767px) {
	.hero__media--primary { aspect-ratio: auto; height: clamp(12rem - env(safe-area-inset-bottom, 0px), 100vh - 23.5rem - env(safe-area-inset-bottom, 0px), 100vw); height: clamp(12rem - env(safe-area-inset-bottom, 0px), 100svh - 23.5rem - env(safe-area-inset-bottom, 0px), 100vw); }
	.hero__media--primary .hero__label { display: none; }
	.hero__actions { display: none; }
	.hero__lede { margin-bottom: 0; }
}

@media (min-width: 768px) {
	.hero__media--primary { aspect-ratio: 16 / 10; }
	.hero__copy { padding-block: 3rem; }
	.hero__actions .button { flex: 0 1 auto; }
}
@media (min-width: 1024px) {
	.hero {
		grid-template-columns: minmax(22rem, 41%) 1fr; grid-template-rows: auto auto;
		column-gap: 0; padding-right: var(--gutter); padding-block: 1.25rem;
	}
	.hero__copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding: 3.5rem 3rem 3.5rem var(--gutter); border-left: 4px solid var(--f-copper); margin-left: var(--gutter); }
	.hero__media--primary { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; margin: 0 0 0.75rem; border-radius: var(--radius); }
	.hero__media--secondary { grid-column: 2; grid-row: 2; aspect-ratio: 21 / 7; margin: 0; }
	.hero__media--secondary .hero__img { object-position: 50% 62%; }
	.hero__video { display: block; }
	.hero__video + .video-toggle { display: inline-flex; }
}
@media (min-width: 1440px) {
	.hero__copy { padding-inline: 4rem 3.5rem; }
}

/* Film / video toggle */
.video-toggle {
	position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: 2.75rem; padding: 0.5rem 0.9rem 0.5rem 0.6rem; background: rgba(16, 38, 47, 0.82); color: var(--f-ivory);
	border: 1px solid var(--f-line-light); border-radius: 999px; cursor: pointer; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.video-toggle:hover { background: var(--f-tidal-deep); }
.video-toggle .icon-pause { display: none; }
.is-playing .video-toggle .icon-pause { display: block; }
.is-playing .video-toggle .icon-play { display: none; }
.video-toggle--hero { padding: 0.5rem; }

/* --- Sections ------------------------------------------------------------- */
.section { padding-block: 3.5rem; }
.section--tidal { background: var(--f-tidal); color: var(--f-ivory); }
.section--sand { background: var(--f-sand); }
.section--sand .eyebrow { color: var(--f-copper-deep); }
@media (min-width: 768px) { .section { padding-block: 5rem; } }
@media (min-width: 1024px) { .section { padding-block: 6.5rem; } }

/* Live at Fathoms */
.live__intro { max-width: 44rem; }
.live__list { list-style: none; display: grid; gap: 1rem; margin: 2rem 0 0; }
.live-card { background: rgba(247, 243, 236, 0.06); border: 1px solid var(--f-line-light); border-radius: var(--radius); overflow: hidden; display: grid; }
.live-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Portrait event images arrive uncropped (fathoms_card_image()); frame them on the upper part, where faces usually are. Landscape images are unaffected. */
.live-card__media img.is-portrait,
.event__media img.is-portrait { object-position: 50% 25%; }
.live-card__body { padding: 1.25rem; }
.live-card__when { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f-copper-light); margin-bottom: 0.5rem; }
.live-card__title { font-size: 1.5rem; margin-bottom: 0.25rem; color: var(--f-ivory); }
.live-card__title a { color: inherit; text-decoration: none; }
.live-card__title a:hover { color: var(--f-copper-light); text-decoration: underline; text-decoration-thickness: 1px; }
.live-card__performer { color: var(--f-on-navy); margin: 0; }
.live__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
/* Empty state: a short band, not a dark void. */
.live--empty { padding-block: 3rem; }
.live__empty { margin: 1.75rem 0 0; padding: 1.5rem; background: rgba(247, 243, 236, 0.06); border: 1px solid var(--f-line-light); border-left: 3px solid var(--f-copper-light); border-radius: var(--radius); }
.live__empty-title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; color: var(--f-ivory); margin-bottom: 0.5rem; }
.live__empty-text { margin: 0; color: var(--f-on-navy); max-width: 34rem; }
.live__empty .live__actions { margin-top: 1.25rem; }
/*
 * 0.2.6 (Task 33B): one or two upcoming events are shown as compact rows (photograph beside the text, full row,
 * max 46rem) instead of grid cards that stretch to fill the row. Three events keep the grid. Count-based selectors
 * only: no template change, no IDs. The photograph column is 16rem — about the 3-up card width — so a small source
 * image is not enlarged beyond the size it already has in the grid.
 */
@media (min-width: 600px) {
	.live-card:only-child,
	.live-card:first-child:nth-last-child(2),
	.live-card:first-child:nth-last-child(2) + .live-card { grid-column: 1 / -1; grid-template-columns: 16rem minmax(0, 1fr); align-items: center; max-width: 46rem; }
	.live-card:only-child .live-card__media,
	.live-card:first-child:nth-last-child(2) .live-card__media,
	.live-card:first-child:nth-last-child(2) + .live-card .live-card__media { align-self: stretch; }
	.live-card:only-child .live-card__media img,
	.live-card:first-child:nth-last-child(2) .live-card__media img,
	.live-card:first-child:nth-last-child(2) + .live-card .live-card__media img { height: 100%; }
	.live-card:only-child .live-card__body,
	.live-card:first-child:nth-last-child(2) .live-card__body,
	.live-card:first-child:nth-last-child(2) + .live-card .live-card__body { padding: 1.5rem 1.75rem; }
	.live-card__body:first-child { grid-column: 1 / -1; } /* An event without a photograph: the text takes the whole row. */
}
.live--empty .section__title { margin-bottom: 0.4em; }
@media (min-width: 768px) {
	.live__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
	.live--empty { padding-block: 3.75rem; }
}
@media (min-width: 1024px) {
	.live .container { display: grid; grid-template-columns: minmax(18rem, 34%) 1fr; column-gap: 4rem; row-gap: 2rem; align-items: start; }
	.live__intro { grid-column: 1; grid-row: 1; }
	.live__list { grid-column: 2; grid-row: 1; margin-top: 0; }
	.live .container > .live__actions { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
	.live--empty { padding-block: 4.5rem; }
	.live--empty .container { align-items: center; }
	.live__empty { grid-column: 2; grid-row: 1; margin-top: 0; padding: 2rem 2.25rem; }
}

/* Waterfront film */
.film__grid { display: grid; gap: 2.5rem; }
.film__media { display: flex; justify-content: center; }
.film__frame { position: relative; width: min(22rem, 86vw); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--f-sand); box-shadow: var(--shadow); }
.film__video, .film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__poster { position: relative; }
.film__marina { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--f-line); max-width: 38rem; color: var(--f-mist); }
.film__marina-title { font-size: 1.4rem; color: var(--f-tidal); }
.film__marina p:last-child { margin-bottom: 0; }
.film__link { margin: 1.5rem 0 0; }
@media (min-width: 1024px) {
	.film__grid { grid-template-columns: minmax(18rem, 38%) 1fr; column-gap: 5rem; align-items: center; }
	.film__frame { width: min(24rem, 100%); }
}

/* Food & drink */
.food__grid { display: grid; gap: 2.5rem; }
.menu-links { list-style: none; display: grid; gap: 0.6rem; margin: 1.75rem 0; max-width: 30rem; }
.menu-links__item {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 0.85rem 1.15rem;
	background: var(--f-white); border: 1px solid var(--f-line); border-left: 3px solid var(--f-copper); border-radius: var(--radius); color: var(--f-tidal); text-decoration: none;
	transition: border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.menu-links__text { display: grid; gap: 0.1rem; }
.menu-links__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; }
.menu-links__type { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-mist); }
.menu-links__item .icon { color: var(--f-copper); flex: none; transition: transform var(--ease); }
.menu-links__item:hover { border-color: var(--f-copper); color: var(--f-copper-deep); box-shadow: 0 6px 18px rgba(16, 38, 47, 0.08); }
.menu-links__item:hover .icon { transform: translateX(3px); }
.food__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.food__gift { margin: 1.25rem 0 0; }
.food__side { display: grid; gap: 1.25rem; align-content: start; }
.food__media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.food__img { width: 100%; height: 100%; object-fit: cover; }
.offers { list-style: none; display: grid; gap: 1rem; }
.offer { background: var(--f-white); border-radius: var(--radius); padding: 1.35rem 1.5rem; border-left: 4px solid var(--f-copper); }
.offer .eyebrow { margin-bottom: 0.4rem; }
.offer__title { font-size: 1.6rem; margin-bottom: 0.3rem; color: var(--f-tidal); }
.offer__price { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--f-copper-deep); margin-left: 0.25rem; }
.offer__when { font-weight: 600; font-size: 0.95rem; color: var(--f-sea); margin-bottom: 0.5rem; }
.offer__summary, .offer__desc { color: var(--f-mist); margin-bottom: 0.5rem; }
.offer__terms { font-size: 0.85rem; color: var(--f-mist); }
.offer__link { margin: 0.5rem 0 0; }
@media (min-width: 1024px) {
	.food__grid { grid-template-columns: 1fr 1fr; column-gap: 5rem; align-items: start; }
	.food__media { aspect-ratio: 5 / 4; }
}

/* Gallery teaser / Instagram (home) */
.gallery__grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.gallery__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery__grid--square img { aspect-ratio: 1; }
.gallery__grid figure { margin: 0; }
@media (min-width: 768px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .gallery__grid--square { grid-template-columns: repeat(4, 1fr); } }

/* Fathoms Rewards band (Task 31B): compact, one outline action, no media */
.rewards { padding-block: clamp(2.5rem, 6vw, 4rem); }
.rewards__grid { display: grid; gap: 1.25rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.rewards__title { margin-bottom: 0.5rem; }
.rewards__lede { margin: 0; }
.rewards__action .button { max-width: 100%; }
.rewards__terms { margin: 0.5rem 0 0; font-size: 0.85rem; }
.rewards__terms a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--f-on-navy); text-decoration: underline; text-underline-offset: 0.2em; }
.rewards__terms a:hover { color: var(--f-ivory); }
.mobile-nav__secondary .menu-item--rewards a { gap: 0.4rem; }

/* Visit (home teaser) */
.visit__grid { display: grid; gap: 2rem; }
.visit__media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.visit__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.visit__panel { background: var(--f-white); border-radius: var(--radius); padding: 1.75rem var(--gutter); border: 1px solid var(--f-line); }
.facts { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.facts__label { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--f-copper-deep); margin-bottom: 0.35rem; }
.facts__value { margin: 0; color: var(--f-ink); }
.facts__value p:last-child { margin-bottom: 0; }
.facts__today { font-weight: 600; color: var(--f-sea); margin-bottom: 0.5rem; }
.hours { margin: 0; display: grid; gap: 0.15rem; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.hours__row dt { font-weight: 600; }
.hours__row dd { margin: 0; text-align: right; white-space: nowrap; }
.hours__row--closed dd { color: var(--f-mist); }
.hours__row--today { background: rgba(145, 170, 165, 0.22); margin-inline: -0.5rem; padding-inline: 0.5rem; border-radius: 3px; }
.hours__today-mark { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 3px; background: var(--f-sea); color: var(--f-white); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 0.12em; }
.hours__special-heading { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--f-copper-deep); margin: 1rem 0 0.35rem; }
.hours__special { list-style: none; display: grid; gap: 0.25rem; }
.visit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.visit__secondary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.25rem 0 0; }
@media (min-width: 600px) { .facts { grid-template-columns: 1fr 1fr; } .facts__item--hours, .facts__item--wide { grid-column: 1 / -1; } .hours { max-width: 24rem; } }
@media (min-width: 1024px) {
	.visit__grid { grid-template-columns: 5fr 6fr; column-gap: 3rem; align-items: start; }
	.visit__media { aspect-ratio: 4 / 5; position: sticky; top: 1.5rem; }
	.visit__panel { padding: 2.5rem; }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--f-tidal-deep); color: var(--f-on-navy); padding: 3.5rem 0 1.75rem; font-size: 0.98rem; line-height: 1.65; }
.site-footer a { color: var(--f-ivory); text-decoration: none; }
.site-footer a:hover { color: var(--f-copper-light); text-decoration: underline; text-decoration-thickness: 1px; }
.site-footer__grid { display: grid; gap: 2.25rem; }
.site-footer__logo {
	--logo-h: 4.4rem; display: block; height: var(--logo-h); width: auto; max-width: none;
	margin: calc(var(--logo-h) * -0.164) calc(var(--logo-h) * -0.061);
}
.site-footer__badge { display: inline-flex; padding: 0.9rem 1.15rem; margin-bottom: 1.25rem; background: var(--f-ivory); border-radius: var(--radius); }
.site-footer__wordmark { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f-ivory); }
.site-footer__address { margin-bottom: 0.75rem; max-width: 20rem; }
.site-footer__contact, .site-footer__links { list-style: none; display: grid; gap: 0.1rem; }
.site-footer__contact a, .site-footer__links a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.site-footer__heading { font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--f-copper-light); margin-bottom: 0.6rem; }
.site-footer__actions .site-footer__heading + .site-footer__links { margin-bottom: 1.5rem; }
.site-footer .hours { font-size: 0.95rem; max-width: 22rem; }
.site-footer .hours__row--closed dd { color: var(--f-seaglass); }
.site-footer .hours__row--today { background: rgba(247, 243, 236, 0.08); }
.site-footer .hours__today-mark { background: var(--f-copper-light); color: var(--f-tidal-deep); }
.site-footer .hours__special-heading { color: var(--f-copper-light); }
.site-footer__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--f-line-light); font-size: 0.85rem; color: var(--f-seaglass); }
.site-footer__legal p { margin: 0; }
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.25fr 1.2fr 0.7fr 0.9fr; gap: 3rem; } }

/* --- Shared page furniture ------------------------------------------------- */
.page__head { background: var(--f-ivory); padding: 2.5rem 0 2rem; }
.page__head-inner > * { max-width: 52rem; }
.page__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); color: var(--f-tidal); margin-bottom: 0.35em; }
.page__title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: 0.35em; background: var(--f-copper); border-radius: 2px; }
.page__intro { font-size: 1.12rem; color: var(--f-mist); max-width: 40rem; }
.page__intro p:last-child { margin-bottom: 0; }
.page__meta { font-size: 0.85rem; color: var(--f-mist); margin: 1rem 0 0; }
.page__content { padding-bottom: 4.5rem; }
.prose--long { max-width: 46rem; font-size: 1.04rem; line-height: 1.75; }
.prose--long h2 { font-size: 1.7rem; margin-top: 2em; }
.prose--long h3 { font-size: 1.3rem; margin-top: 1.6em; }
.prose--long a { color: var(--f-sea); }
.prose--long table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem; }
.prose--long th, .prose--long td { border-bottom: 1px solid var(--f-line); padding: 0.5rem 0.5rem 0.5rem 0; text-align: left; vertical-align: top; }
.page--404 { padding-block: 3rem 5rem; }
.page--404 .menu-links { max-width: 26rem; }
.cta-band { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 2rem 0 3rem; margin-top: 2rem; border-top: 1px solid var(--f-line); }
.cta-band--panel {
	display: grid; gap: 1.25rem; align-items: center; margin: 3rem 0 4rem; padding: 2rem 1.5rem; border: 0;
	background: var(--f-tidal); color: var(--f-on-navy); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cta-band__title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); color: var(--f-ivory); margin-bottom: 0.25em; }
.cta-band__copy p { margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-band--panel :focus-visible { outline-color: var(--f-copper-light); }
@media (min-width: 768px) {
	.page__head { padding: 4rem 0 2.75rem; }
	.cta-band--panel { grid-template-columns: 1fr auto; padding: 2.25rem 2.5rem; }
}

/* --- Menus page ------------------------------------------------------------ */
.menus-nav { position: sticky; top: 0; z-index: 50; background: rgba(247, 244, 237, 0.97); border-block: 1px solid var(--f-line); backdrop-filter: blur(6px); }
.menus-nav__list { list-style: none; display: flex; gap: 0.5rem; padding-block: 0.6rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.menus-nav__list li { flex: none; }
.menus-nav__link {
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1.1rem; border: 1.5px solid var(--f-line); border-radius: 999px;
	background: var(--f-white); color: var(--f-tidal); text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
	transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.menus-nav__link:hover { border-color: var(--f-copper); color: var(--f-copper-deep); }
.menus-nav__link.is-active, .menus-nav__link[aria-current="true"] { background: var(--f-tidal); border-color: var(--f-tidal); color: var(--f-ivory); }
.menus { padding-bottom: 1rem; }
.menu { padding: 2.75rem 0 1rem; scroll-margin-top: 4.5rem; }
.menu + .menu { border-top: 1px solid var(--f-line); }
.menu__head { max-width: 52rem; margin-bottom: 2rem; }
.menu__title { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); color: var(--f-tidal); }
.menu__note { font-weight: 600; color: var(--f-sea); }
.menu__intro { color: var(--f-mist); }
.menu__index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 1.25rem; margin-top: 1rem; }
.menu__index a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--f-sea); font-size: 0.9rem; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(24, 55, 70, 0.35); text-underline-offset: 0.25em; }
.menu__index a:hover { color: var(--f-copper-deep); text-decoration-color: currentColor; }
.menu-section { margin-bottom: 2.5rem; scroll-margin-top: 4.5rem; }
.menu-section__title { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem); color: var(--f-tidal); padding-bottom: 0.45rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--f-sand-deep); }
.menu-section__note { color: var(--f-ink); font-size: 0.95rem; line-height: 1.6; background: var(--f-sand); border-radius: var(--radius); padding: 0.75rem 1rem; max-width: 52rem; margin-bottom: 1.25rem; }
.menu-section--note-only .menu-section__note { background: var(--f-white); border: 1px dashed var(--f-sand-deep); }
.menu-items { list-style: none; display: grid; gap: 1.15rem; }
.menu-items > .menu-item { padding-bottom: 1.15rem; border-bottom: 1px dotted var(--f-sand-deep); }
.menu-item__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.menu-item__name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 1.04rem; color: var(--f-ink); }
.menu-item__raw { color: var(--f-copper-deep); font-weight: 700; margin-left: 0.1em; }
.menu-item__price { flex: 0 1 auto; max-width: 48%; text-align: right; font-weight: 600; font-size: 1.02rem; color: var(--f-copper-deep); font-variant-numeric: tabular-nums; }
.menu-item__desc { margin: 0.25rem 0 0; color: var(--f-mist); font-size: 0.97rem; line-height: 1.55; max-width: 40rem; }
.menu-item__meta { margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--f-mist); }
.menu-item__diet { display: inline-block; padding: 0.05rem 0.45rem; border: 1px solid var(--f-sea); color: var(--f-sea); border-radius: 3px; text-decoration: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; }
.menu-item__state { font-style: italic; }
.menu-item__note { font-style: italic; color: var(--f-ink); }
.menu-item--unavailable .menu-item__name, .menu-item--unavailable .menu-item__price { color: var(--f-mist); }
.menu-item--featured .menu-item__name::after { content: " ★"; color: var(--f-copper); }
.menu__notes { display: grid; gap: 0.75rem; margin: 0.5rem 0 1rem; padding: 1.25rem 1.5rem; background: var(--f-white); border: 1px solid var(--f-line); border-radius: var(--radius); font-size: 0.9rem; color: var(--f-mist); max-width: 52rem; }
.menu__notes p { margin: 0; }
.menu__footnotes { color: var(--f-ink); font-weight: 600; }
.menu__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.menu--offers .eyebrow, .faq__aside .eyebrow { color: var(--f-copper-deep); }
.menu--offers { margin-top: 1.5rem; padding: 2.5rem 1.5rem; background: var(--f-sand); border-radius: var(--radius); border-top: 0; }
.menu + .menu--offers { border-top: 0; }
.offers--page { gap: 1rem; }
@media (min-width: 768px) {
	.menu-items { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
	.menu--offers { padding: 3rem 2.5rem; }
	.offers--page { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}
@media (min-width: 1024px) {
	.menu-items { column-gap: 4.5rem; }
	.menu { padding-top: 3.5rem; }
}

/* --- Live Music page -------------------------------------------------------- */
.events { padding-bottom: 1rem; }
.events__list { list-style: none; display: grid; gap: 1rem; }
.event { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1.25rem; padding: 1.25rem; background: var(--f-white); border: 1px solid var(--f-line); border-radius: var(--radius); scroll-margin-top: 1rem; }
.event__date time { display: grid; text-align: center; background: var(--f-tidal); color: var(--f-ivory); border-radius: var(--radius); padding: 0.7rem 0.25rem; line-height: 1.1; }
.event__weekday { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-copper-light); }
.event__day { font-family: var(--font-display); font-size: 2rem; }
.event__month { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; }
.event__title { font-size: 1.6rem; margin-bottom: 0.2rem; color: var(--f-tidal); }
.event__performer { margin: 0 0 0.25rem; font-weight: 500; }
.event__time { margin: 0; font-weight: 600; color: var(--f-sea); }
.event__desc { margin-top: 0.75rem; color: var(--f-mist); font-size: 0.97rem; }
.event__desc p:last-child { margin-bottom: 0; }
.event__media { grid-column: 1 / -1; }
.event__media img { border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.events__empty { display: grid; gap: 1.25rem; margin-bottom: 4rem; }
.events__empty-main { background: var(--f-tidal); color: var(--f-on-navy); border-radius: var(--radius); padding: 2rem 1.5rem; box-shadow: var(--shadow); }
.events__empty-main :focus-visible { outline-color: var(--f-copper-light); }
.events__empty-title { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); color: var(--f-ivory); margin-bottom: 0.4em; }
.events__empty-main p:not(.eyebrow) { max-width: 34rem; }
.events__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.events__plan { background: var(--f-white); border: 1px solid var(--f-line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.events__plan-title { font-size: 1.45rem; color: var(--f-tidal); }
.events__plan .hours { max-width: 24rem; }
.events__plan-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.25rem; }
@media (min-width: 768px) {
	.event { grid-template-columns: 5.25rem 1fr; padding: 1.5rem; }
	.event--has-media { grid-template-columns: 5.25rem 1fr 16rem; align-items: start; }
	.event--has-media .event__media { grid-column: 3; }
	.events__empty-main { padding: 2.75rem 2.5rem; }
}
@media (min-width: 1024px) {
	.events__empty { grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: stretch; }
	.events__empty-main { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem; }
	.events__plan { padding: 2.25rem; }
}

/* --- Visit page -------------------------------------------------------------- */
.glance { display: grid; gap: 1rem; margin-bottom: 3.5rem; }
.glance__card { background: var(--f-white); border: 1px solid var(--f-line); border-top: 3px solid var(--f-copper); border-radius: var(--radius); padding: 1.5rem; }
.glance__label { font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--f-copper-deep); margin-bottom: 0.85rem; }
.glance__today { font-family: var(--font-display); font-size: 1.35rem; color: var(--f-tidal); margin-bottom: 0.75rem; }
.glance__address { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; color: var(--f-tidal); margin-bottom: 1.25rem; }
.glance__rule { color: var(--f-ink); }
.glance__contact { list-style: none; display: grid; gap: 0.15rem; margin-bottom: 1.25rem; }
.glance__contact li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; min-height: 2.5rem; align-content: center; }
.glance__contact a { font-weight: 600; color: var(--f-sea); overflow-wrap: anywhere; }
.glance__key { min-width: 3.25rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f-mist); }
.glance__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.boat { padding-block: 3.5rem; }
.boat__grid { display: grid; gap: 2rem; }
.boat__media { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); max-width: 26rem; aspect-ratio: 4 / 5; }
.boat__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.boat__text { max-width: 40rem; font-size: 1.04rem; }
.boat__text p:first-child { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; color: var(--f-tidal); }
.boat__text p:last-child { margin-bottom: 0; padding: 1rem 1.15rem; background: var(--f-ivory); border-left: 3px solid var(--f-copper); border-radius: 3px; }
.visit-page__more { display: grid; gap: 2.5rem; padding-block: 3.5rem 0; }
.visit-block { max-width: 36rem; }
.visit-block__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--f-tidal); }
@media (min-width: 600px) { .glance { grid-template-columns: 1fr 1fr; } .glance__card--hours { grid-row: span 2; } }
@media (min-width: 768px) { .boat { padding-block: 5rem; } }
@media (min-width: 1024px) {
	.glance { grid-template-columns: 1.15fr 1fr 1fr; gap: 1.25rem; }
	.glance__card { padding: 1.85rem; }
	.glance__card--hours { grid-row: auto; }
	.boat__grid { grid-template-columns: minmax(18rem, 26rem) 1fr; column-gap: 5rem; align-items: center; }
	.visit-page__more { grid-template-columns: 1fr 1fr; column-gap: 5rem; padding-top: 5rem; }
}

/* --- About page --------------------------------------------------------------- */
.about__story { display: grid; gap: 2.5rem; padding-bottom: 3.5rem; }
.about__prose { font-size: 1.04rem; line-height: 1.75; }
.about__prose > p:first-child { font-family: var(--font-display); font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); line-height: 1.45; color: var(--f-tidal); }
.about__media { margin: 0; }
.about__media img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow); }
.about__media figcaption { font-size: 0.85rem; color: var(--f-mist); margin-top: 0.6rem; }
.about__features { padding-block: 3.5rem; }
.about__features-grid { display: grid; gap: 1.25rem; }
.feature { background: var(--f-ivory); border-radius: var(--radius); padding: 1.75rem 1.5rem; border-top: 3px solid var(--f-copper); }
.feature__body { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; color: var(--f-tidal); }
.feature__body p:last-child { margin-bottom: 0; }
.about__team { padding-block: 4rem 1rem; }
.about__team-head { max-width: 44rem; margin-bottom: 2rem; }
.about__team--lead { padding-bottom: 2.5rem; }
.about__team--lead + .about__team--staff { background: linear-gradient(var(--f-line), var(--f-line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; padding-top: 2.75rem; }
/* Team groups (0.2.5): portraits are uncropped sources framed 4:5 with an upper focal point. */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.person { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: 1rem; align-items: center; align-content: start; }
.person--no-photo { grid-template-columns: minmax(0, 1fr); }
.person__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--f-sand); }
.person__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.person__id { min-width: 0; }
.person__id::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: 0.8rem; background: var(--f-copper); }
.person__name { font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.35rem; color: var(--f-tidal); overflow-wrap: break-word; }
.person__role { font-size: 0.74rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f-copper-deep); margin: 0; }
.person__bio { grid-column: 1 / -1; color: var(--f-mist); font-size: 0.95rem; line-height: 1.65; max-width: 40rem; }
.person__bio p:last-child { margin-bottom: 0; }
.people--compact .person { grid-template-columns: 6.5rem minmax(0, 1fr); }
.people--compact .person--no-photo { grid-template-columns: minmax(0, 1fr); }
.people--compact .person__name { font-size: 1.25rem; }
/* A group with no photographs at all keeps the plain masthead list. */
.people.people--text { gap: 0; border-top: 1px solid var(--f-line); }
.people--text .person { padding-block: 1.25rem; border-bottom: 1px solid var(--f-line); }
.people--text .person__id::before { display: none; }
@media (min-width: 768px) {
	.about__features-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.feature { padding: 2.25rem 2rem; }
	.about__features { padding-block: 5rem; }
	.people--text .person--bio { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
	.people--text .person--bio .person__bio { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1024px) {
	.about__story--media { grid-template-columns: 1.2fr 0.8fr; column-gap: 5rem; align-items: start; }
	.about__story--media .about__media { position: sticky; top: 1.5rem; }
	.about__team { padding-top: 5.5rem; }
	.about__team--lead { padding-bottom: 3.5rem; }
	.about__team .people--text { max-width: 64rem; }
}

@media (min-width: 600px) {
	.people--lead:not(.people--text) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 3rem; }
	.people--lead:not(.people--text) .person { grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: start; }
	.people--lead .person__media { margin-bottom: 1.15rem; max-width: 18rem; }
	.people--lead .person__bio { margin-top: 0.9rem; }
	.people--lead .person--no-photo .person__id { max-width: 18rem; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; border-radius: var(--radius); background: var(--f-sand); }
	.people--compact:not(.people--text) { gap: 2.25rem; }
	.people--compact:not(.people--text) .person { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.75rem; row-gap: 0.85rem; align-items: start; }
	.people--compact .person--photo .person__media { grid-row: 1 / span 2; }
	.people--compact .person--photo .person__bio { grid-column: 2; }
	.people--compact .person--no-photo { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
	/* Management: balanced 2 × 2 editorial cards, portrait beside the text, so a blank bio leaves no empty column. */
	.people--lead:not(.people--text) { column-gap: 3rem; row-gap: 3.5rem; }
	.people--lead:not(.people--text) .person { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 2rem; align-items: center; }
	.people--lead .person--photo .person__media { grid-row: 1 / span 2; margin-bottom: 0; align-self: start; }
	.people--lead .person--photo .person__id { align-self: end; }
	.people--lead .person--photo .person__bio { grid-column: 2; align-self: start; margin-top: 1rem; }
	.people--lead .person--photo:not(.person--bio) .person__id { grid-row: 1 / span 2; align-self: center; }
	.people--lead .person--no-photo { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
	.people--lead .person--no-photo .person__bio { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
}
@media (min-width: 1200px) {
	.people--compact:not(.people--text) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
	.people--compact:not(.people--text) .person { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: 1.1rem; align-items: center; }
	.people--compact .person--photo .person__media { grid-row: auto; }
	.people--compact .person--photo .person__bio { grid-column: 1 / -1; }
}

/* --- Gallery page -------------------------------------------------------------- */
.gallery-page { padding-bottom: 1rem; }
.gallery-grid { list-style: none; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.gallery-grid figure { margin: 0; position: relative; height: 100%; }
.gallery-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery-grid figcaption {
	position: absolute; left: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem); padding: 0.35rem 0.65rem; border-radius: 3px;
	background: rgba(16, 38, 47, 0.8); color: var(--f-ivory); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em;
}
.gallery-page__empty { max-width: 38rem; padding: 2.5rem 2rem; margin-bottom: 4rem; background: var(--f-white); border: 1px solid var(--f-line); border-top: 3px solid var(--f-copper); border-radius: var(--radius); }
.gallery-page__empty-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--f-tidal); }
@media (min-width: 600px) {
	.gallery-grid { grid-template-columns: 1fr 1fr; gap: 1rem; grid-auto-rows: 16rem; }
	.gallery-grid img { aspect-ratio: auto; }
	.gallery-grid__item--wide, .gallery-grid__item--fill-md { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(15rem, 19vw, 20rem); }
	.gallery-grid__item--fill-md { grid-column: auto; }
	.gallery-grid__item--wide { grid-column: span 2; }
}

/* --- FAQ page ------------------------------------------------------------------- */
.faq { padding-bottom: 4rem; }
.faq__layout { display: grid; gap: 2.5rem; }
.faq__list { max-width: 50rem; border-top: 1px solid var(--f-line); }
.faq__item { border-bottom: 1px solid var(--f-line); scroll-margin-top: 1rem; }
.faq__question {
	cursor: pointer; padding: 1.15rem 0; min-height: 3.5rem; font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.35;
	color: var(--f-tidal); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question:hover { color: var(--f-copper-deep); }
.faq__icon { position: relative; flex: none; width: 2rem; height: 2rem; border: 1.5px solid var(--f-sand-deep); border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8rem; height: 2px; margin: -1px 0 0 -0.4rem; background: var(--f-copper); transition: transform var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item[open] .faq__question { color: var(--f-copper-deep); }
.faq__answer { padding: 0 3.25rem 1.5rem 0; color: var(--f-ink); font-size: 1.02rem; line-height: 1.7; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: var(--f-sea); font-weight: 600; }
.faq__aside { background: var(--f-sand); border-radius: var(--radius); padding: 1.75rem 1.5rem; align-self: start; }
.faq__aside-title { font-size: 1.5rem; color: var(--f-tidal); }
.faq__aside p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
	.faq__layout { grid-template-columns: 1fr 20rem; column-gap: 4.5rem; }
	.faq__aside { position: sticky; top: 1.5rem; padding: 2rem; }
}

/* ==========================================================================
   0.2.9 (Task 34G): palette roles. Val's navy palette, approved 34A preview.
   ========================================================================== */
/* Copper was both the button fill and the decorative accent rule. The primary
   (non-reservation) button now takes navy via --f-copper; decorative rules take
   sea glass, which is too light for text or controls on light surfaces. */
.page__title::after,
.person__id::before { background: var(--f-seaglass); }
.hero__copy,
.offer,
.boat__text p:last-child { border-left-color: var(--f-seaglass); }
.feature,
.glance__card,
.gallery-page__empty { border-top-color: var(--f-seaglass); }
.menu-links__item { border-left-color: var(--f-seaglass); }
.live__empty { border-left-color: var(--f-seaglass); }

/* A navy primary button cannot sit on navy: on dark surfaces it becomes sand
   with navy text (7.6:1 on navy, 9.5:1 on deep navy). */
.section--tidal .button--copper,
.cta-band--panel .button--copper,
.events__empty-main .button--copper,
.mobile-nav .button--copper,
.site-footer .button--copper { background: var(--f-sand); border-color: var(--f-sand); color: var(--f-tidal); }
.section--tidal .button--copper:hover,
.cta-band--panel .button--copper:hover,
.events__empty-main .button--copper:hover,
.mobile-nav .button--copper:hover,
.site-footer .button--copper:hover { background: var(--f-ivory); border-color: var(--f-ivory); color: var(--f-tidal-deep); }

/* 34A-C1: sea glass passes on solid navy but not on the 6 % ivory Live Music
   card (#254250, 4.3:1). The card date line uses sand (6.4:1). */
.live-card__when { color: var(--f-sand); }

/* 34A-C2: with links, accents and buttons all navy, the colour-only hovers of
   0.2.8 no longer change anything visible. Restore a cue without new colours. */
a:hover { text-decoration-thickness: 2px; }
.text-link:hover { color: var(--f-tidal-deep); border-bottom-color: var(--f-seaglass); }
.menu-links__item:hover { border-color: var(--f-tidal); color: var(--f-tidal-deep); }
.faq__question:hover, .faq__item[open] .faq__question { color: var(--f-tidal-deep); }
.faq__question:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* --- Reservation action: Ocean Teal (0.2.9, Task 34G) -----------------------
   Used only by "Reserve a Table" (.button--reserve and the mobile-bar Reserve
   cell). Directions, phone, menus, ordering, gift cards and Rewards keep their
   own button styles. Fill #2F7F7A with pure white text (4.73:1). */
.button--reserve { background: var(--f-reserve); border-color: var(--f-reserve); color: var(--f-on-reserve); }
.button--reserve:hover { background: var(--f-reserve-deep); border-color: var(--f-reserve-deep); color: var(--f-on-reserve); }
.button--reserve:active { background: var(--f-reserve-press); border-color: var(--f-reserve-press); color: var(--f-on-reserve); }
/* Teal on navy is 2.65:1 (on the Live Music card 2.25:1), below the 3:1 needed
   for a control boundary. On dark surfaces the button keeps a sand edge in every
   state (7.6:1 on navy, 9.5:1 on deep navy). */
.section--tidal .button--reserve,
.cta-band--panel .button--reserve,
.events__empty-main .button--reserve,
.mobile-nav .button--reserve,
.site-footer .button--reserve { border-color: var(--f-reserve-edge); }
/* Fixed mobile bar: teal cell on the deep-navy bar (3.31:1), next to the
   deep-navy View Menus cell. */
.mobile-bar__item--reserve { background: var(--f-reserve); color: var(--f-on-reserve); }
.mobile-bar__item--reserve:hover { background: var(--f-reserve-deep); color: var(--f-on-reserve); }
.mobile-bar__item--reserve:active { background: var(--f-reserve-press); }
/* 34G-F1: in the navy palette the inherited navy focus ring is 1.25:1 on the
   deep-navy bar and, with a 3 px outset, is clipped by the screen edge. Draw an
   ivory ring inside each bar cell instead (14.3:1 on deep navy, 4.3:1 on teal). */
.mobile-bar :focus-visible { outline-color: var(--f-ivory); outline-offset: -5px; }