/* ==========================================================================
   First Light: one day at Divers Village

   One stylesheet for both directions (logical properties throughout).
   The default is the quiet layout: a plain page that works with no JavaScript
   and with reduced motion. The film layout is layered on at the end, under
   html.js:not(.quiet).

    1  Tokens
    2  Base
    3  Pills and small parts
    4  Bar
    5  Day line
    6  Chapters (quiet layout)
    7  Circles
    8  Stay inquiry
    9  Sheets, menu, lens
   10  After the day, footer
   11  Film layout
   ========================================================================== */


/* 1  Tokens ---------------------------------------------------------------- */

:root {
  --light: #fff6e6;      /* all type on film */
  --sun: #f59a3c;        /* the one accent: primary action, progress, current stop */
  --sun-lit: #ffb05c;    /* the accent under a pointer */
  --ink: #1d1206;        /* type on --sun */
  --net: #0b5987;        /* reading surfaces: sheets, the message draft (updated to delicate sea blue) */
  --net-deep: #073b5e;
  --link: #ffe066;      /* every text link (S29): yellow, AA on the sheet green (6.2:1) and on the dark film */
  --label: #ffc078;     /* sheet sub-titles: row labels (משך, דרישות…) and h4. AA on --net: 5.0 / 4.7 on the weave (S28) */
  --heading: #ff7ad9;    /* sheet headings, magenta (S26, the client's pink-magenta). One line to change; recheck contrast on --net:
                            h2 needs 3:1 (large), the h3 mix below needs 4.5:1. #ff7ad9: h2 3.5:1, h3 mix #ffb5e0 5.0:1 */
  --price: #7ff5d6;     /* every price (S31): mint, its own colour (not the text, heading, label or link colour).
                            AA: 6.2:1 on --net #0f5a4d, 5.7:1 on the weave #165f52, 14.4:1 on --night, 9.2:1 on --net-deep */
  --sky: #a8e4ff;       /* S45: light blue (תכלת) for sentences the user marked, bold; its own colour, not the mint price
                            or the yellow link. AA: 5.4:1 on --net, 5.0:1 on the weave's light stripes, 8.5:1 on --net-deep */
  --teal: var(--price);    /* S48, then the user (17.10.2026): the shore doors' turquoise is the price mint */
  --gulf: #1aa3b5;       /* the water surface in the day line, nowhere else */
  --night: #07111d;
  --film-css: 1;         /* S30: film.js waits until this reads 1, i.e. this sheet is applied (WebKit may run it before) */

  --display: "Karantina", "Arial Narrow", sans-serif;   /* the brand, the menu's stops, the dial's numeral, big links */
  /* S35: every heading (chapter titles, sheet h2/h3/h4) in a handwriting face, Hebrew and English.
     One variable for the face; --hand-scale sizes it against the Karantina sizes the layout was
     made for, --hand-leading is its line height.
     S39 (user, 15.10.2026): the sign's faces. Hebrew in Gveret Levin (one weight, 400, "thickened"
     below), Latin in Nunito 900 like "Diver's Village" on the sign. Nunito comes first and has no
     Hebrew, so every Hebrew letter (and ״ ׳ ₪) falls through to Gveret Levin, and every Latin letter,
     digit and ASCII sign comes from Nunito, also inside a Hebrew heading ("Master Diver"). Weight 900
     everywhere the face is used, with font-synthesis off so Gveret Levin is never faux-bolded.
     S43 (user, 15.10.2026, from a comparison): Latin in Gveret Levin's own Latin letters too (handwritten,
     slanted, like the Hebrew), on English pages and in Latin words inside Hebrew headings. Nunito is gone.
     The weight stays 900 for the rare character Gveret Levin lacks (Assistant, bold). */
  --hand: "Gveret Levin", "Assistant", system-ui, sans-serif;
  --hand-weight: 900;
  --hand-scale: .7;     /* S39 (S36 .68): measured on the screen, Gveret Levin's letters about as tall as Playpen's were, its lines a little shorter */
  --hand-leading: 1.12; /* S39: kept; Gveret Levin's lamed and final letters reach about as far as Playpen's did */
  --text: "Assistant", "Heebo", system-ui, sans-serif;  /* everything else */
  --title: calc(clamp(72px, min(11.7vw, 18.7svh), 168px) * var(--hand-scale));
  --title-leading: var(--hand-leading);

  /* Reading text scale (S25): the visitor's choice in the menu, kept in localStorage and set on
     <html data-text> before first paint. "m" is the default, a size up from S24; "s" is the S24
     size. Display titles keep their size; pills and other controls take half the step (--ts-ui). */
  --ts: 1.25;    /* S36: "m" clearly larger again (S35 1.14, S34 1.08) */
  --ts-ui: calc(1 + (var(--ts) - 1) / 2);

  --gutter: max(clamp(20px, 3.33vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));    /* S30: clear of a notch in landscape */
  --bar-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);              /* the film's own curve: the opening, the long moves */
  --ease-out: cubic-bezier(.23, 1, .32, 1);         /* things arriving and answering a press */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);      /* the sheet sliding in */
  --ease-bob: cubic-bezier(.37, 0, .63, 1);         /* a sine, for the diver's float */

  /* Gradients and shadows that belong to the title side follow the page direction. */
  --toward-end: to left;
  --end-x: 30%;
  --sheet-shadow: 40px 0 120px #000c;
  --sheet-from: -1;      /* the side a sheet slides in from: -1 left, 1 right */

  --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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  /* S35: a subtle contour for reading text on photographs (no marker behind it). */
  --contour: 0 0 1px #000e, 0 1px 2px #000c, 0 0 14px #000b;
  --weave: repeating-linear-gradient(45deg, #ffffff07 0 2px, #0000 2px 7px), repeating-linear-gradient(-45deg, #00000012 0 2px, #0000 2px 7px);

  color-scheme: dark;
}

:root[data-text="s"] { --ts: 1.1; }     /* S36: was 1 */
:root[data-text="l"] { --ts: 1.42; }    /* S36: was 1.28 */

:root[dir="ltr"] {
  --toward-end: to right;
  --end-x: 70%;
  --sheet-shadow: -40px 0 120px #000c;
  --sheet-from: 1;
}

/* Latin titles run longer and have descenders: a smaller clamp, and leading that keeps a "y" or
   a "g" clear of the line below. */
:root[lang="en"] {
  --hand-scale: .7;     /* S39: Nunito 900 about the size Playpen had (S36 .68). S43: kept for Gveret Levin's Latin, measured: the same line breaks and line heights at 390 and 1440 */
  --title: calc(clamp(60px, min(10.2vw, 16.3svh), 147px) * var(--hand-scale) * 1.12);
  --title-leading: var(--hand-leading);
}

@media (max-width: 719px) {
  :root { --title: calc(clamp(56px, 18.4vw, 96px) * var(--hand-scale)); --bar-h: 68px; }
  :root[lang="en"] { --title: calc(clamp(48px, 15.8vw, 84px) * var(--hand-scale) * 1.12); }
}

/* Each chapter's grade: dark rising from the bottom for type and the day line, lighter from the top for the bar. */
/* S35: the dawn's grade is lighter (it washed the sunrise out); the title reads by its own outline and shadow. */
#dawn  { --grade: linear-gradient(to top, #050d0bd1 0%, #050d0b7a 20%, #050d0b1f 40%, #0000 56%), linear-gradient(to bottom, #1b0e0547, #0000 18%); }
#wake  { --grade: linear-gradient(to top, #04101cf5 0%, #04101cc7 30%, #04101c40 58%, #0000 78%), linear-gradient(var(--toward-end), #04101cb3, #0000 62%), linear-gradient(to bottom, #04101c8c, #0000 20%); }
#yard  { --grade: linear-gradient(to top, #04140ffa 0%, #04140fd9 30%, #04140f4d 52%, #0000 72%), linear-gradient(to bottom, #04140f99, #0000 24%); }
#shore { --grade: linear-gradient(to top, #03131feb 0%, #03131f8f 24%, #03131f29 44%, #0000 60%), linear-gradient(var(--toward-end), #03131f8c, #0000 56%), linear-gradient(to bottom, #03131f99, #0000 24%); }
#under,
#learn { --grade: linear-gradient(to top, #021a2bf7 0%, #021a2bbd 30%, #021a2b2e 58%, #0000 78%), linear-gradient(var(--toward-end), #021a2b8c, #0000 55%), linear-gradient(to bottom, #021a2b73, #0000 20%); }
#dusk  { --grade: linear-gradient(to top, #0c0a07f5 0%, #0c0a07bf 28%, #0c0a0738 54%, #0000 74%), linear-gradient(var(--toward-end), #0c0a0780, #0000 58%), linear-gradient(to bottom, #0c0a078c, #0000 22%); }
#night { --grade: linear-gradient(#07111dd9, #07111df2), radial-gradient(120% 90% at var(--end-x) 40%, #1c2f5a66, #0000 60%); }
/* In English the opening title sits over the pale shade cloth, which needs its own shadow. */
:root[dir="ltr"] #dawn { --grade: linear-gradient(to top, #050d0bd1 0%, #050d0b7a 20%, #050d0b1f 40%, #0000 56%), linear-gradient(to right, #050d0b66, #0000 46%), linear-gradient(to bottom, #1b0e0547, #0000 18%); }


/* Scroll cue indicator in dawn header */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.scroll-cue .scroll-arrow {
  display: inline-block;
  font-size: 1rem;
  animation: scroll-bounce 1.6s infinite ease-in-out;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue .scroll-arrow { animation: none; }
}
/* Review 16.10.2026 (B4): on a phone the cue was barely noticeable; a larger, bolder label and arrow. */
@media (max-width: 719px) {
  .scroll-cue { font-size: 1.05rem; font-weight: 700; color: #fff; }
  .scroll-cue .scroll-arrow { font-size: 1.7rem; line-height: 1; }
}
:root.paused .scroll-cue .scroll-arrow { animation: none; }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--night);
  color: var(--light);
  font: 500 calc(18px * var(--ts)) / 1.5 var(--text);    /* S35: a little heavier (was 400) */
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
/* S30: no loop here has controls. iOS in Low Power Mode would draw its play glyph over a loop it
   refused to start; the poster or the photograph under it is the picture instead. */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
/* Phones: no grey flash on tap, no double-tap zoom, no text selection or callout on a long press. */
a, button, label { -webkit-tap-highlight-color: transparent; }
a, button, label { touch-action: manipulation; }
button, .dayline a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
/* Prices keep a thin dark edge (Patul, S34), so the mint holds on photographs too. S36 (user,
   14.10.2026): bigger and more noticeable, about 1.3 times the text around them, extra bold, with a
   slightly firmer edge and a soft dark glow. A price inside a door or a price row takes that row's size. */
.price, .doors b, .rows.prices dd {
  -webkit-text-stroke: 1.5px rgba(4, 12, 22, 0.85);
  paint-order: stroke fill;
  text-shadow: 0 1px 2px #000b, 0 0 12px #0009;
}
.price { font-size: 1.3em; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.rows.prices dd, .doors b, .courses span) .price { font-size: 1em; }
/* Review 16.10.2026 (6.4): inside running text (a paragraph or a list line) a price is 1.1 times the text, so it does not
   bump the line; doors, price rows and badges keep their own size. */
:is(p, .list li) .price { font-size: 1.1em; }
/* S35 (user, 14.10.2026): every heading is white with a magenta outline (--heading), in the handwriting
   face. S39 (user, 15.10.2026): "thickened" like the sign. The white letter gets a thin white stroke of
   its own (--ws, painted with the fill, so the letter grows by half of it on each side), and the magenta
   outline is a ring of sixteen hard shadows of that thickened letter, --o beyond it, under the text. One
   element, no copy of the text, so a screen reader reads every heading once. A soft dark shadow (--drop)
   underneath keeps it legible on bright photographs. S43: Latin is in Gveret Levin too, thickened the
   same way (S39 left the white stroke off for Nunito 900, which was heavy already). */
h1, h2, h3, h4 {
  --o: .05em;
  --ws: .05em;
  --drop: 0 2px 14px #0007;
  --ring:
    var(--o) 0 var(--heading), calc(var(--o) * .924) calc(var(--o) * .383) var(--heading),
    calc(var(--o) * .707) calc(var(--o) * .707) var(--heading), calc(var(--o) * .383) calc(var(--o) * .924) var(--heading),
    0 var(--o) var(--heading), calc(var(--o) * -.383) calc(var(--o) * .924) var(--heading),
    calc(var(--o) * -.707) calc(var(--o) * .707) var(--heading), calc(var(--o) * -.924) calc(var(--o) * .383) var(--heading),
    calc(var(--o) * -1) 0 var(--heading), calc(var(--o) * -.924) calc(var(--o) * -.383) var(--heading),
    calc(var(--o) * -.707) calc(var(--o) * -.707) var(--heading), calc(var(--o) * -.383) calc(var(--o) * -.924) var(--heading),
    0 calc(var(--o) * -1) var(--heading), calc(var(--o) * .383) calc(var(--o) * -.924) var(--heading),
    calc(var(--o) * .707) calc(var(--o) * -.707) var(--heading), calc(var(--o) * .924) calc(var(--o) * -.383) var(--heading);
  font-family: var(--hand);
  font-weight: var(--hand-weight);
  font-synthesis: none;
  color: var(--light);
  -webkit-text-stroke: var(--ws) var(--light);
  paint-order: normal;
  text-shadow: var(--ring), var(--drop);
}
.card h1, .card h2, .sheet h2, .after h2, .menu h2 { --o: .06em; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
main:focus { outline: none; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  z-index: 100;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--light);
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Controls that only do something with JavaScript. */
html:not(.js) .needs-js { display: none; }


/* 3  Pills and small parts -------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid #fff6e6cc;
  border-radius: 999px;
  background: var(--glass-fill, #0000002e);          /* 22.10.2026: the glass, so film.css can make it a plain tint while a stage arrives on a phone */
  backdrop-filter: var(--glass, blur(6px));
  color: var(--light);
  font: 600 calc(17px * var(--ts-ui)) / 1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, transform 160ms var(--ease-out);
}
.pill.solid { border-color: var(--sun); background: var(--sun); color: var(--ink); backdrop-filter: none; }
.pill.quiet { border-color: transparent; background: none; backdrop-filter: none; padding-inline: 14px; }
/* Plain text that sits straight on a photograph carries the subtitles' shadow, so it reads on bright plates too. */
.bar .pill.quiet, .bar .lang, .bar .brand, .stage .pill.quiet { text-shadow: 0 1px 2px #000c, 0 0 18px #000b; }
.pill:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .pill:hover { border-color: var(--light); background: #fff6e624; }
  .pill.solid:hover { border-color: var(--sun-lit); background: var(--sun-lit); }
  .pill.quiet:hover { border-color: transparent; background: #fff6e61a; }
}

/* The stop label above a title. */
.when {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: calc(20px * var(--ts));
  font-weight: 600;
  line-height: 1.2;
  text-shadow: var(--contour);
}
/* User, 19.10.2026: no orange dot before the label any more (the day line already marks the stop). */

.small { font-size: calc(15px * var(--ts)); line-height: 1.45; }
.note { font-size: calc(15px * var(--ts)); line-height: 1.45; opacity: .82; }


/* 4  Bar -------------------------------------------------------------------- */

.bar {
  position: sticky;
  z-index: 30;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--bar-h);
  padding: 10px var(--gutter);
  background: var(--night);
  top: env(safe-area-inset-top, 0px);    /* S30: under the status bar when the page is full screen (home-screen app) */
  transition: opacity .3s var(--ease);
}

.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; line-height: 1; text-decoration: none; }
.brand .mark { flex: none; block-size: 64px; inline-size: auto; filter: drop-shadow(0 2px 6px #0008); }
.brand .words { display: flex; flex-direction: column; justify-content: center; }
.brand b { font: 700 40px/1 var(--display); letter-spacing: .03em; }
.brand .words span { margin-top: 2px; font-size: 15px; font-weight: 500; opacity: .85; }
.foot-logo { display: block; inline-size: min(180px, 46vw); block-size: auto; margin: 0 0 18px; }

.bar-actions { display: flex; align-items: center; gap: 10px; }
.bar .pill { font-size: 17px; }    /* the bar keeps its size at every text step, so it always fits */

.lang {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 10px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .lang:hover { text-decoration: underline; text-underline-offset: .25em; } }

/* The motion toggle only exists where something moves. */
.pause {
  display: none;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1.5px solid #fff6e6cc;
  border-radius: 50%;
  background: #0000002e;
  transition: background-color .2s, transform 160ms var(--ease-out);
}
.pause::before { content: ""; width: 12px; height: 15px; border-inline: 4px solid var(--light); }
.pause[aria-pressed="true"]::before {
  width: 0; height: 0;
  margin-left: 4px;
  border: solid transparent;
  border-width: 8px 0 8px 13px;
  border-left-color: var(--light);
}
.pause:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pause:hover { background: #fff6e624; } }

@media (max-width: 719px) {
  .bar { gap: 8px; padding-block: 10px; }
  .brand { gap: 6px; }
  .brand .mark { block-size: 46px; }
  .brand b { font-size: 27px; line-height: .86; inline-size: min-content; }
  .brand .words span { display: none; }
  .bar-actions { gap: 6px; }
  .bar .pill { min-height: 46px; padding-inline: 14px; font-size: 16px; }
  .bar .pill.quiet { padding-inline: 10px; }
}
/* S43 (user, 15.10.2026, on a phone: "it's not possible to change language"): on the narrowest screens
   the language link stays in the bar as a small round control with a short label ("EN" / "עב"; its
   name is the whole word), beside the motion toggle; everything else gives a little so all of it fits. */
.lang .short { display: none; }
@media (max-width: 559px) {
  .bar .lang {
    flex: none;
    justify-content: center;
    width: 44px; height: 44px; min-height: 44px;
    padding: 0;
    border: 1.5px solid #fff6e6cc;
    border-radius: 50%;
    background: #0000002e;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
  }
  .bar .lang .long { display: none; }
  .bar .lang .short { display: inline; }
  .bar .lang:active { transform: scale(.97); }
}
/* Review 16.10.2026 (2.1, approved by the user): the round WhatsApp control (build.mjs {{@wa round}}) instead of the
   "Courses" pill on phones, the size of the language control; WhatsApp is one tap away on every screen. */
.wa-round { display: none; }
/* User, 19.10.2026: the round WhatsApp logo in the bar on every screen (the night's Z's fly to it); on phones it
   still takes the place of "Courses". */
@media (max-width: 559px) { .bar .to-dive { display: none; } }
@media all {
  .bar .wa-round {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1.5px solid #fff6e6cc;
    border-radius: 50%;
    background: #07111d8c;
    transition: transform 160ms var(--ease-out);
  }
  .bar .wa-round svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px #0008); }
  .bar .wa-round:active { transform: scale(.97); }
}
.rooms .short { display: none; }
/* On phones the brand keeps the width of its mark and name (S27 QA): shrunk, the name ran under the menu. */
@media (max-width: 719px) { .bar .brand { flex-shrink: 0; } }
/* S43: with the language control in the bar, the lodging pill takes its short name a little sooner. */
@media (max-width: 519px) {
  .rooms .long { display: none; }
  .rooms .short { display: inline; }
  .bar .pill { padding-inline: 12px; }
}
@media (max-width: 559px) {
  :root[lang="en"] .rooms .long { display: none; }
  :root[lang="en"] .rooms .short { display: inline; }
}
@media (max-width: 439px) {    /* S43: was 419px (the language control) */
  .bar { gap: 6px; padding-inline: 10px; }
  .brand b { font-size: 25px; }
  .brand { gap: 4px; }
  .brand .mark { block-size: 34px; }
  :root[lang="en"] .brand b { font-size: 20px; }    /* "Courses" and "Rooms" are longer: the motion toggle stays on screen */
  .bar-actions { gap: 4px; }
  .bar .pill { padding-inline: 9px; font-size: 15px; }
  .bar .pill.quiet { padding-inline: 5px; }
  .pause { width: 44px; height: 44px; }
}
@media (max-width: 374px) {
  .bar-actions { gap: 2px; }
  .bar .pill { padding-inline: 7px; }
  .bar .pill.quiet { padding-inline: 4px; }
}
/* Review 16.10.2026 (B5): in English below 420px the name wrapped to "Divers / Village" beside the mark: the mark alone
   (the link's aria-label carries the name), a 44px target. */
@media (max-width: 419px) {
  :root[lang="en"] .bar .brand .words { display: none; }
  :root[lang="en"] .bar .brand { min-inline-size: 44px; justify-content: center; }
  :root[lang="en"] .bar .brand .mark { block-size: 40px; }
}
/* S43: the very narrowest phones keep the logo without the name beside it (the link still says it). */
@media (max-width: 339px) {
  .bar .brand .words { display: none; }
}


/* 5  Day line ---------------------------------------------------------------
   Quiet layout: a plain row of the eight stops on a line. The film layout
   (section 11) fixes it to the bottom and adds the path, the water and the cat. */

.dayline { padding: 22px var(--gutter) 10px; background: var(--night); }
.dayline > svg, .cat, .cat-say, .iris { display: none; }
.dayline ol { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }    /* S44: nine stops */
.dayline li { border-top: 1.5px solid #fff6e680; }

.dayline a {
  position: relative;
  display: block;
  min-height: 48px;
  padding: 16px 4px 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s;
}
.dayline a { --dot: 14px; cursor: pointer; }
.dayline a[aria-current] { --dot: 20px; font-weight: 700; opacity: 1; }
/* Each stop is a button-like dot on the line (S25): an outlined dot, filled with the sun when it is
   the stop reached, growing under a pointer, ringed for the keyboard, pressed in on a tap. The whole
   cell above and below it is the link. */
.dayline a::before {
  content: "";
  position: absolute;
  top: calc(-.75px - var(--dot) / 2);
  left: 50%;
  width: var(--dot); height: var(--dot);
  border: 2px solid var(--light);
  border-radius: 50%;
  background: var(--night);
  box-shadow: 0 1px 8px #0009;
  translate: -50% 0;
  transition: scale 160ms var(--ease-out), background-color .2s, box-shadow .2s;
}
.dayline a[aria-current]::before { background: var(--sun); }
.dayline a:focus-visible { outline: none; }
.dayline a:focus-visible::before { box-shadow: 0 0 0 3px var(--night), 0 0 0 5.5px var(--sun); }
.dayline a:focus-visible span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.dayline a:active::before { scale: .88; }
@media (hover: hover) and (pointer: fine) {
  .dayline a:hover { opacity: 1; }
  .dayline a:hover::before { scale: 1.3; background: var(--sun-lit); }
  .dayline a[aria-current]:hover::before { scale: 1.15; }
}

@media (max-width: 719px) {
  .dayline ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }    /* S44: nine stops, three rows */
}


/* 6  Chapters (quiet layout) ---------------------------------------------------
   The stage is a grid: the first photograph, its grade and the title card share
   the first row; the subtitles follow as paragraphs; the other photographs and
   the circles form a row under them. DOM order is the paint order. */

.chapter { background: var(--night); scroll-margin-top: var(--bar-h); }

.stage {
  --row-gap: clamp(28px, 4vw, 56px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 28px);
  align-items: start;
  padding: 0 var(--gutter) clamp(56px, 8vw, 112px);
}

.shot { position: relative; overflow: hidden; }
.shot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
@media (orientation: portrait) {
  .shot img { object-position: var(--pos-tall, var(--pos, 50% 50%)); }
  .shot.wide { display: none; }
}
@media (orientation: landscape) { .shot.tall { display: none; } }

.shot.lead, .grade {
  grid-area: 1 / 1 / 2 / -1;
  align-self: stretch;
  margin-inline: calc(-1 * var(--gutter));
}
.shot.lead { min-height: 80svh; }
#night .shot img { filter: saturate(.55) brightness(.75); }

.grade { position: relative; background: var(--grade); pointer-events: none; }
/* One grain over every plate, so phone photographs read as one film. */
.grade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: .13;
}
/* User, 22.10.2026 (Galaxy Fold video): not on a touch screen, where it is a blend over every plate on every
   scroll frame (the plates push in) and, at .13 on a phone's small sharp screen, all but invisible. */
@media (pointer: coarse) { .grade::after { display: none; } }

.halo { display: none; }
/* A shot in #under carries a loop over its photograph (S24). Only the film plays it. */
.shot video { display: none; }

.card {
  position: relative;
  grid-area: 1 / 1 / 2 / -1;
  align-self: end;
  max-width: 800px;
  padding-block: 120px clamp(28px, 5vw, 56px);
}
.card h1, .card h2 {
  font: var(--hand-weight) var(--title) / var(--title-leading) var(--hand); font-synthesis: none;
  text-wrap: balance;
  --drop: 0 2px 4px #0009, 0 4px 40px #0008;
}
#night .card h2 { font-size: calc(var(--title) * .893); }
#learn .card { max-width: none; }    /* one line where it fits, so the title stays under the divers' faces */
#shore .card, #under .card, #dusk .card { max-width: none; }
#yard .card { max-width: 920px; }
/* User, 16.10.2026: "the headline should be in one line": in Hebrew on every width (7.1em wide), smaller where the screen is narrow. */
:root[lang="he"] #yard-title { white-space: nowrap; font-size: min(var(--title), calc((100vw - 2 * var(--gutter)) / 7.3)); }    /* user, 16.10.2026: "הרחבה היא הסלון" on one line on a wide screen, Tut hanging from it */    /* S28: the five doors take the width of the screen */
/* Five words with a comma: break at the comma, at every size. */
#shore .card h2, #under .card h2 { max-width: 5em; text-wrap: wrap; }
/* S39: Gveret Levin is narrower; "הכביש, והים" (4.9em) would share a line, so the break stays at the comma. */
:root[lang="he"] #shore .card h2 { max-width: 4.5em; }
/* S36 (user): the English shore title was four cramped lines at 4.1em; two balanced lines instead. */
:root[lang="en"] #shore .card h2, :root[lang="en"] #under .card h2 { max-width: 7.4em; text-wrap: balance; }
/* User, 18.10.2026: the hungry and night ledes in the prices' mint (first the light blue; "this is the colour I want");
   then every chapter's line under its title: turquoise handwriting. */
.chapter .lede { color: var(--price); font-family: var(--hand); font-weight: var(--hand-weight); font-synthesis: none; }
.lede {
  max-width: 25em;
  margin-top: 24px;
  font-size: calc(clamp(18px, 1.6vw, 23px) * var(--ts));
  line-height: 1.45;
  text-wrap: balance;
  text-shadow: var(--contour);
}
:root[lang="en"] .lede { max-width: 29em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }

/* The courses, from the shore on (S24): one pill each, its name and its price. The sun's colour
   marks them as the way in to the sea. */
.courses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.courses .pill {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 56px;
  padding: 8px 20px;
  border-color: #f59a3ccc;
  border-radius: 24px;
  background: #07111d73;
  line-height: 1.15;
}
.courses b { font-size: calc(16px * var(--ts-ui)); font-weight: 700; }
.courses span, .doors b { color: var(--sun-lit); font-size: calc(15px * var(--ts-ui)); font-weight: 600; font-variant-numeric: tabular-nums; }
.doors b, .price { color: var(--price); }    /* S31: prices in their own colour (build.mjs wraps amounts in .price) */
.courses + .actions { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) { .courses .pill:hover { border-color: var(--sun-lit); background: #07111db3; } }

/* The five ways in to the sea (S28: in the shore chapter, moved from the dive chapter, with snorkelling
   as the fifth), in its card for the whole chapter: a pill, one line and the price. */
.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 24px; max-width: 1340px; margin-top: 28px; }
.doors a { display: grid; justify-items: start; align-content: start; gap: 8px; text-decoration: none; }
.doors .pill { max-width: 100%; border-color: #f59a3ccc; background: #07111d73; white-space: normal; text-align: start; line-height: 1.15; padding-block: 8px; }
.doors .line { max-width: 17em; font-size: calc(16px * var(--ts)); line-height: 1.4; text-shadow: var(--contour); }
.doors b { font-size: calc(20px * var(--ts-ui)); font-weight: 800; }    /* S36: a price, larger (was 15px) */
.doors a:active .pill { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .doors a:hover .pill { border-color: var(--sun-lit); background: #07111db3; } }

/* The chapter's one extra line, under its card. It may come on later; its place is kept. */
.card .sub {
  max-width: 30em;
  margin-top: 20px;
  color: #fff6e6e0;
  font-size: calc(clamp(17px, 1.35vw, 20px) * var(--ts));
  font-weight: 500;
  line-height: 1.4;
  text-shadow: var(--contour);
}

.shot:not(.lead) {
  order: 2;
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  margin-top: var(--row-gap);
  border-radius: 16px;
}

@media (max-width: 1023px) {
  .shot:not(.lead) { grid-column: span 3; }
}
/* Five doors need room for their verbatim lines: two rows of three below 1200px (S28). */
@media (min-width: 720px) and (max-width: 1199px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.doors .line { overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .shot:not(.lead) { grid-column: 1 / -1; }
  /* On a phone a door is one pill like the course pills: its name and its price inside (S28). */
  .doors { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .doors a {
    gap: 4px;
    align-content: center;
    min-height: 52px;
    padding: 7px 12px;
    border: 1.5px solid #f59a3ccc;
    border-radius: 24px;
    background: #07111d73;
    backdrop-filter: blur(6px);
    color: var(--light);
    line-height: 1.15;
  }
  .doors .pill { min-height: 0; padding: 0; border: 0; background: none; backdrop-filter: none; font-size: calc(15px * var(--ts-ui)); font-weight: 700; }
  .doors b { font-size: calc(18px * var(--ts-ui)); }    /* S36: was 14px */
  .doors .line { display: none; }
  /* Five: the fifth takes the whole row, its name and price side by side where they fit. */
  .doors a:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; flex-flow: row wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; }
  .courses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .courses .pill { min-height: 52px; padding: 7px 12px; white-space: normal; }
  .courses b { font-size: calc(15px * var(--ts-ui)); }
  .courses span { font-size: calc(14px * var(--ts-ui)); }
  /* Five pills (S26): the odd one out takes the whole row, its name and price side by side where they fit. */
  .courses .pill:last-child:nth-child(odd) { grid-column: 1 / -1; flex-flow: row wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; }
  .card { padding-block-start: 96px; }
  .when { font-size: calc(18px * var(--ts)); }
}
@media (max-width: 379px) {
  /* The narrowest phones: five course pills in a tighter grid, so the card keeps its title under the bar. */
  .courses { gap: 6px; margin-top: 12px; }
  .courses .pill { min-height: 46px; padding: 6px 10px; gap: 2px; border-radius: 18px; }
  .courses b { font-size: calc(14px * var(--ts-ui)); }
  .courses span { font-size: calc(13px * var(--ts-ui)); }
  .doors { gap: 6px; margin-top: 12px; }
  .doors a { min-height: 46px; padding: 6px 10px; gap: 2px; border-radius: 18px; }
  .doors .pill { font-size: calc(14px * var(--ts-ui)); }
  .doors b { font-size: calc(16px * var(--ts-ui)); }    /* S36: was 13px */
}


/* 7  Circles ----------------------------------------------------------------
   Every moving picture and every close-up lives in one, at a size where it
   stays sharp. --zoom, --focus and --origin frame the picture inside it. */

.stage .ring { order: 2; justify-self: center; width: min(100%, 260px); margin-top: var(--row-gap); }

.disc {
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1;
  border: 2px solid var(--light);
  border-radius: 50%;
  background: var(--night);
  box-shadow: 0 30px 80px #0009;
}
.disc img, .disc video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origin, 50% 50%);
}

.ring figcaption {
  margin-top: 18px;
  font-size: calc(17px * var(--ts));
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.ring figcaption small { display: block; font-size: calc(15px * var(--ts)); font-weight: 400; opacity: .82; }
/* Two bars before the caption while the loop is running. */
.ring.playing figcaption::before {
  content: "";
  display: inline-block;
  width: 9px; height: 11px;
  margin-inline-end: 8px;
  border-inline: 3px solid var(--light);
}

/* The encounters: small circles that open larger. */
.meets { order: 3; grid-column: 1 / -1; margin-top: var(--row-gap); }
.meets ul { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.meets .note { margin-top: 16px; }
.meet {
  display: grid;
  gap: 8px;
  width: 104px;
  padding: 0;
  border: 0;
  background: none;
  font-size: calc(14px * var(--ts));
  line-height: 1.3;
  text-align: center;
}
.meet img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border: 2px solid var(--light);
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: scale 160ms var(--ease-out);
}
.meet:active img { scale: .97; }
@media (hover: hover) and (pointer: fine) { .meet:hover img { scale: 1.05; } }
html:not(.js) .meet { cursor: default; }

@media (max-width: 1023px) {
  .stage .ring { grid-column: span 2; }
}
@media (max-width: 719px) {
  .stage .ring { grid-column: span 3; }
  .ring figcaption { font-size: calc(16px * var(--ts)); }
  .meet { width: 88px; }
}


/* 8  Night: the WhatsApp card -------------------------------------------------
   S42 (user, 15.10.2026): the stay inquiry (nights dial, room chips, draft, copy) is gone. A small card,
   the line "simple, send a WhatsApp message" and the WhatsApp button (a plain chat). */

.stay {
  order: 2;
  grid-column: 1 / -1;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(460px, 100%);
  margin-top: var(--row-gap);
  padding: 22px 24px 24px;
  border: 1.5px solid #fff6e633;
  border-radius: 28px;
  background: #07111dcc;
  box-shadow: 0 12px 36px #0009;
  text-align: center;
}
.stay .wa-simple { margin: 0; }


/* 9  Sheets, menu, lens --------------------------------------------------------
   The reading surfaces, in the green of the yard's shade nets. Without
   JavaScript a sheet is a plain section; with it, a modal dialog that slides
   in from the inline end. */

.sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 700px);
  width: auto; height: auto;
  max-width: none; max-height: none;
  margin: 0;
  padding: clamp(48px, 8vw, 96px) var(--gutter);
  border: 0;
  background: var(--weave), var(--net);
  color: var(--light);
  scroll-margin-top: var(--bar-h);
}
.sheet + .sheet { border-top: 1px solid #fff6e640; }
.sheet.menu, .lens { display: none; }

.sheet h2 {
  margin-top: 18px;
  font: var(--hand-weight) calc(clamp(64px, 9.2vw, 132px) * var(--hand-scale)) / var(--title-leading) var(--hand); font-synthesis: none;
  text-wrap: balance;
}
:root[lang="en"] .sheet h2 { font-size: calc(clamp(50px, 6.9vw, 100px) * var(--hand-scale) * 1.12); }
.sheet .lead { max-width: 26em; margin-top: 20px; font-size: calc(clamp(18px, 1.5vw, 21px) * var(--ts)); line-height: 1.55; }

.shots { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; margin-top: 26px; }
.shots :is(img, video) { width: 100%; height: clamp(120px, 22svh, 230px); border-radius: 16px; object-fit: cover; }    /* user, 18.10.2026: a loop among the photos */

.photo { margin-top: 30px; }
.photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 16px; object-fit: cover; }
.photo figcaption { margin-top: 10px; font-size: calc(15px * var(--ts)); opacity: .82; }

/* S28: the rooms sheet, one part per room: its photos side by side, its small circle, what is in it
   and its prices; then the site, and the course students' line. */
.part > .tagline { margin-top: 2px; opacity: .82; }
.room-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.room-photos:has(> li:only-child) { grid-template-columns: minmax(0, 440px); }
@media (min-width: 720px) { .room-photos:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.room-photos img { width: 100%; height: clamp(130px, 22svh, 220px); border-radius: 14px; object-fit: cover; }
.room .ring.aside { margin-top: 18px; }
/* S35: the course students' line stands out: larger, bold, in the handwriting face and sun-orange
   (--sun-lit on --net 4.2:1, large bold text, AA 3:1), with the sun's rule beside it. No marker behind. */
.part > .students {
  max-width: 24em;
  margin-top: 24px;
  padding-inline-start: 16px;
  border-inline-start: 4px solid var(--price);    /* user, 18.10.2026: turquoise (was the sun's orange) */
  color: var(--price);
  font: var(--hand-weight) calc(24px * var(--ts)) / 1.35 var(--hand); font-synthesis: none;
  text-shadow: 0 1px 2px #0006;
}

/* The village sheet's own small circle. */
.ring.aside { display: flex; align-items: center; gap: 20px; width: auto; margin-top: 26px; }
.ring.aside .disc { flex: none; width: 132px; box-shadow: none; }
.ring.aside figcaption { margin: 0; text-align: start; }
/* User, 17.10.2026: a last, softer line in Angel's story, in the handwriting face. */
.angel-note { margin-top: 14px; color: var(--price); font: var(--hand-weight) calc(24px * var(--ts)) / 1.4 var(--hand); font-synthesis: none; text-shadow: 0 1px 2px #0006; }
/* User, 18.10.2026: her two light-blue lines in handwriting. */
/* User, 17.10.2026: Angel's gallery (sheets.js initGallery): her picture big in the middle, the others in a
   circle round it. */
img.g-open { cursor: zoom-in; }
.gallery { position: fixed; inset: 0; z-index: 70; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: #04101c; color: var(--light); animation: g-in .25s ease-out; }
.gallery::backdrop { background: #04101c; }
.gallery .g-big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  max-inline-size: min(54vw, 60vh); max-block-size: min(52vh, 64vw); inline-size: auto; block-size: auto;
  border-radius: 20px; border: 3px solid var(--light); box-shadow: 0 16px 50px #000c; object-fit: contain;
}
.gallery .g-thumb {
  position: absolute; inline-size: clamp(58px, 14vmin, 104px); aspect-ratio: 1; padding: 0; translate: -50% -50%;
  border: 2px solid var(--light); border-radius: 50%; overflow: hidden; background: none; cursor: pointer;
  box-shadow: 0 6px 16px #0009; transition: left .35s ease, top .35s ease, scale .2s;
}
.gallery .g-thumb[hidden] { display: none; }
.gallery .g-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery .g-thumb:hover, .gallery .g-thumb:focus-visible { scale: 1.12; }
.gallery .g-thumb:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.gallery .g-close { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); inset-inline-end: 16px; z-index: 1; }
@keyframes g-in { from { opacity: 0; } }
/* User, 17.10.2026: on phones and tablets a course's clip in a big circle floating at the bottom of the
   sheet, on the inline-end side (left in Hebrew, right in English); a tap opens it big. */
.course-bubble { display: none; }
.course-dock { display: none; }
html.js:not(.quiet) dialog.sheet[open] .course-dock:has(.course-bubble:not([hidden])) {
  --bub: clamp(193px, 56vw, 282px);    /* user, 17.10.2026: 1.66 times bigger (was clamp(116px, 34vw, 170px)) */
  position: sticky; z-index: 3; display: block; flex: none;
  top: calc(100dvh - var(--bub) - 22px - env(safe-area-inset-bottom, 0px));
  block-size: 0; margin: 0 calc(var(--pad-inline, 20px) * -1 + 14px);
}
html.js:not(.quiet) dialog.sheet[open] .course-bubble:not([hidden]) {
  position: absolute; top: 0; inset-inline-end: 0; display: block;
  inline-size: var(--bub); aspect-ratio: 1; padding: 0;
  border: 3px solid var(--light); border-radius: 50%; overflow: hidden; background: #07111d;
  box-shadow: 0 10px 28px #000b; cursor: zoom-in;
}
html.js dialog.sheet .course-bubble video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* the end of the sheet keeps room so its last lines and buttons are not under the circle */
html.js:not(.quiet) dialog.sheet[open]:has(.course-bubble:not([hidden])) { padding-bottom: calc(40px + clamp(193px, 56vw, 282px) + env(safe-area-inset-bottom, 0px)); }
/* User, 17.10.2026: on a phone the chapter buttons let the video show through: a lighter glass, a softer blur,
   and the words kept readable by their own shadow. */
@media (max-width: 719px) {
  html.js:not(.quiet) .doors a, html.js:not(.quiet) .doors.feature a, html.js:not(.quiet) .doors .minor {
    background: #07111d47; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  html.js:not(.quiet) .doors a :is(.pill, b, .line, .door-name, .door-first, .door-teal, em) { text-shadow: 0 1px 2px #000e, 0 0 10px #000a; }
}
/* User, 17.10.2026: the night chapter's two big circles: on a wide screen above the WhatsApp card (sized to
   end before it); on a phone as round photos in the free room between the words and the card. */
html.js:not(.quiet) #night .stage { --ring-y: 15svh; }
html.js:not(.quiet) #night .stage .ring.big { --ring-d: calc(clamp(170px, min(21vw, 100svh - var(--ring-y) - 420px), 340px) * var(--ring-fit, 1)); }
html.js:not(.quiet) #night .stage .ring.big.pair { inset-inline-end: calc(var(--ring-x) + var(--ring-d) + 40px); }
.night-pair { display: none; }
@media (max-width: 719px) {
  html.js:not(.quiet) #night .stage .ring.big { display: none; }
  /* User, 18.10.2026: in front of the text (film.js sizes them to the room between the text and the card). */
  html.js:not(.quiet) #night .stay { z-index: 2; }
  /* User, 18.10.2026: with little room the card loses its heading (still read out), so the circles fit under the words. */
  html.js:not(.quiet) #night .stay.snug .wa-how { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.js:not(.quiet) .stay .night-pair { position: absolute; inset-inline: 0; top: calc(100% + 14px); display: flex; justify-content: center; gap: 22px; pointer-events: none; }    /* user, 18.10.2026: under the card (it was above) */
  /* User, 18.10.2026 (iPhone: empty ovals): a fixed square, never shrunk by the row, with the loop's first frame
     under it, so it is round and never empty when Safari does not play the loop. */
  html.js:not(.quiet) #night .stay { top: var(--stay-top, auto); bottom: auto; }    /* user, 18.10.2026: right under the words (film.js), the circles under it */
  .night-pair span { flex: none; inline-size: var(--pair-d, min(42vw, 168px)); block-size: var(--pair-d, min(42vw, 168px)); aspect-ratio: auto; background: #0b1626 center / cover no-repeat; border: 3px solid var(--light); border-radius: 50%; overflow: hidden; box-shadow: 0 10px 24px #000a; }
  .night-pair :is(video, img) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  html.js:not(.quiet) #night .stage .catdot { display: none !important; }    /* the cat steps aside for the two */
}
/* User, 17.10.2026: a video opened big: as tall as the screen allows, with the player's own controls. */
.video-zoom .g-big { max-inline-size: min(92vw, 520px); max-block-size: 86vh; background: #000; }
@media (prefers-reduced-motion: reduce) { .gallery, .gallery .g-thumb { animation: none; transition: none; } }
/* User, 17.10.2026: Angel's own photos side by side (four in a row; two by two on a phone). */
.angel-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.angel-pics figure { margin: 0; }
.angel-pics img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 16px #0006; }
@media (max-width: 479px) { .angel-pics { gap: 6px; } }
/* User, 17.10.2026: Angel's two videos side by side under her story, each with its sound button. */
.angel-videos { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.angel-videos .ring.aside { position: relative; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.angel-videos .ring.aside .disc { width: 168px; }
.angel-videos .ring.aside figcaption { text-align: center; max-inline-size: 180px; }
.angel-videos .ring .sound { --ring-d: 168px; }
@media (max-width: 479px) { .angel-videos { gap: 8px 14px; justify-content: center; } .angel-videos .ring.aside .disc { width: min(40vw, 150px); } .angel-videos .ring.aside figcaption { max-inline-size: 150px; } }

/* The dive sheet is a hub: one link per dive sheet, its title in the display face and one line under it. */
.routes { margin-top: 30px; border-top: 1px solid #fff6e640; }
.routes li { border-bottom: 1px solid #fff6e640; }
.routes a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 14px 12px; text-decoration: none; }    /* S36: larger text must wrap, never widen the sheet at 320 */
.routes span { overflow-wrap: anywhere; }
.routes b { font: 700 clamp(34px, 3.6vw, 46px) / .9 var(--display); letter-spacing: .01em; transition: color .2s; }
.routes span { font-size: calc(16px * var(--ts)); line-height: 1.4; opacity: .86; }
@media (hover: hover) and (pointer: fine) { .routes a:hover b { color: var(--sun); } }

/* S31: the list of courses at the top of the advanced sheet, as on the old page; each item jumps to its section. */
.toc { margin-top: 30px; }
.toc ul { margin-top: 10px; border-top: 1px solid #fff6e640; }
.toc li { border-bottom: 1px solid #fff6e640; }
.toc a { display: block; min-block-size: 44px; padding-block: 11px; font-size: calc(17px * var(--ts)); font-weight: 700; line-height: 1.4; text-underline-offset: .25em; }

/* Reading inside a sheet: parts with a plain heading, rows of label and value, short lists, and
   document links. Prices sit in .rows.prices, the value at the inline end where the eye looks for it. */
.part { margin-top: 38px; }
.sheet h3 {
  font-size: calc(clamp(23px, 2vw, 28px) * var(--ts));    /* S36: was clamp(21px, 1.8vw, 25px) */
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}
.sheet h4 { margin: 24px 0 0; font-size: calc(20px * var(--ts)); font-weight: 600; line-height: 1.4; }
.part > p, .kind > p { max-width: 36em; margin-top: 10px; font-size: calc(17px * var(--ts)); line-height: 1.55; }
.part a, .rows a, .list a { font-weight: 600; text-underline-offset: .25em; }
.kinds { display: grid; gap: 4px; }
.kind > p { margin-top: 2px; opacity: .82; }

.rows { margin-top: 14px; border-top: 1px solid #fff6e640; }
.rows > div {
  display: grid;
  grid-template-columns: minmax(6.5em, 32%) minmax(0, 1fr);
  gap: 4px 20px;
  padding-block: 11px;
  border-bottom: 1px solid #fff6e640;
  font-size: calc(17px * var(--ts));
  line-height: 1.45;
}
.rows dt { font-weight: 700; color: var(--label); }
:is(#intro, #courses, #advanced, #lead, #certified, #snorkel) .rows dt { color: var(--price); }    /* user, 18.10.2026: every course's labels in turquoise */
.rows.prices > div { display: flex; align-items: baseline; justify-content: space-between; }
.rows.prices dd { color: var(--price); flex: none; font-size: 1.34em; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }    /* S36: larger */
.rows.prices dt { min-width: 0; }

.list { margin-top: 12px; padding-inline-start: 1.15em; list-style: disc; }
.list li { margin-top: 7px; font-size: calc(17px * var(--ts)); line-height: 1.5; }
.list li::marker { color: var(--sun); }
ol.list { list-style: decimal; }    /* S28: numbered steps keep the live page's numbering */

.docs { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; }
.docs a { display: inline-block; min-inline-size: 44px; padding-block: 10px; font-weight: 600; text-underline-offset: .25em; }

/* A small note under a part (S42: the "check" notes and the "pending" lists are gone, user 15.10.2026). */
.note { max-width: 36em; margin-top: 12px; font-size: calc(15px * var(--ts)); line-height: 1.45; opacity: .82; }
.sheet .lead + .note { margin-top: 14px; }

.sheet .actions { margin-top: 0; padding-top: 26px; gap: 12px; }
.more { margin-inline-start: auto; padding-block: 12px; font-weight: 600; text-underline-offset: .25em; }

html.js .sheet { display: none; }

/* These hold whether the dialog is open or on its way out, so a closing sheet keeps its shape. */
html.js dialog.sheet {
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  flex-direction: column;
  width: min(700px, 100%);
  height: 100dvh;
  padding: 40px 56px calc(40px + env(safe-area-inset-bottom, 0px));    /* S30: the last row clears the home indicator */
  overflow-y: auto;
  overflow-x: hidden;    /* S30: WebKit counts the head row's bleed into the padding as overflow; no sideways pan */
  overscroll-behavior: contain;
  box-shadow: var(--sheet-shadow);
}
html.js dialog.sheet[open] { display: flex; }
/* The head row: Back (only when the sheet was opened from another sheet, S27) at the inline start,
   Close at the end. Sticky, so both stay in reach when a long sheet is scrolled on a phone. */
.sheet-head { display: none; }
html.js dialog.sheet .sheet-head {
  --pad-block: 40px;
  --pad-inline: 56px;
  flex: none;
  position: sticky;
  top: calc(var(--pad-block) * -1);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin: calc(var(--pad-block) * -1) calc(var(--pad-inline) * -1) 0;
  padding: var(--pad-block) var(--pad-inline) 10px;
  background: var(--weave), var(--net);    /* text that scrolls up goes under the row, not through it */
}
html.js dialog.sheet .sheet-head .close { flex: none; margin-inline-start: auto; }
.sheet-head .back { flex: 0 1 auto; gap: .5em; min-width: 0; min-height: 48px; padding-inline: 18px 22px; }
.sheet-head .back[hidden] { display: none; }
/* User, 17.10.2026: "the course map ↑" in the head row of the course sheets, once the map is out of view. */
.sheet-head .map-jump {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 44px; padding: 3px 10px 4px; border-radius: 14px; border-color: var(--sun); color: var(--sun-lit, #ffc078);
  font-size: calc(11.5px * var(--ts-ui)); font-weight: 700; line-height: 1.1; white-space: nowrap;
}
.sheet-head .map-jump[hidden] { display: none; }
.sheet-head .map-jump .map-ico { inline-size: 26px; block-size: 26px; }
/* On a phone it shares the second row with the text-size buttons, so Back keeps its width (with the grid below). */
@media (max-width: 719px) {
  .sheet-head .map-jump { order: 8; }
  .sheet-head .text-steps.mini { order: 9; }
}
.sheet-head .back .arrow { flex: none; font-size: 1.1em; line-height: 1; }
/* The label wraps to a second line rather than losing the sheet's name to an ellipsis on phones (S27 QA). */
.sheet-head .back-label { min-width: 0; white-space: normal; line-height: 1.15; text-align: start; padding-block: 6px; overflow-wrap: anywhere; }
html.js dialog.menu > .close { flex: none; align-self: flex-end; position: sticky; top: 0; z-index: 1; }
html.js dialog.sheet .actions { margin-top: auto; }
dialog:focus-visible { outline: none; }    /* focus belongs on the Close button; the surface never draws a ring */
dialog::backdrop { background: #04101cb8; }

/* S26/S27: a course sheet's own loop, only in the part of the screen the sheet leaves free: sheets.js
   measures the open sheet and sets the layer's left edge and width (--free-x, --free-w), and on which
   side the sheet is (data-edge), so the picture fades softly into the sheet's shadow. Two videos
   cross-fade when the section being read has its own clip. Between the film and the dialog. */
.course-layer { display: none; }
html.js .course-layer {
  position: fixed;
  z-index: 25;
  inset-block: 0;
  left: var(--free-x, 0px);
  display: block;
  width: var(--free-w, 0px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #04101c;
  transition: opacity .45s linear, visibility 0s linear .45s;
}
html.js .course-layer.on { opacity: 1; visibility: visible; transition: opacity .45s linear; }
.course-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(var(--toward-sheet, to left), #04101c 0, #04101c99 40px, #04101c00 140px);
}
.course-layer[data-edge="right"] { --toward-sheet: to left; }
.course-layer[data-edge="left"] { --toward-sheet: to right; }
.course-layer video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  opacity: 0;
  transition: opacity .6s linear;
}
.course-layer video.on { opacity: 1; }
.course-open dialog.sheet::backdrop { background: #04101c47; }
:root:is(.quiet, .paused) :is(.course-layer, .course-layer video) { transition: none; }

/* The menu: the eight stops in the title face, the six sheets below them. */
.menu h2 { font-size: calc(clamp(56px, 7vw, 96px) * var(--hand-scale)); }
.menu h3 { margin-top: 34px; font-size: calc(16px * var(--ts)); font-weight: 600; opacity: .72; }
/* The menu's group labels are small captions, not headings to read: plain, no outline. */
.menu h3 { font-family: var(--text); -webkit-text-stroke: 0; text-shadow: none; }
.menu .stops {
  display: grid;
  grid-template-rows: repeat(5, auto);    /* S44: nine stops, two columns */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 28px;
  margin-top: 8px;
}
.menu .stops a {
  display: block;
  padding-block: 7px;
  font: 700 clamp(40px, 4.6vw, 58px) / .9 var(--display);
  letter-spacing: .01em;
  text-decoration: none;
}
.menu .stops a[aria-current] { color: var(--sun); }
.menu .groups { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 0 34px; }
.menu .pages { margin-top: 6px; }
.menu .pages a { display: block; padding-block: 10px; font-size: calc(19px * var(--ts)); font-weight: 500; line-height: 1.3; text-decoration: none; }
/* Text size (S25): three round steps; the chosen one is filled. Each glyph is set at the size it
   gives, so the row reads as small, default, large. */
.textsize h3 { margin-top: 26px; }
.text-steps { display: flex; gap: 10px; margin-top: 10px; }
.text-step {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1.5px solid #fff6e6cc;
  border-radius: 50%;
  background: #0000002e;
  font-weight: 700;
  line-height: 1;
  transition: background-color .2s, border-color .2s, color .2s, transform 160ms var(--ease-out);
}
.text-step.s { font-size: 16px; }
.text-step.m { font-size: 20px; }
.text-step.l { font-size: 24px; }
.text-step[aria-pressed="true"] { border-color: var(--sun); background: var(--sun); color: var(--ink); }
.text-step:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .text-step:not([aria-pressed="true"]):hover { border-color: var(--light); background: #fff6e624; } }
/* S43: the language link at the top of the menu, under the heading, as a clear outlined button. */
.menu .lang { align-self: flex-start; min-inline-size: 44px; margin-top: 14px; padding-inline: 20px; border: 1.5px solid #fff6e6cc; border-radius: 999px; background: #0000002e; font-size: calc(18px * var(--ts-ui)); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .menu .stops a:hover { color: var(--sun); }
  .menu .pages a:hover { text-decoration: underline; text-underline-offset: .25em; }
}

/* The lens: no surface at all, only the circle on the dark. */
html.js dialog.lens {
  position: fixed;
  inset: 0;
  grid-template-columns: min(480px, 100%);
  justify-content: center;
  justify-items: center;
  align-content: center;
  gap: 18px;
  width: 100%; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: none;
  color: var(--light);
}
html.js dialog.lens[open] { display: grid; }
.lens::backdrop { background: #021a2bf0; }
.lens .close { justify-self: end; }
.lens .ring { width: min(420px, 78vw, 50svh); margin: 0; }
.lens-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lens-strip .meet { width: 56px; }
.lens-strip .meet span { display: none; }
.lens-strip .meet[aria-pressed="true"] img { border-color: var(--sun); }

@media (max-width: 719px) {
  html.js dialog.sheet { padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  html.js dialog.sheet .sheet-head { --pad-block: 20px; --pad-inline: 20px; }
  .sheet h2 { margin-top: 18px; }
  .shots { grid-template-columns: 1fr 1fr; }
  .shots img:first-child { grid-column: 1 / -1; height: clamp(140px, 24svh, 200px); }
  .shots :is(img, video) { height: clamp(96px, 16svh, 140px); }
  .rows > div { grid-template-columns: 1fr; gap: 2px; }
  .rows.prices > div { gap: 16px; }
  .more { margin-inline-start: 0; }
  .menu .groups { grid-template-columns: 1fr; }
}


/* 9b  Sheet decorations (S26, placed anew in S27; S36: floating) -------------------
   Sea animals and cats, cut out of the village's own photographs (media/deco/index.json), spread
   down each sheet on alternating sides, and small round cat photos (S35). S36 (user, 14.10.2026):
   they never push text down. Each one floats: absolutely positioned in the sheet (the dialog is its
   containing block and scrolls it with the text), with no layout height. sheets.js placeDecos puts it
   at its inline edge near its place in the text, overhanging the sheet's edge a little, in the first
   spot where its box keeps clear of every line of text, picture and control (and of the other
   decorations); a smaller size is tried before it gives up, and with no room at all it stays out
   (.out). Placed with {{@deco name side s= r=}} in the template: s scales, r tilts; an animal whose
   catalogue entry has `facing` is mirrored to face into the sheet. Decoration only (aria-hidden, no
   pointer events), absent without JavaScript, in the quiet layout until placed, and on the
   narrowest phones. */
.deco { display: none; }
html.js dialog.sheet .deco {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;    /* under the sticky head row (z-index 2) */
  display: block;
  width: var(--dw, 120px);
  height: var(--dh, 100px);
  margin: 0;
  overflow-x: clip;    /* the part past the sheet's edge; no sideways overflow (the picture inside is wider) */
  visibility: hidden;    /* until sheets.js has found it a place */
  pointer-events: none;
}
html.js dialog.sheet .deco.placed { visibility: visible; }
html.js dialog.sheet .deco.d-dot { overflow: visible; }    /* a round photo never hangs over the edge */
html.js dialog.sheet .deco.out { display: none; }
.deco img {
  position: absolute;
  left: var(--ix, 0px);
  top: 0;
  display: block;
  width: var(--iw, 100%);
  max-width: none;
  height: 100%;
  object-fit: contain;
  rotate: var(--r, 0deg);
  opacity: .94;
  filter: drop-shadow(0 12px 14px #00140f99) drop-shadow(0 2px 3px #00000066);
}
/* Facing into the sheet: the inline start is the right in Hebrew and the left in English. */
:root[dir="rtl"] :is(.deco.start img[data-facing="right"], .deco.end img[data-facing="left"]),
:root[dir="ltr"] :is(.deco.start img[data-facing="left"], .deco.end img[data-facing="right"]) { scale: -1 1; }
@media (max-width: 379px) {
  html.js dialog.sheet .deco { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.quiet):not(.paused) dialog.sheet[open] .deco:is(.d-animal, .d-cat) img { animation: deco-drift 7s var(--ease-bob) infinite alternate; }
  html.js:not(.quiet):not(.paused) dialog.sheet[open] .deco:is(.d-animal, .d-cat):nth-of-type(even) img { animation-duration: 9s; animation-delay: -3s; }
}
@keyframes deco-drift { to { translate: calc(var(--sheet-from) * -6px) -5px; } }

/* 10  After the day, footer ---------------------------------------------------- */

.after {
  padding: clamp(72px, 12vw, 168px) var(--gutter) clamp(56px, 8vw, 104px);
  background: var(--night);
  scroll-margin-top: var(--bar-h);
}
.after h2 { font: var(--hand-weight) calc(clamp(64px, 9.2vw, 132px) * var(--hand-scale)) / var(--title-leading) var(--hand); font-synthesis: none; }
.after p { margin-top: 18px; font-size: calc(clamp(18px, 1.6vw, 23px) * var(--ts)); opacity: .86; }
.after ul { max-width: 820px; margin-top: 34px; border-top: 1px solid #fff6e640; }
.after li { border-bottom: 1px solid #fff6e640; }
.after a {
  display: block;
  padding-block: 16px 12px;
  font: 700 clamp(40px, 4.6vw, 64px) / .9 var(--display);
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .2s;
}
@media (hover: hover) and (pointer: fine) { .after a:hover { color: var(--sun); } }

.foot {
  display: grid;
  gap: 6px;
  padding: 44px var(--gutter) max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid #fff6e626;
  background: var(--night);
}
.foot .goodnight { font: 700 clamp(40px, 4.6vw, 64px) / .9 var(--display); letter-spacing: .01em; }
.foot a { display: inline-block; padding-block: 12px; font-weight: 600; text-underline-offset: .25em; }
.foot .small { max-width: 44em; opacity: .7; }
.foot .reach { display: flex; flex-wrap: wrap; gap: 0 22px; }


/* 11  Film layout ----------------------------------------------------------------
   With JavaScript and motion allowed, each chapter becomes a tall scroll range
   with one sticky stage. Consecutive chapters overlap by one screen plus --lap,
   so the next stage is already pinned over the last one while it arrives
   through a growing circle.

   film.js turns cues on and off with .on, marks the stage on screen with .live
   (and .arriving while its circle grows), and writes only transform, opacity
   and clip-path, each on the element it moves.

   11a is the layout and the plain state changes. 11b is everything that moves
   by itself or with the scroll; it sits under :not(.paused), so the motion
   toggle switches all of it off at once. 11c is the sheets' slide. */

/* 11a  Layout ------------------------------------------------------------------- */

html.js:not(.quiet) {
  /* Pacing (S25): a beat was a full screen of scroll and an arrival 60svh; both are about half
     now, so a chapter takes roughly half the scroll it did. Cues are placed in fractions of the
     chapter, so they keep their order and their overlaps. */
  --beat: 50svh;           /* how much scroll one beat of a chapter takes */
  --lap: 32svh;            /* how much scroll a chapter's arrival takes */
  --safe-top: 108px;       /* under the bar */
  --safe-bottom: 224px;    /* over the day line and the cat (S46: 212px before the cat grew) */

  .pause { display: grid; }

  /* Bar: clear glass over the plates. */
  .bar {
    position: fixed;
    inset-inline: 0;
    padding: 30px var(--gutter);
    background: none;
  }
  /* The lodging pill gives way to the chapter's own primary action at first light and at night. */
  &[data-stop="0"] .bar .rooms,
  &[data-stop="8"] .bar .rooms {
    border-color: #fff6e6cc;
    background: var(--glass-fill, #0000002e);
    backdrop-filter: var(--glass, blur(6px));
    color: var(--light);
  }

  /* From the shore to the end of the dive chapter the courses lead the bar, and the lodging pill
     steps back to glass (S24). */
  &:is([data-stop="3"], [data-stop="4"], [data-stop="5"]) .bar .to-dive { border-color: var(--sun); background: var(--sun); color: var(--ink); backdrop-filter: none; }
  &:is([data-stop="3"], [data-stop="4"], [data-stop="5"]) .bar .rooms {
    border-color: #fff6e6cc;
    background: var(--glass-fill, #0000002e);
    backdrop-filter: var(--glass, blur(6px));
    color: var(--light);
  }

  /* Chapters and stages */
  .chapter {
    height: calc(var(--beats) * var(--beat) + 100svh + 2 * var(--lap));
    background: none;
    scroll-margin-top: calc(-1 * var(--lap));    /* a link to a chapter lands after its arrival */
  }
  /* The first chapter has no arrival and the last has no successor: one lap less each. */
  #dawn, #night { height: calc(var(--beats) * var(--beat) + 100svh + var(--lap)); }
  #dawn { scroll-margin-top: 0; }
  .chapter + .chapter { margin-top: calc(-100svh - var(--lap)); }

  .stage {
    /* A circle is as wide as --ring-w allows, and never so tall that its caption reaches the subtitles. */
    --ring-w: 26vw;
    --ring-x: 10vw;
    --ring-y: 20svh;
    --ring-d: calc(clamp(170px, min(var(--ring-w), 100svh - var(--ring-y) - 336px), 400px) * var(--ring-fit, 1));    /* user, 16.10.2026: film.js shrinks a circle (--ring-fit) before it steps aside */
    position: sticky;
    top: 0;
    display: block;
    height: 100svh;
    padding: 0;
    overflow: hidden;
    background: var(--night);    /* a plate that has not arrived yet reads as dark, not as a hole */
    pointer-events: none;
  }
  .stage:not(.live) { opacity: 0; }

  .shot, .grade { position: absolute; inset: 0; margin: 0; }
  .shot {
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
    opacity: 0;
    transition: opacity .8s linear;    /* overlapping ranges cross-dissolve */
  }
  .shot.lead.on { transition: none; }  /* the first plate is simply there when its circle opens */
  .shot img { transform-origin: var(--pos, 50% 50%); }    /* the push-in grows from where the plate is framed */
  @media (orientation: portrait) { .shot img { transform-origin: var(--pos-tall, var(--pos, 50% 50%)); } }

  /* Cues: off is a quick plain fade, on a slightly longer one. */
  [data-from]:not(.shot) { opacity: 0; pointer-events: none; transition: opacity 180ms linear; }
  [data-from].on { opacity: 1; }
  [data-from].on:not(.shot) { transition: opacity 320ms var(--ease-out); }
  .stage.live [data-from].on:not(.shot) { pointer-events: auto; }
  /* User, 22.10.2026: the words of the stage under an arriving circle fade out as it starts to open (film.js
     .leaving; 280ms is about the circle's first third), instead of staying lit until the edge cuts through them.
     The plates stay: the circle opens over the photograph. Closed again, they come back the usual way. */
  .stage.leaving [data-from].on:not(.shot) { opacity: 0; transition: opacity 280ms linear; }

  .card {
    position: absolute;
    inset-inline-start: var(--gutter);
    bottom: var(--safe-bottom);
    max-width: min(800px, 100% - 2 * var(--gutter));
    padding: 0;
  }
  #learn .card, #shore .card, #under .card, #dusk .card { max-width: calc(100% - 2 * var(--gutter)); }
  /* S29: in #under the card keeps to the inline start, so the bubbles have the open water beside it. */
  #under .card { max-width: min(860px, 100% - 2 * var(--gutter) - var(--bubbles-w) - 24px); }
  #learn .card h2 { max-width: calc(100vw - 2 * var(--gutter) - var(--ring-x) - var(--ring-d) - 72px); }    /* clear of the circle */
  #night .card { max-width: min(720px, 46%); }
  /* A card with too little room under the bar (film.js adds .tight, S25). */
  .stage.tight .card :is(h1, h2) { font-size: calc(var(--title) * .8); }
  .stage.tight .card .when { display: none; }
  .stage.tight .lede { margin-top: 10px; }
  .stage.tight .card :is(.actions, .courses, .doors) { margin-top: 12px; }
  .stage.tight .courses + .actions { margin-top: 8px; }
  .stage.tight .card .sub { margin-top: 10px; }
  .stage.tighter .doors .line:not(.rec-line, .set-line) { display: none; }    /* S45: the snorkel door's recommended set stays (its price); S47: its set (no price now) */    /* S28: still too tall, the doors keep name and price */
  /* S28: on a wide screen the shore's lede takes one line, so the card with its five doors keeps its full size. */
  @media (min-width: 1280px) { #shore .lede, #under .lede, #dusk .lede { max-width: 36em; } }

  /* Under the water the loops fill the screen, each over its photograph, which shows until the loop
     plays (film.js marks the shot .rolling) and stays if the loop fails. */
  .shot video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--vpos, 50% 50%);
    /* S26: the light and reef loops are the 1080p clips without the camera's mark, so the 12%
       enlargement that cropped it off (S24) is gone; every loop is shown at cover size. */
    opacity: 0;
    transition: opacity .6s linear;
  }
  .shot.rolling video { opacity: 1; }
  @media (orientation: portrait) { .shot video { object-position: var(--vpos-tall, var(--vpos, 50% 50%)); } }

  /* The opening's two thin rings, centred on the real sun (film.js measures it). */
  .halo {
    position: absolute;
    display: block;
    left: var(--sun-x, 40%);
    top: var(--sun-y, 31%);
    width: clamp(96px, 10.4vw, 150px);
    aspect-ratio: 1;
    border: 1px solid #fff6e680;
    border-radius: 50%;
    translate: -50% -50%;
  }
  .halo.outer { width: clamp(210px, 22.9vw, 330px); }
  .halo.outer.on { opacity: .45; }

  /* Circles: on the inline-end side, opposite the title. */
  .stage .ring {
    position: absolute;
    inset-inline-end: var(--ring-x);
    top: var(--ring-y);
    width: var(--ring-d);
    margin: 0;
    transform-origin: 50% calc(var(--ring-d) / 2);    /* the centre of the disc, not of the disc and its caption */
  }
  /* User, 16.10.2026: a big circle (the ibex in the yard). */
  .stage .ring.big { --ring-d: calc(clamp(200px, min(var(--ring-w) * 1.3, 100svh - var(--ring-y) - 300px), 480px) * var(--ring-fit, 1)); }
  .stage .ring[data-halo]::before {
    content: "";
    position: absolute;
    inset: -32px -32px auto;
    aspect-ratio: 1;
    border: 1px solid #fff6e680;
    border-radius: 50%;
    pointer-events: none;
  }
  .stage .ring figcaption { margin-top: 22px; text-shadow: var(--contour); }
  .stage .ring[data-halo] figcaption { margin-top: 44px; }    /* clear of the thin outer ring */

  #wake .stage  { --ring-w: 25vw;   --ring-x: 10.4vw; --ring-y: 21.1svh; }
  #yard .stage  { --ring-w: 22.9vw; --ring-x: 7.8vw;  --ring-y: 16.7svh; }
  #learn .stage { --ring-w: min(17vw, 28svh); --ring-x: 6.6vw; --ring-y: 19svh; }
  #shore .stage { --ring-w: min(19vw, 30svh); --ring-x: 7vw; --ring-y: 17svh; }    /* S28: smaller, above the five doors */
  #dusk .stage { --ring-w: min(19vw, 30svh); --ring-x: 7vw; --ring-y: 17svh; }     /* S29: the same, above the five event doors */
  .stage.cramped .ring { display: none; }    /* a circle that would reach the doors steps aside (film.js) */
  /* S29 F: the second circle in #yard, smaller, under the first circle's caption and a little towards
     the middle, in the room above the day line; film.js leaves it out (.out) where it would touch the
     type, the other circle, the bar or the line. */
  .stage .ring.second {
    --r2: clamp(96px, min(var(--ring-d) * .5, 100svh - var(--ring-y) - var(--ring-d) - 64px - var(--safe-bottom) - 40px), 180px);
    inset-inline-end: calc(var(--ring-x) + var(--ring-d) * .62 - var(--r2) / 2);
    top: calc(var(--ring-y) + var(--ring-d) + 64px);
    width: var(--r2);
    transform-origin: 50% calc(var(--r2) / 2);
  }
  .stage .ring.second figcaption { margin: 12px -48px 0; }    /* a short caption on one or two lines, not four */
  /* Where there is no room under it (a portrait tablet), the other place film.js tries: beside it, level with its top. */
  .stage .ring.second.beside {
    --r2: calc(var(--ring-d) * .52);
    inset-inline-end: calc(var(--ring-x) + var(--ring-d) + clamp(28px, 3vw, 56px));
    top: max(var(--safe-top) + 8px, var(--ring-y) - 40px);
  }
  .stage .ring.out { display: none; }

  /* The encounters: a short row of small circles in the open water, opposite the title. */
  .meets {
    position: absolute;
    inset-inline-end: var(--gutter);
    top: var(--safe-top);
    margin: 0;
  }
  .meets .note, .meets li:nth-child(n + 5), .meets .meet span { display: none; }
  .meets ul { flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
  .meets .meet { display: block; width: clamp(64px, 6.4vw, 96px); border-radius: 50%; }
  .meets .meet img { box-shadow: 0 16px 40px #0009; }
  /* User, 18.10.2026 ("no one notices it is a gallery"): the count of the other pictures on the last circle,
     and a soft pulse round the circles when they come on (no label: "just leave the +number"). */
  .meets li:nth-child(4) .meet { position: relative; }
  .meets li:nth-child(4) .meet::after {
    content: "+" attr(data-more); direction: ltr; unicode-bidi: isolate; position: absolute; inset-block-end: -2px; inset-inline-start: -2px;
    min-inline-size: 30px; padding: 3px 7px; border-radius: 999px; background: var(--sun); color: var(--night);
    font: 800 13px / 1.1 var(--body, inherit); text-align: center; box-shadow: 0 2px 8px #0008;
  }
  .meets.on .meet img { animation: meet-pulse 1.8s var(--ease-out) .4s 2; }
  @keyframes meet-pulse { 0% { box-shadow: 0 0 0 0 #ffd27acc, 0 16px 40px #0009; } 100% { box-shadow: 0 0 0 14px #ffd27a00, 0 16px 40px #0009; } }

  /* S29: while the next chapter dissolves in over this one, this one's type goes (film.js .handing). */
  .stage.handing [data-from]:not(.shot) { opacity: 0; pointer-events: none; }

  /* S29: the course bubbles, in the open water at the inline end, under the encounters and over the
     day line. film.js leaves out (.out) any bubble whose place, with its drift, would touch the card's
     type or doors, the encounters, the bar or the day line. */
  #under .stage { --bubbles-w: min(30vw, 420px); --bub: clamp(72px, min(8.4vw, 14svh), 136px); }
  .bubbles {
    position: absolute;
    display: block;
    inset-inline-end: calc(var(--gutter) + 1vw);
    top: calc(var(--safe-top) + clamp(64px, 6.4vw, 96px) + 36px);
    bottom: calc(var(--safe-bottom) - 20px);
    width: var(--bubbles-w);
    pointer-events: none;
  }
  .bubble {
    --s: var(--bub);
    position: absolute;
    display: block;
    width: var(--s);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    /* A soft rim like a bubble's: a thin bright edge, a cool inner glow and a highlight at the top. */
    border: 1.5px solid #e9fbffb3;
    box-shadow: inset 0 0 18px #bff3ff66, inset 0 -6px 14px #0a3a4a55, 0 14px 36px #0008;
  }
  .bubble :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
  .bubble::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 24%, #ffffffb3 0 6%, #ffffff33 13%, #0000 30%),
                radial-gradient(circle at 50% 50%, #0000 62%, #c8f6ff40 82%, #ffffff59 100%);
  }
  .bubble.b1 { top: 0; inset-inline-end: 8%; }
  .bubble.b2 { --s: calc(var(--bub) * .8); top: calc(50% - var(--s) / 2); inset-inline-start: 0; }
  .bubble.b3 { --s: calc(var(--bub) * .66); bottom: 0; inset-inline-end: 26%; }
  .bubble.out { display: none; }

  /* The night's WhatsApp card (S42): on the inline-end side of the night stage, standing just above
     the cat when it sits at the last stop. */
  .stay {
    position: absolute;
    inset-inline-end: clamp(32px, 6.67vw, 96px);
    bottom: 216px;    /* S46: clear of the bigger cat's ears (192px before) */
    width: min(460px, 41vw);
    margin: 0;
  }

  /* The thin ring on the edge of an arriving stage's circle: the same line as the circles' own. */
  .iris {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: block;
    width: 100%; height: 100%;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
  }
  .iris circle { fill: none; stroke: var(--light); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
  /* User, 22.10.2026 (Galaxy Fold video): not on a touch screen. The ring is a screen-sized SVG repainted on
     every frame of an arrival (a quarter of the raster work in the Android emulator), for a line that an
     arrival of half a second barely shows. One rule to bring it back. */
  @media (pointer: coarse) { .iris { display: none; } }

  /* Day line: fixed under the film, nine stops (S44) in the page direction. */
  .dayline {
    --g: 34px;           /* ground level, from the top of the strip */
    --f: 96px;           /* sea floor */
    --cat-land: 96px;    /* S46 (user, 16.10.2026): clearly bigger; 70px and 54px before */
    --cat-sea: 74px;
    position: fixed;
    z-index: 20;
    inset-inline: var(--gutter);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));    /* S30: over the home indicator */
    height: 132px;
    padding: 0;
    background: none;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  &.past-film .dayline { opacity: 0; visibility: hidden; }
  &.past-film .bar { background: var(--night); }

  .dayline > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .dayline > svg path { fill: none; }
  .dayline > svg .water { fill: var(--gulf); opacity: .3; }
  .dayline > svg .wave { stroke: var(--gulf); stroke-width: 2; opacity: .95; }
  .dayline > svg .line { stroke: var(--light); stroke-width: 1.5; opacity: .5; }
  .dayline > svg .done { stroke: var(--sun); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--done, 0) 100000; }

  .dayline ol { position: absolute; inset: 0; grid-template-columns: repeat(9, minmax(0, 1fr)); row-gap: 0; }
  .dayline li { --y: var(--g); border: 0; }
  .dayline li.sea { --y: var(--f); }
  .dayline a {
    height: 100%;
    padding: calc(var(--y) + 17px) 2px 0;
    opacity: .72;
    text-shadow: 0 1px 10px #000c;
  }
  .dayline a::before { top: calc(var(--y) - var(--dot) / 2); }
  .dayline a[aria-current] { opacity: 1; }

  /* The cat: a button that film.js moves along the line. Its body is an SVG drawn in parts (S26):
     body, head, tail and four legs, with the diver's mask, tank and fins, each turning about its own
     joint. Every part's rotation is a pose (--r) plus a swing (--sw) times sin(cycle + --o), where
     the cycle (--ph, 0 to 1) is set by film.js from the distance the cat has travelled; with no
     swing (paused, or still) the part simply holds its pose. A leg also lifts (--lift) while it
     swings forward. The swings themselves are switched on in 11b. */
  .cat {
    position: absolute;
    left: 0; top: 0;
    display: block;
    width: var(--cat-land);
    height: var(--cat-land);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    --ph: 0;
    --th: calc(var(--ph) * 1turn);
  }
  .cat:not([style]) { visibility: hidden; }    /* until it has been put on the line */
  .cat { will-change: transform; }    /* 22.10.2026: its own layer, so a step along the line does not repaint the strip */
  .cat-body {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    filter: drop-shadow(0 5px 8px #0008);
  }
  /* User, 22.10.2026: no shadow on a touch screen, where the cat is redrawn on every scroll frame and the
     shadow is a blur of the whole cat each time. */
  @media (pointer: coarse) { .cat-body { filter: none; } }
  .cat-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .cat-art g { transform-box: view-box; }
  .c-rig {
    --rig-r: 0deg; --rig-sw: 0deg; --rig-x: 0px; --rig-y: 0px; --bob: 0px;
    transform-origin: 60px 92px;
    rotate: calc(var(--rig-r) + var(--rig-sw) * sin(var(--th)));
    translate: var(--rig-x) calc(var(--rig-y) + var(--bob) * cos(calc(var(--th) * 2)));
  }
  .c-lean { --lean-r: 0deg; transform-origin: 40px 88px; rotate: var(--lean-r); }
  .c-leg, .c-tail, .c-head {
    --r: 0deg; --sw: 0deg; --o: 0turn; --lift: 0px;
    rotate: calc(var(--r) + var(--sw) * sin(calc(var(--th) + var(--o))));
    translate: 0 calc(max(0, cos(calc(var(--th) + var(--o)))) * var(--lift) * -1);
  }
  .c-fore.c-near { transform-origin: 80px 70px; }
  .c-fore.c-far { transform-origin: 74px 70px; }
  .c-hind.c-near { transform-origin: 42px 78px; }
  .c-hind.c-far { transform-origin: 36px 78px; }
  .c-tail { transform-origin: 30px 78px; }
  .c-head { transform-origin: 82px 66px; }
  .c-gear, .c-chef { opacity: 0; }

  /* On land, still: sitting, the body leaning up on its haunches, the tail round its side. */
  .cat .c-rig { --rig-x: 13px; --rig-y: 12px; }
  .cat .c-lean { --lean-r: -30deg; }
  .cat .c-fore { --r: 30deg; }
  .cat .c-hind { --r: -62deg; }
  .cat .c-tail { --r: 28deg; }
  .cat .c-head { --r: 24deg; }
  .cat.wave .c-fore.c-near { --r: -70deg; }
  /* In the sea: the diver's gear on, level and a little nose-up, hind legs and fins trailing. */
  .cat.diver .c-gear { opacity: 1; }
  .cat.diver .c-rig { --rig-r: -10deg; --rig-x: 2px; --rig-y: -14px; }
  .cat.diver .c-lean { --lean-r: 0deg; }
  .cat.diver .c-fore.c-near { --r: -55deg; }
  .cat.diver .c-fore.c-far { --r: -35deg; }
  .cat.diver .c-hind.c-near { --r: 64deg; }
  .cat.diver .c-hind.c-far { --r: 56deg; }
  .cat.diver .c-tail { --r: -34deg; }
  .cat.diver .c-head { --r: 8deg; }
  .cat.diver.wave .c-fore.c-near { --r: -100deg; }
  /* S46 (user, 16.10.2026): at "Hungry?" she is the chef: a chef's hat on her head (in the head, so it
     moves with it) and a bowl of milk on the ground in front of her paws, bent over it. 11b adds the
     hat's pop, the licks, the ripples and the tail; walking, the bowl stays behind. */
  .c-hat { transform-origin: 94px 34px; }
  .c-ripple { transform-origin: 100px 103.3px; }
  .cat.chef .c-chef:not(.c-tongue, .c-ripple) { opacity: 1; }
  .cat.chef.walking .c-bowl { opacity: 0; }
  .cat.chef:not(.walking) .c-rig { --rig-x: -2px; --rig-y: 3px; }
  .cat.chef:not(.walking) .c-lean { --lean-r: 0deg; }
  .cat.chef:not(.walking) .c-fore.c-near { --r: -10deg; }
  .cat.chef:not(.walking) .c-fore.c-far { --r: -4deg; }
  .cat.chef:not(.walking) .c-hind { --r: -66deg; }
  .cat.chef:not(.walking) .c-tail { --r: 20deg; }
  .cat.chef:not(.walking) .c-head { --r: 28deg; translate: 0 5px; }
  /* The cat is drawn facing right; travelling left on screen it is mirrored (S25). */
  .cat.left .cat-body { scale: -1 1; }

  /* What the cat says when it is tapped: a small bubble over its head. */
  .cat-say {
    position: absolute;
    left: 0; top: 0;
    display: block;
    width: max-content;
    max-width: 176px;
    margin: 0;
    padding: 7px 13px 8px;
    border-radius: 16px;
    background: var(--light);
    color: var(--night);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 100%;
    transition: opacity 120ms linear;
  }
  .cat-say.on { opacity: 1; transition: opacity 160ms var(--ease-out); }

  /* A sheet is open: the film waits behind it, with its type and its grade put away, so only the
     dialog's own scrim lies over the plate. */
  .grade { transition: opacity .3s linear; }
  &.sheet-open .grade { opacity: 0; }
  &.sheet-open .stage [data-from].on:not(.shot) { opacity: 0; }
  &.sheet-open .bar { opacity: .5; }
  &.sheet-open .dayline { opacity: .35; }

  /* In English the title sits under the sun: show the foot of the photograph, so the sun and its
     inner ring clear the first line. Photographs are never mirrored. */
  &[dir="ltr"] #dawn .shot.wide img { object-position: 50% 100%; }

  /* Between phone and desktop: the title and the stay inquiry share the night stage more tightly. */
  @media (min-width: 720px) and (max-width: 1099px) {
    .card { max-width: min(800px, 62%); }
    #night .card { max-width: 44%; }
    .stay { inset-inline-end: var(--gutter); width: 44vw; }
  }

  /* Short, wide windows: everything keeps its place, a size down. */
  @media (min-width: 720px) and (max-height: 700px) {
    --safe-top: 88px;
    --safe-bottom: 200px;
    .bar { padding-block: 20px; }
    .lede { margin-top: 16px; font-size: calc(18px * var(--ts)); }
    .card .actions { margin-top: 18px; }
  }

  /* Narrow screens: the title card and the circle take turns (data-narrow), and the day line
     keeps its shape but names only the current stop. */
  @media (max-width: 719px) {
    --safe-top: 76px;
    --safe-bottom: calc(138px + env(safe-area-inset-bottom));    /* S46: 126px before the cat grew */

    .bar { padding-block: 14px; }
    /* S43: the language control joined the bar; on the narrowest phones the bar keeps a smaller margin. */
    @media (max-width: 439px) { .bar { padding-inline: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }

    .card, #learn .card, #night .card { inset-inline: 20px; max-width: none; }
    #learn .card h2 { max-width: none; }
    .card .actions .pill { padding-inline: 16px; }    /* the course pills keep their own compact padding (S26) */
    .card .pill.quiet { padding-inline: 10px; }
    .lede { margin-top: 14px; }
    .card .actions { gap: 10px; margin-top: 18px; }

    /* The card stays for the whole chapter (S24), so a circle takes only the room above it:
       film.js measures each card into --card-h, and hides a circle with too little room (.cramped). */
    .stage,
    #wake .stage, #yard .stage, #shore .stage, #learn .stage, #dusk .stage {
      --ring-d: calc(max(0px, min(52vw, 210px, 100svh - var(--safe-top) - var(--safe-bottom) - var(--card-h, 0px) - 78px)) * var(--ring-fit, 1));    /* user, 17.10.2026: film.js may shrink it */
      --ring-y: calc(var(--safe-top) + 6px);
    }
    .stage.cramped .ring, .stage.cramped .meets { display: none; }
    .stage .ring { inset-inline: 0; margin-inline: auto; }
    .stage .ring[data-halo]::before { inset: -10px -10px auto; }
    .stage .ring figcaption { margin-top: 10px; font-size: calc(15px * var(--ts)); }
    /* S28: a small circle's caption may run wider than the circle (centred on it), so it keeps to one
       line and the room film.js leaves for it above the card. */
    .stage .ring figcaption { margin-inline: calc((var(--ring-d) - 100vw + 40px) / 2); }
    .stage .ring figcaption small { display: none; }
    .stage .ring[data-halo] figcaption { margin-top: 18px; }

    /* Night: the card sits under the bar and the WhatsApp card above the day line, both for the whole chapter. */
    #night .card { top: var(--safe-top); bottom: auto; }
    #night .card h2 { font-size: calc(var(--title) * .64); }
    #night .lede { font-size: calc(16px * var(--ts)); line-height: 1.4; }
    /* User, 19.10.2026: the words stay on a short phone too (no WhatsApp box under them any more). */
    /* A tight night (S25, large text): the title a size down. */
    #night .stage.tight .card h2 { font-size: calc(var(--title) * .54); }
    #night .stage.tight .lede { display: none; }

    /* User, 18.10.2026: "to the water": the reef circle smaller and to the side (left in Hebrew), so the photo shows. */
    #shore .stage .ring { --ring-d: min(34vw, 136px); inset-inline: auto 20px; margin: 0; }
    #shore .stage .ring figcaption { margin-inline: -16px; font-size: calc(13px * var(--ts)); }
    /* User, 18.10.2026: "advanced": room between the title, the line under it and the first door. */
    #learn .stage:not(.tighter) .card .lede { margin-top: 14px; }
    #learn .card .learn-doors { margin-top: auto; padding-top: 16px; }    /* user, 19.10.2026: the two doors down by the day line */
    /* User, 18.10.2026 ("move the buttons more down"): the title stays up, the doors go down to the day line
       (the cat swims in the dip here, so the card may reach lower). */
    #learn .card { bottom: calc(var(--safe-bottom) - 28px); min-height: calc(100svh - var(--safe-top) - var(--safe-bottom) + 28px); display: flex; flex-direction: column; }
    .meets { inset-inline-end: 20px; top: calc(var(--safe-top) + 4px); }
    /* S29: on a phone the bubbles get the room between the encounters and the card, if there is any. */
    #under .stage { --bubbles-w: calc(100vw - 40px); --bub: clamp(84px, 26vw, 126px); }    /* user, 18.10.2026: bigger (was clamp(56px, 17vw, 84px)) */
    #under .card { max-width: none; }
    .bubbles { inset-inline: 20px; width: auto; top: calc(var(--safe-top) + 84px); bottom: calc(var(--safe-bottom) + var(--card-h, 0px) + 12px); }
    .bubble.b1 { top: 0; inset-inline-end: 14%; }
    /* User, 18.10.2026: the two bubbles bigger, one high at the start side and one lower at the end side. */
    .bubble.b2 { --s: var(--bub); top: 0; inset-inline-start: 4%; }
    .bubble.b3 { --s: calc(var(--bub) * .85); top: auto; bottom: 0; inset-inline-end: 6%; }
    .meets ul { gap: 10px; }
    .meets .meet { width: 52px; }
    .meets li:nth-child(4) .meet { width: 80px; }    /* user, 18.10.2026: the clam, with the room the first bubble's photo left */

    .stay { inset-inline: 20px; bottom: calc(var(--safe-bottom) + 6px); width: auto; padding: 16px 18px 18px; gap: 10px; }

    .dayline {
      --g: 22px;
      --f: 56px;
      --cat-land: 64px;    /* S46: 48px and 40px before */
      --cat-sea: 50px;
      inset-inline: 4px;
      left: max(4px, env(safe-area-inset-left, 0px));      /* S30: clear of a notch in landscape */
      right: max(4px, env(safe-area-inset-right, 0px));
      bottom: max(6px, env(safe-area-inset-bottom));
      height: 88px;
    }
    .dayline a { --dot: 13px; padding: 0; }
    .dayline a[aria-current] { --dot: 19px; }
    .dayline a span {
      position: absolute;
      top: calc(var(--y) + 14px);
      left: 50%;
      font-size: 14px;
      white-space: nowrap;
      translate: -50% 0;
    }
    .dayline a:not([aria-current]) span { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .dayline li:first-child a span { left: auto; inset-inline-start: 6px; translate: none; }
    .dayline li:last-child a span { left: auto; inset-inline-end: 6px; translate: none; }
    .cat::after { content: ""; position: absolute; inset: -6px; }    /* a target of at least 44px round the diver (S46: now 50px) */
  }
}


/* 11b  Motion --------------------------------------------------------------------
   Gone with the motion toggle (html.paused), and never present in the quiet layout. */

html.js:not(.quiet):not(.paused) {
  /* S29: the bubbles drift slowly: a rise and a fall with a little sway and wobble, each at its own pace. */
  .stage.live .bubbles.on .bubble { animation: bubble-drift 11s ease-in-out infinite alternate; }
  .stage.live .bubbles.on .bubble.b2 { animation-duration: 13.5s; animation-delay: -4s; }
  .stage.live .bubbles.on .bubble.b3 { animation-duration: 9.5s; animation-delay: -7s; }
  /* Only what is moving right now is promoted. */
  .stage.arriving { will-change: clip-path; }
  /* User, 22.10.2026 (Galaxy Fold video: 17–30 drawn frames a second while a circle opened): on a touch screen
     a frame is kept cheap while a stage arrives (html.arriving, film.js, until the drawn circle has settled).
     The bar's glass pills take a plain tint (a blur is read back every frame over a plate that moves); the
     day-line cat walks without its parts' transitions (below, after the walk). The orange pills set their own
     fill and are not touched. */
  @media (pointer: coarse) {
    &.arriving .bar { --glass: none; --glass-fill: #07111d8c; }
  }
  /* User, 21.10.2026: a far stop on the day line opens out of the page you are on, not the one before it.
     22.10.2026: film.js lifts the chapter's stage over the page with a transform (.over, above whatever is there,
     promoted so the move and the circle are composited) and puts it down once it has arrived. Nothing about the
     page being left changes at the tap. */
  .stage.over { z-index: 2; will-change: transform, clip-path; }
  .stage.live .shot.on img { will-change: transform; }

  /* A title card's lines rise in turn. Leaving is the plain fade of 11a: the offset is put back
     only once the line has gone, so nothing is seen moving away. */
  .card.on { transition-duration: 0s; }    /* the card is simply there; its lines do the arriving */
  .card > * { opacity: 0; translate: 0 14px; transition: opacity 180ms linear, translate 0s linear 180ms; }
  .card.on > * {
    opacity: 1;
    translate: 0 0;
    transition: opacity 420ms var(--ease-out) calc(var(--i, 0) * 55ms), translate 600ms var(--ease-out) calc(var(--i, 0) * 55ms);
  }
  .card > :nth-child(2) { --i: 1; }
  .card > :nth-child(3) { --i: 2; }
  .card > :nth-child(4) { --i: 3; }
  .card > :nth-child(5) { --i: 4; }

  /* The night's WhatsApp card rises in. A card's extra line rises in its kept place when its moment comes. */
  .stay { translate: 0 12px; transition: opacity 180ms linear, translate 0s linear 180ms; }
  .stay.on { translate: 0 0; transition: opacity 420ms var(--ease-out), translate 600ms var(--ease-out); }
  .card.on > .sub:not(.on) { opacity: 0; translate: 0 12px; transition: opacity 180ms linear, translate 0s linear 180ms; }

  /* Circles and the encounters swell in from just under full size. */
  .stage .ring, .meets { scale: .94; transition: opacity 180ms linear, scale 0s linear 180ms; }
  .stage .ring.on, .meets.on { scale: 1; transition: opacity 420ms var(--ease-out), scale 600ms var(--ease-out); }

  /* The stop reached: one ring leaves its dot. */
  .dayline a[aria-current]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--y) - var(--dot) / 2);
    width: var(--dot); height: var(--dot);
    border: 1.5px solid var(--sun);
    border-radius: 50%;
    translate: -50% 0;
    opacity: 0;
    pointer-events: none;
    animation: stop-pulse 700ms var(--ease-out);
  }

  /* The cat (S26): it turns round with a quick squash through the middle when the scroll changes
     direction. While the scroll moves, film.js sets .walking or .swimming and advances --ph with the
     distance travelled, so the steps keep pace with the cat and stop when it stops: on land a
     lateral walk (hind, fore, other hind, other fore, a quarter cycle apart), each foot lifting as
     it swings forward, the body bouncing twice a cycle, tail and head following a little behind; in
     the sea a dog paddle with the front paws, a flutter kick with the fins and a slow undulation.
     The short linear transitions smooth the scroll's steps; when it settles the longer one eases
     the cat back to sitting, or floating with its bubbles. */
  .cat-body { transition: scale 220ms var(--ease-out); }
  .c-rig, .c-lean, .c-leg, .c-tail, .c-head { transition: rotate 380ms var(--ease-out), translate 380ms var(--ease-out); }
  .c-gear { transition: opacity 280ms linear; }
  .cat:is(.walking, .swimming) :is(.c-rig, .c-lean, .c-leg, .c-tail, .c-head) { transition-duration: 110ms; transition-timing-function: linear; }
  /* User, 22.10.2026: while a stage arrives on a touch screen, no transitions on the cat at all (the frame must be cheap). */
  @media (pointer: coarse) {
    &.arriving .dayline .cat :is(.c-rig, .c-lean, .c-leg, .c-tail, .c-head, .cat-body) { transition: none; }
  }

  .cat.walking .c-rig { --rig-x: 0px; --rig-y: 0px; --bob: -1.4px; }
  .cat.walking .c-lean { --lean-r: 0deg; }
  .cat.walking .c-leg { --r: 0deg; --sw: -22deg; --lift: 4px; }
  .cat.walking .c-hind { --sw: -20deg; }
  .cat.walking .c-fore.c-near { --o: .25turn; }
  .cat.walking .c-hind.c-far { --o: .5turn; }
  .cat.walking .c-fore.c-far { --o: .75turn; }
  .cat.walking .c-tail { --r: -4deg; --sw: 7deg; --o: -.15turn; }
  .cat.walking .c-head { --r: -2deg; --sw: 2.5deg; --o: .1turn; }

  .cat.diver .cat-body { animation: cat-float 3.6s var(--ease-bob) infinite; }
  .cat.diver.swimming .c-rig { --rig-sw: 3deg; --bob: 1.5px; }
  .cat.diver.swimming .c-fore { --sw: 30deg; --o: .25turn; }
  .cat.diver.swimming .c-fore.c-far { --o: .75turn; }
  .cat.diver.swimming .c-hind { --sw: 15deg; }
  .cat.diver.swimming .c-hind.c-far { --o: .5turn; }
  .cat.diver.swimming .c-tail { --sw: 10deg; --o: -.2turn; }
  .cat.diver.swimming .c-head { --sw: -2deg; }

  .cat.wave .c-fore.c-near { animation: cat-wave 600ms var(--ease-bob) 2; }

  .cat.diver .cat-body::before,
  .cat.diver .cat-body::after {
    content: "";
    position: absolute;
    left: 84%;
    top: 4%;
    width: 6px; height: 6px;
    border: 1px solid #fff6e6cc;
    border-radius: 50%;
    opacity: 0;
    animation: cat-bubble 2.8s linear infinite;
  }
  .cat.diver .cat-body::after { left: 92%; width: 4px; height: 4px; animation-delay: 1.3s; }
  .cat.diver.swimming .cat-body::before,
  .cat.diver.swimming .cat-body::after { animation-duration: 1.6s; }
  /* S46: the chef. The hat pops on when she reaches "Hungry?"; when she stops by the bowl it is set
     down, and every few seconds she bends to it and laps twice, a ripple going out each time, while
     her tail sways. All of it goes with the motion toggle; she then simply crouches by the bowl. */
  .c-chef { transition: opacity 280ms linear; }
  .cat.chef .c-hat { animation: chef-hat 560ms var(--ease-out) both; }
  .cat.chef:not(.walking) .c-bowl { animation: chef-bowl 420ms var(--ease-out) both; }
  .cat.chef:not(.walking) .c-head { animation: chef-lick 5.2s var(--ease-bob) 1s infinite; }
  .cat.chef:not(.walking) .c-tongue { animation: chef-tongue 5.2s linear 1s infinite; }
  .cat.chef:not(.walking) .c-ripple { animation: chef-ripple 5.2s var(--ease-out) 1s infinite; }
  .cat.chef:not(.walking) .c-tail { animation: chef-tail 2.6s var(--ease-bob) infinite alternate; }

  .cat-say { scale: .94; transition: opacity 120ms linear, scale 0s linear 120ms; }
  .cat-say.on { scale: 1; transition: opacity 160ms var(--ease-out), scale 200ms var(--ease-out); }

  /* The opening: the one moment that plays by itself, once a session. html.opening is set before
     first paint and holds the stage in the dark for at most 2.4s (if the script never arrives, the
     picture simply appears). When the plate is decoded film.js adds .opening-play: the stage opens
     in a circle from the real sun, the two thin rings settle, then the title's lines rise, and the
     bar and the day line come up. Every step is an animation that ends on the page's normal state,
     so nothing can be left hidden. */
  &.opening #dawn .stage { animation: opening-hold 2.4s steps(1, end) both; }
  &.opening #dawn .card > *,
  &.opening .bar,
  &.opening .dayline { animation: opening-wait 2.4s steps(1, end) both; }

  &.opening.opening-play #dawn .stage { animation: opening-reveal 1.4s var(--ease) both; }
  &.opening.opening-play #dawn .halo { animation: halo-settle 1.2s var(--ease-out) .15s both; }
  &.opening.opening-play #dawn .halo.outer { animation-duration: 1.4s; animation-delay: .3s; }
  &.opening.opening-play #dawn .card > * { animation: rise .7s var(--ease-out) calc(.9s + var(--i, 0) * 70ms) both; }
  &.opening.opening-play .bar,
  &.opening.opening-play .dayline { animation: fade-in .6s linear 1s both; }
}

@keyframes opening-hold { from { clip-path: circle(0 at 50% 40%); } }
@keyframes opening-wait { from { opacity: 0; } }
@keyframes opening-reveal {
  from { clip-path: circle(0 at var(--sun-x) var(--sun-y)); }
  to { clip-path: circle(var(--reach) at var(--sun-x) var(--sun-y)); }
}
@keyframes halo-settle { from { opacity: 0; scale: .6; } }
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes stop-pulse { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.8; } }
@keyframes cat-float { 50% { translate: 0 -4px; } }
@keyframes cat-wave { 50% { rotate: calc(var(--r) - 26deg); } }
/* S46: the chef's hat, bowl, licks (two laps), tongue, ripples and tail. */
@keyframes chef-hat {
  from { opacity: 0; scale: .2; translate: 0 -12px; }
  60% { opacity: 1; scale: 1.12; translate: 0 -2px; }
}
@keyframes chef-bowl { from { opacity: 0; translate: 0 -5px; } }
@keyframes chef-lick {
  0%, 30%, 86%, 100% { rotate: 28deg; translate: 0 5px; }
  42%, 66% { rotate: 46deg; translate: 2px 16px; }
  54% { rotate: 41deg; translate: 2px 12px; }
}
@keyframes chef-tongue {
  0%, 38%, 47%, 61%, 70%, 100% { opacity: 0; }
  42%, 44%, 65%, 67% { opacity: 1; }
}
@keyframes chef-ripple {
  0%, 42%, 66% { opacity: 0; scale: .3; }
  44%, 68% { opacity: .9; scale: .4; }
  60%, 84%, 100% { opacity: 0; scale: 1.5; }
}
@keyframes chef-tail { from { rotate: 12deg; } to { rotate: 32deg; } }
@keyframes cat-bubble {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: .9; }
  100% { opacity: 0; translate: 0 -22px; }
}


/* 11c  Sheets in motion -----------------------------------------------------------
   A sheet slides in from the inline end while the backdrop fades. These are transitions, so a
   sheet closed half-way turns round from where it is, and closing is quicker than opening. */

html.js:not(.quiet):not(.paused) dialog.sheet {
  translate: calc(var(--sheet-from) * 100%) 0;
  transition: translate 200ms var(--ease-out), display 200ms allow-discrete, overlay 200ms allow-discrete;
}
html.js:not(.quiet):not(.paused) dialog.sheet[open] {
  translate: 0 0;
  transition: translate 320ms var(--ease-drawer), display 320ms allow-discrete, overlay 320ms allow-discrete;
}
html.js:not(.quiet):not(.paused) dialog.lens {
  opacity: 0;
  scale: .97;
  transition: opacity 160ms linear, scale 160ms linear, display 160ms allow-discrete, overlay 160ms allow-discrete;
}
html.js:not(.quiet):not(.paused) dialog.lens[open] {
  opacity: 1;
  scale: 1;
  transition: opacity 240ms var(--ease-out), scale 240ms var(--ease-out), display 240ms allow-discrete, overlay 240ms allow-discrete;
}
html.js:not(.quiet):not(.paused) dialog::backdrop {
  opacity: 0;
  transition: opacity 200ms linear, display 200ms allow-discrete, overlay 200ms allow-discrete;
}
html.js:not(.quiet):not(.paused) dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 320ms linear, display 320ms allow-discrete, overlay 320ms allow-discrete;
}
@starting-style {
  html.js:not(.quiet):not(.paused) dialog.sheet[open] { translate: calc(var(--sheet-from) * 100%) 0; }
  html.js:not(.quiet):not(.paused) dialog.lens[open] { opacity: 0; scale: .97; }
  html.js:not(.quiet):not(.paused) dialog[open]::backdrop { opacity: 0; }
}

/* S28: the learn chapter's card spreads across the screen (it listed the Master Diver specialties;
   S36: one Master Diver card instead, the specialties are in #advanced). */
#learn .card { inline-size: calc(100% - 2 * var(--gutter)); }

/* S36 (user, 14.10.2026): one large card in #under (the combined 1+2 course) and in #learn (Master
   Diver), in the doors' visual language but bigger: the sun-coloured edge, the dark glass, the name,
   its verbatim lines and the price. It opens the sheet at that course (data-part). */
.doors.feature { display: block; max-width: none; margin-top: 26px; }
.doors.feature a, .doors.feature a:last-child:nth-child(odd) {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 8px;
  inline-size: min(100%, 34em);
  min-height: 0;
  padding: 18px 26px 20px;
  border: 2px solid #f59a3ccc;
  border-radius: 28px;
  background: #07111d8f;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--light);
  line-height: 1.25;
}
.doors.feature .pill {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  font-size: calc(25px * var(--ts-ui));
  font-weight: 800;
  line-height: 1.15;
  text-shadow: var(--contour);
}
.doors.feature .line { display: block; max-width: 30em; font-size: calc(18px * var(--ts)); line-height: 1.4; }
.doors.feature .more-line { font-size: calc(16px * var(--ts)); opacity: .9; }
.doors.feature b { font-size: calc(30px * var(--ts-ui)); line-height: 1.1; }
.doors.feature .cond { margin-top: -4px; font-size: calc(14px * var(--ts)); opacity: .85; text-shadow: var(--contour); }
.doors.feature a:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .doors.feature a:hover { border-color: var(--sun-lit); background: #07111dc4; } .doors.feature a:hover .pill { background: none; } }
@media (max-width: 719px) {
  .doors.feature { margin-top: 16px; }
  .doors.feature a, .doors.feature a:last-child:nth-child(odd) { inline-size: 100%; gap: 4px; padding: 12px 18px 14px; border-radius: 22px; }
  .doors.feature .pill { font-size: calc(19px * var(--ts-ui)); }
  .doors.feature .line { font-size: calc(15px * var(--ts)); }
  .doors.feature .more-line { display: none; }
  .doors.feature b { font-size: calc(22px * var(--ts-ui)); }
  .doors.feature .cond { margin-top: 0; font-size: calc(12.5px * var(--ts)); }
}
@media (max-width: 719px) and (max-height: 700px) { .doors.feature .line { display: none; } }
.stage.tighter .doors.feature .line { display: none; }

/* S29: "SSI" in bold red letters, no badge (the user's choice, 13.10.2026).
   User, 22.10.2026: in the style of the SSI logo: heavy, slanted, tight red letters (a dark edge keeps them
   readable on the blue); and "PRO" as the PRO badge: white heavy letters on a pill from black to red, a white rim. */
.ssi, .pro { -webkit-text-stroke: 0; paint-order: normal; font-family: "Helvetica Neue", Arial, "Assistant", sans-serif; font-weight: 900; }
.ssi { color: #ff3a2f !important; font-style: italic; letter-spacing: -.03em; padding-inline-end: .06em; text-shadow: 0 1px 1px #0009, 0 0 6px #0006; }    /* the brand's red wins over a button's colour (the learn doors) */
.pro {
  display: inline-block; padding: .06em .55em .04em; border: max(1.5px, .07em) solid #fff; border-radius: 999px;
  background: linear-gradient(90deg, #07070b 0%, #1d0405 32%, #b90f0e 72%, #ec241c 100%);
  margin-inline: .1em; color: #fff !important; font-size: .82em; line-height: 1.15; letter-spacing: -.045em; vertical-align: .06em;
  text-shadow: 0 1px 1px #0007; box-shadow: 0 2px 6px #0006;
}
bdi.ssi-pro { white-space: nowrap; }
/* S29: every text link is yellow, so it reads as a link. Buttons (.pill) keep their own look. */
.sheet a:not(.pill):not([data-back]):not([data-close]), .foot a, .after a:not(.pill) { color: var(--link); }

/* S29: the bubbles' drift. Bounded (film.js keeps DRIFT px clear around each bubble): up to 16px up
   and 6px sideways, and a slight squash and turn, like a bubble that holds its place in a current. */
@keyframes bubble-drift {
  0%   { translate: 0 0; rotate: -2deg; scale: 1 1; }
  35%  { translate: 6px -9px; rotate: 1deg; scale: 1.03 .98; }
  70%  { translate: -4px -16px; rotate: 2.5deg; scale: .98 1.03; }
  100% { translate: 3px -6px; rotate: -1deg; scale: 1.01 .99; }
}
@media (prefers-reduced-motion: reduce) { .bubble, .meets .meet img { animation: none !important; } }

/* S29: the bubbles exist only in the film; the quiet layout and the page without JavaScript have none. */
.bubbles { display: none; }

/* S29: two doors (snorkelling and the intro dive in #shore, the two beginner courses in #under). */
.doors.two { grid-template-columns: repeat(2, minmax(0, 19em)); }
/* User, 18.10.2026 (a drawing): on a phone the title on one side and the two doors on the other, side by side
   and the same height as the title; the intro door on top and a little taller than the snorkelling one. */
@media (max-width: 719px) {
  #shore .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; }
  #shore .card .when { grid-column: 1 / -1; }
  #shore .card h2 { grid-column: 1; align-self: center; max-width: none; font-size: calc(var(--title) * .92); }    /* as tall as the two doors */
  #shore .card .doors.two { grid-column: 2; align-self: stretch; margin-top: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1.25fr 1fr; gap: 8px; }
  #shore .doors a { min-height: 0; padding: 6px 10px; align-content: center; gap: 2px; }
  #shore .doors .door-name, #shore .doors .door-teal { font-size: calc(16px * var(--ts-ui)); }
  #shore .doors .set-line { font-size: calc(12.5px * var(--ts-ui)); line-height: 1.2; }
  #shore .doors a:first-child .door-name { font-size: calc(18px * var(--ts-ui)); line-height: 1.1; }
  #shore .doors a:first-child .door-first { margin-top: 1px; font-size: calc(16px * var(--ts-ui)); line-height: 1.1; }
}
/* S31: four doors in #dusk (group dives and courses removed): one row on a wide screen, two by two below. */
.doors.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .doors.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The evening card: its doors open the events sheet; the details are on WhatsApp. */
.card .ask-note { color: var(--sun-lit); font-size: calc(16px * var(--ts-ui)); font-weight: 600; text-shadow: 0 1px 10px #000c; }

/* S29: the events sheet. A photograph per kind of event, then (S42) the line and the WhatsApp button. */
.part.event .photo { margin-top: 14px; }
/* User, 18.10.2026: the retreat's two parts under its heading, and the kinds of private events in turquoise. */
.part.event .event-sub { margin-top: 22px; color: var(--sun-lit, #ffc078); font-weight: 800; scroll-margin-top: 120px; }
.dusk-doors .door-name { color: var(--heading); font-weight: 900; }
/* User, 16.10.2026: more event photos: three small ones in a row (yoga), and a round photo floating beside the text (the fruits). */
.part.event .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.part.event .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.part.event .pair figure { margin: 0; }
.part.event .pair img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.part.event .trio.duo { grid-template-columns: repeat(2, 1fr); }
.part.event .trio figure { margin: 0; }
.part.event .trio img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.part.event .photo-dot { float: inline-end; width: clamp(110px, 30vw, 150px); aspect-ratio: 1; margin: 14px 0 6px; margin-inline-start: 14px; shape-outside: circle(50%); }
.part.event .photo-dot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--light); box-shadow: 0 8px 22px #0007; }
.part.event::after { content: ""; display: block; clear: both; }
.photo.tall img { max-width: 420px; aspect-ratio: 4 / 5; }
/* A section heading that a door scrolled to holds focus for reading, not for action: no ring. */
.sheet .part [tabindex="-1"]:focus { outline: none; }


/* 12  S35 (14.10.2026) ------------------------------------------------------------------------- */

/* The sunrise, warmer and deeper (the user: "more sensual"): a little more saturation, contrast and
   warmth on the dawn photograph only, a soft warm light round the sun, and less grain over it. */
#dawn .shot img { filter: saturate(1.3) contrast(1.1) brightness(1.03) sepia(.08); }
#dawn .grade::after { opacity: .07; }
#dawn .grade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 65% at var(--sun-x, 40%) var(--sun-y, 33%), #ff9b3f59, #ff7a2a1f 42%, #0000 72%);
  mix-blend-mode: soft-light;
}
#dawn .card .lede, #dawn .card .scroll-cue { text-shadow: var(--contour), 0 0 24px #000a; }

/* Text size in every sheet's head row (S35): the menu's three steps, smaller (44px), between Back and
   Close. Where Back is shown and the row is narrow, they take a row of their own under it. */
html.js dialog.sheet .sheet-head { align-items: center; }
.text-steps.mini { flex: none; gap: 6px; margin: 0; margin-inline-start: auto; }
.text-steps.mini + .close { margin-inline-start: 0 !important; }
.text-steps.mini .text-step { width: 44px; height: 44px; }
.text-steps.mini .text-step.s { font-size: 15px; }
.text-steps.mini .text-step.m { font-size: 18px; }
.text-steps.mini .text-step.l { font-size: 21px; }
@media (max-width: 559px) {
  html.js dialog.sheet .sheet-head:has(.back:not([hidden])) { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; row-gap: 8px; }
  .sheet-head:has(.back:not([hidden])) .back { grid-area: 1 / 1; justify-self: start; }
  .sheet-head:has(.back:not([hidden])) .close { grid-area: 1 / 3; }
  .sheet-head:has(.back:not([hidden])) .text-steps.mini { grid-area: 2 / 1 / 3 / -1; justify-self: end; }
  .sheet-head:has(.back:not([hidden])) .map-jump { grid-area: 2 / 1 / 3 / 3; justify-self: start; }    /* user, 17.10.2026: on the second row, beside the text size */
}

/* Small round cats (S35): decoration, in a few chapters (film.js placeCats) and in some sheets (S36: a
   floating decoration of their own, placed like the animals by sheets.js placeDecos, opposite the animal).
   Never in the quiet layout or without JavaScript. */
/* User, 16.10.2026: Tut, cut out, hangs from the yard's title: the whole cat behind the letters (.back) and
   her front legs again over them (.front), so her paws hang over the top of the letters and her belly and
   hind legs dangle behind and below them. An anchor of no size at the start of the title's first line;
   the line where her front legs rise (42% down the picture) meets the top of the letters. */
#yard-title { isolation: isolate; }
.tut-hang { position: relative; display: inline-block; width: 0; height: 0; vertical-align: top; }
.tut-hang img {
  --tw: clamp(60px, .9em, 140px);
  position: absolute; inset-inline-start: 2.5em; top: calc(.24em - var(--tw) * .935);
  width: var(--tw); max-width: none; height: auto; margin: 0;
  pointer-events: auto; cursor: pointer;
}
.tut-hang img.back { z-index: -1; filter: drop-shadow(0 6px 10px #0009); }
.tut-hang img.front { z-index: 1; }
/* User, 18.10.2026 ("her head is in front of the text"): on a phone she hangs further along the title, clear of
   the label "בוקר ברחבה" above it, and the label stays in front. */
@media (max-width: 719px) {
  .tut-hang img { inset-inline-start: 5.2em; }    /* clear of the words under the title, which end at 60% (user, 19.10.2026) */
  #yard .card .when { position: relative; z-index: 2; }
}
/* User, 16.10.2026: the sound button of a circle with music (the ibex), on the disc's upper corner. */
.ring .sound { display: none; }
html.js:not(.quiet) .ring .sound {
  position: absolute; z-index: 2;
  top: 4%; inset-inline-end: 4%;    /* a badge on the circle's upper corner, clear of the caption */
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 2px solid var(--light); border-radius: 50%; background: #07111dd9; color: var(--light);
  box-shadow: 0 6px 16px #0008; cursor: pointer;
}
.ring .sound svg { width: 26px; height: 26px; }
.ring .sound .waves { display: none; }
.ring .sound[aria-pressed="true"] .waves { display: inline; }
.ring .sound[aria-pressed="true"] .cross { display: none; }
.ring .sound:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.ring[data-sound] .disc { cursor: pointer; }
/* User, 18.10.2026: on a phone the coffee is the big circle at the top, the size the ibex had there, and the
   ibex sits on the lawn below it, at the inline end (film.js sizes and places it); its caption gives way
   (its name is its label). */
@media (max-width: 719px) {
  html.js:not(.quiet) #yard .stage .photodot.pin-narrow {
    left: 0 !important; right: 0; top: var(--ring-y) !important; margin-inline: auto;
    width: calc(var(--ring-d) * .82); border-width: 3px;    /* user, 18.10.2026: a little smaller */
  }
  html.js:not(.quiet) #yard .card .lede { max-width: 60%; }    /* the ibex gets the column beside the words */
  html.js:not(.quiet) #yard .stage .ring.low-narrow .sound { top: auto; bottom: 2%; inset-inline-end: -4px; width: 34px; height: 34px; border-width: 1.5px; }
  html.js:not(.quiet) #yard .stage .ring.low-narrow .sound svg { width: 18px; height: 18px; }
  html.js:not(.quiet) #yard .stage .ring.low-narrow { --ring-d: var(--low-d, 120px); top: var(--low-y, auto); inset-inline: auto var(--low-x, 20px); margin: 0; }
  html.js:not(.quiet) #yard .stage .ring.low-narrow figcaption { display: none; }
}
/* User, 16.10.2026: round event photos on the evening stage (.photodot) share the cats' circles and their placing. */
:is(.catdot, .photodot) { display: none; }
:is(.catdot, .photodot) img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
html.js:not(.quiet) .stage :is(.catdot, .photodot) {
  position: absolute;
  left: 0; top: 0;
  display: block;
  width: var(--catd, 76px);
  aspect-ratio: 1;
  border: 2px solid var(--light);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 28px #0009;
}
/* User, 16.10.2026: the cat circles 1.6 times bigger (were clamp(58px, 5.4vw, 88px) and 52px on phones). */
html.js:not(.quiet) .stage { --catd: clamp(93px, 8.64vw, 141px); }
@media (max-width: 719px) { html.js:not(.quiet) .stage { --catd: 83px; } }
html.js:not(.quiet) .stage :is(.catdot, .photodot).out { display: none; }
/* User, 16.10.2026 ("this cat is not clickable"): the card's box (wider than its words) lay over the cats;
   a cat sits only where the card has no words or controls (film.js placeCats), so it may stack above it. */
html.js:not(.quiet) .stage :is(.catdot, .photodot) { z-index: 1; }
html.js:not(.quiet) .stage .photodot { width: calc(var(--catd, 76px) * .9); }
html.js:not(.quiet) #hungry .stage .catdot { width: calc(var(--catd, 76px) * 1.3); }    /* user, 18.10.2026: the belly cat alone, a bit bigger */
html.js:not(.quiet) .stage .photodot.big { width: calc(var(--catd, 76px) * 1.35); }    /* user, 16.10.2026: the yard's coffee */
html.js:not(.quiet) .stage .photodot img { object-position: 50% 62%; }
@media (max-width: 719px) { html.js:not(.quiet) .stage .photodot { width: 66px; } }    /* a phone has little free room beside the yoga circle */
html.js .ring[data-cat] .disc { cursor: pointer; }
html.js dialog.sheet .deco .catdot {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--light);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 22px #0007;
  pointer-events: auto;    /* a tap makes it wiggle (film.js); the box is kept clear of every control */
}
html.js dialog.sheet .deco .catdot img { width: 100%; height: 100%; max-width: none; margin: 0; rotate: none; scale: none; opacity: 1; filter: none; animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.quiet):not(.paused) .catdot.wiggle { animation: cat-wiggle .6s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { html.js:not(.quiet):not(.paused) .catdot:hover { animation: cat-wiggle .6s var(--ease-out); } }
}
/* User, 16.10.2026: a tapped cat circle says something, in a bubble like the day-line cat's (film.js catSay). */
.catdot-say {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: max-content; max-width: 176px; margin: 0; padding: 7px 13px 8px;
  border-radius: 16px; background: var(--light); color: var(--night);
  font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center;
  box-shadow: 0 6px 18px #0006;
  opacity: 0; pointer-events: none; transition: opacity 120ms linear;
}
.catdot-say.on { opacity: 1; transition: opacity 160ms var(--ease-out); }
html.js .catdot { cursor: pointer; }
@keyframes cat-wiggle { 25% { rotate: -9deg; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } }

/* Naget's own circle in the village sheet, beside the kitten video. */

/* S35/S42 (user): "simple, send a WhatsApp message", then the WhatsApp button (a plain chat), wherever
   there is signing up or contact. The body face: its emoji stay in colour. */
.wa-simple { margin-top: 12px; font: 800 calc(23px * var(--ts)) / 1.35 var(--text); }
.wa-simple + .wa-btn { margin-top: 12px; }

/* S35 polish: emoji in headings and the "simple" line keep the system colour emoji, never the
   handwriting font's own line drawings; the small headings get a lighter outline. */
.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; -webkit-text-stroke: 0; font-weight: 400; text-shadow: 0 2px 10px #0006; }    /* S39: no magenta ring around a colour emoji */


/* 13  S37 (15.10.2026) ------------------------------------------------------------------------- */

/* The panels: only the chosen course's section shows (hidden on the others). A focused panel (Tab
   from its node) gets a quiet ring. */
.sheet [role="tabpanel"]:focus-visible { outline: 2px solid var(--sun); outline-offset: 10px; border-radius: 12px; }

/* "For every course": what all three share, set apart under the chosen course by a rule and its title. */
.for-all { margin-top: 46px; border-top: 2px dashed #fff6e666; }
.for-all-title {
  margin-top: 22px;
  color: var(--label);
  font: var(--hand-weight) calc(clamp(26px, 2.6vw, 34px) * var(--hand-scale) * var(--ts-ui)) / var(--hand-leading) var(--hand); font-synthesis: none;
}
.for-all > .part:first-of-type { margin-top: 14px; }

/* #under (S37, user): the title on one line where it fits (it broke after two words at 5em), and two
   smaller doors, 1 star and 2 stars, beside the combined course's card: stacked at its inline end on a
   wide screen, a row of two under it on a phone. Each opens #courses with its badge chosen (S42). */
#under .card h2, :root[lang="en"] #under .card h2 { max-width: none; text-wrap: balance; }
.doors.feature.with-minor { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 15em); grid-template-rows: auto auto; gap: 12px 16px; justify-content: start; align-items: stretch; }
.doors.feature.with-minor > a:first-child { grid-row: 1 / span 2; inline-size: auto; }
.doors.feature.with-minor > a.minor, .doors.feature.with-minor > a.minor:last-child:nth-child(odd) {
  display: grid;
  inline-size: auto;
  align-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 10px 18px 12px;
  border-width: 1.5px;
  border-radius: 22px;
  grid-column: 2;
}
.doors.feature.with-minor .minor .pill { font-size: calc(18px * var(--ts-ui)); }
.doors.feature.with-minor .minor .line { font-size: calc(14px * var(--ts)); opacity: .9; }
.doors.feature.with-minor .minor b { font-size: calc(21px * var(--ts-ui)); }
/* Between a phone and a laptop the card keeps its width; the two small doors share a row under it. */
@media (min-width: 720px) and (max-width: 1023px) {
  .doors.feature.with-minor { grid-template-columns: repeat(2, minmax(0, 17em)); }
  .doors.feature.with-minor > a:first-child { grid-column: 1 / -1; grid-row: auto; }
  .doors.feature.with-minor > a.minor, .doors.feature.with-minor > a.minor:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 719px) {
  .doors.feature.with-minor { grid-template-columns: 1fr 1fr; gap: 8px; }
  .doors.feature.with-minor > a:first-child { grid-column: 1 / -1; grid-row: auto; }
  .doors.feature.with-minor > a.minor, .doors.feature.with-minor > a.minor:last-child:nth-child(odd) { grid-column: auto; min-height: 48px; padding: 7px 12px 8px; border-radius: 18px; }
  .doors.feature.with-minor .minor .pill { font-size: calc(15px * var(--ts-ui)); }
  .doors.feature.with-minor .minor .line { display: none; }
  .doors.feature.with-minor .minor b { font-size: calc(17px * var(--ts-ui)); }
}


/* 14  S38 (15.10.2026) ------------------------------------------------------------------------- */

/* #learn (S38, user): a door for every advanced course. S43 (user, 15.10.2026): Master Diver first and
   featured (large, its shining pearl and "recommended"), at the inline start over two rows; then the
   specialties, Stress & Rescue, Deep Diving and Perfect Buoyancy in the first row, and the new Nitrox,
   Navigation and Night (smaller, "details on WhatsApp" in place of a price) in the second, which ends with
   Dive Guide + Divemaster, normal size, the next level. A twelve-column grid beside Master Diver: three
   doors of four columns over four of three. The condition of the starred prices once, under them. */
.doors.feature.adv {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 10px 14px;
  max-width: 1340px;
}
.doors.feature.adv > a, .doors.feature.adv > a:last-child:nth-child(odd) { inline-size: auto; }
.doors.feature.adv > .md { grid-column: 1; grid-row: 1 / span 2; }
.doors.feature.adv > .sr { grid-column: 2 / span 4; grid-row: 1; }
.doors.feature.adv > .deep { grid-column: 6 / span 4; grid-row: 1; }
.doors.feature.adv > .pb { grid-column: 10 / span 4; grid-row: 1; }
.doors.feature.adv > .nx { grid-column: 2 / span 3; grid-row: 2; }
.doors.feature.adv > .nav { grid-column: 5 / span 3; grid-row: 2; }
.doors.feature.adv > .night { grid-column: 8 / span 3; grid-row: 2; }
.doors.feature.adv > .dm { grid-column: 11 / span 3; grid-row: 2; }
.doors.feature.adv .pill { display: block; }
.doors.feature.adv .pill span[lang] { display: block; }    /* the English name on its line, the Hebrew one under it */
.doors.feature.adv .pill span[lang] { font-weight: 800; }
:root[dir="rtl"] .doors.feature.adv .pill span[lang] { text-align: right; }    /* an English line in a Hebrew door keeps the door's edge */
.doors.feature.adv b { white-space: nowrap; }
.doors.feature.adv > .minor { gap: 4px; padding: 12px 18px 14px; border-width: 1.5px; border-radius: 22px; }
.doors.feature.adv > .minor .pill { font-size: calc(18px * var(--ts-ui)); }
.doors.feature.adv > .minor .line { font-size: calc(15px * var(--ts)); opacity: .92; }
.doors.feature.adv > .minor b { font-size: calc(22px * var(--ts-ui)); }
/* The second row: smaller doors. */
.doors.feature.adv > :is(.soon, .dm) { align-content: center; gap: 2px; padding: 9px 16px 10px; }
.doors.feature.adv > :is(.soon, .dm) .pill { font-size: calc(16px * var(--ts-ui)); }
.doors.feature.adv > :is(.soon, .dm) .line { font-size: calc(14px * var(--ts)); }
.doors.feature.adv > .dm b { font-size: calc(19px * var(--ts-ui)); }
.doors.feature.adv > .soon .line { color: var(--label); font-weight: 700; }
.doors.feature.adv > .md { padding: 16px 22px 18px; border-color: #f3e6ffcc; box-shadow: 0 0 0 1px #fff6e633 inset, 0 0 24px #e9d5ff33; }
.doors.feature.adv > .md .pill { font-size: calc(22px * var(--ts-ui)); }
.doors.feature.adv > .md .line { font-size: calc(16px * var(--ts)); }
.doors.feature.adv > .md b { font-size: calc(27px * var(--ts-ui)); }
.doors.feature.adv .rec { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; max-width: 100%; color: var(--label); font-size: calc(14px * var(--ts-ui)); font-weight: 800; text-shadow: var(--contour); }
.card .cond-note { margin-top: 10px; font-size: calc(14px * var(--ts)); opacity: .88; text-shadow: var(--contour); }

/* The pearl: a small round pearl with a soft sheen and a sparkle, its light moving over it slowly
   (with motion allowed; otherwise still). */
.pearl {
  position: relative;
  flex: none;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 14%, #fff0 34%),
    radial-gradient(circle at 60% 70%, #c9b6ff66, #c9b6ff00 60%),
    radial-gradient(circle at 50% 50%, #fffaf2, #efe2f5 55%, #c8b5d8 85%, #a892bf);
  box-shadow: 0 0 10px #fff9, 0 1px 3px #0008;
  overflow: visible;
}
.pearl::after {
  content: "";
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -8px;
  width: 12px;
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #fffc);
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.quiet):not(.paused) .pearl { animation: pearl-sheen 3.2s ease-in-out infinite; }
  html.js:not(.quiet):not(.paused) .pearl::after { animation: pearl-twinkle 2.4s ease-in-out infinite; }
}
@keyframes pearl-sheen { 0%, 100% { box-shadow: 0 0 8px #fff8, 0 1px 3px #0008; filter: brightness(1); } 50% { box-shadow: 0 0 16px #fff, 0 0 26px #e9d5ffaa, 0 1px 3px #0008; filter: brightness(1.12); } }
@keyframes pearl-twinkle { 0%, 100% { scale: .5; opacity: .3; rotate: 0deg; } 45% { scale: 1.15; opacity: 1; rotate: 45deg; } 70% { scale: .7; opacity: .6; } }

/* Between a phone and a laptop: Master Diver across the top, then the three, then the four. */
@media (min-width: 720px) and (max-width: 1023px) {
  .doors.feature.adv { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .doors.feature.adv > .md { grid-column: 1 / -1; grid-row: 1; }
  .doors.feature.adv > .sr { grid-column: 1 / span 4; grid-row: 2; }
  .doors.feature.adv > .deep { grid-column: 5 / span 4; grid-row: 2; }
  .doors.feature.adv > .pb { grid-column: 9 / span 4; grid-row: 2; }
  .doors.feature.adv > .nx { grid-column: 1 / span 3; grid-row: 3; }
  .doors.feature.adv > .nav { grid-column: 4 / span 3; grid-row: 3; }
  .doors.feature.adv > .night { grid-column: 7 / span 3; grid-row: 3; }
  .doors.feature.adv > .dm { grid-column: 10 / span 3; grid-row: 3; }
  .doors.feature.adv > .md .more-line { display: none; }
}
/* A phone: one button each, name and price; Master Diver, Stress & Rescue and Dive Guide + Divemaster
   across, Deep Diving and Perfect Buoyancy side by side, and Nitrox, Navigation and Night three small
   ones in a row (their name only: the Hebrew one on a Hebrew page). */
@media (max-width: 719px) {
  .doors.feature.adv { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
  .doors.feature.adv > :is(.md, .sr, .dm) { grid-column: 1 / -1; grid-row: auto; }
  .doors.feature.adv > .deep { grid-column: 1 / span 6; grid-row: auto; }
  .doors.feature.adv > .pb { grid-column: 7 / span 6; grid-row: auto; }
  .doors.feature.adv > .nx { grid-column: 1 / span 4; grid-row: auto; }
  .doors.feature.adv > .nav { grid-column: 5 / span 4; grid-row: auto; }
  .doors.feature.adv > .night { grid-column: 9 / span 4; grid-row: auto; }
  .doors.feature.adv > a, .doors.feature.adv > .minor { gap: 2px; min-height: 48px; padding: 7px 12px 8px; border-radius: 18px; }
  .doors.feature.adv > a .line { display: none; }
  .doors.feature.adv > a .pill, .doors.feature.adv > .minor .pill { font-size: calc(14.5px * var(--ts-ui)); }
  .doors.feature.adv > a b, .doors.feature.adv > .minor b { font-size: calc(17px * var(--ts-ui)); }
  .doors.feature.adv > .soon { min-height: 36px; padding: 5px 8px; justify-items: center; text-align: center; }
  .doors.feature.adv > .soon .pill { font-size: calc(14px * var(--ts-ui)); text-align: center; }
  :root[lang="he"] .doors.feature.adv > .soon .pill span[lang="en"] { display: none; }
  .doors.feature.adv .rec { font-size: calc(13px * var(--ts-ui)); }
  /* One row each where it can: the name (its English and Hebrew lines) at the start, the price at the end. */
  .doors.feature.adv > :is(.md, .sr, .dm) { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; column-gap: 10px; }
  .doors.feature.adv > :is(.md, .sr, .dm) .pill { flex: 1 1 auto; min-width: 0; }
  .doors.feature.adv > :is(.md, .sr, .dm) b { flex: none; }
  .doors.feature.adv > .md { padding: 10px 16px 11px; }
  .doors.feature.adv > .md .pill { font-size: calc(16px * var(--ts-ui)); }
  .doors.feature.adv > .md b { font-size: calc(20px * var(--ts-ui)); }
  .doors.feature.adv > .md { flex-wrap: wrap; row-gap: 1px; }
  .doors.feature.adv .md .rec { flex: 1 0 100%; }    /* "recommended" on its own line over the name and price */
  .card .cond-note { margin-top: 6px; font-size: calc(12.5px * var(--ts)); }
}
/* Review 16.10.2026 (3.6, approved by the user): on a phone the #learn card shows Master Diver, Stress & Rescue, Deep
   Diving, Perfect Buoyancy and Dive Guide + Divemaster; Nitrox, Navigation and Night (no details yet) are left out
   here and stay on the #advanced board. Tablet and desktop keep all eight. */
@media (max-width: 719px) {
  .doors.feature.adv > .soon { display: none; }
}
/* Review 16.10.2026 (3.6): on a laptop-height window (1024×768) the card reached up into the bar. At #learn the cat
   swims down in the day line's dip, so the card may sit lower there and keep its title clear of the bar. */
html.js:not(.quiet) { @media (min-width: 720px) and (max-height: 820px) { #learn .card { bottom: calc(var(--safe-bottom) - 80px); } } }
/* Still too tall on a small phone (film.js .tighter): the doors keep one name each, the Hebrew one in
   Hebrew (the English name stays in the sheet), and sit closer. */
@media (max-width: 719px) {
  :root[lang="he"] .stage.tighter .doors.feature.adv .pill span[lang="en"] { display: none; }
  .stage.tighter .doors.feature.adv { gap: 6px; }
  .stage.tighter .doors.feature.adv > a { min-height: 44px; padding-block: 5px 6px; }
  .stage.tighter .doors.feature.adv > .soon { min-height: 34px; padding-block: 4px; }
  /* S43: eight doors; on a small phone the lede is set smaller and closer (as #night does with its own). */
  #learn .stage.tighter .lede { margin-top: 8px; font-size: calc(16px * var(--ts)); line-height: 1.35; }
  .stage.tighter .doors.feature.adv .pearl { width: 18px; }
}


/* 15  S39–S40 (15.10.2026) ------------------------------------------------------------------------- */

/* S40 (user, 15.10.2026): every WhatsApp link is one button, as in the manager's example: a near-black
   pill, the official WhatsApp logo at the inline start (its shape unchanged; it stays where it is in
   both directions, only its side follows the page), and two lines in WhatsApp green: "WhatsApp" large
   and bold, wa.sub small under it. Green #25d366 on #0e1311: 9.6:1 (AA for the small line too). The
   name for assistive technology is wa.aria; a place's own line above (.wa-note) describes it.
   S42 (user, 15.10.2026, the new reference): "WhatsApp" in white (17.9:1), "click to chat" in the green
   (9.6:1); the scripts no longer add a ready-made text (?text=): every button opens a plain chat. */
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  max-width: 100%;
  padding-block: 7px;
  padding-inline: 10px 24px;    /* the logo's side is the inline start */
  border: 1.5px solid #ffffff2b;
  border-radius: 999px;
  background: #0e1311;
  box-shadow: 0 6px 18px #0006;
  color: #25d366;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, transform 160ms var(--ease-out);
}
.wa-btn .wa-logo { flex: none; width: 38px; height: 38px; }
.wa-btn .wa-text { display: grid; gap: 1px; text-align: start; }
.wa-btn .wa-name { color: #fff; font: 800 calc(21px * var(--ts-ui)) / 1.05 var(--text); letter-spacing: .005em; }
.wa-btn .wa-sub { color: #25d366; font: 600 calc(14px * var(--ts-ui)) / 1.15 var(--text); }
.wa-btn:active { transform: scale(.97); }
.wa-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wa-btn:hover { border-color: #25d36699; background: #18201c; }
}
/* The links' own colours and sizes (sheet links yellow, the footer's padding) are not for it. */
.sheet .wa-btn, .foot .wa-btn { color: #25d366; padding-block: 7px; font-weight: 400; }
.foot .wa-btn { display: inline-flex; }
/* A place's own line above the button. */
.wa-cta { display: grid; justify-items: start; gap: 8px; }
.wa-note { font-size: calc(18px * var(--ts)); font-weight: 800; line-height: 1.35; }    /* S42: the line "simple, send a WhatsApp message" */
.actions:has(> .wa-cta) { align-items: flex-end; }
/* S43: a numbered step that is the line and the button (2 stars), what to prepare under it. */
.foot-wa { padding-block: 6px 4px; }
@media (max-width: 719px) {
  .wa-btn { gap: 8px; }
  .wa-btn .wa-logo { width: 32px; height: 32px; }
  .wa-btn .wa-name { font-size: calc(19px * var(--ts-ui)); }
  .wa-btn .wa-sub { font-size: calc(13px * var(--ts-ui)); }
}

/* S41 (user, 15.10.2026): "On phones the videos and pictures are stretched, zoomed in; I need to see the
   video." On a portrait phone a landscape plate (most photographs, every loop) was cut to a thin
   middle slice by cover. Now the whole frame shows across the width, a little above the middle (above
   the title card), and the rest of the screen is the same picture, blurred and darker (--bd, its small
   still; for a loop its still, never a second video). Portrait plates (the opening, the deck, the two
   tall ones: data-fit="cover") keep cover. The look is three variables:
     --phone-fit   contain (default) | cover (the S40 crop, everything else ignored)
     --phone-show  share of the frame's width shown: 1 = all of it, .85 = a little cropped at the sides
     --phone-y     where the frame sits: 0% top, 50% middle
   The backdrop's picture loads only for the stage on screen (.live), so a phone fetches none ahead.
   --bd is written "url(../media/…)": a URL in a custom property resolves against this stylesheet in
   some browsers and against the page in others; from /styles/, /, and /en/ it is /media/ either way. */
html.js:not(.quiet) {
  @media (orientation: portrait) and (max-width: 719px) {
    --phone-fit: contain;
    --phone-show: .85;    /* S42 (user, 15.10.2026): 85% of the frame's width, a little cropped at the sides */
    --phone-y: 34%;

    .shot:not(.tall):not([data-fit="cover"]) {
      :is(img, video) {
        object-fit: var(--phone-fit);
        object-position: 50% var(--phone-y);
        scale: calc(1 / var(--phone-show));
        transform-origin: 50% var(--phone-y);
      }
      &.rolling img { opacity: 0; }    /* the loop is smaller than some stills: only the loop shows */
      &::before {
        content: "";
        position: absolute;
        inset: -60px;
        background: #04101c 50% var(--phone-y) / cover no-repeat;
        filter: blur(28px) brightness(.6) saturate(1.15);
        opacity: 0;
        transition: opacity .5s linear;
      }
    }
    .stage.live .shot:not(.tall):not([data-fit="cover"])::before { background-image: var(--bd, none); opacity: 1; }
  }
}

/* Dawn (user, 15.10.2026): "The opening picture is dull; it should be bright, a little pink, with
   sunshine." The dark grade is all but gone (a light shade stays at the foot for the day line, and at
   the top for the bar), the photograph is brighter and more saturated with a touch of rose, a
   rose-and-peach light lies over it, and a warm sun glow sits on the real sun (--sun-x/--sun-y, which
   film.js measures for the wide and the tall photograph). No veil and no marker behind the type: the
   title keeps its outline, the lede and the cue their contour shadow. Replaces the S35 dawn look. */
#dawn, :root[dir="ltr"] #dawn { --grade: linear-gradient(to top, #1a0d0e8c 0%, #1a0d0e33 16%, #0000 32%), linear-gradient(to bottom, #2a12082e, #0000 14%); }
#dawn .shot img { filter: brightness(1.15) saturate(1.45) contrast(1.07) hue-rotate(-7deg); }
#dawn .grade::before {
  background:
    radial-gradient(70% 60% at var(--sun-x, 40%) var(--sun-y, 33%), #ffb36b80, #ff8f7a33 45%, #0000 75%),
    linear-gradient(to bottom, #ff8fb866, #ffb08a40 45%, #0000 75%);
  mix-blend-mode: soft-light;
}
#dawn .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--sun-x, 40%) var(--sun-y, 33%), #fff1cce6 0, #ffd08a99 4%, #ffa77a4d 13%, #ff8fae24 28%, #0000 48%);
  mix-blend-mode: screen;
  pointer-events: none;
}
#dawn .card .lede, #dawn .card .scroll-cue, #dawn .card .when { text-shadow: var(--contour), 0 0 18px #000c, 0 0 36px #0008; }


/* 16  S42 (15.10.2026) ------------------------------------------------------------------------- */

/* The achievements boards (user, 15.10.2026), instead of the octopus pickers: every course a round
   badge (a medal, its level or specialty tag, its verbatim name and price), the lines between them
   (sheets.js draws them into .board-links from data-links) showing the way up. Visual only: nothing
   is earned or kept. The chosen badge (aria-selected) has a sun ring and glow round its medal and its
   tag filled; its lines light up. Choosing one "unlocks" it for a moment (.unlock: the medal pops and
   a shine runs over it, its lines pulse), only with motion allowed.
   #courses (.beg): Level 2 over Level 1 at the inline start (a ladder; Level 2's caption over its medal
   so the line between the two medals crosses nothing), the fast track (the combined course, both
   levels) beside them. #advanced (.adv, the user's sketch): Master Diver at the top (its caption over
   its medal), the six specialties in the two outer columns, their lines running inward and up through
   the gaps into Master Diver's medal; under Master Diver, in the middle, the next level (Dive Guide +
   Divemaster). Each medal has its own colours (--c1 light, --c2 deep); white on all of them carries a
   dark shadow. */
.board-title { margin-top: 34px; }
.board-title + .board-hint { margin-top: 8px; }
.board-hint { margin-top: 26px; font-size: calc(16px * var(--ts)); font-weight: 600; opacity: .86; }
.board {
  --m: clamp(68px, 19vw, 100px);
  position: relative;
  display: grid;
  align-items: start;
  justify-items: center;
  width: 100%;
  max-width: 620px;
  margin: 14px auto 0;
  padding: 22px clamp(10px, 3vw, 22px) 24px;
  border: 1.5px solid #fff6e633;
  border-radius: 30px;
  background: radial-gradient(110% 80% at 50% 0%, #ffffff17, #0000 62%), #07111d40;
}
html:not(.js) .board { margin-top: 30px; }
.board-links { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board-links path { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s, opacity .25s; }
.board-links .edge { stroke: var(--heading); stroke-width: 10; opacity: .5; }
.board-links .core { stroke: var(--light); stroke-width: 4; opacity: .75; }
.board-links .fast .core { stroke-width: 5; stroke-dasharray: .5 10; }
.board-links .next .core { stroke-dasharray: 10 8; }
.board-links .on .edge { stroke: var(--sun); opacity: .95; }
.board-links .on .core { stroke: #fff; opacity: 1; }

.sheet .board .badge {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 2px;
  border-radius: 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.board .badge:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.board .medal {
  --c1: #fff6e6; --c2: #8aa0b8;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m);
  aspect-ratio: 1;
  border: max(3px, calc(var(--m) * .045)) solid #fff6e6;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, var(--c1), var(--c2) 72%);
  box-shadow: 0 0 0 3px var(--heading), 0 8px 20px #0008, inset 0 -8px 18px #0005, inset 0 6px 12px #fff6;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .25s, scale .25s var(--ease-out);
}
/* The shine that runs over a medal as it unlocks. */
.board .medal::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 2;
  background: linear-gradient(115deg, #0000 38%, #fffc 50%, #0000 62%);
  translate: -110% 0;
  pointer-events: none;
}
.board .badge[aria-selected="true"] .medal {
  scale: 1.06;
  box-shadow: 0 0 0 3px var(--heading), 0 0 0 8px var(--sun), 0 0 30px 8px #ffb05c99, 0 8px 20px #0008, inset 0 -8px 18px #0005, inset 0 6px 12px #fff6;
}
@media (hover: hover) and (pointer: fine) {
  .board .badge:hover .medal { scale: 1.04; }
  .board .badge[aria-selected="true"]:hover .medal { scale: 1.08; }
}
.board .badge:active .medal { scale: .97; }

.board .name { color: var(--light); font-size: calc(clamp(12.5px, 3.3vw, 16px) * var(--ts-ui)); font-weight: 700; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 1px 2px #000a, 0 0 10px #0006; }
.board .name span[lang] { display: block; font-weight: 800; }
.board .badge b { color: var(--price); font-size: calc(clamp(15px, 3.8vw, 20px) * var(--ts-ui)); font-weight: 800; line-height: 1.1; white-space: nowrap; text-shadow: 0 1px 2px #0009; }
.board .badge b .price { font-size: 1em; }

/* What is in a medal: stars, a word, an emoji, the pearl. */
.board .medal .glyph { position: relative; z-index: 1; font: 800 calc(var(--m) * .3) / 1 var(--text);    /* S43: Assistant, clear digits (Gveret Levin's "1" reads as a stroke) */
  color: #fff; text-shadow: 0 2px 4px #0009, 0 0 2px #000c; }
.board .medal .glyph .emoji, .board .medal .glyph:has(.emoji) { font: 400 calc(var(--m) * .42) / 1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; text-shadow: 0 2px 6px #0007; }
.board .stars { position: relative; z-index: 1; display: flex; gap: calc(var(--m) * .02); filter: drop-shadow(0 2px 2px #0008); }
.board .stars i {
  width: calc(var(--m) * .42);
  aspect-ratio: 1;
  background: linear-gradient(#fff8c4, #f5b03c);
  clip-path: polygon(50% 2%, 61% 36%, 97% 36%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 3% 36%, 39% 36%);
}
.board .stars i + i, .board .stars:has(i + i) i { width: calc(var(--m) * .32); }
.board .medal .pearl { position: relative; z-index: 1; width: calc(var(--m) * .44); }
/* Review 16.10.2026 (1.10): the drawn icons of the advanced board (build.mjs {{@medal}}), instead of emoji. */
.board .medal .icon { position: relative; z-index: 1; display: block; width: calc(var(--m) * .58); height: auto; filter: drop-shadow(0 2px 3px #0009); }
.board .medal .pearl::after { width: calc(var(--m) * .2); inset-block-start: -18%; inset-inline-end: -22%; }

/* The colours of each medal. */
.board .l1 .medal { --c1: #9df3ff; --c2: #127fae; }
.board .l2 .medal { --c1: #c9b8ff; --c2: #4a37b0; }
.board .fast .medal { --c1: #ffe39a; --c2: #e8662a; }
.board .md .medal { --c1: #fffaf2; --c2: #9a83c4; }
.board .dm .medal { --c1: #fff0a3; --c2: #d98a1f; }
.board .nx .medal { --c1: #c4ffb8; --c2: #2c9147; }
.board .nav .medal { --c1: #ffd9ad; --c2: #c9581f; }
.board .night .medal { --c1: #a9b8ff; --c2: #1c2470; }
.board .sr .medal { --c1: #ffbcbc; --c2: #be3142; }
.board .deep .medal { --c1: #9fd6ff; --c2: #123c88; }
.board .pb .medal { --c1: #bdfff3; --c2: #15968d; }
.board .fast, .board .md { --m: clamp(84px, 24vw, 124px); }
.board .fast .medal .glyph { font-size: calc(var(--m) * .32); }

/* #courses: the ladder and the fast track. */
/* S43 (user): in reading order 1 star, 2 stars, the combined course, in one row (the lines 1★ → 2★ → 1+2). */
.board.beg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px clamp(6px, 3vw, 26px); align-items: start; }
.board.beg .name { overflow-wrap: break-word; hyphens: auto; }    /* a long word ("Adventurer") breaks with a hyphen, not anywhere */
@media (max-width: 359px) { .board.beg { padding-inline: 6px; } .board.beg .name { font-size: calc(12px * var(--ts-ui)); } }
/* Names and prices over a chosen medal's glow (the medal is positioned, so it would paint over them). */
.board .badge > :is(.name, b, del) { position: relative; z-index: 1; }
/* A caption over its medal (Level 2, Master Diver): the name and price first (S43: no tags). */
.board .badge.over .name { order: -3; }
.board .badge.over b { order: -2; margin-bottom: 10px; }    /* S43: clear of the chosen medal's glow (the tag sat there) */
.board.beg .fast { --m: clamp(80px, 23vw, 118px); }
.board.beg .badge:not(.fast) { padding-top: calc((clamp(80px, 23vw, 118px) - var(--m)) / 2 + 4px); }    /* medals' centres on one line */
.board.beg .medal { margin-bottom: 8px; }    /* the name clear of a chosen medal's ring */
/* The level's number over its star(s) (S43). */
.board.beg .medal:has(.num) { align-content: center; gap: 0; }
.board .medal .num { position: relative; z-index: 1; margin-bottom: calc(var(--m) * -.02); font: 800 calc(var(--m) * .3) / .9 var(--text); color: #fff; text-shadow: 0 2px 4px #0009, 0 0 2px #000c; }
.board.beg .stars i { width: calc(var(--m) * .34); }
.board.beg .stars i + i, .board.beg .stars:has(i + i) i { width: calc(var(--m) * .27); }
/* The combined course: a large shining star on the edge of its medal (S43), still with reduced motion. */
.board .badge .spark {
  position: absolute;
  z-index: 2;
  top: 0;
  inset-inline-end: max(0px, calc(50% - var(--m) / 2 - 12px));    /* on the medal's edge, inside its column */
  width: calc(var(--m) * .42);
  aspect-ratio: 1;
  background: linear-gradient(160deg, #fffbe0 10%, #ffd45c 45%, #f59a3c 90%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 6px #ffe9a8);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.quiet):not(.paused) .board .badge .spark { animation: spark-shine 2.6s ease-in-out infinite; }
}
@keyframes spark-shine { 0%, 100% { scale: 1; rotate: 0deg; filter: drop-shadow(0 0 5px #ffe9a8); } 50% { scale: 1.12; rotate: 12deg; filter: drop-shadow(0 0 12px #fff3c4) brightness(1.15); } }
/* "recommended" in the combined course's name, in the headings' magenta (8:1 on the board). */
.board .name em.mark { color: var(--heading); font-style: normal; font-weight: 800; overflow-wrap: normal; }
/* The combined price as a discount: the price, then the price of the two courses apart, struck. */
del.was { color: #fff6e6c4; font-weight: 700; text-decoration: line-through 2px var(--heading); white-space: nowrap; }
/* Review 16.10.2026 (6.5): the strike as longhands too (thicker, and not broken around the digits), so every engine draws it firmly. */
del.was { text-decoration-line: line-through; text-decoration-thickness: max(2.5px, .12em); text-decoration-color: var(--heading); text-decoration-skip-ink: none; }
del.was .price { color: inherit; }
/* User, 16.10.2026: "wherever there is a line on the price, put a red X instead": no strike line; two red
   diagonals cross the old price, in every place del.was appears. Then: "the old price the same style and
   size as the new, and the X not hiding the 2 of 2350": the old price is drawn like the new one (mint,
   800, the dark stroke, the same size beside it), and the X lies under the digits. */
del.was {
  position: relative; display: inline-block; isolation: isolate; text-decoration: none; padding-inline: .15em;
  color: var(--price); font-weight: 800; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1.5px rgba(4, 12, 22, 0.85); paint-order: stroke fill; text-shadow: 0 1px 2px #000b, 0 0 12px #0009;
}
/* User, 17.10.2026: the X in front of the price, its middle between the first two digits (.x, build.mjs wasX). */
del.was .x { position: relative; display: inline-block; inline-size: 0; block-size: 1em; vertical-align: -.12em; }
del.was .x::before, del.was .x::after {
  content: ""; position: absolute; z-index: 1; inset-block: -.2em; inset-inline: -1.05em;
  background: linear-gradient(to top right, #0000 calc(50% - 2.2px), #ff3b3b calc(50% - 2.2px), #ff3b3b calc(50% + 2.2px), #0000 calc(50% + 2.2px));
  filter: drop-shadow(0 1px 1px #0009);
  pointer-events: none;
}
del.was .x::after { scale: -1 1; }
:is(.board .badge, .doors .deal) del.was .price { font-size: 1em; }    /* in a row its .price is sized as the one beside it */
.board .badge del.was { font-size: calc(clamp(15px, 3.8vw, 20px) * var(--ts-ui)); line-height: 1.1; }
.doors .deal del.was { font-size: calc(20px * var(--ts-ui)); }
@media (max-width: 719px) { .doors .deal del.was { font-size: calc(18px * var(--ts-ui)); } }
@media (max-width: 379px) { .doors .deal del.was { font-size: calc(16px * var(--ts-ui)); } }
.doors.feature .deal del.was { font-size: calc(30px * var(--ts-ui)); line-height: 1.1; }    /* as .doors.feature b */
@media (max-width: 719px) { .doors.feature .deal del.was { font-size: calc(22px * var(--ts-ui)); } }
.doors .deal { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
/* "Important information" before the board (S43). */
#courses .part.info { margin-top: 26px; }

/* #advanced: the user's sketch. */
.board.adv { --m: clamp(56px, 15vw, 88px); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "md md md" "nx . sr" "nav dm deep" "night dm pb"; gap: 26px clamp(14px, 4vw, 30px); padding-inline: clamp(4px, 2vw, 22px); }
.board.adv .badge.spec { justify-self: stretch; }
.board.adv .md { grid-area: md; margin-bottom: 6px; }
.board.adv .nx { grid-area: nx; } .board.adv .nav { grid-area: nav; } .board.adv .night { grid-area: night; }
.board.adv .sr { grid-area: sr; } .board.adv .deep { grid-area: deep; } .board.adv .pb { grid-area: pb; }
.board.adv .dm { grid-area: dm; align-self: center; }
.board.adv .name { font-size: calc(clamp(11px, 2.9vw, 15px) * var(--ts-ui)); }
.board.adv .md .name { font-size: calc(clamp(14px, 3.6vw, 18px) * var(--ts-ui)); }

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.quiet):not(.paused) .board .badge.unlock .medal { animation: badge-pop .7s var(--ease-out); }
  html.js:not(.quiet):not(.paused) .board .badge.unlock .medal::after { animation: badge-shine .8s ease-out .1s; }
  html.js:not(.quiet):not(.paused) .board-links .unlock .core { animation: link-pulse .8s ease-out; }
}
@keyframes badge-pop { 0% { scale: .88; } 45% { scale: 1.2; } 72% { scale: 1; } 100% { scale: 1.06; } }
@keyframes badge-shine { from { translate: -110% 0; } to { translate: 110% 0; } }
@keyframes link-pulse { 40% { stroke-width: 8px; } }

/* The Q&A link (S42, user): bold, larger and easy to find wherever it is, a callout with a question
   mark, still in the link colour. The mark is generated (empty alternative text where supported). */
a.qa-link {
  display: inline-block;
  padding: 8px 16px 9px;
  border: 2px solid #ffe066a6;
  border-radius: 16px;
  background: #ffe0661c;
  color: var(--link);
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1.25;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
/* User, 16.10.2026: "🧐 שאלות ותשובות ❓" everywhere (the emoji are decoration, not read out). */
a.qa-link::before, a.qa-link::after {
  content: "🧐";
  content: "🧐" / "";
  display: inline-block;
  margin-inline-end: .35em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 400;
}
a.qa-link::after { content: "❓"; content: "❓" / ""; margin-inline: .35em 0; }
/* User, 17.10.2026: "להכיר את אנג׳ל": her photo with the cat, and her diving photos as round bubbles beside it,
   of a few sizes, bobbing gently (still under reduced motion and the pause). */
/* User, 17.10.2026: "an arc around the main photo": her photo with the cat in the middle, and the bubbles on
   an ellipse around it (the age-four wetsuit, bigger, at the top), each placed by its angle --a. */
.angel-photos { --rx: 232px; --ry: 320px; --d: 116px; position: relative; block-size: 850px; margin-top: 18px; }    /* user, 17.10.2026: bigger, then bigger again */
.angel-main { position: absolute; inset-inline-start: 50%; top: 50%; inline-size: 276px; margin: 0; translate: -50% -50%; }
:root[dir="rtl"] .angel-main { translate: 50% -50%; }
.angel-main img { display: block; inline-size: 100%; block-size: auto; border-radius: 22px; box-shadow: 0 10px 26px #0008; }
.angel-bubbles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.angel-bubbles li {
  --s: var(--d);
  position: absolute; inline-size: var(--s); block-size: var(--s); margin: 0;
  left: calc(50% + cos(var(--a)) * var(--rx) - var(--s) / 2);
  top: calc(50% + sin(var(--a)) * var(--ry) - var(--s) / 2);
}
.angel-bubbles li.big { --s: calc(var(--d) * 1.42); z-index: 1; }
.angel-bubbles li { z-index: 1; }    /* over the photo's corners where they meet */
/* Spaced evenly along the ellipse (by arc length, so none crowd at the foot); 14 since 21.10.2026 (the mermaid). */
.angel-bubbles li:nth-child(1) { --a: -90deg; }
.angel-bubbles li:nth-child(2) { --a: -60deg; }
.angel-bubbles li:nth-child(3) { --a: -34deg; }
.angel-bubbles li:nth-child(4) { --a: -11deg; }
.angel-bubbles li:nth-child(5) { --a: 11deg; }
.angel-bubbles li:nth-child(6) { --a: 34deg; }
.angel-bubbles li:nth-child(7) { --a: 60deg; }
.angel-bubbles li:nth-child(8) { --a: 90deg; }
.angel-bubbles li:nth-child(9) { --a: 120deg; }
.angel-bubbles li:nth-child(10) { --a: 146deg; }
.angel-bubbles li:nth-child(11) { --a: 169deg; }
.angel-bubbles li:nth-child(12) { --a: 191deg; }
.angel-bubbles li:nth-child(13) { --a: 214deg; }
.angel-bubbles li:nth-child(14) { --a: 240deg; }
.angel-bubbles img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--light); box-shadow: 0 6px 16px #0007; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.paused) .angel-bubbles li { animation: angel-bob 5s ease-in-out infinite alternate; }
  html:not(.paused) .angel-bubbles li:nth-child(2n) { animation-duration: 6.4s; animation-delay: -2s; }
  html:not(.paused) .angel-bubbles li:nth-child(3n) { animation-duration: 4.6s; animation-delay: -1s; }
}
@keyframes angel-bob { from { translate: 0 -4px; } to { translate: 0 5px; } }
@media (max-width: 719px) {
  .angel-photos { --rx: min(36vw, 142px); --ry: min(80vw, 312px); --d: min(23vw, 90px); block-size: calc(var(--ry) * 2 + var(--d) * 1.5); }
  .angel-main { inline-size: min(42vw, 170px); }
}
/* User, 17.10.2026: pull to refresh, the page's own (sheets.js initPullToRefresh): a round arrow under the
   top edge that comes down and turns as you pull, orange when letting go will reload. On touch screens the
   browser's own is off, so only one runs. */
@media (pointer: coarse) { html, html.js dialog.sheet, html.js dialog.menu { overscroll-behavior-y: contain; } }
.ptr {
  position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px);
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: var(--light); color: var(--net); box-shadow: 0 6px 18px #0008;
  translate: -50% calc(var(--y, 0px) - 60px); opacity: 0; pointer-events: none;
  transition: opacity .15s linear;
}
.ptr.on { opacity: calc(.35 + var(--p, 0) * .65); }
.ptr svg { inline-size: 26px; block-size: 26px; rotate: var(--turn, 0deg); }
.ptr.ready { background: var(--sun); color: var(--night); }
.ptr.spin svg { animation: ptr-spin .6s linear infinite; }
@keyframes ptr-spin { to { rotate: 360deg; } }
/* User, 17.10.2026: no underline on the Q&A link anywhere (its frame says it is a link), and on one line. */
a.qa-link, a.qa-link:hover { text-decoration: none; white-space: nowrap; }
/* In a paragraph (the courses sheet), the paragraph is the callout and the link plain in it. */
.sheet .qa-callout { width: fit-content; max-width: 100%; margin-top: 16px; padding: 10px 18px 11px; border: 2px solid #ffe066a6; border-radius: 16px; background: #ffe0661c; font-size: 1.15em; line-height: 1.3; }
.sheet .qa-callout a.qa-link { padding: 0; border: 0; background: none; font-size: 1em; }
.sheet .actions a.more.qa-link { padding-block: 8px 9px; font-size: calc(18px * var(--ts-ui)); }
.menu .pages a.qa-link { display: inline-block; font-weight: 800; font-size: calc(20px * var(--ts)); }
.after a.qa-link { display: inline-block; max-inline-size: 100%; margin-block: 10px; padding: 12px 22px 10px; font-size: clamp(30px, 9vw, 70px); }
/* The big link at the end of the day fits the width: smaller on a phone, and in English (longer) it may wrap. */
:root[lang="en"] .after a.qa-link { white-space: normal; font-size: clamp(26px, 7.2vw, 70px); }
@media (hover: hover) and (pointer: fine) { a.qa-link:hover { background: #ffe06633; } }

/* The traditional row (S42, user): "מסורתיים" in bold, in its own eye-catching magenta, not the orange of
   the other labels. S45 (user, 15.10.2026): plain text, not a pill — only bold, in the heading pink; large
   bold text. S45 fix (user, 16.10.2026): an ordinary line at body size, only the word bold pink; a lighter
   pink than --heading so body-size text keeps AA (4.6:1 on --net). */
p.trad b { color: #ffb3ec; font-weight: 800; }
/* Room prices (user, 16.10.2026): the winter rows' labels in light blue, the summer ones stay orange. */
.rows > .winter dt { color: var(--price); }    /* user, 18.10.2026: turquoise, not the light blue */


/* 17  S44 (15.10.2026) ------------------------------------------------------------------------- */
/* "Hungry?" (#hungry; the sheet is #food): the chapter between the advanced courses and the evening, and Angel's sheet with
   the illustrated map (scripts/foodmap.mjs), her list and her note about The Brewery. */

#hungry { --grade: linear-gradient(to top, #120a04f5 0%, #120a04c2 30%, #120a0438 56%, #0000 76%), linear-gradient(var(--toward-end), #120a0480, #0000 58%), linear-gradient(to bottom, #120a0480, #0000 22%); }
html.js:not(.quiet) #hungry .card { max-width: calc(100% - 2 * var(--gutter)); }
/* Her pick, the large door: the sun-orange edge it shares with the others, and the treat in the sun's lighter tone. */
.doors.food > a.pick .line:not(.more-line) { color: var(--price); font-weight: 700; }    /* user, 18.10.2026: turquoise (was orange) */

/* The map: one drawing (viewBox 600 wide) with the words and the bubbles laid over it in percent. */
.foodmap { margin-top: 16px; }
.fm-canvas { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
@media (max-width: 719px) { .fm-canvas { width: auto; margin-inline: -14px; } }
.fm-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }    /* review B7: was visible; the coast paths ran far past the sheet (WebKit could pan sideways) */
.fm-canvas { overflow: clip; overflow-clip-margin: 14px; }
.fm-land { fill: #f1ddb2; }
.fm-hill { fill: #e2c38e; }
.fm-hill-shade { fill: #c9a165; opacity: .75; }
.fm-sea { fill: url(#fm-sea); }
.fm-sea-waves { fill: url(#fm-waves); }
.fm-shore { fill: none; stroke: #fff6e6; stroke-width: 3; stroke-linejoin: round; opacity: .9; }
.fm-road { fill: none; stroke: #7a5a34; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.fm-road.wide { stroke-width: 12; }
.fm-road-mid { fill: none; stroke: #fff6e6; stroke-width: 1.4; stroke-dasharray: 7 7; stroke-linecap: round; stroke-linejoin: round; }
.fm-road-mid.wide { stroke-width: 2; stroke-dasharray: 10 10; }
.fm-frame { fill: none; stroke: #fff6e6; stroke-width: 3; }
.fm-ring { fill: none; stroke: #fff6e6; stroke-width: 6; filter: drop-shadow(0 4px 10px #0008); }
.fm-small { fill: #fff6e633; stroke: var(--sun); stroke-width: 3; stroke-dasharray: 8 6; }
.fm-lens { fill: none; stroke: #fff6e6; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .85; }
.fm-bar { fill: none; stroke: #2a1a0a; stroke-width: 4; stroke-linecap: square; }
.fm-home { fill: var(--sun); stroke: #fff6e6; stroke-width: 3; }
.fm-dot { fill: #d63aa0; stroke: #fff6e6; stroke-width: 3; }
.fm-dot.tiny { stroke-width: 1.2; }
.fm-spot.pick .fm-dot { fill: var(--sun); }
.fm-lead { fill: none; stroke: #2a1a0a; stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .75; }
.fm-spot.on .fm-dot { fill: var(--sun); stroke: #07111d; stroke-width: 4; }
.fm-spot.on .fm-lead { stroke: #07111d; stroke-dasharray: none; opacity: 1; }

.fm-labels { position: absolute; inset: 0; pointer-events: none; }
.fm-label, .fm-home-mark { position: absolute; translate: -50% -50%; }
.fm-label { color: #5a3f1f; font: 700 clamp(11px, 2.9vw, 14px) / 1.1 var(--text); white-space: nowrap; text-shadow: 0 0 3px #f1ddb2, 0 0 6px #f1ddb2; }
.fm-label.sea { color: #fff6e6; font-style: italic; font-weight: 600; text-shadow: 0 1px 4px #0b4f75; }
.fm-label.sea.big { font-size: clamp(13px, 3.4vw, 18px); letter-spacing: .02em; }
.fm-label.road { color: #7a5a34; font-size: clamp(10px, 2.6vw, 12.5px); }
.fm-label.zoom { color: var(--light); text-shadow: 0 1px 6px #000a; translate: -50% 0; font-weight: 600; }
.fm-label.scale { font-size: clamp(10px, 2.5vw, 12px); }
.fm-label.north { display: grid; justify-items: center; font-size: clamp(10px, 2.6vw, 12px); }
.fm-label.north .arrow { font-size: 1.5em; line-height: 1; }
.fm-label.city { font-size: clamp(13px, 3.4vw, 17px); }
.fm-home-mark { translate: -50% -100%; display: grid; justify-items: center; }
.fm-home-mark img { width: clamp(14px, 3.6vw, 20px); height: auto; filter: drop-shadow(0 2px 3px #0008); }
.fm-label.home { top: 72%; left: auto; right: calc(100% + 4px); translate: 0 -50%; padding: 3px 9px 4px; border-radius: 999px; background: #07111d; color: var(--light); text-shadow: none; }

/* The bubbles: real buttons, at least 44px, the name and the distance from the village. */
.fm-pins { position: absolute; inset: 0; }
.fm-pin {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 3px 11px 4px;
  border: 2px solid #07111d;
  border-radius: 22px;
  background: #fff6e6;
  color: #07111d;
  font: 800 calc(13.5px * var(--ts-ui)) / 1.12 var(--text);
  white-space: nowrap;
  box-shadow: 0 3px 10px #0007;
  cursor: pointer;
  transition: scale 160ms var(--ease-out), background-color .2s, box-shadow .2s;
}
.fm-pin .fm-km { font-size: .86em; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.fm-pin.pick { background: var(--sun); }
.fm-pin .fm-tag {
  position: absolute;
  bottom: calc(100% + 3px);
  padding: 2px 9px 3px;
  border-radius: 999px;
  background: var(--heading);
  color: #2a0420;
  font-size: .82em;
  font-weight: 800;
  box-shadow: 0 2px 6px #0006;
}
.fm-pin[aria-expanded="true"] { z-index: 2; scale: 1.08; box-shadow: 0 0 0 3px #07111d, 0 0 0 6px var(--sun), 0 6px 16px #0009; }
.fm-pin:focus-visible { outline: none; z-index: 3; box-shadow: 0 0 0 3px #07111d, 0 0 0 6px var(--link), 0 6px 16px #0009; }
.fm-pin:active { scale: .96; }
@media (hover: hover) and (pointer: fine) { .fm-pin:hover { background: #ffe9c2; } .fm-pin.pick:hover { background: var(--sun-lit); } }
:root:is(.quiet, .paused) .fm-pin { transition: none; }

.foodmap figcaption { max-width: 36em; margin-top: 12px; font-size: calc(15px * var(--ts)); line-height: 1.45; opacity: .9; }

/* The card of the chosen restaurant: a copy of its list item (sheets.js initFoodMap). */
.fm-card { margin-top: 14px; padding: 14px 18px 8px; border: 2px solid var(--sun); border-radius: 20px; background: #07111d4d; }
.fm-card:empty { display: none; }
.fm-card h4 { margin-top: 0; }

/* Angel's list, verbatim, each item with its distance and a link for directions. */
.fm-list { margin-top: 12px; border-top: 1px solid #fff6e640; }
.fm-list > li { padding-block: 12px 4px; border-bottom: 1px solid #fff6e640; }
.fm-list h4, .fm-card h4 { margin: 0; color: var(--light); font-size: calc(20px * var(--ts)); font-weight: 800; }
.fm-list p, .fm-card p { margin-top: 4px; font-size: calc(17px * var(--ts)); line-height: 1.5; }
.fm-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; }
.fm-list .fm-meta, .fm-card .fm-meta { margin-top: 2px; font-size: calc(15px * var(--ts)); }
.fm-dist { opacity: .85; }
.fm-meta a { display: inline-block; padding-block: 10px; font-weight: 700; text-underline-offset: .25em; }
.fm-item.pick { position: relative; padding-inline-start: 14px; border-inline-start: 4px solid var(--sun); }
.fm-group { margin-top: 22px; color: var(--label); font-size: calc(18px * var(--ts)); font-weight: 800; line-height: 1.4; }
.part > .fm-close { max-width: 34em; margin-top: 18px; padding: 10px 16px 12px; border-radius: 16px; background: #fff6e614; font-weight: 600; }

/* Her note about The Brewery: a letter, line by line as she wrote it; the site's line about the code in
   place of the code, set apart (dashed, sun-orange) so it never reads as hers. */
.letter { max-width: 34em; margin-top: 14px; padding: 18px 22px 20px; border: 1.5px solid #fff6e659; border-radius: 22px; background: #fff6e612; font-size: calc(17px * var(--ts)); line-height: 1.55; }
.letter p { margin: 0; }
.letter .gift { margin-top: 8px; font-weight: 800; }
.letter .site-line { margin-block: 10px; padding: 8px 14px 9px; border: 2px dashed var(--price); border-radius: 14px; color: var(--price); font-weight: 700; }    /* user, 18.10.2026: turquoise (was orange) */
.letter .picks { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px 12px; }
.letter .picks li { padding: 5px 12px 6px; border-radius: 999px; background: #07111d47; font-weight: 600; }
/* Review 16.10.2026 (B1): a phone number never breaks across lines (in RTL its halves swapped places). */
a[href^="tel:"] { white-space: nowrap; unicode-bidi: isolate; }
/* Review 16.10.2026 (B2): a time and its "+-" (build.mjs keepApprox). */
.nobr { white-space: nowrap; }
.letter .links a { display: inline-block; max-width: 100%; min-height: 44px; padding-block: 8px; font-weight: 700; text-underline-offset: .2em; }    /* review 1.9: the label is the link */
.letter .sign { margin-top: 10px; font: var(--hand-weight) calc(24px * var(--ts)) / 1.2 var(--hand); font-synthesis: none; }

/* S44 (user, 15.10.2026): "How to register" always stands right above "Simple 😉, Send Angel a message"
   (build.mjs {@wa note=wa.simple}). A heading of the place's level in the headings' face, at a compact
   size; the #courses one (.part-head) is the part's own h3 and keeps that size. In a course's steps (h5)
   and the footer a smaller label. .big: the larger line where it stood alone before (night, events, #courses). */
.wa-how:not(.part-head) { margin: 0; font-size: calc(21px * var(--ts)); line-height: 1.25; text-wrap: balance; }
.wa-cta > .wa-how + .wa-note { margin-top: -2px; }
.wa-cta.big .wa-note { font: 800 calc(23px * var(--ts)) / 1.35 var(--text); }
/* User, 18.10.2026: "אנג׳ל זמינה להזמנה ב" and the WhatsApp logo at the end of the line; then no logo ("remove the icon at
   the end of the sentence"), the rule kept off. */
#night .wa-note.with-logo::after {
  content: ""; display: inline-block; inline-size: 1.25em; block-size: 1.25em; margin-inline-start: .2em; vertical-align: -.28em;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325D366' d='M12.05 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884Z'/%3E%3Cpath fill='%23fff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E");
}
.part .wa-cta.big { margin-top: 12px; }
.part > .wa-how.part-head + .wa-cta { margin-top: 10px; }
h5.wa-how { color: var(--label); font: 800 calc(16px * var(--ts)) / 1.3 var(--text); }
.foot .wa-how { font-size: calc(19px * var(--ts)); }
.stay .wa-cta { gap: 8px; }
@media (max-width: 719px) {
  .wa-how:not(.part-head) { font-size: calc(19px * var(--ts)); }
  .wa-cta.big .wa-note { font-size: calc(20px * var(--ts)); }
}


/* 18  S45 (15.10.2026) ------------------------------------------------------------------------- */
/* The user's emphasis, the words unchanged: strong.sky (--sky) for three sentences of the advanced courses;
   the recommended snorkel set (li.rec-line in #snorkel: the whole line in the price colour, "המומלץ" bold);
   on the shore's snorkel door the same line stands for the price, "המומלץ" bold in the pink of "recommended"
   on the board, shown on phones too; the bold line about the digital kit under "*subject to 2 students". */
/* User, 18.10.2026: "EVERY sentence in turquoise should be handwriting (if it is not turquoise, change it)":
   every highlighted sentence, the light-blue ones included, in turquoise handwriting. */
strong.sky, .hand-mint, .sheet li.sky-line, .sheet li.rec-line, .part.event .mint-line {
  color: var(--price); font-family: var(--hand); font-weight: var(--hand-weight); font-synthesis: none; text-shadow: 0 1px 2px #0006;
}
strong.sky, .hand-mint { font-size: 1.3em; line-height: 1.3; }
.sheet li.sky-line, .sheet li.rec-line, .part.event .mint-line { font-size: calc(24px * var(--ts)); line-height: 1.35; }
/* User, 18.10.2026: some highlighted words in turquoise handwriting (the courses' "every dive in the sea", the 1/4 ratio). */
.rec-line strong.rec { font-weight: 800; }
.doors .rec-line strong.rec { color: var(--heading); font-size: 1.1em; overflow-wrap: normal; }    /* never broken inside the word */
.doors .rec-line .price { font-weight: 800; }
.part .homework { margin-top: 4px; }
@media (max-width: 719px) {
  .doors .line.rec-line { display: block; max-width: none; font-size: calc(14px * var(--ts-ui)); line-height: 1.25; }
  .doors .rec-line strong.rec { font-size: 1em; }
}

/* 19  S47 (16.10.2026) ------------------------------------------------------------------------- */
/* The shore's doors (user): no prices; the intro door's name in the headings' pink, then its line (S48: turquoise);
   the snorkel door's set under its name, on phones too (it stood where the price was). */
.doors .door-name { color: var(--heading); font-weight: 800; }
/* S48 (user): "the first time in the water!" on a line of its own under the name, and the snorkel door's name, in turquoise. */
.doors .door-first { display: block; color: var(--teal); font-family: var(--hand); font-weight: var(--hand-weight); font-synthesis: none; font-size: 1.15em; }    /* user, 18.10.2026: a turquoise sentence, in handwriting */
.doors .door-teal { color: var(--teal); font-weight: 800; }
@media (max-width: 719px) {
  .doors .line.set-line { display: block; max-width: none; font-size: calc(14px * var(--ts-ui)); line-height: 1.25; }
}

/* The opening (user): easier to read with the photograph still bright. A soft, local shade only behind the
   card's text, an ellipse at its inline start (about 42% dark at the centre, nothing at its edges), so the
   sky, the sunrise and the palm keep their light; and a little more shadow round the lede and the cue. */
#dawn .card { isolation: isolate; }
#dawn .stage { overflow-x: clip; }    /* the shade past the card's edge never widens the page (a phone held sideways, quiet layout) */
#dawn .card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -16% -10%;
  inset-inline: -14% -4%;    /* reaching only a little past the text's end: the palm and the sun stay clear */
  background: radial-gradient(closest-side at var(--shade-x, 46%) 58%, #0a06046b 0%, #0a060452 38%, #0a060424 70%, #0a060400 100%);
  pointer-events: none;
}
:root[dir="rtl"] #dawn .card::before { --shade-x: 54%; }
#dawn .card .lede, #dawn .card .scroll-cue { text-shadow: var(--contour), 0 1px 3px #000e, 0 0 14px #000d, 0 0 32px #000a; }

/* #advanced on a phone (user): the board under one screen; smaller medals, gaps and padding. */
@media (max-width: 719px) {
  .board.adv { --m: clamp(44px, 12.5vw, 56px); gap: 12px clamp(6px, 2vw, 12px); padding: 14px 6px 16px; }
  .board.adv .md { --m: clamp(70px, 20vw, 84px); margin-bottom: 0; }
  .board.adv .badge { gap: 3px; }
  .board.adv .name { font-size: calc(clamp(10.5px, 2.8vw, 12.5px) * var(--ts-ui)); line-height: 1.15; }
  .board.adv .md .name { font-size: calc(clamp(13px, 3.4vw, 15px) * var(--ts-ui)); }
  .board.adv .badge b { font-size: calc(clamp(13.5px, 3.6vw, 16px) * var(--ts-ui)); }
  .board.adv .badge[aria-selected="true"] .medal { box-shadow: 0 0 0 3px var(--heading), 0 0 0 6px var(--sun), 0 0 20px 5px #ffb05c99, 0 6px 14px #0008, inset 0 -6px 14px #0005, inset 0 5px 10px #fff6; }
}

/* The Master Diver pearl (user): "MD" in bold gold inside it, centred; the name and price under the medal,
   as on every other badge. The pearl is larger to hold it; the gold is deep enough to read on the pearl's
   white, with a fine dark outline. */
.board .md .medal .pearl { display: grid; place-items: center; width: calc(var(--m) * .7); }
.board .md .medal .pearl::after { width: calc(var(--m) * .16); inset-block-start: -10%; inset-inline-end: -12%; }
.board .md-mark {
  position: relative;
  z-index: 1;
  font: 900 calc(var(--m) * .25) / 1 var(--text);
  letter-spacing: .02em;
  color: #c9900f;
  background: linear-gradient(180deg, #ffe07a 0%, #e8a91c 48%, #b67908 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(.6px, calc(var(--m) * .006)) #4a2c00;
  filter: drop-shadow(0 1px 1px #3a220099);
}


/* 20  S48 (16.10.2026) ------------------------------------------------------------------------- */
/* Facebook, Instagram, TikTok (build.mjs {{@social}}): one row of the three logos, each with its name under it, the
   same in the village and contact sheets and the footer; a target of at least 44px, in both directions. */
.social { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.social li { margin: 0; }
.social a.social-link {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  min-inline-size: 48px; min-block-size: 48px; padding: 4px; border-radius: 14px; justify-content: center;
  font-size: calc(14px * var(--ts-ui)); font-weight: 600; line-height: 1.2; text-decoration: none;
}
.social-logo { display: block; inline-size: 40px; block-size: 40px; filter: drop-shadow(0 2px 4px #0007); }
.social a.social-link:active .social-logo { transform: scale(.94); }
.foot .social { margin-top: 4px; }

/* The snorkel's recommended hours (user): the whole line in light blue, bold (it was orange). */


/* The 2-star course's "To register for the course" (user): its heading, the line and the button, clear of the rows above. */
.part.course > .wa-cta { margin-top: 22px; }

/* User, 19.10.2026: sweet dreams at night: Z's rising from "נפגש בחלומות…" to the WhatsApp logo, and a cloud by the
   logo once the first one gets there (film.js initDream). The Z's live in a fixed layer above the page. */
.dream-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.dream-z {
  position: absolute; left: 0; top: 0; opacity: 0;
  color: var(--sun); font: var(--hand-weight) calc(26px * var(--ts)) / 1 var(--hand); font-synthesis: none;
  text-shadow: 0 1px 2px #000a, 0 0 10px #0008; white-space: nowrap; direction: ltr;
}
.dream-cloud { display: none; }
html.js:not(.quiet) .dream-cloud {
  --tail: 50%;
  position: fixed; z-index: 61; left: 0; top: 0; display: block; margin: 0; padding: 10px 18px 11px;
  border: 2px solid #fff6e6e6; border-radius: 999px; background: #fffaf2; color: var(--night);
  font: var(--hand-weight) calc(18px * var(--ts)) / 1.2 var(--hand); font-synthesis: none; white-space: nowrap;
  box-shadow: 0 10px 26px #000a, inset 0 -4px 0 #e9ddcc;
  opacity: 0; scale: .6; transform-origin: var(--tail) 0; pointer-events: none;
  transition: opacity .35s linear, scale .55s cubic-bezier(.2, 1.6, .4, 1);
}
html.js:not(.quiet) .dream-cloud::before, html.js:not(.quiet) .dream-cloud::after {
  content: ""; position: absolute; border-radius: 50%; background: #fffaf2; border: 2px solid #fff6e6e6;
}
html.js:not(.quiet) .dream-cloud::before { width: 14px; height: 14px; top: -12px; left: calc(var(--tail) - 7px); }
html.js:not(.quiet) .dream-cloud::after { width: 8px; height: 8px; top: -24px; left: calc(var(--tail) - 4px); }
html.js:not(.quiet) .dream-cloud.on { opacity: 1; scale: 1; }
@media (max-width: 719px) {
  /* User, 19.10.2026: no WhatsApp box at night on a phone (the bar's logo is where the Z's go); the circles stay,
     right under the words, and the words are larger. */
  html.js:not(.quiet) #night .stay { padding: 0; border: 0; background: none; box-shadow: none; }
  html.js:not(.quiet) #night .lede { font-size: calc(19px * var(--ts)); line-height: 1.35; }
  html.js:not(.quiet) #night .card { top: calc(var(--safe-top) + 52px); }    /* room under the bar for the cloud */
}
/* User, 19.10.2026 ("in the website also, remove the card"): no WhatsApp card at night on any screen in the film; the
   bar's logo is the way to WhatsApp (the page without JavaScript and the quiet layout keep the card). On a wide
   screen the card had nothing else, so it goes; on a phone it only carries the two circles. */
html.js:not(.quiet) #night .stay .wa-cta { display: none; }
@media (min-width: 720px) { html.js:not(.quiet) #night .stay { display: none; } }

/* User, 19.10.2026: the advanced courses as a pyramid of cards, after the client's Master Diver flyer: Master Diver on
   top, two under it, three at the base; each card its name, a picture and the flyer's three lines with icons.
   A card opens the advanced courses sheet at its course. */
.pyr-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.pyramid { display: grid; gap: 10px; margin-top: 24px; max-width: 640px; }
.pyr-row { display: flex; justify-content: center; gap: 10px; }
.pyr {
  flex: 0 1 calc((100% - 20px) / 3); min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  padding: 8px 8px 10px; border: 1.5px solid #f59a3ccc; border-radius: 18px;
  background: #07111da6; backdrop-filter: blur(6px); color: var(--light); text-decoration: none;
  box-shadow: 0 8px 22px #0007; transition: transform 160ms var(--ease-out), border-color 160ms;
}
.pyr.md { flex-basis: calc((100% - 20px) / 2.4); border-color: #e9e4ffcc; box-shadow: 0 0 0 1px #ffffff33, 0 8px 26px #0008, 0 0 22px #cfc6ff33; }
.pyr:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pyr:hover { border-color: var(--sun-lit); transform: translateY(-2px); } }
.pyr:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.pyr-name { color: var(--heading); font: 900 calc(17px * var(--ts-ui)) / 1.1 var(--text); text-align: center; text-shadow: 0 1px 2px #000c; overflow-wrap: anywhere; }
.pyr.md .pyr-name { font-size: calc(19px * var(--ts-ui)); }
.pyr img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 11px; }
.stage[style*="--pyr-img"] .pyr img { block-size: var(--pyr-img); aspect-ratio: auto; }    /* film.js: lower where room is short */
.pyr ul { display: grid; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; }
.pyr li { display: flex; align-items: center; gap: 5px; font-size: calc(12.5px * var(--ts-ui)); font-weight: 650; line-height: 1.15; text-shadow: 0 1px 2px #000c; }
.pyr li svg { flex: none; inline-size: 18px; block-size: 18px; }
@media (max-width: 719px) {
  #learn .card .pyramid { gap: 7px; margin-top: 14px; }
  .pyr-row { gap: 7px; }
  .pyr { flex-basis: calc((100% - 14px) / 3); padding: 6px 6px 8px; gap: 4px; border-radius: 15px; }
  .pyr.md { flex-basis: calc((100% - 14px) / 2); }
  .pyr-name { font-size: calc(14.5px * var(--ts-ui)); }
  .pyr.md .pyr-name { font-size: calc(16px * var(--ts-ui)); }
  .pyr li { gap: 4px; font-size: calc(11px * var(--ts-ui)); }
  .pyr li svg { inline-size: 15px; block-size: 15px; }
  /* Not enough room (film.js .pyr-small): the pictures go first, the lines stay. */
  #learn .stage.pyr-small .pyr img { display: none; }
  #learn .stage.pyr-nolede .card .lede { display: none; }
}


/* 11  Sheet pages (19.10.2026, docs/ai-search/HOWTO.md §3) -------------------------------
   Each sheet is also a page of its own (rooms/, en/rooms/ ...; scripts/build.mjs sheetPage),
   rendered with no script: the sheet as it stands without JavaScript (section 9), under the bar
   and over the footer, with its title as the page's h1, drawn as the sheet's h2. html.page marks
   those pages; nothing here reaches the film. */

html.page .sheet > h1 {
  --o: .06em;
  margin-top: 18px;
  font: var(--hand-weight) calc(clamp(64px, 9.2vw, 132px) * var(--hand-scale)) / var(--title-leading) var(--hand); font-synthesis: none;
  text-wrap: balance;
}
html.page[lang="en"] .sheet > h1 { font-size: calc(clamp(50px, 6.9vw, 100px) * var(--hand-scale) * 1.12); }
html.page main { min-height: calc(100dvh - var(--bar-h)); background: var(--weave), var(--net); }
html.page .sheet { justify-content: center; }    /* a reading column in the middle of a wide screen, not at one edge */
/* An address with an anchor (dive/#dive-benefits, courses/#courses-combo) lands under the sticky bar, so a heading
   or section in the sheet keeps the bar's height clear above it. */
html.page .sheet [id] { scroll-margin-top: calc(var(--bar-h) + 16px); }

/* User, 19.10.2026: the advanced chapter's words in four short groups (turquoise handwriting, .chapter .lede), then
   two doors side by side: the recreational courses and the leadership courses. The pyramid above is parked. */
.chapter .lede.pitch p { margin: 0; }
.chapter .lede.pitch strong.num { font-family: var(--text); font-weight: 800; }    /* the handwriting's 4 reads as a letter */
.chapter .lede.pitch p + p { margin-top: .55em; }
.learn-doors { max-width: 34em; }
.learn-doors a { justify-content: center; text-align: center; }
.learn-doors .pill { justify-content: center; text-align: center; font-size: calc(19px * var(--ts-ui)); font-weight: 800; }
.learn-doors .pill { flex-wrap: wrap; column-gap: .3em; }    /* 22.10.2026: "דרגות" and "SSI PRO" on two lines when the door is narrow */
@media (max-width: 719px) {
  #learn .card .learn-doors { gap: 10px; }
  #learn .learn-doors a { min-height: 64px; }
  #learn .learn-doors .pill { font-size: calc(17px * var(--ts-ui)); }
  #learn .lede.pitch { font-size: calc(19px * var(--ts)); line-height: 1.3; }
}
/* User, 19.10.2026 (a drawing, "on the computer it looks dull"): on a wide screen the two doors stand one above the
   other beside the words (opposite them, level with their first lines), larger; the sun circle gives them its room. */
@media (min-width: 720px) {
  html.js:not(.quiet) #learn .stage .ring { display: none; }
  html.js:not(.quiet) #learn .card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 8vw, 160px); align-items: start;
    grid-template-areas: "when when" "title title" "words doors";
  }
  html.js:not(.quiet) #learn .card .when { grid-area: when; }
  html.js:not(.quiet) #learn .card h2 { grid-area: title; max-width: none; }
  html.js:not(.quiet) #learn .card .lede.pitch { grid-area: words; }
  html.js:not(.quiet) #learn .card .learn-doors {
    grid-area: doors; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr);
    inline-size: clamp(260px, 24vw, 380px); gap: 18px; margin-top: 28px;
  }
  html.js:not(.quiet) #learn .learn-doors a {
    min-height: clamp(84px, 11svh, 112px); justify-content: center; align-content: center; border-radius: 26px;
    border: 2px solid var(--sun); background: #07111db3; box-shadow: 0 10px 30px #0008, 0 0 0 4px #f59a3c22;
  }
  html.js:not(.quiet) #learn .learn-doors .pill { border: 0; background: none; padding: 0; font-size: calc(clamp(20px, 1.7vw, 26px) * var(--ts-ui)); }
  @media (hover: hover) and (pointer: fine) {
    html.js:not(.quiet) #learn .learn-doors a:hover { background: #0b2238d9; box-shadow: 0 12px 34px #0009, 0 0 0 6px #f59a3c44; transform: translateY(-2px); }
  }
}
@media (min-width: 720px) {
  html.js:not(.quiet) #learn .card .lede.pitch { font-size: calc(clamp(20px, min(1.8vw, 3.2svh), 28px) * var(--ts)); line-height: 1.32; }    /* larger, as drawn */
}
@media (min-width: 720px) {
  /* User, 19.10.2026 ("better, but move the buttons closer to the text"): the doors right beside the words. */
  html.js:not(.quiet) #learn .card { grid-template-columns: max-content auto; justify-content: start; column-gap: clamp(36px, 4vw, 72px); }
}

/* User, 19.10.2026 ("a flower of bubbles", a drawing): the advanced board as a flower: Master Diver in the middle
   (larger, a star by it), the six specialties round it on a ring, each on a straight stem to the middle (sheets.js
   ray); no prices on the board (each course gives its own). Positions are as drawn, the same in both languages.
   Dive Guide + Divemaster, the leadership course, under the flower. */
.board.adv.flower {
  --R: clamp(112px, 33vw, 168px); --m: clamp(58px, 16vw, 82px); --md: calc(var(--m) * 1.42); --bw: clamp(92px, 26vw, 140px);
  display: block; padding-block: 18px 22px;
}
.board.adv.flower .petals { --Ry: calc(var(--R) * 1.22); position: relative; width: 100%; height: calc(2 * var(--Ry) + var(--m) + 70px); }
.board.adv.flower .petals .badge {
  position: absolute; width: var(--bw); margin: 0;
  left: calc(50% + var(--x, 0px) - var(--bw) / 2);
  top: calc(var(--Ry) + var(--y, 0px));
}
.board.adv.flower .petals .md { width: calc(var(--bw) * 1.25); left: calc(50% - var(--bw) * .625); top: calc(var(--Ry) + var(--m) / 2 - var(--md) / 2); }
.board.adv.flower .petals .md .medal { width: var(--md); }
.board.adv.flower .nx { --y: calc(var(--Ry) * -1); }
.board.adv.flower .nav { --x: calc(var(--R) * .866); --y: calc(var(--Ry) * -.5); }
.board.adv.flower .night { --x: calc(var(--R) * .866); --y: calc(var(--Ry) * .5); }
.board.adv.flower .pb { --y: var(--Ry); }
.board.adv.flower .deep { --x: calc(var(--R) * -.866); --y: calc(var(--Ry) * .5); }
.board.adv.flower .sr { --x: calc(var(--R) * -.866); --y: calc(var(--Ry) * -.5); }
.board.adv.flower .badge b { display: none; }
.board.adv.flower .name { font-size: calc(clamp(11.5px, 3vw, 15px) * var(--ts-ui)); line-height: 1.15; }
.board.adv.flower .md .name { font-size: calc(clamp(13px, 3.4vw, 17px) * var(--ts-ui)); padding: 3px 10px 4px; border-radius: 12px; background: #0b2c48e6; box-shadow: 0 0 0 1px #fff6e622; }    /* the stem below runs under it */
.board.adv.flower .md::before {
  content: "★"; position: absolute; z-index: 3; inset-block-start: -4px; left: calc(50% - var(--md) / 2 - 6px);
  color: #ffd257; font-size: calc(var(--md) * .3); line-height: 1; text-shadow: 0 0 10px #ffd25799, 0 2px 4px #0009; pointer-events: none;
}
.board.adv.flower > .dm { --m: clamp(56px, 15vw, 76px); margin: 18px auto 0; width: var(--bw); padding-top: 18px; border-top: 1.5px dashed #fff6e655; width: min(100%, 260px); }
@media (min-width: 720px) {
  /* User, 19.10.2026 ("put the buttons here"): the doors level with the lower lines of the words. */
  html.js:not(.quiet) #learn .card .learn-doors { align-self: end; margin-top: 0; margin-bottom: 4px; }
}
/* User, 19.10.2026: "Master Diver" in gold, with a small star on it. */
.chapter .lede.pitch .gold {
  position: relative; display: inline-block; padding-inline-end: .5em;
  background: linear-gradient(180deg, #fff3b0 0%, #ffd257 38%, #e0a419 62%, #fff0a0 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #000a) drop-shadow(0 0 8px #ffd25755);
}
.chapter .lede.pitch .gold-star {
  position: absolute; inset-block-start: -.35em; inset-inline-end: -.1em; font: 400 .6em / 1 var(--text);
  -webkit-text-fill-color: #ffd257; color: #ffd257; filter: drop-shadow(0 0 4px #ffd257aa);
}

/* User, 19.10.2026: the advanced board as a calm list (replaces the flower): Master Diver a wide tile on top, the six
   specialties small tiles two by two, Dive Guide + Divemaster a wide tile below; a small medal beside each name, no
   lines and no glow; the chosen tile gets a sun border and a warm wash. */
.board.adv.calm { --m: 44px; display: block; justify-items: normal; padding: 14px; background: #07111d40; }
.board.adv.calm .petals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.board.adv.calm .petals > .badge { grid-area: auto; justify-self: stretch; }
.board.adv.calm .petals > .badge.md { grid-column: 1 / -1; }
.sheet .board.adv.calm .badge {
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; width: auto; margin: 0;
  padding: 10px 12px; border: 1.5px solid #fff6e62e; border-radius: 18px; background: #07111d66; text-align: start;
  transition: border-color .2s, background .2s;
}
.board.adv.calm .badge b { display: none; }
.board.adv.calm .medal { flex: none; border-width: 2.5px; box-shadow: 0 3px 8px #0006, inset 0 -4px 8px #0004, inset 0 3px 6px #fff5; }
.board.adv.calm .medal .icon { width: calc(var(--m) * .62); }
.board.adv.calm .name { font-size: calc(14px * var(--ts-ui)); line-height: 1.2; text-wrap: pretty; }
.board.adv.calm .name span[lang] { font-weight: 800; }
.board.adv.calm .md { --m: 60px; grid-column: 1 / -1; position: relative; padding: 12px 16px; border-color: #ffd25780; background: linear-gradient(90deg, #ffd2571c, #07111d66 70%); }
.board.adv.calm .md .name { font-size: calc(17px * var(--ts-ui)); }
.board.adv.calm .md::before {
  content: "★"; position: absolute; z-index: 3; inset-block-start: 4px; inset-inline-start: 12px;
  color: #ffd257; font-size: 18px; line-height: 1; text-shadow: 0 1px 3px #0009; pointer-events: none;
}
.board.adv.calm > .dm { --m: 48px; display: flex; margin-top: 14px; }
.board.adv.calm .badge[aria-selected="true"] { border-color: var(--sun); background: #f59a3c24; }
.board.adv.calm .badge[aria-selected="true"] .medal { scale: 1; box-shadow: 0 0 0 2.5px var(--sun), 0 3px 8px #0006, inset 0 -4px 8px #0004, inset 0 3px 6px #fff5; }
@media (hover: hover) and (pointer: fine) {
  .board.adv.calm .badge:hover { border-color: #f59a3c99; }
  .board.adv.calm .badge:hover .medal { scale: 1; }
}
@media (max-width: 359px) { .board.adv.calm .petals { gap: 8px; } .sheet .board.adv.calm .badge { gap: 8px; padding: 8px; } .board.adv.calm { --m: 38px; } }
.board.adv.calm .name { overflow-wrap: normal; word-break: normal; hyphens: none; }    /* whole words only ("Navigation" never split) */
@media (max-width: 419px) {
  /* A phone: in the six small tiles the medal stands over the name, so each name has the tile's whole width. */
  .sheet .board.adv.calm .petals > .badge:not(.md) { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 8px; text-align: center; }
  .board.adv.calm { --m: 40px; }
  .board.adv.calm .name { font-size: calc(13.5px * var(--ts-ui)); }
}

/* User, 19.10.2026 (a drawing): the advanced board as a wheel, smaller than before. Master Diver in the middle (its
   pearl with "MD"), the six specialties in six slices as icons only (names visually hidden, read out), an arrow from
   the middle that turns to the chosen slice (data-sel, set by sheets.js), the chosen course's name under the wheel,
   and Dive Guide + Divemaster as a wide tile below. Slices clockwise from the top: Nitrox, Navigation, Night,
   Perfect Buoyancy, Deep, Stress & Rescue. */
.board.adv.wheel { --W: min(290px, 76vw); display: block; justify-items: normal; max-width: 420px; padding: 16px 14px 14px; }
.board.adv.wheel .petals {
  --r: calc(var(--W) * .335);
  position: relative; width: var(--W); height: var(--W); margin: 0 auto; border: 3px solid #fff6e6b3; border-radius: 50%;
  background: repeating-conic-gradient(from 29deg, #fff6e680 0deg 2deg, #0000 2deg 60deg), radial-gradient(circle, #0b2c48 0 40%, #07111d99 75%);
  box-shadow: 0 10px 28px #0007, inset 0 0 0 1px #0006;
}
.sheet .board.adv.wheel .petals > .badge {
  --m: calc(var(--W) * .2);
  position: absolute; z-index: 1; width: var(--m); height: var(--m); margin: 0; padding: 0; gap: 0; border: 0; background: none;
  left: calc(50% + var(--x, 0px) - var(--m) / 2); top: calc(50% + var(--y, 0px) - var(--m) / 2);
}
.board.adv.wheel .petals > .badge .name, .board.adv.wheel .petals > .badge b {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.board.adv.wheel .nx { --y: calc(var(--r) * -1); }
.board.adv.wheel .nav { --x: calc(var(--r) * .866); --y: calc(var(--r) * -.5); }
.board.adv.wheel .night { --x: calc(var(--r) * .866); --y: calc(var(--r) * .5); }
.board.adv.wheel .pb { --y: var(--r); }
.board.adv.wheel .deep { --x: calc(var(--r) * -.866); --y: calc(var(--r) * .5); }
.board.adv.wheel .sr { --x: calc(var(--r) * -.866); --y: calc(var(--r) * -.5); }
.sheet .board.adv.wheel .petals > .md { --m: calc(var(--W) * .3); z-index: 3; }
.board.adv.wheel .medal { border-width: 2.5px; box-shadow: 0 3px 8px #0006, inset 0 -4px 8px #0004, inset 0 3px 6px #fff5; }
.board.adv.wheel .badge[aria-selected="true"] .medal { scale: 1.08; box-shadow: 0 0 0 3px var(--sun), 0 0 16px 2px #ffb05c88, 0 3px 8px #0006, inset 0 -4px 8px #0004, inset 0 3px 6px #fff5; }
.board.adv.wheel .md::before {    /* user, 19.10.2026: the star inside the MD pearl, over the letters */
  content: "★"; position: absolute; z-index: 4; left: 50%; top: calc(var(--m) * .2); translate: -50% 0;
  color: #ffc93a; font-size: calc(var(--m) * .17); line-height: 1; text-shadow: 0 1px 2px #8a5a00, 0 0 6px #fff8; pointer-events: none;
}
/* The arrow: from the middle pearl's edge out to the chosen slice; it turns with the choice. */
.board.adv.wheel .wheel-arrow {
  --a: 0deg;
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 16px; height: calc(var(--W) * .235);
  margin-left: -8px; margin-top: calc(var(--W) * -.235); transform-origin: 50% 100%; rotate: var(--a);
  transition: rotate .7s cubic-bezier(.3, 1.45, .5, 1), opacity .25s; pointer-events: none; opacity: 0;
}
.board.adv.wheel .wheel-arrow::before { content: ""; position: absolute; left: 6px; width: 4px; top: 10px; bottom: calc(var(--W) * .15); border-radius: 2px; background: var(--sun); box-shadow: 0 0 6px #0008; }
.board.adv.wheel .wheel-arrow::after { content: ""; position: absolute; left: 0; top: 0; border: 8px solid #0000; border-top: 0; border-bottom: 12px solid var(--sun); filter: drop-shadow(0 0 3px #0008); }
.board.adv.wheel:is([data-sel="nx"], [data-sel="nav"], [data-sel="night"], [data-sel="pb"], [data-sel="deep"], [data-sel="sr"]) .wheel-arrow { opacity: 1; }
.board.adv.wheel[data-sel="nav"] .wheel-arrow { --a: 60deg; }
.board.adv.wheel[data-sel="night"] .wheel-arrow { --a: 120deg; }
.board.adv.wheel[data-sel="pb"] .wheel-arrow { --a: 180deg; }
.board.adv.wheel[data-sel="deep"] .wheel-arrow { --a: 240deg; }
.board.adv.wheel[data-sel="sr"] .wheel-arrow { --a: 300deg; }
@media (prefers-reduced-motion: reduce) { .board.adv.wheel .wheel-arrow { transition: none; } }
.board.adv.wheel .wheel-caption { min-height: 1.3em; margin: 12px 0 0; text-align: center; color: var(--light); font-weight: 800; font-size: calc(16px * var(--ts-ui)); text-shadow: 0 1px 2px #000a; }
.sheet .board.adv.wheel > .dm {
  --m: 42px; flex-direction: row; justify-content: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 8px 12px;
  border: 1.5px solid #fff6e62e; border-radius: 18px; background: #07111d66; text-align: start;
}
.board.adv.wheel > .dm b { display: none; }
.board.adv.wheel > .dm .name { font-size: calc(14px * var(--ts-ui)); overflow-wrap: normal; }
.board.adv.wheel > .dm[aria-selected="true"] { border-color: var(--sun); background: #f59a3c24; }

/* User, 20.10.2026: Master Diver takes the crown (gold), and the leadership levels' sheet has the pearl by its title. */
.board .md .medal { --c1: #fff0a3; --c2: #d98a1f; }
.board.adv.wheel .md .medal .icon { width: calc(var(--m) * .5); translate: 0 8%; }
.board.adv.wheel .md::before { top: calc(var(--m) * .12); font-size: calc(var(--m) * .15); color: #fff6d0; text-shadow: 0 1px 2px #7a4a00, 0 0 6px #fff9; }
.lead-pearl { display: inline-grid; place-items: center; vertical-align: middle; margin-inline-end: .3em; }
.lead-pearl .pearl { width: .7em; }
.lead-pearl .pearl::after { width: .3em; }
/* User, 20.10.2026: "שירותי דלפק", a long button under the shore's title and doors (refresher, guided dives, rental). */
.card .desk-door { display: flex; justify-content: center; width: 100%; max-width: 38em; margin-top: 12px; min-height: 52px; font-size: calc(18px * var(--ts-ui)); font-weight: 800; border-color: #f59a3ccc; background: #07111d8c; backdrop-filter: blur(6px); }
@media (max-width: 719px) {
  #shore .card .desk-door { grid-column: 1 / -1; margin-top: 10px; min-height: 48px; }
}
/* User, 20.10.2026: the ibex's round photo at waking up twice as big. */
/* On a phone it has its own place: bottom left, beside the "rooms" button, above the day line. */
@media (max-width: 719px) {
  html.js:not(.quiet) #wake .stage .photodot.pin-wake { left: 20px !important; top: var(--pin-top, auto) !important; }
  html.js[dir="ltr"]:not(.quiet) #wake .stage .photodot.pin-wake { left: auto !important; right: 20px; }
}
/* User, 20.10.2026: "דרגת הזהב… Master Diver" on one line, a star at each end of the gold name. */
.chapter .lede.pitch .gold { padding-inline: .5em; }
.chapter .lede.pitch .gold-star.start { inset-inline-end: auto; inset-inline-start: -.1em; }
/* User, 20.10.2026: the waking-up ibex bigger on a wide screen too (film.js places it, or tries a size down). */
@media (min-width: 720px) { html.js:not(.quiet) #wake .stage .photodot.pin-wake { width: calc(var(--catd, 76px) * 1.7); } }
/* User, 20.10.2026 (task 5): on a wide screen too, the coffee is the big circle (where the ibex was, same size), and
   the ibex a small circle at the top on the title's side (where the coffee was). */
@media (min-width: 720px) {
  html.js:not(.quiet) #yard .stage { --yard-big: clamp(200px, min(var(--ring-w) * 1.3, 100svh - var(--ring-y) - 300px), 480px); }
  html.js:not(.quiet) #yard .stage .photodot.pin-narrow { width: var(--yard-big); left: var(--ring-x) !important; top: var(--ring-y) !important; border-width: 3px; }
  html.js[dir="ltr"]:not(.quiet) #yard .stage .photodot.pin-narrow { left: auto !important; right: var(--ring-x); }
  html.js:not(.quiet) #yard .stage .ring.big { --ring-d: clamp(150px, 11vw, 210px); inset-inline-end: auto; inset-inline-start: 46vw; top: calc(var(--ring-y) - 4svh); }
  html.js:not(.quiet) #yard .stage .ring.big figcaption { display: none; }    /* its name stays the video's label */
}
@media (min-width: 720px) {
  /* The 360 circle under the coffee, clear of it. */
  html.js:not(.quiet) #yard .stage .ring.second { top: calc(var(--ring-y) + var(--yard-big) + 18px); inset-inline-end: calc(var(--ring-x) + var(--yard-big) / 2 - var(--r2) / 2); }
}
/* User, 20.10.2026: the rooms sheet's kitchenette: its line, its photo and a bigger video circle. */
.part.kitchenette .kitchen-line { font-size: calc(19px * var(--ts)); font-weight: 700; }
.part.kitchenette .ring.aside { justify-content: center; }
.part.kitchenette .ring.aside .disc { width: min(62vw, 240px); }

/* User, 20.10.2026: "שירותי דלפק" in turquoise, with what it holds after it. */
.card .desk-door { border-color: #f59a3ccc; color: var(--light); flex-wrap: wrap; column-gap: 0; text-align: center; line-height: 1.25; }
.card .desk-door b { font-weight: 900; color: var(--price); }    /* user, 20.10.2026: the button orange, only its name turquoise */
.card .desk-door .desk-sub { font-weight: 600; }
.sheet li.bold-line { font-weight: 800; }

/* User, 20.10.2026: a cute snorkelling cat swims round "אל המים", in the open water above the title: across and back,
   turning at each end, bobbing, its hind legs kicking. Decoration; still with motion off; not in the quiet layout. */
.snorkel-cat { display: none; }
html.js:not(.quiet) #shore .stage .snorkel-cat {
  --sc: clamp(96px, 9vw, 150px);
  position: absolute; z-index: 1; left: 0; top: 0; display: block; width: var(--sc); height: var(--sc); pointer-events: none;
  top: var(--sc-top, 30svh);    /* film.js: the widest band of open water */
  animation: sc-swim 22s ease-in-out infinite;
}
html.js:not(.quiet) #shore .stage .snorkel-cat.out { display: none; }
.snorkel-cat .sc-bob { display: block; width: 100%; height: 100%; animation: sc-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 8px #0007); }
.snorkel-cat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.snorkel-cat .c-gear { opacity: 1; }
.snorkel-cat .c-tank { display: none; }
.snorkel-cat .c-chef { display: none; }
.snorkel-cat .c-rig { rotate: -10deg; translate: 2px -14px; }
.snorkel-cat .c-lean { rotate: 0deg; }
.snorkel-cat .c-fore.c-near { rotate: -55deg; animation: sc-paddle 1.1s ease-in-out infinite alternate; }
.snorkel-cat .c-fore.c-far { rotate: -35deg; animation: sc-paddle 1.1s ease-in-out -.55s infinite alternate; }
.snorkel-cat .c-hind.c-near { rotate: 64deg; animation: sc-kick .8s ease-in-out infinite alternate; }
.snorkel-cat .c-hind.c-far { rotate: 56deg; animation: sc-kick .8s ease-in-out -.4s infinite alternate; }
.snorkel-cat .c-tail { rotate: -34deg; }
.snorkel-cat .c-head { rotate: 8deg; }
@keyframes sc-swim {
  0% { translate: var(--sc-x0, 4vw) 0; scale: 1 1; }
  46% { translate: var(--sc-x1, 60vw) -6px; scale: 1 1; }
  50% { translate: var(--sc-x1, 60vw) -4px; scale: -1 1; }
  96% { translate: var(--sc-x0, 4vw) 3px; scale: -1 1; }
  100% { translate: var(--sc-x0, 4vw) 0; scale: 1 1; }
}
@keyframes sc-bob { 50% { translate: 0 -7px; rotate: -3deg; } }
@keyframes sc-kick { from { rotate: 48deg; } to { rotate: 76deg; } }
@keyframes sc-paddle { from { rotate: -70deg; } to { rotate: -40deg; } }
html.paused .snorkel-cat, html.paused .snorkel-cat * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .snorkel-cat, .snorkel-cat * { animation: none !important; } }
.card .desk-door .desk-sub { margin-inline-start: .3em; }

/* User, 21.10.2026: clock times in the sheets in the prices' turquoise (build.mjs sheetTimes). */
.sheet .time { color: var(--price); font-weight: 800; font-variant-numeric: tabular-nums; }
/* User, 21.10.2026: the combined course's name in gold on its door in "מתחת למים". */
.doors .gold-name {
  background: linear-gradient(180deg, #fff3b0 0%, #ffd257 38%, #e0a419 62%, #fff0a0 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #000a) drop-shadow(0 0 6px #ffd25744);
}
/* User, 21.10.2026: desk services opens with an invitation, three services with gold stars, and a shell that opens 5 s
   after the page does, the WhatsApp logo popping out of it (a link to the chat). */
.sheet .cert-lead { color: var(--price); font: var(--hand-weight) calc(26px * var(--ts)) / 1.3 var(--hand); font-synthesis: none; }
.sheet .gold-stars { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.sheet .gold-stars li { display: flex; align-items: center; gap: 10px; font-size: calc(20px * var(--ts)); font-weight: 800; }
.sheet .gold-stars li::before { content: "★"; color: #ffc93a; font-size: 1.15em; text-shadow: 0 1px 2px #7a4a00, 0 0 8px #ffd25788; }
.shell-wa { --k: 1.25; position: relative; flex: none; width: 120px; height: 110px; margin: 10px 0 calc(110px * (var(--k) - 1)); margin-inline-start: 0;    /* below the lines: on the start side, away from the course circle */ scale: var(--k); transform-origin: 100% 0; }
:root[dir="ltr"] .shell-wa { transform-origin: 0 0; }
/* User, 21.10.2026 (later): bigger and prominent, in the free room beside the opening lines; sheets.js finds the
   biggest size (--k) and height (--st) where it touches no line. Where there is no such room it stays below them. */
.sheet .cert-top { position: relative; }
.cert-top.side .shell-wa { position: absolute; top: var(--st, 0px); inset-inline-end: 6px;    /* the flapping lid stays inside the sheet */ margin: 0; transform-origin: 0 0; }
:root[dir="ltr"] .cert-top.side .shell-wa { transform-origin: 100% 0; }
.shell-wa > svg { position: absolute; inset: 0; width: 120px; height: 110px; overflow: visible; }
.shell-wa .clam-in { z-index: 0; }
.shell-wa .clam-top { z-index: 1; transform-origin: 50% 90%; filter: drop-shadow(0 3px 4px #0006); }
.shell-wa .wa-round { position: absolute; z-index: 2; left: 38px; bottom: 30px; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid #fff6e6cc; border-radius: 50%; background: #07111d; opacity: 0; scale: .3; }
.shell-wa .clam-bottom { z-index: 3; filter: drop-shadow(0 4px 5px #0006); }    /* in front of the logo: it sits in the clam */
.shell-wa .wa-round svg { position: static; width: 26px; height: 26px; filter: none; }
/* User, 21.10.2026 (night): 4 s after the page opens the top lifts and the logo pops out; then, every 2.6 s, the
   logo hops and the top lifts with it. Open and still under reduced motion, while the film is paused, or without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.paused) .sheet[open] .shell-wa .clam-top { animation: clam-lift .6s cubic-bezier(.3, 1.4, .5, 1) 4s both, clam-flap 2.6s ease-in-out 5s infinite; }
  html.js:not(.paused) .sheet[open] .shell-wa .wa-round { animation: clam-pop .8s cubic-bezier(.3, 1.6, .5, 1) 4.2s both, clam-hop 2.6s ease-in-out 5s infinite; }
}
@keyframes clam-lift { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -25px; rotate: -4deg; } }
@keyframes clam-flap { 0%, 62%, 100% { translate: 0 -25px; rotate: -4deg; } 84% { translate: 0 -35px; rotate: -7deg; } 94% { translate: 0 -23px; rotate: -3deg; } }
@keyframes clam-pop { 0% { translate: 0 8px; scale: .3; opacity: 0; } 60% { translate: 0 -28px; scale: 1.15; opacity: 1; } 100% { translate: 0 -18px; scale: 1; opacity: 1; } }
@keyframes clam-hop { 0%, 62%, 100% { translate: 0 -18px; scale: 1; opacity: 1; } 72% { translate: 0 -19px; scale: 1.1 .9; opacity: 1; } 84% { translate: 0 -40px; scale: .95 1.08; opacity: 1; } 94% { translate: 0 -16px; scale: 1.06 .95; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shell-wa .wa-round { translate: 0 -18px; scale: 1; opacity: 1; } .shell-wa .clam-top { translate: 0 -25px; rotate: -4deg; } }
html.js.paused .shell-wa .wa-round, html:not(.js) .shell-wa .wa-round { translate: 0 -18px; scale: 1; opacity: 1; }
html.js.paused .shell-wa .clam-top, html:not(.js) .shell-wa .clam-top { translate: 0 -25px; rotate: -4deg; }
/* User, 21.10.2026: Angel's vision at the top of the rooms sheet, a short story in four steps. */
.sheet .lead.vision p { margin: 0; }
.sheet .lead.vision p + p { margin-top: .7em; }
.sheet .lead.vision .hand-mint { display: block; font-size: calc(26px * var(--ts)); line-height: 1.3; }
/* User, 21.10.2026: the village's opening always in three lines; in Hebrew the handwriting shrinks with a narrow
   screen so the longest, "בין ההרים לים, למרגלות המגדלור,", stays on one line (English is too long for that). */
:root[lang="he"] .sheet .lead.open-lines { container-type: inline-size; }
:root[lang="he"] .sheet .lead.open-lines strong.sky { font-size: min(1.3em, 8cqi); }
/* User, 22.10.2026: "30 שעות כאלו עושות מהפך בנשמה" in gold handwriting (each line its own gradient), and more
   room before "שלושה סוגי חדרים". */
.sheet .lead.vision .hand-gold span {
  background: linear-gradient(180deg, #fff3b0 0%, #ffd257 38%, #e0a419 62%, #fff0a0 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #000a) drop-shadow(0 0 8px #ffd25744);
}
.sheet .lead.vision + .lead.rooms-kinds { margin-top: 2.2em; }
/* User, 23.10.2026: the "Master Diver SSI" row bigger. */
.chapter .lede.pitch .md-line { font-size: 1.28em; }