/* Lever & Lamp, a concept website by Tap Media House for cafes in Dubai.
   Colours are taken from the footage: the bottle-green wall, chrome, crema and paper menus.
   One accent (crema), used light on dark and darkened on paper so text keeps 4.5:1 contrast. */

:root {
  --ink: #101311;
  --green: #1b2a21;
  --paper: #efe8dc;
  --paper-2: #e5dccd;
  --field: #faf6ef;
  --line: rgba(16, 19, 17, .16);
  --line-light: rgba(239, 232, 220, .18);
  --crema: #d0904f;
  --crema-ink: #8c501d;
  --text: #17140f;
  --muted: #5d574d;
  --muted-light: #a9aba2;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sans: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(20px, 4.2vw, 64px);
  --max: 1400px;
  --nav-h: 68px;
  --concept-h: 53px;           /* site.js measures the real height of the concept bar */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
p, dl, dd, figure { margin: 0; }
button { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label { touch-action: manipulation; }   /* no double-tap zoom delay */

/* side gutters also clear the notch when a phone is held sideways (viewport-fit=cover) */
.wrap {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: 3px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }

h1, h2 { font-family: var(--display); font-weight: 700; line-height: .92; letter-spacing: -.004em; }
h2 { font-size: clamp(46px, 6vw, 96px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 3px;
  background: var(--ink); color: var(--paper);
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .12s ease;
}
.btn:hover { background: #262c28; }
.btn:active { transform: translateY(1px); }
.btn-crema { background: var(--crema); color: #1b1209; }
.btn-crema:hover { background: #dc9e5f; }
.btn-block { width: 100%; }

/* ---------- concept bar: Tap Media House's message (not sticky). Dark, because the logo's
   "TAP" is white, and so it reads as separate from the sample cafe below it. ---------- */
.concept { position: relative; z-index: 41; background: #0b0d0c; color: var(--paper); font-size: 14px; line-height: 1.4; border-bottom: 1px solid var(--line-light); }
.concept-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.concept-logo img { width: 60px; height: auto; }
.concept-text strong { font-weight: 600; }
.concept-more { color: var(--muted-light); }
.concept-join { white-space: nowrap; color: var(--muted-light); }
.concept-join a { color: var(--crema); font-weight: 600; text-underline-offset: 3px; }
.concept-short { display: none; }
@media (max-width: 1180px) { .concept-more { display: none; } }
/* phones: two short lines (message, then number and email) instead of four */
@media (max-width: 760px) {
  .concept-row { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; min-height: 0; padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; line-height: 1.35; }
  .concept-logo { grid-row: span 2; }
  .concept-logo img { width: 46px; }
  .concept-long, .concept-join-label { display: none; }
  .concept-short { display: inline; }
  .concept-join { font-size: 12px; }
}
@media (max-width: 359px) {
  .concept-dot { display: none; }
  .concept-join { white-space: normal; }
  .concept-join a[href^="mailto"] { display: block; width: fit-content; }   /* very narrow: email on its own line */
}

/* the same message in the corner on wider screens, hidden while the order bar is up */
.tap-badge {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44;
  display: none; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line-light); border-radius: 4px;
  background: #0b0d0c; color: var(--paper);
  font-size: 12.5px; line-height: 1.3; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.tap-badge img { width: 42px; height: auto; }
.tap-badge b { display: block; font-weight: 600; color: var(--crema); }
@media (min-width: 900px) { .tap-badge { display: flex; } }
body.has-cart .tap-badge { display: none; }

/* ---------- nav: transparent over the film, paper after it ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  height: var(--nav-h); padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  color: var(--paper);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.nav.is-solid { background: var(--paper); color: var(--text); box-shadow: 0 1px 0 var(--line); }
.brand { margin-right: auto; font: 800 34px/1 var(--display); letter-spacing: .01em; text-decoration: none; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 15px; font-weight: 500; text-decoration: none; opacity: .88; }
.nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.nav-yours { display: none; }
.btn-nav { min-height: 40px; padding: 0 16px; background: var(--paper); color: var(--text); font-size: 15px; }
.btn-nav:hover { background: #fff; }
.nav.is-solid .btn-nav { background: var(--ink); color: var(--paper); }
.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px;
  border-radius: 10px; background: var(--crema); color: #1b1209; font-size: 12px; font-variant-numeric: tabular-nums;
}
.count[hidden] { display: none; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav { gap: 10px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    border: 0; border-radius: 3px; background: transparent; color: inherit; cursor: pointer;
  }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: 0;
    padding: 4px var(--gutter) 18px;
    background: var(--paper); color: var(--text);
    box-shadow: 0 14px 28px rgba(16, 19, 17, .18);
  }
  .nav.is-open { background: var(--paper); color: var(--text); }
  .nav.is-open .btn-nav { background: var(--ink); color: var(--paper); }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 19px; opacity: 1; }
  .nav-yours { display: block; font-weight: 600; }
  .btn-nav { min-height: 40px; padding: 0 14px; }
}

/* ---------- 1. film ---------- */
.film {
  position: relative;
  height: 330vh;
  margin-top: calc(var(--nav-h) * -1);
  background: var(--ink); color: var(--paper);
}
.film-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }
.film-video, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-video { object-fit: cover; object-position: 64% 50%; }
.film-video[data-media="portrait"] { object-position: 50% 50%; }   /* the portrait cut is already centred on the cup */
.film-canvas { opacity: 0; transition: opacity .5s ease; }
.film-gl .film-canvas { opacity: 1; }
.film-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 14, 13, .62) 0, rgba(12, 14, 13, 0) 150px),   /* keeps the nav readable over the chrome */
    linear-gradient(90deg, rgba(12, 14, 13, .8) 0%, rgba(12, 14, 13, .5) 32%, rgba(12, 14, 13, 0) 62%),
    linear-gradient(0deg, rgba(12, 14, 13, .55) 0%, rgba(12, 14, 13, 0) 40%);
}
/* At the top of the page the concept bar pushes the film down, so the text layer only uses
   what is actually on screen there. */
.film-ui { position: absolute; left: 0; right: 0; top: 0; height: calc(100vh - var(--concept-h)); height: calc(100svh - var(--concept-h)); }
.film-copy { position: absolute; left: max(var(--gutter), env(safe-area-inset-left)); bottom: clamp(48px, 11vh, 120px); width: min(660px, 50vw); }
.film-copy h1 { font-size: clamp(56px, 7.4vw, 124px); }
.film-copy h2 { font-size: clamp(48px, 6.2vw, 104px); }
.film-copy p { margin-top: 20px; max-width: 44ch; font-size: clamp(17px, 1.3vw, 20px); color: rgba(239, 232, 220, .86); }
.film-copy .btn { margin-top: 30px; }
.film-beat { opacity: 0; pointer-events: none; }   /* film.js fades these in with the scroll */

.scale {
  position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); bottom: clamp(48px, 11vh, 120px);
  display: grid; gap: 10px; min-width: 190px;
  opacity: 0;
}
.scale div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-top: 8px; border-top: 1px solid var(--line-light); }
/* leave room for the Tap Media House corner badge where it shows */
@media (min-width: 900px) { .film-copy, .scale { bottom: clamp(100px, 14vh, 136px); } }
.scale dt { font-size: 13px; color: var(--muted-light); }
.scale dd { font: 600 32px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--paper); }
.scale small { font: 500 .52em var(--sans); color: var(--muted-light); }

@media (max-width: 760px) {
  .film { height: 290vh; }
  .film-shade { background: linear-gradient(0deg, rgba(12, 14, 13, .9) 0%, rgba(12, 14, 13, .6) 40%, rgba(12, 14, 13, 0) 70%); }
  .film-copy { right: var(--gutter); width: auto; bottom: calc(118px + env(safe-area-inset-bottom)); }
  .film-intro { bottom: calc(34px + env(safe-area-inset-bottom)); }
  .film-copy h1 { font-size: clamp(52px, 15vw, 76px); }
  .film-copy h2 { font-size: clamp(44px, 12.5vw, 64px); }
  .film-copy p { margin-top: 14px; font-size: 16.5px; }
  .film-copy .btn { margin-top: 22px; }
  .scale {
    left: var(--gutter); right: var(--gutter); bottom: calc(26px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, 1fr); gap: 14px; min-width: 0;
  }
  .scale div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .scale dd { font-size: 28px; }
}

/* ---------- 2. menu ---------- */
.menu {
  position: relative; z-index: 2;
  margin-top: -16vh;
  padding: clamp(72px, 9vw, 128px) 0 clamp(80px, 10vw, 140px);
  background: var(--paper);
}
.menu-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }

.glass-stage {
  position: sticky; top: calc(var(--nav-h) + 20px);
  display: flex; flex-direction: column;
  /* short enough that the caption is in view as soon as the menu arrives, before it sticks */
  height: calc(100vh - var(--nav-h) - 130px); max-height: 720px; min-height: 440px;
}
.glass-view { position: relative; flex: 1; min-height: 0; }
.glass-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.glass-canvas:active { cursor: grabbing; }
.glass-3d .glass-css { display: none; }
html:not(.glass-3d) .glass-canvas { display: none; }

/* flat glass, used until (or instead of) the 3D one */
.glass-css {
  position: absolute; left: 50%; bottom: 10%;
  width: min(56%, 200px); aspect-ratio: .64;
  transform: translateX(-50%);
  overflow: hidden;
  border: 3px solid rgba(16, 19, 17, .16); border-top-width: 0; border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, .22);
  transition: aspect-ratio .6s var(--ease), width .6s var(--ease);
}
.glass-css[data-glass="short"] { width: min(62%, 210px); aspect-ratio: 1.02; }
.glass-css-liquid {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--fill, .8) * 100%);
  background: var(--grad, #c9a07a);
  transition: height .9s var(--ease);
}

.glass-caption { padding-top: 16px; border-top: 1px solid var(--line); }
.glass-name { font: 700 42px/1 var(--display); }
.glass-parts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.glass-parts li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
.glass-parts i { width: 14px; height: 14px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(16, 19, 17, .14); }
.glass-parts b { font-weight: 500; }
.glass-parts span { color: var(--muted); font-variant-numeric: tabular-nums; }

.menu-head p { margin-top: 16px; max-width: 50ch; color: var(--muted); }
.hint-touch { display: none; }
.touch .hint-hover { display: none; }
.touch .hint-touch { display: inline; }
.menu-group { margin-top: clamp(40px, 5vw, 64px); }
.menu-group h3 { padding-bottom: 12px; border-bottom: 1px solid var(--text); font: 700 30px/1 var(--display); }
.menu-group ul { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.item-main { display: grid; gap: 3px; padding: 15px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.item-main { cursor: pointer; }
.item-name { font-size: 18px; font-weight: 600; transition: color .2s ease; }
.item-desc { font-size: 15px; color: var(--muted); }
.item-price { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.item.is-active .item-name { color: var(--crema-ink); }
.add {
  min-width: 64px; min-height: 38px; padding: 0 14px;
  border: 1px solid rgba(16, 19, 17, .28); border-radius: 3px;
  background: transparent; color: var(--text);
  font: 600 14px/1 var(--sans); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.add:hover { border-color: var(--text); }
.add.is-added { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.menu-note { margin-top: 22px; font-size: 15px; color: var(--muted); }

@media (max-width: 900px) {
  .menu { margin-top: -10vh; }
  .menu-grid { grid-template-columns: 1fr; gap: 0; }
  .glass-stage {
    top: var(--nav-h); z-index: 3;
    flex-direction: row; align-items: center; gap: 16px;
    height: auto; min-height: 0; max-height: none;
    margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter);
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .glass-view { flex: 0 0 38%; height: min(30vh, 220px); }   /* leaves most of a phone screen for the list */
  .glass-caption { flex: 1; padding-top: 0; border-top: 0; }
  .glass-name { font-size: 32px; }
  .glass-parts li { font-size: 14px; }
  .menu-head { margin-top: 40px; }
}

/* ---------- 3. the room ---------- */
.room { overflow: hidden; padding: clamp(88px, 11vw, 168px) 0; background: var(--ink); color: var(--paper); }
.room-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.room-text p { margin-top: 18px; max-width: 40ch; color: rgba(239, 232, 220, .84); }
.facts { margin-top: 30px; }
.facts div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-light); }
.facts dt { font-size: 15px; color: var(--muted-light); }
.room-film { perspective: 1400px; }
.room-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px;
  background: #0b0d0c center / cover no-repeat;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p, 1)) * 18deg)) translateY(calc((1 - var(--p, 1)) * 48px)) scale(calc(.9 + var(--p, 1) * .1));
  will-change: transform;
}
.room-video { width: 100%; height: 100%; object-fit: cover; }
.room-film figcaption { margin-top: 14px; font-size: 14px; color: var(--muted-light); }
@media (max-width: 900px) { .room-grid { grid-template-columns: 1fr; } }

/* ---------- 4. beans ---------- */
.beans { padding: clamp(88px, 10vw, 150px) 0; background: var(--paper); }
.beans-head p { margin-top: 16px; max-width: 52ch; color: var(--muted); }
.beans-table { width: 100%; margin-top: 44px; border-collapse: collapse; }
.beans-table th, .beans-table td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.beans-table thead th { padding-bottom: 10px; border-bottom-color: var(--text); font-size: 13px; font-weight: 500; color: var(--muted); }
.beans-table tbody th { font: 700 32px/1 var(--display); }
.beans-table td:last-child { padding-right: 0; text-align: right; }
.beans-table .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .beans-table thead { display: none; }
  .beans-table, .beans-table tbody, .beans-table tr { display: block; }
  .beans-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .beans-table th, .beans-table td { padding: 0; border: 0; }
  .beans-table tbody th { grid-column: 1; }
  .beans-table td[data-label="From"], .beans-table td[data-label="Tastes like"] { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
  .beans-table td.num { grid-column: 2; grid-row: 1; }
  .beans-table td:last-child { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
}

/* ---------- 5. visit ---------- */
.visit { padding: clamp(88px, 10vw, 150px) 0; background: var(--paper-2); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.addr { margin-top: 20px; font-size: 19px; }
.cafe-phone { margin-top: 12px; font-size: 17px; }
.nowrap { white-space: nowrap; }
.open-now { margin-top: 18px; font-weight: 600; color: var(--crema-ink); }
.open-now:empty { display: none; }
.hours { margin-top: 24px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.hours dd { font-variant-numeric: tabular-nums; }

.book { padding: clamp(22px, 3vw, 36px); border-radius: 4px; background: var(--paper); }
.book h3 { font: 700 36px/1 var(--display); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; margin-top: 16px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid rgba(16, 19, 17, .24); border-radius: 3px;
  background: var(--field); color: var(--text);
  font: 400 16px/1.3 var(--sans);
}
textarea { min-height: 70px; resize: vertical; }
.book .btn { width: 100%; margin-top: 22px; }
.form-error { margin-top: 14px; font-size: 14px; color: #9b2c1f; }
.demo-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- 6. make it yours ---------- */
.yours { padding: clamp(88px, 10vw, 150px) 0; background: var(--green); color: var(--paper); }
.yours-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.yours-text p { margin-top: 20px; max-width: 46ch; color: rgba(239, 232, 220, .86); }
.yours-text .btn { margin-top: 30px; }
.yours-text .mail { margin-top: 16px; font-size: 15px; color: var(--muted-light); }
.mail a { color: var(--paper); }
.yours-list div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line-light); }
.yours-list dt { font: 700 26px/1.05 var(--display); }
.yours-list dd { color: rgba(239, 232, 220, .84); }
@media (max-width: 900px) { .yours-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .yours-list div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- footer ---------- */
.foot { padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); }
.foot-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 48px; align-items: baseline; }
.foot .brand { grid-row: span 3; font-size: 46px; }
.foot p { font-size: 15px; color: var(--muted-light); }
.foot a { color: var(--paper); }
.foot-small { font-size: 13px; }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } .foot .brand { grid-row: auto; margin-bottom: 10px; } }

/* ---------- order bar + sheet ---------- */
.order-bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(520px, calc(100% - 24px)); padding: 8px 8px 8px 18px;
  transform: translateX(-50%);
  border: 1px solid var(--line-light); border-radius: 4px;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 14px 34px rgba(16, 19, 17, .3);
}
.order-bar[hidden] { display: none; }
body.has-cart { padding-bottom: 84px; }
.order-total { margin-left: 10px; font-weight: 600; color: var(--crema); }
.order-bar .btn { min-height: 42px; }

.sheet {
  width: min(540px, calc(100% - 24px)); max-height: min(88vh, 780px);
  padding: 0; border: 0; border-radius: 6px;
  background: var(--paper); color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.sheet::backdrop { background: rgba(12, 14, 13, .62); }
.sheet-inner { padding: 20px 24px 24px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 46px; }
.sheet-close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; }
.sheet-empty p { margin-top: 10px; color: var(--muted); }
.sheet-empty .btn { margin-top: 18px; }
.cart { list-style: none; margin: 14px 0 0; padding: 0; }
.cart li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.cart .line-price { min-width: 36px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; border: 1px solid rgba(16, 19, 17, .24); border-radius: 3px; }
.qty button { width: 38px; height: 38px; border: 0; background: transparent; color: inherit; font: 600 18px/1 var(--sans); cursor: pointer; }
.qty output { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.sheet-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--text); }
.sheet-total strong { font: 700 36px/1 var(--display); font-variant-numeric: tabular-nums; }
.sheet .btn-block { margin-top: 18px; }

/* the WhatsApp message preview, drawn as the cafe would see it on its phone */
.wa-chat { margin-top: 14px; padding: 14px; border-radius: 6px; background: #e8e0d3; }
.wa-from { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #2f5d41; }
.wa-bubble {
  position: relative; max-width: 94%;
  padding: 9px 12px 22px;
  border-radius: 2px 8px 8px 8px;
  background: #fff; box-shadow: 0 1px 1px rgba(16, 19, 17, .12);
}
.wa-bubble p { font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.wa-time { position: absolute; right: 10px; bottom: 5px; font-size: 11.5px; color: #8a8f8c; font-variant-numeric: tabular-nums; }
.preview-join { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.preview-join .btn-block { margin-top: 12px; }
.preview-join .mail { margin-top: 10px; font-size: 14px; color: var(--muted); }
.preview-join .mail a { color: var(--text); }
@media (max-width: 600px) {
  .sheet { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; border-radius: 10px 10px 0 0; }
  .sheet-inner { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- reveals ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .room-frame { transform: none; }
  .glass-css-liquid, .glass-css { transition: none; }
}

/* ---------- touch screens: 44 px targets ---------- */
.touch .add { min-width: 72px; min-height: 44px; }
.touch .qty button { width: 44px; height: 44px; }

/* ---------- phones held sideways (and other short screens) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .film-copy, .scale { bottom: 20px; }
  .film-copy h1 { font-size: clamp(34px, 9.5vh, 46px); }
  .film-copy h2 { font-size: clamp(30px, 8.5vh, 40px); }
  .film-copy p { margin-top: 10px; max-width: 52ch; font-size: 15px; }
  .film-copy .btn { min-height: 42px; margin-top: 14px; }
  /* captions on the left, the scale as a small column on the right, so they never overlap */
  .film-copy { right: auto; width: min(560px, 58vw); }
  .scale { left: auto; grid-template-columns: none; gap: 6px; min-width: 150px; }
  .scale div { flex-direction: row; align-items: baseline; gap: 16px; padding-top: 4px; }
  .scale dd { font-size: 22px; }
  .tap-badge { display: none; }
  .glass-stage { position: static; }           /* a sticky strip would cover most of the screen */
  .glass-view { height: 200px; }
}