/* Escapada v9: the designs the owner picked from the v4 variants (09.11.2026), the cream phrase he kept from v5, a compact
   menu (r-0384), the sound button, Pacifico on the stickers (his pick from v6), and his picks of 10.11.2026: the cream
   headline colour (l1, <html data-title>, --title), the diagonal flavours slide and Shrikhand on the first screen. */

/* ================= Logo: no plate, a soft cream halo (v4 variant A); bolder lines (r-0374) ================= */
.brandmark { position: fixed; z-index: 32; left: var(--pad); top: calc(env(safe-area-inset-top) + 14px); display: block; padding: 6px 0; }
.brandmark .logo { width: 142px; color: var(--ink); filter: drop-shadow(0 0 1.5px var(--cream)) drop-shadow(0 0 9px color-mix(in srgb, var(--cream) 85%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--cream) 55%, transparent)); }
@media (max-width: 899px) { .brandmark .logo { width: 108px; } }

/* ================= Menu: the scoop ball (v4 variant B) pours out a cream panel, not the whole screen (r-0384) ================= */
/* The cream ring keeps the ball visible on the red scene. */
.m-ball { position: fixed; z-index: 34; right: var(--pad); top: calc(env(safe-area-inset-top) + 12px); width: 58px; height: 58px; display: flex; border-radius: 52% 48% 50% 50% / 56% 54% 46% 44%; background: var(--accent); color: var(--on-accent); align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--cream), 0 12px 26px -12px rgba(43, 26, 31, 0.6); transition: border-radius 0.6s cubic-bezier(.3, 1.6, .4, 1), transform 0.3s; }
.m-ball:hover { border-radius: 46% 54% 44% 56% / 50% 58% 42% 50%; transform: scale(1.06); }
.m-ball i { position: absolute; left: 18px; right: 18px; height: 3px; border-radius: 3px; background: currentColor; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; }
.m-ball i:nth-child(1) { transform: translateY(-7px); }
.m-ball i:nth-child(3) { transform: translateY(7px); }
.menu-open .m-ball i:nth-child(1) { transform: rotate(45deg); }
.menu-open .m-ball i:nth-child(2) { opacity: 0; }
.menu-open .m-ball i:nth-child(3) { transform: rotate(-45deg); }
.m-sheet { position: fixed; z-index: 33; right: var(--pad); top: calc(env(safe-area-inset-top) + 84px); width: min(380px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 14px 12px 16px; border-radius: 30px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(43, 26, 31, 0.55); clip-path: circle(0 at calc(100% - 29px) -43px); transition: clip-path 0.6s cubic-bezier(.7, 0, .2, 1); }
@media (max-width: 899px) { .m-sheet { right: 16px; } }
.m-sheet[hidden] { display: none; }
.menu-open .m-sheet { clip-path: circle(170% at calc(100% - 29px) -43px); }
.m-sheet a { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 14px; border-radius: 18px; font-weight: 800; font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -0.02em; line-height: 1.05; font-variation-settings: 'opsz' 48; transition: background-color 0.25s; }
.m-sheet a:hover, .m-sheet a:focus-visible { background: color-mix(in srgb, var(--c2) 42%, transparent); }
.m-sheet a::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 52% 48% 50% 50% / 56% 54% 46% 44%; background: var(--c2); box-shadow: inset 0 -3px 0 rgba(43, 26, 31, 0.12); }
.m-sheet a:nth-of-type(2)::before { background: var(--c3); }
.m-sheet a:nth-of-type(3)::before { background: var(--c5); }
.m-sheet a.on::before { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5.5px var(--accent); }
.sheet-drips { position: absolute; left: 26px; top: calc(100% - 1px); width: calc(100% - 52px); height: 90px; overflow: visible; pointer-events: none; }
.sheet-drips path { fill: var(--cream); }

/* ================= Sound: three drips hanging from a bar; they swing while the sound is on ================= */
.snd { position: fixed; z-index: 34; right: calc(var(--pad) + 70px); top: calc(env(safe-area-inset-top) + 15px); width: 52px; height: 52px; border-radius: 50%; display: flex; justify-content: center; align-items: flex-start; gap: 5px; padding-top: 19px; background: var(--cream); color: var(--ink); box-shadow: 0 0 0 3px var(--cream), 0 12px 26px -14px rgba(43, 26, 31, 0.6); transition: transform 0.3s; }
.snd:hover { transform: scale(1.06); }
.snd::before { content: ''; position: absolute; left: 14px; right: 14px; top: 16px; height: 4px; border-radius: 3px; background: currentColor; }
.snd i { display: block; width: 5px; height: 5px; border-radius: 0 0 4px 4px; background: currentColor; transform-origin: 50% 0; opacity: 0.55; transition: opacity 0.3s, height 0.3s; }
.snd[aria-pressed="true"] i { opacity: 1; animation: snd-drip 1.15s cubic-bezier(.45, 0, .3, 1) infinite; }
.snd[aria-pressed="true"] i:nth-child(2) { animation-delay: -0.4s; }
.snd[aria-pressed="true"] i:nth-child(3) { animation-delay: -0.8s; }
@keyframes snd-drip { 0%, 100% { height: 6px; } 50% { height: 17px; } }
@media (prefers-reduced-motion: reduce) { .snd[aria-pressed="true"] i { animation: none; height: 12px; } }

/* ================= Flavour stickers: retro badges with a scalloped edge (v4 variant D) ================= */
.st { --st-size: 120px; --st-c: var(--cream); --st-ink: var(--ink); position: relative; display: inline-grid; place-items: center; line-height: 1; }
.st-d { width: var(--st-size); height: var(--st-size); }
.st-d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28)); }
.st-d .bg { fill: var(--st-c); }
.st-d .ring { fill: none; stroke: var(--st-ink); stroke-opacity: 0.45; stroke-width: 1.4; stroke-dasharray: 2 3; }
/* The owner's pick of the four sticker fonts (r-0380): A, Pacifico. */
.st-d b { position: relative; max-width: 80%; text-align: center; white-space: normal; font: 400 calc(var(--st-size) * 0.125) / 1.12 'Pacifico', cursive; color: var(--st-ink); }
.disc-st { position: absolute; z-index: 5; left: 0; top: 0; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.disc-st .st { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }

/* ================= Footer: the page above melts into it (v4 variant A) ================= */
.foot-a { position: relative; background: var(--c2); color: var(--on2); padding: clamp(84px, 13vh, 120px) var(--pad) clamp(32px, 6vh, 56px); }
.foot-a svg { position: absolute; left: 0; top: -1px; width: 100%; height: 120px; overflow: visible; }
.foot-a svg path { fill: var(--c6); }
.foot-a .row { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.foot-a .logo { width: 140px; }
.foot-a .ig { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.foot-a .sign { font-family: 'Shrikhand', var(--display); font-weight: 400; letter-spacing: 0; }
.foot-a .credit { position: relative; z-index: 1; max-width: 1180px; margin: 22px auto 0; font-size: 14px; font-weight: 500; opacity: .72; text-align: center; }
/* r-0405, phone: the footer stands in one centred column, the logo first; the signature in the headline's font. */
@media (max-width: 899px) {
  .foot-a .row { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 18px; }
  .foot-a .sign { text-wrap: balance; }
}

/* ================= Buttons: a pill whose lower edge melts; the drops grow under the cursor (v4 variant B) ================= */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; font-weight: 700; font-size: 17px; color: var(--b-ink); background: var(--b-bg); border-radius: 999px; margin-bottom: 14px; transition: transform 0.25s, color 0.35s, background-color 0.35s; }
.btn.solid { --b-bg: var(--accent); --b-ink: var(--on-accent); }
.btn.light { --b-bg: var(--cream); --b-ink: var(--ink); }
.btn.ink { --b-bg: var(--ink); --b-ink: var(--cream); }
.btn:active { transform: scale(0.95, 0.92); }
.btn > span { position: relative; z-index: 1; }
.btn .drips { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 0; z-index: 0; }
.btn .drips i { position: absolute; top: -10px; width: var(--w); height: calc(10px + var(--h)); left: var(--x); border-radius: 0 0 999px 999px; background: var(--b-bg); transform-origin: 50% 0; transform: scaleY(0.35); transition: transform var(--t, 0.6s) cubic-bezier(.3, 1.4, .4, 1) var(--d, 0s); }
.btn .drips i:nth-child(2) { animation: drip-idle 3.2s ease-in-out infinite; }
.btn:hover .drips i { transform: scaleY(1); }
@keyframes drip-idle { 0%, 70%, 100% { transform: scaleY(0.35); } 85% { transform: scaleY(0.7); } }

/* ================= Before the gloved hand: the phrase of cream on the red (trans A, the owner's pick) ================= */
.phrase { position: absolute; z-index: 9; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.phrase canvas { pointer-events: none; }
.phrase p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ================= Review tools: palette and variants (only for the owner's review) ================= */
.review { position: fixed; z-index: 40; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); display: grid; gap: 8px; }
.review > button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink); box-shadow: 0 8px 22px -12px rgba(43, 26, 31, 0.7); font: 800 13px/1 var(--display); }
.review .palbtn span { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--c2) 0 25%, var(--c3) 0 50%, var(--c4) 0 75%, var(--c5) 0); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.15); }
.rvpanel, .palpanel { position: fixed; z-index: 41; left: 64px; bottom: calc(env(safe-area-inset-bottom) + 12px); width: min(340px, calc(100vw - 80px)); max-height: calc(100vh - 40px); overflow: auto; padding: 14px; border-radius: 22px; background: var(--cream); color: var(--ink); font: 500 14px/1.35 var(--display); box-shadow: 0 24px 60px -24px rgba(43, 26, 31, 0.6); display: grid; gap: 6px; }
.rvpanel[hidden], .palpanel[hidden], .review > button[hidden] { display: none; }
.rv-title, .pal-title { opacity: 0.6; font-size: 13px; margin: 2px 4px 6px; }
.rv-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid rgba(43, 26, 31, 0.08); }
.rv-name { font-weight: 700; display: grid; }
.rv-name em { font-style: normal; font-weight: 500; font-size: 12px; opacity: 0.6; }
.rv-opts { display: flex; gap: 4px; }
.rv-opts button { width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: 13px; background: rgba(43, 26, 31, 0.07); }
.rv-opts button.on { background: var(--accent); color: var(--on-accent); }
.rv-stack { grid-template-columns: 1fr; gap: 6px; }
.rv-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-sub i { font-style: normal; font-size: 12px; opacity: 0.6; }
.rv-opts button.sw { background: var(--sw); box-shadow: inset 0 0 0 1.5px rgba(43, 26, 31, 0.18); }
.rv-opts button.sw.on { box-shadow: inset 0 0 0 1.5px rgba(43, 26, 31, 0.18), 0 0 0 2.5px var(--cream), 0 0 0 4.5px var(--accent); }
.pal-set { display: grid; gap: 6px; padding: 10px; border-radius: 16px; text-align: left; font-weight: 600; }
.pal-set.on { background: rgba(43, 26, 31, 0.08); }
.pal-row { display: flex; gap: 4px; }
.pal-row i { flex: 1; height: 22px; border-radius: 7px; }
.pal-note { font-size: 12px; opacity: 0.6; margin: 4px; }
@media (max-width: 899px) {
  .review { left: auto; right: 8px; bottom: auto; top: 64%; }
  .rvpanel, .palpanel { left: auto; right: 58px; bottom: auto; top: 26%; }
}

/* ================= Headline colour (r-0388, r-0391): four light and four dark, picked in the panel ================= */
/* The two headlines the owner marked take --title. A light colour gets a soft warm shadow on the light picture of the
   mountain, and the plate under it turns strawberry red (the page swaps the cream), or light text would not read. */
.hero-copy h1, .dplate h2 { color: var(--title, var(--ink)); transition: color 0.3s; }
[data-title^="l"] .hero-copy h1 { text-shadow: 0 1px 2px rgba(43, 26, 31, 0.28), 0 4px 26px rgba(43, 26, 31, 0.32); }
[data-title^="l"] .dplate .flat { background: var(--c4); }

/* ================= Flavours: four layouts (r-0389) ================= */
/* Each word and each sticker is placed by the page from the layout's numbers; the words can lean, cross or run off
   the screen, the stickers sit along, around or on top of the letters. */
.sab-free .word { position: absolute; left: 0; top: 0; display: block; transform-origin: 50% 50%; will-change: transform; }
.sab-free .word canvas { position: absolute; left: 0; top: 0; width: 100%; }
.sab-free .word ul { position: absolute; inset: 0; display: block; }
.sab-free .word li { position: absolute; left: 0; top: 0; display: block; }
.sab-free .word li .st { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; margin: calc(var(--st-size) / -2) 0 0 calc(var(--st-size) / -2); }
.sab-free .note { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(env(safe-area-inset-bottom) + 22px + var(--bar)); margin: 0; z-index: 3; }

/* ================= First screen (r-0404): Shrikhand, the owner's pick of four headline fonts ================= */
.hero-copy h1 { font-family: var(--h-font, var(--display)); font-weight: var(--h-wt, 800); letter-spacing: var(--h-ls, -0.02em); line-height: var(--h-lh, 0.96); }
[data-hfont="b"] { --h-font: 'Shrikhand', var(--display); --h-wt: 400; --h-ls: 0; --h-lh: 1.02; --h-k: 0.86; }
/* Word and letter layers for the entrances: the word moves out on scroll, its inner layer and letters come in. */
.hero-copy h1 .wi, .hero-copy h1 .ch { display: inline-block; }
.hero-copy h1 .ch { transform-origin: 50% 100%; }
/* Before the entrance runs, the headline is hidden so it does not flash. */
.js:not(.ready) .hero-copy h1 .ch { visibility: hidden; }
.js.h-in .hero-copy h1 .ch { visibility: visible; }