/*
 * fenuamove.com, "Horizon": a sunset sky melting into the lagoon, the app
 * rising from the water. Two themes on one set of tokens: light by
 * default, dark on the system's word or the visitor's (html[data-theme],
 * set before the first paint by the layout's head script).
 *
 * Text colours were measured on the rendered page, not guessed: every text
 * against the worst pixel under it, at 1280, 390 and 320 px. The lowest is
 * the lead on the coral part of the sky, 6.1:1; the footer links, 5.9:1.
 * Carrier colours appear only inside the real screenshots.
 */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/gabarito-latin.woff2") format("woff2");
}

:root {
  --font: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
  /* Text, ground and lines. */
  --ink: #0f3445;
  --body: #3d4c56;
  --soft: #46535d;
  --paper: #ffffff;
  --card: #ffffff;
  --line: #dbe6ea;
  --fill: #e9f0f3;
  --foot: #f4f7f8;
  --link: #1d5688;
  --halo: #ffffff;
  /* The night: the Guides band and the guides' closing panel, dark in both
     themes; buttons are the night on a light page and the light at night. */
  --night: #0f2530;
  --btn: #0f2530;
  --on-btn: #ffffff;
  /* The lines' colours, each with a pale tint; text on a tone fill. */
  --blue: #2468a3;
  --moorea: #2468a3;
  --moorea-tint: #e3eefa;
  --lee: #6a4bc4;
  --lee-tint: #efeafb;
  --lee-ink: #5a3cb4;
  --day-ink: #4b2f9c;
  --air: #0c7170;
  --air-tint: #dcefee;
  --coral: #a93c70;
  --green: #2e7d4f;
  --green-tint: #e2f3e8;
  --sky-c: #0b6aa2;
  --sky-tint: #def0fb;
  --on-tone: #ffffff;
  /* The next departure, per direction; statuses. */
  --next-bg: #eef5fc;
  --next-edge: #bcd6ee;
  --coral-bg: #fbeef4;
  --coral-edge: #e9bfd2;
  --lee-bg: #f3f0fc;
  --lee-edge: #d6ccf5;
  --warn-bg: #fdf0d9;
  --warn: #6e4700;
  --bad-bg: #fbe4ea;
  --bad: #9c1c3c;
  --ok: #0a4f4e;
  /* Bands and maps. */
  --sky:
    radial-gradient(ellipse 90% 5% at 50% 55%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg,
      #fff7ef 0%, #ffe9cf 12%, #ffd9bd 24%, #ffc6ae 36%, #f9bba7 44%,
      #ecc4b3 50%, #c4e2d9 58%, #8bd5cf 66%, #52b6c4 78%, #2d86a9 90%, #1d5f86 100%);
  --sky-calm: linear-gradient(180deg, #fff7ef 0%, #ffe9cf 50%, #ffd9bd 100%);
  --sun: rgba(255, 226, 170, .55);
  --band-tint: linear-gradient(180deg, #e9f7f5, #f3fbfa);
  --band-alt: linear-gradient(180deg, #eef8f7, #f5fbfb);
  --sand: #fdf3e7;
  --band-cta: radial-gradient(60% 70% at 85% 90%, rgba(127, 224, 217, .55), rgba(127, 224, 217, 0) 70%), linear-gradient(180deg, #fff7ef, #ffe2cc);
  --water: linear-gradient(160deg, #e9f8f6, #d8f0f2);
  --map-bg: #d8f0f2;
  --land: #fdf3e7;
  --coast: #e2cfb3;
  --island: #6f5639;
  --art-glow: radial-gradient(closest-side, rgba(127, 224, 217, .7), rgba(255, 196, 150, .45) 55%, rgba(255, 196, 150, 0));
}

/* Dark: the app's own night (fenua-move-mobile src/theme/palette.ts), warm
   charcoal rather than black, its raised surface and border, its text and
   muted text, its sky-blue accent carrying dark labels, and its lightened
   lagoon, violet and coral. The hero becomes a night lagoon, deep blue to
   teal with a faint sunset at the horizon; the pale bands, tinted dark
   surfaces; the Guides band keeps its blue night, apart from the charcoal.
   Contrast measured on the rendered pages: see the commit. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #efeceb;
  --body: #d6d1cf;
  --soft: #afa9a7;
  --paper: #181616;
  --card: #282423;
  --line: #413b38;
  --fill: #322d2c;
  --foot: #1f1c1b;
  --link: #7cbbef;
  --halo: #181616;
  --btn: #efeceb;
  --on-btn: #151313;
  --blue: #4aa0e6;
  --moorea: #7cbbef;
  --moorea-tint: #2c3542;
  --lee: #a894f0;
  --lee-tint: #2f2a40;
  --lee-ink: #c3b5f5;
  --day-ink: #d4cafa;
  --air: #7fe4e2;
  --air-tint: #1f3a3a;
  --coral: #e77aa9;
  --green: #8fdcab;
  --green-tint: #1f3326;
  --sky-c: #8fd0f5;
  --sky-tint: #1c2f3c;
  --on-tone: #151313;
  --next-bg: #2c3542;
  --next-edge: #3f5470;
  --coral-bg: #3a2631;
  --coral-edge: #6b3a52;
  --lee-bg: #2f2a40;
  --lee-edge: #4e4380;
  --warn-bg: #3a3020;
  --warn: #f0cd82;
  --bad-bg: #3d2229;
  --bad: #f490ab;
  --ok: #7fe4e2;
  --sky:
    radial-gradient(ellipse 90% 5% at 50% 55%, rgba(255, 196, 150, .14), rgba(255, 196, 150, 0) 100%),
    linear-gradient(180deg,
      #0b1420 0%, #0e1b2c 16%, #11233a 32%, #142c45 44%,
      #2a2c43 51%, #173f52 58%, #145560 68%, #0f5e66 80%, #0b4a55 90%, #08323d 100%);
  --sky-calm: linear-gradient(180deg, #0b1420 0%, #0f1d2e 55%, #13263a 100%);
  --sun: rgba(255, 170, 120, .12);
  --band-tint: linear-gradient(180deg, #172020, #181c1c);
  --band-alt: linear-gradient(180deg, #1c2020, #1a1d1d);
  --sand: #201c1a;
  --band-cta: radial-gradient(60% 70% at 85% 90%, rgba(80, 180, 175, .22), rgba(80, 180, 175, 0) 70%), linear-gradient(180deg, #1e1a1f, #241c1a);
  --water: linear-gradient(160deg, #15252b, #132b31);
  --map-bg: #132b31;
  --land: #2a2523;
  --coast: #4a3f38;
  --island: #cdb999;
  --art-glow: radial-gradient(closest-side, rgba(70, 170, 170, .3), rgba(255, 150, 110, .1) 60%, rgba(255, 150, 110, 0));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font: 500 16px/1.55 var(--font); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.in { max-width: 1140px; margin: 0 auto; padding-inline: var(--gutter); }

/* One continuous light, top to bottom: soft gold, peach and coral where the
   text sits, a slow turn to lagoon turquoise behind the phones, deep ocean
   at the foot. The warm stops end below the last line of text at every
   width (45% at 320 px), so the text never stands on the blues. The two
   glows are the sun behind the phones, its own element so it can drift on a
   transform, and the faintest horizon. */
.sky {
  position: relative;
  overflow: hidden;
  /* Room for the floating nav, which takes none of its own: the pill and
     20 px of air (the hero adds its own top padding on wide screens). */
  padding-top: calc(var(--pill-room) + env(safe-area-inset-top));
  background: var(--sky);
}
.sky > .in { position: relative; }
.sun { position: absolute; left: 5%; top: 30%; width: 90%; height: 44%; background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--sun), transparent 70%); pointer-events: none; }
.sky.calm .sun { display: none; }

/* The floating pill (site/partials/nav). Its wrapper is sticky and takes no
   height, and the pill is offset with `top`, never a margin that would
   collapse through it, so it floats over the page from the first frame and
   nothing below it moves; the page tops leave it room (--pill-room).

   Real glass: half-white over a strong blur, so the sky and the phones tint
   through, with a white edge and a lit top line. Over a dark band nav.js
   turns it to a dark glass with light ink (.nav-dark). Where the browser
   has no backdrop-filter, or the reader asks for less transparency or more
   contrast, it is solid. Contrast was measured on the rendered pixels under
   the ink at each scroll stop: see the commit. */
:root { --gutter: 20px; --pill-h: 52px; --pill-top: 8px; --pill-room: calc(var(--pill-top) + var(--pill-h) + 20px); }
@media (min-width: 760px) { :root { --pill-h: 60px; --pill-top: 12px; } }
.nav-wrap { position: sticky; top: 0; z-index: 50; height: 0; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.nav { position: relative; top: calc(var(--pill-top) + env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; max-width: 960px; min-height: var(--pill-h); margin: 0 auto; padding: 3px 3px 3px 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 32px -18px rgba(15, 52, 69, .45); color: var(--ink); transition: min-height .25s, background-color .25s, top .25s, color .25s, border-color .25s; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
  .is-scrolled .nav { background: rgba(255, 255, 255, .62); }
  :is(.nav-dark, [data-theme="dark"]) .nav { border-color: rgba(255, 255, 255, .18); background: rgba(15, 30, 40, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 32px -18px rgba(0, 0, 0, .6); color: #fff; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav, .is-scrolled .nav { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :is(.nav-dark, [data-theme="dark"]) .nav { background: var(--night); }
}
.is-scrolled .nav { top: calc(var(--pill-top) + env(safe-area-inset-top)); }
@media (min-width: 760px) { .is-scrolled .nav { --pill-h: 54px; top: calc(8px + env(safe-area-inset-top)); } }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 1.05rem; color: inherit; text-decoration: none; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav .brand img { width: 28px; height: 28px; border-radius: 8px; }
@media (min-width: 760px) { .nav { padding: 6px 6px 6px 16px; gap: 12px; } .nav .brand img { width: 32px; height: 32px; } }
.nav-links { display: none; flex: 1; justify-content: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-links > li > a, .nav-guides summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; color: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer; }
.nav-links > li > a:hover, .nav-guides summary:hover { background: rgba(15, 52, 69, .08); }
.nav-links a[aria-current], .nav-guides summary.is-current { background: rgba(36, 104, 163, .14); color: var(--link); }
:is(.nav-dark, [data-theme="dark"]) .nav-links > li > a:hover, :is(.nav-dark, [data-theme="dark"]) .nav-guides summary:hover { background: rgba(255, 255, 255, .12); }
:is(.nav-dark, [data-theme="dark"]) .nav-links a[aria-current], :is(.nav-dark, [data-theme="dark"]) .nav-guides summary.is-current { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-guides { position: relative; }
.nav-guides summary { list-style: none; gap: 6px; }
.nav-guides summary::-webkit-details-marker { display: none; }
.nav-guides summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nav-guides[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }

/* The Guides panel: an opaque card of three rich items. Panels sit inside
   the pill, whose backdrop-filter makes it their backdrop root: a blur of
   their own would only see the pill, never the page, and the hero title
   showed through a translucent panel under its links. */
.guide-panel { position: absolute; top: calc(100% + 12px); left: 50%; display: grid; gap: 4px; width: 340px; margin: 0; padding: 8px; list-style: none; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 48px -24px rgba(15, 52, 69, .55); color: var(--ink); }
.guide-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; border-radius: 16px; color: var(--ink); text-decoration: none; }
.guide-item:hover, .guide-item[aria-current] { background: rgba(36, 104, 163, .1); }
.guide-item .ico { width: 40px; height: 40px; border-radius: 12px; }
.guide-item .ico svg { width: 22px; height: 22px; }
.guide-item b { display: block; font-weight: 800; }
.guide-item small { display: block; font-size: .85rem; font-weight: 600; color: var(--soft); }
.guide-item[aria-current] b::after { content: " ·"; color: var(--blue); }
.ico.moorea { --c: var(--moorea); --tint: var(--moorea-tint); }
.ico.leeward { --c: var(--lee); --tint: var(--lee-tint); }
.ico.flights { --c: var(--air); --tint: var(--air-tint); }

.nav-end { display: none; align-items: center; gap: 6px; margin-left: auto; }
.nav-lang { display: inline-flex; gap: 2px; }
.nav-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 999px; color: inherit; font-weight: 700; font-size: .9rem; text-decoration: none; }
.nav-lang a[aria-current] { background: var(--ink); color: var(--paper); }
:is(.nav-dark, [data-theme="dark"]) .nav-lang a[aria-current] { background: #fff; color: var(--night); }
.nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--btn); color: var(--on-btn); font-weight: 800; text-decoration: none; white-space: nowrap; }
:is(.nav-dark, [data-theme="dark"]) .nav-cta { background: #fff; color: var(--night); }
.nav a:focus-visible, .nav summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* The phone menu: a 44 px target around a smaller dark disc. */
.nav-menu { margin-left: auto; }
.nav-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--btn) 0 19px, transparent 19.5px); list-style: none; cursor: pointer; }
:is(.nav-dark, [data-theme="dark"]) .nav-menu > summary { background: radial-gradient(circle, #fff 0 19px, transparent 19.5px); }
.nav-menu > summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--on-btn); transition: transform .2s; }
:is(.nav-dark, [data-theme="dark"]) .burger, :is(.nav-dark, [data-theme="dark"]) .burger::before, :is(.nav-dark, [data-theme="dark"]) .burger::after { background: var(--night); }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }
.nav-menu[open] .burger { background: transparent; }
.nav-menu[open] .burger::before { transform: translateY(5px) rotate(45deg); }
.nav-menu[open] .burger::after { transform: translateY(-5px) rotate(-45deg); }
.nav-sheet { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 6px; max-height: calc(100vh - var(--pill-room) - 12px); overflow-y: auto; padding: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 48px -24px rgba(15, 52, 69, .55); color: var(--ink); }
.nav-sheet ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-sheet ul a:not(.guide-item) { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 14px; color: var(--ink); font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.nav-sheet ul a[aria-current]:not(.guide-item) { background: rgba(36, 104, 163, .1); color: var(--link); }
.nav-sheet-title { padding: 6px 12px 0; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.nav-sheet-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px 2px; border-top: 1px solid var(--line); }
.nav-sheet-end .nav-lang a { color: var(--ink); }
.nav-sheet-end .nav-lang a[aria-current] { background: var(--ink); color: var(--paper); }
.nav-sheet-end .nav-cta { background: var(--btn); color: var(--on-btn); }
@media (max-width: 340px) { .nav-sheet-end { flex-direction: column; align-items: stretch; } .nav-sheet-end .nav-cta { justify-content: center; } }
.menu-open { overflow: hidden; }

/* With the Timetables menu the pill's links need 1000 px: below, "The app"
   wrapped to two lines and the brand ran into it. */
@media (min-width: 1000px) {
  .nav-links, .nav-end { display: flex; }
  .nav-menu { display: none; }
}

/* Anchors land below the pill, with the same 12 px as everywhere; smooth
   only when motion is welcome. */
[id] { scroll-margin-top: calc(var(--pill-top) + var(--pill-h) + 12px + env(safe-area-inset-top)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.hero { display: grid; gap: 22px; justify-items: center; text-align: center; }
.lang-hint { font-size: .95rem; font-weight: 600; }
.lang-hint a { color: var(--ink); text-underline-offset: 3px; }
.hero h1 { font-size: 2.6rem; line-height: 1.02; font-weight: 900; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; max-width: 14ch; }
.lead { font-size: 1.1rem; max-width: 44ch; color: var(--body); }

/* Store buttons: a badge-shaped label while the listing is not live, a link once it is. */
.stores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 18px 8px 14px; border-radius: 14px; background: var(--btn); color: var(--on-btn); line-height: 1.15; text-align: left; text-decoration: none; }
.store svg { width: 24px; height: 24px; flex: none; }
.store small { display: block; font-size: .75rem; opacity: .85; }
.store b { display: block; font-size: 1.05rem; font-weight: 600; }

/* The phones rise from the water; the stage crops their lower half. Each
   .lift places a phone and is what the motion moves; the .phone inside keeps
   its tilt, so neither transform overwrites the other. */
.stage { position: relative; width: 100%; max-width: 640px; height: 440px; margin-top: 10px; }
.lift { position: absolute; left: 50%; top: 24px; width: 230px; margin-left: -115px; perspective: 1800px; z-index: 2; }
.lift.right, .lift.left { width: 200px; top: 70px; z-index: 1; }
.lift.right { margin-left: 30px; }
.lift.left { margin-left: -230px; }
.phone { padding: 9px; border-radius: 44px; background: #0d1b24; box-shadow: 0 40px 80px -30px rgba(15, 52, 69, .45), 0 18px 30px -18px rgba(15, 52, 69, .35); transform: rotateX(14deg); }
.phone img { width: 100%; border-radius: 36px; }
.right .phone { transform: rotateX(14deg) rotateZ(8deg); }
.left .phone { transform: rotateX(14deg) rotateZ(-8deg); }

/* A card: the guides' blocks build on it. */
.card { display: grid; gap: 14px; align-content: start; min-width: 0; overflow: hidden; border-radius: 26px; padding: 22px; }

/* Features (site/home): nine cards of equal weight on one grid, one
   column, two from 640 px, three from 1024. Each icon sits on its own
   tint; the icon is a graphic at 3:1 or more on it, the text is ink and
   body on the card. */
.features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.feature { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 14px 30px -26px rgba(15, 52, 69, .45); }
.feature .badge { display: grid; grid-row: span 2; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tint); color: var(--c); }
.feature svg { width: 24px; height: 24px; }
.feature h3 { align-self: end; font-size: 1.1rem; line-height: 1.25; font-weight: 800; color: var(--ink); }
.feature p { font-size: .95rem; line-height: 1.45; color: var(--body); }
.feature.tone-blue { --c: var(--moorea); --tint: var(--moorea-tint); }
.feature.tone-lagoon { --c: var(--air); --tint: var(--air-tint); }
.feature.tone-amber { --c: var(--warn); --tint: var(--warn-bg); }
.feature.tone-violet { --c: var(--lee); --tint: var(--lee-tint); }
.feature.tone-green { --c: var(--green); --tint: var(--green-tint); }
.feature.tone-coral { --c: var(--coral); --tint: var(--coral-bg); }
.feature.tone-sky { --c: var(--sky-c); --tint: var(--sky-tint); }
.feature.tone-rose { --c: var(--bad); --tint: var(--bad-bg); }
.feature.tone-slate { --c: var(--soft); --tint: var(--fill); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* The app story (site/home, js/carousel.js): one slide per step, in the
   page's flow. Without script, a plain list of large screens with their
   captions. With it (.is-live), the slides stack into one phone, straight
   and as big as the window allows (--ph, its width --pw), whose screen and
   caption crossfade from step to step; only the first slide's phone draws
   the frame, so the frame never fades. Under the phone on a phone, beside
   it on a wide screen: play/pause, previous, next, and a tab per step whose
   bar fills while the step plays (its end is the autoplay's clock). */
.story { position: relative; display: grid; gap: 20px; }
.carousel { min-width: 0; border-radius: 22px; }
.carousel:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.slides { display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; }
.slide { display: grid; justify-items: center; align-content: start; gap: 18px; text-align: center; }
.slide-phone { width: min(100%, 280px); }
.slide-phone .phone { transform: none; }
/* Each screen fills the phone's screen exactly, at the frame's ratio (the
   iOS shots' 600 × 1304): the frame in the carousel is the first slide's,
   and a shorter shot under it left the others spilling out of it. A shot of
   another ratio is cropped from the top, never stretched. */
.slide-phone .phone { overflow: hidden; }
.slide-phone .phone img { aspect-ratio: 600 / 1304; height: auto; object-fit: cover; object-position: top; }
/* A step's recording (js/carousel.js) lies over its still, inside the
   phone's padding: the still keeps the frame's size, so the video shifts
   nothing, and its poster covers the screen until it plays. */
.slide-phone .phone { position: relative; }
.slide-phone video { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 36px; object-fit: cover; object-position: top; background: var(--card); }
.slide-text { display: grid; gap: 6px; max-width: 34ch; }
.slide-text h3 { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.slide-text p { color: var(--body); }
@media (min-width: 760px) {
  .slide { grid-template-columns: 300px minmax(0, 340px); justify-content: center; align-items: center; gap: 56px; text-align: left; }
  .slide-phone { width: 300px; }
}

.carousel.is-live { display: grid; justify-items: center; gap: 18px; --ph: min(62vh, 560px, calc(100svh - 300px)); --pw: calc((var(--ph) - 18px) * .4603 + 18px); }
.is-live .slides { gap: 0; touch-action: pan-y; }
.is-live .slide { grid-area: 1 / 1; grid-template-rows: var(--ph) auto; }
.is-live .slide:not(.is-current) { pointer-events: none; }
.is-live .slide-phone { width: var(--pw); }
.is-live .slide + .slide .phone { background: none; box-shadow: none; }
.is-live .slide .phone > *, .is-live .slide-text { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.is-live .slide .phone > * { transform: scale(1.02); }
.is-live .slide-text { transform: translateY(8px); }
.is-live .slide.is-current .phone > *, .is-live .slide.is-current .slide-text { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .is-live .slide .phone > *, .is-live .slide-text { transition: none; transform: none; } }

.is-live .carousel-ui { display: grid; justify-items: center; gap: 10px; width: min(100%, 340px); }
.carousel-buttons { display: flex; gap: 8px; }
.carousel-buttons button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.carousel-buttons button:hover { border-color: var(--soft); }
.carousel-buttons svg { width: 20px; height: 20px; }
.carousel-play .i-play, .carousel.is-stopped .carousel-play .i-pause { display: none; }
.carousel.is-stopped .carousel-play .i-play { display: block; }
.carousel.is-still .carousel-play { display: none; }
.tabs { display: flex; gap: 0; width: calc(100% + 12px); margin-inline: -6px; }
.tab { display: grid; flex: 1; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--soft); font: 700 .95rem var(--font); text-align: left; cursor: pointer; }
.tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tab i { display: block; height: 4px; margin-inline: 3px; overflow: hidden; border-radius: 4px; background: var(--fill); }
.tab i::before { content: ""; display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.tab[aria-current] { color: var(--ink); }
.tab[aria-current] i::before { transform: none; }
.is-playing .tab[aria-current] i::before { animation: tab-fill var(--step, 3s) linear both; }
.is-playing.is-held .tab[aria-current] i::before { animation-play-state: paused; }
@keyframes tab-fill { from { transform: scaleX(0); } to { transform: none; } }
.carousel button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 12px; }
.carousel-buttons button:focus-visible { border-radius: 50%; }

@media (min-width: 760px) {
  /* Phone left, caption and controls in a 340 px column: the caption a
     little below the phone's top, the controls level with its foot, and the
     tabs a list of the steps' titles. */
  .carousel.is-live { grid-template-columns: var(--pw) 340px; justify-content: center; column-gap: 56px; --ph: min(78vh, 720px, calc(100svh - 120px)); }
  .is-live .slides { grid-column: 1 / -1; grid-row: 1; }
  .is-live .slide { grid-template-columns: var(--pw) 340px; grid-template-rows: var(--ph); align-items: start; gap: 56px; }
  /* The caption sits lower only when the phone is tall enough to leave
     room above the six tabs. */
  .is-live .slide-text { margin-top: clamp(0px, calc(var(--ph) * .5 - 300px), 120px); }
  .is-live .carousel-ui { grid-column: 2; grid-row: 1; align-self: end; justify-items: start; z-index: 1; }
  .tabs { display: grid; gap: 0; width: 100%; margin-inline: 0; }
  .tab { gap: 4px; min-height: 44px; padding-block: 4px; }
  .tab span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .tab i { height: 3px; margin-inline: 0; }
  .slide-text h3 { font-size: 1.7rem; line-height: 1.15; }
  .slide-text p { font-size: 1.1rem; }
}

/* What the app covers: three open columns, each under a rule in its line's
   colour (the app's blue for Moorea, violet for the Leeward Islands, lagoon
   for planes), on white. Icons and rules are graphics, at 3:1 or more; all
   text is ink or body on white. */
.routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* A destination: a card under a photograph of the place (16:9, its
   colour as the rule beneath), then its facts, then the button to its
   guide, held at the foot so the three line up. At night the photo is
   dimmed a little so it does not glare beside the charcoal. */
.line { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: 0 16px 36px -28px rgba(15, 52, 69, .45); }
.line.moorea { --c: var(--moorea); --tint: var(--moorea-tint); }
.line.leeward { --c: var(--lee); --tint: var(--lee-tint); }
.line.flights { --c: var(--air); --tint: var(--air-tint); }
.line-art { position: relative; aspect-ratio: 16 / 9; background: var(--tint); border-bottom: 3px solid var(--c); }
.line-art img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .line-art::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 8, .22); }
.line-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
.line h3 { font-size: 1.2rem; line-height: 1.2; font-weight: 800; color: var(--ink); }
.line p { color: var(--body); font-size: .97rem; }
.line-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; min-height: 48px; margin-top: auto; padding: 10px 20px; border-radius: 999px; background: var(--c); color: var(--on-tone); font-weight: 800; text-decoration: none; }
.line-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.line-link:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tint); color: var(--c); }
.ico svg { width: 24px; height: 24px; }
.trip { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: center; gap: 10px; max-width: 320px; font-weight: 700; color: var(--ink); }
.trip i { position: relative; height: 0; border-top: 2px dashed var(--line); }
.trip i::before, .trip i::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; }
.trip i::before { left: -2px; border: 2px solid var(--c); background: var(--paper); }
.trip i::after { right: -2px; background: var(--c); }
.chips, .stops { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.stops { gap: 4px 0; font-weight: 700; color: var(--ink); }
.stops li { white-space: nowrap; }
/* The separator trails its stop, so a wrapped line never starts with one. */
.stops li:not(:last-child)::after { content: "›" / ""; margin-inline: 8px; color: var(--c); }
.secondary { display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 48px; padding: 10px 20px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 700; text-decoration: none; }
.secondary:hover { background: var(--ink); color: var(--paper); }
/* The two guides as equal buttons: side by side when there is room, else
   stacked full width. */
.guides { display: grid; gap: 12px; }
.guides h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.guide-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.guide-buttons .secondary { width: 100%; justify-content: space-between; }
.guide .secondary { color: var(--ink); text-decoration: none; }
.guide .secondary:hover { color: var(--paper); }

/* The guides: a short warm head, then blocks on white in the home page's
   language — open sections, white cards with one hairline and a soft
   shadow, rules and chips. */
.guide-head { display: grid; gap: 14px; padding-block: 4px 40px; }
.guide-head h1 { font-size: 2.2rem; line-height: 1.05; font-weight: 900; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; max-width: 22ch; }
.guide-head .lead { max-width: 62ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9rem; color: var(--body); }
/* A finger's 44 px on every standalone link: the breadcrumb, the language
   hint, the lists of company pages. */
.crumbs a, .lang-hint a, .carrier-links a, .guide .aside p a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { min-width: 44px; }
.crumbs a { color: var(--blue); }
.updated { font-size: .9rem; color: var(--body); }
.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; padding-block: 48px 56px; }
/* Guide sections as bands: every other one on a lagoon tint that runs edge
   to edge behind it (main clips the overflow), white between them. */
.guide > :nth-child(even):not(.cta) { position: relative; }
.guide > :nth-child(even):not(.cta)::before { content: ""; position: absolute; inset: -32px -100vmax; z-index: -1; background: var(--band-alt); }
@media (min-width: 1100px) { .guide { gap: 96px; } .guide > :nth-child(even):not(.cta)::before { inset: -48px -100vmax; } }
.guide section, .guide .stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.guide h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 800; color: var(--ink); text-wrap: balance; }
.guide h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.guide p { max-width: 68ch; color: var(--body); }
.guide a { color: var(--blue); text-underline-offset: 3px; }
.guide .note { font-size: .92rem; color: var(--soft); }
.book { display: grid; gap: 12px; }
.book-links { display: flex; flex-wrap: wrap; gap: 10px; }
.guide .note a { color: var(--blue); text-underline-offset: 3px; }
.guide .sources a { display: inline-flex; align-items: center; min-height: 44px; }
.guide .summary { font-size: 1.05rem; color: var(--ink); }
.guide .independent { padding: 12px 16px; border-left: 3px solid var(--blue); border-radius: 8px; background: var(--fill); color: var(--body); font-size: .95rem; }
.carrier-links a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.guide .aside p a { color: var(--blue); text-underline-offset: 3px; }
.split, .pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.guide .card { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 16px 36px -28px rgba(15, 52, 69, .45); }
.guide .card .table-scroll { border: 0; border-radius: 0; margin-inline: -10px; }
.chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Crossing time per carrier: a labelled bar, the figure always written out. */
.durations { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.durations li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.durations .chip { justify-self: start; }
.durations .track { height: 10px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.durations .track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.minutes { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Key figures: open tiles under a rule, like the routes block's columns. */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin: 0; padding: 0; list-style: none; }
.figures li { display: grid; gap: 4px; align-content: start; padding-top: 14px; border-top: 3px solid var(--blue); }
.figures b { font-size: 1.7rem; line-height: 1.1; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.figures span { font-size: .92rem; color: var(--body); }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
.fares-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.fares-table caption { text-align: left; padding: 12px 12px 0; font-weight: 700; color: var(--ink); }
.fares-table th, .fares-table td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.fares-table th:first-child { text-align: left; }
/* Headings may wrap, figures never: a narrow table fits more columns before it has to scroll. */
.fares-table thead th { font-size: .85rem; color: var(--soft); font-weight: 600; white-space: normal; vertical-align: bottom; }
.fares-table tbody th { color: var(--ink); white-space: normal; }
.fares-table tbody tr:last-child > * { border-bottom: 0; }

/* Narrow screens: each row becomes a small card, its name then one
   "label: value" line per column. The column headings stay in the page for
   screen readers, out of sight. */
@media (max-width: 480px) {
  .table-scroll { overflow: visible; border: 0; border-radius: 0; }
  .guide .card .table-scroll { margin-inline: 0; }
  .fares-table, .fares-table tbody, .fares-table tr, .fares-table th, .fares-table td { display: block; }
  .fares-table caption { display: block; padding: 0 0 8px; }
  .fares-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fares-table tbody tr { padding-block: 12px; border-bottom: 1px solid var(--line); }
  .fares-table tbody tr:last-child { border-bottom: 0; }
  .fares-table tbody th { padding: 0 0 6px; border: 0; font-size: 1rem; }
  .fares-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; white-space: normal; }
  .fares-table td::before { content: attr(data-label); text-align: left; color: var(--soft); font-size: .88rem; font-weight: 600; }
}

/* The "next" lists (site/partials/next-board), shared by the three guides:
   rows read like the app's cards, a big time first. Side by side from 860 px;
   below, a segmented control like the app's direction toggle picks one. */
.skip { position: absolute; top: -80px; left: 12px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--btn); color: var(--on-btn); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.next-board { display: grid; gap: 16px; }
.board-live { display: grid; gap: 14px; }
.board-message { padding: 16px 18px; border-radius: 16px; background: var(--fill); color: var(--ink); }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--body); }
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--air); box-shadow: 0 0 0 3px var(--air-tint); }
.notice a { display: block; padding: 12px 16px; border-radius: 16px; background: var(--warn-bg); color: var(--warn); text-decoration: none; }
.notice b { margin-right: 6px; color: var(--warn); }

.seg { display: flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--fill); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 10px; white-space: nowrap; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .92rem; text-align: center; cursor: pointer; }
.seg input:checked + label { color: var(--on-tone); background: var(--blue); box-shadow: 0 6px 14px -8px rgba(15, 52, 69, .6); }
.seg input:checked + label.tone-coral { background: var(--coral); }
.seg input:checked + label.tone-lee { background: var(--lee); }
.seg input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.board-icon { width: 20px; height: 20px; flex: none; }

.cols { display: grid; gap: 16px; }
.col { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 16px 36px -28px rgba(15, 52, 69, .45); }
.col h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.col.tone-blue h3 .board-icon { color: var(--blue); }
.col.tone-coral h3 .board-icon { color: var(--coral); }
.col.tone-lee h3 .board-icon { color: var(--lee); }
.col-note { font-size: .92rem; color: var(--body); }

.runs { display: grid; margin: 0; padding: 0; list-style: none; }
.run { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); grid-template-areas: "next next" "when what" ". pill"; column-gap: 12px; row-gap: 4px; padding: 12px 4px; border-top: 1px solid var(--line); }
.run:first-child { border-top: 0; }
.next-line { grid-area: next; margin-bottom: 2px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.run-when { grid-area: when; display: grid; align-content: start; }
.run-time { font-size: 1.55rem; line-height: 1.1; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.run-day { font-size: .8rem; font-weight: 700; color: var(--soft); }
.run-what { grid-area: what; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.run-title { flex-basis: 100%; font-weight: 800; color: var(--ink); }
.run-details { flex-basis: 100%; font-size: .88rem; color: var(--soft); }
.run .state { grid-area: pill; justify-self: start; }
.run.is-next { padding: 12px; border: 1px solid var(--next-edge); border-radius: 16px; background: var(--next-bg); }
.run.is-next + .run { border-top: 0; }
.tone-coral .run.is-next { border-color: var(--coral-edge); background: var(--coral-bg); }
.tone-coral .next-line { color: var(--coral); }
.tone-lee .run.is-next { border-color: var(--lee-edge); background: var(--lee-bg); }
.tone-lee .next-line { color: var(--lee-ink); }
/* Gone by within the window: written in the quieter ink, never faded below contrast. */
.run.is-past .run-time, .run.is-past .run-title { color: var(--soft); font-weight: 700; }

.state { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.state.delayed, .state.counter { background: var(--warn-bg); color: var(--warn); }
.state.cancelled, .state.full { background: var(--bad-bg); color: var(--bad); }
.state.done { background: var(--fill); color: var(--soft); }
.state.available { background: var(--air-tint); color: var(--ok); }

/* The Moorea week (site.partials.week-board), the app's day strip: seven
   days, the chosen one a filled circle, today keeping its dot; then the
   day's two boards, side by side when the column is wide enough. Every day
   is in the page; :has() shows the chosen one. */
.week-board { container-type: inline-size; display: grid; gap: 14px; min-width: 0; }
.strip { display: flex; margin: 0; padding: 8px 6px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); min-width: 0; }
.strip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.strip label { flex: 1 1 0; display: grid; justify-items: center; gap: 1px; min-width: 0; min-height: 70px; padding: 2px 0 6px; border-radius: 14px; color: var(--ink); cursor: pointer; }
.strip .m { height: 14px; font-size: .65rem; font-weight: 700; color: var(--blue); }
.strip .w { font-size: .78rem; color: var(--soft); }
.strip .weekend .w { color: var(--ink); font-weight: 700; }
.strip .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.strip .today .n { color: var(--blue); }
.strip .td { width: 4px; height: 4px; border-radius: 50%; }
.strip .today .td { background: var(--blue); }
.strip input:checked + label .n { background: var(--blue); color: var(--paper); }
.strip input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.week-dir { justify-self: start; }
.week-board .seg.week-dir { display: flex; }
.week-live { display: grid; gap: 14px; }
.wday { display: grid; gap: 12px; }
.wday .chosen { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.week-board:has(input[value="0"]:checked) .wday:not(.wday-0),
.week-board:has(input[value="1"]:checked) .wday:not(.wday-1),
.week-board:has(input[value="2"]:checked) .wday:not(.wday-2),
.week-board:has(input[value="3"]:checked) .wday:not(.wday-3),
.week-board:has(input[value="4"]:checked) .wday:not(.wday-4),
.week-board:has(input[value="5"]:checked) .wday:not(.wday-5),
.week-board:has(input[value="6"]:checked) .wday:not(.wday-6) { display: none; }
.boards { display: grid; gap: 14px; }
.week-board:has(input[value="out"]:checked) .board.ret,
.week-board:has(input[value="ret"]:checked) .board.out { display: none; }
.board { --tone: var(--blue); --tone-bg: var(--next-bg); display: grid; gap: 12px; align-content: start; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 16px 36px -28px rgba(15, 52, 69, .45); }
.board.ret { --tone: var(--coral); --tone-bg: var(--coral-bg); }
.board h4 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--tone); }
.board h4 small { font-size: .88rem; font-weight: 600; color: var(--soft); }
.hero-next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 14px 16px; border-radius: 16px; background: var(--tone-bg); }
.hero-next .t { grid-row: span 2; font-size: 3rem; line-height: 1; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-next .next-in { font-size: 1.1rem; font-weight: 800; color: var(--tone); }
.hero-next .who { font-size: .95rem; font-weight: 600; color: var(--ink); }
.hero-next .seats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.board .notify { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: .95rem; text-decoration: none; }
.board .span, .board .none { color: var(--soft); font-size: .92rem; }
/* A day without boats keeps the board's size and calm: what, then where to look. */
.week-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 260px; padding: 24px 16px; border-radius: 16px; background: var(--fill); text-align: center; color: var(--body); }
.week-empty .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--card); color: var(--tone); }
.week-empty .ico .board-icon { width: 26px; height: 26px; }
.week-empty .empty-what { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.week-empty .see-day { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--tone); color: var(--tone); font-weight: 700; cursor: pointer; }
.week-empty .see-day:hover { background: var(--card); }
.wrows { margin: 0; padding: 0; list-style: none; }
.wrow { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.wrow + .wrow { border-top: 1px solid var(--line); }
.wrow .h { font-size: 1.06rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.wrow .co { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--ink); }
.wrow .co small { font-weight: 600; color: var(--soft); }
.wrow .tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.wrow.is-next .h { color: var(--tone); }
.wrow.is-past .h, .wrow.is-past .co { color: var(--soft); font-weight: 600; }
.wrow.is-past .h { text-decoration: line-through; }
.badge { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: .75rem; font-weight: 800; background: var(--fill); color: var(--ink); }
.badge.tone-moorea { background: var(--moorea-tint); color: var(--moorea); }
.badge.tone-air { background: var(--air-tint); color: var(--air); }
.badge.tone-lee { background: var(--lee-tint); color: var(--lee-ink); }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.gone summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--tone); font-weight: 700; font-size: .92rem; cursor: pointer; }
@container (min-width: 720px) {
  .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-board .seg.week-dir { display: none; }
  .week-board:has(input[value="out"]:checked) .board.ret,
  .week-board:has(input[value="ret"]:checked) .board.out { display: grid; }
}
@container (max-width: 480px) {
  .board { padding: 14px 12px; }
  .hero-next .t { font-size: 2.5rem; }
}

/* The Leeward Islands rail (site.partials.leeward-rails): a card per
   carrier in the Moorea boards' shape, Leeward violet, the chosen sailing
   drawn port by port. */
.leeward-rails { container-type: inline-size; display: grid; gap: 14px; min-width: 0; }
.rail-cards { display: grid; gap: 14px; }
@container (min-width: 760px) { .rail-cards:has(.rail-card + .rail-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board.lee { --tone: var(--lee-ink); --tone-bg: var(--lee-tint); }
.rail-card h3 { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.rail-card .sub { margin-top: -6px; font-size: .9rem; color: var(--soft); }
.dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dates input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dates label { display: grid; align-content: center; min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); font-size: .9rem; font-weight: 700; line-height: 1.15; color: var(--ink); cursor: pointer; }
.dates label small { font-size: .75rem; font-weight: 600; color: var(--soft); }
.dates input:checked + label { border-color: var(--lee); background: var(--lee-tint); }
.dates input:focus-visible + label { outline: 3px solid var(--lee); outline-offset: 2px; }
.rail-card:has(.dates input[value="0"]:checked) .sailing:not(.sailing-0),
.rail-card:has(.dates input[value="1"]:checked) .sailing:not(.sailing-1),
.rail-card:has(.dates input[value="2"]:checked) .sailing:not(.sailing-2),
.rail-card:has(.dates input[value="3"]:checked) .sailing:not(.sailing-3),
.rail-card:has(.dates input[value="4"]:checked) .sailing:not(.sailing-4),
.rail-card:has(.dates input[value="5"]:checked) .sailing:not(.sailing-5) { display: none; }
.sailing { display: grid; gap: 10px; }
.rail { margin: 0; padding: 0; list-style: none; }
.rail .stop { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; }
.rail .dot { justify-self: center; z-index: 1; width: 14px; height: 14px; border: 3px solid var(--lee); border-radius: 50%; background: var(--card); }
.rail .call .dot { border-color: var(--warn); }
.rail .arrive .dot { background: var(--lee); }
.rail .name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 1.06rem; font-weight: 800; color: var(--ink); }
.rail .role { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.rail .role.depart { background: var(--lee-tint); color: var(--lee-ink); }
.rail .role.call { background: var(--warn-bg); color: var(--warn); }
.rail .role.arrive { background: var(--air-tint); color: var(--ok); }
.rail .t { font-size: 1.12rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rail .t small { display: block; font-size: .75rem; font-weight: 600; color: var(--soft); }
.rail .leg { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 0 12px; min-height: 44px; }
.rail .leg::before { content: ""; justify-self: center; width: 3px; height: 100%; min-height: 44px; border-radius: 3px; background: var(--line); }
.rail .leg span { font-size: .85rem; color: var(--soft); }
.rail .leg.night::before { background: repeating-linear-gradient(var(--lee) 0 4px, transparent 4px 8px); }
.rail .leg.night span { font-weight: 700; color: var(--lee-ink); }
.rail-foot { padding-top: 10px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--soft); }

/* The Moorea comparison (site/compare): three answers, the trip
   calculator, the companies side by side. */
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.ans { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.ans .q { font-size: .88rem; color: var(--soft); }
.ans .v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.ans small { color: var(--soft); }
.co { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.calc-card h2 { margin-bottom: 12px; }
.calc { display: grid; gap: 20px; }
.calc-form { display: grid; gap: 12px; align-content: start; }
.calc .field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field-name { font-weight: 700; color: var(--ink); }
.field-name small { display: block; font-size: .82rem; font-weight: 600; color: var(--soft); }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; }
.stepper button { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; font: 800 1.25rem/1 var(--font); color: var(--ink); cursor: pointer; }
.stepper button:disabled { color: var(--soft); opacity: .45; cursor: default; }
.stepper button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.stepper output { min-width: 1.6em; text-align: center; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.seg.calc-seg { display: inline-flex; flex-wrap: wrap; }
.calc-seg label { flex: none; }
.results { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; list-style: none; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; }
.res.best { border: 2px solid var(--ok); background: var(--air-tint); }
.res .p { font-size: 1.6rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res small { grid-column: 1 / -1; font-size: .82rem; color: var(--soft); }
.win-tag { margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--ok); color: var(--paper); font-size: .75rem; font-weight: 800; }
/* The side-by-side table keeps its columns on a phone and scrolls inside its
   card: the card's one column never grows past the page for it. */
.guide .card { grid-template-columns: minmax(0, 1fr); }
.guide .card .table-scroll.compare-scroll { position: relative; overflow-x: auto; } /* relative: its screen-reader-only texts stay inside it */
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare-table th, .compare-table td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table thead th { border-top: 0; }
.compare-table tbody th { width: 34%; font-weight: 600; color: var(--soft); }
.compare-table td { font-weight: 600; color: var(--ink); }
.compare-table td small { display: block; font-size: .8rem; font-weight: 600; color: var(--soft); }
.compare-table td.win { font-weight: 800; color: var(--ok); }
@media (min-width: 760px) { .calc { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
/* A phone sees all three companies at once: tighter cells, names over their initials. */
@media (max-width: 599px) {
  .compare-table { min-width: 0; font-size: .88rem; }
  .compare-table th, .compare-table td { padding: 8px 6px; }
  .compare-table tbody th { width: 30%; }
  .compare-table thead .co { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* A store button is a <p> while not live: keep the guide's paragraph colour off it. */
.guide .store { color: var(--on-btn); }

@media (max-width: 859px) {
  .next-board:has(.seg input[value="0"]:checked) .col-1,
  .next-board:has(.seg input[value="1"]:checked) .col-0 { display: none; }
}
@media (min-width: 860px) {
  .seg { display: none; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .live .dot.pulse { animation: live-pulse 1.4s ease-out 2; }
}
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(12, 113, 112, .45); } 100% { box-shadow: 0 0 0 10px rgba(12, 113, 112, 0); } }

.airlines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.airlines .card { display: grid; gap: 6px; align-content: start; }
.airlines .kind { margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--soft); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* The schematic maps: drawn inline, labels over a white halo for contrast. */
.map-card { display: grid; gap: 8px; margin: 0; }
.map { display: block; width: 100%; height: auto; border-radius: 22px; background: var(--water); border: 1px solid var(--line); }
.map .land { fill: var(--land); stroke: var(--coast); stroke-width: 1.5; }
.map .island { font: italic 700 24px var(--font); fill: var(--island); }
.map .route { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; }
.map .route.lee { stroke: var(--lee); }
.map .reveal { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.map .route.extra { stroke: var(--lee); stroke-dasharray: 2 6; }
.map .pin { fill: var(--blue); stroke: var(--halo); stroke-width: 3; }
.map .pin.air { fill: var(--air); }
.map .label { font: 700 14px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--halo); stroke-width: 4px; stroke-linejoin: round; }
.map .label.soft { fill: var(--soft); }
.map .stop circle { fill: var(--lee); stroke: var(--halo); stroke-width: 3; }
.map .stop.blue circle { fill: var(--blue); }
.map .stop.air circle { fill: var(--air); }
.map .stop text { font: 800 16px var(--font); fill: var(--on-tone); text-anchor: middle; }
/* A map number repeated in the list beside it, where the place is named. */
.num { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--c, var(--blue)); color: var(--on-tone); font-size: .8rem; font-weight: 800; vertical-align: middle; }
.num.air { background: var(--air); }
/* The live OpenStreetMap map (js/guide-map.js) lies exactly over the drawn
   one, so nothing moves when it arrives; it shows once its tiles are in. */
.map-frame { position: relative; }
.live-map { position: absolute; inset: 0; z-index: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--map-bg); opacity: 0; transition: opacity .4s; font: inherit; }
.is-live .live-map { opacity: 1; }
.live-pin span { display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--halo); border-radius: 50%; background: var(--blue); color: var(--on-tone); font: 800 14px var(--font); box-shadow: 0 4px 10px -4px rgba(15, 52, 69, .6); box-sizing: border-box; }
.live-pin.air span { background: var(--air); }
.live-pin.lee span { background: var(--lee); }
.live-pin.light span { background: #9b86e0; }
/* Unnumbered places, Papeete and Maupiti in the Leeward list: a smaller dot. */
.live-pin.dot span { width: 18px; height: 18px; margin: 6px; border-width: 3px; }
.live-map .leaflet-popup-content { margin: 12px 14px; font: 500 .92rem/1.4 var(--font); color: var(--body); }
.live-map .leaflet-popup-content b { display: block; color: var(--ink); }
.live-map .leaflet-popup-content p { margin: 4px 0 0; }
.live-map .leaflet-popup-content a { color: var(--blue); font-weight: 700; }
.live-map-hint { position: absolute; left: 50%; bottom: 14px; z-index: 1001; transform: translateX(-50%); min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--btn); color: var(--on-btn); font: 700 .9rem var(--font); white-space: nowrap; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .live-map { transition: none; } }
/* On a phone the drawn map, and so the live one over it, is taller: a
   two-to-one strip would leave the live map too small to use. */
@media (max-width: 480px) { .map-split .map { aspect-ratio: 4 / 3; } }
.map-card figcaption { font-size: .85rem; color: var(--soft); }
.places { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.places li { display: grid; gap: 6px; }
.places b { color: var(--ink); }
.places li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .92rem; color: var(--body); }
.places a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; }

.guide .card .ico { margin-bottom: 4px; }
.ico.tickets { --c: var(--moorea); --tint: var(--moorea-tint); }
.ico.weather { --c: var(--air); --tint: var(--air-tint); }
.guide .aside { padding-top: 20px; border-top: 3px solid var(--lee); }
.guide .moorea-aside { border-top-color: var(--blue); }
.carriers { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.carriers li { display: grid; gap: 8px; }
.carriers b { font-size: 1.05rem; color: var(--ink); }
.carriers li > span { display: flex; flex-wrap: wrap; gap: 6px; }
.sailings { display: grid; gap: 10px; margin: 0; }
.sailings div { display: grid; gap: 6px; }
.sailings dt { font-size: .85rem; font-weight: 700; color: var(--soft); }
.sailings dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--body); }
.day { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding-inline: 8px; border-radius: 10px; background: var(--lee-tint); color: var(--day-ink); font-weight: 700; font-size: .9rem; }
.leeward-stops { --c: var(--lee); }
/* The guide's closing band: the home page's download band (.band-cta) in a card. */
.guide .cta { padding: 32px 24px; border-radius: 28px; overflow: hidden; }

/* The 404: only the warm top of the sky, since text fills the whole block. */
.sky.calm { background: var(--sky-calm); }
.sky.calm .hero { padding-block: 40px 96px; }

.foot { padding-block: 48px 28px; background: var(--foot); border-top: 1px solid var(--line); color: var(--body); font-size: .95rem; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.foot-cols nav, .foot-cols > div { display: grid; align-content: start; gap: 2px; }
.foot-brand { gap: 10px !important; }
.foot-brand p { max-width: 36ch; }
.foot-title { margin-bottom: 4px; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.foot a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); text-underline-offset: 3px; }
.foot-end { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--soft); font-size: .9rem; }
/* Five columns need a wide screen; on a tablet the brand takes its own row above the four lists. */
@media (min-width: 760px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .foot-cols { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }

/* The home bands: full width, each its own ground, one rhythm and one
   container. Every text colour below was measured on its band. */
main { overflow-x: clip; }
.band { padding-block: 56px; }
.band-tint { background: var(--band-tint); }
.band-white { background: var(--paper); }
.band-sand { background: var(--sand); }
.band-cta { background: var(--band-cta); }
.band-head { display: grid; gap: 10px; max-width: 720px; margin-bottom: 32px; }
.eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.band-head h2 { font-size: 2rem; line-height: 1.08; font-weight: 900; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.band-lead { font-size: 1.1rem; line-height: 1.5; color: var(--body); max-width: 60ch; }
@media (min-width: 760px) { .band { padding-block: 72px; } .band-head h2 { font-size: 2.6rem; } }
@media (min-width: 1100px) { .band { padding-block: 96px; } }

 { justify-self: end; padding: 4px 20px 16px; font-size: 1.3rem; font-weight: 800; color: #9fdcff; }

/* The download band: the stores beside two whole phones. The art is a box
   of fixed proportions (1 : 1.36) that the phones are placed in by
   percentage, so it scales with the width and never crops a device. */
.download { display: grid; gap: 40px; align-items: center; }
.download .band-head { margin-bottom: 20px; }
.download .stores { justify-content: flex-start; }
.download { --art-w: 380px; }
.download.trio { --art-w: 460px; }
.download-art { position: relative; justify-self: center; width: min(100%, 340px); aspect-ratio: 1 / 1.36; }
.download-art::before { content: ""; position: absolute; inset: -6% -12%; border-radius: 50%; background: var(--art-glow); }
.download-art .phone { position: absolute; padding: 2.4%; border-radius: 13% / 6%; }
.download-art .phone img { border-radius: 11% / 5%; }
.download-art .front { left: 2%; bottom: 2%; z-index: 2; width: 56%; transform: none; }
.download-art .back { right: 2%; top: 4%; z-index: 1; width: 50%; transform: rotate(6deg); }
.download-icon { position: absolute; right: 6%; bottom: 4%; z-index: 3; width: 21%; border-radius: 22%; box-shadow: 0 14px 28px -12px rgba(15, 52, 69, .5); }
/* Three phones: the front one centred, one tilted behind on each side. */
.trio .download-art { width: min(100%, 400px); aspect-ratio: 1 / 1.12; }
.trio .download-art .front { left: 25%; width: 50%; }
.trio .download-art .back, .trio .download-art .side { top: 2%; width: 44%; }
.trio .download-art .side { left: 0; z-index: 1; transform: rotate(-6deg); }
@media (min-width: 760px) {
  .download { grid-template-columns: minmax(0, 1fr) minmax(0, var(--art-w)); gap: 56px; }
  .download-art, .trio .download-art { width: var(--art-w); }
}

@media (min-width: 760px) {
  .hero h1 { font-size: 4.8rem; }
  .stage { max-width: 900px; height: 560px; }
  .lift { width: 290px; margin-left: -145px; }
  .lift.right, .lift.left { width: 250px; top: 90px; }
  .lift.right { margin-left: 80px; }
  .lift.left { margin-left: -330px; }
  .guide-head h1 { font-size: 3.2rem; }
  .lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; }
  .split.map-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guide .cta { padding: 48px 56px; }
}

/* Without script, scroll-driven CSS and movement without fading: a card is
   fully readable in any frame, a screenshot or a crawler's render included.
   With script (html.js), site.js and GSAP take over and these step aside.
   Nothing moves where these timelines are unsupported or motion is reduced. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.js) :is(.card, .feature, .line) { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    html:not(.js) .lift.center { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}

/* The only start state set before script runs: the hero phones sit lower,
   for site.js to raise. The side ones are also hidden; the centre one stays
   visible, being the page's largest paint, so motion never delays it. The
   class is set in the head and taken off after three seconds if GSAP never
   arrived, so nothing stays down or hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js .stage .lift { transform: translateY(90px); }
  .js .stage .lift.left, .js .stage .lift.right { opacity: 0; }
}


/* Feature and destination cards rise a little under a mouse, once revealed. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature, .line { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
  .feature:hover, .line:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(15, 52, 69, .55); }
}
@keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes drift { to { translate: 0 -60px; } }

/* Support and privacy (page.blade.php): the stores' text as a readable
   document, about 68 characters to the line. The policy gets a table of
   contents, sticky beside it on a wide screen; the support page's
   questions (a bold line, a break, the answer) read as separate blocks,
   and a mail address is a button. */
.doc-wrap { display: grid; gap: 28px; padding-block: 24px 72px; }
.doc > :first-child { margin-top: 0; }
.doc { max-width: 68ch; min-width: 0; color: var(--body); font-size: 1.05rem; line-height: 1.65; overflow-wrap: anywhere; }
.doc > * + * { margin-top: 14px; }
.doc h2 { margin-top: 40px; font-size: 1.45rem; line-height: 1.2; font-weight: 800; color: var(--ink); }
.doc h2 + * { margin-top: 12px; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--ink); }
.doc a { color: var(--link); text-underline-offset: 3px; }
.doc .meta { font-size: .95rem; color: var(--soft); }
.doc p:has(> strong:first-child + br) { padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 12px 26px -22px rgba(15, 52, 69, .45); }
.doc a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; padding: 10px 20px; border-radius: 14px; background: var(--btn); color: var(--on-btn); font-weight: 700; text-decoration: none; }
.toc { align-self: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.toc-title { margin-bottom: 6px; font-weight: 800; color: var(--ink); }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 6px 0; color: var(--link); font-weight: 600; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (min-width: 1000px) {
  .doc-wrap.has-toc { grid-template-columns: 240px minmax(0, 68ch); justify-content: center; gap: 56px; }
  /* Clear of the pill by 24 px wherever it sticks; a contents list taller
     than the room left scrolls on its own. */
  .toc { position: sticky; top: calc(var(--pill-top) + var(--pill-h) + 24px + env(safe-area-inset-top)); max-height: calc(100vh - var(--pill-top) - var(--pill-h) - 48px); overflow-y: auto; overscroll-behavior: contain; }
}

/* The theme switch (site/partials/theme-toggle): a 44 px round button, the
   moon on a light page, the sun on a dark one. Hidden without the head's
   script, which is also what would make it work. */
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.theme-toggle:hover { background: rgba(15, 52, 69, .08); }
:is(.nav-dark, [data-theme="dark"]) .theme-toggle:hover { background: rgba(255, 255, 255, .12); }
.theme-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root:not([data-theme]) .theme-toggle { display: none; }
.nav-sheet-end .theme-toggle { color: var(--ink); }

/* Each screenshot comes in both themes (site/partials/shot); one shows. */
.t-dark, [data-theme="dark"] .t-light { display: none; }
[data-theme="dark"] .t-dark { display: block; }

/* What the tokens cannot say alone. The panels' white edge would glare at
   night; the phones' frame needs a rim to part from a dark ground; the map
   tiles go dark under a filter, their pins keeping their colours. */
[data-theme="dark"] :is(.guide-panel, .nav-sheet) { border-color: var(--line); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8); }
[data-theme="dark"] .phone { box-shadow: 0 0 0 1px #3d3836, 0 40px 80px -30px rgba(0, 0, 0, .7); }
[data-theme="dark"] :is(.guide-item:hover, .guide-item[aria-current], .nav-sheet ul a[aria-current]:not(.guide-item)) { background: rgba(124, 187, 239, .14); }
[data-theme="dark"] .live-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
[data-theme="dark"] .live-map { background: var(--map-bg); }
[data-theme="dark"] .live-map .leaflet-popup-content-wrapper, [data-theme="dark"] .live-map .leaflet-popup-tip { background: var(--card); }
[data-theme="dark"] .live-map .leaflet-control-zoom a { background: var(--card); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .live-map .leaflet-control-attribution { background: rgba(24, 22, 22, .8); color: var(--soft); }
[data-theme="dark"] .live-map .leaflet-control-attribution a { color: var(--link); }