/*
Theme Name: Verjus
Description: Seasonal tasting-menu restaurant.
Version: 1.0
*/

/* ============================================================
   Verjus breaks from the last several themes' dark palettes on
   purpose — warm cream "menu card" paper, deep wine red, burnt
   caramel amber. The homepage's structural novelty is that the
   collection section reads as an actual printed tasting menu
   (numbered courses, key ingredient, wine pairing, thin rule
   dividers) rather than a card grid. Three new GPU techniques:
   a real BokehPass depth-of-field hero (EffectComposer chain,
   this project's first genuine post-processing DOF — every prior
   "hero blur" was a CSS trick), a warm upward-drifting volumetric
   steam raymarch (distinct from Cellara's cool tissue-imaging
   volume and Fathom's ambient cloud fog), and matter.js 2D physics
   for a tumbling-ingredients interaction (this project's first use
   of a physics engine). Typography: Fraunces (soft variable serif)
   + Public Sans + Spline Sans Mono — none used before.
   ============================================================ */
:root {
	--paper: #f7f1e6;
	--paper-2: #efe6d4;
	--paper-3: #e6dac2;
	--ink: #2b1c16;
	--ink-dim: #6b5847;
	--ink-mute: #a3907a;
	--wine: #6e1423;
	--wine-bright: #9c2a3c;
	--amber: #c17f34;
	--amber-bright: #dd9c4f;
	--sage: #6b7a52;
	--line: rgba(43, 28, 22, 0.14);
	--line-strong: rgba(43, 28, 22, 0.28);
	--font-display: 'Fraunces', serif;
	--font-body: 'Public Sans', sans-serif;
	--font-mono: 'Spline Sans Mono', monospace;
	--ease-verjus: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--wine); color: var(--paper); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 0.4em; color: var(--ink); font-optical-sizing: auto; }
h1 { font-size: clamp(44px, 7vw, 108px); font-weight: 460; font-style: italic; }
h2 { font-size: clamp(30px, 4vw, 56px); }
h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 600; }
p { margin: 0 0 1.1em; color: var(--ink-dim); }
.mono { font-family: var(--font-mono); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wine); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--amber); }
.eyebrow.amber { color: var(--amber); }
.eyebrow.amber::before { background: var(--wine); }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 34px; border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: transparent; transition: background 0.4s var(--ease-verjus), color 0.4s var(--ease-verjus); cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--wine); color: var(--paper); border-color: var(--wine); }
.btn.solid:hover { background: var(--wine-bright); border-color: var(--wine-bright); }

.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* Sitewide ambient wash — wine/amber/sage ink diffusing into the paper
   background, fixed behind all content. mix-blend-mode: multiply is what
   turns the simulated color field into a stain-on-paper look rather than
   a glow: fully transparent (empty) pixels leave the cream page untouched,
   dense pixels tint it toward the ink hue. */
#ambientCanvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; opacity: 0.85; }

/* ============================================================
   Header
   ============================================================ */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px 0; transition: background 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; }
.site-head.scrolled { background: rgba(247, 241, 230, 0.9); backdrop-filter: blur(14px); border-color: var(--line); }
.head-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; }
.logo { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 26px; letter-spacing: 0; color: var(--ink); }
.logo span { color: var(--wine); }
.main-nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.main-nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.3s; }
.main-nav a:hover { color: var(--wine); }
.nav-toggle { display: none; background: none; border: 1px solid var(--ink); color: var(--ink); font-size: 10px; letter-spacing: 0.14em; padding: 8px 16px; cursor: pointer; font-family: var(--font-mono); text-transform: uppercase; }
.mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--paper); transform: translateY(-100%); transition: transform 0.55s var(--ease-verjus); display: flex; flex-direction: column; }
.mobile-nav.open { transform: translateY(0); }
.mobile-nav ul { list-style: none; margin: auto 0; padding: 0 40px; }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 20px 0; font-family: var(--font-display); font-style: italic; font-size: 34px; color: var(--ink); }
.mn-close { position: absolute; top: 26px; right: 34px; background: none; border: 1px solid var(--ink); color: var(--ink); font-size: 20px; padding: 4px 13px; cursor: pointer; }
@media (max-width: 960px) { .main-nav { display: none; } .nav-toggle { display: block; } }

/* ============================================================
   Structural device: the course card
   ============================================================ */
.course-card { display: block; }
.course-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--wine); }
.course-pairing { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; }
.course-pairing b { color: var(--amber); font-weight: 500; }

/* ============================================================
   Hero — BokehPass depth-of-field scene
   ============================================================ */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 160px 0 70px; background: var(--ink); }
#bokehCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,12,8,0.1) 0%, rgba(20,12,8,0.55) 62%, var(--ink) 100%); z-index: 1; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; padding: 0 3vw; }
.hero .eyebrow { color: var(--amber-bright); }
.hero .eyebrow::before { background: var(--amber-bright); }
.hero h1 { color: var(--paper); margin: 18px 0 26px; }
.hero-lede { max-width: 540px; font-size: 18px; color: rgba(247,241,230,0.72); }
.hero-cta { display: flex; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.hero .btn { border-color: var(--paper); color: var(--paper); }
.hero .btn:hover { background: var(--paper); color: var(--ink); }
.hero .btn.solid { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.hero .btn.solid:hover { background: var(--wine-bright); border-color: var(--wine-bright); }
.scroll-cue { position: absolute; bottom: 26px; right: 4vw; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247,241,230,0.55); writing-mode: vertical-rl; display: flex; align-items: center; gap: 10px; }
.scroll-cue::after { content: ''; width: 1px; height: 46px; background: rgba(247,241,230,0.4); }

/* ============================================================
   Menu ticker — "tonight's courses" marquee
   ============================================================ */
.menu-ticker { background: var(--wine); color: var(--paper); overflow: hidden; padding: 12px 0; white-space: nowrap; }
.ticker-track { display: inline-flex; gap: 44px; animation: ticker-scroll 30s linear infinite; }
.ticker-track span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.ticker-track span::before { content: '\2022'; margin-right: 44px; color: var(--amber-bright); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Philosophy split
   ============================================================ */
.philosophy-section { padding: 120px 0; }
.philosophy-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.philosophy-media { position: relative; }
.philosophy-media img { width: 100%; border: 1px solid var(--line); }
.philosophy-badge { position: absolute; bottom: -24px; left: -24px; background: var(--ink); color: var(--paper); padding: 22px 26px; }
.philosophy-badge b { display: block; font-family: var(--font-display); font-style: italic; font-size: 30px; }
.philosophy-badge span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-bright); }
@media (max-width: 900px) { .philosophy-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Tasting menu — the core structural novelty
   ============================================================ */
.menu-section { padding: 60px 0 120px; }
.menu-head { text-align: center; margin-bottom: 70px; }
.menu-head .eyebrow { justify-content: center; }
.menu-list { max-width: 880px; margin: 0 auto; }
.menu-row { display: grid; grid-template-columns: 70px 1fr 160px; gap: 30px; align-items: start; padding: 34px 0; border-top: 1px solid var(--line); transition: background 0.3s; }
.menu-row:last-child { border-bottom: 1px solid var(--line); }
.menu-row:hover { background: rgba(110, 20, 35, 0.03); }
.menu-row .mr-media { width: 70px; height: 70px; overflow: hidden; border-radius: 50%; border: 1px solid var(--line-strong); }
.menu-row .mr-media img { width: 100%; height: 100%; object-fit: cover; }
.menu-row .mr-body h3 { margin-bottom: 6px; }
.menu-row .mr-body p { font-size: 15px; margin-bottom: 8px; }
.menu-row .mr-pairing { text-align: right; }
@media (max-width: 700px) { .menu-row { grid-template-columns: 50px 1fr; } .mr-pairing { grid-column: 2; text-align: left; } }

/* ============================================================
   The Pass — steam volumetric showcase
   ============================================================ */
.pass-section { position: relative; height: 92vh; min-height: 620px; overflow: hidden; background: var(--ink); }
#steamCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pass-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 70px 3vw; pointer-events: none; color: var(--paper); }
.pass-overlay .eyebrow { color: var(--amber-bright); pointer-events: auto; }
.pass-overlay .eyebrow::before { background: var(--amber-bright); }
.pass-caption { max-width: 460px; pointer-events: auto; }
.pass-caption h2 { color: var(--paper); }
.pass-caption p { color: rgba(247,241,230,0.7); }

/* ============================================================
   Ingredients — matter.js physics
   ============================================================ */
.ingredients-section { padding: 120px 0; background: var(--paper-2); }
.ingredients-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: center; }
.ing-stage { position: relative; aspect-ratio: 4/3; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
#ingredientsCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ing-hint { position: absolute; bottom: 14px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); background: rgba(247,241,230,0.85); padding: 6px 12px; z-index: 3; }
@media (max-width: 900px) { .ingredients-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Cellar / wine pairing band
   ============================================================ */
.cellar-section { padding: 110px 0; }
.cellar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.cellar-card { border: 1px solid var(--line); padding: 30px 26px; transition: border-color 0.3s, transform 0.4s var(--ease-verjus); }
.cellar-card:hover { border-color: var(--wine); transform: translateY(-4px); }
.cellar-card .cc-region { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; display: block; }
@media (max-width: 900px) { .cellar-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Press quotes
   ============================================================ */
.press-section { padding: 100px 0; border-top: 1px solid var(--line); }
.press-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 50px; }
.press-quote blockquote { margin: 0 0 16px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
.press-quote cite { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); font-style: normal; }
@media (max-width: 900px) { .press-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Journal
   ============================================================ */
.journal-section { padding: 110px 0; }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.journal-card { display: block; border: 1px solid var(--line); overflow: hidden; transition: border-color 0.3s; background: var(--paper); }
.journal-card:hover { border-color: var(--wine); }
.journal-card .jc-media { aspect-ratio: 16/10; overflow: hidden; }
.journal-card .jc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-verjus); }
.journal-card:hover .jc-media img { transform: scale(1.06); }
.journal-card .jc-body { padding: 22px; }
.journal-card .jc-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.journal-card h3 { margin: 8px 0; font-size: 20px; }
@media (max-width: 900px) { .journal-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   CTA / Reservation
   ============================================================ */
.cta-band { padding: 130px 0; text-align: center; background: var(--ink); color: var(--paper); }
.cta-band h2 { color: var(--paper); max-width: 780px; margin: 0 auto 30px; }
.cta-band .btn.solid { background: var(--wine); border-color: var(--wine); }
.cta-band .btn.solid:hover { background: var(--wine-bright); }

/* ============================================================
   Footer
   ============================================================ */
.site-foot { padding: 80px 0 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; }
.foot-menu, .foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-menu li, .foot-grid li { margin-bottom: 10px; }
.foot-menu a, .foot-grid a { color: var(--ink-dim); font-size: 14px; transition: color 0.3s; }
.foot-menu a:hover, .foot-grid a:hover { color: var(--wine); }
.foot-bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ============================================================
   Reveals
   ============================================================ */
.reveal { opacity: 0; transform: translateY(36px); }
.reveal.in { opacity: 1; transform: translateY(0); transition: opacity 0.8s var(--ease-verjus), transform 0.8s var(--ease-verjus); }

/* ============================================================
   Interior pages
   ============================================================ */
.page-hero { padding: 170px 0 70px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(38px, 6vw, 76px); }

.dish-single { padding: 60px 0 120px; }
.dish-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; }
.dish-media { border: 1px solid var(--line); overflow: hidden; }
.dish-media img { width: 100%; display: block; }
.dish-meta h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 10px; }
.dish-meta .course-pairing { margin: 20px 0; padding: 18px 20px; background: var(--paper-2); border: 1px solid var(--line); display: flex; }
@media (max-width: 900px) { .dish-layout { grid-template-columns: minmax(0, 1fr); } }

.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 70px 0 120px; }
@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .archive-grid { grid-template-columns: minmax(0, 1fr); } }

.dish-card { border: 1px solid var(--line); overflow: hidden; transition: border-color 0.3s; }
.dish-card:hover { border-color: var(--wine); }
.dish-card .dc-media { aspect-ratio: 4/3; overflow: hidden; }
.dish-card .dc-media img { width: 100%; height: 100%; object-fit: cover; }
.dish-card .dc-body { padding: 18px 20px; }

.taxo-filter { display: flex; gap: 12px; flex-wrap: wrap; padding: 30px 0; }
.taxo-filter a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--line-strong); color: var(--ink-dim); transition: all 0.3s; }
.taxo-filter a:hover, .taxo-filter a.active { border-color: var(--wine); color: var(--wine); }

.content-basic { padding: 70px 0 120px; max-width: 760px; margin: 0 auto; }
.content-basic h2 { margin-top: 1.4em; }
.content-basic p { font-size: 17px; }
.content-basic img { margin: 30px 0; border: 1px solid var(--line); }

.search-form-basic { display: flex; gap: 0; margin: 30px 0 60px; max-width: 560px; }
.search-form-basic input { flex: 1; background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); padding: 14px 18px; font-family: var(--font-body); font-size: 15px; }
.search-form-basic button { background: var(--wine); color: var(--paper); border: none; padding: 14px 22px; font-family: var(--font-mono); text-transform: uppercase; font-size: 12px; cursor: pointer; }

.contact-grid { max-width: 1100px; margin: 0 auto; padding: 60px 40px 130px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; }
.contact-form form { display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 16px; }
.contact-form input, .contact-form textarea { background: var(--paper-2); border: 1px solid var(--line-strong); color: var(--ink); padding: 13px 16px; font-family: var(--font-body); font-size: 15px; }
.contact-form button { margin-top: 24px; align-self: flex-start; }
.contact-detail { margin-bottom: 22px; }
.contact-detail span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.contact-detail b { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); padding: 40px 24px 90px; } }

@media (max-width: 700px) {
	.cellar-grid, .press-grid, .journal-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
}