@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 200;src: url(/assets/fonts/jost-cyrillic-200-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 200;src: url(/assets/fonts/jost-latin-ext-200-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 200;src: url(/assets/fonts/jost-latin-200-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 300;src: url(/assets/fonts/jost-cyrillic-300-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 300;src: url(/assets/fonts/jost-latin-ext-300-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 300;src: url(/assets/fonts/jost-latin-300-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 400;src: url(/assets/fonts/jost-cyrillic-400-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 400;src: url(/assets/fonts/jost-latin-ext-400-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 400;src: url(/assets/fonts/jost-latin-400-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 500;src: url(/assets/fonts/jost-cyrillic-500-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 500;src: url(/assets/fonts/jost-latin-ext-500-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family: 'Jost';font-style: normal;font-display: swap;font-weight: 500;src: url(/assets/fonts/jost-latin-500-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family: 'Alexandria';font-style: normal;font-display: swap;font-weight: 200;src: url(/assets/fonts/alexandria-arabic-200-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family: 'Alexandria';font-style: normal;font-display: swap;font-weight: 200;src: url(/assets/fonts/alexandria-latin-200-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family: 'Alexandria';font-style: normal;font-display: swap;font-weight: 300;src: url(/assets/fonts/alexandria-arabic-300-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family: 'Alexandria';font-style: normal;font-display: swap;font-weight: 300;src: url(/assets/fonts/alexandria-latin-300-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family: 'Alexandria';font-style: normal;font-display: swap;font-weight: 400;src: url(/assets/fonts/alexandria-arabic-400-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family: 'Alexandria';font-style: normal;font-display: swap;font-weight: 400;src: url(/assets/fonts/alexandria-latin-400-normal.woff2?v=9e5c658409) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Majmar v9. The model is the drawing; the page is glass, smoke and ink. Logical properties throughout for RTL.
   Rhythm: 4px baseline, 8px spacing step. */
:root{
  color-scheme:dark;
  --bg:#0c1b1c;--bg-2:#112627;--cream:#efe8da;--muted:#a5b5ac;--dim:#7f908a;--gold:#dcbc92;--gold-2:#b8916a;--danger:#f0a48f;
  --hair:rgba(var(--fg-c),.12);--hair-2:rgba(var(--fg-c),.2);
  --bg-c:12,27,28;--fg-c:239,232,218;--acc-c:220,188,146;--hi-c:255,255,255;--tab:#8fa197;--sig:#8d9a94;--glow1:#173233;--glow2:#132a2b;
  --panel-a:rgba(24,46,46,.84);--panel-b:rgba(14,30,31,.9);--glass-base:rgba(16,34,35,.42);--shadow:rgba(0,0,0,.55);
  --pad:clamp(20px,5vw,96px);--edge:clamp(10px,1.4vw,20px);--radius:26px;
  --display:'Jost','Alexandria',system-ui,sans-serif;--sans:'Jost','Alexandria',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.15,1);
  scroll-padding-top:24px
}
html[lang=ar]{--display:'Alexandria','Jost',system-ui,sans-serif;--sans:'Alexandria','Jost',system-ui,sans-serif}
@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--cream);font:400 17px/28px var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 70% at 80% 0%,var(--glow1) 0%,transparent 60%),radial-gradient(90% 60% at 0% 100%,var(--glow2) 0%,transparent 55%),var(--bg)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
h1,h2,h3,p,figure,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:200;text-wrap:balance}
p{text-wrap:pretty}
bdi{unicode-bidi:isolate}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%)}
.skip{position:fixed;inset-inline-start:16px;top:-100px;background:var(--cream);color:var(--bg);padding:12px 16px;border-radius:12px;z-index:300}
.skip:focus{top:16px}
.defs{position:absolute}
[hidden]{display:none!important}
.smoke{position:fixed;inset:0;width:100vw;height:100vh;z-index:2;pointer-events:none}

/* Glass: a frosted body, a bright upper rim and a soft inner depth. Over the smoke it blurs what drifts behind. */
.glass{position:relative;z-index:3;background:linear-gradient(160deg,rgba(var(--hi-c),.085),rgba(var(--hi-c),.025) 42%,rgba(var(--hi-c),.045)),var(--glass-base);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(var(--hi-c),.16),inset 0 0 0 1px rgba(var(--hi-c),.07),inset 0 -24px 48px rgba(0,0,0,.16),0 30px 60px -24px var(--shadow)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 15% 0%,rgba(var(--hi-c),.09),transparent 55%)}
/* Buttons: amber glass for the action, clear glass for the rest. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font:400 15px/24px var(--sans);letter-spacing:.03em;white-space:nowrap;transition:filter .3s var(--ease),transform .3s var(--ease),background .3s}
.btn:active{transform:scale(.98)}
.btn-amber{color:#22160a;background:linear-gradient(180deg,rgba(240,208,164,.96),rgba(204,158,106,.92));box-shadow:inset 0 1px 0 rgba(var(--hi-c),.6),inset 0 -3px 8px rgba(120,70,20,.35),0 12px 32px -10px rgba(220,160,90,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-amber:hover{filter:brightness(1.07) saturate(1.05)}
.btn-glass{color:var(--cream);background:linear-gradient(180deg,rgba(var(--hi-c),.1),rgba(var(--hi-c),.03));box-shadow:inset 0 1px 0 rgba(var(--hi-c),.18),inset 0 0 0 1px rgba(var(--hi-c),.1);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.btn-glass:hover{background:linear-gradient(180deg,rgba(var(--hi-c),.15),rgba(var(--hi-c),.05))}
.btn-small{min-height:40px;padding:0 18px;font-size:14px}
.btn-wide{width:100%}
.icon-glass,.icon-btn{display:grid;place-items:center;border-radius:50%}
.icon-glass{width:48px;height:48px;color:var(--cream);background:linear-gradient(180deg,rgba(var(--hi-c),.1),rgba(var(--hi-c),.03));box-shadow:inset 0 1px 0 rgba(var(--hi-c),.18),inset 0 0 0 1px rgba(var(--hi-c),.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.icon-btn{width:36px;height:36px;font-size:20px;line-height:1;color:var(--cream);box-shadow:inset 0 0 0 1px var(--hair-2)}
.icon-btn:hover{background:rgba(var(--hi-c),.06)}
.text-link{display:inline-flex;align-items:center;min-height:40px;font-size:15px;line-height:24px;color:var(--gold);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:background-size .35s var(--ease)}
.text-link:hover{background-size:0 1px}
.note{font-size:15px;line-height:24px;color:var(--muted)}
.label,.eyebrow,.mini-label,.mix-group h3,.drink-group h3{font:400 13px/20px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
html[lang=ar] :is(.label,.eyebrow,.mini-label,.mix-group h3,.drink-group h3){letter-spacing:0;text-transform:none;font-size:15px}

/* Over the live model the blur is recomputed every frame, so it stays small and the base carries the tint. */
.header.glass,.pavilion .glass{-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.pavilion .glass{--glass-base:rgba(var(--bg-c),.62)}
.header.glass{--glass-base:rgba(var(--bg-c),.55)}
.panel{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* A control on a glass surface already sits on blurred ground; a second blur only costs a compositor pass. */
.glass :is(.btn,.icon-glass),.panel :is(.btn,.icon-glass){-webkit-backdrop-filter:none;backdrop-filter:none}

/* Header: a floating glass bar over the model. */
.header{position:absolute;z-index:20;inset:var(--edge) var(--edge) auto;height:64px;padding-inline:28px 8px;display:flex;align-items:center;gap:32px;border-radius:999px}
.wordmark{display:inline-flex;align-items:baseline;gap:12px;white-space:nowrap}
.wordmark-latin{font:400 20px/28px var(--sans);letter-spacing:.32em}
.wordmark-arabic{font:300 22px/28px 'Alexandria',sans-serif;color:var(--gold)}
.header nav{display:flex;gap:28px;margin-inline:auto;font-size:15px;line-height:24px;color:var(--muted)}
.header nav a{padding:8px 0;transition:color .3s}
.header nav a:hover{color:var(--cream)}
.head-actions{display:flex;align-items:center;gap:16px}
.langs{display:flex;gap:4px;font-size:13px;letter-spacing:.08em}
.langs>*{min-width:32px;height:32px;display:grid;place-items:center;border-radius:999px;color:var(--muted)}
.langs a:hover{color:var(--cream)}
.langs [aria-current]{color:var(--cream);box-shadow:inset 0 0 0 1px var(--hair-2)}

/* Hero */
.pavilion{position:relative;z-index:1;isolation:isolate;height:100svh;min-height:720px;max-height:1400px;overflow:hidden;background:var(--bg)}
.scene-anchor{position:absolute;top:0}
.pavilion-stage{position:absolute;inset:0}
#pavilion-canvas,#pavilion-drawing{position:absolute;inset:0;width:100%;height:100%}
#pavilion-canvas{opacity:0;transition:opacity .8s}
#pavilion-drawing{transition:opacity .8s}
#pavilion-drawing svg{width:100%;height:100%}
.is-live #pavilion-canvas{opacity:1;cursor:grab}
.is-live #pavilion-canvas:active{cursor:grabbing}
.is-live #pavilion-drawing{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s,visibility 0s .8s}
#pavilion-canvas:focus-visible{outline:1px solid var(--gold);outline-offset:-6px}
.spatial-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--bg-c),.78),rgba(var(--bg-c),.2) 34%,transparent 52%),linear-gradient(0deg,rgba(var(--bg-c),.7),transparent 32%)}
html[dir=rtl] .spatial-shade{background:linear-gradient(270deg,rgba(var(--bg-c),.78),rgba(var(--bg-c),.2) 34%,transparent 52%),linear-gradient(0deg,rgba(var(--bg-c),.7),transparent 32%)}
.leader{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .4s;overflow:hidden}
.leader.on{opacity:1}
.leader-line,.leader-ring{position:absolute;top:0;left:0;will-change:transform}
.leader-line{width:1px;height:1px;background:var(--gold);transform-origin:0 50%}
.leader-ring{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold)}
.leader-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--gold)}
.hero-copy{position:absolute;z-index:7;inset-inline-start:var(--pad);top:calc(var(--edge) + 64px + 72px);pointer-events:none;max-width:640px}
.hero-copy h1{margin-top:16px;font-size:clamp(64px,7vw,124px);line-height:.95;letter-spacing:-.02em}
html[lang=ar] .hero-copy h1{line-height:1.15;letter-spacing:0}
.hero-copy{transition:opacity .5s var(--ease)}
.panel-open .hero-copy,.panel-open .view-tools{opacity:0}
.hero-status{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:15px;line-height:24px;color:var(--muted)}
.status-mark{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gold)}
.hero-status.is-open .status-mark{background:var(--gold);box-shadow:0 0 12px rgba(var(--acc-c),.8)}
.view-tools{position:absolute;z-index:7;inset-inline-end:var(--pad);top:calc(var(--edge) + 64px + 72px);display:flex;align-items:center;gap:16px}
.view-hint{font-size:14px;line-height:20px;color:var(--muted);text-shadow:0 0 10px var(--bg)}
.zoom-hint{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);padding:12px 22px;border-radius:999px;font-size:15px;line-height:24px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.zoom-hint.on{opacity:1;transform:translate(-50%,-50%)}
.table-card{position:absolute;z-index:8;top:0;left:0;width:280px;padding:18px 20px 20px;border-radius:22px;transition:opacity .3s;will-change:transform}
.table-card.docked{left:auto;inset-inline-end:var(--pad);top:auto;bottom:calc(var(--edge) + 150px);transform:none!important}
.card-title{font:300 22px/28px var(--display)}
.card-title span{color:var(--muted)}
.card-meta{margin-top:4px;font-size:14px;line-height:20px;color:var(--gold)}
.card-note{margin-top:4px;font-size:14px;line-height:20px;color:var(--muted)}
/* The card floats over other tables: only its button takes clicks, the rest lets them through to the model. */
.table-card{pointer-events:none}
.table-card .btn{pointer-events:auto}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.card-hint{margin-top:8px;font-size:13px;line-height:20px;color:var(--gold)}
.scene-choice{position:absolute;z-index:10;inset:auto var(--edge) var(--edge);padding:20px 20px 20px calc(var(--pad) - var(--edge));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:40px}
html[dir=rtl] .scene-choice{padding:20px calc(var(--pad) - var(--edge)) 20px 20px}
.zone-tabs{display:flex;gap:32px}
.zone-tabs button{position:relative;font:200 34px/48px var(--display);color:var(--tab);transition:color .3s}
.zone-tabs button:hover,.zone-tabs button[aria-selected=true]{color:var(--cream)}
.zone-tabs button[aria-selected=true]::after{content:'';position:absolute;inset-inline-start:50%;bottom:-6px;width:5px;height:5px;margin-inline-start:-2.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.zone-panel{display:grid;gap:4px}
#zone-text{font-size:16px;line-height:24px}
.zone-meta{font-size:14px;line-height:20px;color:var(--gold)}

/* Sections: no backgrounds of their own, so the smoke and the ink move through one continuous night. */
.section{position:relative;padding:clamp(96px,12vw,176px) var(--pad) 0;max-width:1760px;margin:auto}
.section-head{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:last baseline;margin-bottom:64px}
.section-head h2,.hookah-copy h2,.visit-facts h2{font-size:clamp(56px,6vw,108px);line-height:1;letter-spacing:-.02em}
html[lang=ar] :is(.section-head h2,.hookah-copy h2,.visit-facts h2){line-height:1.2;letter-spacing:0}
.section-intro{max-width:460px;color:var(--muted);font-size:17px;line-height:28px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .pavilion-stage{animation:hero-exit linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .hero-copy{animation:hero-copy-exit linear both;animation-timeline:view();animation-range:exit 0% exit 80%}
}}
@keyframes hero-exit{to{opacity:.2;transform:scale(1.05) translateY(6%)}}
@keyframes hero-copy-exit{to{opacity:0;transform:translateY(-60px)}}

/* Ink: hairline, medium and heavy strokes over one curve; drawn on view. */
.ink{display:block;overflow:visible}
.ink path{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-linejoin:round}
.ink .ink-guide{stroke-width:.5;opacity:.22;stroke-dasharray:2 5}
/* Strokes are chosen by class: Chrome does not restyle descendants picked by the camelCase [pathLength] when .inked arrives. */
.ink :is(.ink-stem,.ink-leaf){stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t,1s) cubic-bezier(.45,.05,.4,1) var(--d,0s)}
.ink .ink-leaf{stroke-width:.8;transition:stroke-dashoffset var(--t) ease-out var(--d),fill 1s ease var(--d)}
.ink.inked :is(.ink-stem,.ink-leaf){stroke-dashoffset:0}
.ink.inked .ink-leaf.fill{fill:rgba(var(--acc-c),.14)}
.ink.instant path{transition:none}

/* Menu */
.menu-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,112px);align-items:start}
.mix-visual{position:sticky;top:96px}
.ink-dial{position:absolute;inset:-9%;width:118%;height:118%;opacity:.8}
.mix-dial{position:relative;aspect-ratio:1;width:72%;margin:9% auto 0}
.mix-dial img{width:100%;height:100%;object-fit:cover;clip-path:circle(50%);box-shadow:0 40px 80px rgba(0,0,0,.4)}
.mix-caption{position:relative;display:flex;justify-content:space-between;gap:16px;margin-top:56px;font-size:15px;line-height:24px;color:var(--muted)}
.mix-groups{display:grid;gap:48px}
.leaf-note{margin-top:4px;font-size:14px;line-height:20px;color:var(--dim)}
.mix-list{margin-top:16px;border-top:1px solid var(--hair)}
.mix-option{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;width:100%;text-align:start;padding:18px 0;border-bottom:1px solid var(--hair);transition:color .3s}
.mix-name{position:relative;font:300 clamp(24px,2.2vw,32px)/40px var(--display)}
.mix-option .price{align-self:center;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.mix-with{grid-column:1/-1;font-size:15px;line-height:24px;color:var(--dim)}
.mix-option:hover .mix-name{color:#fff}
.mix-option[aria-pressed=true] .mix-name{color:var(--gold)}
.mix-option[aria-pressed=true] .mix-name::before{content:'';position:absolute;inset-inline-start:-20px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.choice-note{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:15px;line-height:24px;color:var(--muted)}
.choice-note strong{font-weight:400;color:var(--cream)}

/* Hookahs */
.hookahs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,112px);align-items:center}
.hookah-copy .section-intro{margin-top:32px}
.tabs{display:flex;gap:28px;margin-top:48px;border-bottom:1px solid var(--hair)}
.tabs button{position:relative;padding:12px 0 16px;font-size:16px;line-height:24px;color:var(--muted);transition:color .3s}
.tabs button:hover,.tabs button[aria-pressed=true]{color:var(--cream)}
.tabs button[aria-pressed=true]::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.hookah-detail{display:flex;justify-content:space-between;margin-top:24px;font-size:17px;line-height:28px}
#hookah-price{color:var(--gold)}
.hookah-visual{position:relative;justify-self:center;width:min(100%,540px);padding-top:110px}
.ink-spandrel{position:absolute;top:0;inset-inline:-8%;width:116%;height:auto}
.arch{position:relative;aspect-ratio:4/5}
.arch-image{width:100%;height:100%;object-fit:cover;object-position:50% 60%;clip-path:url(#arch-clip)}
.arch-line{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible}
.arch-line path{fill:none;stroke:rgba(var(--acc-c),.5);stroke-width:1;vector-effect:non-scaling-stroke}

/* Drinks */
.drinks{min-height:80vh}
.ink-medallion{position:absolute;z-index:-1;width:min(900px,90vw);height:auto;inset-inline-end:-6%;top:40px;opacity:.38}
.drink-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.drink-group{padding:28px 28px 20px}
.drink-group ul{margin-top:16px}
.drink-group li{display:flex;align-items:baseline;gap:12px;padding:10px 0;font-size:16px;line-height:24px}
.drink-group li i{flex:1;border-bottom:1px dotted var(--hair-2);transform:translateY(-5px)}
.drink-group li bdi{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Ritual */
.ritual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px}
.ink-sprig{width:150px;height:auto;margin-bottom:8px}
html[dir=rtl] .ink-sprig{transform:scaleX(-1)}
.ritual-grid h3{font:300 26px/36px var(--display)}
.ritual-grid p{margin-top:8px;font-size:16px;line-height:26px;color:var(--muted)}

/* Private evenings: glass over a drift of smoke */
.private-haze{position:absolute;inset:55% 0 -5%;pointer-events:none}
.private-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{padding:32px 32px 36px;min-height:240px}
.card h3{font:300 30px/40px var(--display)}
.card p{margin-top:16px;font-size:16px;line-height:26px;color:var(--muted)}

/* Visit */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,112px);align-items:center;padding-bottom:160px}
.ink-sun{position:absolute;z-index:-1;width:min(820px,80vw);height:auto;inset-inline-start:-10%;top:60px;opacity:.3}
.opening-time{display:grid;margin-top:16px;font:200 clamp(80px,8.4vw,156px)/1 var(--display);letter-spacing:-.04em;direction:ltr;justify-items:start}
html[dir=rtl] .opening-time{justify-items:end}
.opening-time bdi:last-child{margin-inline-start:.9em;color:var(--gold)}
.opening-time .dash{display:none}
.address{margin-top:32px;font-size:18px;line-height:28px}
.visit-facts{padding:40px}
.visit-facts h2{font-size:clamp(44px,4vw,64px)}
.visit-facts dl{display:grid;gap:20px;margin:28px 0 32px}
.visit-facts dt{font-size:13px;line-height:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
html[lang=ar] .visit-facts dt{letter-spacing:0;font-size:15px}
.visit-facts dd{margin-top:4px;font-size:16px;line-height:26px;color:var(--muted)}

/* Footer */
.footer{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:32px;padding:56px var(--pad) 128px;border-top:1px solid var(--hair);max-width:1760px;margin:auto;font-size:14px;line-height:20px;color:var(--muted)}
.footer .wordmark{margin-bottom:12px}
.footer-langs{display:flex;gap:20px}
.footer-langs [aria-current]{color:var(--cream)}
.footer-langs a:hover{color:var(--cream)}
.footer-made{justify-self:end;display:grid;justify-items:end;gap:12px}
.signature{position:relative;width:173px;color:var(--sig);--as-ink:var(--sig);padding:12px 0 0}
.signature svg{width:100%;height:auto;display:block;overflow:visible}
.signature-wrap{position:relative}
.sig-link{position:absolute;top:0;bottom:0;border-radius:6px}
.sig-studio{left:0;width:71%}
.sig-id0{left:74%;right:-4px}
.sig-link:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
[data-as-armed]:not([data-as-ready])>svg{visibility:hidden}

/* Evening bar */
.evening-bar{position:fixed;z-index:30;bottom:16px;left:50%;transform:translate(-50%,24px);opacity:0;visibility:hidden;display:flex;align-items:center;gap:24px;padding:8px 8px 8px 24px;border-radius:999px;max-width:calc(100vw - 32px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
html[dir=rtl] .evening-bar{padding:8px 24px 8px 8px}
.evening-bar.visible{visibility:visible;opacity:1;transform:translate(-50%,0)}
.panel-open .evening-bar{opacity:0;visibility:hidden}
.evening-bar p{display:grid;font-size:14px;line-height:20px;white-space:nowrap}
.bar-label{font-size:12px;line-height:16px;color:var(--gold)}

/* Booking panel: glass over the live model, so the chosen table stays in view. */
.booking{position:fixed;z-index:40;inset-block:var(--edge);inset-inline-end:var(--edge);width:min(540px,calc(100vw - 2 * var(--edge)));pointer-events:none}
.panel{height:100%;display:flex;flex-direction:column;pointer-events:auto;transform:translateX(calc(100% + 40px));transition:transform .55s var(--ease);background:linear-gradient(160deg,var(--panel-a),var(--panel-b))}
html[dir=rtl] .panel{transform:translateX(calc(-100% - 40px))}
.booking.open .panel{transform:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 20px 16px 28px;border-bottom:1px solid var(--hair)}
html[dir=rtl] .panel-head{padding:20px 28px 16px 20px}
.panel-title{font:300 26px/32px var(--display)}
.panel-title:focus{outline:none}
.panel-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 28px 28px;scrollbar-width:thin}
.p-block{padding:22px 0;border-bottom:1px solid var(--hair)}
.p-block:last-child{border:0}
.p-block h3{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font:400 13px/20px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.p-block h3 small{letter-spacing:.04em;text-transform:none;color:var(--muted);font-size:13px}
html[lang=ar] .p-block h3{letter-spacing:0;font-size:15px}
.day-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.day{flex:0 0 auto;display:grid;justify-items:center;min-width:72px;padding:10px 12px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair);scroll-snap-align:start;transition:background .25s,box-shadow .25s}
.day span{font-size:14px;line-height:20px}
.day small{font-size:12px;line-height:16px;color:var(--muted)}
.day:hover{background:rgba(var(--hi-c),.04)}
.day.on{background:rgba(var(--acc-c),.14);box-shadow:inset 0 0 0 1px var(--gold)}
.timeline{position:relative;padding-bottom:28px}
.tl-track{position:relative;height:56px;border-radius:16px;background:rgba(var(--hi-c),.035);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;touch-action:none;cursor:pointer}
.tl-past{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.28)}
.tl-busy{position:absolute;top:8px;bottom:8px;border-radius:10px;background:repeating-linear-gradient(135deg,rgba(var(--acc-c),.42) 0 1px,transparent 1px 6px);box-shadow:inset 0 0 0 1px rgba(var(--acc-c),.3)}
.tl-past em,.tl-busy em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--muted);text-shadow:0 0 6px var(--bg)}
.tl-sel{position:absolute;top:4px;bottom:4px;display:grid;place-items:center;border-radius:12px;color:#22160a;background:linear-gradient(180deg,rgba(240,208,164,.95),rgba(204,158,106,.9));box-shadow:inset 0 1px 0 rgba(var(--hi-c),.6),0 8px 24px -6px rgba(220,160,90,.55);cursor:grab;transition:inset-inline-start .2s var(--ease),width .2s var(--ease)}
.tl-sel b{font-weight:500;font-size:13px;white-space:nowrap;direction:ltr}
.tl-sel.clash{background:linear-gradient(180deg,rgba(240,160,140,.9),rgba(190,100,90,.85))}
.tl-hours{position:absolute;inset:auto 0 0;height:20px}
.tl-hours span{position:absolute;transform:translateX(-50%);font-size:11px;line-height:20px;color:var(--dim);direction:ltr}
html[dir=rtl] .tl-hours span{transform:translateX(50%)}
.tl-hours span:first-child{transform:none}
.tl-hours span:last-child{transform:translateX(-100%)}
html[dir=rtl] .tl-hours span:last-child{transform:translateX(100%)}
.stay{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;font-size:14px;line-height:20px;box-shadow:inset 0 0 0 1px var(--hair-2);transition:background .25s,box-shadow .25s}
.chip bdi{color:var(--muted)}
.chip:hover{background:rgba(var(--hi-c),.05)}
.chip.on{background:rgba(var(--acc-c),.15);box-shadow:inset 0 0 0 1px var(--gold)}
.chip.pick{display:grid;justify-items:start;padding:8px 14px;border-radius:16px}
.chip.pick small{font-size:12px;color:var(--muted)}
.table-pick{margin-top:20px}
.table-pick h3{margin-bottom:10px;font:300 22px/28px var(--display);color:var(--cream);letter-spacing:0;text-transform:none}
.seat-ring{display:block;width:100%;max-width:300px;margin:0 auto 8px}
.ring-table{fill:rgba(var(--acc-c),.06);stroke:rgba(var(--acc-c),.6);stroke-width:1}
.ring-tray{fill:none;stroke:rgba(var(--acc-c),.4);stroke-width:.8}
.seat{cursor:pointer}
.seat circle{fill:rgba(var(--hi-c),.03);stroke:rgba(var(--fg-c),.35);stroke-width:1;transition:fill .25s,stroke .25s}
.seat text{font:400 12px var(--sans);fill:var(--muted);text-anchor:middle;pointer-events:none}
.seat:hover circle,.seat:focus-visible circle{stroke:var(--gold)}
.seat:focus{outline:none}
.seat.taken circle{fill:rgba(var(--acc-c),.9);stroke:rgba(255,236,200,.9)}
.seat.taken text{fill:#22160a}
.guest-list{display:grid;gap:8px}
.field{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.field input,.guest-row input{width:100%;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid var(--hair-2);background:transparent;font-size:16px;color:var(--cream);outline:none}
.field input:focus,.guest-row input:focus{border-bottom-color:var(--gold)}
.guest-row{display:flex;align-items:center;gap:12px}
.guest-row input::placeholder{color:var(--dim)}
.stepper{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.stepper span{margin-inline-end:auto}
.stepper output{min-width:24px;text-align:center;font:300 24px/32px var(--display);color:var(--cream)}
.mini-label{margin:16px 0 8px;font-size:11px}
.summary dl{display:grid;gap:6px;margin-bottom:12px}
.summary dl div{display:flex;justify-content:space-between;align-items:baseline}
.summary dt{font-size:15px;color:var(--muted)}
.summary dd{font:300 26px/32px var(--display);color:var(--cream)}
.summary .btn{margin-top:16px}
.demo{margin-top:12px;font-size:13px;line-height:20px;color:var(--dim)}
.error{margin-top:10px;font-size:14px;line-height:20px;color:var(--danger)}
.ready-title{margin:20px 0 8px;font:300 30px/36px var(--display)}
.ready-title:focus{outline:none}
.request-text{width:100%;min-height:220px;margin:20px 0;padding:16px 18px;border:0;border-radius:16px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--hair);font-size:15px;line-height:24px;resize:vertical}
.ready-actions{display:flex;align-items:center;gap:20px}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass,.icon-glass,.btn-glass{background:#183233}
  .panel{background:#132a2b}
}

@media (max-width:1180px){
  .header nav{gap:20px;font-size:14px}
  .scene-choice{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}
  .zone-panel{grid-column:1/-1;grid-row:2}
  .drink-groups,.private-grid{grid-template-columns:1fr 1fr}
  .ritual-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .header nav{display:none}.head-actions{margin-inline-start:auto}
  .menu-layout,.hookahs,.visit{grid-template-columns:1fr}
  .mix-visual{position:relative;top:auto;max-width:520px;margin:0 auto}
  .section-head{grid-template-columns:1fr;row-gap:20px}
}
@media (max-width:760px){
  :root{--edge:10px;--radius:22px}
  body{font-size:16px;line-height:26px}
  .header{height:56px;padding-inline:18px 6px;gap:12px}
  .wordmark-latin{font-size:16px;letter-spacing:.26em}.wordmark-arabic{font-size:18px}
  .langs{display:none}
  .header .btn{min-height:44px;padding:0 16px;font-size:13px}
  .pavilion{min-height:680px}
  .hero-copy{inset-inline:20px;top:calc(var(--edge) + 56px + 28px)}
  .hero-copy h1{font-size:54px}
  .view-tools{top:auto;bottom:calc(var(--edge) + 214px);inset-inline-end:20px}
  .view-hint{display:none}
  .spatial-shade,html[dir=rtl] .spatial-shade{background:linear-gradient(180deg,rgba(var(--bg-c),.85) 18%,transparent 42%),linear-gradient(0deg,rgba(var(--bg-c),.85) 14%,transparent 42%)}
  .scene-choice{grid-template-columns:1fr;padding:16px;gap:12px}
  html[dir=rtl] .scene-choice{padding:16px}
  .zone-tabs{justify-content:space-between;gap:12px}
  .zone-tabs button{font-size:28px;line-height:40px}
  #zone-text{display:none}
  .scene-choice .btn{width:100%}
  .table-card.docked{inset-inline:var(--edge);width:auto;bottom:calc(var(--edge) + 200px)}
  .section{padding-top:96px}
  .section-head{margin-bottom:40px}
  .drink-groups,.private-grid,.ritual-grid{grid-template-columns:1fr}
  .visit-facts{padding:28px 24px}
  .footer{grid-template-columns:1fr;justify-items:start;padding-bottom:120px}
  .footer-made{justify-self:start;justify-items:start}
  .evening-bar{width:calc(100% - 20px);bottom:10px;gap:12px}
  .evening-bar p{flex:1;min-width:0;white-space:normal}
  .booking{inset:auto 0 0;width:100%;height:90svh}
  .panel,html[dir=rtl] .panel{border-radius:26px 26px 0 0;transform:translateY(100%)}
  .booking.open .panel{transform:none}
  .panel-body{padding:4px 20px 28px}
  .tl-hours span:nth-child(even){display:none}
}

/* Light theme: warm paper, sepia ink, white frosted glass. The model is redrawn in ink by pavilion.js. */
html[data-theme=light]{
  color-scheme:light;
  --bg:#f1ebdf;--bg-2:#e9e1d1;--cream:#1d2a28;--muted:#55625d;--dim:#7c8883;--gold:#8a6239;--gold-2:#6d4b2a;--danger:#a8402c;
  --hair:rgba(29,42,40,.14);--hair-2:rgba(29,42,40,.24);
  --bg-c:241,235,223;--fg-c:29,42,40;--acc-c:138,98,57;--hi-c:255,255,255;--tab:#8b948f;--sig:#6f7a75;--glow1:#f7f1e6;--glow2:#e6ddcc;
  --panel-a:rgba(251,248,241,.9);--panel-b:rgba(243,237,226,.94);--glass-base:rgba(255,255,255,.4);--shadow:rgba(70,52,28,.22)
}
html[data-theme=light] .glass{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.42) 42%,rgba(255,255,255,.56)),var(--glass-base);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(29,42,40,.07),0 24px 50px -24px var(--shadow)}
html[data-theme=light] .glass::before{background:radial-gradient(120% 60% at 15% 0%,rgba(255,255,255,.55),transparent 55%)}
html[data-theme=light] .pavilion .glass,html[data-theme=light] .header.glass{--glass-base:rgba(247,242,233,.62)}
html[data-theme=light] :is(.btn-glass,.icon-glass){background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(29,42,40,.12)}
html[data-theme=light] .btn-amber{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(120,70,20,.25),0 10px 26px -10px rgba(160,110,50,.45)}
html[data-theme=light] .mix-dial img{box-shadow:0 30px 60px rgba(70,52,28,.25)}
html[data-theme=light] .seat.taken text{fill:#fff}
html[data-theme=light] .request-text{background:rgba(255,255,255,.6)}
html[data-theme=light] .tl-past{background:rgba(29,42,40,.07)}
html[data-theme=light] .ink .ink-guide{opacity:.3}
html[data-theme=light] .ink.inked .ink-leaf.fill{fill:rgba(138,98,57,.12)}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--muted);transition:color .3s,background .3s}
.theme-toggle:hover{color:var(--cream);background:rgba(var(--fg-c),.06)}
.theme-toggle .moon{display:none}
html[data-theme=light] .theme-toggle .sun{display:none}
html[data-theme=light] .theme-toggle .moon{display:block}
.poster-base{stroke:rgba(var(--fg-c),.42)}.poster-active{stroke:var(--gold)}