/* Living menu: scoped to menu.html. Original site styles remain intact. */
.living-menu { --shell:min(1280px, 100% - 96px); --cream:#f2e8dc; --muted:#b5aba2; background:#0c0c0b; isolation:isolate; }
.living-menu .shell { width:var(--shell); }
.living-menu .demo-bar { background:#171410; border-color:#33281e; padding:6px 0; }
.living-menu .demo-bar__inner { justify-content:center; gap:12px; }
.living-menu .demo-bar__tag { background:transparent; border:1px solid #655037; color:#c6b59f; padding:0 6px; font-size:10px; border-radius:2px; }
.living-menu .demo-bar__text { font-size:11px; color:#b8aea4; }
.living-menu .masthead { background:rgba(12,12,11,.96); border-bottom:1px solid #ffffff10; }
.living-menu .masthead__inner { min-height:84px; }
.living-menu .brand__name { font-size:25px; }
.living-menu .brand__name span { color:#d7aa76; margin-top:5px; }
.living-menu .nav a { font:500 12px var(--font-body); letter-spacing:.12em; padding:12px 0; }
.living-menu .btn { border-radius:3px; box-shadow:none; font:600 12px var(--font-body); text-transform:uppercase; letter-spacing:.08em; min-height:46px; }
.living-menu .btn--fire { background:#f47832; color:#160e09; border:1px solid #f47832; }
.living-menu .btn--fire:hover { background:#ffa366; transform:translateY(-2px); }
.living-menu a:focus-visible,.living-menu button:focus-visible { outline:2px solid #ffc181; outline-offset:5px; }
.menu-scene { position:relative; padding:22px 0 0; background:radial-gradient(ellipse at 73% 44%,#5b2d151f,transparent 51%); }
.scene-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:14px; align-items:center; min-height:605px; }
.scene-copy { position:relative; z-index:3; padding:12px 0 40px; }
.scene-kicker { display:flex; align-items:center; gap:12px; color:#d3b394; font-size:11px; letter-spacing:.23em; font-weight:600; margin-bottom:24px; }
.scene-kicker span { width:27px; height:1px; background:#f47832; }
.scene-copy h1 { font-family:var(--font-display); font-size:clamp(76px,8.6vw,128px); letter-spacing:-.035em; line-height:1.03; }
.scene-copy h1 em { color:#f47832; font-style:normal; }
.scene-intro { color:#c1b7ab; font-size:15px; line-height:1.85; margin-top:25px; }
.scene-actions { display:flex; align-items:center; gap:28px; margin-top:28px; }
.scene-actions .btn { padding:16px 22px; gap:24px; }
.scene-call { text-decoration:none; font-size:12px; border-bottom:1px solid #726253; padding:9px 0; }
.scene-call span { margin-left:14px; color:#f47832; }
.scene-location { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:30px; font-size:10px; letter-spacing:.07em; color:#9e958c; }
.scene-location b { font-weight:500; color:#c8bcb0; margin-right:12px; }
.open-dot { width:5px; height:5px; border-radius:50%; background:#eaa462; box-shadow:0 0 10px #eaa46266; }
.food-stage { height:580px; position:relative; min-width:0; perspective:1100px; }
.stage-word { position:absolute; top:90px; left:15%; font:200px var(--font-display); letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px #d6ae7c13; transform:rotate(-8deg); user-select:none; }
.stage-ring { position:absolute; width:85%; aspect-ratio:1; border:1px solid #d6ae7c12; border-radius:50%; top:16px; left:8%; transform:rotateX(30deg) rotateZ(-25deg); }
.stage-ring::after { content:''; position:absolute; inset:25px; border:1px dashed #d6ae7c0b; border-radius:50%; }
.spotlight-image { position:absolute; width:83%; aspect-ratio:1; left:0; top:36px; z-index:2; transform:translate3d(var(--px,0px),var(--py,0px),0); transition:transform 1.2s ease; }
.spotlight-image::after { content:''; position:absolute; left:20%; right:16%; height:24px; bottom:22px; border-radius:50%; background:#000b; filter:blur(16px); z-index:-1; }
.spotlight-image img { width:100%; height:100%; object-fit:contain; mask-image:radial-gradient(ellipse at center,#000 54%,#000d 64%,transparent 73%); animation:plate-drift 9s ease-in-out infinite; }
.spotlight-image.is-changing img { animation:plate-enter .9s ease both; }
.satellite { position:absolute; width:34%; z-index:1; animation:plate-drift 12s ease-in-out infinite reverse; }
.satellite img { width:100%; height:auto; object-fit:contain; mask-image:radial-gradient(ellipse,#000 53%,transparent 74%); }
.satellite span { display:block; text-align:center; font-family:var(--font-cond); font-size:13px; color:#c4b29f; margin-top:-4px; }
.satellite b { color:#e4cbb4; font-weight:400; margin-left:6px; }
.satellite--top { right:-2%; top:-5px; transform:rotate(8deg); }
.satellite--bottom { left:-9%; bottom:15px; width:30%; animation-delay:-5s; }
.spotlight-label { position:absolute; width:64%; right:1%; bottom:0; padding:20px 22px 16px; z-index:3; background:linear-gradient(120deg,#282018ed,#141311f5); border:1px solid #94745542; border-top-color:#cf8a5659; box-shadow:0 20px 55px #0005; }
.spotlight-overline { display:flex; justify-content:space-between; gap:8px; font-size:9px; letter-spacing:.17em; color:#d09b71; margin-bottom:12px; }
.spotlight-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.spotlight-heading h2 { font-family:var(--font-cond); font-size:32px; line-height:1.02; }
#spotlight-price { font:500 20px var(--font-cond); color:#ffac72; white-space:nowrap; }
#spotlight-note { font-size:11px; line-height:1.65; color:#bdb0a3; margin-top:10px; min-height:37px; }
#spotlight-link { display:flex; justify-content:space-between; text-decoration:none; margin-top:12px; border-top:1px solid #ffffff12; padding-top:10px; font-size:10px; color:#e5c3a6; }
.feature-footer { display:flex; align-items:center; justify-content:space-between; margin-top:26px; margin-bottom:15px; font-size:9px; letter-spacing:.2em; color:#a69b90; }
#motion-toggle { border:0; color:#b8a897; background:transparent; cursor:pointer; font-size:10px; letter-spacing:.05em; min-height:36px; padding:6px; }
#motion-toggle span { color:#edb787; margin-right:5px; }
.feature-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid #ffffff15; border-bottom:1px solid #ffffff15; }
.feature-choice { position:relative; display:flex; align-items:center; gap:10px; text-decoration:none; min-height:80px; padding:14px 14px; transition:background .4s,color .4s; border-right:1px solid #ffffff0d; }
.feature-choice:first-child { border-left:1px solid #ffffff0d; }
.feature-choice::before { content:''; position:absolute; top:-1px; height:2px; left:0; right:0; background:#f47832; transform:scaleX(0); transform-origin:left; transition:transform .5s; }
.feature-choice.is-selected::before,.feature-choice:hover::before { transform:scaleX(1); }
.feature-choice.is-selected { background:linear-gradient(#ee8a3013,transparent); }
.feature-number { font-size:10px; color:#8e7f71; }
.feature-choice>span:nth-child(2) { font-family:var(--font-cond); font-size:17px; line-height:1.1; }
.feature-choice small { display:block; font:10px var(--font-body); color:#b6a597; margin-top:8px; }
.feature-arrow { margin-left:auto; color:#bc885c; font-size:14px; }
.menu-divider { display:flex; justify-content:space-between; padding-top:64px; padding-bottom:20px; font-size:10px; letter-spacing:.17em; color:#c7b096; }
.menu-divider span:last-child { color:#968b80; font-size:9px; }
.living-menu .menu-nav { top:84px; background:#11110ff5; backdrop-filter:blur(12px); z-index:20; border-top:1px solid #ffffff12; border-bottom:1px solid #ffffff12; }
.living-menu .menu-nav__scroll { gap:8px; padding-block:11px; }
.living-menu .menu-nav a { border:0; border-radius:2px; font:12px var(--font-body); letter-spacing:.01em; text-transform:none; padding:13px 20px; color:#c3b5a8; }
.living-menu .menu-nav a span { font-size:9px; margin-right:8px; color:#a8886e; }
.living-menu .menu-nav a.is-active { color:#16110b; background:#efa16a; }
.living-menu .menu-nav a.is-active span { color:#60452d; }
.living-menu .menu-nav a:hover { background:#35271d; color:#fff; }
.living-menu .course { padding:58px 0; scroll-margin-top:155px; }
.living-menu .plate[id] { scroll-margin-top:170px; }
#full-menu { scroll-margin-top:85px; }
.living-menu .course__head { margin-bottom:30px; align-items:end; }
.living-menu .course__title { text-transform:uppercase; font-size:44px; letter-spacing:-.015em; }
.living-menu .course__note { font:12px var(--font-body); letter-spacing:0; text-transform:none; color:#aa9887; }
.living-menu .plates { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.living-menu .plates--pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.living-menu .plate { border-radius:3px; border:1px solid #c6a17924; background:linear-gradient(135deg,#1d1a16ed,#121211f7); position:relative; }
.living-menu .plate::after { content:''; pointer-events:none; position:absolute; inset:0; background:linear-gradient(120deg,transparent 35%,#ffb37705 48%,transparent 61%); opacity:0; transition:opacity .6s; }
.living-menu .plate:hover::after { opacity:1; }
.living-menu .plate:hover { transform:translateY(-4px); border-color:#ab764b66; box-shadow:0 18px 35px #0004; }
.living-menu .plate__media { aspect-ratio:1.25; padding:8px; }
.living-menu .plate__media img { object-fit:contain; transform:none; mask-image:radial-gradient(ellipse,#000 58%,#000e 67%,transparent 80%); }
.living-menu .plate:hover .plate__media img { transform:translateY(-3px); }
.living-menu .plates--pair .plate { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; }
.living-menu .plates--pair .plate__media { aspect-ratio:1; padding:5px; }
.living-menu .plate__body { padding:8px 22px 24px; }
.living-menu .plates--pair .plate__body { padding:22px 20px 22px 5px; }
.living-menu .plate__row { align-items:start; flex-wrap:wrap; gap:8px; }
.living-menu .plate__name { font-size:24px; text-transform:none; letter-spacing:0; }
.living-menu .price { background:none; border:0; padding:0; color:#efad79; font:500 20px var(--font-cond); white-space:nowrap; }
.living-menu .plate__note { font-size:12px; margin-top:9px; color:#b5a99c; }
.living-menu .tag { left:14px; top:14px; border-radius:2px; background:#191511e8; color:#e7b687; border:1px solid #7d583640; font:9px var(--font-body); letter-spacing:.06em; padding:5px 8px; z-index:1; }
.living-menu .side { background:#171613ed; border-radius:3px; border-color:#c6a17924; }
.living-menu .side img { object-fit:contain; mask-image:radial-gradient(ellipse,#000 53%,transparent 77%); }
.living-menu .list { column-gap:65px; }
.living-menu .list li { border-color:#ffffff10; padding:15px 0; }
.living-menu .list__price { color:#efad79; }
.living-menu .callout { border-color:#66503c55; background:#191612e8; font-size:12px; border-radius:3px; }
.living-menu .footer { position:relative; background:#0e0e0df2; border-top:1px solid #ffffff12; }
.living-menu .reveal { opacity:1; transform:none; }
.living-menu.motion-ready .reveal { animation:menu-reveal .8s both; animation-play-state:paused; }
.living-menu.motion-ready .reveal.is-in { animation-play-state:running; }
.hearth { position:fixed; bottom:0; left:0; right:0; height:240px; z-index:-1; pointer-events:none; overflow:hidden; }
#hearth-fire { width:100%; height:100%; opacity:.7; }
.hearth-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 130%,#a4390d40,transparent 68%); mix-blend-mode:screen; }
.living-menu.motion-paused *, .living-menu.page-hidden * { animation-play-state:paused!important; }
@keyframes plate-drift { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(.7deg); } }
@keyframes plate-enter { from { opacity:0; transform:translateY(18px) scale(.965); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes menu-reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1600px) { .scene-grid { min-height:660px; } }
@media(max-width:1100px) { .living-menu { --shell:min(1280px,100% - 56px); } .scene-grid { min-height:560px; } .food-stage { height:520px; } .scene-copy h1 { font-size:94px; } .spotlight-label { width:74%; padding:17px; } .spotlight-heading h2 { font-size:28px; } .satellite--bottom { left:-4%; bottom:65px; } .feature-choice { padding:13px 10px; gap:8px; } .feature-arrow { display:none; } .feature-choice>span:nth-child(2) { font-size:16px; } .scene-actions { gap:20px; } .living-menu .menu-nav a { padding:13px 15px; } }
@media(max-width:900px) { .living-menu .masthead__inner { min-height:72px; } .living-menu .menu-nav { top:72px; } .living-menu .nav { visibility:hidden; padding:90px 28px 28px; } .living-menu .nav.is-open { visibility:visible; } .living-menu .nav a { padding:16px 0; font-size:16px; } .scene-copy h1 { font-size:82px; } .scene-actions { flex-wrap:wrap; gap:10px 22px; } .food-stage { height:480px; } .spotlight-label { width:86%; right:0; } .satellite--bottom { display:none; } .spotlight-image { width:100%; top:34px; } .living-menu .plates { grid-template-columns:repeat(2,minmax(0,1fr)); } .living-menu .plates--pair .plate { display:block; } .living-menu .plates--pair .plate__media { aspect-ratio:1.35; } .living-menu .plates--pair .plate__body { padding:8px 22px 24px; } .feature-picker { grid-template-columns:repeat(3,1fr); } .feature-choice:nth-child(-n+3) { border-bottom:1px solid #ffffff12; } .menu-divider { padding-top:40px; } }
@media(max-width:600px) { .living-menu { --shell:calc(100% - 36px); } .living-menu .demo-bar__inner { gap:8px; } .living-menu .demo-bar__text { font-size:9px; } .living-menu .demo-bar__tag { font-size:9px; } .living-menu .masthead__inner { min-height:68px; } .living-menu .brand__name { font-size:22px; } .living-menu .brand__mark { width:28px; } .living-menu .menu-nav { top:68px; } .scene-grid { display:flex; flex-direction:column; gap:0; } .menu-scene { padding-top:32px; } .scene-copy { width:100%; padding:0; } .scene-kicker { font-size:9px; letter-spacing:.18em; margin-bottom:19px; } .scene-copy h1 { font-size:clamp(65px,17vw,100px); line-height:1.06; } .scene-copy h1 br { display:none; } .scene-copy h1 { max-width:6ch; } .scene-intro { font-size:12px; margin-top:19px; line-height:1.8; } .scene-actions { margin-top:23px; gap:20px; } .scene-actions .btn { padding:14px; font-size:10px; gap:15px; } .scene-call { font-size:11px; } .scene-call span { margin-left:7px; } .scene-location { margin-top:22px; font-size:8px; } .scene-location b { margin-right:5px; } .food-stage { width:100%; height:460px; margin-top:8px; } .spotlight-image { left:-3%; top:20px; width:95%; } .satellite--top { top:0; right:-1%; width:32%; } .satellite span { display:none; } .stage-word { font-size:140px; top:70px; left:16%; } .stage-ring { top:35px; } .spotlight-label { width:85%; right:0; bottom:0; padding:16px; } .spotlight-heading h2 { font-size:29px; } #spotlight-note { font-size:11px; } .feature-footer { margin-top:25px; font-size:8px; letter-spacing:.13em; margin-bottom:8px; } #motion-toggle { font-size:9px; } .feature-choice { min-height:78px; padding:12px 6px; gap:5px; } .feature-number { display:none; } .feature-choice>span:nth-child(2) { font-size:16px; } .feature-choice small { font-size:9px; } .menu-divider span:last-child { display:none; } .menu-divider { padding-top:35px; font-size:9px; } .living-menu .menu-nav__scroll { gap:3px; padding-block:8px; } .living-menu .menu-nav a { font-size:11px; padding:12px 14px; } .living-menu .course { padding:38px 0; } .living-menu .course__head { display:block; } .living-menu .course__title { font-size:37px; } .living-menu .course__note { margin-top:12px; font-size:11px; } .living-menu .plates { grid-template-columns:1fr; gap:18px; } .living-menu .plate__media { aspect-ratio:1.25; } .living-menu .plates--pair .plate__media { aspect-ratio:1.25; } .living-menu .plate__name { font-size:25px; } .living-menu .plate__note { font-size:13px; } .living-menu .sides-strip { grid-template-columns:1fr; } .living-menu .side { display:flex; align-items:center; padding:8px; gap:12px; } .living-menu .side img { width:110px; height:100px; } .living-menu .side h3 { margin:0; } .hearth { height:160px; } .living-menu .footer { padding-bottom:25px; } }
@media(max-width:350px) { .scene-copy h1 { font-size:62px; } .scene-kicker { font-size:8px; } .scene-actions { gap:14px; } .scene-actions .btn { font-size:9px; padding:13px 10px; } .food-stage { height:415px; } .spotlight-label { width:93%; } .spotlight-heading h2 { font-size:26px; } .feature-choice>span:nth-child(2) { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .living-menu *, .living-menu *::before,.living-menu *::after { animation:none!important; transition:none!important; } .spotlight-image { transform:none!important; } .hearth canvas { display:none; } }
@media print { .menu-scene,.hearth,.menu-divider,.demo-bar { display:none!important; } .living-menu .plate { break-inside:avoid; } .living-menu .reveal { animation:none!important; opacity:1!important; } }
.scene-away * { animation-play-state:paused!important; }
@media(max-width:900px) { .living-menu:not(.menu-enhanced) .nav { position:static; transform:none; visibility:visible; padding:0; flex-direction:row; flex-wrap:wrap; gap:8px 14px; background:none; border:0; } .living-menu:not(.menu-enhanced) .masthead__inner { flex-wrap:wrap; padding-block:10px; } .living-menu:not(.menu-enhanced) .nav a { font-size:11px; padding:5px 0; } .living-menu:not(.menu-enhanced) .nav-toggle { display:none; } }
/* Final framing and compact preview notice. */
.living-menu .demo-bar__inner { padding:3px 0; flex-direction:row; align-items:center; }
.menu-scene { overflow:clip; }
.feature-choice { background:#14120ff0; }
.feature-choice.is-selected { background:linear-gradient(#302013f5,#17130ff5); }
#hearth-fire { opacity:.42; }
@media(min-width:901px) { .spotlight-image { width:72%; top:5px; left:1%; } .satellite--bottom { left:-5%; bottom:55px; width:28%; } }
@media(max-width:600px) { .scene-copy h1 { max-width:none; font-size:clamp(57px,16.5vw,80px); } .scene-copy h1 br { display:block; } .food-stage { height:445px; } .spotlight-image { width:91%; top:0; left:0; } .spotlight-label { bottom:0; } .living-menu .demo-bar__inner { gap:8px; } .living-menu .demo-bar__text { font-size:9px; } }
@media(max-width:350px) { .scene-copy h1 { font-size:56px; } .food-stage { height:402px; } }
.living-menu .course { scroll-margin-top:60px; }
.living-menu .plate[id] { scroll-margin-top:70px; }
#full-menu { scroll-margin-top:0; }
.dish-steam { display:none; position:absolute; left:42%; top:9%; width:16%; height:35%; z-index:3; pointer-events:none; background:radial-gradient(ellipse,#e4d3bd14,transparent 65%); filter:blur(8px); transform-origin:bottom; }
.has-steam .dish-steam { display:block; animation:steam-rise 7s ease-in-out infinite; }
@keyframes steam-rise { 0%,100% { opacity:0; transform:translateY(9px) scaleX(.6) rotate(-6deg); } 45% { opacity:.8; } 80% { opacity:0; transform:translateY(-20px) scaleX(1.3) rotate(7deg); } }
.menu-scene::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 40%,#c7986908 49%,transparent 58%); opacity:0; animation:light-pass 28s ease-in-out infinite; }
@keyframes light-pass { 0%,75%,100% { opacity:0; transform:translateX(-25%); } 84% { opacity:1; } 95% { opacity:0; transform:translateX(30%); } }
@media(prefers-reduced-motion:reduce) { .dish-steam,.menu-scene::after { display:none; } }
.spotlight-image img,.satellite img,.living-menu .plate__media img,.living-menu .side img {
 mask-image:radial-gradient(ellipse at center,#000 64%,transparent 80%);
 mask-composite:add;
}
@media(min-width:901px) { .spotlight-image { width:70%; } .satellite--bottom { left:-5%; bottom:0; width:24%; } .spotlight-image.is-wide { width:90%; top:-30px; left:-4%; } }

.spotlight-image img[src*="/griyo-"],.living-menu .plate__media img[src*="/griyo-"] { mask-image:none; }
@media(min-width:901px) { .spotlight-image { top:-25px; } }
@media(max-width:600px) { .spotlight-image { width:78%; top:0; left:0; } }
.satellite { z-index:3; }
.spotlight-label { z-index:4; }
@media(min-width:901px) { .spotlight-image.is-wide { top:-48px; } }

/* ---------- 2026-09-15: real photography pass ---------- */
/* One-card row keeps the horizontal plate layout at full width. */
.living-menu .plates--solo { grid-template-columns:minmax(0,1fr); }
.living-menu .plates--solo .plate { grid-template-columns:340px minmax(0,1fr); }
@media(max-width:900px) { .living-menu .plates--solo .plate { display:block; } }

/* Kreyòl / French second name under a plate title. */
.living-menu .plate__alt {
 margin:6px 0 0; font:400 12px var(--font-cond); letter-spacing:.14em;
 text-transform:uppercase; color:#d09b71;
}

/* Items with no photo reuse the bar-row treatment. */
.living-menu .list--extra { margin-top:26px; }
.living-menu .list--extra .list__name small { margin-top:3px; }

/* Friday special card. */
.living-menu .special {
 border-radius:3px; border:1px solid #c6a17924;
 background:linear-gradient(135deg,#1d1a16ed,#121211f7);
 grid-template-columns:230px minmax(0,1fr); padding:18px; gap:24px;
}
.living-menu .special__slot { border-radius:3px; border:1px dashed #c6a17945; }
.living-menu .special__tag {
 border-radius:2px; background:#191511e8; color:#e7b687; border:1px solid #7d583640;
 font:9px var(--font-body); letter-spacing:.06em; padding:5px 8px; text-transform:uppercase;
}
.living-menu .special__name {
 font-family:var(--font-cond); font-size:30px; font-weight:500;
 letter-spacing:0; text-transform:none; margin-top:14px;
}
.living-menu .special__name span { font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.living-menu .special__note { font-size:12px; color:#b5a99c; margin:10px 0 18px; }
@media(max-width:680px) {
 .living-menu .special { grid-template-columns:1fr; }
 .living-menu .special__name { font-size:26px; }
}
.living-menu .plates--solo .plate__note,
.living-menu .plates--solo .plate__alt { max-width:52ch; }
/* Size ladder in a price slot (Jumbo Wings) must wrap instead of overflowing. */
.living-menu .price--ladder { white-space:normal; font-size:17px; text-align:right; }
.living-menu .special__slot.has-photo { border-style:solid; border-color:#c6a17924; }
