/* The Tallow Room — concept site. Strike a match: one razor-sharp serif, gold rules, symmetry, candlelight. */

@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
/* Metric-matched fallbacks (computed from the font tables) keep the swap from shifting layout. */
@font-face { font-family: 'Bodoni Fallback'; src: local('Times New Roman'), local('Liberation Serif'); font-style: normal; size-adjust: 112.1%; ascent-override: 100.3%; descent-override: 35.7%; line-gap-override: 0%; }
@font-face { font-family: 'Bodoni Fallback'; src: local('Times New Roman Italic'), local('Liberation Serif Italic'); font-style: italic; size-adjust: 106.2%; ascent-override: 105.9%; descent-override: 37.7%; line-gap-override: 0%; }

:root {
	--soot: #0E0A08;
	--soot-2: #181009;
	--oxblood: #4A0E12;
	--wax: #F1E4C8;
	--wax-2: #C9BA9B;
	--candle: #E6B85C;
	--ember: #D9782D;
	--rule: #6E5A36;
	--serif: 'Bodoni Moda', 'Bodoni Fallback', 'Times New Roman', serif;
	--side: clamp(16px, 5vw, 72px);
	--mx: 50vw; --my: 40vh;
	color-scheme: dark;
}
/* Phones keep a clear column for the edge tab. */
@media (max-width: 899px) { .words, .plates, .say, .know, .foot { --side: 44px; } .menu-page { --side: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--soot); color: var(--wax); font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; font-optical-sizing: auto; font-synthesis: none; overflow-x: clip; text-align: center; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--wax); color: var(--soot); padding: 10px 16px; }
.skip:focus { top: 8px; }
.wide { display: none; }
@media (min-width: 620px) { .wide { display: inline; } }

.h2 { font-weight: 400; font-size: clamp(2.5rem, 6.4vw, 5.25rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.h2 em, .h3 em, .hero__title em, .note-call__title em { font-weight: 400; color: var(--candle); }
.h3 { font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; }
/* The ornament: a gold diamond between two fine rules. */
.orn { width: 170px; height: 13px; margin: 0 auto 26px; background: linear-gradient(var(--candle), var(--candle)) left 50% / 70px 1px no-repeat, linear-gradient(var(--candle), var(--candle)) right 50% / 70px 1px no-repeat; position: relative; }
.orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--candle); transform: translate(-50%, -50%) rotate(45deg); }
.btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; background: var(--candle); color: #1C1208; border: 1px solid var(--candle);
	outline: 1px solid var(--candle); outline-offset: 3px; text-decoration: none; font-size: 1.0625rem; letter-spacing: .03em; cursor: pointer; transition: background-color .5s, box-shadow .5s, color .5s;
}
.btn:hover { background: #F4CF80; box-shadow: 0 0 34px rgb(230 184 92 / .5); }
.btn--line { background: transparent; color: var(--wax); }
.btn--line:hover { background: rgb(230 184 92 / .12); }
.btn--wide { width: 100%; }

/* ---- The candlelight that follows you ---- */
.glow { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 1.4s; mix-blend-mode: soft-light; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 205 120 / .62), rgb(255 170 80 / .12) 48%, transparent 72%); }
.glow.is-on { opacity: 1; animation: gutter 3.6s ease-in-out infinite; }
@keyframes gutter { 0%, 100% { opacity: 1; } 22% { opacity: .84; } 38% { opacity: .97; } 61% { opacity: .78; } 78% { opacity: .94; } }

.concept { min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 4px 16px; background: var(--soot); color: var(--wax-2); font-size: .875rem; letter-spacing: .02em; position: relative; z-index: 3; }
.concept a { text-decoration: none; }
.concept a:hover { text-decoration: underline; text-underline-offset: 3px; }
.concept span[aria-hidden] { color: var(--candle); font-size: .7em; }

.mast { position: absolute; z-index: 6; left: 0; right: 0; top: 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 20px var(--side); font-size: 1rem; }
.mast a { text-decoration: none; }
.mast a:first-child { justify-self: start; }
.mast a:last-child { justify-self: end; }
.mast a:not(.mast__mark):hover { color: var(--candle); }
.mast__mark { font-style: italic; font-size: 1.35rem; line-height: 1.1; color: var(--candle); text-align: center; }
@media (max-width: 480px) { .mast { padding-top: 14px; font-size: .9375rem; } .mast__mark { font-size: 1.15rem; } }

/* ---- Hero: struck in the dark ---- */
.hero { position: relative; min-height: max(620px, calc(100svh - 32px)); display: grid; place-items: center; overflow: hidden; background: var(--soot); padding: 96px var(--side) 56px; isolation: isolate; }
.hero__img, .hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__img img { object-fit: cover; object-position: 50% 60%; }
.hero__dark { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 46%, rgb(14 10 8 / .42), rgb(14 10 8 / .5) 55%, rgb(14 10 8 / .86)); }
.js .hero__dark::after { content: ''; position: absolute; inset: 0; background: var(--soot); animation: lightsUp 2.6s .75s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes lightsUp { from { opacity: .94; } to { opacity: 0; } }
.hero__copy { max-width: 1040px; }
.hero__title em { white-space: nowrap; }
.match { width: 34px; margin: 0 auto 14px; overflow: visible; filter: drop-shadow(0 0 22px rgb(245 179 66 / .75)); }
.match__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame 2.1s ease-in-out infinite alternate; }
.js .match__flame { animation: strike .75s .25s cubic-bezier(.2, 1.7, .4, 1) both, flame 2.1s 1s ease-in-out infinite alternate; }
@keyframes strike { from { transform: scale(0); opacity: 0; } }
@keyframes flame { 0% { transform: scale(1, 1) skewX(0); } 40% { transform: scale(.94, 1.07) skewX(-2deg); } 75% { transform: scale(1.04, .95) skewX(1.5deg); } 100% { transform: scale(.97, 1.04) skewX(2deg); } }
.hero__kicker { text-shadow: 0 1px 12px #000; font-size: 1.0625rem; letter-spacing: .02em; color: var(--wax); }
.hero__kicker i, .foot i { font-style: normal; font-size: .62em; color: var(--candle); vertical-align: .16em; margin: 0 .3em; }
.hero__title { margin-top: 10px; font-weight: 400; font-size: clamp(3.5rem, min(12.6vw, 15.5vh), 9rem); text-shadow: 0 2px 30px rgb(14 10 8 / .7); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.hero__title em { display: block; }
.hero__lede { text-shadow: 0 1px 14px #000; max-width: 34em; margin: 22px auto 0; font-size: 1.1875rem; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 30px; }

/* ---- Words ---- */
.words { max-width: 880px; margin: 0 auto; padding: clamp(76px, 11vw, 150px) var(--side) clamp(50px, 7vw, 90px); }
.words p { max-width: 33em; margin: 22px auto 0; }

/* ---- Plates: catch the light as they arrive ---- */
.plates { display: grid; gap: 40px; justify-content: center; padding: 0 var(--side) clamp(60px, 9vw, 120px); }
.plate { max-width: 460px; }
.plate picture { display: block; padding: 8px; border: 1px solid var(--rule); }
.plate img { width: 100%; }
.plate figcaption { display: flex; flex-direction: column; margin-top: 14px; }
.plate figcaption em { font-size: 1.3rem; line-height: 1.2; }
.plate figcaption span { color: var(--candle); }
.js [data-catch] img { filter: brightness(.25) saturate(.7); transition: filter 2.2s ease; }
.js [data-catch].is-in img { filter: none; }
@media (min-width: 800px) { .plates { grid-template-columns: repeat(2, minmax(0, 460px)); gap: clamp(40px, 7vw, 100px); } .plate:nth-child(2) { margin-top: 90px; } }

/* ---- Book: the floor plan ---- */
.book { padding: clamp(66px, 9vw, 110px) var(--side); background: radial-gradient(90% 70% at 50% 30%, #2B0A0D, var(--soot)); }
.frame { position: relative; max-width: 960px; margin: 0 auto; padding: clamp(34px, 6vw, 70px) clamp(16px, 4vw, 60px); border: 1px solid var(--candle); outline: 1px solid var(--rule); outline-offset: -8px; }
.book__lede { margin-top: 12px; }
.pick { margin-top: 26px; }
.pick__when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick__when .field:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
.field { text-align: left; }
.field label { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--wax-2); }
.field label span { font-size: .9em; }
.field input, .field select { width: 100%; min-height: 52px; padding: 0 12px; background: var(--soot); border: 1px solid var(--rule); border-radius: 0; }
.field input::placeholder { color: #A99B7F; }
.field input[aria-invalid="true"] { border-color: var(--ember); }
.plan { margin: 20px -4px 0; }
.plan svg { width: 100%; }
.plan__label { fill: #B5A583; font-family: var(--serif); font-style: italic; font-size: 19px; }
.plan__fire { transform-box: fill-box; transform-origin: bottom; animation: flame 1.3s ease-in-out infinite alternate; }
.tbl { cursor: pointer; outline: 0; }
.tbl[aria-disabled="true"] { cursor: not-allowed; }
.tbl__pool { opacity: 0; transition: opacity .9s; transform-box: fill-box; transform-origin: center; }
.tbl__top { fill: #1E140D; stroke: #6E5A36; stroke-width: 1.5; transition: fill .6s, stroke .6s; }
.tbl__seat { fill: #2C2017; transition: fill .6s; }
.tbl__num { fill: #B5A583; font-family: var(--serif); font-size: 19px; text-anchor: middle; transition: fill .6s; }
.tbl__flame { fill: #F5B342; opacity: 0; transition: opacity .5s; transform-box: fill-box; transform-origin: bottom; }
.tbl.is-free .tbl__pool { opacity: 1; animation: gutter 3.2s var(--w, 0s) ease-in-out infinite; }
.tbl.is-free .tbl__top { fill: #3A2614; stroke: var(--candle); }
.tbl.is-free .tbl__seat { fill: #6E5A36; }
.tbl.is-free .tbl__num { fill: var(--wax); }
.tbl.is-free .tbl__flame { opacity: 1; animation: flame 1.5s var(--w, 0s) ease-in-out infinite alternate; }
.tbl.is-free:hover .tbl__top, .tbl:focus-visible .tbl__top { stroke-width: 3; }
.tbl.is-sel .tbl__top { fill: var(--candle); stroke: var(--wax); stroke-width: 3; }
.tbl.is-sel .tbl__num { fill: #1C1208; }
.tbl.is-sel .tbl__seat { fill: var(--candle); }
.plan__read { min-height: 3.4em; margin-top: 14px; font-size: 1.1875rem; line-height: 1.35; }
.plan__read b { display: block; font-weight: 400; font-style: italic; font-size: 1.5rem; color: var(--candle); }
.pick__who { display: grid; gap: 14px; margin-top: 14px; }
.pick__demo { margin-top: 18px; font-size: .9375rem; line-height: 1.45; color: var(--wax-2); }
.pick__nojs { margin-top: 16px; }
html:not(.js) .plan, html:not(.js) .plan__read, html:not(.js) .pick__when, html:not(.js) .pick__demo { display: none; }
.done { padding: 20px 0; }
.done:focus { outline: 0; }
.done__candle { width: 12px; height: 56px; margin: 0 auto 30px; background: var(--wax); position: relative; }
.done__candle::before { content: ''; position: absolute; left: 50%; top: -30px; width: 16px; height: 26px; margin-left: -8px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 70%, #FFF4C9, #F5B342 55%, #D9782D); box-shadow: 0 0 40px 12px rgb(245 179 66 / .45); animation: flame 1.6s ease-in-out infinite alternate; }
.done p { max-width: 32em; margin: 12px auto 0; }
.done .btn { margin-top: 22px; }
@media (min-width: 720px) {
	.pick__when { grid-template-columns: 1fr 1.6fr 1fr; }
	.pick__when .field:nth-child(2) { grid-column: auto; grid-row: auto; }
	.pick__who { grid-template-columns: 1fr 1fr; }
	.field--wide, .pick__who .btn { grid-column: 1 / -1; }
}

/* ---- Reviews, and the small print ---- */
.say { max-width: 820px; margin: 0 auto; padding: clamp(70px, 10vw, 130px) var(--side) 50px; }
.say blockquote { font-style: italic; font-size: clamp(1.7rem, 3.7vw, 2.6rem); line-height: 1.18; text-wrap: balance; }
.say blockquote + p { margin: 12px 0 44px; color: var(--candle); }
.say__label { font-size: .9375rem; color: var(--wax-2); }
.know { padding: 0 var(--side) clamp(60px, 8vw, 100px); }
.know dl { max-width: 1060px; margin: 0 auto; display: grid; gap: 24px; }
.know dt { font-style: italic; font-size: 1.4rem; color: var(--candle); }
@media (min-width: 800px) { .know dl { grid-template-columns: repeat(4, 1fr); gap: 34px; } }

.foot { position: relative; z-index: 1; padding: 54px var(--side) 40px; border-top: 1px solid var(--rule); }
.foot__mark { font-style: italic; font-size: clamp(2.7rem, 10vw, 7.5rem); line-height: 1.1; color: var(--candle); }
.foot p + p { margin-top: 14px; }
.foot__concept { max-width: 44em; margin-inline: auto; font-size: .9375rem; color: var(--wax-2); }

/* ---- Mobile CTA: a gold tab on the right edge ---- */
.edge { position: fixed; z-index: 20; right: 0; top: 50%; padding: 13px 7px; line-height: 1; background: var(--candle); color: #1C1208; text-decoration: none; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-size: 1.0625rem; letter-spacing: .04em; box-shadow: 0 0 26px rgb(230 184 92 / .45); transition: translate .5s, background-color .3s; }
.edge.is-away { translate: 100% 0; }
.edge.is-up { translate: 0 0; }
@media (min-width: 900px) { .edge { display: none; } }

/* ---- Demo call note ---- */
.note-call { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 16px; background: rgb(14 10 8 / .8); }
.note-call.is-open, .note-call:target { display: grid; }
.note-call__card { width: min(100%, 440px); padding: 34px 26px; background: var(--soot-2); border: 1px solid var(--candle); outline: 1px solid var(--rule); outline-offset: -7px; }
.note-call__card p + p { margin-top: 10px; }
.kick { color: var(--candle); font-style: italic; }
.note-call__title { font-size: 2rem; line-height: 1.1; }
.note-call__num { font-size: 1.6rem; color: var(--candle); }
.note-call__small { font-size: .9375rem; color: var(--wax-2); }
.note-call .btn { margin-top: 20px; }
.has-modal { overflow: hidden; }

/* ---- The menu card ---- */
.menu-page .mast { position: static; }
.card { max-width: 780px; margin: 10px auto 60px; padding: clamp(40px, 7vw, 74px) clamp(20px, 6vw, 70px); border: 1px solid var(--candle); outline: 1px solid var(--rule); outline-offset: -8px; width: calc(100% - 2 * var(--side)); background: radial-gradient(90% 40% at 50% 0, #1D120C, var(--soot)); }
.card__title { font-weight: 400; font-style: italic; font-size: clamp(4rem, 14vw, 7rem); line-height: 1; color: var(--candle); }
.card__sub { margin-top: 8px; }
.card__sub i { font-style: normal; font-size: .62em; color: var(--candle); vertical-align: .16em; margin: 0 .3em; }
.diet { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.diet button { min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--rule); cursor: pointer; transition: background-color .3s, color .3s; }
.diet button:hover { border-color: var(--candle); }
.diet button[aria-pressed="true"] { background: var(--candle); border-color: var(--candle); color: #1C1208; }
.course { margin-top: 54px; font-weight: 400; font-style: italic; font-size: 2.1rem; line-height: 1.1; color: var(--candle); }
.dishes li { margin-top: 26px; transition: opacity .5s; }
.dishes li.is-off { opacity: .34; }
.dishes h3 { font-weight: 500; font-size: 1.375rem; line-height: 1.2; }
.dishes p { color: var(--wax); }
.price { display: block; color: var(--candle); }
.alg { display: block; font-size: .9375rem; font-style: italic; color: var(--wax-2); }
.glass { min-height: 44px; margin-top: 2px; padding: 0 8px; background: none; border: 0; color: var(--wax); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; cursor: pointer; }
.glass:hover { color: var(--candle); }
.pair { max-width: 28em; margin: 0 auto; color: var(--wax); font-style: italic; }
.card__foot { margin-top: 60px; font-size: 1rem; }
.card__foot p + p { margin-top: 10px; }
.card__fict { color: var(--wax-2); }
.card__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 26px; }

@media print {
	:root { --candle: #6b5320; --wax: #000; --wax-2: #333; --rule: #999; }
	body { background: #fff; color: #000; }
	.card { background: none; margin: 0; width: 100%; outline: 0; border: 0; padding: 0; }
	.concept, .mast, .glow, .edge, .diet, .glass, .card__cta, .foot { display: none !important; }
	.pair { display: block !important; }
	.dishes li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .hero__dark::after { opacity: 0; }
	.js [data-catch] img { filter: none; }
	.tbl__flame { opacity: 0; }
	.tbl.is-free .tbl__flame, .tbl.is-free .tbl__pool { opacity: 1; }
}