:root { --emerald:#103c32; --forest:#183f35; --ivory:#f7f2e8; --paper:#fffdf8; --gold:#b79a5d; --charcoal:#222823; --muted:#677169; --line:rgba(16,60,50,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ivory); }
body { margin:0; background:var(--ivory); color:var(--charcoal); font-family:Arial,Helvetica,sans-serif; }
body::selection { background:rgba(183,154,93,.35); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
a { color:inherit; }
.section-shell { width:min(100% - 40px,760px); margin-inline:auto; }
.eyebrow { margin-bottom:14px; color:var(--emerald); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow.light { color:rgba(247,242,232,.75); }
.eyebrow.gold { color:var(--gold); }

.hero { min-height:94svh; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:72px 26px 86px; background:var(--emerald); color:var(--ivory); text-align:center; }
.hero::after { content:""; position:absolute; inset:16px; border:1px solid rgba(183,154,93,.48); pointer-events:none; }
.hero-orbit { position:absolute; border:1px solid rgba(183,154,93,.35); border-radius:50%; pointer-events:none; }
.orbit-one { width:420px; height:700px; top:-220px; right:-250px; transform:rotate(24deg); }
.orbit-two { width:330px; height:560px; bottom:-270px; left:-220px; transform:rotate(-30deg); }
.monogram { margin-bottom:28px; color:rgba(247,242,232,.13); font-family:Georgia,serif; font-size:clamp(72px,25vw,122px); line-height:.8; letter-spacing:-.09em; }
.monogram span,.hero h1 span,.footer-monogram span { color:var(--gold); font-size:.62em; font-style:italic; }
.hero h1 { max-width:540px; margin-bottom:18px; font-size:clamp(48px,14vw,80px); line-height:.98; letter-spacing:-.035em; }
.hero-copy { margin-bottom:42px; color:rgba(247,242,232,.78); font-family:Georgia,serif; font-size:18px; font-style:italic; }
.hero-action { position:relative; z-index:1; display:inline-flex; gap:18px; align-items:center; border-bottom:1px solid var(--gold); padding:8px 0; color:var(--ivory); font-size:12px; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.hero-action span { color:var(--gold); font-size:18px; }

.quick-nav { position:sticky; z-index:20; top:0; display:flex; gap:6px; overflow-x:auto; padding:12px 14px; background:rgba(247,242,232,.92); border-bottom:1px solid rgba(16,60,50,.1); backdrop-filter:blur(16px); scrollbar-width:none; }
.quick-nav::-webkit-scrollbar { display:none; }
.quick-nav a { flex:1 0 auto; padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:var(--emerald); font-size:11px; font-weight:700; letter-spacing:.07em; text-align:center; text-decoration:none; text-transform:uppercase; }

.welcome,.bar-section,.comfort { padding-block:88px; }
.welcome h2,.bar-section>h2,.comfort>h2,.menu-section h2,.experience-section h2 { max-width:650px; margin-bottom:24px; color:var(--emerald); font-size:clamp(35px,9vw,54px); line-height:1.05; letter-spacing:-.025em; }
.welcome>p:not(.eyebrow),.section-intro { max-width:590px; color:var(--muted); font-family:Georgia,serif; font-size:18px; line-height:1.7; }
.menu-section,.experience-section { padding-block:88px; background:#eee7da; }
.demo-notice { margin:34px 0 46px; padding:20px; border:1px solid rgba(183,154,93,.62); background:rgba(255,253,248,.66); }
.demo-notice span { display:inline-block; margin-bottom:10px; color:var(--emerald); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.demo-notice p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.demo-notice strong { color:var(--emerald); }
.menu-journey { position:relative; display:grid; gap:0; margin:0; padding:0; list-style:none; }
.menu-journey::before { content:""; position:absolute; top:12px; bottom:12px; left:22px; width:1px; background:linear-gradient(var(--gold),rgba(183,154,93,.2)); }
.menu-journey li { position:relative; display:grid; grid-template-columns:46px 1fr; gap:22px; padding:0 0 38px; }
.menu-journey li:last-child { padding-bottom:0; }
.course-number { position:relative; z-index:1; display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--gold); border-radius:50%; background:#eee7da; color:var(--emerald); font-family:Georgia,serif; font-size:12px; }
.menu-journey small { display:block; margin:3px 0 8px; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.menu-journey h3 { margin-bottom:8px; color:var(--emerald); font-size:25px; }
.menu-journey p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }

.section-intro { margin-bottom:38px; }
.special-pours { display:grid; gap:12px; margin-bottom:34px; }
.special-pours article { position:relative; overflow:hidden; padding:28px 24px; background:var(--emerald); color:var(--ivory); }
.special-pours article::after { content:""; position:absolute; width:170px; height:250px; top:-150px; right:-90px; border:1px solid rgba(183,154,93,.45); border-radius:50%; transform:rotate(28deg); }
.mini-label { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.special-pours h3 { margin:12px 0 8px; font-size:27px; }
.special-pours p { margin:0; color:rgba(247,242,232,.72); font-size:14px; line-height:1.5; }

.cocktail-game { position:relative; overflow:hidden; margin:46px 0 42px; padding:30px 22px; background:var(--emerald); color:var(--ivory); text-align:center; }
.cocktail-game::before { content:""; position:absolute; inset:10px; border:1px solid rgba(183,154,93,.32); pointer-events:none; }
.game-heading,.game-category,.card-deck,.shuffle-button,.game-status { position:relative; z-index:1; }
.game-heading h3 { margin:10px 0 10px; font-size:34px; }
.game-heading p { max-width:470px; margin:0 auto 24px; color:rgba(247,242,232,.7); font-family:Georgia,serif; font-size:15px; line-height:1.55; }
.game-category { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:430px; margin:0 auto 30px; }
.game-category button { min-height:48px; padding:12px; border:1px solid rgba(183,154,93,.58); background:transparent; color:var(--ivory); cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.game-category button[aria-pressed="true"] { border-color:var(--gold); background:var(--gold); color:var(--emerald); }
.game-category button:focus-visible,.shuffle-button:focus-visible { outline:3px solid var(--ivory); outline-offset:3px; }
.card-deck { width:min(100%,360px); min-height:230px; margin:0 auto 28px; }
.deck-card,.drink-card { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(183,154,93,.62); }
.deck-card { background:#214a40; color:rgba(183,154,93,.35); font-family:Georgia,serif; font-size:30px; letter-spacing:-.08em; }
.deck-card-left { transform:rotate(-5deg) translate(-8px,2px); }
.deck-card-right { transform:rotate(5deg) translate(8px,2px); }
.drink-card { z-index:2; padding:28px 24px; background:var(--paper); color:var(--emerald); box-shadow:0 18px 35px rgba(0,0,0,.2); }
.card-kicker { margin-bottom:20px; color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.drink-card strong { font-family:Georgia,serif; font-size:clamp(27px,8vw,38px); font-weight:400; line-height:1.08; }
.drink-card p { max-width:280px; margin:16px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.card-deck.is-shuffling .deck-card-left { animation:shuffle-left .72s ease; }
.card-deck.is-shuffling .deck-card-right { animation:shuffle-right .72s ease; }
.card-deck.is-shuffling .drink-card { animation:shuffle-center .72s ease; }
.shuffle-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:50px; padding:14px 22px; border:1px solid var(--gold); background:var(--gold); color:var(--emerald); cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.shuffle-button:disabled { cursor:wait; opacity:.72; }
.shuffle-button span { font-size:18px; }
.game-status { min-height:18px; margin:14px 0 0; color:rgba(247,242,232,.6); font-size:11px; }
@keyframes shuffle-left { 35% { transform:translateX(78px) rotate(8deg); } 70% { transform:translateX(-20px) rotate(-9deg); } }
@keyframes shuffle-right { 35% { transform:translateX(-78px) rotate(-8deg); } 70% { transform:translateX(20px) rotate(9deg); } }
@keyframes shuffle-center { 35% { transform:translateY(-14px) rotate(2deg); } 70% { transform:translateY(4px) rotate(-1deg); } }

.menu-accordion { border-top:1px solid var(--line); }
.menu-accordion:last-child { border-bottom:1px solid var(--line); }
.menu-accordion summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 2px; color:var(--emerald); cursor:pointer; list-style:none; }
.menu-accordion summary::-webkit-details-marker { display:none; }
.menu-accordion summary span { font-family:Georgia,serif; font-size:25px; }
.menu-accordion summary small { color:var(--gold); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.menu-accordion summary::after { content:"+"; color:var(--gold); font-size:24px; }
.menu-accordion[open] summary::after { content:"−"; }
.drink-list { display:grid; gap:0; margin:0; padding-bottom:20px; }
.drink { display:grid; gap:5px; padding:14px 0; border-top:1px dotted rgba(16,60,50,.18); }
.drink dt { color:var(--emerald); font-family:Georgia,serif; font-size:18px; }
.drink dd { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.shot-note { margin:0 0 25px; padding:16px 18px; border-left:2px solid var(--gold); background:rgba(183,154,93,.08); color:var(--muted); font-size:13px; line-height:1.55; }

.experience-grid { display:grid; gap:1px; margin-top:38px; background:rgba(16,60,50,.12); border:1px solid rgba(16,60,50,.12); }
.experience-grid article { min-height:190px; padding:25px; background:rgba(255,253,248,.7); }
.experience-grid span { color:var(--gold); font-family:Georgia,serif; font-size:12px; }
.experience-grid h3 { margin:24px 0 10px; color:var(--emerald); font-size:23px; }
.experience-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }

.comfort-grid { display:grid; gap:12px; margin-top:34px; }
.comfort-grid article { padding:28px 24px; border:1px solid var(--line); background:var(--paper); }
.comfort-grid article>span { color:var(--gold); font-family:Georgia,serif; font-size:30px; }
.comfort-grid h3 { margin:20px 0 9px; color:var(--emerald); font-size:24px; }
.comfort-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }

.photo-section { padding:22px 20px 0; background:var(--emerald); }
.photo-panel { max-width:720px; margin-inline:auto; padding:70px 24px; border:1px solid rgba(183,154,93,.48); color:var(--ivory); text-align:center; }
.photo-panel h2 { margin-bottom:18px; font-size:clamp(36px,9vw,56px); line-height:1.05; }
.photo-panel>p:not(.eyebrow) { max-width:530px; margin:0 auto 30px; color:rgba(247,242,232,.75); font-family:Georgia,serif; font-size:17px; line-height:1.65; }
.upload-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:min(100%,280px); margin-bottom:14px; padding:17px 22px; border:1px solid transparent; background:var(--gold); color:var(--emerald); font-size:11px; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.upload-button:hover { border-color:var(--gold); background:transparent; color:var(--ivory); }
.upload-button:active { transform:translateY(1px); }
.upload-button:focus-visible { outline:3px solid var(--ivory); outline-offset:4px; }
.upload-button span { font-size:16px; line-height:1; }
.photo-panel small { display:block; color:rgba(247,242,232,.5); font-size:11px; }
.photo-panel .privacy-note { max-width:560px; margin:0 auto 26px; padding:16px 18px; border:1px solid rgba(183,154,93,.35); color:rgba(247,242,232,.82); font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.6; }

footer { padding:72px 24px 64px; background:var(--emerald); color:var(--ivory); text-align:center; }
.footer-monogram { margin-bottom:24px; color:var(--ivory); font-family:Georgia,serif; font-size:58px; letter-spacing:-.07em; }
footer p { margin-bottom:12px; color:rgba(247,242,232,.75); font-family:Georgia,serif; font-style:italic; }
footer small { color:var(--gold); letter-spacing:.2em; }

@media (min-width:640px) {
  .section-shell { width:min(100% - 72px,760px); }
  .special-pours,.comfort-grid { grid-template-columns:1fr 1fr; }
  .experience-grid { grid-template-columns:1fr 1fr; }
  .drink { grid-template-columns:minmax(180px,.8fr) 1.2fr; align-items:baseline; gap:20px; }
  .quick-nav { justify-content:center; }
  .quick-nav a { flex:0 1 160px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .card-deck.is-shuffling .deck-card-left,.card-deck.is-shuffling .deck-card-right,.card-deck.is-shuffling .drink-card { animation:none; }
}
