/* Figtree, served from the site rather than Google Fonts, so no visitor's address goes to Google.
   One variable font in two subsets (Latin, and Latin Extended for the Czech names and address),
   all weights from 300 to 900. Licence: fonts/OFL.txt. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: one fixed sea stage. Sky on top with the wordmark and intro top left and the contact
   top right; a layered pixel-dither sea below with five pixel ships riding the swell. The four
   times of day each set the interface palette, and the canvas uses them as keyframes along the
   sun's path; night is the default. */
:root, [data-time="night"] {
  /* interface */
  --page: #02050c;
  --ink: #effcff;            /* wordmark, names, links */
  --text: #c9d7e6;           /* running text */
  --mute: #8fa3ba;           /* secondary text */
  --dim: #74869f;            /* tertiary text */
  --accent: #5df2e3;
  --accent-line: rgba(93, 242, 227, .42);
  --underline: #5df2e3;      /* the time words' and links' underlines: 4.5:1 or more on every sky */
  --halo: #02050c;           /* text halo against the sky */
  --halo-foot: #030b1a;      /* text halo against the deep water */
  --btn-bg: #02050c;
  --btn-ink: #02050c;
  /* scene, read by the canvas */
  --sky-0: #02050c; --sky-1: #02050c; --sky-2: #02050c; --sky-3: #02050c;
  --grain: #0c1424;
  --sun-core: #ff9a6b; --sun-glow: #a82a52;   /* the last and first light: deep red twilight */
  --cloud: #2f3a52; --cloud-shade: #1a2133;
  --sea-foam: #effcff; --sea-rim: #5df2e3; --sea-rim-deep: #2aa7b0;
  --sea-azure: #3a86ff; --sea-cobalt: #2953d0; --sea-indigo: #1c2b84; --sea-navy: #121d55;
  --water: #030b1a;
  --sea-deep: #01040b;        /* the water down by the seabed, on a tall screen */
  --glint: #effcff; --glint-dim: #5df2e3; --sparkle: #1c2b84;
}
[data-time="morning"] {
  --page: #0e1f4d;
  --ink: #fff6ec;
  --text: #e4e8f4;
  --mute: #b3bfdd;
  --dim: #8d9bc6;
  --accent: #ffc27a;
  --accent-line: rgba(255, 194, 122, .5);
  --underline: #ffd29a;
  --halo: #0e1f4d;
  --halo-foot: #0a1432;
  --btn-bg: #102356;
  --btn-ink: #0e1f4d;
  --sky-0: #0e1f4d; --sky-1: #2d4e93; --sky-2: #b06f8f; --sky-3: #ffa564;
  --grain: #0e1f4d;
  --sun-core: #fff3d1; --sun-glow: #ffb35c;
  --cloud: #ffc9a8; --cloud-shade: #7b6aa6;
  --sea-foam: #fff5e8; --sea-rim: #8ee6ff; --sea-rim-deep: #4f9fd6;
  --sea-azure: #3f6fd6; --sea-cobalt: #2f4ba6; --sea-indigo: #26327a; --sea-navy: #1b2357;
  --water: #0a1432;
  --sea-deep: #050a1e;
  --glint: #ffe6b0; --glint-dim: #ffa45e; --sparkle: #3f6fd6;
}
[data-time="day"] {
  --page: #1349a6;
  --ink: #ffffff;
  --text: #f1f7ff;
  --mute: #d6e8ff;
  --dim: #b1cdf0;
  --accent: #ffe27a;
  --accent-line: rgba(255, 226, 122, .65);
  --underline: #ffe27a;
  --halo: #1349a6;
  --halo-foot: #0a3168;
  --btn-bg: #1d62cc;
  --btn-ink: #0c3a82;
  --sky-0: #1349a6; --sky-1: #1d5cc0; --sky-2: #4f9ff0; --sky-3: #b7e2ff;
  --grain: #1a5cc4;
  --sun-core: #fffbe8; --sun-glow: #fff1b8;
  --cloud: #ffffff; --cloud-shade: #cfe6ff;
  --sea-foam: #ffffff; --sea-rim: #86f7ea; --sea-rim-deep: #2cc1cc;
  --sea-azure: #2a8df2; --sea-cobalt: #1e66cf; --sea-indigo: #174fa6; --sea-navy: #113f88;
  --water: #0a3168;
  --sea-deep: #051a3e;
  --glint: #ffffff; --glint-dim: #b8f3ff; --sparkle: #6fb0ee;
}
[data-time="evening"] {
  --page: #170a2b;
  --ink: #fff0e8;
  --text: #f2dbe2;
  --mute: #caa4ba;
  --dim: #9b7592;
  --accent: #ff9b78;
  --accent-line: rgba(255, 155, 120, .5);
  --underline: #ffd2bf;
  --halo: #170a2b;
  --halo-foot: #130a24;
  --btn-bg: #1a0c30;
  --btn-ink: #170a2b;
  --sky-0: #170a2b; --sky-1: #4d1747; --sky-2: #b72d47; --sky-3: #ff6a3d;
  --grain: #170a2b;
  --sun-core: #ffcf7a; --sun-glow: #ff5533;
  --cloud: #ff8e72; --cloud-shade: #5c2552;
  --sea-foam: #ffe6d2; --sea-rim: #ff9b78; --sea-rim-deep: #d0566e;
  --sea-azure: #8a3f96; --sea-cobalt: #5b2c86; --sea-indigo: #3b2167; --sea-navy: #2a1a4c;
  --water: #130a24;
  --sea-deep: #0a0614;
  --glint: #ffd38a; --glint-dim: #ff6a3c; --sparkle: #8a3f96;
}
:root {
  /* the same at every time of day */
  --star: #d8eaff;
  --star-dim: #5f7593;
  --station-lit: #4d403b;      /* the battle station in the night sky: its hull, lit and at the rim */
  --station-dark: #1f181b;
  --station-ring: #a08a68;     /* the rings round its top */
  --station-window: #ffb347; --station-window-2: #ffe08a;
  --ship-hull: #5df2e3;
  --ship-keel: #2aa7b0;
  --ship-white: #effcff;
  --ship-pale: #9fdcef;
  --ship-blue: #3a86ff;
  --ship-mast: #8fa3ba;
  --ship-window: #02050c;
  --ship-gunmetal: #66737f;    /* the yacht's hull */
  --ship-silver: #c3ccd6;      /* the yacht's superstructure */
  --ship-steel: #8a97a6;       /* the carrier's hull, haze grey */
  --ship-steel-dark: #4f5b68;  /* waterlines */
  --ship-deck: #3a434e;        /* the carrier's flight deck */
  --ship-island: #a7b3c0;      /* the carrier's island */
  --ship-jet: #d3dbe4;         /* its aircraft's upper sides; their undersides are steel-dark */
  --craft-beacon: #ff3b30;     /* an aircraft's beacon, blinking after dark */
  --craft-flame: #ffb347;      /* a jet's afterburner */
  /* under the water, on a tall screen; the canvas mixes these with the deep water as the light fails */
  --bed: #9c8f6e;              /* the sand of the seabed */
  --bed-rock: #5d5a52;         /* stones in it */
  --grass: #2f5a3a;            /* Posidonia, the Mediterranean's seagrass */
  --wreck: #4a4440;            /* the cruiser Moskva on the bottom: its hull */
  --wreck-deck: #686058;       /* its superstructure, missile tubes and masts */
  --wreck-rust: #8a5434;
  --wreck-dark: #2b2624;       /* its keel and openings */
  --fish: #b8c7d6;             /* a school of small fish */
  --bubble: #cfe9ff;
  --jelly: #7cf7ff;            /* jellyfish glowing at night */
  --jelly-2: #ff8ae0;
  --ufo-glass: #9ff3ff;        /* the UFO in the biggest cloud: its dome, and its chasing lights */
  --ufo-light: #ffd84d;
  --bottle-glass: #5fa37c;     /* the bottle on the swell: its green glass, the message inside and the cork */
  --bottle-paper: #efe6d2;
  --bottle-cork: #b07d52;
  --wilson: #f3efe4;           /* Wilson, the volleyball from Cast Away: white, its shade, and the red print of a hand */
  --wilson-shade: #c5bfae;
  --wilson-print: #c0392b;
  --shark: #56616e;            /* the shark's fin that circles the tug */
  --rose-dress: #2f3d63;       /* Jack and Rose at the container ship's bow: her dress and hair, his shirt and hair */
  --rose-hair: #b5462b;
  --jack-shirt: #efe6d2;
  --jack-hair: #d9b45a;
  --sub: #3a414b;              /* the submarine that glides past at a depth on a tall screen: its hull, its fins and sail */
  --sub-dark: #1e2329;
  --eye-white: #e6fbff;        /* Ocean Eyes in the night sea: the whites, the irises, the pupils and the shut lids */
  --eye-iris: #38d6ff;
  --eye-pupil: #02050c;
  --eye-lid: #2a5a6e;
  --ghost-sail: #a8e6cf;       /* the Flying Dutchman: its torn sails, its hull, its masts and yards, its stern lantern */
  --ghost-hull: #33463f;
  --ghost-mast: #6f8f84;
  --ghost-lamp: #d6ffe8;
  --koba-hull: #e1e7ee;        /* the Kobayashi Maru: its white hull, its grey underside and nacelle, the nacelle's glow, its red stripe */
  --koba-dark: #6e7a8a;
  --koba-glow: #5ac8ff;
  --koba-stripe: #d23630;
  --roadster: #e0262b;         /* the Roadster in the container: its red, the dark red below, its lamp; the smoke of its launch */
  --roadster-dark: #8e1418;
  --roadster-lamp: #fff3c4;
  --smoke: #e9eef3;
  --smoke-shade: #9aa5b1;
  --diver-suit: #1b2026;       /* Enzo, the free diver on the tug: his suit, his face, his fins, his lift bag and his line */
  --diver-skin: #e8b08e;
  --diver-fin: #ffd84d;
  --lift-bag: #ff7a1a;
  --rope: #d9cba5;
  /* the wordmark's pixel looks: the outline and shadow, the morning's sunrise stripes, the evening's glitch */
  --mark-shadow: #020818;
  --mark-sun-1: #fff3c4; --mark-sun-2: #ffc95c; --mark-sun-3: #ff8f4a; --mark-sun-4: #ff5c8a; --mark-sun-glint: #ffffff;
  --glitch-a: #00e5ff; --glitch-b: #ff3ea5;

  --font-brand: "Figtree", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  /* the water line a button fills to, in the same 2px pixels as the sea */
  --pixel-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 3h2v1H0zM2 2h2v2H2zM4 1h1v3H4zM5 0h3v4H5zM8 1h1v3H8zM9 2h2v2H9zM11 3h1v1h-1z'/%3E%3C/svg%3E");
  --gutter: clamp(16px, 4.5vw, 64px);
  --edge: clamp(20px, 5vh, 44px);
  color-scheme: dark;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-brand);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--page);
  touch-action: manipulation;
}
/* a phone or a short window: the page grows taller than the window and scrolls (see `layout`) */
:root.tall, :root.tall body { height: auto; }
:root.tall body { overflow-x: hidden; overflow-y: scroll; }
:root.tall .stage { position: absolute; inset: 0 0 auto; height: var(--stage-h); }
#sea { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* top band: wordmark and intro on the left, contact on the right */
.top {
  position: absolute;
  z-index: 2;
  top: calc(var(--edge) + env(safe-area-inset-top, 0px));
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--mute);
  text-shadow: 0 0 2px var(--halo), 0 0 8px var(--halo);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.masthead { min-width: 0; max-width: 31rem; }
.wordmark {
  margin: 0;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* Four looks in pixel caps, one for each time of day (the script picks it, and a click shows the next): SVG,
   aria-hidden, over the words' box, so the page never moves when the look changes; the words stay in the page,
   hidden from the eye, for screen readers and search, and show in Figtree if the script does not run. */
.wordmark { position: relative; height: 1em; }
.wordmark .mark {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; overflow: visible;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s;   /* one fades out as the next fades in */
}
.wordmark[data-mark] .mark-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wordmark[data-mark="sunrise"] .mark--sunrise, .wordmark[data-mark="water"] .mark--water,
.wordmark[data-mark="glitch"] .mark--glitch, .wordmark[data-mark="neon"] .mark--neon {
  opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s;
}
:root.held .wordmark .mark { transition: none; }   /* paused, a look changes at once, as the time does */
.mark-tide { animation: mark-tide 4.2s step-end infinite; }   /* the sea in the letters rises and falls a pixel */
@keyframes mark-tide { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.mark-glint { animation: mark-glint 4.6s infinite; }   /* the morning's glint: across in 1.1 s, a pixel at a time, every 4.6 s */
@keyframes mark-glint { 0% { transform: translateX(0); } 24%, 100% { transform: translateX(var(--sweep)); } }
.mark--neon { filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 7px var(--accent)); }
.mark-dead { animation: mark-flicker 5.3s step-end infinite; }   /* a tired tube, now and then */
@keyframes mark-flicker { 0% { opacity: 1; } 91% { opacity: .35; } 93% { opacity: 1; } 95% { opacity: .5; } 97% { opacity: 1; } }
.mark-split-a { animation: mark-split-a 3.7s step-end infinite; }   /* now and then the glitch's split jumps wider */
.mark-split-b { animation: mark-split-b 3.7s step-end infinite; }
@keyframes mark-split-a { 0% { transform: none; } 86% { transform: translateX(-1px); } 89% { transform: none; } 92% { transform: translateX(-2px); } 94% { transform: none; } }
@keyframes mark-split-b { 0% { transform: none; } 86% { transform: translateX(1px); } 89% { transform: none; } 92% { transform: translateX(2px); } 94% { transform: none; } }
.intro {
  margin: 18px 0 0;
  max-width: 42ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}
.intro + .intro { margin-top: 12px; }
.intro b { font-weight: 600; color: var(--accent); }

/* the times of day: each word wears its own time's colour as an underline, light enough for 4.5:1 */
.time {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-thickness .2s ease;
}
/* A hovered or picked word gets a thicker underline. A picked word takes its own colour once the
   scene has reached its time; until then, and on hover, it stays near white, so it reads against
   whatever sky is behind it. */
.time:hover, .time[aria-pressed="true"] { color: var(--ink); text-decoration-thickness: 3px; }
:root[data-time="morning"] .time[data-time="morning"][aria-pressed="true"],
:root[data-time="day"] .time[data-time="day"][aria-pressed="true"],
:root[data-time="evening"] .time[data-time="evening"][aria-pressed="true"],
:root[data-time="night"] .time[data-time="night"][aria-pressed="true"] { color: var(--accent); }
.time:focus-visible { outline: 2px solid var(--underline); outline-offset: 3px; }

.contact {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  font-style: normal;
}
.person-name { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--ink); }
.person-name ~ .person-name { margin-top: 12px; }

/* links: a thin underline in the time's light tint, 4.5:1 like the time words' (`--underline`); the accent on hover */
.mail, .family span {
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.mail { color: var(--ink); transition: color .2s ease, text-decoration-color .2s ease; }
.mail:hover { color: var(--accent); text-decoration-color: var(--accent); }
.mail:focus-visible, .family:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 36px;
  padding-inline: 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--ink);
  font: 600 13px/1 var(--font-brand);
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(100% + 8px);
  z-index: -1;
  background: var(--accent);
  -webkit-mask: var(--pixel-wave) 0 0 / 24px 8px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% 100% no-repeat;
  mask: var(--pixel-wave) 0 0 / 24px 8px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% 100% no-repeat;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.btn:hover, .btn:focus-visible { color: var(--btn-ink); border-color: var(--accent); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(-100%); animation: slosh 1s linear infinite; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--small { height: 26px; min-width: 70px; padding-inline: 11px; justify-content: center; font-size: 12px; }
@keyframes slosh { to { -webkit-mask-position: 24px 0, 0 8px; mask-position: 24px 0, 0 8px; } }

/* ships: pixel sprites riding the swell, built from the maps in the script, and the carrier's aircraft, the gulls,
   the dolphins, the bottle, Wilson, the diver, the shark, Jack and Rose, the periscope, and the ships' turns */
.ship, .craft, .gull, .dolphin, .bottle, .wilson, .diver, .shark, .couple, .periscope, .ship-turn {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  overflow: visible;
  transform-origin: 50% 100%;
  will-change: transform;
}
.ship-hull { fill: var(--ship-hull); }
.ship-keel, .ship-box-b { fill: var(--ship-keel); }
.ship-rail, .ship-cabin, .ship-sail, .ship-lamp { fill: var(--ship-white); }
.ship-sail2, .ship-box-c { fill: var(--ship-pale); }
.ship-box-a { fill: var(--ship-blue); }
.ship-mast { fill: var(--ship-mast); }
.ship-window { fill: var(--ship-window); }
.ship-gunmetal { fill: var(--ship-gunmetal); }
.ship-silver { fill: var(--ship-silver); }
.ship-steel { fill: var(--ship-steel); }
.ship-steel-dark { fill: var(--ship-steel-dark); }
.ship-deck { fill: var(--ship-deck); }
.ship-island { fill: var(--ship-island); }
.ship-jet { fill: var(--ship-jet); }
.ship-flare { fill: var(--ship-hull); opacity: 0; }
.ship-lamp { animation: flash 3s step-end infinite; }
.ship--cargo .ship-lamp { animation-name: flash-twice; animation-duration: 5s; }
/* its Morse: while the script sends it (`morse`), the lamp shines with its glow when `lit`, and is dim between */
.ship--cargo.morse .ship-lamp { animation: none; opacity: .2; }
.ship--cargo.morse.lit .ship-lamp, .ship--cargo.morse.lit .ship-flare { opacity: 1; }
.ship--tug .ship-lamp { animation-duration: 4s; animation-delay: -1.4s; }
.ship--yacht .ship-lamp { animation-duration: 3.6s; animation-delay: -2.1s; }
.ship--carrier .ship-lamp { animation-name: flash-twice; animation-duration: 4.4s; animation-delay: -.7s; }
.ship:hover .ship-lamp { animation: none; }
.ship:hover .ship-flare { opacity: 1; }
:root[data-time="day"] .ship-lamp { animation: none; opacity: .3; }   /* lights off in daylight */
@keyframes flash { 0% { opacity: 1; } 12% { opacity: .2; } }
@keyframes flash-twice { 0% { opacity: 1; } 6% { opacity: .2; } 12% { opacity: 1; } 18% { opacity: .2; } }
/* While its engines run, an aircraft's beacon blinks after dark; a jet's afterburner flickers off the catapult;
   a spinning rotor shows its blades every other frame (the script sets `blur` on the others). */
.craft { pointer-events: none; }
.craft-hub, .craft-blade, .craft-tail { fill: var(--ship-steel-dark); }
.craft.blur :is(.craft-blade, .craft-tail) { opacity: 0; }
.craft-beacon { fill: var(--ship-jet); }
.craft.on .craft-beacon { animation: beacon 1.2s step-end infinite; }
.craft--heli.on .craft-beacon { animation-duration: 1.5s; animation-delay: -.6s; }
:root[data-time="day"] .craft.on .craft-beacon { animation: none; }   /* lights off in daylight, as on the ships */
.craft-flame { fill: var(--craft-flame); opacity: 0; }
.craft.burn .craft-flame, .roadster.burn .craft-flame { animation: burn .2s step-end infinite; }
@keyframes beacon { 0% { fill: var(--craft-beacon); } 15% { fill: var(--ship-jet); } }
@keyframes burn { 0% { opacity: 1; } 50% { opacity: .55; } }
/* a gull shows one of its three wing positions, which the script picks */
.gull, .dolphin, .bottle, .wilson, .diver, .shark, .couple, .periscope { pointer-events: none; }
/* the Flying Dutchman and the Kobayashi Maru, faded in over their ships, which fade out; the ghost flickers */
.ship { transition: opacity 1.2s ease; }
.ship-turn { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.ghost-sail { fill: var(--ghost-sail); }
.ghost-hull { fill: var(--ghost-hull); }
.ghost-mast { fill: var(--ghost-mast); }
.ghost-lamp { fill: var(--ghost-lamp); }
.ghost-flicker { animation: ghost 3.4s ease-in-out infinite; }
@keyframes ghost { 0%, 100% { opacity: .9; } 50% { opacity: .6; } }
.koba-hull { fill: var(--koba-hull); }
.koba-dark { fill: var(--koba-dark); }
.koba-glow { fill: var(--koba-glow); }
.koba-stripe { fill: var(--koba-stripe); }
.rose-dress { fill: var(--rose-dress); }
.rose-hair { fill: var(--rose-hair); }
.jack-shirt { fill: var(--jack-shirt); }
.jack-hair { fill: var(--jack-hair); }
.couple g { display: none; }   /* walking, their arms down; at the bow, spread */
.couple[data-pose="0"] .pose-0, .couple[data-pose="1"] .pose-1 { display: inline; }
.shark-fin { fill: var(--shark); }
.wilson-white { fill: var(--wilson); }
.wilson-shade { fill: var(--wilson-shade); }
.wilson-print { fill: var(--wilson-print); }
.diver-suit { fill: var(--diver-suit); }
.diver-skin { fill: var(--diver-skin); }
.diver-fin { fill: var(--diver-fin); }
.bottle-glass { fill: var(--bottle-glass); }
.bottle-paper { fill: var(--bottle-paper); }
.bottle-cork { fill: var(--bottle-cork); }
/* the Roadster, turned and grown about its middle as it flies, and its smoke over the whole stage */
.roadster, .smoke { position: absolute; left: 0; top: 0; z-index: 1; display: block; overflow: visible; pointer-events: none; }
.roadster { transform-origin: 50% 50%; will-change: transform; }
.roadster-red { fill: var(--roadster); }
.roadster-dark { fill: var(--roadster-dark); }
.roadster-lamp { fill: var(--roadster-lamp); }
.smoke-lit { fill: var(--smoke); }
.smoke-shade { fill: var(--smoke-shade); }
/* the UFO that hides in the biggest cloud: turned and shrunk about its middle as it leaves; its lights chase round */
.ufo { position: absolute; left: 0; top: 0; z-index: 1; display: block; overflow: visible; transform-origin: 50% 50%; pointer-events: none; }
.ufo-glass { fill: var(--ufo-glass); }
.ufo-light { fill: var(--ufo-light); animation: ufo-chase .9s step-end infinite; }
.ufo-l2 { animation-delay: -.3s; }
.ufo-l3 { animation-delay: -.6s; }
@keyframes ufo-chase { 0% { opacity: 1; } 33% { opacity: .25; } }
.gull g { display: none; }
.gull[data-wing="0"] .wing-0, .gull[data-wing="1"] .wing-1, .gull[data-wing="2"] .wing-2 { display: inline; }
/* paused by the pause button: the lights stop blinking too */
:root.held .ship-lamp, :root.held .craft-beacon, :root.held .craft-flame, :root.held .btn::before,
:root.held .mark-tide, :root.held .mark-dead, :root.held .mark-split-a, :root.held .mark-split-b, :root.held .mark-glint,
:root.held .ufo-light, :root.held .ghost-flicker { animation-play-state: paused; }

/* bottom band: company details on the left, the group link on the right */
.foot {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px 32px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
  text-shadow: 0 0 2px var(--halo-foot), 0 0 6px var(--halo-foot), 0 0 10px var(--halo-foot);
  pointer-events: none;
}
.foot > * { pointer-events: auto; }
.legal { min-width: 0; display: grid; gap: 2px; }
.legal p { margin: 0; display: flex; flex-wrap: wrap; column-gap: 1.4em; }
.legal .ids { display: inline-flex; flex-wrap: wrap; column-gap: 1.4em; }   /* the two registration numbers wrap together */
.legal strong { font-weight: 500; color: var(--mute); }
.foot-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.family, .lang, .pause { font-size: 13px; font-weight: 500; color: var(--mute); text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.lang, .pause {
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.lang:hover, .pause:hover { color: var(--accent); text-decoration-color: var(--accent); }
.lang:focus-visible, .pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* the pause button looks like the links beside it */
.pause { padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; text-shadow: inherit; cursor: pointer; }
.family svg { width: .7em; height: .7em; margin-left: .35em; vertical-align: 0; }
.family:hover { color: var(--accent); }
.family:hover span { text-decoration-color: var(--accent); }

/* while the time of day changes, the interface fades along with the canvas */
:root[data-shifting] :is(body, .stage, .top, .foot, .wordmark, .intro, .intro b, .time, .person-name, .mail, .btn, .legal strong, .family, .lang, .pause) {
  transition: color 1.2s ease, background-color 1.2s ease, border-color 1.2s ease, text-decoration-color 1.2s ease, text-shadow 1.2s ease;
}

/* a note that floats up above the station when it is clicked */
.note {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  margin: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(28rem, calc(100vw - 2 * var(--gutter)));
  padding: 8px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--ink);
  font: 600 13px/1.35 var(--font-brand);
  text-align: center;
  text-wrap: balance;
  white-space: pre-line;   /* a line break in the words (
) breaks the line, so the box fits its lines */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.note.on { opacity: 1; transform: translate(-50%, -100%); }
.note-quote { display: block; margin-top: 2px; }   /* the wreck's quote, on a line of its own */

@media (max-width: 640px) {
  .top { flex-direction: column; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ship-lamp, .craft-beacon, .craft-flame, .ufo-light, .ghost-flicker, .mark-tide, .mark-dead, .mark-split-a, .mark-split-b, .mark-glint { animation: none; }
  .ship, .ship-turn { transition: none; }
  .pause { display: none; }   /* nothing moves */
  .wordmark[data-mark] .mark { transition: none; }   /* a look changes at once */
  .btn::before { transition: none; }
  .btn:hover::before, .btn:focus-visible::before { animation: none; }
  .note { transition: none; }
}