* { box-sizing: border-box; }
html { background: var(--color-surface-void); scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: clip; color: var(--color-ink-ash); background: var(--color-surface-void); font-family: var(--font-body); font-size: clamp(var(--text-base), 1.15vw, var(--text-lg)); line-height: 1.6; }
button, input, select { font: inherit; }
a { color: inherit; }
:focus-visible { outline: var(--focus-width) solid var(--color-accent-ember); outline-offset: var(--focus-offset); }
.section-shell { width: min(100%, var(--content-max)); margin-inline: auto; padding-inline: var(--space-page); }
.grain { position: fixed; z-index: 10; inset: 0; pointer-events: none; opacity: var(--opacity-grain); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E"); }
main, .site-footer { position: relative; z-index: 1; }
.hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding-block: var(--space-16); padding-inline: var(--space-page); isolation: isolate; overflow: clip; }
.hero::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: radial-gradient(118% 132% at 7% 44%, color-mix(in srgb, var(--color-surface-void) 90%, var(--color-transparent)) 0%, color-mix(in srgb, var(--color-surface-void) 74%, var(--color-transparent)) 23%, color-mix(in srgb, var(--color-surface-void) 34%, var(--color-transparent)) 45%, var(--color-transparent) 63%); }
#ember-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hero-table { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(88vw, var(--hero-scene-max)); transform: translate(-50%, -46%); color: var(--color-line-brass); opacity: var(--opacity-table-static); filter: drop-shadow(0 0 var(--space-8) color-mix(in srgb, var(--color-accent-kor) 24%, var(--color-transparent))); }
.hero-table svg { display: block; width: 100%; overflow: visible; }
.table-halo ellipse { fill: color-mix(in srgb, var(--color-surface-ember-glow) 72%, var(--color-transparent)); stroke: var(--color-line-brass); stroke-width: var(--line-hair); }
.table-lines, .tasting-plate, .grill, .table-sparks { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--line-hair); }
.table-lines { opacity: var(--opacity-muted); }
.grill-rim { fill: color-mix(in srgb, var(--color-surface-charcoal) 74%, var(--color-transparent)); stroke-width: calc(var(--line-hair) * 2); }
.grill-line { stroke: var(--color-line-brass); opacity: var(--opacity-muted); }
.coals circle { fill: var(--color-accent-ember); stroke: var(--color-flame-core); opacity: .82; filter: drop-shadow(0 0 var(--space-3) var(--color-accent-ember)) drop-shadow(0 0 var(--space-6) color-mix(in srgb, var(--color-accent-kor) 70%, var(--color-transparent))); }
.tasting-plate, .table-sparks { opacity: .42; transition: opacity var(--motion-base) var(--ease-settle), filter var(--motion-base) var(--ease-settle), color var(--motion-base) var(--ease-settle); }
.hero-table .is-warm { color: var(--color-accent-ember); opacity: 1; filter: drop-shadow(0 0 var(--space-5) color-mix(in srgb, var(--color-flame-core) 60%, var(--color-transparent))); }
html[data-render-mode="canvas2d"] .hero-table { opacity: 1; mask-image: radial-gradient(circle at var(--light-x, 58%) var(--light-y, 58%), var(--color-surface-void) 0, var(--color-surface-void) 30%, color-mix(in srgb, var(--color-surface-void) 55%, var(--color-transparent)) 66%, color-mix(in srgb, var(--color-surface-void) 30%, var(--color-transparent)) 100%); }
html[data-render-mode="canvas2d"] .hero-table .coals circle { animation: coal-pulse var(--motion-coal) ease-in-out infinite alternate; }
@keyframes coal-pulse { from { opacity: .6; } to { opacity: .95; } }
.hero-copy { position: relative; z-index: 4; max-width: 49rem; padding: var(--space-8); }
.scrim { position: relative; }
.eyebrow, .detail-no, .trust-line, .ember-instruction, .scroll-cue, .field label, .field-error, .form-status { margin: 0; color: var(--color-ink-smoke); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .16em; text-transform: uppercase; }
.wordmark { margin: var(--space-3) 0 var(--space-4); color: var(--color-accent-ember); font-family: var(--font-display); font-size: clamp(var(--text-mark-min), 5vw, var(--text-mark-max)); line-height: 1; letter-spacing: .16em; text-shadow: 0 0 var(--space-12) color-mix(in srgb, var(--color-accent-ember) 45%, var(--color-transparent)); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { margin-top: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; }
h1 { max-width: 52rem; margin-bottom: var(--space-6); font-size: clamp(var(--text-hero-min), 6.6vw, var(--text-hero-max)); }
h2 { font-size: clamp(var(--text-heading-min), 4.2vw, var(--text-heading-max)); }
h3 { margin-bottom: var(--space-3); font-size: clamp(var(--text-subheading-min), 2.3vw, var(--text-subheading-max)); }
.lede { max-width: 42rem; margin: 0; color: var(--color-ink-ash); }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-8); }
.button { min-height: var(--control-min-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: var(--line-hair) solid var(--color-transparent); border-radius: var(--radius-round); padding: var(--space-3) var(--space-6); text-decoration: none; cursor: pointer; transition: transform var(--motion-fast) var(--ease-settle), box-shadow var(--motion-fast) var(--ease-settle); }
.button:hover { transform: translateY(calc(var(--line-hair) * -1)); box-shadow: var(--shadow-ember); }
.button-primary { color: var(--color-accent-contrast); background: var(--color-accent-ember); font-weight: 750; }
.text-link { min-height: var(--control-min-height); display: inline-flex; align-items: center; color: var(--color-ink-ash); text-decoration-color: var(--color-line-brass); text-underline-offset: var(--space-2); }
.text-link:hover { color: var(--color-accent-ember); }
.trust-line { max-width: 62rem; margin-top: var(--space-8); line-height: 1.8; letter-spacing: .08em; text-transform: none; }
.ember-instruction { position: absolute; z-index: 4; right: var(--space-page); bottom: var(--space-8); max-width: 22rem; text-align: right; letter-spacing: .08em; text-transform: none; }
.story { min-height: 300svh; }
.story-stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-void) 38%, var(--color-transparent)), color-mix(in srgb, var(--color-surface-charcoal) 40%, var(--color-transparent))); }
.story-layout { width: 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(18rem, 1.1fr); gap: clamp(var(--space-8), 9vw, var(--space-32)); align-items: center; }
.story-copy { max-width: 35rem; padding: var(--space-6); }
.story-copy h2 { margin-bottom: var(--space-4); }
.story-copy p:last-child { margin-bottom: 0; color: var(--color-ink-smoke); }
.menu-panel { padding: clamp(var(--space-5), 4vw, var(--space-12)); border: var(--line-hair) solid color-mix(in srgb, var(--color-line-brass) 68%, var(--color-transparent)); box-shadow: var(--shadow-deep); }
.menu-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--line-hair) solid var(--color-line-brass); }
.menu-heading h2 { margin: 0; font-size: clamp(var(--text-menu-title-min), 3vw, var(--text-menu-title-max)); }
.menu-list { list-style: none; padding: 0; margin: 0; }
.course { display: grid; grid-template-columns: 3.6rem 3.7rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding-block: var(--space-4); border-bottom: var(--line-hair) solid color-mix(in srgb, var(--color-line-brass) 54%, var(--color-transparent)); opacity: var(--opacity-muted); transform: translateY(var(--space-2)); transition: opacity var(--motion-base) var(--ease-settle), transform var(--motion-base) var(--ease-settle), color var(--motion-base) var(--ease-settle); }
.course:last-child { border-bottom: 0; }
.course.firelit, .course.is-tasted { opacity: 1; transform: translateY(0); color: var(--color-ink-ash); }
.course-no, .course-allergen { color: var(--color-ink-smoke); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .08em; }
.course-name { margin: 0; font-family: var(--font-display); font-size: var(--text-course); line-height: 1.1; }
.course-description { grid-column: 3 / 5; margin: 0; color: var(--color-ink-smoke); font-size: .9em; }
.course-allergen { align-self: start; text-align: right; }
.dish-svg { grid-row: span 2; width: var(--space-12); height: var(--space-12); color: var(--color-line-brass); overflow: visible; }
.dish-outline { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--line-hair); stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset var(--motion-base) var(--ease-settle), color var(--motion-base) var(--ease-settle); }
.dish-fill { fill: var(--color-accent-ember); opacity: 0; transition: opacity var(--motion-base) var(--ease-settle); }
.course.firelit .dish-outline, .course.is-tasted .dish-outline { color: var(--color-flame-core); stroke-dashoffset: 0; }
.course.firelit .dish-fill, .course.is-tasted .dish-fill { opacity: .74; }
.scroll-cue { position: absolute; bottom: var(--space-5); left: 50%; display: flex; align-items: center; gap: var(--space-3); transform: translateX(-50%); white-space: nowrap; font-size: var(--text-cue); }
.scroll-cue span { width: var(--space-10); height: var(--line-hair); background: var(--color-accent-ember); }
.details, .reservation { padding-block: clamp(var(--space-20), 13vw, var(--space-32)); }
.details { border-top: var(--line-hair) solid color-mix(in srgb, var(--color-line-brass) 60%, var(--color-transparent)); }
.details-intro { max-width: 49rem; padding: var(--space-6); }
.details-intro h2 { margin-bottom: 0; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
.details-grid article { min-height: 15rem; padding: var(--space-6); border-top: var(--line-hair) solid var(--color-line-brass); background: color-mix(in srgb, var(--color-surface-charcoal) 72%, var(--color-transparent)); }
.details-grid p:last-child, .reservation-copy p:last-child { color: var(--color-ink-smoke); }
.reservation { display: grid; grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr); gap: clamp(var(--space-8), 9vw, var(--space-24)); border-top: var(--line-hair) solid color-mix(in srgb, var(--color-line-brass) 60%, var(--color-transparent)); }
.reservation-copy, .reservation-form { padding: var(--space-6); }
.reservation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-content: start; }
.field { min-width: 0; display: grid; gap: var(--space-2); }
.field-wide, .form-status { grid-column: 1 / -1; }
.field label { color: var(--color-ink-ash); letter-spacing: .08em; text-transform: none; }
.field-error { min-height: var(--space-4); color: var(--color-ink-ash); letter-spacing: .04em; text-transform: none; }
.field input, .field select { width: 100%; min-height: var(--control-min-height); border: var(--line-hair) solid var(--color-line-brass); border-radius: var(--radius-sm); padding-inline: var(--space-3); color: var(--color-ink-ash); background: color-mix(in srgb, var(--color-surface-void) 75%, var(--color-transparent)); }
.field input:focus, .field select:focus { border-color: var(--color-accent-ember); outline: 0; }
.field-submit { align-self: end; }
.form-status { min-height: var(--space-4); color: var(--color-ink-ash); letter-spacing: .04em; text-transform: none; }
.form-status.is-confirmed::before { content: "✦"; margin-right: var(--space-2); color: var(--color-flame-core); }
.button.is-lit { box-shadow: 0 0 var(--space-12) color-mix(in srgb, var(--color-flame-core) 70%, var(--color-transparent)); }
.site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding-block: var(--space-8); border-top: var(--line-hair) solid var(--color-line-brass); color: var(--color-ink-smoke); font-size: var(--text-footer); }
.footer-mark { margin: 0; font-size: var(--text-footer-mark); text-decoration: none; }
html.js-motion .reveal-ready { opacity: 0; transform: translateY(var(--space-4)); }
html.js-motion .reveal-ready.is-visible { opacity: 1; transform: translateY(0); transition: opacity var(--motion-base) var(--ease-settle), transform var(--motion-base) var(--ease-settle); }
@media (max-width: 48rem) {
  .hero { align-content: end; padding-bottom: var(--space-20); }
  .hero-table { width: min(125vw, var(--hero-scene-max)); top: 43%; transform: translate(-50%, -50%); }
  .hero-copy { padding: var(--space-5); }
  .ember-instruction { right: var(--space-page); bottom: var(--space-4); }
  .story-layout, .reservation { grid-template-columns: 1fr; gap: var(--space-6); }
  .story-stage { align-items: start; padding-block: var(--space-16); }
  .story-copy { max-width: 31rem; }
  .menu-panel { padding: var(--space-5); }
  .course { grid-template-columns: 2.5rem 3rem minmax(0, 1fr); }
  .course-allergen { display: none; }
  .course-description { grid-column: 3; }
  .dish-svg { width: var(--space-10); height: var(--space-10); }
  .details-grid { grid-template-columns: 1fr; }
  .details-grid article { min-height: auto; }
  .site-footer { grid-template-columns: 1fr; }
  .reservation-form { grid-template-columns: 1fr; }
  .field-wide, .form-status { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #ember-canvas { display: none; }
  .hero-table { opacity: var(--opacity-table-static); mask-image: none; }
  .course { opacity: 1; transform: none; }
  .dish-outline { stroke-dashoffset: 0; color: var(--color-flame-core); }
  .dish-fill { opacity: .74; }
  .scroll-cue, .ember-instruction { display: none; }
}