:root {
--ember: #b12027;
--ember-glow: #d83a1f;
--flame: #f4a23c;
--gold: #c9a35c;
--gold-soft: #b8975a;
--cream: #efe4cc;
--bone: #d8cdb6;
--char: #0a0807;
--soot: #14100d;
--smoke: #1c1814;
--ash: #2a2520;
--ink: #f5ebd6;
--muted: rgba(245, 235, 214, 0.55);
--font-display: 'Cormorant Unicase', 'Cormorant Garamond', serif;
--font-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-script: 'Pinyon Script', cursive;
--font-condensed: 'Bebas Neue', Impact, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-serif);
background: var(--char);
color: var(--ink);
overflow-x: hidden;
width: 100%;
max-width: 100vw;
position: relative;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
body.no-scroll { overflow: hidden; }
/* Visually hidden but accessible to screen readers and search engines */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === SUBTLE SECTION SNAP (desktop only, proximity not mandatory) === */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
html.snap-on {
scroll-snap-type: y proximity;
}
html.snap-on .hero,
html.snap-on .story,
html.snap-on .pillars,
html.snap-on .experience,
html.snap-on .rituals,
html.snap-on .visit {
scroll-snap-align: start;
scroll-snap-stop: normal;
}
}
/* === EMBER TRAIL — section transition particles === */
.ember-trail {
position: absolute;
top: -1px; left: 0; right: 0;
height: 80px;
pointer-events: none;
overflow: visible;
z-index: 6;
}
.ember-particle {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--flame);
box-shadow: 0 0 8px var(--flame), 0 0 14px var(--ember-glow);
bottom: 0;
opacity: 0;
will-change: transform, opacity;
}
.ember-trail.active .ember-particle {
animation: emberDrift var(--dur, 2.4s) ease-out forwards;
animation-delay: var(--delay, 0s);
}
@keyframes emberDrift {
0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
15% { opacity: 1; transform: translate(0, -10px) scale(1); }
100% { opacity: 0; transform: translate(var(--dx, 20px), -120px) scale(0.3); }
}
.ember-trail::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: 240px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
box-shadow: 0 0 12px var(--ember-glow);
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ember-trail.active::before { transform: translateX(-50%) scaleX(1); }
/* === LIGHTBOX === */
.lightbox-trigger {
position: relative;
cursor: zoom-in;
transition: transform 0.5s ease;
}
.lightbox-trigger:hover { transform: scale(1.01); }
.lightbox-trigger::after {
content: '';
position: absolute;
top: 16px;
right: 16px;
width: 40px; height: 40px;
border: 1px solid var(--gold);
background: rgba(10,8,7,0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 50%;
z-index: 5;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transform: scale(0.8);
transition: all 0.4s ease;
}
.lightbox-trigger:hover::after { opacity: 1; transform: scale(1); }
.lightbox {
position: fixed;
inset: 0;
background: rgba(5,4,3,0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 300;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(177,32,39,0.15), transparent 60%);
pointer-events: none;
}
.lightbox-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
}
.lightbox-frame {
position: relative;
max-width: 880px;
width: 100%;
max-height: 86vh;
aspect-ratio: 4/5;
z-index: 2;
transform: scale(0.92) translateY(24px);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.lightbox.open .lightbox-frame { transform: scale(1) translateY(0); }
.lightbox-frame-inner {
position: relative;
width: 100%; height: 100%;
background: var(--char);
overflow: hidden;
border: 1px solid rgba(201,163,92,0.3);
}
.lightbox-frame-inner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 100%, rgba(216,58,31,0.6), transparent 60%),
linear-gradient(180deg, #1a0e08 0%, #2a1208 50%, #b12027 95%, #f4a23c 100%);
}
.lightbox-frame-inner::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.7;
}
.lightbox-corners {
position: absolute;
inset: 22px;
border: 1px solid rgba(201,163,92,0.5);
pointer-events: none;
z-index: 3;
}
.lightbox-corners::before, .lightbox-corners::after {
content: '';
position: absolute;
width: 22px; height: 22px;
border: 1px solid var(--gold);
}
.lightbox-corners::before { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.lightbox-corners::after { bottom: -6px; right: -6px; border-left: none; border-top: none; }
.lightbox-content {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--cream);
padding: 40px;
}
.lightbox-content svg.hero-flame {
width: 110px;
height: auto;
color: var(--cream);
filter: drop-shadow(0 0 36px rgba(244,162,60,0.8));
margin-bottom: 32px;
animation: flicker 4s ease-in-out infinite;
}
.lightbox-script {
font-family: var(--font-script);
font-size: clamp(2.2rem, 5vw, 3.4rem);
color: var(--cream);
line-height: 1;
margin-bottom: 14px;
text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.lightbox-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
margin-bottom: 24px;
}
.lightbox-divider {
width: 60px; height: 1px;
background: var(--gold);
margin: 8px 0 24px;
}
.lightbox-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1rem, 1.6vw, 1.2rem);
color: var(--bone);
max-width: 480px;
line-height: 1.7;
}
.lightbox-meta {
margin-top: 40px;
font-family: var(--font-condensed);
letter-spacing: 0.5em;
font-size: 0.78rem;
color: var(--gold);
}
.lightbox-close {
position: absolute;
top: 28px; right: 28px;
background: rgba(10,8,7,0.6);
border: 1px solid rgba(201,163,92,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
width: 48px; height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--cream);
transition: all 0.3s ease;
z-index: 5;
}
.lightbox-close:hover {
background: var(--ember);
border-color: var(--ember);
transform: rotate(90deg);
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-hint {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.7rem;
color: var(--muted);
z-index: 5;
}
.lightbox-hint kbd {
font-family: var(--font-condensed);
background: rgba(201,163,92,0.1);
border: 1px solid rgba(201,163,92,0.3);
padding: 2px 8px;
margin: 0 4px;
color: var(--gold);
}
::selection { background: var(--ember); color: var(--cream); }
/* === FILM GRAIN === */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.08;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* === BRAND COLOR GRADE — applied to all photography for unified mood === */
/* Slightly warm, contrast bumped, shadows deepened. Sits over a subtle ember tint. */
.brand-grade {
position: relative;
overflow: hidden;
}
.brand-grade > img,
.brand-grade > picture > img {
filter:
brightness(0.92)
contrast(1.08)
saturate(0.95)
sepia(0.08);
transition: filter 0.6s ease, transform 1.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* Subtle ember tint overlay — pushes mid/highlights toward the brand palette */
.brand-grade::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 30% 70%, rgba(216,58,31,0.10), transparent 55%),
radial-gradient(ellipse at 70% 30%, rgba(244,162,60,0.06), transparent 50%);
mix-blend-mode: overlay;
z-index: 1;
}
/* On hover, soften the grade slightly so users can see the food more truthfully */
.brand-grade:hover > img,
.brand-grade:hover > picture > img {
filter:
brightness(1)
contrast(1.04)
saturate(1.08)
sepia(0.02);
}
/* Variant for hero/background images — heavier grade for atmosphere */
.brand-grade-bg > img,
.brand-grade-bg > picture > img {
filter:
brightness(0.78)
contrast(1.12)
saturate(0.9)
sepia(0.12);
}
/* Variant for plates that need maximum food appeal — lighter grade */
.brand-grade-light > img,
.brand-grade-light > picture > img {
filter:
brightness(0.96)
contrast(1.05)
saturate(1.0)
sepia(0.04);
}
/* === CUSTOM FLAME CURSOR (desktop only) === */
.cursor-flame, .cursor-trail {
position: fixed;
pointer-events: none;
z-index: 10001;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
will-change: transform;
}
.cursor-flame {
width: 12px; height: 12px;
background: radial-gradient(circle, var(--flame) 0%, var(--ember-glow) 60%, transparent 100%);
box-shadow: 0 0 16px var(--ember-glow), 0 0 32px var(--flame);
mix-blend-mode: screen;
}
.cursor-trail {
width: 6px; height: 6px;
background: radial-gradient(circle, var(--flame), transparent);
opacity: 0.5;
mix-blend-mode: screen;
}
.cursor-flame.hover { width: 28px; height: 28px; }
@media (hover: none), (pointer: coarse) {
.cursor-flame, .cursor-trail { display: none !important; }
}
/* === SCROLL PROGRESS — burning fuse === */
.progress-fuse {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--ember), var(--flame));
box-shadow: 0 0 12px var(--flame), 0 0 24px var(--ember-glow);
z-index: 9998;
transition: width 0.1s linear;
}
.progress-fuse::after {
content: '';
position: absolute;
right: -2px;
top: -3px;
width: 8px; height: 8px;
background: var(--flame);
border-radius: 50%;
box-shadow: 0 0 16px var(--flame), 0 0 24px var(--ember-glow);
animation: pulse 0.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
/* === NAV === */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 22px 56px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.5s ease;
background: linear-gradient(180deg, rgba(10,8,7,0.85) 0%, rgba(10,8,7,0) 100%);
backdrop-filter: blur(0px);
}
nav.scrolled {
background: rgba(10,8,7,0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 14px 56px;
border-bottom: 1px solid rgba(201, 163, 92, 0.12);
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
letter-spacing: 0.32em;
color: var(--cream);
text-transform: uppercase;
display: flex; align-items: center; gap: 10px;
text-decoration: none;
z-index: 102;
}
.nav-logo .flame-mark {
width: 22px; height: 22px;
color: var(--ember-glow);
filter: drop-shadow(0 0 8px rgba(216,58,31,0.6));
animation: flicker 3s ease-in-out infinite;
}
.nav-logo-img {
height: 60px;
width: auto;
display: block;
filter: drop-shadow(0 0 10px rgba(216,58,31,0.35));
}
@keyframes flicker {
0%, 100% { opacity: 1; transform: scale(1); }
25% { opacity: 0.85; transform: scale(0.97); }
50% { opacity: 1; transform: scale(1.03); }
75% { opacity: 0.9; transform: scale(0.99); }
}
.nav-links {
display: flex; gap: 44px;
list-style: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
.nav-links a {
color: var(--bone);
text-decoration: none;
font-family: var(--font-condensed);
font-size: 0.92rem;
letter-spacing: 0.28em;
transition: color 0.3s ease;
position: relative;
padding: 4px 0;
}
.nav-links a::after {
content: ''; position: absolute;
bottom: -2px; left: 50%;
width: 0; height: 1px;
background: var(--ember-glow);
transition: all 0.4s ease;
transform: translateX(-50%);
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
font-family: var(--font-condensed);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.32em;
padding: 11px 26px;
border: 1px solid var(--gold);
color: var(--char);
text-decoration: none;
transition: all 0.4s ease;
background: var(--gold);
cursor: pointer;
z-index: 102;
border-radius: 999px;
}
.nav-cta:hover {
background: var(--flame);
border-color: var(--flame);
color: var(--char);
box-shadow: 0 0 30px rgba(177, 32, 39, 0.5);
}
/* Mobile menu toggle */
.nav-toggle {
display: none;
background: none;
border: none;
width: 32px; height: 24px;
position: relative;
cursor: pointer;
z-index: 102;
padding: 0;
}
.nav-toggle span {
position: absolute;
left: 0; right: 0;
height: 1.5px;
background: var(--cream);
transition: all 0.4s ease;
}
.nav-toggle span:nth-child(1) { top: 4px; }
.nav-toggle span:nth-child(2) { top: 11px; width: 70%; right: 0; left: auto; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle.active span:nth-child(1) { top: 11px; transform: rotate(45deg); background: var(--flame); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.nav-toggle.active span:nth-child(3) { top: 11px; transform: rotate(-45deg); background: var(--flame); }
/* Mobile menu overlay */
.nav-mobile {
position: fixed;
inset: 0;
background: var(--char);
z-index: 101;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 80px 16px 32px;
transform: translateX(100%);
transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
overflow-y: auto;
}
.nav-mobile.open { transform: translateX(0); }
/* Explicit close button inside mobile menu */
.nav-mobile-close {
position: absolute;
top: 22px;
right: 22px;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(177, 32, 39, 0.15);
border: 1px solid rgba(201, 163, 92, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--cream);
z-index: 5;
transition: all 0.4s ease;
padding: 0;
}
.nav-mobile-close:hover, .nav-mobile-close:active {
background: var(--ember);
border-color: var(--ember);
transform: rotate(90deg);
}
.nav-mobile-close svg {
width: 18px;
height: 18px;
}
.nav-mobile::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 100%, rgba(177,32,39,0.4), transparent 50%),
radial-gradient(circle at 50% 0%, rgba(216,58,31,0.2), transparent 40%);
pointer-events: none;
}
.nav-mobile-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
z-index: 2;
width: 100%;
max-width: 360px;
margin: 0 auto;
}
.nav-mobile-links li {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
width: 100%;
border-bottom: 1px solid rgba(201,163,92,0.12);
}
.nav-mobile-links li:last-child { border-bottom: none; }
.nav-mobile.open .nav-mobile-links li {
opacity: 1;
transform: translateY(0);
}
.nav-mobile.open .nav-mobile-links li:nth-child(1) { transition-delay: 0.10s; }
.nav-mobile.open .nav-mobile-links li:nth-child(2) { transition-delay: 0.16s; }
.nav-mobile.open .nav-mobile-links li:nth-child(3) { transition-delay: 0.22s; }
.nav-mobile.open .nav-mobile-links li:nth-child(4) { transition-delay: 0.28s; }
.nav-mobile.open .nav-mobile-links li:nth-child(5) { transition-delay: 0.34s; }
.nav-mobile.open .nav-mobile-links li:nth-child(6) { transition-delay: 0.40s; }
.nav-mobile.open .nav-mobile-links li:nth-child(7) { transition-delay: 0.46s; }
.nav-mobile.open .nav-mobile-links li:nth-child(8) { transition-delay: 0.52s; }
.nav-mobile-links a {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--cream);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.18em;
line-height: 1;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 22px;
position: relative;
text-align: center;
}
.nav-mobile-links a::after {
content: '\2192'; /* arrow → */
font-family: var(--font-condensed);
color: var(--gold);
opacity: 0;
transform: translateX(-8px);
transition: all 0.3s ease;
font-size: 1.1rem;
}
.nav-mobile-links a:hover, .nav-mobile-links a:active {
color: var(--flame);
background: rgba(216,58,31,0.06);
padding-left: 28px;
}
.nav-mobile-links a:hover::after, .nav-mobile-links a:active::after {
opacity: 1;
transform: translateX(0);
color: var(--flame);
}
/* Reserve gets emphasized — last item */
.nav-mobile-links a[data-reserve], .nav-mobile-links li:last-child a {
color: var(--flame);
background: rgba(177,32,39,0.08);
border-top: 1px solid rgba(216,58,31,0.3);
border-bottom: 1px solid rgba(216,58,31,0.3);
margin-top: 8px;
}
.nav-mobile-links a[data-reserve]::after, .nav-mobile-links li:last-child a::after {
opacity: 1;
transform: translateX(0);
}
.nav-mobile-links a.active {
color: var(--flame);
}
.nav-mobile-links a.active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 2px;
background: var(--ember-glow);
box-shadow: 0 0 8px var(--ember-glow);
}
.nav-mobile-links a:hover, .nav-mobile-links a:active { color: var(--flame); }
.nav-mobile-divider {
width: 60px; height: 1px;
background: var(--gold);
margin: 22px 0;
opacity: 0;
transition: opacity 0.6s ease 0.7s;
position: relative;
z-index: 2;
}
.nav-mobile.open .nav-mobile-divider { opacity: 1; }
.nav-mobile-foot {
position: relative;
z-index: 2;
opacity: 0;
transition: opacity 0.6s ease 0.8s;
}
.nav-mobile.open .nav-mobile-foot { opacity: 1; }
.nav-mobile-foot a {
display: block;
color: var(--gold);
font-family: var(--font-script);
font-size: 1.4rem;
text-decoration: none;
margin-bottom: 8px;
}
.nav-mobile-foot .nav-mobile-meta {
font-family: var(--font-condensed);
letter-spacing: 0.32em;
font-size: 0.78rem;
color: var(--muted);
}
/* === HERO === */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(ellipse at 50% 80%, #3a1810 0%, #14100d 45%, #0a0807 100%);
}
.hero-ember {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 22% 88%, rgba(244, 162, 60, 0.35) 0%, transparent 28%),
radial-gradient(circle at 78% 92%, rgba(216, 58, 31, 0.30) 0%, transparent 32%),
radial-gradient(circle at 50% 100%, rgba(177, 32, 39, 0.45) 0%, transparent 45%);
pointer-events: none;
will-change: transform;
}
.hero-smoke {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: screen;
animation: smokeDrift 40s linear infinite;
will-change: transform;
}
@keyframes smokeDrift {
0% { transform: translate(0,0); }
100% { transform: translate(-200px, -100px); }
}
.sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.spark {
position: absolute;
width: 2px; height: 2px;
background: var(--flame);
border-radius: 50%;
box-shadow: 0 0 6px var(--flame), 0 0 12px var(--ember-glow);
bottom: -10px;
animation: rise linear infinite;
}
@keyframes rise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 0.4; }
100% { transform: translateY(-100vh) translateX(var(--drift, 30px)); opacity: 0; }
}
.hero-content {
position: relative;
z-index: 5;
text-align: center;
max-width: 1100px;
padding: 80px 24px 60px;
will-change: transform;
}
.hero-eyebrow {
font-family: var(--font-condensed);
color: var(--gold);
letter-spacing: 0.55em;
font-size: clamp(0.7rem, 1.5vw, 0.85rem);
margin-bottom: 28px;
opacity: 0;
animation: fadeUp 1.2s 0.3s forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
content: '';
display: inline-block;
width: clamp(20px, 5vw, 36px);
height: 1px;
background: var(--gold);
vertical-align: middle;
margin: 0 clamp(10px, 2.5vw, 18px);
}
.hero-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(3.5rem, 13vw, 11.5rem);
line-height: 0.88;
letter-spacing: -0.02em;
color: var(--cream);
text-transform: uppercase;
margin-bottom: 8px;
text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 80px rgba(216,58,31,0.25);
display: flex;
justify-content: center;
gap: 0.02em;
flex-wrap: nowrap;
}
/* === HERO LOGO (replaces the FUEGO letter/script combo with the brand image) === */
.hero-logo {
display: block;
width: 100%;
max-width: 380px;
height: auto;
margin: 0 auto;
opacity: 0;
transform: scale(0.86) translateY(28px);
filter: blur(14px) drop-shadow(0 0 0 transparent);
animation:
heroLogoEnter 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s forwards,
heroLogoFloat 6s ease-in-out 2.0s infinite,
heroLogoGlow 4.5s ease-in-out 2.0s infinite;
}
@keyframes heroLogoEnter {
0% {
opacity: 0;
transform: scale(0.86) translateY(28px);
filter: blur(14px) drop-shadow(0 0 0 rgba(216,58,31,0));
}
55% { opacity: 1; }
100% {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0) drop-shadow(0 8px 32px rgba(216,58,31,0.32));
}
}
/* Subtle vertical bob — feels like the logo is breathing */
@keyframes heroLogoFloat {
0%, 100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
/* Warm ember glow that pulses between deep ember and gold flame */
@keyframes heroLogoGlow {
0%, 100% { filter: blur(0) drop-shadow(0 6px 26px rgba(216,58,31,0.30)); }
50% { filter: blur(0) drop-shadow(0 10px 42px rgba(244,162,60,0.50)); }
}
@media (prefers-reduced-motion: reduce) {
.hero-logo {
animation: heroLogoEnter 0.4s ease forwards;
}
}
@media (max-width: 768px) {
.hero-logo { max-width: 240px; }
}
.hero-title .letter {
display: inline-block;
opacity: 0;
transform: translateY(60px) rotate(8deg);
animation: letterIn 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
transition: transform 0.4s ease;
will-change: transform;
}
.hero-title .letter:nth-child(1) { animation-delay: 0.5s; }
.hero-title .letter:nth-child(2) { animation-delay: 0.62s; }
.hero-title .letter:nth-child(3) { animation-delay: 0.74s; }
.hero-title .letter:nth-child(4) { animation-delay: 0.86s; }
.hero-title .letter:nth-child(5) { animation-delay: 0.98s; }
@keyframes letterIn {
to { opacity: 1; transform: translateY(0) rotate(0); }
}
.hero-title .flame-letter {
background: linear-gradient(180deg, var(--flame) 0%, var(--ember-glow) 60%, var(--ember) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 24px rgba(244,162,60,0.5));
}
.hero-script {
font-family: var(--font-script);
font-size: clamp(2.4rem, 7vw, 5.2rem);
color: var(--gold);
line-height: 0.9;
margin-top: -22px;
margin-bottom: 36px;
opacity: 0;
animation: fadeUp 1.4s 1.4s forwards;
text-shadow: 0 2px 20px rgba(201,163,92,0.3);
}
.hero-rule {
width: 1px; height: 70px;
background: linear-gradient(180deg, transparent, var(--gold), transparent);
margin: 14px auto 28px;
opacity: 0;
animation: fadeIn 1s 1.7s forwards;
}
.hero-tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1rem, 1.6vw, 1.3rem);
color: var(--bone);
letter-spacing: 0.06em;
max-width: 560px;
margin: 0 auto;
opacity: 0;
animation: fadeUp 1.2s 1.9s forwards;
}
.hero-meta {
margin-top: 48px;
display: flex;
justify-content: center;
gap: clamp(20px, 5vw, 64px);
font-family: var(--font-condensed);
letter-spacing: 0.32em;
font-size: clamp(0.65rem, 1.4vw, 0.78rem);
color: var(--muted);
opacity: 0;
animation: fadeUp 1.2s 2.1s forwards;
flex-wrap: wrap;
}
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.hero-meta .dot {
width: 4px; height: 4px;
background: var(--ember-glow);
border-radius: 50%;
box-shadow: 0 0 8px var(--ember-glow);
}
/* Hero CTA row — two buttons replacing the meta pills */
.hero-cta-row {
margin-top: 48px;
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 1.2s 2.1s forwards;
}
.hero-cta-row .btn-primary,
.hero-cta-row .btn-ghost {
min-width: 200px;
}
/* Live status pill */
.live-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border: 1px solid rgba(201,163,92,0.3);
border-radius: 999px;
font-family: var(--font-condensed);
letter-spacing: 0.28em;
font-size: 0.72rem;
margin-top: 28px;
opacity: 0;
animation: fadeUp 1s 2.3s forwards;
transition: all 0.4s ease;
}
.live-status .live-dot {
width: 8px; height: 8px;
border-radius: 50%;
position: relative;
}
.live-status .live-dot::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
animation: ripple 1.6s ease-out infinite;
}
.live-status.open { color: #6cd07b; border-color: rgba(108,208,123,0.4); background: rgba(108,208,123,0.05); }
.live-status.open .live-dot { background: #6cd07b; }
.live-status.open .live-dot::before { background: #6cd07b; }
.live-status.closed { color: var(--ember-glow); border-color: rgba(216,58,31,0.4); background: rgba(216,58,31,0.05); }
.live-status.closed .live-dot { background: var(--ember-glow); }
.live-status.closed .live-dot::before { background: var(--ember-glow); }
@keyframes ripple {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(2.6); opacity: 0; }
}
.scroll-cue {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
color: var(--gold);
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.7rem;
z-index: 5;
opacity: 0;
animation: fadeIn 1s 2.5s forwards, bob 2.4s 2.5s ease-in-out infinite;
text-align: center;
}
.scroll-cue::after {
content: '';
display: block;
width: 1px;
height: 28px;
background: var(--gold);
margin: 12px auto 0;
}
@keyframes bob {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 8px); }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
/* === SECTION SHELL === */
section { position: relative; padding: 140px 56px; }
.container { max-width: 1320px; margin: 0 auto; }
.section-eyebrow {
font-family: var(--font-condensed);
color: var(--ember-glow);
letter-spacing: 0.5em;
font-size: 0.82rem;
margin-bottom: 22px;
}
.section-eyebrow::before {
content: '';
display: inline-block;
width: 32px; height: 1px;
background: var(--ember-glow);
vertical-align: middle;
margin-right: 16px;
}
.section-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.2rem, 5.5vw, 4.6rem);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--cream);
text-transform: uppercase;
}
.section-title em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold);
text-transform: lowercase;
font-size: 1.2em;
font-weight: 400;
letter-spacing: 0;
}
/* === STORY === */
.story { background: var(--soot); overflow: hidden; }
.story::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 200px;
background: linear-gradient(180deg, var(--char), transparent);
pointer-events: none;
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 100px;
align-items: center;
}
.story-visual {
position: relative;
aspect-ratio: 4/5;
background: var(--char);
overflow: hidden;
}
.story-visual::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 100%, rgba(216,58,31,0.5), transparent 60%),
linear-gradient(180deg, #1a0e08 0%, #2a1208 50%, #b12027 95%, #f4a23c 100%);
}
.story-visual::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.7;
}
.story-frame {
position: absolute;
inset: 18px;
border: 1px solid rgba(201,163,92,0.35);
z-index: 3;
pointer-events: none;
}
.story-frame::before { content:''; position:absolute; top:-1px; left:30%; right:30%; height:1px; background:var(--gold); }
.story-frame::after { content:''; position:absolute; bottom:-1px; left:30%; right:30%; height:1px; background:var(--gold); }
.story-mark {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 4;
text-align: center;
color: var(--cream);
}
.story-mark svg {
width: 90px;
height: auto;
filter: drop-shadow(0 0 30px rgba(244,162,60,0.7));
margin-bottom: 24px;
animation: flicker 4s ease-in-out infinite;
}
.story-mark-year {
font-family: var(--font-script);
font-size: 2.2rem;
color: var(--cream);
line-height: 1;
margin-bottom: 14px;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.story-mark-label {
font-family: var(--font-condensed);
letter-spacing: 0.5em;
font-size: 0.78rem;
color: var(--cream);
border-top: 1px solid rgba(239,228,204,0.4);
border-bottom: 1px solid rgba(239,228,204,0.4);
padding: 10px 22px;
}
.story-content .section-title { margin: 14px 0 32px; }
.story-lead {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.5;
color: var(--gold);
margin-bottom: 32px;
padding-left: 22px;
border-left: 2px solid var(--ember);
}
.story-content p {
font-size: clamp(0.95rem, 1.4vw, 1.05rem);
color: var(--bone);
margin-bottom: 22px;
line-height: 1.8;
}
.story-signature {
margin-top: 44px;
font-family: var(--font-script);
font-size: clamp(2rem, 4vw, 2.6rem);
color: var(--gold);
line-height: 1;
}
.story-signature-line {
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.78rem;
color: var(--muted);
margin-top: 6px;
}
/* === PILLARS === */
.pillars { background: var(--char); padding: 160px 56px; }
.pillars-head { text-align: center; margin-bottom: 100px; }
.pillars-head .section-eyebrow { display: block; }
.pillars-head .section-eyebrow::before { display: none; }
.pillars-head-sub {
max-width: 640px;
margin: 26px auto 0;
color: var(--bone);
font-size: 1.02rem;
line-height: 1.65;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.pillar {
position: relative;
background: var(--soot);
overflow: hidden;
cursor: default;
aspect-ratio: 3/4.6;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: transform 0.6s ease;
}
/* Full-bleed photo background */
.pillar-photo {
position: absolute;
inset: 0;
margin: 0;
overflow: hidden;
z-index: 0;
}
.pillar-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.8s ease;
filter: saturate(1.1) contrast(1.05);
}
.pillar:hover .pillar-photo img {
transform: scale(1.06);
filter: saturate(1.2) contrast(1.1);
}
/* Bottom-only dark overlay — keeps the upper photo clean, fades to near-black behind text */
.pillar-photo::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(10,8,7,0) 0%,
rgba(10,8,7,0) 45%,
rgba(10,8,7,0.55) 75%,
rgba(10,8,7,0.96) 100%
);
pointer-events: none;
transition: background 0.6s ease;
}
.pillar:hover .pillar-photo::after {
background:
linear-gradient(180deg,
rgba(10,8,7,0) 0%,
rgba(10,8,7,0) 45%,
rgba(10,8,7,0.55) 75%,
rgba(10,8,7,0.96) 100%
);
}
/* Subtle ember radial glow on hover, tracking cursor */
.pillar::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(216,58,31,0.25), transparent 45%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
}
.pillar:hover::before { opacity: 1; }
/* Decorative gold corner frame */
.pillar-frame {
position: absolute;
inset: 16px;
border: 1px solid rgba(201,163,92,0.25);
pointer-events: none;
z-index: 2;
transition: inset 0.5s ease, border-color 0.5s ease;
}
.pillar:hover .pillar-frame {
inset: 12px;
border-color: rgba(201,163,92,0.45);
}
/* Content sits at the bottom, on top of gradient */
.pillar-content {
position: relative;
z-index: 3;
padding: 36px 32px 36px;
}
/* Dark backdrop layered above the image, behind the text — only appears on hover */
.pillar-content::before {
content: '';
position: absolute;
inset: 0;
background: rgba(10,8,7,0.88);
opacity: 0;
transition: opacity 0.45s ease;
z-index: -1;
pointer-events: none;
}
.pillar:hover .pillar-content::before {
opacity: 1;
}
.pillar-num {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: var(--gold);
letter-spacing: 0.32em;
margin-bottom: 14px;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.pillar-title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.8vw, 2.1rem);
line-height: 1;
color: var(--cream);
text-transform: uppercase;
margin-bottom: 4px;
text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.pillar-title-script {
font-family: var(--font-script);
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
color: var(--gold);
line-height: 1;
margin-bottom: 18px;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.pillar-body {
font-size: 0.82rem;
color: var(--bone);
line-height: 1.6;
text-shadow: 0 1px 6px rgba(0,0,0,0.7);
margin-bottom: 18px;
max-width: 90%;
}
.pillar-tag {
font-family: var(--font-condensed);
letter-spacing: 0.3em;
font-size: 0.7rem;
color: var(--gold);
text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.pillar-tag::before {
content: '';
display: inline-block;
width: 22px; height: 1px;
background: var(--gold);
vertical-align: middle;
margin-right: 10px;
}
/* Hide old icon class and old photo placeholder rules */
.pillar-icon { display: none; }
.pillar:nth-child(1) .pillar-photo[data-empty]::before,
.pillar:nth-child(2) .pillar-photo[data-empty]::before,
.pillar:nth-child(3) .pillar-photo[data-empty]::before { display: none; }
/* === TESTIMONIALS (replaces experience section) === */
.experience {
position: relative;
padding: 0;
min-height: auto;
background: radial-gradient(ellipse at center, #2a1208 0%, #14100d 60%, #0a0807 100%);
overflow: hidden;
}
.experience::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 70%, rgba(177,32,39,0.4), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(244,162,60,0.2), transparent 40%);
}
.experience-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.6;
}
.experience-content {
position: relative;
z-index: 5;
padding: 110px 0 110px;
width: 100%;
}
.testimonial-head {
text-align: center;
margin-bottom: 70px;
padding: 0 56px;
}
.testimonial-head .section-eyebrow { display: block; }
.testimonial-head .section-eyebrow::before { display: none; }
.testimonial-head .section-title {
margin-top: 14px;
}
.testimonial-head .testimonial-stars {
display: inline-flex;
gap: 6px;
align-items: center;
margin-top: 24px;
font-family: var(--font-condensed);
letter-spacing: 0.32em;
font-size: 0.78rem;
color: var(--gold);
}
.testimonial-head .stars-row {
display: inline-flex;
gap: 3px;
}
.testimonial-head .stars-row svg {
width: 16px; height: 16px;
color: var(--flame);
filter: drop-shadow(0 0 4px rgba(244,162,60,0.4));
}
/* Marquee rows */
.marquee-row {
position: relative;
overflow: hidden;
padding: 14px 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
display: flex;
gap: 24px;
width: max-content;
animation: marquee-left 60s linear infinite;
will-change: transform;
}
.marquee-row.reverse .marquee-track {
animation: marquee-right 70s linear infinite;
}
.marquee-row:hover .marquee-track {
animation-play-state: paused;
}
@keyframes marquee-left {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 12px)); }
}
@keyframes marquee-right {
from { transform: translateX(calc(-50% - 12px)); }
to { transform: translateX(0); }
}
/* Testimonial card */
.testimonial {
flex: 0 0 auto;
width: 380px;
padding: 28px 28px 24px;
background: linear-gradient(180deg, rgba(28,24,20,0.7), rgba(20,16,13,0.65));
border: 1px solid rgba(201,163,92,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
transition: border-color 0.4s ease, transform 0.4s ease;
cursor: default;
}
.testimonial:hover {
border-color: rgba(201,163,92,0.4);
transform: translateY(-3px);
}
.testimonial::before, .testimonial::after {
content: '';
position: absolute;
width: 10px; height: 10px;
border: 1px solid var(--gold);
transition: opacity 0.4s ease;
opacity: 0;
}
.testimonial::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.testimonial::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.testimonial:hover::before, .testimonial:hover::after { opacity: 1; }
.testimonial-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
}
.testimonial-stars svg {
width: 14px; height: 14px;
color: var(--flame);
filter: drop-shadow(0 0 4px rgba(244,162,60,0.3));
}
.testimonial-quote {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
line-height: 1.55;
color: var(--cream);
margin-bottom: 22px;
}
.testimonial-quote::before {
content: '\201C';
font-family: var(--font-display);
color: var(--ember-glow);
font-size: 1.6em;
line-height: 0;
vertical-align: -0.35em;
margin-right: 2px;
opacity: 0.7;
}
.testimonial-foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(201,163,92,0.18);
}
.testimonial-author {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--cream);
line-height: 1.1;
}
.testimonial-author-meta {
font-family: var(--font-condensed);
letter-spacing: 0.28em;
font-size: 0.62rem;
color: var(--muted);
margin-top: 4px;
}
.testimonial-source {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-condensed);
letter-spacing: 0.22em;
font-size: 0.62rem;
color: var(--gold);
flex-shrink: 0;
}
.testimonial-source svg {
width: 12px; height: 12px;
}
/* Stats strip below the marquees */
.testimonial-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 64px;
padding: 0 56px;
flex-wrap: wrap;
}
.t-stat {
text-align: center;
}
.t-stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.6rem;
line-height: 1;
color: var(--cream);
margin-bottom: 6px;
display: flex;
align-items: baseline;
gap: 4px;
justify-content: center;
}
.t-stat-num em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold);
font-size: 0.55em;
font-weight: 400;
}
.t-stat-label {
font-family: var(--font-condensed);
letter-spacing: 0.32em;
font-size: 0.7rem;
color: var(--bone);
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none !important; }
}
.stat {
border-top: 1px solid rgba(201,163,92,0.3);
padding-top: 22px;
}
.stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
color: var(--cream);
margin-bottom: 12px;
display: flex;
align-items: baseline;
gap: 6px;
}
.stat-num em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold);
font-size: 0.55em;
font-weight: 400;
}
.stat-label {
font-family: var(--font-condensed);
letter-spacing: 0.32em;
font-size: 0.78rem;
color: var(--bone);
}
/* === BAR / FLAVOR WHEEL === */
.rituals {
position: relative;
background: var(--soot);
overflow: hidden;
isolation: isolate;
}
/* Full-bleed cocktail photo as section background */
.rituals-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.rituals-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.32;
filter: saturate(1.15) contrast(1.05);
}
/* Heavy gradient overlay for legibility */
.rituals-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(28,24,20,0.65) 0%, rgba(20,16,13,0.92) 60%, rgba(10,8,7,0.98) 100%),
linear-gradient(180deg, rgba(20,16,13,0.85) 0%, rgba(20,16,13,0.55) 35%, rgba(20,16,13,0.85) 100%);
}
/* Soft ember accents */
.rituals-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 80%, rgba(177,32,39,0.25), transparent 40%),
radial-gradient(circle at 82% 20%, rgba(244,162,60,0.15), transparent 40%);
z-index: 1;
}
.rituals .container {
position: relative;
z-index: 5;
}
/* Centered header — no more side-by-side with photo */
.rituals-head {
display: block;
text-align: center;
margin-bottom: 70px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.rituals-head .section-eyebrow { display: block; }
.rituals-head .section-eyebrow::before { display: none; }
.rituals-head .section-title { margin: 14px 0 24px; }
.rituals-intro {
max-width: 560px;
margin: 0 auto;
color: var(--bone);
line-height: 1.75;
font-size: 1.05rem;
}
/* Hide the old bar-photo card — full-bleed bg replaces it */
.bar-photo { display: none; }
/* Flavor wheel container — slight glass-morphism feel sitting on photo bg */
.flavor-wheel-wrap {
background: rgba(20,16,13,0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(201,163,92,0.18);
padding: 70px 60px;
position: relative;
}
.flavor-wheel-wrap::before, .flavor-wheel-wrap::after {
content: '';
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--gold);
}
.flavor-wheel-wrap::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.flavor-wheel-wrap::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
/* Center mark on the wheel — slight glass effect */
.flavor-wheel .center-mark {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Flavor wheel */
.flavor-wheel-wrap {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}
.flavor-wheel {
position: relative;
aspect-ratio: 1;
max-width: 520px;
margin: 0 auto;
width: 100%;
}
.flavor-wheel svg {
width: 100%;
height: 100%;
overflow: visible;
}
.flavor-wheel .center-mark {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
z-index: 5;
width: 38%;
}
.flavor-wheel .center-mark .center-eyebrow {
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.7rem;
color: var(--gold);
margin-bottom: 8px;
}
.flavor-wheel .center-mark .center-name {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 2.2rem);
color: var(--cream);
line-height: 1;
text-transform: uppercase;
transition: opacity 0.3s ease;
}
.flavor-wheel .center-mark .center-tag {
font-family: var(--font-script);
color: var(--flame);
font-size: clamp(1rem, 2vw, 1.4rem);
margin-top: 6px;
}
.wheel-segment {
cursor: pointer;
transition: all 0.4s ease;
transform-origin: 50% 50%;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.wheel-segment:focus { outline: none; }
.wheel-segment:focus-visible {
outline: none;
}
/* Keyboard focus: subtle gold glow on the path instead of the rectangular outline */
.wheel-segment:focus-visible path {
filter: drop-shadow(0 0 16px var(--gold));
}
.wheel-segment path {
transition: all 0.4s ease;
}
.wheel-segment:hover path,
.wheel-segment.active path {
fill-opacity: 1;
filter: drop-shadow(0 0 24px var(--ember-glow));
}
.wheel-label {
font-family: var(--font-condensed);
letter-spacing: 0.2em;
font-size: 0.85rem;
fill: var(--cream);
text-anchor: middle;
dominant-baseline: middle;
pointer-events: none;
transition: fill 0.3s ease;
}
.wheel-segment:hover .wheel-label,
.wheel-segment.active .wheel-label { fill: var(--char); font-weight: 600; }
.flavor-detail {
min-height: 360px;
padding: 0 0 0 20px;
border-left: 1px solid rgba(201,163,92,0.2);
}
.flavor-detail-num {
font-family: var(--font-display);
font-style: italic;
color: var(--ember-glow);
font-size: 0.95rem;
letter-spacing: 0.3em;
margin-bottom: 18px;
transition: opacity 0.3s ease;
}
.flavor-detail-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
line-height: 1;
color: var(--cream);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 6px;
transition: opacity 0.3s ease;
}
.flavor-detail-script {
font-family: var(--font-script);
color: var(--gold);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
line-height: 1;
margin-bottom: 28px;
transition: opacity 0.3s ease;
}
.flavor-detail-desc {
font-size: 1.02rem;
color: var(--bone);
line-height: 1.8;
margin-bottom: 28px;
transition: opacity 0.3s ease;
}
.flavor-detail-spirits {
display: flex;
flex-wrap: wrap;
gap: 8px;
transition: opacity 0.3s ease;
}
.flavor-detail-spirits .chip {
font-family: var(--font-condensed);
letter-spacing: 0.25em;
font-size: 0.74rem;
padding: 8px 14px;
border: 1px solid rgba(201,163,92,0.35);
color: var(--gold);
background: rgba(201,163,92,0.04);
}
.flavor-detail.fading > * { opacity: 0; }
.wheel-hint {
margin-top: 40px;
text-align: center;
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.72rem;
color: var(--muted);
}
.wheel-hint::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ember-glow);
box-shadow: 0 0 8px var(--ember-glow);
vertical-align: middle;
margin-right: 12px;
animation: pulse 1.6s ease-in-out infinite;
}
/* === VISIT === */
.visit {
position: relative;
background: var(--char);
padding: 140px 56px 80px;
overflow: hidden;
isolation: isolate;
}
/* Full-bleed dining room photo as section background */
.visit-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.visit-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.28;
filter: saturate(1.15) contrast(1.05);
}
.visit-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.92) 70%, rgba(10,8,7,0.98) 100%),
linear-gradient(180deg, rgba(10,8,7,0.85) 0%, rgba(10,8,7,0.5) 35%, rgba(10,8,7,0.9) 100%);
}
.visit-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 80%, rgba(177,32,39,0.22), transparent 40%),
radial-gradient(circle at 82% 20%, rgba(244,162,60,0.15), transparent 40%);
z-index: 1;
}
.visit .container {
position: relative;
z-index: 5;
}
/* Centered header */
.visit-head {
text-align: center;
margin-bottom: 70px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.visit-head .section-eyebrow { display: block; }
.visit-head .section-eyebrow::before { display: none; }
.visit-head .section-title {
margin: 14px 0 22px;
}
.visit-head-sub {
font-family: var(--font-serif);
font-style: italic;
color: var(--bone);
font-size: 1.1rem;
line-height: 1.7;
max-width: 520px;
margin: 0 auto;
}
/* === Hours + Map row (50/50) === */
.visit-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 14px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto 50px;
}
/* Compact hours block — replaces the old big card */
.visit-hours {
background: rgba(20,16,13,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(201,163,92,0.25);
padding: 36px 36px;
position: relative;
display: flex;
flex-direction: column;
}
.visit-hours::before, .visit-hours::after {
content: '';
position: absolute;
width: 12px; height: 12px;
border: 1px solid var(--gold);
}
.visit-hours::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.visit-hours::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.visit-hours-label {
font-family: var(--font-condensed);
color: var(--gold);
letter-spacing: 0.4em;
font-size: 0.74rem;
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 14px;
}
.visit-hours-label::before {
content: '';
width: 22px; height: 1px;
background: var(--gold);
}
.visit-hours-list {
list-style: none;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0;
}
.visit-hours-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid rgba(201,163,92,0.12);
align-items: center;
}
.visit-hours-row:last-child { border-bottom: none; }
.visit-hours-row.today {
color: var(--flame);
}
.visit-hours-row.today .visit-hours-day {
color: var(--flame);
}
.visit-hours-row.today::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--flame);
box-shadow: 0 0 8px var(--flame);
margin-right: 10px;
vertical-align: middle;
animation: pulse 1.6s ease-in-out infinite;
}
.visit-hours-day {
font-family: var(--font-condensed);
letter-spacing: 0.3em;
color: var(--bone);
font-size: 0.82rem;
}
.visit-hours-time {
font-family: var(--font-serif);
font-style: italic;
color: var(--cream);
font-size: 0.95rem;
}
.visit-hours-time.closed {
color: var(--ember-glow);
font-style: normal;
font-family: var(--font-condensed);
letter-spacing: 0.2em;
font-size: 0.78rem;
}
/* Map block */
.visit-map {
position: relative;
background: var(--soot);
border: 1px solid rgba(201,163,92,0.25);
overflow: hidden;
min-height: 380px;
}
.visit-map::before, .visit-map::after {
content: '';
position: absolute;
width: 12px; height: 12px;
border: 1px solid var(--gold);
z-index: 3;
}
.visit-map::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.visit-map::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.visit-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
/* Subtle dark tint to match brand */
filter: saturate(0.85) brightness(0.82) contrast(1.05);
transition: filter 0.5s ease;
}
.visit-map:hover iframe {
filter: saturate(1) brightness(1) contrast(1);
}
.visit-map-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 18px 22px;
background: linear-gradient(0deg, rgba(10,8,7,0.92) 0%, rgba(10,8,7,0.6) 60%, transparent 100%);
z-index: 2;
pointer-events: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.visit-map-address {
color: var(--cream);
font-family: var(--font-display);
font-size: 1.05rem;
line-height: 1.3;
}
.visit-map-address span {
display: block;
font-family: var(--font-script);
color: var(--gold);
font-size: 1.05rem;
line-height: 1;
margin-bottom: 2px;
}
.visit-map-link {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-condensed);
color: var(--gold);
text-decoration: none;
letter-spacing: 0.32em;
font-size: 0.7rem;
padding: 8px 14px;
border: 1px solid rgba(201,163,92,0.4);
background: rgba(10,8,7,0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: all 0.3s ease;
flex-shrink: 0;
}
.visit-map-link:hover {
background: var(--ember);
border-color: var(--ember);
color: var(--cream);
}
.visit-map-link svg {
width: 12px; height: 12px;
}
/* === Contact strip — clean horizontal row === */
.visit-contact {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto 50px;
padding: 36px 40px;
background: rgba(20,16,13,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(201,163,92,0.18);
border-left: none;
border-right: none;
}
.visit-contact-item {
text-align: center;
position: relative;
}
.visit-contact-item:not(:last-child)::after {
content: '';
position: absolute;
right: -15px;
top: 12%;
bottom: 12%;
width: 1px;
background: rgba(201,163,92,0.18);
}
.visit-contact-label {
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.7rem;
color: var(--gold);
margin-bottom: 12px;
}
.visit-contact-value {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--cream);
line-height: 1.35;
}
.visit-contact-value a {
color: var(--cream);
text-decoration: none;
border-bottom: 1px solid rgba(201,163,92,0.3);
transition: all 0.3s ease;
}
.visit-contact-value a:hover {
color: var(--flame);
border-color: var(--flame);
}
.visit-contact-sub {
font-family: var(--font-serif);
font-style: italic;
color: var(--muted);
font-size: 0.88rem;
margin-top: 6px;
}
/* CTA row */
.visit-cta-row {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
/* Hide old visit-card / visit-info / visit-photo styles — replaced */
.visit-card, .visit-info, .visit-photo { display: none; }
.btn-primary, .btn-ghost {
font-family: var(--font-condensed);
font-size: 0.9rem;
letter-spacing: 0.32em;
padding: 16px 36px;
text-decoration: none;
transition: all 0.4s ease;
cursor: pointer;
border: 1px solid;
display: inline-block;
background: transparent;
text-align: center;
min-height: 50px;
border-radius: 999px;
}
.btn-primary { background: var(--ember); color: var(--cream); border-color: var(--ember); }
.btn-primary:hover {
background: var(--ember-glow);
border-color: var(--ember-glow);
box-shadow: 0 8px 30px rgba(216,58,31,0.4);
transform: translateY(-2px);
}
.btn-ghost { color: var(--cream); border-color: var(--gold-soft); }
.btn-ghost:hover { background: rgba(201,163,92,0.1); border-color: var(--gold); }
/* === RESERVATION MODAL === */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(10,8,7,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal {
background: linear-gradient(180deg, var(--soot), var(--char));
border: 1px solid rgba(201,163,92,0.3);
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 50px 44px;
position: relative;
transform: translateY(40px) scale(0.95);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal::before, .modal::after {
content: '';
position: absolute;
width: 14px; height: 14px;
border: 1px solid var(--gold);
}
.modal::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.modal::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.modal-close {
position: absolute;
top: 18px; right: 18px;
background: none;
border: none;
width: 36px; height: 36px;
cursor: pointer;
color: var(--bone);
transition: color 0.3s ease, transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover { color: var(--flame); transform: rotate(90deg); }
.modal-close svg { width: 18px; height: 18px; }
.modal-eyebrow {
font-family: var(--font-condensed);
letter-spacing: 0.45em;
font-size: 0.78rem;
color: var(--ember-glow);
margin-bottom: 14px;
}
.modal-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.4rem);
line-height: 1;
color: var(--cream);
text-transform: uppercase;
margin-bottom: 8px;
}
.modal-title em {
font-family: var(--font-script);
font-style: normal;
color: var(--gold);
text-transform: lowercase;
font-weight: 400;
}
.modal-sub {
font-family: var(--font-serif);
font-style: italic;
color: var(--bone);
font-size: 1rem;
margin-bottom: 32px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 18px;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
font-family: var(--font-condensed);
letter-spacing: 0.3em;
font-size: 0.7rem;
color: var(--gold);
margin-bottom: 8px;
}
.form-input, .form-select {
background: rgba(10,8,7,0.6);
border: 1px solid rgba(201,163,92,0.3);
color: var(--cream);
padding: 14px 16px;
font-family: var(--font-serif);
font-size: 1rem;
transition: all 0.3s ease;
min-height: 48px;
}
.form-input:focus, .form-select:focus {
outline: none;
border-color: var(--flame);
background: rgba(10,8,7,0.9);
box-shadow: 0 0 20px rgba(244,162,60,0.15);
}
.form-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.modal-submit {
width: 100%;
margin-top: 12px;
padding: 18px;
background: var(--ember);
border: 1px solid var(--ember);
color: var(--cream);
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.92rem;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 999px;
}
.modal-submit:hover { background: var(--ember-glow); box-shadow: 0 8px 30px rgba(216,58,31,0.4); }
.modal-foot {
margin-top: 24px;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
color: var(--muted);
font-size: 0.92rem;
}
.modal-foot a { color: var(--gold); text-decoration: none; }
.modal-success {
text-align: center;
padding: 30px 0 10px;
display: none;
}
.modal-success.show { display: block; }
.modal-success svg {
width: 60px; height: 60px;
color: var(--flame);
margin: 0 auto 24px;
filter: drop-shadow(0 0 24px var(--ember-glow));
animation: flicker 2s ease-in-out infinite;
}
.modal-success-title {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--cream);
margin-bottom: 14px;
}
.modal-success-text {
color: var(--bone);
line-height: 1.7;
}
/* === FOOTER === */
footer {
background: var(--soot);
padding: 80px 56px 40px;
border-top: 1px solid rgba(201,163,92,0.15);
position: relative;
}
footer::before {
content: '';
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
}
.footer-grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
.footer-logo {
display: inline-block;
margin-bottom: 20px;
line-height: 0;
}
.footer-logo-img {
display: block;
height: 64px;
width: auto;
max-width: 100%;
}
.footer-brand {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2rem);
color: var(--cream);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
margin-bottom: 20px;
}
.footer-brand .flame-letter { color: var(--ember-glow); }
.footer-tag {
font-family: var(--font-script);
color: var(--gold);
font-size: 1.6rem;
line-height: 1;
margin-bottom: 24px;
}
.footer-blurb {
font-size: 0.95rem;
color: var(--bone);
line-height: 1.75;
max-width: 380px;
font-style: italic;
}
.footer-col-title {
font-family: var(--font-condensed);
letter-spacing: 0.4em;
font-size: 0.78rem;
color: var(--ember-glow);
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(201,163,92,0.18);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; font-size: 0.95rem; color: var(--bone); }
.footer-col a { color: var(--bone); text-decoration: none; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--flame); }
.footer-bottom {
max-width: 1320px;
margin: 0 auto;
padding-top: 36px;
border-top: 1px solid rgba(201,163,92,0.15);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-copy {
font-family: var(--font-condensed);
letter-spacing: 0.28em;
font-size: 0.78rem;
color: var(--muted);
}
.footer-socials { display: flex; gap: 18px; }
.footer-socials a {
width: 44px; height: 44px;
border: 1px solid rgba(201,163,92,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bone);
transition: all 0.4s ease;
}
.footer-socials a:hover {
background: var(--ember);
border-color: var(--ember);
color: var(--cream);
transform: translateY(-2px);
}
.footer-socials svg { width: 16px; height: 16px; }
/* === REVEAL ANIMATIONS === */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.45s; }
/* === RESPONSIVE === */
@media (max-width: 1024px) {
nav, section, footer { padding-left: 32px; padding-right: 32px; }
nav.scrolled { padding-top: 14px; padding-bottom: 14px; }
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: block; }
.story-grid { grid-template-columns: 1fr; gap: 60px; }
.story-visual { max-width: 460px; margin: 0 auto; }
.pillars-grid { grid-template-columns: 1fr; }
.pillar { aspect-ratio: 4/3; min-height: 420px; }
.pillar-content { padding: 30px 28px 32px; }
.pillar-frame { inset: 14px; }
.rituals-head { gap: 32px; margin-bottom: 56px; }
.flavor-wheel-wrap { padding: 50px 36px; }
.flavor-wheel-wrap { grid-template-columns: 1fr; gap: 60px; }
.flavor-detail { padding-left: 0; border-left: none; border-top: 1px solid rgba(201,163,92,0.2); padding-top: 40px; }
.experience-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
.experience-photo { grid-column: 1 / -1; max-width: 380px; margin: 0 auto; aspect-ratio: 16/9; }
.experience-content { padding: 90px 0; }
.testimonial-head { padding: 0 32px; margin-bottom: 50px; }
.testimonial-stats { padding: 0 32px; gap: 36px; margin-top: 50px; }
.testimonial { width: 340px; }
.visit-grid { grid-template-columns: 1fr; gap: 14px; }
.visit-hours { padding: 28px 28px; }
.visit-map { min-height: 360px; }
.visit-contact { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 28px 32px; }
.visit-contact-item:nth-child(2)::after { display: none; }
.visit-photo { aspect-ratio: 16/9; max-width: 520px; margin-left: auto; margin-right: auto; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
section { padding-top: 110px; padding-bottom: 110px; }
.pillars { padding-top: 110px; padding-bottom: 110px; }
.visit { padding-top: 110px; padding-bottom: 60px; }
/* Gallery: tablet — thumbs strip on top, featured below */
.gallery { padding: 100px 32px; }
.gallery-layout {
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr !important;
gap: 14px;
}
.gallery-layout .gallery-stack-wrap { grid-column: 1 !important; grid-row: 1 !important; height: auto !important; position: relative; }
.gallery-layout .gallery-featured { grid-column: 1 !important; grid-row: 2 !important; aspect-ratio: 16/10; width: 100% !important; }
.gallery-layout .gallery-stack {
position: relative !important;
inset: auto !important;
flex-direction: row !important;
max-height: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-right: 0 !important;
padding-bottom: 4px !important;
gap: 10px !important;
-webkit-overflow-scrolling: touch;
}
.gallery-layout .gallery-thumb {
flex: 0 0 200px !important;
aspect-ratio: 16/9 !important;
}
.flavor-photo { display: none; }
}
/* ========== MOBILE / SMALL TABLET — ≤ 640px ========== */
.mobile-only { display: none; }
.desktop-only { display: inline; }
.desktop-only-block { display: block; }
@media (max-width: 640px) {
.mobile-only { display: inline; }
.desktop-only { display: none !important; }
.desktop-only-block { display: none !important; }
nav { padding: 14px 16px; }
nav.scrolled { padding: 10px 16px; }
.nav-logo { font-size: 1.15rem; letter-spacing: 0.22em; }
.nav-logo .flame-mark { width: 18px; height: 18px; }
/* --- tighter section padding everywhere --- */
section, footer { padding-left: 16px; padding-right: 16px; }
section { padding-top: 64px; padding-bottom: 64px; }
.pillars, .visit, .rituals, .story { padding-top: 60px; padding-bottom: 60px; }
.pillars { padding-left: 10px; padding-right: 10px; }
.visit { padding-left: 10px; padding-right: 10px; }
.section-title { font-size: clamp(1.9rem, 9vw, 2.4rem); line-height: 1; }
.section-eyebrow { font-size: 0.7rem; letter-spacing: 0.4em; margin-bottom: 14px; }
.section-eyebrow::before { width: 22px; margin-right: 12px; }
/* === HERO === */
.hero { min-height: 100vh; min-height: 100svh; }
.hero-content {
padding: 110px 20px 110px;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.42em; margin-bottom: 36px; }
.hero-eyebrow::before, .hero-eyebrow::after { width: 18px; margin: 0 10px; }
.hero-title { font-size: clamp(4.2rem, 22vw, 6.5rem); line-height: 0.9; gap: 0; letter-spacing: 0; margin-bottom: 4px; }
.hero-title .letter { transform: none !important; }
.hero-script { font-size: clamp(2.4rem, 11vw, 3.4rem); margin-top: 0; margin-bottom: 28px; }
.hero-rule { height: 44px; margin: 4px auto 20px; }
.hero-tagline { font-size: 0.95rem; line-height: 1.55; max-width: 300px; }
.hero-meta { margin-top: 30px; gap: 10px; flex-direction: column; align-items: center; }
.hero-meta span { font-size: 0.66rem; letter-spacing: 0.26em; }
.hero-cta-row { margin-top: 32px; gap: 12px; width: 100%; padding: 0 24px; }
.hero-cta-row .btn-primary, .hero-cta-row .btn-ghost { width: 100%; min-width: 0; padding: 14px 24px; font-size: 0.78rem; letter-spacing: 0.28em; }
.live-status { font-size: 0.62rem; letter-spacing: 0.2em; padding: 6px 14px; margin-top: 26px; }
.scroll-cue { display: none; }
/* === STORY === */
.story-grid { grid-template-columns: 1fr; gap: 32px; }
.story-visual {
max-width: 100%;
width: 100%;
margin: 0;
aspect-ratio: 4/5;
order: -1;
}
.story-mark svg { width: 56px; margin-bottom: 14px; }
.story-mark-year { font-size: 1.6rem; margin-bottom: 8px; }
.story-mark-label { font-size: 0.65rem; letter-spacing: 0.32em; padding: 7px 16px; }
.story-content .section-title { margin: 8px 0 18px; }
.story-lead {
font-size: 1.05rem;
line-height: 1.45;
margin-bottom: 18px;
padding-left: 14px;
}
.story-content p { font-size: 0.95rem; line-height: 1.65; margin-bottom: 14px; }
.story-signature { margin-top: 24px; font-size: 1.9rem; }
.story-signature-line { font-size: 0.66rem; letter-spacing: 0.32em; }
/* === PILLARS — full-bleed on mobile === */
.pillars-grid { gap: 1px; }
.pillar {
aspect-ratio: 4/3.2;
min-height: 280px;
}
.pillar-content { padding: 24px 20px 28px; }
.pillar-frame { inset: 12px; }
.pillar-photo { margin: 0; aspect-ratio: auto; }
/* Heavier bottom-only dark layer behind text — image stays untouched above */
.pillar-photo::after,
.pillar:hover .pillar-photo::after {
background: linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(10,8,7,0.55) 75%,
rgba(10,8,7,0.92) 92%,
rgba(10,8,7,0.96) 100%
);
}
.pillar-num { font-size: 0.85rem; margin-bottom: 10px; letter-spacing: 0.28em; }
.pillar-title { font-size: 1.5rem; margin-bottom: 4px; }
.pillar-title-script { font-size: 1.4rem; margin-bottom: 12px; }
.pillar-body { font-size: 0.78rem; line-height: 1.55; margin-bottom: 14px; }
.pillar-tag { font-size: 0.62rem; letter-spacing: 0.26em; }
.pillar-tag::before { width: 14px; margin-right: 8px; }
.pillars-head { margin-bottom: 36px; }
/* === TESTIMONIALS MOBILE === */
.experience { min-height: auto; }
.experience-content { padding: 60px 0; }
.testimonial-head { padding: 0 16px; margin-bottom: 36px; }
.testimonial-head .testimonial-stars { font-size: 0.7rem; letter-spacing: 0.24em; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.testimonial-head .stars-row svg { width: 14px; height: 14px; }
.marquee-row { padding: 8px 0; }
.marquee-track { gap: 14px; }
.testimonial { width: 280px; padding: 22px 20px 18px; }
.testimonial-quote { font-size: 0.92rem; line-height: 1.5; margin-bottom: 16px; }
.testimonial-author { font-size: 0.95rem; }
.testimonial-author-meta { font-size: 0.6rem; letter-spacing: 0.22em; }
.testimonial-source { font-size: 0.58rem; letter-spacing: 0.18em; }
.testimonial-stats { padding: 0 16px; gap: 24px 18px; margin-top: 40px; }
.t-stat-num { font-size: 1.7rem; }
.t-stat-label { font-size: 0.62rem; letter-spacing: 0.26em; }
/* === BAR / FLAVOR WHEEL === */
.rituals-head { gap: 18px; margin-bottom: 36px; }
.rituals-intro { font-size: 0.95rem; line-height: 1.6; }
.flavor-wheel-wrap { padding: 32px 16px; }
.flavor-wheel-wrap { gap: 32px; }
.flavor-wheel { max-width: 100%; width: 100%; }
.wheel-label { font-size: 0.95rem; letter-spacing: 0.18em; font-weight: 600; }
.flavor-wheel .center-mark { width: 32%; }
.flavor-wheel .center-mark .center-eyebrow { font-size: 0.55rem; letter-spacing: 0.28em; margin-bottom: 6px; }
.flavor-wheel .center-mark .center-name { font-size: 1.05rem; }
.flavor-wheel .center-mark .center-tag { font-size: 0.9rem; margin-top: 4px; }
.flavor-detail { padding-top: 24px; min-height: auto; }
.flavor-detail-num { font-size: 0.78rem; margin-bottom: 10px; }
.flavor-detail-title { font-size: 1.55rem; margin-bottom: 2px; }
.flavor-detail-script { font-size: 1.45rem; margin-bottom: 14px; }
.flavor-detail-desc { font-size: 0.92rem; line-height: 1.6; margin-bottom: 18px; }
.flavor-detail-spirits .chip { font-size: 0.62rem; letter-spacing: 0.18em; padding: 6px 11px; }
.wheel-hint { font-size: 0.62rem; letter-spacing: 0.32em; margin-top: 24px; }
/* === VISIT === */
.visit { padding: 60px 16px 50px; }
.visit-head { margin-bottom: 36px; }
.visit-head-sub { font-size: 0.95rem; line-height: 1.6; }
.visit-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 32px; }
.visit-hours { padding: 22px 20px; }
.visit-hours-label { font-size: 0.66rem; letter-spacing: 0.3em; margin-bottom: 14px; }
.visit-hours-row { padding: 9px 0; gap: 10px; }
.visit-hours-day { font-size: 0.72rem; letter-spacing: 0.22em; }
.visit-hours-time { font-size: 0.88rem; }
.visit-hours-time.closed { font-size: 0.7rem; }
.visit-map { min-height: 280px; }
.visit-map-overlay { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
.visit-map-address { font-size: 0.95rem; }
.visit-map-address span { font-size: 0.95rem; }
.visit-map-link { font-size: 0.62rem; letter-spacing: 0.26em; padding: 7px 12px; }
.visit-contact {
grid-template-columns: 1fr 1fr;
gap: 22px 16px;
padding: 24px 18px;
margin-bottom: 32px;
}
.visit-contact-item:not(:last-child)::after { display: none; }
.visit-contact-item { padding-bottom: 18px; border-bottom: 1px solid rgba(201,163,92,0.12); }
.visit-contact-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.visit-contact-label { font-size: 0.62rem; letter-spacing: 0.32em; margin-bottom: 8px; }
.visit-contact-value { font-size: 0.95rem; line-height: 1.3; }
.visit-contact-sub { font-size: 0.78rem; margin-top: 4px; }
.visit-cta-row { flex-direction: column; gap: 10px; margin-top: 0; }
.visit-cta-row .btn-primary, .visit-cta-row .btn-ghost { width: 100%; padding: 14px 28px; font-size: 0.78rem; letter-spacing: 0.28em; }
/* === FOOTER === */
footer { padding: 50px 16px 28px; }
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 28px 24px;
margin-bottom: 36px;
}
/* The brand block (first column) spans full width on top, centered */
.footer-grid > :first-child {
grid-column: 1 / -1;
text-align: center;
}
.footer-grid > :first-child .footer-logo {
margin-left: auto;
margin-right: auto;
}
.footer-logo-img { height: 84px; }
.footer-brand { font-size: 1.5rem; }
.footer-tag { font-size: 1.3rem; margin-bottom: 14px; }
.footer-blurb {
font-size: 0.95rem;
line-height: 1.65;
max-width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-col-title { font-size: 0.66rem; letter-spacing: 0.32em; margin-bottom: 14px; padding-bottom: 8px; }
.footer-col li { font-size: 0.88rem; margin-bottom: 8px; }
.footer-bottom { flex-direction: column; text-align: center; padding-top: 24px; gap: 16px; }
.footer-copy { font-size: 0.66rem; letter-spacing: 0.22em; }
/* === MODAL === */
.modal { padding: 32px 22px 26px; }
.modal-title { font-size: 1.5rem; }
.modal-sub { font-size: 0.92rem; margin-bottom: 22px; }
.form-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.form-label { font-size: 0.62rem; letter-spacing: 0.24em; }
.form-input, .form-select { font-size: 0.95rem; padding: 12px 14px; min-height: 44px; }
.modal-submit { padding: 14px; font-size: 0.82rem; letter-spacing: 0.32em; }
.modal-foot { font-size: 0.85rem; margin-top: 18px; }
/* === LIGHTBOX === */
.lightbox { padding: 20px; }
.lightbox-content { padding: 24px; }
.lightbox-content svg.hero-flame { width: 70px; margin-bottom: 18px; }
.lightbox-script { font-size: 1.8rem; margin-bottom: 8px; }
.lightbox-title { font-size: 1.3rem; margin-bottom: 14px; }
.lightbox-divider { margin: 4px 0 14px; width: 40px; }
.lightbox-caption { font-size: 0.92rem; line-height: 1.6; }
.lightbox-meta { margin-top: 20px; font-size: 0.62rem; letter-spacing: 0.36em; }
.lightbox-close { top: 16px; right: 16px; width: 40px; height: 40px; }
.lightbox-hint { display: none; }
/* === GALLERY MOBILE — thumbs on top, featured below === */
.gallery { padding: 60px 0 !important; }
.gallery-head { margin-bottom: 36px; padding: 0 16px; }
.gallery-sub { font-size: 0.92rem; line-height: 1.6; margin-top: 14px; }
.gallery-layout {
gap: 12px;
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Force order: stack-wrap first, featured second */
.gallery-layout .gallery-stack-wrap { grid-column: 1 !important; grid-row: 1 !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
.gallery-layout .gallery-featured { grid-column: 1 !important; grid-row: 2 !important; aspect-ratio: 4/3; width: 100% !important; margin: 0 !important; }
.gallery-featured-content { padding: 22px 20px; }
.gallery-featured-num { font-size: 0.78rem; letter-spacing: 0.32em; margin-bottom: 8px; }
.gallery-featured-script { font-size: 1.4rem; }
.gallery-featured-title { font-size: 1.6rem; margin-bottom: 12px; }
.gallery-featured-cue { font-size: 0.62rem; letter-spacing: 0.26em; }
.gallery-featured-frame { inset: 12px; }
/* Heavier bottom-only dark layer behind text — image stays untouched above */
.gallery-featured::after {
background: linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(10,8,7,0.55) 75%,
rgba(10,8,7,0.92) 92%,
rgba(10,8,7,0.96) 100%
);
}
/* Stack becomes a 4-column grid on mobile (no scroll, all visible) */
.gallery-layout .gallery-stack-wrap { position: relative; }
.gallery-layout .gallery-stack {
position: relative !important;
inset: auto !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
flex-direction: unset !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
}
.gallery-layout .gallery-thumb {
flex: unset !important;
aspect-ratio: 1 !important;
}
/* Hide captions on mobile thumbs — image alone is enough */
.gallery-layout .gallery-thumb .gallery-thumb-content { display: none; }
.gallery-thumb-mark { width: 12px; height: 12px; top: 4px; right: 4px; }
/* Lightbox mobile */
.glightbox { padding: 16px; }
.glightbox-stage { max-height: 75vh; }
.glightbox img { max-height: 60vh; }
.glightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
.glightbox-arrow { width: 44px; height: 44px; }
.glightbox-prev { left: 8px; }
.glightbox-next { right: 8px; }
.glightbox-caption-script { font-size: 1.3rem; }
.glightbox-caption-title { font-size: 1.2rem; }
.glightbox-caption-meta { font-size: 0.6rem; letter-spacing: 0.32em; }
.glightbox-counter { bottom: 16px; font-size: 0.66rem; letter-spacing: 0.32em; }
}
/* === IMAGE UTILITIES === */
.img-frame {
position: relative;
overflow: hidden;
background: var(--soot);
}
.img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.6s ease;
}
/* Cinematic vignette + warm tint over every photo */
.img-frame::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, transparent 50%, rgba(10,8,7,0.55) 100%),
linear-gradient(180deg, rgba(10,8,7,0.1) 0%, transparent 30%, transparent 70%, rgba(10,8,7,0.5) 100%);
pointer-events: none;
z-index: 2;
}
/* Placeholder when no image present */
.img-frame[data-placeholder]::before {
content: attr(data-placeholder);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 30px;
font-family: var(--font-condensed);
letter-spacing: 0.32em;
font-size: 0.7rem;
color: var(--gold);
background:
radial-gradient(ellipse at 50% 100%, rgba(216,58,31,0.4), transparent 60%),
linear-gradient(135deg, #2a1208 0%, #1a0e08 50%, #0a0807 100%);
z-index: 1;
}
/* === HERO IMAGE BACKDROP === */
.hero-image {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.hero-image img,
.hero-image video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
filter: saturate(1.1) contrast(1.05);
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
/* Hide WebKit's media controls overlay where suppressible via CSS */
.hero-image video::-webkit-media-controls,
.hero-image video::-webkit-media-controls-panel,
.hero-image video::-webkit-media-controls-play-button,
.hero-image video::-webkit-media-controls-start-playback-button,
.hero-image video::-webkit-media-controls-overlay-play-button,
.hero-image video::-webkit-media-controls-enclosure {
display: none !important;
-webkit-appearance: none;
appearance: none;
opacity: 0;
}
/* Image inside