/* ŌTĒ by Hind · coming soon
   An old Baghdad street at dawn, painted in Hind's hand. Everything positioned
   on the painting uses % of the art (2688 × 1152) or cqw of the canvas. */

@property --lift { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  /* the brand kit's palette (exact, from the kit's own swatches) */
  --orange: #F45829;
  --orange-deep: #D4441A;
  --magenta: #F10FCC;
  --purple: #780D61;
  --teal: #008694;
  --green: #669417;
  --paper: #F6EEE8;           /* the kit's page colour, a touch lighter for cards */
  --paper-2: #EDE1D8;

  /* sampled from Hind's paintings */
  --clay: #BA713C;
  --cream: #F4D9AA;
  --mustard: #BD9600;
  --wall: #E4A93C;
  --shutter: #2A9EA3;          /* the painted shop shutter */
  --shutter-deep: #1E7479;
  --sky: #849CB4;
  --navy: #2C3E73;
  --ink: #2A1D17;
  --ink-soft: #66534A;
  --airmail-red: #C8372D;
  --airmail-blue: #2F5DA8;
  --postmark: #2E2A52;

  /* the kit: Poppins for English, "Art Plot" for display (Baloo stands in until we have the font file),
     hand-drawn lettering for Arabic (Hind's own where we have it, Aref Ruqaa elsewhere) */
  --font-display: 'Baloo Bhaijaan 2', 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'Aref Ruqaa', 'Baloo Bhaijaan 2', serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-paper: 0 2px 0 rgba(59, 38, 22, .08), 0 14px 34px rgba(59, 38, 22, .28), 0 40px 80px rgba(20, 10, 4, .25);

  /* crayon grain used on every paper surface */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #E9B35A;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[lang="ar"] { font-family: var(--font-ar); font-weight: 700; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- loader */
.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: .3rem;
  background: var(--paper) var(--grain);
  transition: opacity .9s ease, visibility .9s;
}
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
.loader .istikan--loader { height: 96px; }   /* beats the small chapter-glass size on phones */
.istikan--loader .istikan__full { animation: pour 2.6s var(--ease-out) infinite; }
@keyframes pour { 0%, 8% { clip-path: inset(100% 0 0 0); } 72%, 100% { clip-path: inset(0 0 0 0); } }
.loader__logo { width: 156px; margin-top: .9rem; }
.loader__tag { width: 118px; margin: .1rem 0 .5rem; }
.loader__en { margin: 0; color: var(--ink-soft); font-size: .88rem; }

/* ---------------------------------------------------------------- street */
.street {
  position: fixed; inset: 0;
  display: flex; align-items: flex-end;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(#F6BE97, #E9B35A);
}
.street::-webkit-scrollbar { display: none; }
html.is-pan .street { overflow: clip; }

.street__canvas {
  position: relative; flex: none;
  height: max(100vh, calc(100vw * 1648 / 3840));
  height: max(100svh, calc(100vw * 1648 / 3840));
  aspect-ratio: 3840 / 1648;
  container-type: inline-size;
  will-change: transform;
}
.street__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* dawn: the street starts cool and dim, then the sun warms it */
.dawn {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(60% 50% at 8% 12%, rgba(255, 214, 150, .0), rgba(40, 50, 110, .0) 60%),
    linear-gradient(180deg, rgba(38, 48, 108, .62), rgba(60, 40, 90, .48));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 2.8s ease 0.2s;
}
body.is-dawn .dawn { opacity: 1; transition: none; }

.sunglow {
  position: absolute; left: 6.7%; top: 7.8%;
  width: 22cqw; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .75), rgba(255, 210, 140, .25) 55%, transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: breathe 7s ease-in-out infinite;
}
body.is-dawn .sunglow { opacity: 0; scale: .6; }
.sunglow { transition: opacity 3s ease .4s, scale 3s var(--ease-out) .4s; }
@keyframes breathe { 50% { filter: brightness(1.15); } }

/* ---------------------------------------------------------------- shutter */
.shutter {
  position: absolute; left: 39.922%; top: 57.039%; width: 14.375%; height: 34.587%;
  pointer-events: none;
  transition: --lift 2.2s var(--ease-out);
}
.shutter__open, .shutter__closed { position: absolute; inset: 0; width: 100%; height: 100%; }
.shutter__closed { clip-path: inset(0 0 calc(var(--lift) * 100%) 0); }
.shutter__bar {
  position: absolute; left: -1.5%; right: -1.5%;
  bottom: calc(var(--lift) * 100% - .45cqw);
  height: .9cqw;
  background:
    linear-gradient(90deg, transparent 44%, #6f6a60 44% 56%, transparent 56%) center 100% / 100% 45% no-repeat,
    linear-gradient(#58c2c4, var(--shutter-deep));
  border: .12cqw solid #173c3f;
  border-radius: .2cqw;
  box-shadow: 0 .25cqw .35cqw rgba(0, 0, 0, .35);
  opacity: calc(min(var(--lift) * 40, 1));
}
.shutter__glow {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--lift) * 100%);
  background: radial-gradient(80% 60% at 50% 100%, rgba(255, 200, 110, .45), transparent 70%);
  mix-blend-mode: screen;
  animation: flicker 5s ease-in-out infinite;
}

.boy { position: absolute; left: 35.911%; top: 77.852%; width: 4.896%; height: 20.388%; pointer-events: none; }

/* ---------------------------------------------------------------- lettered boards
   Boxes are measured from the painting. Line boxes are centred with flex, then each
   script is nudged so its INK sits on the board's centre line (Aref Ruqaa's glyphs ride
   ~.4em below its line centre; Baloo caps ~.08em above), measured with canvas metrics. */
.board {
  position: absolute; display: flex; align-items: center; justify-content: center;
  pointer-events: none; line-height: 1; white-space: nowrap;
}
.board__ar, .board__en { display: block; line-height: 1; }
.board__en { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; translate: 0 .08em; }

.board--tea { left: 2.604%; top: 48.422%; width: 16.016%; height: 4.976%; gap: .9cqw; color: #FCE7BE; text-shadow: 0 .1cqw 0 rgba(0, 0, 0, .35); }
.board--tea .board__ar { font-size: 1.85cqw; translate: 0 -.28em; }
.board--tea .board__en { font-size: 1cqw; letter-spacing: .1em; color: #F7C66A; }

.board--shop { left: 38.542%; top: 49.454%; width: 17.448%; height: 5.461%; gap: 1.6cqw; }
.board--shop img { height: 86%; width: auto; mix-blend-mode: multiply; }
.board--shop::before, .board--shop::after { content: '✦'; font-size: 1.1cqw; color: var(--clay); opacity: .8; }

.board--post { left: 60.417%; top: 56.735%; width: 11.849%; height: 5.158%; gap: .7cqw; color: var(--navy); }
.board--post .board__ar { font-size: 1.6cqw; color: var(--airmail-red); translate: 0 -.4em; }
.board--post .board__en { font-size: .85cqw; letter-spacing: .1em; }

/* the cloth banner: the button covers the cloth's bounding box; the SVG's viewBox is that same box in art px */
.banner {
  position: absolute; left: 59.661%; top: 30.643%; width: 20.729%; height: 11.468%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.banner__svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.banner__l1 { font-family: var(--font-display); font-weight: 800; font-size: 54px; fill: var(--orange); transition: fill .25s; }
.banner__l2 { font-family: var(--font-body); font-weight: 600; font-size: 25px; fill: var(--ink); }
.banner:hover .banner__l1 { fill: var(--orange-deep); }

/* ---------------------------------------------------------------- ambient life */
.steam { position: absolute; width: 2.4cqw; height: 6cqw; translate: -50% -100%; pointer-events: none; }
.steam i {
  position: absolute; bottom: 0; left: 35%; width: 1cqw; height: 2.2cqw; border-radius: 50%;
  background: rgba(255, 250, 240, .75); filter: blur(.35cqw); opacity: 0;
  animation: steam 3.6s ease-in infinite;
}
.steam i:nth-child(2) { left: 10%; animation-delay: 1.2s; }
.steam i:nth-child(3) { left: 55%; animation-delay: 2.4s; }
.steam--samovar { left: 7.8%; top: 74.6%; }
.steam--tray { left: 40.3%; top: 87.6%; width: 1.6cqw; height: 4cqw; }
.steam--tray i { width: .6cqw; height: 1.4cqw; }
@keyframes steam {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: translate(.8cqw, -4.4cqw) scale(1.7); }
}

.lamp {
  position: absolute; left: 46.3%; top: 22.5%; width: 10cqw; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .55), rgba(255, 180, 90, .15) 60%, transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: flicker 4.5s ease-in-out infinite;
}
@keyframes flicker { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 55% { opacity: .7; } 70% { opacity: .95; } }

.flyby {
  position: absolute; left: 0; top: 8%; width: 3cqw; pointer-events: none; opacity: 0;
}
.flyby.is-flying { animation: flyby 9s linear forwards; }
@keyframes flyby {
  0% { opacity: 1; transform: translate(-6cqw, 6cqw) rotate(-6deg); }
  50% { transform: translate(50cqw, -1cqw) rotate(-2deg); }
  100% { opacity: 1; transform: translate(106cqw, 3cqw) rotate(-8deg); }
}

/* ---------------------------------------------------------------- hotspots */
.spot {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 1cqw;
}
.spot--tea { left: 2.995%; top: 54.612%; width: 13.021%; height: 37.318%; }
.spot--window { left: 37.578%; top: 12.136%; width: 19.349%; height: 34.648%; }
.spot--shop { left: 39.922%; top: 57.039%; width: 14.375%; height: 34.587%; }
.spot--post { left: 61.719%; top: 65.534%; width: 11.979%; height: 16.080%; }
/* hovering a place warms it with lamplight */
.spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(255, 226, 160, .42), rgba(255, 210, 140, .12) 70%, transparent);
  opacity: 0; transition: opacity .35s ease;
}
.spot:hover::after, .spot:focus-visible::after { opacity: 1; }

/* the marker: a paper label with an orange icon badge that sends out soft ripples,
   pops in once the street wakes up, then gives a little hop now and then */
.tag {
  position: absolute; left: 50%; bottom: calc(100% + .4rem); translate: -50% 0;
  display: flex; align-items: center; gap: .55rem;
  padding: .32rem .95rem .32rem .32rem;
  background: var(--paper) var(--grain);
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 4px 0 rgba(59, 38, 22, .85);
  white-space: nowrap; pointer-events: none;
  rotate: -2deg;
  transition: translate .35s var(--ease-spring), rotate .35s var(--ease-spring), scale .55s var(--ease-spring) var(--d, 0s), background-color .3s;
  animation: sway 5s ease-in-out infinite;
}
body.is-loading .tag, body.is-dawn .tag, body:not(.is-awake) .tag { scale: 0; }
.tag::before { /* string */
  content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: .6rem; background: var(--ink);
}
.tag__pin {
  position: relative; flex: none; display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--orange); color: #fff; border: 2px solid var(--ink);
  animation: hop 7s ease-in-out var(--d, 0s) infinite;
}
.tag__pin svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag__pin::before, .tag__pin::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 3px solid var(--orange); opacity: 0; pointer-events: none;
  animation: sonar 2.8s ease-out infinite;
}
.tag__pin::after { animation-delay: 1.4s; }
@keyframes sonar { 0% { scale: 1; opacity: .75; } 100% { scale: 2.3; opacity: 0; } }
@keyframes hop { 0%, 6%, 100% { translate: 0 0; } 2.5% { translate: 0 -5px; } 4.5% { translate: 0 1px; } }
.tag__txt { display: grid; justify-items: start; text-align: left; }
.tag b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.tag small { font-size: .74rem; line-height: 1.2; color: var(--ink-soft); }
.tag--hot { background-color: var(--orange); color: #fff; }
.tag--hot small { color: #FFE6D6; }
.tag--hot .tag__pin { background: var(--paper); color: var(--orange-deep); }
.tag--hot .tag__pin::before, .tag--hot .tag__pin::after { border-color: #FFF4E8; }
.tag--pin { padding: .32rem; }
.spot:hover .tag, .spot:focus-visible .tag { translate: -50% -.35rem; rotate: 1.5deg; }
.spot:hover .tag__pin, .spot:focus-visible .tag__pin { animation: none; }
/* they pop in one after another, left to right */
.spot--window, .spot--b-window { --d: .15s; }
.spot--shop, .spot--b-post { --d: .3s; }
.spot--post, .spot--b-shop { --d: .45s; }
.spot--tea .tag { bottom: auto; top: 6%; }
.spot--tea .tag::before { display: none; }
.spot--shop .tag { bottom: auto; top: 14%; }
.spot--shop .tag::before { display: none; }
.spot--window .tag { bottom: auto; top: -4%; }
.spot--window .tag::before { display: none; }
.spot--post .tag { bottom: auto; top: calc(100% + .5rem); }
.spot--post .tag::before { top: auto; bottom: 100%; }
@keyframes sway { 50% { rotate: 1deg; } }


/* ================================================================ BUILDING (phones & portrait screens)
   Two 9:16 paintings stacked into one 2160 × 7680 facade. Everything is placed in % of that
   stacked canvas: y% = (half-offset + y-in-half) / 2. Bottom half starts at 50%. */
.building {
  position: fixed; inset: 0; display: none;
  overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: #E9B35A;
}
.building::-webkit-scrollbar { display: none; }
html.is-tall .street { display: none; }
html.is-tall .building { display: block; }
.building__canvas { position: relative; width: 100%; aspect-ratio: 2160 / 7680; container-type: inline-size; }
.building__art { position: absolute; left: 0; width: 100%; height: 50%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.building__art--top { top: 0; }
.building__art--bottom { top: 50%; }

/* ground floor shop: shutter layers, measured from the bottom painting (opening x 420–1726, y 2140–3426 of 2160 × 3840) */
.shutter--b { left: 19.444%; top: 77.865%; width: 60.463%; height: 16.745%; }
.shutter--b .shutter__bar { height: 2.2cqw; bottom: calc(var(--lift) * 100% - 1.1cqw); border-width: .35cqw; border-radius: .5cqw; }
.boy--b { left: 0.185%; top: 86.771%; width: 19.167%; height: 10.052%; }

/* signs */
.board--b-tea { left: 21.296%; top: 25.938%; width: 57.639%; height: 2.617%; gap: 3.2cqw; color: #7A3A18; }
.board--b-tea .board__ar { font-size: 7.4cqw; translate: 0 -.28em; color: var(--airmail-red); }
.board--b-tea .board__en { font-size: 3.8cqw; letter-spacing: .12em; color: var(--navy); }
.board--b-post { left: 59.954%; top: 53.008%; width: 30.370%; height: 1.966%; gap: 2.4cqw; color: var(--navy); }
.board--b-post .board__ar { font-size: 6.4cqw; color: var(--airmail-red); translate: 0 -.4em; }
.board--b-post .board__en { font-size: 3.4cqw; letter-spacing: .1em; }
.board--b-shop { left: 10.648%; top: 73.945%; width: 80.093%; height: 2.292%; gap: 5cqw; }
.board--b-shop img { height: 86%; width: auto; mix-blend-mode: multiply; }
.board--b-shop::before, .board--b-shop::after { content: '✦'; font-size: 4cqw; color: var(--clay); opacity: .8; }

/* cloth banner between the balconies (cloth x 16.5–93.8%, y 67.9–72.8% of the stack) */
.banner--b { left: 14.167%; top: 67.305%; width: 79.352%; height: 4.844%; }
.banner__l1--b { font-size: 104px; }
.banner__l2--b { font-size: 48px; }

/* ambient */
.steam--b-samovar { left: 20%; top: 17.3%; width: 9cqw; height: 22cqw; }
.steam--b-samovar i { width: 3.5cqw; height: 8cqw; filter: blur(1.2cqw); }
.steam--b-tray { left: 14.8%; top: 91.6%; width: 5cqw; height: 12cqw; }
.steam--b-tray i { width: 2cqw; height: 4.6cqw; filter: blur(.8cqw); }
.lamp--b { left: 49.63%; top: 35.03%; width: 30cqw; }
.sunglow--b { left: 15.74%; top: 4.69%; width: 70cqw; }
#building .flyby { width: 11cqw; top: 3%; }
#building .flyby.is-flying { animation-name: flyby-b; }
@keyframes flyby-b {
  0% { opacity: 1; transform: translate(-14cqw, 16cqw) rotate(-6deg); }
  50% { transform: translate(50cqw, 2cqw) rotate(-2deg); }
  100% { opacity: 1; transform: translate(118cqw, 10cqw) rotate(-8deg); }
}

/* places */
.spot--b-tea { left: 4.630%; top: 9.115%; width: 90.741%; height: 14.974%; }
.spot--b-window { left: 28.704%; top: 30.469%; width: 46.296%; height: 14.844%; }
.spot--b-post { left: 54.167%; top: 55.859%; width: 42.593%; height: 10.417%; }
.spot--b-shop { left: 19.444%; top: 77.865%; width: 60.463%; height: 16.745%; }
.spot--b-tea .tag { bottom: auto; top: 4%; }      /* on the awning, so the minaret and skyline stay clear */
.spot--b-tea .tag::before { display: none; }
.spot--b-window .tag { bottom: auto; top: 6%; }
.spot--b-shop .tag { bottom: auto; top: 12%; }
.spot--b-window .tag::before, .spot--b-shop .tag::before { display: none; }
.spot--b-post .tag { left: 16%; bottom: auto; top: 86%; }   /* on the sill, clear of the postman's face */
.spot--b-post .tag::before { display: none; }

/* on the building the scroll hint points up */
html:not(.is-tall) .hint--up { display: none !important; }
html.is-tall .hint--side { display: none !important; }
html.is-tall .hint--up { display: block; }
html.is-tall .hint--up span { animation-name: nudge-up; }
@keyframes nudge-up { 50% { transform: translateY(-4px); } }

/* ---------------------------------------------------------------- HUD */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: max(14px, env(safe-area-inset-top)) clamp(14px, 3vw, 36px) 0;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__brand {
  display: block; width: clamp(128px, 14vw, 190px);
  padding: .5rem .8rem .4rem; margin-top: -2px;
  background: var(--paper) var(--grain);
  border: 2px solid var(--ink); border-radius: 4px 4px 16px 18px;
  box-shadow: 3px 4px 0 rgba(59, 38, 22, .85);
  rotate: -1.5deg;
}
.hud__soon {
  margin: .5rem 0 0; align-self: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .78rem;
  color: var(--ink);
}
.hud__soon span { background: rgba(251, 241, 220, .85); padding: .3rem .8rem; border-radius: 999px; border: 1.5px dashed var(--ink); }
.hud__join {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .45rem 1rem .45rem .45rem;
  background: var(--orange); color: #fff;
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 4px 0 var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1;
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.hud__join:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 5px 7px 0 var(--ink); }
.hud__join:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.hud__join-val {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: var(--paper); color: var(--orange-deep); font-weight: 800; font-size: .95rem;
  --r: 3px;
  padding: var(--r);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(var(--r) * -1) calc(var(--r) * -1) / calc(var(--r) * 2) calc(var(--r) * 2) round padding-box;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(var(--r) * -1) calc(var(--r) * -1) / calc(var(--r) * 2) calc(var(--r) * 2) round padding-box;
}
.hud__join-txt b { font-weight: 800; }

/* ---------------------------------------------------------------- walk bar */
.walk {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 10; translate: -50% 0;
  display: flex; gap: .35rem; padding: .35rem;
  background: rgba(251, 241, 220, .92) var(--grain);
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 4px 0 rgba(59, 38, 22, .85);
  backdrop-filter: blur(6px);
}
.walk button {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .5rem .9rem; border: 0; border-radius: 999px; background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap;
  transition: background-color .25s, transform .25s var(--ease-spring);
}
.walk button:hover { background: rgba(243, 88, 40, .14); transform: translateY(-2px); }
.walk svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.walk .walk__join { background: var(--orange); color: #fff; }
.walk .walk__join:hover { background: var(--orange-deep); }

.hint {
  position: fixed; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4.2rem); z-index: 9; translate: -50% 0;
  margin: 0; padding: .25rem .8rem; border-radius: 999px;
  background: rgba(59, 38, 22, .72); color: var(--paper); font-size: .8rem; white-space: nowrap;
  pointer-events: none; transition: opacity .6s;
  display: none;
}
.hint span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
.hint span:last-child { animation-direction: reverse; }
@keyframes nudge { 50% { transform: translateX(-4px); } }
html.has-scrolled .hint { opacity: 0; }

.foot {
  position: fixed; left: clamp(14px, 3vw, 36px); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 9;
  display: grid; justify-items: start; gap: 0;
  padding: .35rem .8rem; border-radius: 12px; background: rgba(251, 241, 220, .86); border: 1.5px solid rgba(59, 38, 22, .5);
  font-size: .78rem; line-height: 1.35; color: var(--ink);
  text-shadow: 0 1px 0 rgba(251, 241, 220, .8);
}
.foot a { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- scenes (dialogs) */
.scene {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  overflow: clip;
}
.scene::backdrop { background: rgba(20, 10, 4, 0); transition: background-color .5s ease; }
.scene.is-open::backdrop { background: rgba(20, 10, 4, .35); }
.scene__bg {
  position: absolute; inset: -3%;
  background: center / cover no-repeat;
  opacity: 0; scale: 1.08;
  transition: opacity .6s ease, scale 1.2s var(--ease-out);
}
.scene__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(30, 14, 4, .45)); }
.scene.is-open .scene__bg { opacity: 1; scale: 1; }
.scene--story .scene__bg { background-image: url(../images/tea-house.webp); }
.scene--hind .scene__bg { background-image: url(../images/studio.webp); }
.scene--shop .scene__bg { background-image: url(../images/shop-scene.webp); }
.scene--post .scene__bg { background-image: url(../images/post-office.webp); background-position: 60% 40%; }

.scene__wrap {
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column;
  padding: clamp(16px, 4vh, 48px) clamp(12px, 3vw, 40px);
}

.card {
  position: relative; width: min(680px, 100%); margin: auto;
  display: flex; flex-direction: column;
  max-height: calc(100svh - 2 * clamp(16px, 4vh, 48px));
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.1rem, 3.4vw, 2.6rem) 1.1rem;
  background: var(--paper) var(--grain);
  border: 2px solid var(--ink);
  border-radius: 18px 24px 16px 26px;
  box-shadow: var(--shadow-paper);
  opacity: 0; translate: 0 30px; rotate: -1deg;
  transition: opacity .5s ease .12s, translate .7s var(--ease-out) .12s, rotate .7s var(--ease-out) .12s;
}
.scene.is-open .card { opacity: 1; translate: 0 0; rotate: 0deg; }
.card--menu { box-shadow: var(--shadow-paper), inset 0 0 0 7px var(--paper), inset 0 0 0 9px var(--clay); }
.card--sketch {
  background:
    linear-gradient(rgba(132, 156, 180, .14) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--paper) var(--grain);
  padding-top: clamp(2rem, 4vw, 2.8rem);
}
.card--sketch::before { /* spiral binding */
  content: ''; position: absolute; left: 6%; right: 6%; top: -12px; height: 26px;
  background: radial-gradient(circle at 50% 60%, #fff 0 5px, var(--ink) 5.5px 7px, transparent 7.5px) 0 0 / 30px 26px repeat-x;
}
.card--tag::before { /* punched hole + string */
  content: ''; position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; translate: -50% 0;
  border-radius: 50%; background: rgba(20, 10, 4, .55); box-shadow: inset 0 0 0 2px var(--ink);
}

.scene__close {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; align-self: flex-start; flex: none;
  margin: 0 0 .6rem; padding: .3rem .8rem; border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; font-size: .85rem; font-weight: 600;
  transition: background-color .25s;
}
.scene__close:hover { background: rgba(243, 88, 40, .14); }
.scene__close--float {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: clamp(12px, 3vw, 36px); z-index: 5;
  background: var(--paper); box-shadow: 3px 4px 0 rgba(59, 38, 22, .85); border-width: 2px;
}

.card__head { margin-bottom: .6rem; }
.eyebrow { margin: 0; font-size: .78rem; letter-spacing: .08em; color: var(--teal); font-weight: 600; }
.eyebrow--art { display: flex; align-items: center; gap: .35rem; }
.ar-art { height: 2.1rem; width: auto; margin: -.3rem 0 -.2rem; }
.eyebrow [lang="ar"] { font-size: 1.35rem; letter-spacing: 0; color: var(--purple); }
.card h2 {
  margin: .1rem 0 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; color: var(--orange);
}

/* brand-kit doodles: stickers that break out of the cards, characters inside the pages */
.sticker { position: absolute; z-index: 3; height: auto; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(42, 29, 23, .12)); }
.sticker--chaykum { width: 96px; top: -40px; right: -22px; rotate: 9deg;
  filter: drop-shadow(0 0 1.5px #F6EEE8) drop-shadow(0 0 1.5px #F6EEE8) drop-shadow(0 0 1px #F6EEE8) drop-shadow(2px 3px 0 rgba(42, 29, 23, .18)); }   /* die-cut sticker edge */
.sticker--malwiya { width: 66px; top: 26px; right: 24px; rotate: 4deg; filter: none; opacity: .85; }
.sticker--tagline { width: 124px; top: 12px; right: 16px; rotate: -6deg; filter: none; }
.card--tag .card__head, .card--tag .shop__essence { padding-right: 120px; }
.doodle { float: right; width: min(34%, 180px); margin: .1rem 0 .6rem 1rem; rotate: 2.5deg; }
.chapter:nth-child(even) .doodle { rotate: -2.5deg; }
.frame img[src*="portrait-chai"] { background: #fff; }
.shop__essence { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.6; }
.shop__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.shop__teapot { flex: none; width: 104px; margin: 0 -6px -4px 0; rotate: -8deg; }
.envelope__coins { position: relative; height: 70px; margin-top: .5rem; }
.coin { position: absolute; height: auto; pointer-events: none; opacity: .85; mix-blend-mode: multiply; }
.coin--10 { width: 66px; left: 0; top: 0; rotate: -14deg; }
.coin--25 { width: 54px; left: 50px; top: 14px; rotate: 16deg; }

/* chapters */
.chapters {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding-right: .35rem; margin-right: -.35rem;
}
/* a soft fade tells you there's more to read above the nav */
.chapters.has-more {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
}
.chapter { display: none; }
.chapter.is-current { display: block; animation: chapter-in .5s var(--ease-out); }
.chapter.is-back { animation-name: chapter-back; }
@keyframes chapter-in { from { opacity: 0; transform: translateX(22px); } }
@keyframes chapter-back { from { opacity: 0; transform: translateX(-22px); } }
.chapter p { margin: 0 0 .85em; }
.chapter .lede { font-size: 1.22rem; line-height: 1.45; font-weight: 500; color: var(--ink); }
.chapter .lede--list { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.25; color: var(--purple); }
.chapter strong { color: var(--orange-deep); font-weight: 700; }
.chapter em { color: var(--purple); }
.ar-inline { font-size: 1.2em; line-height: 1; }
.triad { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.3; color: var(--purple); }
.sign-off { margin-top: 1rem !important; line-height: 1.4; }
.sign-off__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--orange); }
.chapter--end .btn { margin-top: .4rem; }
/* the chapter box scrolls, so leave room for the button's hard shadow or the box clips it */
.chapter--end { padding-bottom: 10px; }

.frame {
  float: right; width: min(42%, 230px); margin: .2rem 0 .8rem 1.1rem;
  padding: 7px; background: #fff;
  border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 4px 5px 0 rgba(59, 38, 22, .75);
}
.frame img { width: 100%; height: auto; }
.frame--tilt-l { rotate: -2.2deg; }
.frame--tilt-r { rotate: 2deg; }
.frame--wide { float: none; width: 100%; margin: 0 0 1rem; rotate: -.6deg; }

.card__nav {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin: .5rem 0 0; padding: .8rem 0 .15rem;
  border-top: 2px dashed rgba(59, 38, 22, .35);
}
.card--tag { overflow-y: auto; scrollbar-width: thin; }
.navbtn {
  cursor: pointer; padding: .45rem .9rem; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); font-weight: 700; line-height: 1;
  box-shadow: 2px 3px 0 var(--ink); transition: transform .2s var(--ease-spring), box-shadow .2s, opacity .2s;
}
.navbtn:hover { transform: translate(-1px, -2px); box-shadow: 3px 5px 0 var(--ink); }
.navbtn:disabled { opacity: .3; pointer-events: none; }
.navbtn--next { background: var(--orange); color: #fff; }
.glasses { display: flex; align-items: flex-end; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.glasses button { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }

/* painted istikan: the full glass is revealed bottom-up over the empty one */
.istikan { position: relative; display: block; height: 46px; aspect-ratio: 193 / 220; transition: transform .35s var(--ease-spring); }
.istikan img { position: absolute; inset: 0; width: 100%; height: 100%; }
.istikan__full { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); }
.glasses li.is-full .istikan__full { clip-path: inset(0 0 0 0); }
.glasses li:not(.is-full) .istikan { opacity: .78; }
.glasses li.is-current .istikan { transform: translateY(-4px) scale(1.1); }
.glasses button:hover .istikan { transform: translateY(-3px) rotate(-5deg); }
.istikan__steam { position: absolute; left: 50%; top: -2px; width: 0; height: 0; pointer-events: none; }
.istikan__steam::before, .istikan__steam::after {
  content: ''; position: absolute; bottom: 0; left: -3px; width: 5px; height: 12px; border-radius: 50%;
  background: rgba(110, 78, 51, .38); filter: blur(1.6px); opacity: 0;
}
.istikan__steam::after { left: 2px; }
.glasses li.is-current .istikan__steam::before { animation: wisp 2.4s ease-in 1s infinite; }
.glasses li.is-current .istikan__steam::after { animation: wisp 2.4s ease-in 2.2s infinite; }
@keyframes wisp {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(3px, -16px) scale(1.4); }
}
.glasses--pages button { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.glasses--pages li.is-full button { background: var(--ink); }
.glasses--pages li.is-current button { background: var(--orange); border-color: var(--orange); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  padding: .75rem 1.3rem; border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .25s var(--ease-spring), box-shadow .25s, background-color .25s;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-deep); }
.btn--ghost { background: var(--paper); }
.btn--link { border: 0; box-shadow: none; background: none; padding: .6rem 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.btn--link:hover { box-shadow: none; color: var(--orange-deep); }

@media (min-width: 1000px) and (min-aspect-ratio: 801/1000) {
  .scene--hind .card { width: min(600px, 100%); margin-left: auto; margin-right: clamp(16px, 5vw, 90px); }
}
/* tea house: the three women stand on the left, so the menu card hugs the right edge */
@media (min-width: 721px) and (min-aspect-ratio: 801/1000) {
  .scene--story .card { width: min(540px, 46vw); margin-left: auto; margin-right: clamp(10px, 1.6vw, 26px); }
  .scene--story .scene__bg { background-position: 0% 50%; }
  .scene--story .sticker--chaykum { right: 16px; top: -14px; }   /* the card hugs the edge and top: keep the sticker on screen */
}

/* shop card: sits left so the open shop in the backdrop stays visible */
.scene--shop .scene__bg { background-position: 70% 100%; }
.scene--shop .card { width: min(560px, 100%); }
@media (min-width: 1000px) and (min-aspect-ratio: 801/1000) {
  .scene--shop .card { margin-left: clamp(16px, 5vw, 90px); }
  .scene--shop .scene__wrap::after {
    content: 'A sneak peek at opening day ↘'; position: fixed; right: clamp(16px, 4vw, 60px); top: max(16px, 3vh);
    padding: .35rem .9rem; border-radius: 999px; border: 2px solid var(--ink);
    background: var(--paper); font-weight: 600; font-size: .88rem; box-shadow: 3px 4px 0 rgba(59, 38, 22, .85);
  }
}
.shop__intro { margin: 0 0 1rem; }
.collections { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .7rem; }
.collections li {
  display: grid; grid-template-columns: 104px 1fr; gap: .9rem; align-items: center;
  padding: .55rem; border: 2px solid var(--ink); border-radius: 12px 16px 12px 14px; background: rgba(255, 255, 255, .55);
  transition: transform .3s var(--ease-spring), background-color .3s;
}
.collections li:hover { transform: translateX(4px) rotate(-.4deg); background: #fff; }
/* each collection's character: a still that comes alive on hover (always playing on touch screens) */
.coll__art {
  position: relative; display: block; width: 104px; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 8px; border: 1.5px solid var(--ink); background: #fff;
  transition: rotate .35s var(--ease-spring), scale .35s var(--ease-spring);
}
.coll__art img, .coll__art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coll__art video { opacity: 0; transition: opacity .3s ease; }
.collections li.is-playing .coll__art video { opacity: 1; }
.collections li:hover .coll__art { rotate: -3deg; scale: 1.06; }
.collections li:nth-child(1) h3 { color: var(--orange-deep); }
.collections li:nth-child(2) h3 { color: var(--magenta); }
.collections li:nth-child(3) h3 { color: var(--teal); }
.collections h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; color: var(--orange-deep); }
.collections h3 [lang="ar"] { font-size: 1.05rem; color: var(--purple); margin-left: .3rem; }
.collections p { margin: .15rem 0 0; font-size: .92rem; line-height: 1.45; }
.shop__first { margin: 0 0 1rem; font-weight: 600; }

/* ---------------------------------------------------------------- post office */
.scene__wrap--post {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: clamp(70px, 10vh, 110px) clamp(12px, 5vw, 70px) clamp(20px, 5vh, 48px);
}
.bubble {
  position: absolute; right: clamp(16px, 4vw, 70px); top: max(14px, 2.5vh);
  width: min(390px, 38vw);
  padding: 1rem 1.2rem; background: #fff var(--grain);
  border: 2px solid var(--ink); border-radius: 26px 30px 24px 28px;
  box-shadow: 3px 4px 0 rgba(59, 38, 22, .85);
  font-size: .98rem; line-height: 1.5;
  opacity: 0; translate: 0 -10px; transition: opacity .5s ease .5s, translate .6s var(--ease-spring) .5s;
}
.bubble::after { /* tail pointing down to the postman */
  content: ''; position: absolute; right: 40%; bottom: -18px; width: 26px; height: 20px;
  background: #fff; border: 2px solid var(--ink); border-top: 0; border-left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: skewX(-20deg);
}
.bubble p { margin: 0; }
.bubble b { font-family: var(--font-display); font-size: 1.15rem; color: var(--orange-deep); display: block; line-height: 1.2; margin-bottom: .2rem; }
.bubble [lang="ar"] { font-size: 1.15em; }
.scene.is-open .bubble { opacity: 1; translate: 0 0; }

.post-stage { position: relative; width: min(740px, 100%); margin-top: auto; perspective: 1600px; }

.envelope {
  position: relative;
  padding: 14px;
  background:
    repeating-linear-gradient(135deg, var(--airmail-red) 0 16px, transparent 16px 26px, var(--airmail-blue) 26px 42px, transparent 42px 52px),
    #F8EDD5;
  border-radius: 6px;
  box-shadow: var(--shadow-paper);
  rotate: -1.2deg;
  opacity: 0; translate: 0 60px;
  transition: opacity .6s ease .2s, translate .8s var(--ease-out) .2s, rotate .8s var(--ease-out) .2s, scale .6s var(--ease-out);
  transform-origin: 50% 50%;
}
.scene.is-open .envelope { opacity: 1; translate: 0 0; }
.envelope__face {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(150px, 250px);
  grid-template-areas:
    'air  stamp'
    'offer stamp'
    'from to'
    'consent consent'
    'who  send';
  column-gap: 1.4rem; row-gap: .5rem;
  padding: 1.2rem 1.4rem 1.1rem;
  background: #F8EDD5 var(--grain);
  border-radius: 2px;
}
.envelope__airmail { grid-area: air; margin: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--airmail-blue); }
.envelope__airmail [lang="ar"] { letter-spacing: 0; font-size: 1rem; color: var(--airmail-red); }
.envelope__offer {
  grid-area: offer; margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.05; color: var(--orange);
}
.envelope__stampbox {
  grid-area: stamp; justify-self: end; position: relative;
  width: 132px; height: 164px;
  border: 2px dashed rgba(59, 38, 22, .45); border-radius: 4px;
  display: grid; place-items: center;
}
.envelope__stampbox-hint { font-size: .72rem; text-align: center; color: rgba(59, 38, 22, .55); padding: 0 .8rem; line-height: 1.3; }
.envelope__stamp { position: absolute; inset: -4px; display: grid; place-items: center; pointer-events: none; }
.postmark {
  position: absolute; left: -90px; top: 38px; width: 220px; height: 120px; overflow: visible;
  pointer-events: none; opacity: 0; rotate: -8deg;
}
.envelope__lbl { margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.envelope__from { grid-area: from; }
.envelope__to { grid-area: to; align-self: end; padding-bottom: .3rem; }
.envelope__addr { margin: .1rem 0 0; font-weight: 600; font-size: 1rem; line-height: 1.35; rotate: -1deg; }
.line { display: block; margin-top: .25rem; }
.line input {
  width: 100%; padding: .45rem .1rem .3rem; border: 0; border-bottom: 2px solid rgba(59, 38, 22, .55);
  background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: 1.08rem; font-weight: 500;
  transition: border-color .25s;
}
.line input::placeholder { color: rgba(59, 38, 22, .42); }
.line input:focus { outline: none; border-bottom-color: var(--orange); }
.line input[aria-invalid="true"] { border-bottom-color: var(--airmail-red); }
.envelope__err { min-height: 1.3em; margin: .3rem 0 0; font-size: .88rem; font-weight: 600; color: var(--airmail-red); }

.consent { grid-area: consent; display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; margin-top: .2rem; font-size: .92rem; line-height: 1.45; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent__box {
  flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem;
  border: 2px solid var(--ink); border-radius: 4px; background: #fff;
  display: grid; place-items: center; transition: background-color .2s;
}
.consent__box::after {
  content: ''; width: .75rem; height: .4rem; border: 3px solid #fff; border-top: 0; border-right: 0;
  rotate: -45deg; translate: 0 -2px; scale: 0; transition: scale .25s var(--ease-spring);
}
.consent input:checked + .consent__box { background: var(--orange); }
.consent input:checked + .consent__box::after { scale: 1; }
.consent input:focus-visible + .consent__box { outline: 3px solid var(--orange); outline-offset: 2px; }
.consent.is-invalid .consent__box { border-color: var(--airmail-red); box-shadow: 0 0 0 3px rgba(200, 55, 45, .25); }
.consent__who { grid-area: who; margin: 0; align-self: end; font-size: .72rem; line-height: 1.4; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rubber {
  grid-area: send; justify-self: end; align-self: end; position: relative; cursor: pointer;
  padding: 0; border: 0; background: none;
  display: flex; align-items: center;
}
.rubber__tool {
  position: relative; z-index: 1; height: 70px; width: auto; margin-right: -18px;
  rotate: -14deg; transform-origin: 50% 90%;
  filter: drop-shadow(2px 3px 0 rgba(59, 38, 22, .35));
  transition: transform .3s var(--ease-spring), rotate .3s var(--ease-spring);
}
.rubber__face {
  display: block; padding: .8rem 1.3rem .8rem 1.6rem; text-align: center;
  background: var(--orange); color: #fff;
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 0 5px 0 var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; line-height: 1; white-space: nowrap;
  transition: transform .2s var(--ease-spring), box-shadow .2s, background-color .2s;
}
.rubber:hover .rubber__face { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.rubber:hover .rubber__tool { rotate: -4deg; transform: translateY(-5px); }
.rubber:active .rubber__face { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.rubber:active .rubber__tool { rotate: 0deg; transform: translateY(6px); }
.rubber[disabled] { pointer-events: none; }
.rubber.is-busy .rubber__tool { animation: thump .5s ease-in-out infinite; }
@keyframes thump { 0%, 100% { transform: translateY(-6px); rotate: -6deg; } 50% { transform: translateY(6px); rotate: 0deg; } }

/* the stamp: one of Hind's own stamp designs (brand kit), revalued with an ink overprint */
.stamp-wrap { filter: drop-shadow(0 2px 2px rgba(42, 29, 23, .35)); }
.kstamp { position: relative; width: 124px; container-type: inline-size; }
.kstamp__img { width: 100%; height: auto; }
.kstamp__over {
  position: absolute; left: 50%; top: var(--oy, 61%); translate: -50% -50%; rotate: -8deg;
  display: grid; justify-items: center; line-height: 1; white-space: nowrap;
  color: var(--oink, #1C1214);
  /* a hairline of paper round the ink keeps it legible over Hind's busy art */
  -webkit-text-stroke: max(1.5px, 1.1cqw) rgba(255, 247, 234, .9); paint-order: stroke fill;
}
.kstamp__bars { width: 52cqw; height: 6cqw; margin-bottom: 1.6cqw; background: linear-gradient(currentColor 0 33%, transparent 33% 67%, currentColor 67%); filter: drop-shadow(0 0 1px rgba(255, 247, 234, .95)); }
.kstamp__val { font-family: var(--font-display); font-weight: 800; font-size: 27cqw; letter-spacing: -.02em; }
.kstamp__club { margin-top: -.5cqw; font-family: var(--font-body); font-weight: 800; font-size: 8cqw; letter-spacing: .16em; text-transform: uppercase; }
.kstamp__no { margin-top: 1.2cqw; font-family: var(--font-body); font-weight: 700; font-size: 6.4cqw; letter-spacing: .1em; }
.kstamp--big { width: 220px; }

.envelope__stamp .stamp-wrap { opacity: 0; }
.is-stamped .envelope__stamp .stamp-wrap { animation: stamp-drop .55s var(--ease-out) forwards; }
.is-stamped .postmark { animation: postmark-in .35s ease-out .5s forwards; }
.is-stamped .envelope { animation: jolt .35s ease-out .45s; }
.is-stamped .envelope__stampbox-hint { opacity: 0; }
@keyframes stamp-drop {
  0% { opacity: 0; transform: translate(-40px, -60px) scale(1.9) rotate(-18deg); }
  70% { opacity: 1; transform: translate(0, 0) scale(.96) rotate(3deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(2deg); }
}
@keyframes postmark-in { 0% { opacity: 0; scale: 1.25; } 100% { opacity: .9; scale: 1; } }
@keyframes jolt { 30% { transform: translateY(5px) scale(.992); } 60% { transform: translateY(-2px); } }

/* step changes */
.post-stage[data-step="profile"] .envelope,
.post-stage[data-step="welcome"] .envelope { display: none; }
.postcard, .welcome {
  display: grid; background: #FBF3E1 var(--grain);
  border: 2px solid var(--ink); border-radius: 6px;
  box-shadow: var(--shadow-paper);
  animation: card-flip .7s var(--ease-out);
}
@keyframes card-flip { from { opacity: 0; transform: rotateY(-70deg) translateY(20px); } }
.postcard { grid-template-columns: 34% 1fr; overflow: hidden; }
.postcard__art { background: url(../images/art/chai-stamp.webp) center / cover; border-right: 2px dashed rgba(59, 38, 22, .4); min-height: 100%; }
.postcard__body { padding: 1.2rem 1.4rem 1.2rem; }
.postcard h3, .welcome h3 { margin: .1rem 0 .6rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.1; color: var(--orange); }
.postcard h3 small { font-family: var(--font-body); font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
.chips { border: 0; margin: 0 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips legend { width: 100%; padding: 0; margin-bottom: .3rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .38rem .8rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font-size: .92rem; font-weight: 600; line-height: 1.1;
  transition: background-color .2s, color .2s, transform .2s var(--ease-spring);
}
.chips span i { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--ink-soft); }
.chips label:hover span { transform: translateY(-2px); }
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:checked + span i { color: var(--cream); }
.chips input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.chips--sizes span { min-width: 2.7rem; justify-content: center; }
.line--city { margin-bottom: 1rem; }
.line__lbl { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.postcard__actions, .welcome__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.welcome { grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; padding: 1.6rem 1.8rem; }
.welcome__stamp { rotate: -4deg; }
.welcome__body p { margin: 0 0 .9rem; }
.welcome__actions { margin-bottom: .3rem; }

.carrier { position: absolute; width: 170px; left: -200px; top: 20%; opacity: 0; pointer-events: none; z-index: 4; }
.post-stage.is-sending .envelope, .post-stage.is-sending .postcard { transition: transform .55s var(--ease-out), opacity .45s ease; transform: scale(.2) translate(180px, -120px) rotate(10deg); opacity: 0; }
.post-stage.is-sending .carrier { animation: carry 1.6s cubic-bezier(.45, 0, .3, 1) forwards; }
@keyframes carry {
  0% { opacity: 1; transform: translate(0, 120px) rotate(8deg); }
  45% { transform: translate(55vw, -10px) rotate(-4deg); }
  100% { opacity: 1; transform: translate(120vw, -60vh) rotate(-16deg); }
}

.post__write {
  margin: 1rem 0 0; padding: .35rem .9rem; border-radius: 999px;
  background: rgba(251, 241, 220, .92); border: 1.5px solid var(--ink); font-size: .88rem;
  opacity: 0; transition: opacity .5s ease .7s;
}
.scene.is-open .post__write { opacity: 1; }
.post__write a { color: var(--orange-deep); font-weight: 700; }

/* ---------------------------------------------------------------- touch + small screens */
@media (hover: none), (pointer: coarse) {
  .hint { display: block; }
}
@media (max-width: 900px) {
  .hud__soon { display: none; }
  .foot { display: none; }
  .walk { gap: .1rem; padding: .3rem; }
  .walk button { flex-direction: column; gap: .2rem; padding: .45rem .6rem; font-size: .72rem; }
  .walk svg { width: 1.25rem; height: 1.25rem; }
  .tag b { font-size: .95rem; }
  .tag small { font-size: .68rem; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .sticker--chaykum { width: 78px; top: -46px; right: 10px; }
  .sticker--malwiya { width: 54px; top: 22px; right: 16px; }
  .sticker--tagline { width: 96px; top: 10px; right: 12px; }
  .card--tag .card__head, .card--tag .shop__essence { padding-right: 92px; }
  .card--tag .shop__essence { padding-right: 0; }
  .shop__teapot { width: 80px; }
  .hud__join { padding: .35rem .8rem .35rem .35rem; font-size: .88rem; gap: .45rem; }
  .hud__join-val { width: 2.2rem; height: 2.2rem; font-size: .8rem; }
  .hud__join-txt b { display: block; }
  .scene__wrap { align-items: start; padding-top: 16px; padding-bottom: 24px; }
  .frame { width: 40%; margin-left: .8rem; }
  .card__nav { gap: .4rem; }
  .glasses { gap: .15rem; }
  .istikan { height: 36px; }
  .navbtn--next span { display: none; }
  .chapter .lede { font-size: 1.12rem; }

  .scene__wrap--post { justify-content: flex-start; padding-top: 64px; }
  .bubble { position: relative; right: auto; top: auto; width: 100%; margin: 0 0 1.4rem; font-size: .92rem; }
  .envelope { padding: 10px; rotate: -.6deg; }
  .envelope__face {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'air   air'
      'offer stamp'
      'from  from'
      'consent consent'
      'send  send'
      'who   who';
    padding: 1rem 1rem .9rem; column-gap: .8rem;
  }
  .envelope__to { display: none; }
  .envelope__stampbox { width: 96px; height: 122px; }
  .envelope__stamp .kstamp { width: 92px; }
  .postmark { left: -70px; top: 30px; width: 170px; height: 93px; }
  .rubber { justify-self: stretch; }
  .rubber__face { flex: 1; }
  .rubber__tool { height: 60px; }
  .postcard { grid-template-columns: 1fr; }
  .postcard__art { min-height: 120px; border-right: 0; border-bottom: 2px dashed rgba(59, 38, 22, .4); }
  .welcome { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.3rem 1.1rem; }
  .welcome__actions { justify-content: center; }
}

/* ---------------------------------------------------------------- scenes on phones & portrait screens */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .scene:not(.scene--post) .scene__wrap { display: block; padding: 0; overflow: hidden; }
  .scene:not(.scene--post) .scene__bg { inset: 0 0 auto 0; height: 47svh; }
  .scene--story .scene__bg { background-position: 10% 40%; }   /* the three women pouring tea */
  .scene--hind .scene__bg { background-position: 14% 50%; }    /* the shanasheel window */
  .scene--shop .scene__bg { background-position: 80% 70%; }    /* the open shop */
  .scene:not(.scene--post) .card {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 57svh; max-height: none; margin: 0;
    padding: .9rem 1.1rem max(.5rem, env(safe-area-inset-bottom));
    border-width: 2px 0 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 28px rgba(20, 10, 4, .35);
  }
  .scene:not(.scene--post):not(.is-open) .card { rotate: 0deg; translate: 0 60px; }
  .card--menu { box-shadow: 0 -10px 28px rgba(20, 10, 4, .35), inset 0 0 0 5px var(--paper), inset 0 0 0 7px var(--clay); }
  .card--sketch { padding-top: 1.4rem !important; }
  .scene:not(.scene--post) .scene__close { margin-bottom: .35rem; padding: .25rem .7rem; font-size: .8rem; }
  .card__head { margin-bottom: .35rem; }
  .card h2 { font-size: 1.85rem; }

  /* post office: the postman stays in view up top, his bubble beside him, the envelope below */
  .scene--post .scene__bg { background-size: auto 62svh; background-position: 80% 0; background-color: #5E3A20; }
  .scene__wrap--post { padding: 47svh 12px 24px; }
  .post-stage { margin-top: 0; }
  .bubble {
    position: absolute; left: 12px; right: auto; top: 58px;
    width: min(52%, 250px); margin: 0; padding: .7rem .8rem; font-size: .8rem; line-height: 1.4;
  }
  .bubble b { font-size: 1rem; }
  .bubble::after {
    left: auto; right: -12px; bottom: auto; top: 38%; width: 20px; height: 20px;
    border: 2px solid var(--ink); border-left: 0; border-bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%); transform: rotate(45deg);
  }
}

@media (max-width: 480px) {
  .collections li { grid-template-columns: 84px 1fr; gap: .75rem; }
  .coll__art { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flyby { display: none; }
}