/* =========================================================
   קשרים – עם ללי באי הפנינים · main stylesheet (RTL)
   Art direction: "Lali's travel journal" – paper, hand lettering,
   tape, stamps and the program's own illustrations.
   (built by tools/build_css.py, which inlines the SVG data URIs)
   ========================================================= */

:root {
  --paper: #f6eedd;
  --paper-hi: #fffaf0;
  --paper-lo: #ecdfc4;
  --kraft: #d6b588;
  --ink: #16403c;
  --ink-2: #29332f;
  --ink-soft: #5a6662;
  --teal: #2aab9b;
  --teal-2: #1d8f84;
  --teal-deep: #12665f;
  --night: #0c2c31;
  --coral: #e0653e;
  --coral-ink: #b4472a;   /* coral for small text on paper (AA 4.5:1) */
  --coral-deep: #c44f2b;  /* behind white text (AA 4.5:1) */
  --rust: #b9532f;
  --rust-deep: #8e3b24;
  --peach: #f7ae84;
  --peach-hi: #fdd59b;
  --sand: #eda35f;
  --sand-hi: #f6c48e;
  --pink: #ee9285;
  --gold: #e3ad4c;
  --rope: #c98d42;
  --rope-dark: #5b3714;
  --marker: rgba(255, 210, 60, .6);

  --font-serif: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --font-body: "Rubik", "Arial Hebrew", "Segoe UI", sans-serif;
  --font-hand: "Gveret Levin", "Rubik", cursive;

  --hand-r: 14px 19px 15px 21px / 19px 14px 21px 15px;
  --shadow-paper: 0 1px 1px rgba(70, 45, 15, .12), 0 10px 20px -8px rgba(70, 45, 15, .34);
  --shadow-lift: 0 2px 3px rgba(70, 45, 15, .12), 0 26px 44px -16px rgba(70, 45, 15, .48);
  --container: 1180px;
  --header-h: 76px;

  --tex-paper: url(../img/paper/paper.webp);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.13 0 0 0 0 0.05 0 0 0 1.3 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.13 0 0 0 0 0.05 0 0 0 1.0 -0.47'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.96 0 0 0 0.95 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28L0 6.5 10 7.3 19 7.6 29 4.4 39 8.3 48 6.6 58 5.1 68 2.0 77 3.1 87 6.2 97 8.6 106 6.0 116 6.4 126 7.7 135 4.8 145 7.0 155 10.8 164 13.8 174 11.8 184 10.8 193 12.1 203 7.6 213 6.7 222 5.6 232 5.8 242 6.8 251 6.0 261 4.2 271 6.5 280 6.5 290 8.1 300 7.2 309 12.0 319 13.6 329 8.9 338 9.4 348 12.5 358 15.7 367 15.5 377 16.4 387 15.0 396 16.0 406 14.5 416 16.3 425 16.4 435 17.0 445 15.6 454 14.2 464 16.0 474 16.0 483 15.8 493 19.3 503 20.0 512 17.3 522 15.3 532 13.8 541 17.2 551 20.4 561 22.1 570 21.6 580 18.9 590 19.6 599 21.8 609 19.3 619 17.9 628 16.9 638 19.3 648 22.4 657 21.8 667 22.8 677 20.9 686 22.6 696 26.0 706 24.9 715 23.1 725 20.4 734 21.1 744 19.9 754 20.1 763 16.9 773 15.8 783 13.6 792 16.5 802 15.1 812 12.8 821 10.3 831 11.9 841 11.4 850 17.6 860 16.2 870 19.6 879 18.5 889 18.5 899 16.2 908 17.3 918 17.0 928 18.3 937 20.5 947 15.4 957 14.8 966 14.2 976 12.3 986 15.8 995 13.5 1005 9.5 1015 10.5 1024 11.3 1034 9.6 1044 10.0 1053 9.3 1063 7.7 1073 8.1 1082 7.8 1092 9.7 1102 8.8 1111 6.3 1121 5.4 1131 6.0 1140 6.1 1150 9.3 1160 9.3 1169 7.9 1179 7.7 1189 9.7 1198 12.9 1208 11.5 1218 10.2 1227 10.3 1237 8.8 1247 7.3 1256 7.4 1266 8.2 1276 3.8 1285 11.3 1295 13.7 1305 10.9 1314 6.1 1324 3.8 1334 7.7 1343 7.3 1353 7.7 1363 9.7 1372 11.3 1382 14.1 1392 13.5 1401 18.0 1411 17.9 1421 18.8 1430 17.7 1440 20.2L1440 28Z'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 24.4 10 22.4 19 23.9 29 21.0 39 19.2 48 22.5 58 19.2 68 18.4 77 17.9 87 17.8 97 19.7 106 19.9 116 16.2 126 20.2 135 21.4 145 19.4 155 20.4 164 19.1 174 22.1 184 21.2 193 18.0 203 14.9 213 13.0 222 14.6 232 15.4 242 11.0 251 10.4 261 10.1 271 10.8 280 8.0 290 5.3 300 8.0 309 6.9 319 9.3 329 12.7 338 18.0 348 14.7 358 10.7 367 11.1 377 12.2 387 16.0 396 14.9 406 14.6 416 15.6 425 19.1 435 20.9 445 19.3 454 19.0 464 20.0 474 22.4 483 19.3 493 17.4 503 20.5 512 23.1 522 25.5 532 23.3 541 23.5 551 24.9 561 23.6 570 26.0 580 24.6 590 23.8 599 19.2 609 17.5 619 15.2 628 13.8 638 11.1 648 13.3 657 13.8 667 13.1 677 13.9 686 15.4 696 19.9 706 18.1 715 16.7 725 16.7 734 19.3 744 21.1 754 20.0 763 19.4 773 18.1 783 14.4 792 18.9 802 20.9 812 16.2 821 19.9 831 15.9 841 14.7 850 15.6 860 16.6 870 15.0 879 13.6 889 14.5 899 11.5 908 9.5 918 9.0 928 7.1 937 7.1 947 9.9 957 14.9 966 12.0 976 11.4 986 8.4 995 8.5 1005 10.1 1015 9.1 1024 9.4 1034 10.8 1044 6.5 1053 2.0 1063 4.0 1073 3.3 1082 4.4 1092 2.6 1102 3.4 1111 4.2 1121 7.3 1131 5.0 1140 9.0 1150 14.1 1160 15.8 1169 14.0 1179 13.6 1189 17.7 1198 21.6 1208 20.1 1218 19.5 1227 16.4 1237 20.0 1247 17.9 1256 16.5 1266 16.4 1276 16.7 1285 10.5 1295 13.9 1305 12.3 1314 17.8 1324 18.0 1334 18.6 1343 20.8 1353 20.6 1363 21.3 1372 20.1 1382 18.5 1392 17.4 1401 17.7 1411 17.6 1421 23.1 1430 23.9 1440 24.0L1440 0Z'/%3E%3C/svg%3E");
  --d-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24.4 3.8C24.8 5.4 25.2 10.6 26.9 13.0C28.7 15.4 32.0 17.6 34.8 18.4C37.6 19.2 43.3 16.8 43.6 17.9C43.9 19.0 38.3 22.8 36.6 25.2C34.9 27.6 33.4 29.5 33.4 32.3C33.5 35.0 37.7 41.0 36.8 41.9C35.9 42.7 30.8 38.1 28.0 37.1C25.1 36.2 22.5 35.2 19.8 36.1C17.1 37.0 12.6 43.1 11.7 42.5C10.8 41.9 14.2 35.3 14.2 32.3C14.2 29.3 13.6 26.8 11.8 24.6C10.0 22.4 3.1 20.0 3.6 18.8C4.0 17.7 11.5 18.5 14.3 17.6C17.0 16.7 18.5 15.6 20.2 13.3C21.9 11.1 23.7 5.6 24.4 4.1'/%3E%3C/g%3E%3C/svg%3E");
  --d-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 90'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.4 4.1C21.9 5.9 20.2 10.9 19.4 14.7C18.6 18.4 18.1 22.8 17.4 26.7C16.7 30.7 15.6 34.5 15.2 38.3C14.8 42.1 15.0 46.0 15.1 49.5C15.2 53.0 15.2 55.9 15.7 59.5C16.2 63.0 17.4 67.0 18.2 70.8C19.0 74.6 20.0 80.4 20.4 82.3'/%3E%3Cpath d='M20.3 82.4C19.6 81.6 17.4 79.2 16.0 77.8C14.6 76.4 13.2 75.1 11.8 73.8C10.4 72.5 8.4 70.7 7.7 70.0'/%3E%3Cpath d='M20.4 82.3C20.9 81.5 22.6 79.0 23.8 77.4C24.9 75.9 26.1 74.5 27.2 73.1C28.4 71.7 30.1 69.7 30.7 69.1'/%3E%3C/g%3E%3C/svg%3E");
  --d-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.7 6.3C19.1 6.4 23.5 6.3 25.8 7.2C28.2 8.1 30.2 9.8 31.7 11.8C33.2 13.7 34.7 16.4 35.0 18.9C35.2 21.5 34.5 24.8 33.2 27.0C31.9 29.3 29.6 31.2 27.2 32.3C24.8 33.5 21.2 33.9 18.6 33.8C16.0 33.7 13.4 33.1 11.4 31.6C9.4 30.1 7.6 27.2 6.5 24.8C5.4 22.5 4.3 19.6 4.6 17.2C5.0 14.9 6.4 12.7 8.4 10.9C10.4 9.1 15.2 7.0 16.5 6.3'/%3E%3Cpath d='M20.2 11.8C20.3 12.7 20.4 15.2 20.4 17.1C20.5 19.0 20.6 21.1 20.6 23.0C20.6 24.8 20.3 27.3 20.3 28.2'/%3E%3Cpath d='M12.1 20.7C12.9 20.6 15.5 20.4 17.2 20.3C18.9 20.1 20.5 19.8 22.3 19.6C24.1 19.5 27.1 19.4 28.0 19.4'/%3E%3C/g%3E%3C/svg%3E");
  --d-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 14.3C7.7 13.9 16.0 12.3 21.7 11.7C27.3 11.1 32.9 11.0 38.6 10.8C44.3 10.5 50.2 10.2 55.9 10.1C61.6 10.0 67.1 10.1 73.0 10.0C78.9 9.8 85.3 9.6 91.3 9.3C97.3 8.9 103.3 8.2 109.2 7.9C115.1 7.7 120.8 7.7 126.7 7.7C132.5 7.7 138.6 7.5 144.3 7.8C150.0 8.0 155.2 8.9 160.8 9.2C166.4 9.6 172.1 9.6 177.9 9.8C183.7 9.9 192.6 10.1 195.5 10.2'/%3E%3Cpath d='M39.2 18.6C42.2 18.5 51.3 18.6 57.2 18.3C63.0 18.0 68.8 17.3 74.5 16.9C80.3 16.5 86.1 16.2 91.7 15.9C97.3 15.5 102.7 14.8 108.0 14.7C113.3 14.7 118.1 15.3 123.3 15.5C128.4 15.7 133.9 15.8 139.0 16.0C144.2 16.2 149.0 16.6 154.2 16.8C159.3 16.9 167.3 16.7 170.0 16.7'/%3E%3C/g%3E%3C/svg%3E");
  --d-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 12.3C5.2 13.0 9.4 16.4 12.1 16.7C14.9 17.1 17.5 15.8 20.2 14.6C23.0 13.3 25.9 10.4 28.5 9.2C31.1 7.9 33.4 6.8 36.0 7.2C38.5 7.7 41.2 10.5 43.8 12.1C46.4 13.6 49.0 16.1 51.7 16.6C54.3 17.1 56.9 16.3 59.6 15.1C62.4 13.9 65.5 10.6 68.3 9.3C71.0 8.0 73.6 6.7 76.3 7.1C79.0 7.4 81.7 10.1 84.3 11.7C87.0 13.2 89.6 15.8 92.1 16.5C94.7 17.2 97.0 16.8 99.6 15.6C102.2 14.4 105.0 10.9 107.7 9.5C110.4 8.1 113.0 6.8 115.8 7.0C118.5 7.3 121.3 9.4 124.1 11.0C126.9 12.6 129.8 15.7 132.5 16.6C135.2 17.4 137.6 17.0 140.2 15.9C142.8 14.8 145.5 11.5 148.1 10.0C150.7 8.4 153.1 6.8 155.7 6.8C158.3 6.9 160.8 8.9 163.5 10.5C166.2 12.1 169.2 15.5 172.0 16.4C174.7 17.4 177.3 17.2 180.0 16.2C182.8 15.2 185.7 12.2 188.4 10.6C191.2 9.0 195.0 7.3 196.4 6.6'/%3E%3C/g%3E%3C/svg%3E");
  --d-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.3 1.9C20.4 4.0 20.2 12.5 20.8 15.0C21.3 17.4 22.6 15.8 23.4 16.5C24.2 17.2 23.2 18.5 25.6 19.1C28.0 19.6 37.9 19.5 37.8 19.8C37.8 20.1 27.8 20.4 25.3 20.9C22.7 21.4 23.5 22.1 22.8 22.8C22.1 23.5 21.3 22.8 20.8 25.3C20.3 27.8 20.1 37.8 19.9 37.8C19.7 37.8 19.8 27.7 19.4 25.2C18.9 22.8 17.9 23.5 17.1 22.8C16.3 22.1 17.0 21.5 14.5 21.0C12.0 20.5 2.4 20.2 2.3 19.9C2.3 19.5 12.0 19.6 14.4 19.0C16.8 18.5 15.9 17.2 16.8 16.5C17.6 15.9 19.0 17.5 19.4 15.0C19.9 12.6 19.6 4.1 19.6 2.0'/%3E%3C/g%3E%3C/svg%3E");
  --d-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 84'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M110.4 72.8C109.8 71.0 108.3 65.4 106.9 62.1C105.5 58.8 103.7 55.8 102.0 52.9C100.3 50.0 98.5 47.2 96.6 44.7C94.8 42.1 93.0 39.7 90.8 37.8C88.6 35.8 86.1 34.4 83.5 32.9C80.9 31.5 78.0 30.2 75.1 28.9C72.3 27.7 69.5 26.4 66.2 25.4C62.9 24.4 59.4 23.8 55.5 23.0C51.6 22.3 47.2 21.2 42.9 20.8C38.7 20.3 34.5 20.2 29.9 20.4C25.2 20.6 17.6 21.7 15.2 22.0'/%3E%3Cpath d='M15.4 21.7C16.0 21.2 17.8 19.5 19.0 18.5C20.2 17.6 21.4 17.0 22.5 16.0C23.6 14.9 24.5 13.6 25.7 12.4C27.0 11.3 29.1 9.5 29.8 8.9'/%3E%3Cpath d='M15.2 22.1C15.8 22.6 17.6 23.9 18.8 24.9C20.0 25.9 21.2 27.0 22.4 28.1C23.5 29.3 24.6 30.7 25.6 31.9C26.6 33.1 28.1 34.8 28.6 35.3'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); scrollbar-gutter: stable; } /* the scrollbar's place stays reserved, so a dialog doesn't shift the page sideways */
[tabindex="-1"]:focus { outline: none; } /* sections that a link moves the keyboard focus to */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height: 1.72;
  color: var(--ink-2);
  background: var(--paper) var(--tex-paper) 0 0 / 640px 640px repeat;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; display: block; }
main > section, .site-footer { overflow-x: clip; }
img { height: auto; }
a { color: var(--teal-deep); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 800; line-height: 1.12; margin: 0 0 .45em; color: var(--ink); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px dashed var(--coral); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--marker); color: var(--ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type: printed serif + handwriting ---------- */
.h2 { font-size: clamp(2.1rem, 1.45rem + 2.7vw, 3.7rem); font-weight: 900; letter-spacing: -.012em; line-height: 1.06; }
.h2--light { color: var(--paper-hi); }
.hand { position: relative; display: inline-block; font-family: var(--font-hand); font-weight: 400; color: var(--coral); font-size: 1.12em; line-height: .95; letter-spacing: 0; transform: rotate(-2.2deg); }
.hand--light { color: var(--peach-hi); }
.hand--teal { color: var(--teal-2); }
.scribble { position: absolute; inset-inline: -3%; bottom: -.22em; width: 106%; height: .34em; color: var(--coral); overflow: visible; pointer-events: none; }
.scribble { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1) .35s; }
.is-in .scribble, .no-js .scribble { stroke-dashoffset: 0; }
.note {
  display: inline-flex; align-items: flex-end; gap: .3em;
  font-family: var(--font-hand); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.7rem); line-height: 1.1;
  color: var(--coral-ink); margin: 0 0 .55rem; transform: rotate(-2.5deg); transform-origin: 100% 50%;
}
.note::after { content: ""; width: .9em; height: 1.5em; margin-bottom: -.7em; background: currentColor; -webkit-mask: var(--d-arrow-down) center / contain no-repeat; mask: var(--d-arrow-down) center / contain no-repeat; transform: rotate(18deg); }
.note--light { color: var(--peach-hi); }
.note--plain::after { display: none; }
.lead { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.15rem, 1.02rem + .45vw, 1.38rem); line-height: 1.6; color: #39443f; max-width: 48ch; }
.lead--light { color: rgba(255, 250, 240, .86); }
b, strong { font-weight: 600; }

/* ---------- Buttons: ink-outlined, printed-sticker shadow ---------- */
.btn {
  --bg: var(--teal-deep); --fg: #fffaf0; --edge: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--bg); color: var(--fg); text-decoration: none;
  border: 2px solid var(--edge); border-radius: var(--hand-r);
  font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; line-height: 1.2;
  padding: .72em 1.45em; box-shadow: 3px 4px 0 var(--edge);
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 var(--edge); }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--edge); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn--coral { --bg: var(--coral-deep); }
.btn--peach { --bg: var(--peach-hi); --fg: var(--ink); }
.btn--dark-edge { --edge: #061c1f; }
.btn--lg { font-size: 1.14rem; padding: .8em 1.7em; }
.btn--sm { font-size: .95rem; padding: .5em 1.05em; box-shadow: 2px 3px 0 var(--edge); }
.btn svg { width: 1.2em; height: 1.2em; }
.link-hand { display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; color: var(--ink); text-decoration: none; padding: .25em .1em; }
.link-hand::after { content: ""; width: 1.9em; height: 1.2em; background: var(--coral); -webkit-mask: var(--d-arrow) center / contain no-repeat; mask: var(--d-arrow) center / contain no-repeat; transition: transform .3s; }
.link-hand:hover { color: var(--coral); }
.link-hand:hover::after { transform: translateX(-5px) rotate(-6deg); }

/* ---------- Journal pieces: tape, paper, stickers, bubbles ---------- */
.tape { position: relative; }
.tape::before {
  content: ""; position: absolute; z-index: 4; top: -14px; left: 50%; width: clamp(84px, 24%, 132px); height: 28px;
  translate: -50% 0; rotate: var(--tape-r, -2.5deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .06)), var(--tape-c, rgba(243, 172, 128, .66));
  clip-path: polygon(0 12%, 3% 0, 7% 14%, 10% 2%, 14% 10%, 86% 6%, 90% 0, 94% 12%, 97% 2%, 100% 10%, 100% 88%, 97% 100%, 93% 88%, 89% 98%, 85% 90%, 15% 94%, 11% 100%, 7% 88%, 3% 98%, 0 90%);
}
.tape--teal { --tape-c: rgba(120, 200, 186, .62); }
.tape--yellow { --tape-c: rgba(250, 214, 120, .7); }
.tape--corner::before { top: -8px; left: auto; inset-inline-start: -26px; width: 96px; translate: none; rotate: 38deg; }
.sticker { filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .25)) drop-shadow(0 8px 10px rgba(60, 40, 10, .22)); }

.bubble {
  position: absolute; z-index: 5; max-width: 290px;
  background: #fffdf7; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 24px 30px 22px 28px / 26px 22px 30px 24px;
  box-shadow: 3px 4px 0 rgba(22, 64, 60, .16);
  font-family: var(--font-hand); font-size: 1.32rem; line-height: 1.22;
  padding: 12px 18px 13px;
}
.bubble::after { /* the tail: a square with two inked sides, turned to point at Lali */
  content: ""; position: absolute; width: 18px; height: 18px; background: inherit;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0 0 4px 0;
  bottom: -10px; left: var(--tail-x, 30px); transform: rotate(45deg);
}
.bubble--tail-left::after { left: -10px; bottom: var(--tail-y, 18px); transform: rotate(135deg); }
.bubble--tail-right::after { left: auto; right: -10px; bottom: var(--tail-y, 18px); transform: rotate(-45deg); }
.bubble--tail-up::after { bottom: auto; top: -10px; left: calc(50% - 9px); transform: rotate(-135deg); }
.bubble small { display: block; margin-top: 2px; font-size: .9em; color: var(--coral-ink); }
.bubble b { font-weight: 400; color: var(--coral-ink); }

/* ---------- Loader: the rope ties itself into a knot ---------- */
.loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--paper) var(--tex-paper) 0 0 / 640px; transition: opacity .7s ease, visibility .7s; }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 4px; }
.loader__lali { width: 92px; height: 92px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; object-position: 32% 18%; background: #d4ece2; border: 3px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink); animation: bob 1.8s ease-in-out infinite; }
.loader__knot { width: min(300px, 72vw); height: auto; overflow: visible; }
.k-out, .k-rope, .k-twist, .k-shine { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-out { stroke: var(--rope-dark); stroke-width: 15; }
.k-rope { stroke: var(--rope); stroke-width: 10; }
.k-twist { stroke: #8d5c27; stroke-width: 10; stroke-dasharray: 2.6 4.4; stroke-linecap: butt; }
.k-shine { stroke: #f3c985; stroke-width: 2; opacity: .75; transform: translate(-.8px, -1.8px); }
.k-patch .k-out, .k-patch .k-rope, .k-patch .k-shine { stroke-linecap: butt; }
.k-draw { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: knotDraw 1.35s linear .1s forwards; }
.k-patch { opacity: 0; animation: kShow .01s linear forwards; animation-delay: calc(.1s + var(--at) * 1.35s); }
.loader__tie { transform-origin: 50% 45%; animation: tighten 1.4s ease-in-out 1.6s infinite; }
.loader__text { font-family: var(--font-hand); font-size: 1.6rem; color: var(--ink); margin: 6px 0 0; }
@keyframes knotDraw { to { stroke-dashoffset: 0; } }
@keyframes kShow { to { opacity: 1; } }
@keyframes tighten { 0%, 100% { transform: scale(1); } 45% { transform: scale(.955, .97); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }

/* ---------- Header: a torn strip of paper ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; transition: transform .4s; }
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -16px; z-index: -1; opacity: 0; transition: opacity .4s;
  background: var(--paper-hi) var(--tex-paper) 0 0 / 640px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat, var(--tear-bottom) bottom / 100% 16px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat, var(--tear-bottom) bottom / 100% 16px no-repeat;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__inner { width: min(100% - 32px, 1320px); margin-inline: auto; height: var(--header-h); display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img { width: 76px; filter: drop-shadow(0 4px 6px rgba(80, 40, 10, .2)); transition: transform .4s; transform-origin: 50% 0; }
.brand:hover img { transform: rotate(-5deg); }
.brand__text { display: grid; line-height: 1.05; }
.brand__text b { font-family: var(--font-serif); font-weight: 900; font-size: 1.3rem; }
.brand__text small { font-family: var(--font-hand); font-size: 1.05rem; color: var(--coral); }
.site-nav { display: flex; gap: 4px; margin-inline-start: auto; }
.site-nav a { position: relative; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 1rem; padding: .35em .7em; text-shadow: 0 0 8px rgba(255, 250, 240, .9), 0 0 2px rgba(255, 250, 240, .9); }
.site-nav a::after { content: ""; position: absolute; inset-inline: .5em; bottom: .05em; height: 8px; background: var(--coral); -webkit-mask: var(--d-underline) center / 100% 100% no-repeat; mask: var(--d-underline) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.5, 0, .2, 1); }
.site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.sound-toggle { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-hi); color: var(--ink); display: grid; place-items: center; box-shadow: 2px 3px 0 var(--ink); transition: transform .2s, box-shadow .2s, background-color .2s; }
.sound-toggle:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.sound-toggle svg { width: 22px; height: 22px; }
.sound-toggle .i-on { display: none; }
.sound-toggle[aria-pressed="true"] .i-on { display: block; }
.sound-toggle[aria-pressed="true"] .i-off { display: none; }
.sound-toggle[aria-pressed="true"] { background: var(--teal); color: #fff; }
/* the order link is a boarding ticket */
.ticket { position: relative; display: inline-flex; align-items: center; padding: .62em 1.3em .62em 2.2em; color: #fffaf0; background: var(--coral-deep); font-weight: 600; font-size: .98rem; line-height: 1.1; text-decoration: none; border-radius: 5px;
  -webkit-mask: radial-gradient(circle 8px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle 8px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.5), background-color .2s; }
.ticket::after { content: ""; position: absolute; inset-block: 7px; inset-inline-end: 1.35em; border-inline-start: 2px dashed rgba(255, 250, 240, .7); }
.ticket::before { content: ""; position: absolute; inset-inline-end: .42em; top: 50%; width: .62em; height: .62em; translate: 0 -50%; background: #fffaf0; -webkit-mask: var(--d-star) center / contain no-repeat; mask: var(--d-star) center / contain no-repeat; }
.ticket:hover { transform: rotate(-3deg) scale(1.04); background: var(--rust); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-hi); position: relative; box-shadow: 2px 3px 0 var(--ink); }
.menu-toggle span { position: absolute; inset-inline: 10px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.menu-toggle span:nth-child(1) { top: 12px; } .menu-toggle span:nth-child(2) { top: 19px; width: 60%; } .menu-toggle span:nth-child(3) { top: 26px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: calc(var(--header-h) + 8px) 14px auto 14px; background: var(--paper-hi) var(--tex-paper) 0 0 / 640px; border-radius: 4px; box-shadow: var(--shadow-lift); padding: 22px 20px 18px; display: grid; gap: 2px; rotate: -.6deg; }
.mobile-menu::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; translate: -50% 0; rotate: 2deg; background: rgba(120, 200, 186, .62); clip-path: polygon(0 12%, 4% 0, 8% 14%, 92% 4%, 96% 14%, 100% 6%, 100% 92%, 96% 100%, 92% 88%, 8% 96%, 4% 86%, 0 98%); }
.mobile-menu a:not(.btn) { padding: 10px 12px; text-decoration: none; font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--ink); border-bottom: 1px dashed rgba(22, 64, 60, .2); }
.mobile-menu a:not(.btn):hover { color: var(--coral); }
.mobile-menu .btn { margin-top: 14px; }

/* =========================================================
   HERO – the beach, painted and torn out of the journal
   ========================================================= */
.hero {
  position: relative; min-height: max(100svh, 740px); overflow: hidden; isolation: isolate; display: grid;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 27px) no-repeat, var(--tear-bottom) bottom / 100% 28px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 27px) no-repeat, var(--tear-bottom) bottom / 100% 28px no-repeat;
}
.hero__sky { position: absolute; inset: 0; z-index: -5; background: var(--grain-soft) 0 0 / 220px, linear-gradient(180deg, #22ac9a 0%, #5ebfa7 24%, #a7d7be 48%, #dbebd1 66%, #f3efd9 79%); }
.hero__sun { position: absolute; z-index: -4; width: 60vmax; height: 60vmax; inset-inline-end: -14vmax; top: -20vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 196, .85) 0%, rgba(255, 224, 168, .3) 36%, transparent 66%); }
.hero__clouds { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.cloud { position: absolute; color: #fffdf8; }
.cloud--1 { width: 360px; height: 148px; top: 50%; inset-inline-start: -5%; animation: drift 70s linear infinite; }
.cloud--2 { width: 250px; height: 102px; top: 17%; inset-inline-start: 40%; opacity: .8; animation: drift 90s linear infinite reverse; }
.cloud--3 { width: 430px; height: 176px; top: 57%; inset-inline-end: -7%; animation: drift 80s linear infinite; }
.cloud--4 { width: 190px; height: 78px; top: 31%; inset-inline-end: 26%; opacity: .65; animation: drift 110s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } 50% { transform: translateX(6vw); } to { transform: translateX(0); } }
.hero__sea { position: absolute; inset: auto 0 0 0; height: 22%; z-index: -2; }
.hero__sea::before { content: ""; position: absolute; inset: 22% 0 0; background: var(--grain-light) 0 0 / 220px, linear-gradient(180deg, #2aa596, #1d7d76 60%, #3f5f5f); }
.hero__ship { position: absolute; width: clamp(92px, 8vw, 140px); left: 37%; top: -30%; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .12)); }
.wave { position: absolute; left: 0; width: 200%; max-width: none; height: 70px; fill: currentColor; animation: waveX 22s linear infinite; }
.wave--1 { top: 0; color: #9cd5c0; animation-duration: 30s; }
.wave--2 { top: 18%; color: #3cbcab; height: 80px; animation-duration: 22s; animation-direction: reverse; }
.wave--3 { top: 40%; color: #23998d; height: 90px; animation-duration: 16s; }
@keyframes waveX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero__dune { position: absolute; left: 0; bottom: -2px; width: min(56vw, 860px); height: 26%; z-index: -1; }
.hero__palm { position: absolute; z-index: 1; width: clamp(220px, 26vw, 420px); pointer-events: none; filter: drop-shadow(0 18px 20px rgba(20, 70, 40, .25)); transform-origin: 0 0; }
.hero__palm--a { top: -6%; inset-inline-end: -4%; transform: rotate(8deg); animation: sway 7s ease-in-out infinite; }
.hero__palm--b { top: -17%; inset-inline-start: 44%; width: clamp(160px, 15vw, 250px); transform: scaleX(-1) rotate(-6deg); animation: swayB 8.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(4deg); } }
@keyframes swayB { 0%, 100% { transform: scaleX(-1) rotate(-6deg); } 50% { transform: scaleX(-1) rotate(-2deg); } }

.hero__content {
  position: relative; z-index: 2; align-self: center; justify-self: start;
  width: min(100% - 48px, 640px); margin-inline-start: max(24px, calc((100vw - var(--container)) / 2));
  padding-block: calc(var(--header-h) + 10px) 120px;
}
.hero__kicker { display: inline-block; position: relative; margin: 0 0 2px; font-family: var(--font-hand); font-size: clamp(1.3rem, 1.12rem + .6vw, 1.7rem); line-height: 1.1; color: var(--ink); transform: rotate(-2deg); }
.hero__kicker .scribble { color: var(--coral); bottom: -.3em; }
.hero__logo-wrap { position: relative; width: max-content; }
.hero__logo-wrap .stamp { position: absolute; bottom: -14px; left: -48px; width: 104px; height: 104px; }
.hero__logo { width: clamp(200px, 21vw, 300px); margin: 6px 0 0 -10px; transform-origin: 50% 0; animation: swing 6s ease-in-out infinite; filter: drop-shadow(0 18px 22px rgba(90, 40, 20, .25)); }
@keyframes swing { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.hero__title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.3rem); line-height: 1.02; letter-spacing: -.015em; color: var(--ink); margin: 10px 0 12px; }
.hero__title-line { display: block; }
.hero__title em { position: relative; z-index: 0; display: inline-block; font-style: normal; font-family: var(--font-hand); font-weight: 400; font-size: 1.18em; line-height: .9; color: var(--coral); transform: rotate(-3deg) translateY(.04em); white-space: nowrap; }
.hero__title em::before { content: ""; position: absolute; z-index: -1; inset: -.08em -.28em -.14em; background: url(../img/paper/wash-peach.webp) center / 100% 100% no-repeat; opacity: .8; }
.hero__lead { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.52; color: #26443f; max-width: 46ch; margin-bottom: .2em; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 18px 0 14px; }
.stamp { width: 112px; height: 112px; flex-shrink: 0; color: #b9472b; transform: rotate(-13deg); filter: url(#f-ink); }
.stamp text { font-family: var(--font-serif); font-weight: 900; fill: currentColor; }
.hero__scribbles { display: flex; flex-wrap: wrap; gap: 2px 26px; list-style: none; padding: 0; margin: 0; font-family: var(--font-hand); font-size: 1.36rem; line-height: 1.25; color: var(--ink); }
.hero__scribbles li { position: relative; padding-inline-start: 26px; }
.hero__scribbles li::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 18px; height: 18px; background: var(--coral); -webkit-mask: var(--d-star) center / contain no-repeat; mask: var(--d-star) center / contain no-repeat; }
.hero__scribbles b { font-family: var(--font-serif); font-weight: 900; font-size: .9em; color: var(--teal-deep); }

/* the voice-tour sticker */
.tour-launch { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; text-align: start; color: var(--ink); transition: transform .3s cubic-bezier(.2, .9, .3, 1.5); }
.tour-launch:hover { transform: rotate(-3deg) scale(1.04); }
.tour-launch__face { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #d9efe6; border: 3px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink), 2px 3px 0 2px var(--ink); }
.tour-launch__face img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 18%; animation: nod 2.6s ease-in-out infinite; }
.tour-launch__label { display: grid; line-height: 1.05; font-family: var(--font-hand); font-size: 1.4rem; }
.tour-launch__label small { font-family: var(--font-body); font-size: .8rem; color: var(--ink-soft); line-height: 1.2; }
@keyframes nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }

.hero__lali-wrap { position: absolute; z-index: 3; left: max(2vw, calc((100vw - var(--container)) / 2 - 40px)); bottom: 6%; width: clamp(240px, 26vw, 400px); }
.hero__lali { display: block; width: 100%; padding: 0; border: 0; background: none; transform-origin: 50% 100%; animation: laliIdle 3.2s ease-in-out infinite; }
.hero__lali img { width: 100%; filter: drop-shadow(0 22px 22px rgba(80, 40, 10, .28)); transition: transform .4s cubic-bezier(.2, .9, .3, 1.4); }
.hero__lali:hover img { transform: rotate(-2deg) scale(1.03); }
@keyframes laliIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(.6deg); } }
.bubble--hero { top: -7%; left: 68%; width: max-content; max-width: 300px; transform-origin: 0 100%; --tail-x: 26px; }
.hero__butterfly { position: absolute; width: 54px; top: 26%; left: -12%; animation: flutter 9s ease-in-out infinite; }
@keyframes flutter {
  0% { transform: translate(0, 0) rotate(-8deg) scaleX(1); }
  25% { transform: translate(-40px, -30px) rotate(6deg) scaleX(.6); }
  50% { transform: translate(-10px, -70px) rotate(-4deg) scaleX(1); }
  75% { transform: translate(30px, -30px) rotate(8deg) scaleX(.6); }
  100% { transform: translate(0, 0) rotate(-8deg) scaleX(1); }
}
.hero__scroll { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 4; display: grid; justify-items: center; color: #fffdf8; text-decoration: none; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1; }
.hero__scroll::after { content: ""; width: 26px; height: 46px; background: currentColor; -webkit-mask: var(--d-arrow-down) center / contain no-repeat; mask: var(--d-arrow-down) center / contain no-repeat; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* =========================================================
   WHY – four ties around the girl standing on the side
   ========================================================= */
.why { position: relative; padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 100px); }
.why__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.why__text .h2 { margin-bottom: .55em; }
.why__text .h2 .hand { margin-top: .12em; }
.clipping { margin: 30px 0 0; filter: drop-shadow(0 10px 14px rgba(70, 45, 15, .22)); rotate: -1.2deg; }
.clipping__paper {
  position: relative; padding: 30px 30px 26px; background: #fffdf6 var(--tex-paper) 0 0 / 640px;
  -webkit-mask: var(--tear-top) top / 100% 14px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 26px) no-repeat, var(--tear-bottom) bottom / 100% 14px no-repeat;
  mask: var(--tear-top) top / 100% 14px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 26px) no-repeat, var(--tear-bottom) bottom / 100% 14px no-repeat;
}
.clipping blockquote { margin: 0; }
.clipping blockquote p { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.55; color: var(--ink); margin: 0 0 .5em; }
.clipping blockquote p::first-letter { color: var(--coral); }
.clipping figcaption { font-family: var(--font-hand); font-size: 1.25rem; color: var(--coral-ink); }

.ties { position: relative; aspect-ratio: 1 / 1.02; width: min(100%, 580px); justify-self: center; }
.ties__ropes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tie-rope { fill: none; stroke-linecap: round; }
.tie-rope--out { stroke: var(--rope-dark); stroke-width: 8; }
.tie-rope--base { stroke: var(--rope); stroke-width: 5; }
.tie-rope--twist { stroke: #8d5c27; stroke-width: 5; stroke-dasharray: 2 4; stroke-linecap: butt; }
.ties__center { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; }
.mood { display: grid; justify-items: center; gap: 6px; }
.mood__faces { display: grid; width: clamp(130px, 15vw, 176px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fffdf6, #fbe3cd 72%, #f3c9a6); border: 3px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink), 3px 5px 0 2px rgba(22, 64, 60, .25); overflow: hidden; }
.mood__faces img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; padding: 10%; opacity: 0; transform: scale(.86) rotate(-6deg); transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.5); }
.mood__faces img.is-on { opacity: 1; transform: none; }
.mood__label { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; color: var(--rust-deep); background: #fffdf7; padding: 4px 12px 6px; border-radius: 4px; box-shadow: var(--shadow-paper); rotate: -3deg; white-space: nowrap; }
.mood[data-step="2"] .mood__label { color: var(--teal-deep); }
.tag {
  position: absolute; z-index: 3; width: 46%; padding: 20px 20px 16px; color: var(--ink-2);
  background: #f4e4c4 var(--tex-paper) 0 0 / 640px; border-radius: 10px 6px 12px 8px;
  box-shadow: var(--shadow-paper); rotate: var(--r, -3deg);
}
.tag h3 { font-size: 1.32rem; font-weight: 900; margin-bottom: .25em; color: var(--ink); }
.tag p { margin: 0; font-size: .97rem; line-height: 1.55; color: #4a524e; }
.tag__hole { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 4px #e8d2a8, 0 0 0 5.5px rgba(22, 64, 60, .45); }
.tag--a { top: 0; right: 0; --r: 3deg; }
.tag--b { top: 5%; left: 0; --r: -4deg; }
.tag--c { bottom: 4%; right: 3%; --r: -2.5deg; }
.tag--d { bottom: 0; left: 2%; --r: 3.5deg; }
.tag--a .tag__hole { bottom: 16px; left: 16px; }
.tag--b .tag__hole { bottom: 16px; right: 16px; }
.tag--c .tag__hole { top: 16px; left: 16px; }
.tag--d .tag__hole { top: 16px; right: 16px; }
.tag.is-tied { animation: tug .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tug { 30% { translate: 0 6px; } }
.ties__hint { position: absolute; z-index: 2; bottom: -34px; left: 50%; translate: -50% 0; margin: 0; font-family: var(--font-hand); font-size: 1.25rem; color: var(--ink-soft); white-space: nowrap; transition: opacity .5s; }
.ties.is-whole .ties__hint { opacity: 0; }

.tally { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3.6vw, 52px); margin-top: clamp(70px, 8vw, 110px); }
.tally li { display: grid; justify-items: center; text-align: center; width: 140px; }
.tally__num { position: relative; display: grid; place-items: center; width: 108px; height: 96px; }
.tally__num b { font-family: var(--font-serif); font-weight: 900; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--teal-deep); }
.tally__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--coral); overflow: visible; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.3s cubic-bezier(.5, 0, .2, 1) .25s; }
.tally li:nth-child(even) .tally__ring { transform: rotate(160deg) scaleX(-1); }
.tally li.is-in .tally__ring { stroke-dashoffset: 0; }
.tally__label { font-family: var(--font-hand); font-size: 1.32rem; line-height: 1.15; color: var(--ink); margin-top: 4px; }

/* =========================================================
   A LETTER FROM LALI – with a stamp from the island post
   ========================================================= */
.lali-letter { padding: clamp(60px, 8vw, 110px) 0; overflow: hidden; }
.lali-letter__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 5vw, 70px); align-items: center; }
.lali-letter__art { position: relative; order: 2; justify-self: center; width: min(340px, 70vw); }
.lali-letter__art::before { content: ""; position: absolute; z-index: -1; inset: 8% -18% 4%; background: url(../img/paper/wash-teal.webp) center / 100% 100% no-repeat; opacity: .5; rotate: -8deg; }
.lali-letter__art img { width: 100%; filter: drop-shadow(0 26px 26px rgba(90, 40, 10, .25)); animation: laliIdle 3.4s ease-in-out infinite; }
.lali-letter__heart { position: absolute; top: 14%; left: -8%; width: 56px; height: 54px; color: var(--coral); animation: float 3.2s ease-in-out infinite; }
.paper-letter {
  position: relative; background: #fffdf6; border-radius: 3px; padding: clamp(34px, 4vw, 52px) clamp(24px, 4vw, 56px) clamp(26px, 3vw, 40px);
  box-shadow: 0 2px 2px rgba(70, 45, 15, .1), 0 30px 60px -20px rgba(70, 45, 15, .42); transform: rotate(-1.2deg);
  background-image: linear-gradient(90deg, transparent calc(100% - 46px), rgba(224, 101, 62, .45) calc(100% - 46px), rgba(224, 101, 62, .45) calc(100% - 44px), transparent calc(100% - 44px)), repeating-linear-gradient(180deg, transparent 0 37px, rgba(42, 140, 170, .2) 37px 38px);
  background-position: 0 0, 0 18px;
}
.paper-letter .note { margin-bottom: 0; }
.paper-letter__hello { font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem); color: var(--ink); margin: 4px 0 10px; padding-inline-end: 96px; }
.paper-letter__body p { font-family: var(--font-hand); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.52rem); line-height: 38px; color: #34433f; margin: 0 0 6px; }
.paper-letter__ps { color: var(--rust-deep) !important; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem) !important; }
.paper-letter__sign { font-family: var(--font-hand); font-size: 1.4rem; color: #34433f; text-align: end; margin: 12px 0 0; line-height: 1.3; }
.paper-letter__sign b { font-weight: 400; font-size: 2.1rem; color: var(--coral); }
.paper-letter__src { margin: 10px 0 0; font-size: .82rem; color: var(--ink-soft); }
.post-stamp {
  width: 90px; height: 110px; padding: 9px 9px 6px;
  display: grid; grid-template-rows: 1fr auto; background: #fffdf7; rotate: 7deg;
  -webkit-mask: radial-gradient(circle, #0000 3.1px, #000 3.5px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) 5px 5px / 80px 100px no-repeat;
  mask: radial-gradient(circle, #0000 3.1px, #000 3.5px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) 5px 5px / 80px 100px no-repeat;
}
.post-stamp img { width: 100%; height: 100%; object-fit: cover; object-position: 32% 18%; background: #cfe9de; border: 1px solid rgba(22, 64, 60, .3); }
.post-stamp small { font-family: var(--font-hand); font-size: .95rem; line-height: 1.1; text-align: center; color: var(--ink); padding-top: 3px; }
.post-stamp-wrap { position: absolute; z-index: 2; top: -22px; inset-inline-end: 22px; width: 90px; height: 110px; filter: drop-shadow(0 3px 4px rgba(70, 45, 15, .3)); }
.postmark { position: absolute; top: 2px; inset-inline-end: 74px; z-index: 3; width: 150px; height: 82px; color: rgba(46, 70, 120, .62); rotate: -10deg; filter: url(#f-ink); pointer-events: none; }
.postmark text { font-family: var(--font-serif); font-weight: 800; fill: currentColor; }

/* =========================================================
   JOURNEY – a night-sea spread, pasted in with torn edges
   ========================================================= */
.journey { position: relative; color: var(--paper-hi); padding: clamp(100px, 13vw, 160px) 0 clamp(90px, 11vw, 150px); overflow: clip; isolation: isolate; }
.journey__bg {
  position: absolute; inset: 0; z-index: -2;
  --sea: linear-gradient(180deg, #0e4f53, #0b3a3e);
  background: var(--grain-light) 0 0 / 260px, var(--sea); transition: background 1.2s ease;
  -webkit-mask: var(--tear-top) top / 100% 28px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 54px) no-repeat, var(--tear-bottom) bottom / 100% 28px no-repeat;
  mask: var(--tear-top) top / 100% 28px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 54px) no-repeat, var(--tear-bottom) bottom / 100% 28px no-repeat;
}
.journey[data-env="island"] .journey__bg { --sea: linear-gradient(180deg, #11493a, #0b3227); }
.journey[data-env="night"] .journey__bg { --sea: linear-gradient(180deg, #0b1a33, #070f20); }
.journey[data-env="shore"] .journey__bg { --sea: linear-gradient(180deg, #164b56, #0f3843); }
.journey[data-env="deep"] .journey__bg { --sea: linear-gradient(180deg, #063056, #041a30); }
.journey[data-env="dusk"] .journey__bg { --sea: linear-gradient(180deg, #43294a, #1e1530); }
.journey::after { content: ""; position: absolute; inset: 28px 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(255, 213, 151, .1), transparent 55%); }
.fx { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; pointer-events: none; }
.fx--stars { background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 120px, #fff, transparent), radial-gradient(1.5px 1.5px at 160px 60px, #fff8, transparent), radial-gradient(1px 1px at 230px 170px, #fff, transparent), radial-gradient(2px 2px at 300px 80px, #ffe9b8, transparent); background-size: 340px 220px; animation: twinkle 5s ease-in-out infinite alternate; }
.journey[data-env="night"] .fx--stars, .journey[data-env="dusk"] .fx--stars { opacity: .8; }
.journey[data-env="night"] .fx--fireflies, .journey[data-env="island"] .fx--fireflies { opacity: 1; }
.journey[data-env="deep"] .fx--bubbles { opacity: 1; }
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }
.fx span { position: absolute; border-radius: 50%; }
.fx--fireflies span { width: 5px; height: 5px; background: #ffe58a; box-shadow: 0 0 12px 4px rgba(255, 220, 110, .55); animation: firefly var(--d, 9s) ease-in-out infinite; }
.fx--bubbles span { width: var(--s, 10px); height: var(--s, 10px); border: 1.5px solid rgba(190, 230, 255, .6); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), transparent 60%); animation: bubbleUp var(--d, 12s) linear infinite; }
@keyframes firefly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { opacity: 1; } 50% { transform: translate(40px, -30px); opacity: .5; } 75% { transform: translate(-20px, -60px); opacity: 1; } }
@keyframes bubbleUp { from { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-110vh) translateX(30px); opacity: 0; } }

.journey__intro { text-align: center; position: relative; z-index: 2; margin-bottom: clamp(70px, 10vw, 120px); }
.journey__intro .note { transform-origin: 50% 50%; }
.journey__intro .lead { margin-inline: auto; max-width: 54ch; }
.journey__track { position: relative; width: min(100% - 48px, 1160px); margin-inline: auto; }
.rope { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.rope__ghost { stroke: rgba(233, 180, 76, .3); stroke-width: 3; stroke-dasharray: 1 12; stroke-linecap: round; }
.rope__shadow { stroke: rgba(0, 0, 0, .35); stroke-width: 15; transform: translateY(5px); filter: blur(4px); }
.rope__base { stroke: var(--rope); stroke-width: 10; stroke-linecap: round; }
.rope__strands { stroke: #6e461d; stroke-width: 10; stroke-dasharray: 3 5; opacity: .55; }
.walker { position: absolute; top: 0; left: 0; z-index: 1; width: 96px; pointer-events: none; will-change: transform; transform: translate(-200px, -200px); transition: opacity .3s ease; }
.walker img { width: 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); transition: transform .35s; }
.walker.is-flipped img { transform: scaleX(-1); }
.walker::after { content: ""; position: absolute; inset: auto 15% -6px; height: 10px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .35), transparent 70%); }
.station.is-visiting .plate { box-shadow: 0 0 0 8px rgba(255, 213, 151, .22), 0 0 70px 10px rgba(255, 213, 151, .42), inset 0 0 0 3px rgba(255, 213, 151, 1), inset 0 -18px 40px rgba(150, 100, 40, .25); }
.station.is-visiting .plate img { transform: scale(1.1) rotate(-3deg); }
.station__visit { position: absolute; z-index: 3; width: 44%; left: 50%; bottom: -12%; transform: translate(-50%, 30%) scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.6), opacity .3s; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.station.is-visiting .station__visit { opacity: 1; transform: translate(-50%, 0) scale(1); }

.stations { list-style: none; position: relative; z-index: 2; display: grid; gap: clamp(110px, 16vh, 180px); }
.station { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 90px); }
.station:nth-child(even) .station__plate { order: 2; }
.station__plate { position: relative; justify-self: center; width: clamp(230px, 27vw, 340px); aspect-ratio: 1; margin: 0; }
/* a ring of rope around every plate */
.station__plate::before { content: ""; position: absolute; inset: -24px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%235b3714' stroke-width='2.8'/%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%23c98d42' stroke-width='1.9'/%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%238d5c27' stroke-width='1.9' stroke-dasharray='.7 1.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: .45; transition: transform 1s, opacity .8s; }
.station.is-reached .station__plate::before { opacity: 1; transform: rotate(28deg); }
.plate { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fffaf0 0%, #f6ead2 55%, #e2c9a0 100%);
  box-shadow: inset 0 0 0 3px rgba(91, 55, 20, .55), inset 0 -18px 40px rgba(150, 100, 40, .25), 0 30px 60px rgba(0, 0, 0, .35); }
.plate img { width: 80%; height: 80%; object-fit: contain; transition: transform .8s cubic-bezier(.2, .9, .3, 1.2); }
.plate--dark { background: radial-gradient(circle at 50% 40%, #f1e3c6, #c9b28b 70%, #8d7a5e); }
.plate--deep { background: radial-gradient(circle at 50% 35%, #e8f6ff, #b8dcef 60%, #7fb3cf); }
.plate--home img { width: 70%; height: 86%; object-position: 50% 100%; }
.station.is-reached .plate img { transform: scale(1.06) rotate(-2deg); }
.station__knot { position: absolute; top: -40px; left: 50%; width: 76px; height: 76px; transform: translateX(-50%) scale(.6); opacity: .5; display: grid; place-items: center; transition: transform .6s cubic-bezier(.2, .9, .3, 1.6), opacity .6s; }
.station__knot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.station__knot b { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 900; color: var(--ink); background: radial-gradient(circle at 35% 30%, #fff, #f3e9df 50%, #cdbcb6); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); font-size: 1.15rem; }
.station__knot b.is-text { font-size: .74rem; font-weight: 800; letter-spacing: -.02em; }
.station.is-reached .station__knot { transform: translateX(-50%) scale(1) rotate(-8deg); opacity: 1; }
/* the story card: a page from the journal, taped onto the night */
.station__card { position: relative; max-width: 500px; justify-self: center; color: var(--ink-2); background: #f8efdc var(--tex-paper) 0 0 / 640px; border-radius: 3px; padding: clamp(28px, 3vw, 36px) clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 28px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 28px 50px -20px rgba(0, 0, 0, .7); rotate: var(--r, -1.2deg); }
.station:nth-child(even) .station__card { --r: 1.1deg; --tape-r: 3deg; }
.station__kicker { font-family: var(--font-hand); color: var(--coral-ink); font-size: 1.36rem; line-height: 1.1; margin-bottom: .25em; }
.station__title { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem); font-weight: 900; color: var(--ink); }
.station__card > p { color: #3b4642; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 14px; font-family: var(--font-hand); font-size: 1.24rem; line-height: 1.3; color: var(--teal-deep); }
.chips li { position: relative; padding-inline-start: 19px; }
.chips li::before { content: ""; position: absolute; inset-inline-start: 0; top: .32em; width: 13px; height: 13px; background: var(--coral); -webkit-mask: var(--d-star) center / contain no-repeat; mask: var(--d-star) center / contain no-repeat; }
.lali-says { position: relative; margin: 0 0 6px; padding: 10px 14px 11px; padding-inline-start: 66px; min-height: 64px; display: flex; align-items: center; font-family: var(--font-serif); font-weight: 500; font-size: 1.06rem; line-height: 1.7; color: var(--ink); background: #fffdf7; border: 2px solid var(--ink); border-radius: var(--hand-r); box-shadow: 2px 3px 0 rgba(22, 64, 60, .18); }
.lali-says::before { content: ""; position: absolute; inset-inline-start: 9px; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; background: #d4ece2 url(../img/lali/lali-face.webp) 32% 18% / 150% auto no-repeat; box-shadow: 0 0 0 2px var(--ink); }
.lali-says span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.station__more { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--coral-ink); font-family: var(--font-hand); font-size: 1.42rem; padding: 4px 0; }
.station__more svg { width: 18px; height: 18px; transition: transform .3s; }
.station__more:hover { color: var(--rust); }
.station__more:hover svg { transform: translateX(-5px); }
.journey__end { text-align: center; margin-top: clamp(80px, 10vw, 120px); position: relative; z-index: 2; }
.journey__end-text { font-family: var(--font-hand); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); color: var(--peach-hi); margin-bottom: .7em; }

.pearls { position: fixed; z-index: 800; inset-inline-end: 16px; top: 50%; transform: translateY(-50%) translateX(-20px); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; display: grid; justify-items: center; gap: 8px; }
.pearls.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.pearls ol { list-style: none; display: grid; gap: 9px; position: relative; padding: 6px 0; }
.pearls ol::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(233, 180, 76, .45); }
.pearls a { position: relative; display: block; width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .4); transition: transform .3s, background .3s; }
.pearls a:hover { transform: scale(1.3); }
.pearls li.is-on a { background: radial-gradient(circle at 35% 30%, #fff, #f3e9df 55%, #cdbcb6); border-color: #fff; box-shadow: 0 0 12px rgba(255, 240, 220, .8); }
.pearls__count { font-family: var(--font-hand); font-size: 1.05rem; color: #fff; background: rgba(0, 0, 0, .38); padding: 1px 10px 3px; border-radius: 999px; white-space: nowrap; }

/* =========================================================
   FEELINGS – a polaroid of Lali
   ========================================================= */
.feelings { padding: clamp(80px, 10vw, 130px) 0; }
.feelings__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.feelings__score { font-family: var(--font-hand); color: var(--ink); font-size: 1.5rem; }
.feelings__score b { font-family: var(--font-serif); font-weight: 900; color: var(--coral-ink); font-size: .95em; }
.feelings__game { display: grid; justify-items: center; gap: 22px; }
.feelings__card { position: relative; width: min(320px, 78vw); padding: 14px 14px 58px; background: #fffdf7; border-radius: 3px; box-shadow: var(--shadow-lift); rotate: -2.5deg; }
.feelings__card img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; background: radial-gradient(circle at 50% 40%, #fff, #fde6d2 70%, #f6cfae); transition: transform .5s cubic-bezier(.2, .9, .3, 1.4); }
.feelings__card.is-swap img { transform: scale(.2) rotate(-30deg); }
.feelings__next { transition: opacity .3s ease, translate .3s ease, visibility .3s; }
.feelings__next.is-waiting { visibility: hidden; opacity: 0; translate: 0 6px; } /* keeps its place until an answer is picked */
.feelings__caption { position: absolute; inset-inline: 0; bottom: 12px; margin: 0; text-align: center; font-family: var(--font-hand); font-size: 1.55rem; line-height: 1.1; color: var(--ink); }
.feelings__reaction { position: absolute; top: -18px; inset-inline-end: -22px; width: 64px; height: 64px; display: grid; place-items: center; font-family: var(--font-hand); font-size: 2.6rem; line-height: 1; color: #fff; background: var(--teal); border: 2px solid var(--ink); border-radius: 50%; transform: scale(0) rotate(-20deg); transition: transform .4s cubic-bezier(.2, .9, .3, 1.8); }
.feelings__reaction.is-on { transform: scale(1) rotate(8deg); }
.feelings__reaction.is-oops { background: var(--peach-hi); color: var(--ink); }
.feelings__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.feelings__options button { border: 2px solid var(--ink); padding: .4em 1.2em .45em; border-radius: var(--hand-r); background: #fffdf7; color: var(--ink); font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; box-shadow: 2px 3px 0 var(--ink); transition: transform .18s, box-shadow .18s, background-color .3s, color .3s; }
.feelings__options button:nth-child(2) { rotate: 1.5deg; } .feelings__options button:nth-child(3) { rotate: -1.5deg; }
.feelings__options button:hover { transform: translate(-1px, -2px); box-shadow: 3px 5px 0 var(--ink); }
.feelings__options button.is-right { background: var(--teal); color: #fff; }
.feelings__options button.is-wrong { background: #f6d6cb; color: var(--rust-deep); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(6px); } 75% { transform: translateX(-6px); } }

/* =========================================================
   COMPASS – drawn in ink, like an old map
   ========================================================= */
.compass-sec { position: relative; padding: clamp(80px, 10vw, 140px) 0; isolation: isolate; }
.compass-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-paper) 0 0 / 640px, #dcebdc; background-blend-mode: multiply;
  -webkit-mask: var(--tear-top) top / 100% 24px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 46px) no-repeat, var(--tear-bottom) bottom / 100% 24px no-repeat;
  mask: var(--tear-top) top / 100% 24px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 46px) no-repeat, var(--tear-bottom) bottom / 100% 24px no-repeat; }
.compass-sec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.skill-panel { position: relative; padding: 30px 30px 22px; padding-inline-end: 64px; background: #fffef9; border-radius: 2px; box-shadow: var(--shadow-paper); min-height: 250px; rotate: .6deg;
  background-image: linear-gradient(90deg, transparent calc(100% - 44px), rgba(224, 101, 62, .5) calc(100% - 44px), rgba(224, 101, 62, .5) calc(100% - 42px), transparent calc(100% - 42px)), repeating-linear-gradient(180deg, transparent 0 33px, rgba(42, 140, 170, .2) 33px 34px); background-position: 0 0, 0 14px; }
.skill-panel h3 { font-size: 1.7rem; font-weight: 900; color: var(--ink); }
.skill-panel__example { font-family: var(--font-hand); font-size: 1.32rem; line-height: 1.3; color: var(--rust-deep); }
.skill-panel__where { margin: 0; color: var(--ink-soft); }
.skill-panel__where button { border: 0; background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 90%, transparent 90%); color: var(--ink); font-weight: 600; padding: 0 .2em; margin: 2px; }
.skill-panel__where button:hover { color: var(--coral); }
.skill-panel__lali { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; }
.skill-panel__lali img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: 30% 15%; background: #d4ece2; box-shadow: 0 0 0 2px var(--ink); }
.skill-panel__lali > span { position: relative; flex: 1; font-family: var(--font-serif); font-weight: 500; color: var(--ink); line-height: 1.5; background: #fffdf7; border: 2px solid var(--ink); border-radius: var(--hand-r); padding: 8px 14px; }
.skill-panel__lali b { font-weight: 700; color: var(--coral-ink); }
.compass-sec__anthem { margin-top: 20px; font-family: var(--font-hand); font-size: 1.6rem; color: var(--ink); }
.compass-sec__anthem small { font-family: var(--font-body); font-size: .85rem; color: var(--ink-soft); }
.compass { justify-self: center; width: min(520px, 92vw); padding: 64px; }
.compass__dial { position: relative; }
.compass__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 26px rgba(70, 60, 20, .25)); }
.compass__needle { transform-origin: 200px 200px; transition: transform 1.1s cubic-bezier(.3, 1.6, .4, 1); }
.compass__skills { position: absolute; inset: 0; }
.compass__skill { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, -2deg)); border: 0; white-space: nowrap; font-family: var(--font-hand); font-size: 1.42rem; line-height: 1; color: var(--ink); background: #fffdf7; padding: .32em .75em .4em; border-radius: 4px; box-shadow: var(--shadow-paper); transition: background-color .3s, color .3s, transform .3s cubic-bezier(.2, .9, .3, 1.6); }
.compass__skill:nth-child(even) { --r: 2.5deg; }
.compass__skill:hover { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.06); }
.compass__skill[aria-pressed="true"] { background: var(--coral-deep); color: #fff; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.08); }

/* =========================================================
   SESSION – the lesson plan in a school notebook + the island sign
   ========================================================= */
.session { padding: clamp(80px, 10vw, 140px) 0; }
.session__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.session__head { position: sticky; top: calc(var(--header-h) + 30px); }
.notebook { position: relative; background: #fffef9; border-radius: 2px 6px 6px 2px; box-shadow: var(--shadow-lift);
  background-image: linear-gradient(90deg, transparent calc(100% - 58px), rgba(224, 101, 62, .5) calc(100% - 58px), rgba(224, 101, 62, .5) calc(100% - 56px), transparent calc(100% - 56px)), repeating-linear-gradient(180deg, transparent 0 39px, rgba(42, 140, 170, .2) 39px 40px); background-position: 0 0, 0 22px; }
.notebook::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: -11px; width: 22px; background: radial-gradient(circle at 50% 50%, #4b4a45 0 4px, transparent 4.5px) 0 0 / 22px 34px repeat-y; }
.lesson { padding: 34px 34px 24px; padding-inline-end: 80px; rotate: -.6deg; }
.lesson__title { font-family: var(--font-hand); font-weight: 400; font-size: 1.9rem; color: var(--coral-ink); margin: 0 0 6px; }
.steps { list-style: none; display: grid; gap: 4px; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; padding: 8px 0; counter-increment: step; }
.step__icon { width: 52px; height: 52px; color: var(--ink); }
.step h3 { font-size: 1.28rem; font-weight: 800; color: var(--ink); margin: 2px 0 .1em; }
.step h3::before { content: counter(step) "."; font-family: var(--font-hand); font-weight: 400; color: var(--coral-ink); margin-inline-end: .35em; font-size: 1.2em; }
.step p { font-size: .98rem; color: var(--ink-soft); margin: 0; }

.rules { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 60px); margin-top: clamp(70px, 9vw, 110px); align-items: center; }
/* the island sign: the same bamboo-framed board as the program logo */
.sign { position: relative; padding: 26px 0; }
.sign__board { position: relative; padding: clamp(30px, 4vw, 46px) clamp(26px, 4vw, 54px) clamp(30px, 4vw, 42px); color: #5a2716;
  background: radial-gradient(ellipse at 50% 46%, #fdd99c 0%, #f9be8a 40%, #f29b74 78%, #e77b62 100%);
  clip-path: polygon(1.5% 4%, 22% 2.4%, 45% 4.6%, 66% 2.2%, 86% 4.2%, 98.6% 2%, 99.6% 28%, 97.6% 50%, 99.4% 74%, 98.8% 97%, 76% 95.4%, 52% 98%, 30% 95.6%, 10% 97.8%, .8% 96%, 2.4% 72%, .4% 49%, 2.2% 26%); }
.sign__board::before, .sign__board::after { content: ""; position: absolute; background: #fff7ec; border-radius: 60% 40% 55% 45%; opacity: .9; }
.sign__board::before { width: 12px; height: 20px; top: 9%; inset-inline-start: 46%; rotate: 20deg; }
.sign__board::after { width: 9px; height: 15px; bottom: 9%; inset-inline-end: 18%; rotate: -30deg; }
.bamboo { position: absolute; z-index: 2; inset-inline: -16px; height: 24px; border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 128px, rgba(136, 48, 20, .8) 128px 131px, rgba(255, 214, 170, .55) 131px 133px, transparent 133px 196px),
    repeating-linear-gradient(90deg, transparent 0 61px, rgba(136, 48, 20, .55) 61px 63px, transparent 63px 211px),
    linear-gradient(180deg, #f8a868 0%, #ef8746 46%, #cf632e 100%);
  box-shadow: inset 0 2px 0 rgba(255, 224, 186, .55), 0 4px 6px rgba(90, 30, 10, .25); }
.bamboo--top { top: 8px; rotate: -.8deg; }
.bamboo--bottom { bottom: 8px; inset-inline: 30% -22px; rotate: 1.2deg; }
.rules__board h3 { text-align: center; font-family: var(--font-hand); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); color: var(--rust-deep); margin-bottom: .3em; }
.rules__board ol { padding-inline-start: 1.3em; display: grid; gap: 10px; font-size: 1.05rem; color: #4a2214; }
.rules__board li::marker { font-family: var(--font-serif); font-weight: 900; color: var(--rust-deep); }
.rules__board b { font-family: var(--font-serif); font-weight: 900; color: #3d170b; }
.say-pill { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; border: 2px solid var(--ink); border-radius: var(--hand-r); padding: .4em 1.1em; background: var(--teal-deep); color: #fff; font-weight: 600; box-shadow: 2px 3px 0 var(--ink); }
.say-pill svg { width: 16px; height: 16px; }
.rules__board .say-pill { display: flex; }
.is-saying { filter: drop-shadow(0 0 14px rgba(255, 213, 151, .9)); }
.rules__extras { list-style: none; display: grid; gap: 22px; }
.extra { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; }
.extra img, .extra svg { width: 86px; height: 86px; object-fit: contain; justify-self: center; }
.extra svg { color: var(--ink); }
.extra:nth-child(2) img { rotate: 12deg; } .extra:nth-child(1) img { rotate: -10deg; }
.extra h4 { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--coral-ink); margin-bottom: .15em; }
.extra p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* =========================================================
   KIT – everything laid out on a sheet of kraft paper
   ========================================================= */
.kit { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.kit__head { text-align: center; }
.kit__head .lead { margin-inline: auto; }
.kit__head .note { transform-origin: 50% 50%; }
.kit__stage { position: relative; margin-top: 40px; display: grid; justify-items: center; gap: 26px; }
.kit__lali { position: absolute; z-index: 3; top: -40px; inset-inline-end: calc(50% + 120px); width: 160px; }
.kit__lali img { width: 100%; filter: drop-shadow(0 16px 16px rgba(80, 40, 10, .25)); animation: laliIdle 3s ease-in-out infinite; }
.bubble--kit { top: -16px; inset-inline-end: 84%; width: max-content; max-width: 230px; }
.backpack { position: relative; z-index: 2; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; }
.backpack__art { width: 150px; transition: transform .4s cubic-bezier(.2, .9, .3, 1.6); filter: drop-shadow(0 16px 16px rgba(120, 30, 20, .28)); animation: bob 4s ease-in-out infinite; }
.backpack:hover .backpack__art { transform: rotate(-5deg) scale(1.05); }
.backpack__flap { transform-origin: 50% 20%; transition: transform .6s cubic-bezier(.2, .9, .3, 1.4); }
.backpack[aria-expanded="true"] .backpack__flap { transform: rotateX(70deg) translateY(-18px); }
.backpack__label { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; color: var(--rust-deep); }
.kit__items { list-style: none; position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; padding: clamp(40px, 5vw, 64px) clamp(22px, 4vw, 56px) clamp(46px, 5vw, 70px);
  background: var(--tex-paper) 0 0 / 640px, #d4b283; background-blend-mode: multiply; border-radius: 4px; box-shadow: var(--shadow-lift), inset 0 0 60px rgba(120, 80, 30, .25); }
.kit__items::before, .kit__items::after { content: ""; position: absolute; top: -12px; width: 120px; height: 28px; background: rgba(250, 214, 120, .72); clip-path: polygon(0 12%, 4% 0, 8% 14%, 92% 4%, 96% 14%, 100% 6%, 100% 92%, 96% 100%, 92% 88%, 8% 96%, 4% 86%, 0 98%); }
.kit__items::before { inset-inline-start: 8%; rotate: -4deg; } .kit__items::after { inset-inline-end: 8%; rotate: 5deg; }
.kit-item { transition: opacity .5s ease, transform .75s cubic-bezier(.2, .9, .3, 1.25); transition-delay: calc(var(--i) * 80ms); }
.kit-item > * { width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; text-decoration: none; color: inherit; background: none; border: 0; padding: 6px; rotate: var(--r, 0deg); transition: rotate .35s cubic-bezier(.2, .9, .3, 1.4), translate .35s; }
.kit-item button:hover, .kit-item a:hover { rotate: 0deg; translate: 0 -6px; }
.kit-item:nth-child(3n+2) { translate: 0 22px; }
.kit-item__img { height: 150px; width: auto; object-fit: contain; margin-bottom: 8px; }
.kit-item__img--book { border-radius: 3px 8px 8px 3px; box-shadow: -6px 10px 18px rgba(60, 30, 10, .35); }
.kit-item__tv { width: 190px; height: 150px; display: grid; place-items: center; margin-bottom: 8px; background: #fffdf7; padding: 10px 10px 30px; box-shadow: 0 10px 18px rgba(60, 30, 10, .3); }
.kit-item__tv img { width: 100%; height: 100%; object-fit: cover; }
.kit-item__doodle { width: 120px; height: 120px; margin: 15px 0 23px; color: #3b2a14; }
.kit-item b { font-family: var(--font-hand); font-weight: 400; font-size: 1.62rem; line-height: 1; color: #2c1d0c; }
.kit-item span:not(.kit-item__tv) { color: #4b3a22; font-size: .93rem; line-height: 1.45; max-width: 24ch; }
.kit.is-closed .kit-item { opacity: 0; transform: translateY(-160px) scale(.35) rotate(-8deg); pointer-events: none; }

/* =========================================================
   BOOKS
   ========================================================= */
.books { padding: clamp(80px, 10vw, 140px) 0; }
.books__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.books__note { font-family: var(--font-hand); font-size: 1.4rem; color: var(--rust-deep); }
.books__note::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-inline-end: 8px; background: var(--coral); -webkit-mask: var(--d-star) center / contain no-repeat; mask: var(--d-star) center / contain no-repeat; }
.books__shelf { position: relative; display: flex; justify-content: center; gap: clamp(24px, 5vw, 60px); padding-bottom: 34px; perspective: 1400px; }
.books__shelf::after { content: ""; position: absolute; inset: auto -4% 0; height: 22px; border-radius: 5px; background: var(--grain) 0 0 / 220px, linear-gradient(180deg, #c9874c, #9a5d2e); box-shadow: 0 16px 24px rgba(90, 50, 20, .3); }
.books__hint { position: absolute; top: -48px; inset-inline-end: 4%; display: flex; align-items: flex-end; gap: 4px; font-family: var(--font-hand); font-size: 1.4rem; color: var(--coral-ink); rotate: 4deg; margin: 0; }
.books__hint::after { content: ""; width: 34px; height: 46px; background: currentColor; -webkit-mask: var(--d-arrow-down) center / contain no-repeat; mask: var(--d-arrow-down) center / contain no-repeat; transform: rotate(30deg); }
.book3d { position: relative; width: clamp(150px, 17vw, 230px); aspect-ratio: .7; border: 0; background: none; padding: 0; transform-style: preserve-3d; transform: rotateY(18deg); transition: transform .6s cubic-bezier(.2, .9, .3, 1.2); }
.book3d:hover, .book3d:focus-visible { transform: rotateY(4deg) translateY(-10px); }
.book3d__cover { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; overflow: hidden; box-shadow: -14px 18px 30px rgba(0, 0, 0, .3); transform: translateZ(12px); }
.book3d__cover img { width: 100%; height: 100%; object-fit: cover; }
.book3d__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .25), transparent 12%, transparent 88%, rgba(0, 0, 0, .25)); }
.book3d__pages { position: absolute; top: 3%; bottom: 3%; left: -2px; width: 24px; transform: rotateY(-90deg) translateZ(0); transform-origin: left; background: repeating-linear-gradient(90deg, #fff 0 2px, #e8e1d4 2px 3px); }
.book3d__label { position: absolute; bottom: -64px; inset-inline: 0; font-family: var(--font-hand); font-size: 1.45rem; color: var(--ink); }

/* =========================================================
   TRAILER + ANTHEM – on sand-coloured paper
   ========================================================= */
.media-sec { position: relative; padding: clamp(90px, 11vw, 150px) 0; isolation: isolate; }
.media-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-paper) 0 0 / 640px, #f6dcbd; background-blend-mode: multiply;
  -webkit-mask: var(--tear-top) top / 100% 26px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 50px) no-repeat, var(--tear-bottom) bottom / 100% 26px no-repeat;
  mask: var(--tear-top) top / 100% 26px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 50px) no-repeat, var(--tear-bottom) bottom / 100% 26px no-repeat; }
.media-sec__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.frame { position: relative; }
.sign--frame .sign__board { padding: clamp(18px, 2.4vw, 28px); }
.trailer__video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: #0b2c2f; object-fit: cover; box-shadow: inset 0 0 0 2px rgba(90, 39, 22, .5); }
.trailer__play { position: absolute; z-index: 3; inset: 0; margin: auto; width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; color: #fff; background: var(--coral-deep); box-shadow: 4px 5px 0 var(--ink); transition: transform .25s; }
.trailer__play:hover { transform: scale(1.07) rotate(-4deg); }
.trailer__play svg { width: 40px; height: 40px; margin-inline-start: 6px; }
.trailer.is-playing .trailer__play { opacity: 0; pointer-events: none; }
.anthem__player { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.anthem__btn { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--teal-deep); color: #fff; box-shadow: 3px 4px 0 var(--ink); transition: transform .25s; }
.anthem__btn:hover { transform: scale(1.06) rotate(-4deg); }
.anthem__btn svg { width: 30px; height: 30px; }
.anthem__btn .i-pause { display: none; }
.anthem.is-playing .anthem__btn .i-pause { display: block; }
.anthem.is-playing .anthem__btn .i-play { display: none; }
.anthem__hint { font-family: var(--font-hand); font-size: 1.4rem; line-height: 1.1; color: var(--ink); margin: 0; }
.anthem__bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.anthem__bars i { width: 6px; height: 30%; border-radius: 3px; background: var(--coral); opacity: .45; }
.anthem.is-playing .anthem__bars i { opacity: 1; animation: eq .9s ease-in-out infinite alternate; }
.anthem__bars i:nth-child(2) { animation-delay: .15s; } .anthem__bars i:nth-child(3) { animation-delay: .3s; } .anthem__bars i:nth-child(4) { animation-delay: .45s; } .anthem__bars i:nth-child(5) { animation-delay: .6s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
/* the song sheet */
.anthem__lyrics { position: relative; max-height: 430px; overflow: auto; scrollbar-width: thin; padding: 22px 26px 22px 20px; background: #fffef9; border-radius: 2px; box-shadow: var(--shadow-paper); rotate: 1deg;
  background-image: repeating-linear-gradient(180deg, transparent 0 41px, rgba(42, 140, 170, .2) 41px 42px); background-attachment: local; background-position: 0 14px; }
.anthem__lyrics p { margin: 0; padding: 4px 8px 5px; font-family: var(--font-hand); font-size: 1.42rem; line-height: 33px; color: #4b5753; transition: color .4s, background-size .5s; background: linear-gradient(transparent 50%, var(--marker) 50%, var(--marker) 92%, transparent 92%) 100% 0 / 0 100% no-repeat; }
.anthem__lyrics p.chorus { color: var(--rust); }
.anthem__lyrics p.is-active { color: var(--ink); background-size: 100% 100%; }

/* =========================================================
   VOICES – letters in bottles
   ========================================================= */
.voices { padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; }
.bottles { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 44px 0 10px; position: relative; padding-bottom: 54px; }
.bottles::after { content: ""; position: absolute; inset: auto -10vw 0; height: 72px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 70' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 90 10 180 10 270 30 S 450 50 540 30 S 630 10 720 30 V70 H0z' fill='%2326bba9' opacity='.3'/%3E%3Cpath d='M0 42 C 90 26 180 26 270 42 S 450 58 540 42 S 630 26 720 42 V70 H0z' fill='%2326bba9' opacity='.45'/%3E%3Cpath d='M0 30 C 90 10 180 10 270 30 S 450 50 540 30 S 630 10 720 30' fill='none' stroke='%2316403c' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") repeat-x 0 0 / 720px 72px; animation: waveBg 14s linear infinite; z-index: 0; }
@keyframes waveBg { to { background-position: 720px 0; } }
.bottle { position: relative; z-index: 1; width: 100%; border: 0; background: none; display: grid; justify-items: center; gap: 4px; padding: 0; animation: float 4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.7s); }
.bottles li:nth-child(1) .bottle { --n: 1; } .bottles li:nth-child(2) .bottle { --n: 2; } .bottles li:nth-child(3) .bottle { --n: 3; } .bottles li:nth-child(4) .bottle { --n: 4; } .bottles li:nth-child(5) .bottle { --n: 5; } .bottles li:nth-child(6) .bottle { --n: 6; }
.bottle img { width: min(110px, 80%); transition: transform .4s cubic-bezier(.2, .9, .3, 1.6); filter: drop-shadow(0 12px 12px rgba(20, 90, 100, .25)); }
.bottle:hover img, .bottle:focus-visible img { transform: rotate(-14deg) scale(1.1); }
.bottle span { position: relative; font-family: var(--font-hand); font-size: 1.28rem; line-height: 1.1; color: var(--ink); background: #f4e4c4; padding: 3px 12px 5px 12px; padding-inline-start: 24px; border-radius: 4px 10px 10px 4px; box-shadow: var(--shadow-paper); rotate: -3deg; }
.bottle span::before { content: ""; position: absolute; inset-inline-start: 7px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3), 0 0 0 2px rgba(22, 64, 60, .35); }
.bottles li:nth-child(even) .bottle span { rotate: 2.5deg; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.quotes-marquee { margin-top: clamp(50px, 7vw, 80px); text-align: center; }
.quotes-marquee__title { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.1rem); }
.marquee { display: grid; gap: 18px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 16px 0; }
.marquee__row { list-style: none; display: flex; gap: 22px; width: max-content; animation: marquee 60s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__row li { position: relative; font-family: var(--font-hand); font-size: 1.6rem; color: #34433f; background: #fffdf7; padding: 12px 24px; white-space: nowrap; rotate: var(--r, -1deg); box-shadow: var(--shadow-paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(42, 140, 170, .16) 27px 28px); }
.marquee__row li::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 18px; translate: -50% 0; rotate: -4deg; background: rgba(120, 200, 186, .6); }
.marquee__row li:nth-child(even) { --r: 1.3deg; background-color: #fff6e6; }
.marquee__row li:nth-child(even)::before { background: rgba(243, 172, 128, .6); rotate: 3deg; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
.quotes-marquee__src { color: var(--ink-soft); font-size: .92rem; margin-top: 12px; }

/* =========================================================
   ABOUT – a colophon
   ========================================================= */
.about { padding: clamp(80px, 10vw, 140px) 0; }
.about__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.accordion { border-bottom: 1.5px dashed rgba(22, 64, 60, .25); }
.accordion summary { cursor: pointer; list-style: none; padding: 16px 0; font-family: var(--font-serif); font-weight: 800; font-size: 1.2rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex-shrink: 0; width: 30px; height: 30px; background: var(--coral); -webkit-mask: var(--d-plus) center / contain no-repeat; mask: var(--d-plus) center / contain no-repeat; transition: transform .35s cubic-bezier(.2, .9, .3, 1.5); }
.accordion[open]:not(.is-closing) summary::after { transform: rotate(45deg); }
.accordion summary:hover { color: var(--coral); }
.accordion p { padding: 0 0 18px; margin: 0; color: var(--ink-soft); }
.about__text .accordion:first-of-type { margin-top: 18px; border-top: 1.5px dashed rgba(22, 64, 60, .25); }
.colophon { position: relative; padding: 38px 32px 30px; text-align: center; background: #fffdf6 var(--tex-paper) 0 0 / 640px; border-radius: 2px; box-shadow: var(--shadow-lift); rotate: 1deg; }
.colophon__partners p { font-family: var(--font-hand); font-size: 1.4rem; color: var(--coral-ink); margin-bottom: 8px; }
.colophon__partners ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 26px; }
.colophon__partners img { max-height: 62px; width: auto; mix-blend-mode: multiply; }
.colophon__partners li:first-child { flex-basis: 100%; }
.colophon__partners li:first-child img { max-height: 70px; margin-inline: auto; }
.colophon__rule { width: 160px; height: 18px; margin: 22px auto 16px; color: var(--ink); opacity: .55; }
.credits h3 { font-size: 1.35rem; font-weight: 900; }
.credits dl { display: grid; gap: 6px; margin: 0; text-align: start; }
.credits div { display: flex; align-items: baseline; gap: 8px; }
.credits dt { color: var(--ink-soft); font-size: .95rem; white-space: nowrap; }
.credits div::after { content: none; }
.credits dd { margin: 0; font-family: var(--font-serif); font-weight: 700; color: var(--ink); white-space: nowrap; order: 3; }
.credits .dots { flex: 1; order: 2; border-bottom: 2px dotted rgba(22, 64, 60, .35); min-width: 20px; translate: 0 -4px; }

/* =========================================================
   FAQ – questions in the notebook
   ========================================================= */
.faq { padding: clamp(80px, 10vw, 130px) 0; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 20px); }
.faq__lali { position: relative; margin-top: 18px; width: 170px; }
.faq__lali img { width: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #ffe9d6 75%); border: 4px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink), 3px 5px 0 2px rgba(22, 64, 60, .2); animation: nod 3s ease-in-out infinite; }
.bubble--faq { top: -14px; inset-inline-start: 132px; width: max-content; }
.faq__list { position: relative; padding: 26px clamp(20px, 3vw, 36px) 20px; padding-inline-end: clamp(60px, 7vw, 80px); background: #fffef9; border-radius: 2px; box-shadow: var(--shadow-lift); rotate: -.4deg;
  background-image: linear-gradient(90deg, transparent calc(100% - 44px), rgba(224, 101, 62, .5) calc(100% - 44px), rgba(224, 101, 62, .5) calc(100% - 42px), transparent calc(100% - 42px)); }
.faq__list .accordion { border-bottom: 1.5px solid rgba(42, 140, 170, .22); }
.faq__list .accordion:last-child { border-bottom: 0; }
.faq__list .accordion summary { font-size: 1.14rem; }
.faq__list .accordion[open]:not(.is-closing) summary { color: var(--coral); }

/* =========================================================
   ORDER – the passport
   ========================================================= */
.order { position: relative; padding: clamp(100px, 12vw, 160px) 0 clamp(90px, 11vw, 150px); color: var(--paper-hi); overflow: hidden; isolation: isolate; }
.order::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-light) 0 0 / 220px, radial-gradient(circle at 85% 20%, rgba(255, 213, 151, .14), transparent 45%), linear-gradient(180deg, #11625a, #0b3a3e);
  -webkit-mask: var(--tear-top) top / 100% 28px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 27px) no-repeat;
  mask: var(--tear-top) top / 100% 28px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 27px) no-repeat; }
.order__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.order__facts { list-style: none; display: grid; gap: 6px; margin: 18px 0 24px; }
.order__facts li { font-size: 1.05rem; color: rgba(255, 250, 240, .86); }
.order__facts b { font-family: var(--font-hand); font-weight: 400; font-size: 1.35rem; color: var(--peach-hi); margin-inline-end: .4em; }
.order__contact { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-pill { display: inline-flex; align-items: center; gap: 8px; padding: .5em 1.05em; border-radius: var(--hand-r); text-decoration: none; color: var(--paper-hi); border: 2px solid rgba(255, 250, 240, .55); font-weight: 500; direction: ltr; unicode-bidi: plaintext; transition: background-color .3s; }
.contact-pill:hover { background: rgba(255, 255, 255, .12); }
.contact-pill svg { width: 20px; height: 20px; }
.prospectus-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 8px 4px; text-decoration: none; color: var(--paper-hi); }
.prospectus-link img { width: 52px; border-radius: 3px; box-shadow: 0 8px 16px rgba(0, 0, 0, .35); transform: rotate(-6deg); transition: transform .3s; }
.prospectus-link:hover img { transform: rotate(4deg) scale(1.06); }
.prospectus-link span { display: grid; line-height: 1.25; }
.prospectus-link b { font-family: var(--font-hand); font-weight: 400; font-size: 1.5rem; color: var(--peach-hi); }
.prospectus-link small { opacity: .8; }
.passport-wrap { position: relative; padding-top: 70px; }
.order__lali { position: absolute; z-index: 0; width: 230px; inset-inline-end: -40px; top: -40px; transform: rotate(6deg); filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .35)); }
.bubble--order { z-index: 3; top: 4px; inset-inline-end: 170px; width: max-content; max-width: 260px; }
.passport { position: relative; z-index: 1; background: #fbf5e6; color: var(--ink-2); border-radius: 6px 14px 14px 6px; padding: 26px clamp(18px, 3vw, 34px) 30px; box-shadow: 0 40px 70px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(200, 139, 58, .3);
  background-image: repeating-radial-gradient(circle at 20% 30%, transparent 0 14px, rgba(42, 171, 155, .05) 14px 15px), repeating-radial-gradient(circle at 80% 70%, transparent 0 18px, rgba(225, 112, 69, .045) 18px 19px); }
.passport::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: -9px; width: 12px; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #0d4f49, #136e66); }
.passport__head { display: flex; align-items: center; gap: 14px; margin: -26px calc(-1 * clamp(18px, 3vw, 34px)) 22px; padding: 18px clamp(18px, 3vw, 34px); background: var(--grain-light) 0 0 / 220px, linear-gradient(135deg, #136e66, #0d4f49); border-radius: 6px 14px 0 0; color: #fff; }
.passport__emblem { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #e9b44c 60%, #b37a22); display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); flex-shrink: 0; }
.passport__emblem svg { width: 40px; height: 40px; }
.passport__type { font-family: var(--font-serif); font-weight: 900; font-size: 1.4rem; margin: 0; color: var(--peach-hi); letter-spacing: .02em; }
.passport__sub { margin: 0; opacity: .8; font-size: .95rem; }
.passport__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.field { display: grid; gap: 2px; }
.field span { font-size: .82rem; font-weight: 600; color: var(--teal-deep); letter-spacing: .02em; }
.field input, .field select, .field textarea { font: inherit; font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.3; color: var(--ink); background: transparent; border: 0; border-bottom: 2px dotted rgba(15, 94, 87, .4); padding: 4px 2px; border-radius: 0; transition: border-color .3s, background .3s; }
.field select { font-family: var(--font-body); font-size: 1rem; padding: 8px 2px; }
.field textarea { font-size: 1.3rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(22, 64, 60, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--teal-deep); background: rgba(42, 171, 155, .06); }
.field--wide { grid-column: 1 / -1; }
.field.is-invalid input, .field.is-invalid select { border-bottom-color: var(--coral); background: rgba(225, 112, 69, .07); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: .92rem; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--teal-deep); flex-shrink: 0; }
.passport__submit { width: 100%; }
.passport__status { margin: 12px 0 0; min-height: 1.5em; font-family: var(--font-hand); font-size: 1.3rem; color: var(--teal-deep); text-align: center; }
.passport__status.is-error { color: var(--rust-deep); font-family: var(--font-body); font-size: 1rem; }
.stamp-ok { position: absolute; inset-inline-start: 26px; bottom: 90px; width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #c0392b; border: 5px double #c0392b; transform: rotate(-16deg) scale(2.4); opacity: 0; pointer-events: none; font-family: var(--font-serif); background: rgba(255, 250, 240, .4); filter: url(#f-ink); }
.stamp-ok span { font-size: 2rem; font-weight: 900; line-height: 1; }
.stamp-ok small { font-family: var(--font-hand); font-size: 1.25rem; }
.passport.is-sent .stamp-ok { animation: stamp .55s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes stamp { to { transform: rotate(-16deg) scale(1); opacity: .9; } }

/* =========================================================
   FOOTER – the sand at the end of the roll-up
   ========================================================= */
.site-footer { position: relative; background: var(--grain) 0 0 / 220px, var(--sand-hi); color: #4a2a16; padding: 34px 0 24px; }
.site-footer__dune { position: absolute; bottom: calc(100% - 2px); inset-inline: 0; width: 100%; height: 70px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; align-items: start; }
.site-footer__brand img { width: 150px; margin-bottom: 10px; }
.site-footer h3 { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; color: var(--rust-deep); }
.site-footer__list { list-style: none; display: grid; gap: 6px; }
.site-footer a { color: #4a2a16; }
.site-footer__lali { position: relative; display: grid; justify-items: center; }
.say-btn { border: 0; background: none; padding: 0; }
.site-footer__lali img { width: 150px; margin-top: -96px; filter: drop-shadow(0 16px 16px rgba(90, 40, 10, .3)); animation: laliIdle 3.5s ease-in-out infinite; }
.bubble--footer { position: relative; margin: 10px 0 0; max-width: 250px; font-size: 1.2rem; }

.site-footer__copy { text-align: center; font-size: .88rem; opacity: .8; margin: 26px 0 0; }

/* =========================================================
   PEEK – Lali leans in from the bottom corner and waves
   ========================================================= */
.peek { position: fixed; z-index: 850; left: 0; bottom: 0; display: flex; align-items: flex-end; direction: ltr; pointer-events: none; }
.peek[hidden] { display: none; }
.peek__lali { position: relative; pointer-events: auto; width: 200px; aspect-ratio: 560 / 442; margin: 0 0 -2px 0; border: 0; padding: 0; background: none; transform-origin: 0 100%; transform: translateY(105%) rotate(12deg); transition: transform .8s cubic-bezier(.2, .9, .3, 1.25); }
.peek.is-out .peek__lali { transform: translateY(17%) rotate(12deg); }
.peek__lali:hover { transform: translateY(10%) rotate(9deg); }
.peek__lali img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(-6px 6px 12px rgba(0, 0, 0, .22)); }
.peek__hand { transform-origin: 88.1% 71.5%; }
/* every time she comes out she waves */
.peek.is-out:not(.is-away) .peek__hand { animation: wave 1.1s ease-in-out .55s 2; }
.peek.is-talking .peek__hand, .peek__lali:hover .peek__hand { animation: wave 1.1s ease-in-out infinite; }
@keyframes wave { 0%, 100% { rotate: 0deg; } 25% { rotate: 16deg; } 60% { rotate: -9deg; } }
.bubble--peek { position: relative; direction: rtl; pointer-events: auto; margin: 0 0 128px -34px; max-width: 228px; font-size: 1.2rem; opacity: 0; transform: scale(.6) translateY(20px); transform-origin: 0 100%; transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1.5); }
.peek.is-talking .bubble--peek { opacity: 1; transform: none; }
.bubble--peek { --tail-x: 22px; }
.bubble--peek p { margin: 0 0 2px; padding-inline-end: 22px; }
.peek__actions { display: none; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.peek.is-menu .peek__actions { display: flex; }
.chip-btn { font-family: var(--font-body); font-size: .86rem; line-height: 1.2; padding: .4em .8em; border-radius: var(--hand-r); background: #fff; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 600; box-shadow: 1px 2px 0 var(--ink); }
.chip-btn:hover { background: var(--teal); color: #fff; }
.peek__close { position: absolute; top: 4px; inset-inline-end: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); display: grid; place-items: center; padding: 0; }
.peek__close svg { width: 14px; height: 14px; }
.peek__close:hover { color: var(--coral); }

/* =========================================================
   MODALS
   ========================================================= */
.modal { border: 0; padding: 0; background: transparent; max-width: min(1040px, 94vw); width: 100%; max-height: 92vh; overflow: visible; color: var(--ink-2); }
.modal::backdrop { background: rgba(8, 30, 32, .64); backdrop-filter: blur(5px); }
.modal[open] { animation: modalIn .45s cubic-bezier(.2, .9, .3, 1.2); }
.modal[open]::backdrop { animation: backdropIn .4s ease both; }
.modal.is-closing { animation: modalOut .28s cubic-bezier(.4, 0, .7, .2) both; }
.modal.is-closing::backdrop { animation: backdropOut .28s ease both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) rotate(-1deg) scale(.96); } }
@keyframes modalOut { to { opacity: 0; transform: translateY(22px) rotate(.6deg) scale(.97); } }
@keyframes backdropIn { from { opacity: 0; } }
@keyframes backdropOut { to { opacity: 0; } }
.modal__paper { position: relative; background: var(--paper-hi) var(--tex-paper) 0 0 / 640px; border-radius: 4px; max-height: 92vh; overflow: auto; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.modal__close { position: absolute; z-index: 5; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: #fffdf7; color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.modal__close svg { width: 18px; height: 18px; }
.modal__close--light { position: fixed; top: 18px; inset-inline-end: 18px; }
.sm { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; }
.sm__media { position: sticky; top: 0; align-self: start; display: grid; place-items: center; padding: 30px; min-height: 430px; background: radial-gradient(circle at 50% 40%, #fffaf0, #f2e2c4 70%, #e2c9a0); }
.sm__media img { max-height: 360px; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(80, 50, 20, .25)); }
.sm__media video { width: 100%; border-radius: 6px; box-shadow: var(--shadow-paper); }
.sm__media-tabs { position: absolute; bottom: 16px; inset-inline: 0; display: flex; justify-content: center; gap: 10px; }
.sm__media-tabs button { border: 2px solid var(--ink); border-radius: var(--hand-r); padding: .25em .9em; font-weight: 600; font-size: .92rem; background: #fffdf7; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.sm__media-tabs button[aria-pressed="true"] { background: var(--teal-deep); color: #fff; }
.sm__text { padding: 36px clamp(22px, 3vw, 40px) 26px; }
.sm__num { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; color: var(--coral-ink); margin-bottom: .2em; }
.sm__title { font-size: clamp(1.9rem, 1.35rem + 1.6vw, 2.6rem); font-weight: 900; color: var(--ink); margin: .05em 0 .2em; padding-inline-end: 44px; }
.sm__place { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); margin-bottom: 18px; }
.sm__place svg { width: 20px; height: 20px; color: var(--coral); flex-shrink: 0; }
.sm__story { position: relative; font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; line-height: 1.75; color: #4a3218; background: #fff3dc; border-radius: 3px; padding: 22px 20px 16px; margin: 30px 0 18px; box-shadow: var(--shadow-paper); rotate: -.6deg; }
.sm__narrator { position: absolute; top: -28px; inset-inline-start: -12px; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; object-position: 30% 15%; background: #d4ece2; border: 3px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink); }
.sm__story p { padding-inline-start: 52px; margin-bottom: .6em; }
.sm__by { font-family: var(--font-hand); font-weight: 400; font-size: 1.3em; color: var(--coral-ink); }
.sm__voice { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; border: 2px solid var(--ink); border-radius: var(--hand-r); padding: .3em 1em; background: var(--teal-deep); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .95rem; box-shadow: 2px 3px 0 var(--ink); }
.sm__voice svg { width: 16px; height: 16px; }
.sm__voice.is-playing { background: var(--coral-deep); }
.sm h4 { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--teal-deep); margin: 22px 0 8px; }
.sm ul { padding-inline-start: 1.2em; display: grid; gap: 5px; color: var(--ink-soft); }
.sm ul li::marker { color: var(--coral); }
.sm__q { list-style: none; padding: 0 !important; }
.sm__q li { position: relative; font-family: var(--font-serif); font-weight: 600; color: var(--ink); padding-inline-start: 26px; }
.sm__q li::before { content: "?"; position: absolute; inset-inline-start: 0; top: -.15em; font-family: var(--font-hand); font-size: 1.6rem; color: var(--coral); }
.sm__page { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; border: 0; background: none; padding: 0; color: var(--teal-deep); font-family: var(--font-hand); font-size: 1.35rem; }
.sm__page img { width: 54px; border-radius: 3px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); transition: transform .3s; }
.sm__page:hover img { transform: rotate(-4deg) scale(1.08); }
.modal__nav { display: flex; justify-content: space-between; gap: 10px; padding: 0 clamp(18px, 3vw, 34px) 22px; }
.modal__navbtn { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: #fffdf7; color: var(--ink); border-radius: var(--hand-r); padding: .4em 1.05em; font-weight: 600; font-size: .95rem; box-shadow: 2px 3px 0 var(--ink); }
.modal__navbtn svg { width: 16px; height: 16px; }
.modal__navbtn[disabled] { opacity: .35; pointer-events: none; }
.modal--book, .modal--video { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.modal--book::backdrop, .modal--video::backdrop { background: rgba(4, 24, 26, .9); }
.flip { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; padding: 70px 16px 20px; gap: 12px; }
.flip__stage { position: relative; height: 100%; aspect-ratio: .68; max-width: 92vw; perspective: 2000px; }
.flip__page { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); transform-origin: 100% 50%; backface-visibility: hidden; }
.flip__page img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.flip__page::after { content: "דוגמה"; position: absolute; top: 14px; inset-inline-start: 14px; font-family: var(--font-hand); font-size: 1.2rem; color: #fff; background: var(--coral); padding: .05em .8em .15em; border-radius: 4px; rotate: -4deg; }
.flip__page.is-leaving { animation: pageOut .7s cubic-bezier(.4, .1, .3, 1) forwards; z-index: 2; }
.flip__page.is-leaving.is-back { animation-name: pageOutBack; transform-origin: 0 50%; }
@keyframes pageOut { to { transform: rotateY(-100deg); opacity: .2; } }
@keyframes pageOutBack { to { transform: rotateY(100deg); opacity: .2; } }
.flip__bar { display: flex; align-items: center; gap: 18px; color: #fff; }
.flip__btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; }
.flip__btn:hover { background: rgba(255, 255, 255, .24); }
.flip__btn svg { width: 22px; height: 22px; }
.flip__count { font-family: var(--font-hand); font-size: 1.35rem; min-width: 150px; text-align: center; }
.flip__note { color: rgba(255, 255, 255, .6); font-size: .85rem; margin: 0; }
.modal--video video { width: min(1100px, 94vw); max-height: 86vh; margin: 8vh auto 0; border-radius: 6px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); }
.modal__paper--letter { background: #fdf8ec var(--tex-paper) 0 0 / 640px; }
.letter { display: grid; grid-template-columns: 1.2fr 1fr; }
.letter__scan { padding: 28px; background: repeating-linear-gradient(180deg, #fffdf6 0 31px, rgba(42, 171, 155, .08) 31px 32px); }
.scan { position: relative; transform: rotate(-.8deg); box-shadow: 0 10px 30px rgba(80, 60, 30, .18); border-radius: 2px; overflow: hidden; }
.letter__scan img { width: 100%; mix-blend-mode: multiply; }
.mark { position: absolute; border-radius: 10px 6px 12px 8px / 8px 12px 6px 10px; background: linear-gradient(180deg, rgba(255, 230, 90, .5), rgba(255, 214, 64, .62) 55%, rgba(255, 230, 90, .5)); mix-blend-mode: multiply; transform: scaleX(0) skewX(-6deg); transform-origin: 100% 50%; animation: marker .7s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: var(--d, .5s); }
@keyframes marker { to { transform: scaleX(1) skewX(-6deg); } }
.letter__text { padding: 54px 30px 30px; }
.letter__text blockquote { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 600; font-size: 1.32rem; line-height: 1.75; color: var(--ink); }
.letter__text .hl { background: linear-gradient(180deg, transparent 58%, rgba(255, 214, 64, .55) 58%, rgba(255, 214, 64, .55) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }
.mark-key { display: inline-block; width: 26px; height: 12px; border-radius: 4px; background: rgba(255, 214, 64, .7); vertical-align: middle; margin-inline-end: 4px; }
.letter__text blockquote::before { content: "”"; display: block; font-size: 4.4rem; line-height: .6; color: var(--coral); }
.letter__who { font-family: var(--font-hand); font-size: 1.45rem; color: var(--rust-deep); }
.letter__note { font-size: .85rem; color: var(--ink-soft); }

/* =========================================================
   TOUR – Lali's guide card
   ========================================================= */
.talk { transition: transform .08s linear; }
.lali-talking .talk { transform: translateY(calc(var(--talk, 0) * -7px)) rotate(calc(var(--talk, 0) * 4deg)) scale(calc(1 + var(--talk, 0) * .07)); }
.lali-talking .hero__lali img { transform: translateY(calc(var(--talk, 0) * -8px)) rotate(calc(var(--talk, 0) * -2deg)); }
.is-pop { animation: pop .45s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.tour { position: fixed; z-index: 950; left: 50%; bottom: 18px; width: min(640px, calc(100% - 24px)); transform: translate(-50%, 150%); transition: transform .55s cubic-bezier(.2, .9, .3, 1.2); }
.tour.is-on { transform: translate(-50%, 0); }
.tour__card { position: relative; display: flex; align-items: center; gap: 16px; background: #fffdf6 var(--tex-paper) 0 0 / 640px; border-radius: 3px; padding: 18px 20px 16px 16px; box-shadow: 0 24px 60px rgba(5, 40, 40, .38), 0 2px 3px rgba(0, 0, 0, .15); rotate: -.6deg; }
.tour__card::before { content: ""; position: absolute; top: -12px; inset-inline-start: 46px; width: 92px; height: 24px; rotate: -5deg; background: rgba(120, 200, 186, .66); clip-path: polygon(0 12%, 4% 0, 8% 14%, 92% 4%, 96% 14%, 100% 6%, 100% 92%, 96% 100%, 92% 88%, 8% 96%, 4% 86%, 0 98%); }
.tour__lali { width: 92px; height: 92px; flex-shrink: 0; object-fit: cover; object-position: 30% 15%; border-radius: 50%; background: #d4ece2; border: 3px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink); }
.tour__body { flex: 1; min-width: 0; }
.tour__step { margin: 0 0 2px; font-family: var(--font-hand); font-size: 1.15rem; line-height: 1; color: var(--coral-ink); }
.tour__text { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 600; font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.tour__ctrl { display: flex; align-items: center; gap: 10px; }
.tour__btn { border: 2px solid var(--ink); background: #fffdf7; color: var(--ink); border-radius: var(--hand-r); padding: .35em 1em; font-weight: 600; font-size: .95rem; box-shadow: 2px 2px 0 var(--ink); }
.tour__btn[disabled] { opacity: .35; }
.tour__x { margin-inline-start: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); display: grid; place-items: center; }
.tour__x svg { width: 16px; height: 16px; }
.is-touring .peek { display: none; }

/* =========================================================
   Simple pages (accessibility, privacy, 404)
   ========================================================= */
.page { min-height: 100svh; }
.page__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 32px, 900px); margin: 0 auto; padding: 18px 0; }
.page__body { position: relative; width: min(100% - 32px, 820px); margin: 10px auto 60px; background: #fffdf6 var(--tex-paper) 0 0 / 640px; border-radius: 3px; padding: clamp(28px, 5vw, 52px); box-shadow: var(--shadow-lift); }
.page__body h1 { font-weight: 900; }
.page__body h2 { font-size: 1.4rem; color: var(--rust-deep); margin-top: 1.4em; }
.page__body ul { padding-inline-start: 1.3em; display: grid; gap: 6px; margin-bottom: 1em; }
.page__date { color: var(--ink-soft); font-size: .9rem; margin-top: 2em; }
.page--lost { display: grid; place-items: center; }
.lost { position: relative; text-align: center; padding: 40px 20px; max-width: 640px; }
.lost__lali { width: 190px; height: 190px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; object-position: 32% 18%; background: #d4ece2; border: 5px solid #fffdf8; box-shadow: 0 0 0 2px var(--ink), 4px 6px 0 2px rgba(22, 64, 60, .2); animation: laliIdle 3s ease-in-out infinite; }
.lost__compass { position: absolute; width: 90px; top: 20px; inset-inline-end: 40px; animation: spin 6s ease-in-out infinite; }
.lost .lead { margin-inline: auto; }
@keyframes spin { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(25deg); } }

/* =========================================================
   REVEAL + motion preferences
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* going to another page of the site (accessibility, privacy, back home): the old page fades up, the new one rises in */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: pageOut .3s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: pageIn .5s cubic-bezier(0, 0, .2, 1) both; }
}
@keyframes pageOut { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .station__knot { opacity: 1; transform: translateX(-50%) scale(1); }
  .k-draw { stroke-dashoffset: 0; }
  .k-patch { opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .session__grid { grid-template-columns: 1fr; }
  .session__head { position: static; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .brand img { width: 64px; }
  .brand__text small { display: none; }
  .site-header__actions .ticket { display: none; }
  .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .hero__content { justify-self: center; text-align: center; margin-inline: auto; padding-block: 0 150px; }
  .hero__logo { display: none; }
  .hero__lead { margin-inline: auto; }
  .hero__ctas, .hero__marks { justify-content: center; }
  .hero__scribbles { text-align: start; }
  /* on phones Lali leads the hero (the logo already sits in the header) */
  .hero__lali-wrap { position: relative; order: -1; left: auto; bottom: auto; align-self: flex-end; width: min(42vw, 190px); margin: calc(var(--header-h) + 8px) 0 -4px 7vw; }
  .bubble--hero { left: 82%; top: 8%; font-size: 1.1rem; max-width: min(46vw, 210px); }
  .bubble--hero::after { left: -10px; bottom: 18px; transform: rotate(135deg); }
  .hero__butterfly { width: 40px; }
  .hero__dune { width: 92vw; height: 20%; }
  .hero__ship { left: 62%; top: -18%; }
  .hero__sea { height: 15%; }
  .hero__content { padding-bottom: 138px; }
  .hero__scribbles { font-size: 1.2rem; }
  .skill-panel__example { font-size: 1.16rem; }
  .skill-panel { padding: 26px 20px 18px; padding-inline-end: 56px; }
  .hero__palm--b { display: none; }
  .hero__palm--a { width: 200px; top: -4%; }
  .hero__scroll { display: none; }
  .why__grid, .feelings__grid, .compass-sec__grid, .books__grid, .media-sec__grid, .about__grid, .order__grid, .rules, .lali-letter__grid, .faq__grid { grid-template-columns: 1fr; }
  .ties { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; padding-top: 250px; width: 100%; max-width: 560px; }
  .ties__center { top: 0; translate: -50% 0; }
  .tag { position: relative; inset: auto !important; width: auto; }
  .tag .tag__hole { inset: -9px auto auto 50% !important; translate: -50% 0; }
  .ties__hint { position: static; translate: none; grid-column: 1 / -1; text-align: center; margin-top: 4px; }
  .station { grid-template-columns: 1fr; gap: 30px; }
  .station:nth-child(even) .station__plate { order: 0; }
  .station__plate { width: min(240px, 62vw); }
  .stations { gap: 110px; }
  .walker { width: 66px; }
  .pearls { inset: auto 50% 12px auto; top: auto; transform: translateX(50%) translateY(20px); }
  .pearls.is-active { transform: translateX(50%); }
  .pearls ol { display: none; }
  .pearls__count { font-size: 1.1rem; padding: 4px 14px 6px; background: rgba(0, 0, 0, .55); }
  .kit__items { grid-template-columns: 1fr 1fr; }
  .kit-item:nth-child(3n+2) { translate: none; }
  .kit-item:nth-child(even) { translate: 0 18px; }
  .kit__lali { position: relative; inset: auto; width: 120px; margin: 0 auto -10px; }
  .bubble--kit { inset-inline-end: 88%; font-size: 1.12rem; max-width: 180px; }
  .bottles { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .sm, .letter { grid-template-columns: 1fr; }
  .letter__scan { padding-top: 68px; } /* the scan starts below the close button, which would hide its corner */
  .sm__media { position: relative; min-height: 260px; }
  .sm__media img { max-height: 240px; }
  .order__lali { width: 150px; inset-inline-end: -10px; top: -20px; }
  .bubble--order { inset-inline-end: 120px; font-size: 1.15rem; }
  .passport__fields { grid-template-columns: 1fr; }
  .peek__lali { width: 150px; }
  .bubble--peek { margin-bottom: 96px; max-width: 210px; font-size: 1.12rem; }
  .lali-letter__art { order: 0; width: min(220px, 56vw); }
  .faq__head { position: static; }
  .tour__lali { width: 66px; height: 66px; }
  .tour__text { font-size: 1.02rem; }
  .books__hint { top: -40px; }
  .rules__extras { grid-template-columns: 1fr; }
  .compass { width: min(440px, 100%); padding: 48px 40px; }
  .compass__skill { font-size: 1.12rem; white-space: normal; width: max-content; max-width: 116px; text-align: center; line-height: 1.05; }
  .bubble--kit { inset-inline-end: auto; left: auto; right: calc(100% - 16px); top: -4px; max-width: 136px; }
  .bubble--kit::after { left: auto; right: -10px; bottom: 16px; transform: rotate(-45deg); }
  .hero__logo-wrap .stamp { display: none; }
  .hero__scribbles { justify-content: center; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 32px, var(--container)); }
  .hero__title { font-size: 2.25rem; }
  .ties { grid-template-columns: 1fr; padding-top: 236px; }
  .tally li { width: 44%; }
  .kit__items { gap: 26px 10px; padding-inline: 12px; }
  .kit-item__img { height: 112px; }
  .kit-item__tv { width: 150px; height: 118px; }
  .kit-item__doodle { width: 92px; height: 92px; margin: 10px 0 16px; }
  .kit-item b { font-size: 1.38rem; }
  .kit-item span:not(.kit-item__tv) { font-size: .86rem; }
  .books__shelf { gap: 20px; }
  .site-footer__grid { grid-template-columns: 1fr; text-align: center; }
  .site-footer__lali img { margin-top: 0; width: 130px; }
  .site-footer__list { justify-items: center; }
  .site-footer__brand img { margin-inline: auto; }
  .lesson { padding: 28px 20px 18px; padding-inline-end: 66px; }
  .notebook { background-position: 0 0, 0 22px; }
  .paper-letter__hello { padding-inline-end: 70px; }
  .post-stamp-wrap { transform: scale(.82); transform-origin: 0 0; inset-inline-end: 12px; }
  .postmark { display: none; }
  .faq__list { padding-inline-end: 54px; }
  .sign__board { padding-inline: 22px; }
}
.hero__scribbles-gefen { display: none; }
@media (max-width: 900px) { .hero__scribbles-gefen { display: list-item; } }

@media (max-width: 359px) {
  .kit__items { grid-template-columns: 1fr; }
  .kit-item:nth-child(even) { translate: none; }
}

/* watercolour washes behind the pictures – the journal is painted, not printed */
.feelings__game { position: relative; isolation: isolate; }
.feelings__game::before { content: ""; position: absolute; z-index: -1; inset: -6% 4% 18%; background: url(../img/paper/wash-pink.webp) center / 100% 100% no-repeat; opacity: .55; rotate: 6deg; }
.books__shelf::before { content: ""; position: absolute; z-index: -1; inset: -10% 2% 8%; background: url(../img/paper/wash-sky.webp) center / 100% 100% no-repeat; opacity: .45; rotate: -4deg; }
.books__shelf { isolation: isolate; }
.faq__lali::before { content: ""; position: absolute; z-index: -1; inset: -20% -40% -16% -30%; background: url(../img/paper/wash-mint.webp) center / 100% 100% no-repeat; opacity: .6; }
.faq__lali { isolation: isolate; }
.compass__dial::before { content: ""; position: absolute; z-index: -1; inset: -14%; background: url(../img/paper/wash-sand.webp) center / 100% 100% no-repeat; opacity: .55; rotate: 12deg; }
.compass__dial { isolation: isolate; }

/* =========================================================
   PEEK-OVER – every now and then Lali peeks over the top of a page:
   eyes above the edge, fingers hooked over it
   ========================================================= */
.peekover { position: absolute; z-index: 6; top: 0; inset-inline-end: var(--px, 14%); width: 132px; height: 71px; translate: 0 -100%; pointer-events: none; }
.peekover--start { inset-inline-end: auto; inset-inline-start: var(--px, 18%); }
.peekover__win { position: absolute; inset: 0; overflow: hidden; pointer-events: auto; cursor: pointer; }
.peekover__head { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform: translateY(104%); transition: transform .55s cubic-bezier(.2, .9, .3, 1.25); }
.peekover.is-up .peekover__head { transform: translateY(0); animation: peekBob 2.6s ease-in-out .7s infinite; }
@keyframes peekBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(5%) rotate(-2.5deg); } }
.peekover__fingers { position: absolute; top: calc(100% - 4px); left: 6%; width: 34px; height: auto; scale: 1 0; transform-origin: 50% 0; transition: scale .3s ease .3s; pointer-events: none; }
.peekover__fingers--b { left: auto; right: 6%; transform: scaleX(-1); }
.peekover.is-up .peekover__fingers { scale: 1 1; animation: tap 1.4s ease-in-out 1s infinite; }
.peekover.is-up .peekover__fingers--b { animation-delay: 1.35s; }
@keyframes tap { 0%, 100% { scale: 1 1; } 50% { scale: 1 .8; } }
/* the bubble always opens toward the middle of the page, so it never runs off the screen */
.peekover__bubble { bottom: calc(100% + 6px); left: 12%; width: max-content; max-width: min(230px, 62vw); font-size: 1.16rem; padding: 8px 14px 10px; opacity: 0; scale: .7; transform-origin: 20% 100%; transition: opacity .3s, scale .4s cubic-bezier(.2, .9, .3, 1.5); pointer-events: none; --tail-x: 26px; }
.peekover--start .peekover__bubble { left: auto; right: 12%; transform-origin: 80% 100%; --tail-x: calc(100% - 46px); }
.peekover.is-talking .peekover__bubble { opacity: 1; scale: 1; }

/* =========================================================
   SURPRISE – around the corner of the screen, hanging from the top,
   or walking across the bottom
   ========================================================= */
.surprise { position: fixed; inset: 0; z-index: 880; pointer-events: none; overflow: hidden; } /* under the header strip, so she hangs from it */
.sp { position: absolute; pointer-events: none; }
.sp.is-on { pointer-events: auto; cursor: pointer; }
.sp__img { display: block; width: 100%; height: auto; }
.sp__bubble { width: max-content; max-width: 230px; font-size: 1.2rem; opacity: 0; scale: .7; transition: opacity .3s, scale .4s cubic-bezier(.2, .9, .3, 1.5); pointer-events: none; }
.sp.is-talking .sp__bubble { opacity: 1; scale: 1; }
.sp:not(.is-on) .sp__bubble { visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
/* around the corner of the right (or left) edge of the screen */
.sp--side { right: 0; top: var(--y, 32vh); width: 152px; transform: translateX(106%); transition: transform .75s cubic-bezier(.2, .9, .3, 1.2); }
.sp--side.is-on { transform: translateX(0); }
.sp__fig { position: relative; display: block; filter: drop-shadow(-6px 8px 12px rgba(0, 0, 0, .2)); }
.sp--side .sp__hand { position: absolute; inset: 0; transform-origin: 69.8% 93%; }
.sp--side.is-on .sp__hand { animation: wave 1.1s ease-in-out .8s 3; }
.sp--side .sp__bubble { top: 8%; right: calc(100% + 4px); transform-origin: 100% 50%; }
.sp--side .sp__bubble::after { left: auto; right: -10px; bottom: auto; top: 22px; transform: rotate(-45deg); }
.sp--side.is-left { right: auto; left: 0; transform: translateX(-106%); }
.sp--side.is-left.is-on { transform: translateX(0); }
.sp--side.is-left .sp__fig { transform: scaleX(-1); }
.sp--side.is-left .sp__bubble { right: auto; left: calc(100% + 4px); transform-origin: 0 50%; }
.sp--side.is-left .sp__bubble::after { right: auto; left: -10px; transform: rotate(135deg); }
/* hanging upside down from the top */
.sp--hang { top: var(--top, 0px); left: var(--x, 30%); width: 112px; transform: translateY(calc(-100% - var(--top, 0px) - 40px)); transition: transform .85s cubic-bezier(.3, 1.4, .5, 1), top .35s ease; }
.sp--hang:not(.is-on) { transition-timing-function: cubic-bezier(.6, -.3, .7, .4); }
.sp--hang.is-on { transform: translateY(-6%); }
.sp--hang .sp__img { transform-origin: 50% 0; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .18)); }
.sp--hang.is-on .sp__img { animation: hangSwing 2.6s ease-in-out .9s infinite; }
@keyframes hangSwing { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.sp--hang .sp__bubble { top: calc(100% + 12px); left: 50%; translate: -50% 0; transform-origin: 50% 0; }
/* walking across the bottom of the screen */
.sp--walk { bottom: 4px; right: -140px; width: 104px; }
.sp--walk .sp__img { transform: scaleX(-1); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .2)); }
.sp--walk.is-on { animation: walkAcross 9s linear forwards; }
.sp--walk.is-on .sp__img { animation: walkBob .45s ease-in-out infinite alternate; }
@keyframes walkAcross { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 180px)); } }
@keyframes walkBob { from { translate: 0 0; rotate: -2deg; } to { translate: 0 -6px; rotate: 2deg; } }
.sp--walk .sp__bubble { bottom: calc(100% + 8px); left: -20px; transform-origin: 30% 100%; }
/* one Lali at a time: the corner companion steps aside during a surprise */
.lali-surprise .peek .peek__lali { transform: translateY(105%) rotate(12deg); }
.lali-surprise .peek .bubble--peek { opacity: 0; }
/* the corner companion comes and goes */
.peek.is-out.is-away .peek__lali { transform: translateY(105%) rotate(12deg); transition-duration: .6s; }
@media (max-width: 900px) {
  .sp--side { width: 118px; }
  .sp--hang { width: 92px; }
  .sp--walk { width: 84px; }
  .sp__bubble { font-size: 1.08rem; max-width: 190px; }
  .peekover { width: 112px; height: 60px; }
  .peekover__fingers { width: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .surprise { display: none; }
}