/* ============================================================
   The Wainer Tour — Apple-dark.

   Same site, same class names, same markup contract. What changed is the
   design language: Apple's, applied honestly rather than quoted.

   The five rules this sheet is built on, in Apple's own order of priority:

     1. Deference      The chrome recedes; photographs and content lead.
                       Translucent materials, hairline separators, no
                       decorative borders competing with the picture.
     2. Clarity        One type family, a real scale, tight tracking that
                       tightens further as size grows. Legibility at every
                       size, in both scripts.
     3. Depth          Elevation is expressed by surface lightness and blur,
                       never by drop shadows pretending to be paper.
     4. Consistency    One radius scale, one spacing grid (8pt), one accent.
                       A control looks the same wherever it appears.
     5. Direct manipulation
                       Everything tappable is at least 44×44, responds to
                       touch within 100ms, and settles with Apple's easing.

   What was deliberately dropped from the editorial version: the 5px ivory
   frames, the wide-tracked uppercase on body-level text, the Playfair
   display face, and the hard-cornered boxes. Apple does not frame things.

   Bilingual EN + HE. Logical properties throughout, so RTL mirrors free.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* ---- Surfaces ----
     Apple's dark mode is built on true black with neutral grey elevations.
     The warmth in this site comes from the photographs and the accent, not
     from tinted chrome — that is what keeps it reading as Apple rather than
     as a sepia theme. */
  --ink:        #000000;   /* the page itself */
  --surface:    #1C1C1E;   /* elevated once: cards, panels */
  --surface-2:  #2C2C2E;   /* elevated twice: fields, menus */
  --surface-3:  #3A3A3C;   /* elevated three: tiles, chips */

  /* System fills — for controls that sit ON a surface rather than beside it */
  --fill:       rgba(120, 120, 128, 0.24);
  --fill-2:     rgba(120, 120, 128, 0.16);
  --fill-3:     rgba(120, 120, 128, 0.10);

  /* ---- Labels ----
     Apple expresses hierarchy with opacity on one ink, not with four
     different greys. Secondary and below are translucent so they sit
     correctly on any surface they land on. */
  --text:       #F5F5F7;
  --text-dim:   rgba(235, 235, 245, 0.62);
  --text-faint: rgba(235, 235, 245, 0.34);
  --text-quiet: rgba(235, 235, 245, 0.20);

  /* ---- Separators ----
     Hairlines, not borders. The opaque one is for list rows where content
     scrolls beneath; the soft one for everything else. */
  --line:       rgba(255, 255, 255, 0.14);
  --line-soft:  rgba(255, 255, 255, 0.07);
  --frame:      rgba(255, 255, 255, 0.18);

  /* ---- Accent ----
     The brass, kept, but lifted for legibility against true black and used
     the way Apple uses a tint: sparingly, and almost always on type or a
     single filled control per view. */
  --brass:      #D4A24C;
  --brass-lit:  #EFCD93;
  --brass-dim:  rgba(212, 162, 76, 0.16);
  --sand:       #E0D3BC;
  --on-brass:   #1A1206;   /* ink that sits on a filled accent control */

  /* System colours, dark variants */
  --red:        #FF453A;
  --red-soft:   rgba(255, 69, 58, 0.16);
  --green:      #30D158;

  /* ---- Type ----
     SF Pro where it exists (every Apple device), Inter as the cross-platform
     stand-in — it shares SF's proportions and tight default tracking, so the
     layout does not shift between a Mac and a PC. Assistant carries Hebrew:
     humanist, same x-height family, and it already shipped with this site. */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Assistant", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Assistant", "Segoe UI", system-ui, sans-serif;
  --font-body: var(--font-text);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Apple's text styles, fluid where a display size earns it. The names are
     kept from the old sheet (--step-N) so nothing downstream breaks. */
  --step--2: 0.6875rem;                                    /* 11 — caption 2 */
  --step--1: 0.8125rem;                                    /* 13 — footnote  */
  --step-0:  1.0625rem;                                    /* 17 — body      */
  --step-1:  clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);    /* 20–22 — title 3 */
  --step-2:  clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);      /* 24–30 — title 2 */
  --step-3:  clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);     /* 30–44 — title 1 */
  --step-4:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);        /* 40–72 — display */
  --step-5:  clamp(2.75rem, 1.4rem + 5.6vw, 6rem);         /* 44–96 — hero    */

  /* Tracking tightens as size grows — the single most Apple thing about type */
  --track-hero:    -0.035em;
  --track-display: -0.028em;
  --track-title:   -0.021em;
  --track-body:    -0.011em;
  --track-label:    0.02em;   /* small caps labels open up slightly instead */

  /* ---- Spacing: 8pt grid ---- */
  --sp-1: 0.5rem;    /*  8 */
  --sp-2: 0.75rem;   /* 12 */
  --sp-3: 1.25rem;   /* 20 */
  --sp-4: 2rem;      /* 32 */
  --sp-5: 3rem;      /* 48 */
  --sp-6: 4.5rem;    /* 72 */
  --sp-7: 7rem;      /* 112 */

  /* ---- Radii ----
     Apple's continuous corners. The pill is the button shape; everything
     rectangular steps through 8 / 12 / 18 / 26 by how large the thing is. */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 980px;

  /* ---- Materials ----
     The nav bar, the sheets and the card over the hero are all the same
     material at different opacities. Blur plus saturation is what makes it
     read as frosted glass rather than as a translucent rectangle. */
  --mat-thin:    saturate(180%) blur(20px);
  --mat-thick:   saturate(180%) blur(40px);
  --mat-chrome:  rgba(22, 22, 23, 0.72);
  --mat-card:    rgba(28, 28, 30, 0.62);
  --mat-sheet:   rgba(28, 28, 30, 0.86);

  /* ---- Motion ----
     --ease is the standard; --ease-out is for things entering; --spring is
     for sheets and anything that should feel physical. */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring:   cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast:   0.18s;
  --t-base:   0.28s;
  --t-slow:   0.5s;

  /* ---- Layout ---- */
  --rail: clamp(1.25rem, 5vw, 2.75rem);
  --maxw: 69.25rem;    /* 1108 — close to apple.com's 980 + gutters */
  --maxw-read: 42rem;  /* a comfortable measure for prose */
  --nav-h: 3rem;
}

/* Hebrew: same system, Assistant leading. It carries weight well, so the
   display sizes do not need a different face — only slightly looser tracking,
   because Hebrew letterforms have no ascender/descender rhythm to tighten
   against and go muddy if treated like Latin caps. */
html[lang="he"] {
  --font-display: "Assistant", -apple-system, BlinkMacSystemFont, "SF Hebrew",
                  "Segoe UI", system-ui, sans-serif;
  --font-text:    "Assistant", -apple-system, BlinkMacSystemFont, "SF Hebrew",
                  "Segoe UI", system-ui, sans-serif;
  --track-hero:    -0.02em;
  --track-display: -0.015em;
  --track-title:   -0.01em;
  --track-body:     0;
  --track-label:    0.01em;
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* A display: rule on a class outranks the UA's [hidden] rule — make it stick. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--track-title);
}
p { margin: 0; }

button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button { color: inherit; background: none; border: 0; cursor: pointer; }

/* Apple colours links rather than underlining them, and brings the underline
   back on hover — an underline on every phone number and address turns a
   contact card into a ransom note. */
a { color: var(--brass-lit); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }

/* Apple's focus ring: a soft halo rather than a hard outline. Keyboard only. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.45);
  border-radius: var(--r-xs);
}

::selection { background: var(--brass); color: var(--on-brass); }

.skip {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0;
  z-index: 999;
  background: var(--brass); color: var(--on-brass);
  padding: 0.75rem 1.25rem;
  border-end-end-radius: var(--r-sm);
  font-weight: 600;
}
.skip:focus { inset-inline-start: 0; }

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

/* ============================================================
   3. SHARED
   ============================================================ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--rail); }

/* The small caps label. Apple uses these sparingly — a section kicker, a
   field label — never for body text, and never at 0.32em. */
.eyebrow {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}

.rule { height: 1px; background: var(--line-soft); border: 0; margin-block: var(--sp-5); }

/* Numerals stay LTR + tabular even in Hebrew — dates and codes must not reorder */
.num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
  font-size: 0.94em;
  letter-spacing: 0;
}

/* ============================================================
   4. TOP BAR — the chrome, as a material
   ============================================================ */
.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--nav-h);
  padding: 0 var(--rail);
  padding-block: 0.25rem;
  /* Over a hero the bar is not glass yet, but the photograph underneath can
     be anything — so it carries a scrim of its own until it is. */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  transition: background var(--t-base) var(--ease),
              backdrop-filter var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  border-block-end: 1px solid transparent;
}
/* Over the hero it is invisible; the moment the page moves under it, it
   becomes glass. That transition is the signature. */
.topbar.solid {
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--mat-thin);
  backdrop-filter: var(--mat-thin);
  border-block-end-color: var(--line-soft);
}
/* Without blur support, fall back to something opaque enough to read on */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar.solid { background: rgba(22, 22, 23, 0.96); }
}

.mark {
  min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--text);
  text-decoration: none;
  opacity: 0.92;
  transition: opacity var(--t-fast) var(--ease);
}
.mark:hover { opacity: 1; text-decoration: none; }
/* The route, at the size of a line of text. It carries its own colours
   rather than currentColor: the two brasses are the mark, and letting it
   inherit the bar's ink would make it a different logo. */
.mark__i { width: 26px; height: 20px; flex: none; }
@media (max-width: 46rem) { .mark__i { width: 22px; height: 17px; } }

/* ---- Trip tabs ---- */
.tabs {
  display: flex; align-items: center; gap: 0.125rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  min-height: 34px; display: inline-flex; align-items: center;
  padding-inline: 0.75rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  text-decoration: none;
  color: var(--text-dim);
  scroll-snap-align: start;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text); background: var(--fill-3); text-decoration: none; }
/* The selected tab is a filled pill, the way a segmented control marks its
   selection — not an underline. */
.tab--on {
  color: var(--text);
  background: var(--fill);
}
.tab--on:hover { background: var(--fill); }

/* ---- Language: a segmented control ---- */
.langtoggle {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 2px;
  background: var(--fill-2);
  border-radius: var(--r-pill);
}
.langtoggle button {
  min-width: 2.75rem; min-height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.langtoggle button:hover { color: var(--text); }
.langtoggle button[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-3);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

@media (max-width: 46rem) {
  .topbar { flex-wrap: wrap; row-gap: 0; padding-block: 0.25rem 0; }
  .tabs { order: 3; width: 100%; padding-block-end: 0.25rem; }
  .mark { font-size: var(--step--2); }
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 32% 38%; }

/* A deeper, simpler scrim than the editorial version: Apple darkens for
   legibility and stops there, rather than vignetting for mood. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,0.72) 26%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.45) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: var(--sp-7) var(--sp-5);
}

/* ---- The plate ----
   Was a 5px ivory frame. It is now a material: the photograph stays visible
   through it, and the type sits on glass. Deference, rule one. */
.plate {
  max-width: 44rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--mat-card);
  -webkit-backdrop-filter: var(--mat-thick);
  backdrop-filter: var(--mat-thick);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plate { background: rgba(28, 28, 30, 0.92); }
}

.plate__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: var(--track-hero);
  line-height: 1.04;
  text-transform: none;
  margin-block-end: 0.5rem;
}

.plate__names {
  font-size: var(--step-1);
  font-weight: 500;
  font-style: normal;
  letter-spacing: var(--track-title);
  color: var(--sand);
  margin-block-end: 0.5rem;
}

.plate__meta {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-dim);
}

/* ---- Countdown ---- */
.countdown {
  margin-block-start: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 24rem;
}
.cd {
  min-width: 0;
  padding: 0.625rem 0.375rem;
  text-align: center;
  background: var(--fill-2);
  border-radius: var(--r-md);
}
.cd__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cd__l {
  display: block;
  margin-block-start: 0.125rem;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.cd--done {
  grid-column: 1 / -1;
  padding-block: 0.5rem 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--track-title);
  color: var(--brass-lit);
  text-align: start;
}

.scrollhint {
  margin-block-start: var(--sp-4);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-faint);
}
.scrollhint svg { animation: bob 2.4s var(--ease-out) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================================================
   6. SECTION FURNITURE
   ============================================================ */
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }

.sechead { margin-block-end: var(--sp-4); max-width: var(--maxw-read); }
.sechead h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.07;
  margin-block: 0.5rem 0.625rem;
}
.sechead p { color: var(--text-dim); font-size: var(--step-0); line-height: 1.55; }

/* ============================================================
   7. JOURNEY SUMMARY
   ============================================================ */
/* Was a hairline-gridded table. Apple would make these separate cards with
   air between them, not cells sharing a border. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  background: none;
  border: 0;
}
.stat {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}
.stat__n {
  display: block; line-height: 1;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: var(--track-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__l {
  display: block;
  margin-block-start: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-dim);
}

/* Route strip */
.route {
  margin-block-start: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem;
  align-items: center;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-dim);
}
.route__dot { color: var(--text-quiet); }
.route a {
  color: inherit; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  padding-inline: 0.25rem;
  border-radius: var(--r-xs);
  transition: color var(--t-fast) var(--ease);
}
.route a:hover { color: var(--brass-lit); text-decoration: none; }

/* ============================================================
   8. FLIGHTS
   ============================================================ */
.flightstack { display: grid; gap: 0.75rem; }

.flight {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .flight { grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--sp-4); }
}

.flight__route { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.port__code {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--text);
}
.port__city {
  margin-block-start: 0.25rem;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-faint);
}
.port__time {
  margin-block-start: 0.5rem;
  color: var(--brass-lit);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.port__date { font-size: var(--step--1); color: var(--text-dim); }

.flight__arrow { flex: 1; min-width: 3rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-faint); }
.flight__arrow .line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
html[dir="rtl"] .flight__arrow svg { transform: scaleX(-1); }

.flight__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-3); }
.fact__l {
  display: block;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.fact__v { color: var(--text); font-weight: 500; }

/* ---- The connector strip between places ---- */
.hop {
  background: none;
  border-block: 0;
}
.hop__inner {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--sp-2) var(--rail);
  color: var(--text-dim);
  font-size: var(--step--1);
}
.hop__icon { width: 18px; height: 18px; color: var(--text-faint); flex: none; }
.hop__leg {
  color: var(--text-dim);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
}
.hop__time { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hop__no { color: var(--text-faint); margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* ============================================================
   9. STAY CHAPTERS
   ============================================================ */
.stay {
  position: relative;
  min-height: 86svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: var(--sp-5);
}
.stay__media { position: absolute; inset: 0; }
.stay__media img { width: 100%; height: 100%; object-fit: cover; }
.stay__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 52%, rgba(0,0,0,0.2) 100%),
    linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 52%);
}
html[dir="rtl"] .stay__media::after,
.stay--alt .stay__media::after {
  background:
    linear-gradient(to left, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 52%, rgba(0,0,0,0.2) 100%),
    linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 52%);
}
html[dir="rtl"] .stay--alt .stay__media::after {
  background:
    linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 52%, rgba(0,0,0,0.2) 100%),
    linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 52%);
}

.stay__inner { position: relative; width: 100%; }
.stay--alt .stay__card { margin-inline-start: auto; }

/* The stay card — the same material as the hero plate, one step smaller */
.stay__card {
  max-width: 33rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--mat-card);
  -webkit-backdrop-filter: var(--mat-thick);
  backdrop-filter: var(--mat-thick);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stay__card { background: rgba(28, 28, 30, 0.93); }
}

.stay__no {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}
.stay__name {
  margin-block: 0.375rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.06;
  text-transform: none;
}
.stay__place {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-dim);
}

.stay__dates {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
}
.stay__range {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--track-title);
  color: var(--text);
}
.stay__nights {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--brass-lit);
}
.stay__room { color: var(--text-dim); font-size: var(--step--1); width: 100%; }

/* ---- Amenity tiles ---- */
.tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: var(--sp-3); }
.tile {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--fill-2);
  border: 0;
  border-radius: var(--r-md);
  color: var(--text-dim);
}
.tile:first-child { background: var(--brass); color: var(--on-brass); }
.tile svg { width: 20px; height: 20px; }

/* ---- Disclosure ---- */
.disclose { margin-block-start: var(--sp-3); }
.disclose__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 36px;
  padding: 0.375rem 0.875rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  transition: background var(--t-fast) var(--ease);
}
.disclose__btn:hover { background: var(--fill); }
.disclose__btn:active { transform: scale(0.97); }
.disclose__btn svg { width: 13px; height: 13px; transition: transform var(--t-base) var(--spring); }
.disclose__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.disclose__panel {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line-soft);
  display: grid; gap: var(--sp-2);
}
.disclose__panel[hidden] { display: none; }

/* ---- Key/value rows ----
   Apple's grouped-list idiom: label quiet on the leading edge, value on the
   trailing, hairline between rows.

   `minmax(min-content, max-content)` on the label column and `minmax(0, 1fr)`
   on the value both stop at min-content — and an email address has no break
   opportunity, so its min-content width is the whole address. That widened
   the page, and a wider page widens every position:fixed element with it,
   which is what let a phone pan sideways. Both columns may be narrower than
   their contents, and the values may break anywhere. */
.kv {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) minmax(0, 1fr);
  gap: 0.5rem 1rem; align-items: baseline;
  margin: 0;
}
.kv dt {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-faint);
}
.kv dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.kv dd a {
  color: var(--brass-lit);
  min-height: 44px; display: inline-flex; align-items: center;
  max-width: 100%; overflow-wrap: anywhere;
}

/* .num forces direction: ltr so digits never reorder. On a block that also
   pins the text to the left, which in Hebrew is the far edge from where you
   are reading. This used to be a hand-kept list of the blocks it happened
   to; the list had already missed one, and the hero's dates sat alone on the
   wrong side of the plate because of it. One rule instead: wherever .num
   lands on a block in RTL, it still hugs the reading edge.
   (On an inline .num this does nothing, which is correct — text-align only
   applies to block containers.) */
html[dir="rtl"] .num { text-align: right; }

/* ============================================================
   10. DESTINATIONS — the trip as a list of places
   ============================================================ */
.dest { border-block-end: 1px solid var(--line-soft); }
.dest:first-child { border-block-start: 1px solid var(--line-soft); }

.dest__head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--rail);
  background: none; border: 0; cursor: pointer;
  color: var(--text); text-align: start; font: inherit;
  transition: background var(--t-fast) var(--ease);
}
.dest__head:hover { background: var(--fill-3); }
.dest__head:active { background: var(--fill-2); }
.dest__head > svg {
  margin-inline-start: auto; flex: none;
  width: 18px; height: 18px;
  color: var(--text-faint);
  transition: transform var(--t-base) var(--spring);
}
.dest__head[aria-expanded="true"] > svg { transform: rotate(180deg); }

.dest__no {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: var(--track-title);
  color: var(--text-quiet);
  font-variant-numeric: tabular-nums;
}
.dest__title { display: grid; gap: 0.25rem; min-width: 0; }
.dest__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.08;
}
.dest__meta { font-size: var(--step--1); color: var(--text-faint); overflow-wrap: anywhere; }
.dest__body[hidden] { display: none; }

/* ============================================================
   11. CONTACTS + FOOTER
   ============================================================ */
.contacts { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.contact {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}
.contact h3 {
  margin-block-end: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--track-title);
}
.contact a { display: inline-flex; align-items: center; min-height: 44px; }

.foot {
  border-block-start: 1px solid var(--line-soft);
  padding-block: var(--sp-5);
  color: var(--text-faint);
  font-size: var(--step--1);
  text-align: center;
}
.foot__mark {
  display: block;
  margin-block-end: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--track-title);
  text-transform: none;
  color: var(--text-dim);
}
.foot__where {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-faint);
}

/* ============================================================
   11b. TAKE IT WITH YOU — the PDF export
   ============================================================ */
.takeaway {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
}
.takeaway__text { flex: 1 1 18rem; min-width: 0; }
.takeaway__h {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
  margin-block-end: 0.5rem;
}
.takeaway__p { color: var(--text-dim); font-size: var(--step--1); line-height: 1.55; max-width: 34rem; }
.takeaway__go { flex: none; min-height: 44px; padding-inline: 1.5rem; font-size: var(--step-0); }

/* ============================================================
   12. REVEAL
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   13. BUTTONS — one control, used everywhere
   ============================================================ */
.gal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 36px;
  padding: 0.375rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.gal-btn:hover { background: var(--fill); text-decoration: none; }
.gal-btn:active { transform: scale(0.97); }
.gal-btn[disabled] { opacity: 0.4; cursor: default; }
.gal-btn[disabled]:active { transform: none; }

.gal-btn--primary {
  background: var(--brass);
  color: var(--on-brass);
  font-weight: 600;
}
.gal-btn--primary:hover { background: var(--brass-lit); }

.gal-btn--danger { background: var(--red-soft); color: var(--red); }
.gal-btn--danger:hover { background: rgba(255, 69, 58, 0.26); }

.gal-btn input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.gal-btn:focus-within { box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.45); }

/* Text fields, everywhere one appears */
.gate__field input,
.gal-field select,
.pin-note,
.pin-dest select,
.destpins__move select,
.pindlg textarea,
.pindlg select,
.lb__say input,
.recs__form input {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding-inline: 0.75rem;
  min-height: 36px;
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: var(--track-body);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gate__field input:focus,
.gal-field select:focus,
.pin-note:focus,
.pin-dest select:focus,
.destpins__move select:focus,
.pindlg textarea:focus,
.pindlg select:focus,
.lb__say input:focus,
.recs__form input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.22);
}
::placeholder { color: var(--text-faint); }

/* ============================================================
   14. GALLERY
   ============================================================ */
.gal-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-block-end: var(--sp-3);
}
.gal-field select { max-width: 14rem; }
.gal-meta { color: var(--text-faint); font-size: var(--step--1); margin-inline-start: auto; }
.gal-up-msg { flex-basis: 100%; margin-block-start: 0.375rem; font-size: var(--step--1); color: var(--text-dim); }

.gal-setup {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  max-width: var(--maxw-read);
}
.gal-setup h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  margin-block-end: 0.5rem;
}
.gal-setup p { color: var(--text-dim); margin-block-end: var(--sp-3); }
.gal-steps { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; color: var(--text-dim); }
.gal-steps li::marker { color: var(--brass); }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}
.gal-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
}
.gal-cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease);
}
.gal-cell:hover img { transform: scale(1.04); }
.gal-cell__cap, .gal-cell__tag {
  position: absolute; inset-inline: 0;
  padding: 0.5rem 0.625rem;
  font-size: var(--step--2);
  color: var(--text);
  text-align: start;
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
}
.gal-cell__cap { inset-block-end: 0; }
.gal-cell__tag {
  inset-block-start: 0; inset-block-end: auto;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
  color: var(--text-dim);
}
.gal-empty {
  color: var(--text-faint); text-align: center;
  padding-block: var(--sp-4); font-size: var(--step--1);
}
.gal-empty--err { color: var(--red); }

/* ---- Lightbox ---- */
.lb {
  border: 0; padding: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  background: transparent;
  overflow: hidden;
}
.lb::backdrop {
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.lb__fig {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb__fig img {
  max-width: 100%; max-height: 72vh;
  object-fit: contain;
  border-radius: var(--r-md);
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.lb__fig img.is-loading { filter: blur(8px); opacity: 0.6; }

.lb__cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  font-size: var(--step--1);
  color: var(--text-dim);
}
.lb__cap a { min-height: 44px; display: inline-flex; align-items: center; }

/* Circular glass controls — Apple's overlay button */
.lb__x, .lb__nav {
  position: absolute; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(60, 60, 67, 0.6);
  -webkit-backdrop-filter: var(--mat-thin);
  backdrop-filter: var(--mat-thin);
  color: var(--text);
  font-size: 1.35rem; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lb__x:hover, .lb__nav:hover { background: rgba(90, 90, 97, 0.8); }
.lb__x:active, .lb__nav:active { transform: scale(0.92); }
.lb__x { inset-block-start: 1rem; inset-inline-end: 1rem; }
.lb__nav { inset-block-start: 50%; transform: translateY(-50%); }
.lb__nav:active { transform: translateY(-50%) scale(0.92); }
.lb__nav--prev { inset-inline-start: 1rem; }
.lb__nav--next { inset-inline-end: 1rem; }

.lb__del {
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--text-faint);
  font: inherit; font-size: var(--step--1);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lb__del:hover:not(:disabled) { background: var(--red-soft); color: var(--red); }
.lb__del:disabled { opacity: 0.4; cursor: default; }

/* ---- Hearts and comments ---- */
.lb__talk {
  max-width: 52rem; margin-inline: auto; width: 100%;
  border-block-start: 1px solid var(--line-soft);
  margin-block-start: var(--sp-2); padding-block-start: var(--sp-2);
}
.lb__talkbar { display: flex; align-items: center; gap: var(--sp-2); }
.lb__talkmsg { font-size: var(--step--1); color: var(--red); }

.heart {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 36px; padding-inline: 0.75rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--text-dim);
  cursor: pointer; font: inherit;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--spring);
}
.heart__i { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.heart:hover { background: var(--fill); color: var(--text); }
.heart:active { transform: scale(0.92); }
.heart.is-on { color: var(--red); background: var(--red-soft); }
.heart.is-on .heart__i { fill: currentColor; stroke: currentColor; }
.heart__n { font-size: var(--step--1); font-variant-numeric: tabular-nums; }

.lb__comments {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  max-height: 8.5rem; overflow-y: auto;
  display: grid; gap: 0.5rem;
}
.lb__comments li {
  display: flex; gap: 0.5rem; align-items: baseline;
  font-size: var(--step--1); color: var(--text-dim);
}
.lb__who { color: var(--sand); flex: none; font-weight: 500; }
.lb__what { overflow-wrap: anywhere; }
.lb__none { color: var(--text-faint); }
.lb__x2 {
  margin-inline-start: auto; flex: none;
  background: none; border: 0; cursor: pointer;
  color: var(--text-faint); font-size: 1.1rem; line-height: 1;
  min-width: 32px; min-height: 32px;
  border-radius: 50%;
}
.lb__x2:hover { color: var(--red); background: var(--fill-3); }

.lb__say { display: flex; gap: 0.5rem; margin-block-start: var(--sp-2); }
.lb__say input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 46rem) {
  .lb__comments { max-height: 6rem; }
  .lb__fig img { max-height: 60vh; }
}

/* ============================================================
   15. TODAY CARD
   ============================================================ */
.td {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-4);
}
.td__kicker {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}
.td__head {
  margin-block: 0.375rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
}
.td__sub { color: var(--text-dim); font-size: var(--step-0); }
.td__row {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--sp-2);
  font-size: var(--step--1);
}
.td__link { color: var(--brass-lit); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.td__next { color: var(--text); }
.td__left { color: var(--text-faint); margin-inline-start: auto; }

.stay--here .stay__card { border-color: var(--brass); }

/* ============================================================
   16. HOME — the landing page
   ============================================================ */
.hhero {
  position: relative;
  min-height: min(76svh, 40rem);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hhero__media { position: absolute; inset: 0; }
.hhero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* the hero is wider than the photo's crop, so most of the vertical is cut;
     bias high or their heads go with it */
  object-position: 32% 14%;
}
/* The couple stand on the left of this photo and it never mirrors, so the
   shading and the plate stay on the right in both reading directions —
   flipping them for RTL would drop the plate straight onto their faces. */
.hhero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,0.72) 22%, rgba(0,0,0,0.12) 58%, rgba(0,0,0,0.4) 100%),
    linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0.02) 62%);
}
.hhero__inner {
  position: relative;
  width: 100%;
  /* keep this modest: anything larger grows the hero itself and cancels
     the negative lift the card grid uses to rise onto the photo */
  padding-block: var(--sp-6) var(--sp-7);
}

/* The trip titles are single words ("Thailand"); the site name is three, so at
   the same size it wraps three deep and buries the photo. */
.hhero .plate {
  max-width: 32rem;
  margin-left: auto;   /* physical, not logical: keeps it clear of them in Hebrew too */
}
.hhero .plate__title {
  font-size: clamp(2rem, 1rem + 3.6vw, 3.75rem);
  letter-spacing: var(--track-display);
  line-height: 1.04;
}

.homepick {
  position: relative;
  z-index: 2;
  margin-block-start: clamp(-9rem, -14vh, -5rem);
  padding-block-end: var(--sp-5);
}
.homepick__lead { margin-block-end: var(--sp-3); }

.tripgrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.tripcard {
  display: block;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base) var(--spring), background var(--t-base) var(--ease);
}
.tripcard:hover { transform: translateY(-4px); background: var(--surface-2); text-decoration: none; }
.tripcard:active { transform: translateY(-1px) scale(0.995); }
.tripcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.tripcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.tripcard:hover .tripcard__media img { transform: scale(1.05); }
.tripcard__body { padding: var(--sp-3); }
.tripcard__badge {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tripcard--now .tripcard__badge { color: var(--brass-lit); }
.tripcard--soon .tripcard__badge { color: var(--brass); }
.tripcard--past .tripcard__badge { color: var(--text-quiet); }
.tripcard__name {
  margin-block: 0.375rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
}
.tripcard__meta { color: var(--text-dim); font-size: var(--step--1); }

/* cards need a solid ground where they sit on the photo */
.homepick .tripcard { box-shadow: 0 20px 48px rgb(0 0 0 / 0.5); }

@media (max-width: 46rem) {
  .hhero { min-height: min(70svh, 32rem); }
  .homepick { margin-block-start: clamp(-8rem, -12vh, -4.5rem); }
}

/* ============================================================
   17. ROUTE MAP
   ============================================================ */
/* A north-south route fitted into a wide, short box forces fitBounds to zoom
   right out. Keeping the container closer to the route's own proportions gives
   a much tighter, more useful view. */
.gmap__wrap { max-width: 46rem; margin-inline: auto; }
.gmap {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.gmap__canvas {
  width: 100%;
  height: clamp(26rem, 70vh, 40rem);
  background: var(--surface-2);
}
.gmap__canvas--picking { cursor: crosshair; outline: 2px solid var(--brass); outline-offset: -2px; }

.gmap__status { margin: 0; font-size: var(--step--1); color: var(--text-dim); }

/* ---- Google's InfoWindow, repainted ----
   The API gives no styling hook for the bubble, so these reach into its own
   class names. They are Google's, not ours, and could change — every rule
   here is cosmetic, so if one stops matching the popup goes back to white
   and still works. Worth it: a white bubble on this map looked like a
   browser alert that had wandered in. */
.gm-style .gm-style-iw-c {
  padding: 0;
  border-radius: var(--r-md);
  background: var(--mat-sheet);
  -webkit-backdrop-filter: var(--mat-thin);
  backdrop-filter: var(--mat-thin);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}
.gm-style .gm-style-iw-d { overflow: auto !important; background: transparent; }
/* the little pointer under the bubble */
.gm-style .gm-style-iw-tc::after { background: var(--mat-sheet); }
/* Google's close button is a dark glyph meant for a white bubble */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect > span { background-color: var(--text-faint) !important; }

.gmap__iw {
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step--1);
  line-height: 1.45;
  letter-spacing: var(--track-body);
  padding: 0.75rem 0.875rem;
}
.gmap__iw strong { font-weight: 600; }
.gmap__note { display: block; margin-block: 0.25rem; color: var(--text); }
.gmap__when { color: var(--text-faint); font-size: 0.92em; }

/* the controls inside a map pin's popup — same pill as everywhere else now
   that the bubble is one of our surfaces */
.gmap__del {
  margin-block-start: 0.5rem;
  margin-inline-end: 0.375rem;
  min-height: 30px;
  padding: 0.25rem 0.75rem;
  font: inherit; font-size: var(--step--2); font-weight: 500;
  color: var(--red);
  background: var(--red-soft);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.gmap__del:hover { background: rgba(255, 69, 58, 0.28); }
.gmap__del[disabled] { opacity: 0.4; cursor: default; }
/* editing a note is not destructive, so it should not look like it is */
.gmap__del--calm { color: var(--text); background: var(--fill-2); }
.gmap__del--calm:hover { background: var(--fill); }

/* ============================================================
   18. PINS
   ============================================================ */
.pinbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  max-width: 46rem; margin-inline: auto;
  margin-block-start: var(--sp-3);
}
.pin-status { width: 100%; font-size: var(--step--1); color: var(--text-dim); }
.pin-status--err { color: var(--red); }
.pin-note { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.pin-dest select, .destpins__move select { max-width: 12rem; }

/* pins filed under the place they were dropped in */
.destpins { padding-block: var(--sp-3) var(--sp-4); }
.destpins__h {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  margin-block-end: var(--sp-2);
}
.destpins__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.destpins__row {
  display: flex; flex-wrap: wrap; gap: 0.625rem var(--sp-2); align-items: center;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
}
.destpins__go {
  display: flex; align-items: center; gap: 0.75rem;
  flex: 1 1 16rem; min-width: 0;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-align: start; color: inherit;
  min-height: 44px;
}
.destpins__mark {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: var(--brass); stroke-width: 1.6;
  transition: transform var(--t-fast) var(--spring), stroke var(--t-fast) var(--ease);
}
.destpins__go:hover .destpins__mark { transform: scale(1.14); stroke: var(--brass-lit); }

.destpins__text { display: grid; gap: 0.125rem; min-width: 0; }
.destpins__note { color: var(--text); font-size: var(--step--1); line-height: 1.45; overflow-wrap: anywhere; }
.destpins__note em { color: var(--text-faint); font-style: normal; }
.destpins__when { color: var(--text-faint); font-size: var(--step--2); }

.destpins__acts { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-inline-start: auto; }
.destpins__acts .gal-btn { min-height: 32px; padding-inline: 0.75rem; font-size: var(--step--2); }

.destpins__shots { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.destpins__shot {
  width: 48px; height: 48px; flex: none;
  padding: 0; border: 0; border-radius: var(--r-sm);
  background: var(--surface-3);
  cursor: pointer; overflow: hidden;
  transition: transform var(--t-fast) var(--spring);
}
.destpins__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destpins__shot:hover { transform: scale(1.06); }

/* The map inside the "is this the spot?" sheet. Taller than it is wide on a
   phone, because what you are judging is how far the circle reaches. */
.fixmap {
  width: 100%;
  height: clamp(16rem, 44vh, 24rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}

/* ---- The pin sheet ---- */
.pindlg {
  border: 0; padding: 0;
  max-width: min(30rem, calc(100vw - 2rem)); width: 100%;
  border-radius: var(--r-xl);
  background: var(--mat-sheet);
  -webkit-backdrop-filter: var(--mat-thick);
  backdrop-filter: var(--mat-thick);
  color: var(--text);
  box-shadow: 0 32px 80px rgb(0 0 0 / 0.6);
}
.pindlg::backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pindlg__box { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.pindlg__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
}
.pindlg__field { display: grid; gap: 0.375rem; }
.pindlg__field > span {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-dim);
}
.pindlg textarea, .pindlg select { width: 100%; padding-block: 0.5rem; min-height: 44px; resize: vertical; }

.pindlg__shots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.125rem; }
.pindlg__shot { position: relative; width: 64px; height: 64px; }
.pindlg__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-sm);
}
.pindlg__shot button {
  position: absolute; inset-block-start: -7px; inset-inline-end: -7px;
  width: 22px; height: 22px; line-height: 1;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text);
  border: 0; border-radius: 50%; cursor: pointer; font-size: 0.85rem;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}
.pindlg__shot button:hover { background: var(--red); color: #fff; }
.pindlg__none { color: var(--text-faint); font-size: var(--step--1); }
.pindlg__msg { font-size: var(--step--1); color: var(--text-dim); margin: 0; }
.pindlg__msg--err { color: var(--red); }
.pindlg__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 46rem) {
  .dest__head { gap: var(--sp-2); }
  .destpins__acts { margin-inline-start: 0; flex-basis: 100%; }
  .destpins__go { flex-basis: 100%; }
}

/* ============================================================
   19. THE FRONT DOOR
   ============================================================ */
.gate {
  border: 0; padding: 0;
  background: transparent;
  max-width: 100vw; max-height: 100vh;
}
.gate::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
/* An Apple sheet: large radius, thick material, a shadow that implies
   elevation rather than drawing a box. */
.gate__box {
  width: min(92vw, 25rem);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--mat-sheet);
  -webkit-backdrop-filter: var(--mat-thick);
  backdrop-filter: var(--mat-thick);
  color: var(--text);
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.65);
  animation: sheetIn var(--t-base) var(--spring);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gate__box { background: #1c1c1e; }
}
@keyframes sheetIn { from { opacity: 0; transform: scale(0.96) translateY(10px); } }

.gate__title {
  margin-block: 0.5rem 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--track-display);
}
.gate__lead { color: var(--text-dim); font-size: var(--step--1); line-height: 1.5; margin-block-end: var(--sp-3); }
.gate__form { display: grid; gap: var(--sp-2); }
.gate__field { display: grid; gap: 0.375rem; }
.gate__field > span {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-dim);
}
.gate__field input { min-height: 44px; font-size: var(--step-0); }
.gate__msg { font-size: var(--step--1); color: var(--text-dim); min-height: 1.2em; }
.gate__msg--err { color: var(--red); }

/* Google's own button, centred. It renders its own iframe, so the wrapper
   only positions it. */
.gate__google { display: flex; justify-content: center; min-height: 44px; margin-block: var(--sp-2); }

.gate__or { height: 1px; background: var(--line-soft); margin-block: var(--sp-3); }
.gate__guest { width: 100%; }
.gate__note {
  margin-block-start: var(--sp-2);
  font-size: var(--step--1); color: var(--text-faint); line-height: 1.5;
}
.gate__remember {
  display: flex; align-items: center; gap: 0.625rem;
  min-height: 44px; cursor: pointer;
  color: var(--text-dim); font-size: var(--step--1);
}
.gate__remember input { width: 18px; height: 18px; accent-color: var(--brass); flex: none; }

.gate__more { margin-block-start: var(--sp-2); }
.gate__more > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-faint);
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.gate__more > summary::-webkit-details-marker { display: none; }
.gate__more > summary:hover { color: var(--text-dim); }
.gate__more[open] > summary { margin-block-end: var(--sp-2); }

/* ============================================================
   19b. ASK — the site's own confirm and prompt
   An alert sheet: title, one sentence, and two choices with the
   destructive one coloured and never focused.
   ============================================================ */
.ask {
  border: 0; padding: 0;
  max-width: min(26rem, calc(100vw - 2rem));
  width: 100%;
  border-radius: var(--r-xl);
  background: var(--mat-sheet);
  -webkit-backdrop-filter: var(--mat-thick);
  backdrop-filter: var(--mat-thick);
  color: var(--text);
  box-shadow: 0 32px 80px rgb(0 0 0 / 0.6);
  animation: sheetIn var(--t-base) var(--spring);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ask { background: #1c1c1e; }
}
.ask::backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ask__box { padding: var(--sp-4); display: grid; gap: var(--sp-2); margin: 0; }
.ask__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--track-title);
}
.ask__body { color: var(--text-dim); font-size: var(--step--1); line-height: 1.5; }
.ask__field { display: grid; gap: 0.375rem; margin-block-start: 0.25rem; }
.ask__field > span { font-size: var(--step--1); color: var(--text-dim); }
.ask__field input {
  min-height: 40px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding-inline: 0.75rem;
  font: inherit; font-size: var(--step-0);
}
.ask__field input:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(212, 162, 76, 0.22);
}
.ask__row {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  margin-block-start: var(--sp-2);
}
.ask__row .gal-btn { min-height: 40px; padding-inline: 1.25rem; }

/* ============================================================
   20. WHO — the account menu
   ============================================================ */
.who { display: flex; align-items: center; gap: 0.375rem; margin-inline-start: auto; }
.who__wrap { position: relative; }
.who__badge {
  min-height: 32px; display: inline-flex; align-items: center; gap: 0.375rem;
  padding-inline: 0.75rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--fill-2);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.who__badge:hover { background: var(--fill); color: var(--text); }
.who__badge--admin { color: var(--brass-lit); background: var(--brass-dim); }
.who__chev { width: 11px; height: 11px; flex: none; transition: transform var(--t-fast) var(--spring); }
.who__badge[aria-expanded="true"] .who__chev { transform: rotate(180deg); }

/* The menu is a material popover with a large radius — iOS/macOS context menu */
.who__menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  z-index: 60; min-width: 13rem;
  padding: 0.375rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--mat-sheet);
  -webkit-backdrop-filter: var(--mat-thick);
  backdrop-filter: var(--mat-thick);
  box-shadow: 0 20px 48px rgb(0 0 0 / 0.55);
  animation: whoIn var(--t-fast) var(--spring);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .who__menu { background: #2c2c2e; }
}
@keyframes whoIn { from { opacity: 0; transform: scale(0.96) translateY(-6px); } }

.who__as {
  padding: 0.5rem 0.625rem 0.5rem;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  color: var(--text-faint);
  border-block-end: 1px solid var(--line-soft);
  margin-block-end: 0.25rem;
  overflow-wrap: anywhere;
}
.who__item {
  min-height: 40px; width: 100%;
  display: flex; align-items: center;
  padding-inline: 0.625rem;
  border-radius: var(--r-xs);
  font: inherit; font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-body);
  text-transform: none;
  text-align: start; text-decoration: none;
  color: var(--text); background: none; border: 0; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.who__item:hover, .who__item:focus-visible { background: var(--fill-2); text-decoration: none; }
.who__item--quiet { color: var(--text-faint); }

@media (max-width: 46rem) {
  .who { order: 2; margin-inline-start: auto; }
  /* The badge sits near the left edge on a phone, so hanging the menu off its
     end put most of the menu off-screen. Anchoring to the bar itself keeps it
     on screen whichever way the page reads. */
  .who__wrap { position: static; }
  .who__menu {
    inset-block-start: calc(100% + 2px);
    inset-inline: auto var(--rail);
    min-width: min(15rem, calc(100vw - var(--rail) * 2));
    max-width: calc(100vw - var(--rail) * 2);
  }
}

/* ============================================================
   21. JUMP TO PHOTOGRAPHS
   ============================================================ */
.jump {
  position: fixed; z-index: 55;
  inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.25rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding-inline: 1.125rem;
  border: 0; border-radius: var(--r-pill);
  background: rgba(60, 60, 67, 0.72);
  -webkit-backdrop-filter: var(--mat-thin);
  backdrop-filter: var(--mat-thin);
  color: var(--text);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-transform: none;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--spring),
              background var(--t-fast) var(--ease);
}
.jump.is-on { opacity: 1; transform: none; }
.jump:hover { background: rgba(90, 90, 97, 0.85); text-decoration: none; }
.jump:active { transform: scale(0.95); }
.jump__i { width: 19px; height: 19px; flex: none; }

@media (max-width: 30rem) {
  /* on a narrow screen the label is the first thing to go */
  .jump__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jump { padding-inline: 0.9rem; }
}

/* ============================================================
   22. TWO CLOCKS
   ============================================================ */
/* A compact centred capsule rather than a full-width band: two clocks do not
   need 1100px of card to sit in. */
.clocks {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.clock { display: grid; gap: 0.125rem; justify-items: center; min-width: 5.5rem; }
.clock__t {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.clock__l {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint); text-align: center;
}
.clock__gap {
  font-size: var(--step--1);
  color: var(--text-dim);
  padding-inline: var(--sp-2);
  border-inline: 1px solid var(--line-soft);
}
@media (max-width: 30rem) {
  .clocks { gap: var(--sp-2); }
  .clock__gap { border: 0; flex-basis: 100%; text-align: center; order: 3; }
}

/* ============================================================
   23. FRIEND RECOMMENDATIONS
   ============================================================ */
.recs { padding-block: 0 var(--sp-4); }
.recs__bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.recs__h {
  margin: 0;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}
/* the two buttons sit together at the far end of the bar */
.recs__bar .gal-btn { min-height: 32px; font-size: var(--step--2); }
.recs__bar .gal-btn:first-of-type { margin-inline-start: auto; }
.recs__form[hidden] { display: none; }
.recs__lead { color: var(--text-faint); font-size: var(--step--1); margin-block: 0.375rem var(--sp-2); }
.recs__none { color: var(--text-faint); font-size: var(--step--1); }

.recs__list {
  list-style: none; margin: 0 0 var(--sp-2); padding: 0;
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.rec {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  padding: 0.875rem 1rem;
  display: grid; gap: 0.3rem; align-content: start;
}
.rec--pending { opacity: 0.72; }
.rec__head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.rec__title { color: var(--text); font-size: var(--step-0); font-weight: 500; overflow-wrap: anywhere; }
.rec__tag {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--fill-2);
  border: 0; border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
}
.rec__note { color: var(--text-dim); font-size: var(--step--1); margin: 0; overflow-wrap: anywhere; }
.rec__by { color: var(--text-faint); font-size: var(--step--2); margin: 0; }
.rec__acts { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-block-start: 0.25rem; }
.rec__acts .gal-btn { min-height: 30px; padding-inline: 0.7rem; font-size: var(--step--2); }

.recs__form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.recs__form input { flex: 1 1 12rem; min-width: 0; min-height: 40px; }
.recs__form .gal-btn.is-on { background: var(--brass-dim); color: var(--brass-lit); }
.recs__msg { flex-basis: 100%; font-size: var(--step--1); color: var(--text-dim); }

/* ============================================================
   24. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scrollhint svg { animation: none; }
  .tripcard:hover { transform: none; }
  .tripcard:hover .tripcard__media img { transform: none; }
  .gal-cell:hover img { transform: none; }
  .jump { transition: opacity 0.01s; transform: none; }
  .who__menu, .gate__box { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   25. THE PAPER COPY
   Hidden on screen; on paper it is the only thing left. Set like a printed
   itinerary rather than a screenshot of a website — a masthead, rules, small
   caps, numbers that line up. Black on white, because it will be
   photographed, faxed by a hotel, and read on a phone at three in the
   morning. This is the one place a serif is right, and it stays.
   ============================================================ */
.ps { display: none; }

@media print {
  /* everything that is not the sheet */
  .topbar, .foot, .hero, .td, .gmap__wrap, .pinbar, .jump, .lb__talk,
  .gal-bar, .gal-grid, .gal-empty, .gal-setup, .sechead, .stats, .clocks,
  .flightstack, #stays, .lb, .skip, .tabs, .tripgrid, .homepick, .pindlg,
  .hhero, .gate, .ask, .takeaway, #view { display: none !important; }

  html, body { background: #fff !important; color: #111 !important; }
  #paper, .wrap, .section, .section--tight {
    padding: 0 !important; margin: 0 !important; max-width: none !important;
  }

  /* ---- The sheet ----
     Set the way Apple sets a printed page: one sans face, tight tracking on
     the headings, generous air, hairline rules, and a single accent that is
     a darkened version of the brass so it survives a monochrome printer as a
     believable grey rather than a washed-out gold. Black on white, because
     it will be photographed, faxed by a hotel, and read on a phone at three
     in the morning. */
  .ps {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
                 "Assistant", "Helvetica Neue", sans-serif;
    font-size: 9.5pt; line-height: 1.5; color: #1d1d1f;
    letter-spacing: -0.006em;
  }
  .ps .num { font-variant-numeric: tabular-nums; }

  /* ---- masthead ---- */
  .ps__head { margin-bottom: 16pt; }
  /* 420x90 viewBox, so the height follows the width or the lockup squashes */
  .ps__mark { display: block; width: 140pt; height: 30pt; margin: 0 0 12pt -3pt; }
  html[dir="rtl"] .ps__mark { margin-inline: auto 0; }
  .ps__title {
    margin: 0; font-size: 27pt; line-height: 1.05;
    font-weight: 700; letter-spacing: -0.028em;
  }
  .ps__sub {
    margin: 5pt 0 0; font-size: 9.5pt; color: #4a4a4f;
    padding-bottom: 10pt; border-bottom: 0.75pt solid #1d1d1f;
  }

  /* ---- section headings ---- */
  .ps__h2 {
    font-size: 8pt; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: #8a6a2c;
    margin: 16pt 0 7pt;
    break-after: avoid;
  }

  /* ---- journeys ---- */
  .ps__legs { width: 100%; border-collapse: collapse; }
  .ps__legs td {
    padding: 5pt 8pt 5pt 0; vertical-align: baseline;
    border-bottom: 0.5pt solid #e3e3e6;
  }
  html[dir="rtl"] .ps__legs td { padding: 5pt 0 5pt 8pt; }
  .ps__legs tr:last-child td { border-bottom: 0; }
  .ps__mode {
    font-size: 7.5pt; font-weight: 500; letter-spacing: 0.04em;
    color: #6e6e73; white-space: nowrap;
  }
  .ps__no { font-weight: 600; white-space: nowrap; }
  .ps__route { white-space: nowrap; font-weight: 500; }
  .ps__legs sup { font-size: 0.7em; color: #6e6e73; }

  /* ---- places ---- */
  .ps__place { break-inside: avoid; margin-bottom: 12pt; }
  .ps__placeh {
    display: flex; align-items: baseline; gap: 8pt;
    margin: 0 0 5pt; font-size: 14pt; font-weight: 600; letter-spacing: -0.02em;
  }
  .ps__num { font-size: 8pt; font-weight: 500; color: #8a6a2c; letter-spacing: 0.04em; }
  .ps__when {
    margin-inline-start: auto;
    font-size: 8.5pt; font-weight: 400; color: #6e6e73; white-space: nowrap;
  }

  .ps__stay {
    break-inside: avoid;
    margin: 0 0 8pt;
    padding-inline-start: 10pt;
    border-inline-start: 1pt solid #e3e3e6;
  }
  .ps__hotel {
    display: flex; align-items: baseline; gap: 7pt;
    margin: 0 0 3pt; font-size: 10.5pt; font-weight: 600; letter-spacing: -0.012em;
  }

  /* ---- a labelled line ---- */
  .ps__line { display: flex; gap: 8pt; align-items: baseline; margin-bottom: 1pt; }
  .ps__line > span:first-child {
    flex: none; width: 6.6em;
    font-size: 7.5pt; color: #6e6e73;
  }
  .ps__line > span:last-child { flex: 1 1 auto; }
  .ps__code { font-weight: 600; letter-spacing: 0.02em; }

  /* ---- footer ---- */
  .ps__foot {
    margin-top: 16pt; padding-top: 6pt; border-top: 0.75pt solid #1d1d1f;
    font-size: 7.5pt; color: #6e6e73;
    display: flex; justify-content: space-between; gap: 1em;
  }

  @page { margin: 14mm; }
}