body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); min-height:100vh; -webkit-font-smoothing:antialiased; }
main { width:min(100%,560px); margin:0 auto; padding:56px 34px 72px 44px; }
header { text-align:center; margin-bottom:46px; }
h1 { margin:0; line-height:0; }
h1 img { width:min(62%,250px); height:auto; }
h1 a { display:inline-block; line-height:0; }
.sub { margin:14px 0 0; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--soft); }

ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
li { position:relative; border-bottom:1px solid var(--rule); }
.dish { position:relative; display:block; width:100%; padding:20px 54px 19px 0; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.course { display:flex; justify-content:space-between; align-items:baseline; font-style:italic; font-size:.92rem; color:var(--soft); margin-bottom:5px; letter-spacing:.02em; }
.course em { font-style:normal; color:var(--ink); }
.dur { font-style:normal; font-size:.8rem; letter-spacing:.06em; font-variant-numeric:lining-nums tabular-nums; }
.line { display:flex; align-items:baseline; gap:10px; }
.name { font-size:1.12rem; letter-spacing:.17em; text-transform:uppercase; font-weight:500; }
.leader { flex:1; border-bottom:1px dotted var(--soft); transform:translateY(-4px); min-width:12px; }
.num { font-size:1.05rem; font-variant-numeric:lining-nums tabular-nums; }
.note { display:block; margin-top:8px; font-style:italic; font-size:.88rem; line-height:1.45; color:var(--soft); max-width:30em; }

/* the mark the waiter would put on a paper menu */
.mark { position:absolute; left:-30px; top:50%; width:18px; height:18px; margin-top:-9px; border:1px solid var(--soft); }
.mark::before, .mark::after { content:''; position:absolute; left:50%; top:50%; width:20px; height:1px; background:var(--ink); transform-origin:center; transition:transform .28s ease; }
.mark::before { transform:translate(-50%,-50%) rotate(45deg) scaleX(0); }
.mark::after  { transform:translate(-50%,-50%) rotate(-45deg) scaleX(0); transition-delay:.08s; }
.dish[aria-pressed="true"] .mark { border-color:var(--ink); }
.dish[aria-pressed="true"] .mark::before { transform:translate(-50%,-50%) rotate(45deg) scaleX(1); }
.dish[aria-pressed="true"] .mark::after  { transform:translate(-50%,-50%) rotate(-45deg) scaleX(1); }
.dish[aria-pressed="true"] .name { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px; }
.dish:focus-visible { outline:1px solid var(--ink); outline-offset:3px; }

footer { margin-top:44px; text-align:center; }
.hint { margin:0 0 26px; font-style:italic; font-size:.88rem; color:var(--soft); }
#bill-btn { padding:14px 40px; background:none; border:1px solid var(--ink); color:var(--ink); font:inherit; font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; cursor:pointer; }
#bill-btn:focus-visible { background:var(--ink); color:var(--paper); }
@media (hover:hover) { #bill-btn:hover { background:var(--ink); color:var(--paper); } } /* hover only for a real pointer, so a tap does not leave it filled */
#count { margin-left:.4em; letter-spacing:0; }
/* the bill and the guestbook sit side by side; leaving a review happens inside the guestbook */
.actions { display:flex; flex-direction:column; align-items:center; gap:12px; }
.actions > * { width:min(100%,300px); }
@media (min-width:600px) { .actions { flex-direction:row; justify-content:center; } .actions > * { width:auto; } }
#book-btn { display:block; padding:14px 40px; border:1px solid var(--ink); color:var(--ink); text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; }
#book-btn:focus-visible { background:var(--ink); color:var(--paper); }
@media (hover:hover) { #book-btn:hover { background:var(--ink); color:var(--paper); } }

/* the bill: a story image of what you liked, with a save button */
#bill { position:fixed; inset:0; z-index:10; display:grid; place-items:start center; padding:18px 18px 28px; background:#0e0e0e; animation:fade .3s; overflow:auto; }
#bill[hidden] { display:none; }
.story-box { position:relative; width:min(100%,360px,calc((100vh - 210px) * 9 / 16)); min-width:220px; margin-top:6px; animation:rise .35s ease; }
@supports (height:100dvh) { .story-box { width:min(100%,360px,calc((100dvh - 210px) * 9 / 16)); } }
#story { display:block; width:100%; height:auto; aspect-ratio:9/16; background:var(--paper); box-shadow:0 14px 40px rgba(0,0,0,.4); }
.save { display:block; width:100%; margin-top:16px; padding:14px 18px 12px; border:1px solid var(--paper); background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; text-align:center; }
.save span { display:block; font-size:.9rem; letter-spacing:.3em; text-transform:uppercase; }
.save small { display:block; margin-top:4px; font-style:italic; font-size:.82rem; color:var(--soft); letter-spacing:.02em; }
.save:disabled { opacity:.35; cursor:default; }
.listen { margin:16px 0 0; text-align:center; font-style:italic; font-size:.86rem; color:rgba(255,255,255,.7); }
.listen a { color:#fff; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font-style:normal; }
.x { position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border:0; border-radius:50%; background:rgba(244,241,234,.92); font-size:1rem; color:var(--ink); cursor:pointer; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
@keyframes rise { from { transform:translateY(18px); opacity:0 } to { transform:none; opacity:1 } }
@media (max-width:440px) { .name { letter-spacing:.11em; font-size:1.02rem; } .dish { padding-right:50px; } }
@media (max-width:380px) { main { padding:44px 22px 60px 38px; } .name { letter-spacing:.09em; font-size:.98rem; } .mark { left:-27px; } }
@media (prefers-reduced-motion: reduce) { .mark::before, .mark::after { transition:none; } #bill, .story-box { animation:none; } }

/* player: a quiet round button at the right edge of every dish, and a hairline of progress under it */
.play { position:absolute; right:0; top:50%; width:38px; height:38px; margin-top:-19px; border:1px solid var(--soft); border-radius:50%; background:none; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.ico { display:block; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--ink); margin-left:3px; }
.playing .ico { width:10px; height:12px; border:0; margin:0; background:linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 7px,var(--ink) 7px 10px); }
.current .play { background:var(--ink); border-color:var(--ink); }
.current .ico { border-left-color:var(--paper); }
.playing .ico { background:linear-gradient(90deg,var(--paper) 0 3px,transparent 3px 7px,var(--paper) 7px 10px); }
.bar { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.current .name { font-style:italic; }
@media (prefers-reduced-motion: reduce) { .play { transition:none; } }

/* lyrics (labelled "інгредієнти") */
.lyr-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; margin:-9px 0 19px; }
.lyr-toggle { display:block; margin:0; padding:4px 0; border:0; background:none; color:var(--soft); font:inherit; font-style:italic; font-size:.86rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; cursor:pointer; }
.lyr { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .45s ease, visibility 0s .45s; }
.lyr.open { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .45s ease, visibility 0s; }
.lyr-body { overflow:hidden; min-height:0; }
.lyr-body p { margin:0 0 1.15em; font-size:.97rem; line-height:1.62; color:rgba(20,20,20,.86); padding-left:1.3em; }
.lyr-body p:first-child { margin-top:2px; }
.lyr-body p:last-child { margin-bottom:26px; }
.ln { display:block; text-indent:-1.3em; } /* hanging indent: a wrapped line is visibly the same line */
@media (prefers-reduced-motion: reduce) { .lyr, .lyr.open { transition:none; } }

.head { position:relative; }

.allergen { display:block; margin-top:9px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.allergen::before { content:'! '; }

.credits { margin-top:34px; padding-top:26px; border-top:1px solid var(--rule); }
.credits-title { margin:0 0 18px; text-align:center; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--soft); }
.credits ul { list-style:none; margin:0; padding:0; }
.credits li { display:flex; align-items:baseline; gap:10px; padding:5px 0; font-size:.95rem; border:0; }
.credits .role { font-style:italic; color:var(--soft); }
.credits .who { letter-spacing:.04em; }

.total-time { display:flex; align-items:baseline; gap:10px; margin:0; padding:18px 0 0; font-size:.95rem; font-variant-numeric:lining-nums tabular-nums; }
.total-time .role { font-style:italic; color:var(--soft); }
.total-time .leader { flex:1; border-bottom:1px dotted var(--soft); transform:translateY(-4px); min-width:12px; }

.tools { display:flex; justify-content:flex-end; margin:-18px 0 10px; }
#select-all { padding:6px 0; border:0; background:none; color:var(--soft); font:inherit; font-style:italic; font-size:.88rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; cursor:pointer; }

.band { margin:64px 0 0; }
.band-photo { display:block; position:relative; width:100%; aspect-ratio:16/9; padding:0; border:0; background:#1a1a1a; cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.band-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.band-photo .color { opacity:0; transition:opacity .6s ease; }
.band-photo[aria-pressed="true"] .color { opacity:1; }
@media (hover:hover) { .band-photo:hover .color { opacity:1; } }
.band-photo:focus-visible { outline:1px solid var(--ink); outline-offset:3px; }
.touch-hint { display:none; }
@media (hover:none) { .touch-hint { display:inline; } }
.band figcaption { margin-top:12px; text-align:center; font-style:italic; font-size:.88rem; color:var(--soft); }

/* an empty bill: a quiet hint instead of an empty dialog */
#bill-btn[aria-disabled="true"] { opacity:.45; }
#bill-btn[aria-disabled="true"]:hover, #bill-btn[aria-disabled="true"]:focus-visible { background:none; color:var(--ink); }
.bill-hint { min-height:1.4em; margin:14px 0 0; font-style:italic; font-size:.88rem; color:var(--soft); }
.nudge { animation:nudge .45s; }
@keyframes nudge { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .nudge, .band-photo .color { animation:none; transition:none; } }

/* the very bottom of the menu */
.site-foot { margin-top:54px; padding:34px 0 0; border-top:1px solid var(--rule); text-align:center; }
.thanks-line { margin:0 0 18px; font-style:italic; font-size:1.05rem; color:var(--ink); }
.listen-links { display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:6px 14px; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
.listen-links a { color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:1px solid var(--soft); }
@media (max-width:520px) { .listen-links { flex-direction:column; align-items:center; gap:2px; } .listen-links span { display:none; } }
.materials-line { margin:22px 0 0; }
.materials-line a { -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; display:inline-flex; align-items:center; gap:10px; padding:12px 20px 12px calc(20px + .22em); border:1px solid var(--ink); background:var(--ink); color:var(--paper); text-decoration:none; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; }
.materials-line svg { width:.85em; height:.85em; flex:none; }
.materials-line a:focus-visible { background:transparent; color:var(--ink); }
@media (hover:hover) { .materials-line a:hover { background:transparent; color:var(--ink); } }
.clip-link { display:inline-flex; align-items:center; gap:7px; padding:4px 0; color:var(--soft); font-style:italic; font-size:.86rem; text-decoration:none; }
.clip-link svg { width:20px; height:14px; flex:none; }