/* ===================================================================
   INTRO POP-UP — "Foundations first."   v140 · 10 Oct 2026
   Self-contained component. Uses the site's own tokens (--cream, --ink,
   --brand-orange, --radius-box, --ease, fonts) and adds nothing outside
   the .ip / .ip- prefix. Stack: z-index 1050 — above header (1000) and
   nav (1001–1002), below the booking overlay (1100).

   TYPE: Omnes only. v157 (12 Oct 2026, Marco: "the cloud words look very
   amateur … needs a beautiful exclusive upgrade and beautiful transitions"):
   the packed word clouds are replaced by an editorial title sequence on a
   charcoal "screening room" — one word at a time in Omnes Light, focus-
   pulled in with a gloss passing across it — plus crossfades, a light
   sweep and a camera-flash cut, slow push-ins on the footage and fine
   film grain. Brand colours only: charcoal, cream, the one orange.
   =================================================================== */
.ip {
  --ipf-std:      "omnes-pro", "BBB Omnes", var(--font-body);
  --ipf-narrow:   "omnes-narrow", "BBB Omnes Narrow", "omnes-pro", "BBB Omnes", var(--font-body);
  --ipf-semicond: "omnes-semicond", "BBB Omnes SemiCond", "omnes-pro", "BBB Omnes", var(--font-body);
  --ipf-cond:     "omnes-cond", "BBB Omnes Cond", "omnes-pro", "BBB Omnes", var(--font-body);
  --ipf-brand:    "omnes-pro", "BBB Omnes", var(--font-display);
}
body.ip-open { overflow: hidden; }

.ip { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ip[hidden] { display: none; }

.ip__scrim {
  position: absolute; inset: 0;
  background: rgba(31, 29, 28, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.ip.is-open .ip__scrim { opacity: 1; }

.ip__dialog {
  position: relative;
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  width: 100%; max-width: 860px; max-height: calc(100vh - 48px);
  background: #fff; border-radius: var(--radius-box); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  opacity: 0; transform: translateY(18px) scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.ip.is-open .ip__dialog { opacity: 1; transform: none; }
.ip__dialog:focus { outline: none; }

.ip__x {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(244, 240, 235, 0.92); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease);
}
.ip__x:hover, .ip__x:focus-visible { background: var(--brand-orange); }
.ip__mlabel { display: none; }

/* ---------- copy column ---------- */
.ip__copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px 40px 24px; overflow-y: auto; }
.ip__eyebrow { color: var(--orange-text); margin-bottom: 12px; }
.ip__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.ip-ul { position: relative; white-space: nowrap; }
.ip-ul::after { /* the thread — echoes the threading line */
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.14em; height: 0.32em;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C 60 3, 130 2, 198 9' fill='none' stroke='%23F28D00' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.ip__body { text-wrap: pretty; font-size: 1rem; line-height: 1.6; color: var(--ink-60); margin-bottom: 16px; }
.ip-justb { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ip-justb > span { color: var(--brand-orange); }
.ip__meta { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 22px; }
.ip__meta span { color: var(--ink-60); font-weight: 500; }
.ip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 18px; }
.ip__more { font-size: 0.92rem; }
.ip__fine { text-wrap: pretty; font-size: 0.78rem; line-height: 1.45; color: var(--ink-60); }

/* ---------- the film: a framed window inside the panel ---------- */
.ip__frame { margin: 0; padding: 20px; display: flex; }
.ip__film {
  position: relative; flex: 1 1 auto; min-height: 436px;
  border: 1px solid var(--ink); border-radius: 16px;
  background: #fff; overflow: hidden; isolation: isolate;
  /* --k (type unit), --fw, --fh are measured and set by intro-popup.js —
     container-query units proved unreliable in Marco's Chrome, 10 Oct */
}
.ip__stage { position: absolute; inset: 0; }

.ip-s { position: absolute; inset: 0; opacity: 0; transition: opacity 0.28s var(--ease); overflow: hidden; }
.ip-s.is-on { opacity: 1; }
.ip-s--cloud, .ip-s--end { background: radial-gradient(120% 90% at 50% 46%, #fff 45%, #f3f1ee 100%); }
/* a hint of the wallpaper's white swirl (texture-card-pale.webp, 15 KB) */
.ip-tex { position: absolute; inset: -3%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0.55; pointer-events: none; }

.ip-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ip-s--thread .ip-media { object-position: 36% 50%; }
.ip-s--clip { background: #1f1d1c; }

/* before/after "plate" — always 4:5 and always covering the window,
   anchored top so the photo's lower edge sits under the caption fade */
/* v5b: photo fills ~82% of the window; the white only starts below the lower lashes, where the mask begins */
.ip-plate { position: absolute; top: 0; left: 50%; width: max(var(--fw, 340px), calc(var(--fh, 436px) * 0.936)); height: max(calc(var(--fw, 340px) * 1.25), calc(var(--fh, 436px) * 1.17)); transform: translateX(-50%); }
.ip-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 61%, rgba(255,255,255,0.92) 67%, #fff 70%); pointer-events: none; }
.ip-plate img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ip-wipe { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
/* after-photo registered onto the before-photo (measured 9 Oct: scale
   1.015, offset +19px / -13px on the 432×540 source) so the wipe is clean */
/* v5: registration is baked into ba-trio-*-v5.webp, so no transform (fixes the sliver at the left edge) */
.ip-edge { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--brand-orange); box-shadow: 0 0 12px rgba(242, 141, 0, 0.7); opacity: 0; }

.ip-shade { position: absolute; inset: 0; pointer-events: none; }
.ip-shade--dark  { background: linear-gradient(180deg, rgba(20,19,18,0) 45%, rgba(20,19,18,0.78) 100%); }
.ip-shade--light { background: linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.95) 63%, #fff 78%); }

/* timed elements — JS adds .is-in when the film clock reaches data-at */
.ip [data-at] { opacity: 0; transform: translateY(12px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }   /* leave fast */
.ip [data-at].is-in { opacity: 1; transform: none; transition: opacity 0.32s var(--ease) 0.05s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s; } /* arrive after */

/* every sequence resolves to the brand setting */
.ip-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22px 52px; }
.ip-line { font-family: var(--ipf-brand); font-weight: 500; font-size: max(22px, calc(8.2 * var(--k, 3.4px))); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.ip-line + .ip-line { margin-top: 4px; }
.ip-line--sm { text-wrap: balance; font-family: var(--ipf-brand); font-size: max(13px, calc(4.6 * var(--k, 3.4px))); font-weight: 500; line-height: 1.4; color: var(--ink-60); letter-spacing: 0.01em; }
.ip-line + .ip-line--sm { margin-top: 10px; }
/* end card: one set, lands together; trust line runs across the bottom above the controls */
.ip-s--end .ip-center { padding-bottom: calc(64px + 9 * var(--k, 3.4px)); }
.ip-trust {
  position: absolute; left: 12px; right: 12px; bottom: 64px; margin: 0; padding-top: calc(3 * var(--k, 3.4px));
  text-align: center; white-space: nowrap; font-family: var(--ipf-brand); font-size: max(10px, calc(2.9 * var(--k, 3.4px))); line-height: 1.5; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-60);
}
.ip-trust::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 2px; margin-left: -14px; background: var(--brand-orange); border-radius: 2px; }
.ip-logo { width: clamp(110px, calc(40 * var(--k, 3.4px)), 150px); height: auto; margin: 0 auto calc(5 * var(--k, 3.4px)); display: block; }

/* captions over footage / photo */
.ip-cap { position: absolute; left: 22px; right: 22px; bottom: 64px; display: flex; align-items: baseline; gap: 12px; }
.ip-cap--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.ip-cap__n { font-family: var(--ipf-brand); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--brand-orange); }
.ip-cap__t { font-family: var(--ipf-brand); font-size: max(20px, calc(7.4 * var(--k, 3.4px))); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.ip-cap__s { text-wrap: balance; font-family: var(--ipf-brand); font-size: max(13px, calc(4.4 * var(--k, 3.4px))); font-weight: 500; line-height: 1.35; color: var(--ink); }
.ip-s--thread .ip-cap__t, .ip-s--clip .ip-cap__t { color: var(--cream); }
.ip-s--ba .ip-cap__t { color: var(--ink); }

.ip-tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9); color: var(--ink); border-radius: 999px; padding: 6px 11px;
}

/* ---------- film controls ---------- */
.ip-ctrl {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 5px 14px 5px 5px;
}
.ip-ctrl__btn {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--cream); display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ip-ctrl__btn:hover, .ip-ctrl__btn:focus-visible { background: var(--brand-orange); color: var(--ink); }
.ip-ctrl__btn svg { width: 13px; height: 13px; }
.ip-ctrl__btn .i-pause, .ip-ctrl__btn .i-replay { display: none; }
.ip-ctrl__btn[data-state="pause"] .i-play { display: none; }
.ip-ctrl__btn[data-state="pause"] .i-pause { display: block; }
.ip-ctrl__btn[data-state="replay"] .i-play { display: none; }
.ip-ctrl__btn[data-state="replay"] .i-replay { display: block; }
.ip-ctrl__track { flex: 1 1 auto; height: 3px; background: var(--ink-12); border-radius: 3px; overflow: hidden; }
.ip-ctrl__fill { height: 100%; background: var(--brand-orange); transform-origin: 0 50%; transform: scaleX(0); }
.ip-ctrl__time { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-60); font-variant-numeric: tabular-nums; }


/* =================== v157 · screening-room finish ===================
   Charcoal film window (logo-on-charcoal is the Brand Bible pairing),
   cream type, the orange kept to the thread and the numerals. Scene
   opacity, word focus-pulls, sweeps, flash, push-ins and the logo gloss
   are all driven by the film clock in intro-popup.js, so pause, seek
   and replay stay frame-exact. */
.ip__film { --ip-char: #1f1d1c; --ip-char-2: #2c2a29; --ip-cream: #f4f0eb; background: var(--ip-char); border-color: var(--ip-char-2); }
.ip-s { transition: none; will-change: opacity; }
.ip-s--type, .ip-s--end { background: radial-gradient(120% 85% at 50% 40%, #34302d 0%, var(--ip-char) 62%, #161514 100%); }
.ip-light {   /* a soft studio light drifting slowly behind the type */
  position: absolute; width: 140%; height: 140%; left: -20%; top: -30%; pointer-events: none;
  background: radial-gradient(38% 30% at 50% 50%, rgba(255, 232, 205, 0.16), rgba(255, 232, 205, 0) 70%);
  animation: ipLight 9s ease-in-out infinite alternate;
}
@keyframes ipLight { from { transform: translate(-8%, 2%) scale(1); } to { transform: translate(8%, -3%) scale(1.12); } }

/* title words: Omnes Light, cream, a gloss band travelling across */
.ip-seq { position: absolute; inset: 0 0 52px; display: flex; align-items: center; justify-content: center; }
.ip-w {
  position: absolute; white-space: nowrap; text-align: center;
  font-family: var(--ipf-brand); font-weight: 300; line-height: 1;
  font-size: max(32px, calc(16 * var(--k, 3.4px))); letter-spacing: 0.04em;
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, var(--ip-cream) 0%, var(--ip-cream) 40%, #fff 47%, #fffaf2 50%, #fff 53%, var(--ip-cream) 60%, var(--ip-cream) 100%);
  background-size: 260% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  opacity: 0; will-change: opacity, filter, transform;
}
.ip-w--key { font-weight: 400; font-size: max(36px, calc(18 * var(--k, 3.4px))); }

/* brand lines: lighter, cream, revealed from behind a mask; the orange thread draws itself */
.ip-s--type .ip-line, .ip-s--end .ip-line { color: var(--ip-cream); font-weight: 300; letter-spacing: 0; }
.ip-s--type .ip-line[data-at] { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); opacity: 1;
  transition: clip-path 0.2s var(--ease), transform 0.2s var(--ease); }
.ip-s--type .ip-line[data-at].is-in { clip-path: inset(-0.2em 0 -0.4em 0); transform: none;
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.ip__film .ip-ul::after { clip-path: inset(0 100% 0 0); transition: clip-path 0.2s var(--ease); }
.ip__film .is-in .ip-ul::after, .ip__film .is-in.ip-endset .ip-ul::after { clip-path: inset(0 0 0 0); transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }

/* end card */
.ip-s--end .ip-line--sm { color: rgba(244, 240, 235, 0.72); font-weight: 300; }
.ip-s--end .ip-justb { color: var(--ip-cream); font-weight: 500; }
.ip-endset[data-at] { transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.ip-endset[data-at].is-in { transition: opacity 1.1s var(--ease), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ip-logo-wrap { position: relative; display: block; width: clamp(110px, calc(40 * var(--k, 3.4px)), 150px); margin: 0 auto calc(5 * var(--k, 3.4px)); }
.ip-logo-wrap .ip-logo { width: 100%; margin: 0; }
.ip-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,250,240,0.95) 50%, rgba(255,255,255,0) 62%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ip-trust { color: rgba(244, 240, 235, 0.55); font-weight: 500; letter-spacing: 0.12em; }

/* footage: captions set like a film title — thin, with an orange numeral */
.ip-media { transform-origin: 50% 45%; will-change: transform; }
.ip-shade--dark { background: linear-gradient(180deg, rgba(20,19,18,0) 40%, rgba(20,19,18,0.82) 100%); }
.ip-cap__n { font-weight: 500; letter-spacing: 0.2em; }
.ip-cap__t { font-weight: 300; letter-spacing: 0.01em; }
.ip-cap[data-at] { clip-path: inset(0 0 100% 0); transform: translateY(10px); opacity: 1; }
.ip-cap[data-at].is-in { clip-path: inset(-0.3em 0 -0.4em 0); transform: none;
  transition: clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }

/* before/after: same real photos, now framed in charcoal (no change to the images) */
.ip-s--ba { background: var(--ip-char); }
.ip-plate::after { background: linear-gradient(180deg, rgba(31,29,28,0) 60%, rgba(31,29,28,0.9) 68%, var(--ip-char) 72%); }
.ip-tag { background: rgba(31, 29, 28, 0.55); color: var(--ip-cream); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 500; letter-spacing: 0.16em; }

/* transitions + finish */
.ip-fx { position: absolute; inset: 0; pointer-events: none; }
.ip-fx--sweep {
  inset: -10% -40%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,214,170,0) 0%, rgba(255,214,170,0.35) 35%, rgba(255,246,232,0.9) 50%, rgba(255,214,170,0.35) 65%, rgba(255,214,170,0) 100%);
  filter: blur(18px); will-change: transform, opacity;
}
.ip-fx--flash { background: #fffdf9; opacity: 0; }
.ip-fx--grain {
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* controls: dark glass on the charcoal window */
.ip-ctrl { background: rgba(31, 29, 28, 0.55); }
.ip-ctrl__btn { background: var(--ip-cream); color: var(--ip-char); }
.ip-ctrl__track { background: rgba(244, 240, 235, 0.18); }
.ip-ctrl__time { color: rgba(244, 240, 235, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .ip-light { animation: none; }
  .ip-fx--sweep, .ip-fx--flash { display: none; }
  .ip-s--type .ip-line[data-at], .ip-cap[data-at] { clip-path: none !important; }
}
/* =================== /v157 =================== */

/* ---------- mobile teaser chip ---------- */
.ip-teaser {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 998;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 168px);
  border: 0; border-radius: 999px; padding: 7px 16px 7px 7px; cursor: pointer;
  background: radial-gradient(circle at 35% 28%, #43403a, #2b2928 72%); color: var(--cream);
  font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; line-height: 1.1; text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  opacity: 0; transform: translate(-50%, 16px); transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ip-teaser[hidden] { display: none; }
.ip-teaser.is-shown { opacity: 1; transform: translate(-50%, 0); }
.ip-teaser__play { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-orange); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.ip-teaser__play svg { width: 12px; height: 12px; margin-left: 2px; }
.ip-teaser small { display: block; font-weight: 500; font-size: 0.72rem; opacity: 0.75; }
body.nav-open .ip-teaser, body.bk-open .ip-teaser { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .ip { align-items: flex-end; padding: 0; }
  .ip__dialog {
    grid-template-columns: 1fr; max-width: none; max-height: 94vh; overflow-y: auto;
    border-radius: var(--radius-box) var(--radius-box) 0 0; transform: translateY(48px);
  }
  .ip__x { top: 8px; right: 10px; }
  .ip__mlabel {
    display: block; position: absolute; top: 20px; left: 22px; margin: 0;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text);
  }
  .ip__frame { padding: 56px 14px 0; }
  .ip__film { min-height: 0; aspect-ratio: 1 / 1; }
  .ip__copy { padding: 22px 22px calc(26px + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  .ip__eyebrow { display: none; }
  .ip__title { font-size: 2rem; }
  .ip-shade--light { background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,0.95) 72%, #fff 82%); }
}

/* Reduced motion: no autoplay, no float — the film opens on its end card
   and plays only if asked; scenes cut instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .ip [data-at] { transform: none !important; transition: opacity 0.01ms; }
  .ip-w { display: none; }
  .ip__dialog, .ip-teaser { transform: none !important; }
}
/* =================== /INTRO POP-UP =================== */

/* homepage re-entry link under "One craft. Refined." */
.ip-watch { text-align: center; margin-top: 18px; }
.ip-watch button { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 4px; }

/* ---- v170 (Marco, 17 Oct): on phones the pop-up becomes a floating card with all four
   corners rounded (24px, the site's box curve) and a small gap to the screen edges, instead
   of a sheet with square bottom corners flush to the bottom of the screen. Desktop was
   already rounded on all corners. Rollback: delete this block. ---- */
@media (max-width: 760px) {
  .ip { align-items: center; padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)); }
  .ip__dialog { border-radius: var(--radius-box); max-height: calc(100% - 4px); transform: translateY(24px) scale(0.985); }
}

/* ---- v171 (Marco, 17 Oct): the pop-up panel is white glass instead of solid white — 84% white
   over a blurred, brightened view of the page, so you can just see there's something underneath
   while the text stays fully readable. The close button goes from cream to the same soft white.
   Rollback: delete this block. ---- */
.ip__dialog{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(24px) saturate(1.3) brightness(2.2);backdrop-filter:blur(24px) saturate(1.3) brightness(2.2)}
.ip__x{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(44,42,41,.08)}

/* ---- v176 (Marco, 17 Oct): pop-up panel glass goes from 84% to 60% white, so more of the page
   shows through. Rollback: delete this block (falls back to the v171 84%). ---- */
.ip__dialog{background:rgba(255,255,255,.60)}

/* ---- v177 (Marco, 17 Oct): sound for the film ("Breath" sketch, video/ip-sound-breath.mp3).
   A small speaker button at the right end of the player bar. Off = speaker with a cross;
   on = speaker with waves. Rollback: delete this block and the button in index.html. ---- */
.ip-ctrl{padding-right:6px}
.ip-ctrl__snd{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;background:transparent;color:rgba(244,240,235,.85);display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease),color .2s var(--ease)}
.ip-ctrl__snd:hover,.ip-ctrl__snd:focus-visible{background:rgba(244,240,235,.16);color:#fff}
.ip-ctrl__snd svg{width:16px;height:16px}
.ip-ctrl__snd .i-snd-on{display:none}
.ip-ctrl__snd[aria-pressed="true"] .i-snd-on{display:block}
.ip-ctrl__snd[aria-pressed="true"] .i-snd-off{display:none}
.ip-ctrl__snd[aria-pressed="true"]{color:var(--brand-orange)}

/* ---- v178 (Marco, 17 Oct): on iPhone the film box showed square corners. Safari doesn't clip
   playing video / moving layers to border-radius with overflow:hidden alone; clip-path does.
   Rollback: delete this block. ---- */
.ip__film{-webkit-clip-path:inset(0 round 16px);clip-path:inset(0 round 16px)}