:root {
  color-scheme: dark;
  --paper: #f1eddb;
  --muted: #c2c6b1;
  --gold: #d2b17b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #203c37;
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
[hidden] {
  display: none !important;
}
#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#c:active {
  cursor: grabbing;
}
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #09191566,
    transparent 24%,
    transparent 66%,
    #0919158c
  );
  z-index: 1;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* the title under the name wraps before it reaches the icons */
  gap: 12px;
  /* above the fish counter so the icons' tooltips are not hidden under it;
     the bar's empty space lets clicks through to what lies beneath */
  z-index: 5;
  pointer-events: none;
}
header > * {
  pointer-events: auto;
}
.identity {
  display: flex;
  align-items: center;
  gap: 13px;
}
.emblem {
  width: 31px;
  height: 31px;
}
.name {
  font:
    18px Georgia,
    serif;
  letter-spacing: 0.03em;
}
.identity small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.22em;
  margin-top: 5px;
  color: #d7d9c6;
}
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.quiet-button {
  border: 1px solid #eee9d133;
  border-radius: 3px;
  padding: 10px 15px;
  background: #15352c33;
  backdrop-filter: blur(8px);
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: background 0.2s;
}
.quiet-button:hover {
  background: #d8dfbd1f;
}
.quiet-button kbd {
  font: 9px Arial;
  opacity: 0.55;
  margin-left: 10px;
}
/* Top bar: small icon buttons, 40 px touch targets around 20 px glyphs in one
   stroke style. Each button's title is also its visible tooltip, so the JS
   that keeps a title current (music.js, sfx.js, wave-intensity.js,
   explore.js) keeps the tooltip current. */
.header-actions .icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 7px;
  white-space: nowrap;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  touch-action: manipulation;
}
.icon-button svg,
.time-toggle svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-button:focus-visible {
  outline-offset: 2px;
}
#detail[data-tier="high"] {
  color: var(--gold);
}
/* The detail button's bars: one for Lite, two for Balanced, three for High. */
#detail path {
  stroke-width: 2.2;
}
#detail[data-tier="low"] :is(.bar2, .bar3),
#detail[data-tier="balanced"] .bar3 {
  opacity: 0.3;
}
/* One quiet line when the site steps down by itself (explore.js), last in
   the journey row: under its button, the E pill and the tour's stop, so it
   never covers them. */
.detail-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border: 1px solid #eee9d126;
  border-radius: 3px;
  background: #0f201be6;
  font-size: 12px;
  letter-spacing: 0.04em;
  animation: detail-toast 0.4s ease-out;
}
.detail-toast button {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #eee9d133;
  border-radius: 3px;
  background: transparent;
  color: var(--gold);
}
@keyframes detail-toast {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .detail-toast {
    animation: none;
  }
}
.icon-button::after,
.time-toggle button::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 9px;
  border: 1px solid #eee9d126;
  border-radius: 3px;
  background: #0f201be6;
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.map-button::after {
  left: auto;
  right: 0;
  transform: none;
}
.icon-button:focus-visible::after,
.time-toggle button:focus-visible::after {
  opacity: 1;
}
@media (hover: hover) {
  .icon-button:hover::after,
  .time-toggle button:hover::after {
    opacity: 1;
  }
}
/* Time of day: four icon buttons; on narrow screens only the current one
   shows and a tap steps to the next (js/world/time-of-day.js). The border is
   an inset shadow so the group is as tall as the other buttons. */
.time-toggle {
  display: flex;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #eee9d133;
  background: #15352c33;
  backdrop-filter: blur(8px);
}
.time-toggle button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--paper);
  opacity: 0.55;
  transition:
    opacity 0.2s,
    background 0.2s,
    color 0.2s;
  touch-action: manipulation;
}
.time-toggle button:hover,
.time-toggle button:focus-visible {
  opacity: 0.9;
}
.time-toggle button:focus-visible {
  outline-offset: -2px;
}
.time-toggle button[aria-pressed="true"] {
  opacity: 1;
  color: var(--gold);
  background: #d8dfbd1f;
}
/* Music and sound effects: a slash or cross replaces the sound waves when off. */
.music-toggle[data-state="on"] .music-slash,
.music-toggle[data-state="off"] .music-waves {
  display: none;
}
.music-toggle[data-state="off"] {
  opacity: 0.72;
}
/* Wave intensity: the icon's lines are the readout (one bright line for Calm,
   up to three heavier ones for Windy); the label spells the level out. */
.wave-toggle path {
  opacity: 0.28;
}
.wave-toggle .w2,
.wave-toggle:is([data-step="2"], [data-step="3"], [data-step="4"]) .w3,
.wave-toggle:is([data-step="3"], [data-step="4"]) .w1 {
  opacity: 1;
}
.wave-toggle[data-step="4"] svg {
  stroke-width: 1.9;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.lake-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-right: 13px;
  opacity: 0.8;
  white-space: nowrap;
}
/* Narrower than this, the lake's name would crowd the top bar's icons. */
@media (max-width: 1000px) {
  .lake-label {
    display: none;
  }
}
#intro {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 90px 8vw;
  background: linear-gradient(90deg, #0a1e18b0, #0a1e183d 42%, transparent 75%);
  pointer-events: none;
  transition:
    opacity 1.2s,
    visibility 1.2s;
}
.intro-inner {
  max-width: 520px;
  pointer-events: auto;
  margin-top: -1vh;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e0d4b2;
}
#intro .eyebrow {
  text-wrap: balance;
  text-shadow:
    0 0 6px #0a1e18,
    0 1px 2px #0a1e18b0;
}
.eyebrow:before {
  content: "";
  width: 25px;
  height: 1px;
  background: var(--gold);
}
h1 {
  font:
    400 clamp(48px, 5.5vw, 85px)/1.02 Georgia,
    "Times New Roman",
    serif;
  letter-spacing: -0.045em;
  margin: 27px 0 26px;
  text-wrap: balance;
}
.intro-copy {
  font:
    14px/1.9 Arial,
    sans-serif;
  max-width: 300px;
  color: #e5e5d4;
}
.enter-button {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 31px;
  border: 1px solid #eee9d178;
  padding: 16px 22px;
  background: #ebe6cf;
  color: #1e3429;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition:
    background 0.2s,
    transform 0.2s;
}
.enter-button:hover {
  background: #fff9e4;
  transform: translateY(-2px);
}
.enter-button span {
  font-size: 22px;
  line-height: 14px;
}
#intro.departed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#intro.departed .intro-inner {
  pointer-events: none;
}
/* Bottom right: the minimap, alone. It opens the map. --map is its side and
   --corner its distance from the bottom, so what stands above it (the fishing
   display on small screens) can follow when it steps down. */
:root {
  --map: 165px;
  --corner: 32px;
}
@media (max-width: 1280px) {
  :root {
    --map: 150px;
  }
}
@media (max-width: 1024px) {
  :root {
    --map: 130px;
  }
}
.minimap {
  display: none;
  position: fixed;
  right: 40px;
  bottom: var(--corner);
  z-index: 2;
  width: var(--map);
  height: var(--map);
  padding: 0;
  border: 1px solid #f1ecd6cc;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 1px #0b1a1666;
  overflow: hidden;
  touch-action: manipulation;
  opacity: 0;
  transition:
    opacity 1s,
    border-color 0.2s;
}
.exploring .minimap {
  display: block;
}
.ready .minimap {
  opacity: 1;
}
.minimap:hover {
  border-color: #f1ecd6;
}
.minimap:focus-visible {
  outline-offset: 3px;
}
.minimap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Its compass rim (turned by explore.js so the heading is at the top), and
   the fixed gold index over it that marks "this way". */
.minimap .rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rim-band {
  fill: none;
  stroke: #0b1a1666;
  stroke-width: 11;
}
.rim-line,
.rim-ticks {
  fill: none;
  stroke: #f1ecd6a6;
  vector-effect: non-scaling-stroke;
}
.rim-line {
  stroke: #f1ecd659;
}
.rim text {
  fill: #f1ecd6e6;
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.rim .rim-n {
  fill: var(--gold);
}
/* (on the small maps, 104, 92 and 84 px, the letters stay 9 px or more) */
@media (max-width: 760px), (max-height: 520px) {
  .rim text {
    font-size: 11px;
  }
}
.minimap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7%;
  height: 4.5%;
  translate: -50% 0;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* Bottom left: how to move, in one flat row of four guides. Each is a picture
   and its words on one centre line, with a thin rule between neighbours. */
.controls {
  position: fixed;
  bottom: 37px;
  left: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #dbe0cb;
  font-size: 10px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px #0b1a16b3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s;
  /* (hidden, so not a tab stop or a click target, until the visitor is on the water) */
  visibility: hidden;
}
.exploring .controls {
  opacity: 1;
  visibility: visible;
}
.ctl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ctl + .ctl {
  padding-left: 16px;
  border-left: 1px solid #eee9d12e;
}
.ctl-art {
  display: flex;
  align-items: center;
}
/* The T and F guides are real buttons (the parts of the row that take the
   pointer); F pulses while a cast can begin (fishing.js sets .ready), and T's
   key turns gold while the auto tour runs. */
button.ctl {
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
  color: inherit;
  pointer-events: auto;
}
button.ctl:hover kbd {
  border-color: #eee9d1a6;
}
button.ctl:focus-visible {
  outline-offset: 4px;
}
.ctl-cast.ready kbd {
  animation: cast-pulse 1.8s ease-in-out infinite;
}
#tour[aria-pressed="true"] kbd {
  border-color: var(--gold);
  color: var(--gold);
}
@keyframes cast-pulse {
  50% {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px #d2b17b40;
    transform: scale(1.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ctl-cast.ready kbd {
    animation: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px #d2b17b59;
  }
}
/* Narrower windows tighten the row; it stays one row while it fits beside the
   minimap (down to 690 px), folds into two columns below that (the second
   column keeps its rule), and under 501 px, or on a short window, shows only
   the T and F guides. */
@media (max-width: 900px) {
  .controls {
    gap: 12px;
    font-size: 9px;
  }
  .ctl {
    gap: 8px;
  }
  .ctl + .ctl {
    padding-left: 12px;
  }
}
@media (max-width: 689px) {
  .controls {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px 12px;
  }
  .ctl:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 500px), (max-height: 520px) {
  .ctl:not(.ctl-cast, .ctl-tour) {
    display: none;
  }
  .controls .ctl-tour {
    padding-left: 0;
    border-left: 0;
  }
}
.controls kbd {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  font: 11px Arial;
  color: #f2edda;
  background: #142d25b3;
  border: 1px solid #eee9d140;
  border-bottom-width: 2px;
  border-radius: 4px;
  text-shadow: none;
}
.controls kbd.wide {
  padding: 0 10px;
  letter-spacing: 0.1em;
}
.keys-wasd {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  gap: 3px;
}
.keys-wasd kbd:nth-child(1) {
  grid-area: 1 / 2;
}
.keys-wasd kbd:nth-child(2) {
  grid-area: 2 / 1;
}
.keys-wasd kbd:nth-child(3) {
  grid-area: 2 / 2;
}
.keys-wasd kbd:nth-child(4) {
  grid-area: 2 / 3;
}
.controls svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #f2edda;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctl-text {
  opacity: 0.85;
}
#hud {
  position: fixed;
  top: 90px;
  right: 40px;
  z-index: 2;
  font: 10px/1.5 monospace;
  color: #e5ead4;
  display: none;
}
.debug #hud {
  display: block;
}
.loading {
  position: fixed;
  inset: 0;
  background: #1d342d;
  z-index: 8;
  display: grid;
  place-content: center;
  gap: 18px;
  text-align: center;
  transition:
    opacity 0.8s,
    visibility 0.8s;
  font:
    15px Georgia,
    serif;
  letter-spacing: 0.06em;
}
.loading > svg {
  margin: auto;
  width: 38px;
  height: 38px;
}
.loading small {
  font: 9px Arial;
  letter-spacing: 0.2em;
  color: #aab8a2;
}
.ready .loading {
  opacity: 0;
  visibility: hidden;
}
/* The bar is in the static page, so it shows from first paint; the CSS creep
   covers the time before js/load-progress.js takes over at 10%. Its box is
   the old 3px line, so the splash sits where it did; the wave and the kayak
   overflow it. Progress is --p (0 to 100, set by script, never animated).
   The water and the kayak each ride a .load-ride, moved to the progress
   point by the same transform and transition, so they move as one. In that
   frame the gold wave ends and the faint one starts at the kayak, a whole
   number of wavelengths (44px) from it, so the water under the kayak is
   always the start of a wave, and its bob and tilt are plain keyframes on
   the waves' 4s clock. All the motion is transform animation on the
   compositor; script only writes --p, at most ten times a second.
   test/load-wave.test.mjs keeps these numbers in step. */
.load-bar {
  --p: 4;
  position: relative;
  width: min(220px, 60vw);
  height: 3px;
  margin: 6px auto 0;
  color: var(--gold);
}
.load-water {
  position: absolute;
  inset: -2.5px 0 auto;
  height: 8px;
  overflow: hidden;
}
.load-ride {
  position: absolute;
  inset: 0;
  translate: calc(var(--p) * 1%) 0;
  transition: translate 0.3s ease-out;
  animation: load-pre 8s ease-out forwards;
}
.live .load-ride {
  animation: none;
}
@keyframes load-pre {
  from {
    translate: 4% 0;
  }
  to {
    translate: 10% 0;
  }
}
.load-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 264px;
  height: 8px;
  overflow: hidden;
  color: #f1eddb33;
}
.load-wave.fill {
  left: -264px;
  color: var(--gold);
}
/* The moving parts are spans around the svgs: Chrome animates an <svg>
   element's own transform on the main thread, a span's on the compositor. */
.load-drift {
  display: block;
  width: 308px;
  height: 8px;
  animation: load-drift 4s -1s linear infinite;
}
.load-wave svg,
.load-boat svg {
  display: block;
  width: 100%;
  height: 100%;
}
.load-wave svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
}
.load-wave path,
.load-wave use {
  vector-effect: non-scaling-stroke;
}
@keyframes load-drift {
  to {
    translate: -44px 0;
  }
}
.load-boat {
  position: absolute;
  left: -14px;
  top: -6.5px;
  width: 28px;
  height: 12px;
  fill: currentColor;
  transform-origin: 14px 8px;
  animation:
    load-bob 4s -1s linear infinite,
    load-tilt 4s -1s linear infinite;
}
/* Quarter-sines: ease-out-sine away from the midline, ease-in-sine back. */
@keyframes load-bob {
  0%,
  50%,
  100% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  }
  25% {
    translate: 0 -2px;
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
  75% {
    translate: 0 2px;
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
}
@keyframes load-tilt {
  0%,
  100% {
    rotate: -16deg;
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
  50% {
    rotate: 16deg;
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
  25%,
  75% {
    rotate: 0deg;
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  }
}
/* Still waves, and the kayak level on a crest, stepping along with progress. */
@media (prefers-reduced-motion: reduce) {
  .loading,
  .load-ride {
    transition: none;
    animation: none;
  }
  .load-drift,
  .load-boat {
    animation-play-state: paused;
  }
}
#err {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #182f29;
  padding: 15vh 10vw;
  font:
    17px/1.8 Georgia,
    serif;
  white-space: pre-wrap;
  color: #eee7d3;
  overflow: auto;
}
dialog {
  padding: 0;
  border: 1px solid #d0d6b52b;
  border-radius: 5px;
  background: #1c342c;
  color: var(--paper);
  width: min(900px, calc(100vw - 36px));
  max-height: 90dvh;
  overflow: auto;
  box-shadow: 0 30px 100px #0008;
}
dialog::backdrop {
  background: #071c17a8;
  backdrop-filter: blur(6px);
}
.map-heading {
  padding: 27px 30px 21px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.map-heading h2 {
  font:
    28px Georgia,
    serif;
  margin: 0 0 9px;
}
.map-heading p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.close {
  border: 0;
  background: transparent;
  font-size: 25px;
  padding: 0 0 10px 15px;
}
.map-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  padding: 0 30px 28px;
  gap: 28px;
  align-items: center;
}
#lake-map {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border: 1px solid #d9dfbd20;
  cursor: crosshair;
  border-radius: 3px;
}
.map-destination {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 7px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #d4d9be1b;
  padding: 17px 0;
  background: transparent;
}
.map-destination > span:first-child {
  font:
    19px Georgia,
    serif;
}
.map-destination small {
  font-size: 10px;
  color: #afbda5;
  grid-column: 1;
  line-height: 1.6;
}
.map-destination > span:last-child {
  grid-row: 1/3;
  grid-column: 2;
  align-self: center;
  color: var(--gold);
}
.map-destination:hover > span:first-child {
  color: var(--gold);
}
.map-help {
  font-size: 10px;
  line-height: 1.7;
  color: #b4c1aa;
  margin: 23px 0 17px;
}
.reset {
  background: transparent;
  border: 1px solid #d0d5b333;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.map-caption {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #a7b79e;
  margin-top: 10px;
}
.map-attribution {
  display: block;
  margin-top: 9px;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0;
}
.map-attribution a {
  color: inherit;
}
#world-labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.world-label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: 9px 13px 10px;
  background: #142d25cc;
  backdrop-filter: blur(7px);
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 3px 22px #08150e33;
}
.world-label::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  height: 22px;
  width: 1px;
  background: var(--accent);
}
.world-label small {
  display: block;
  font-size: 7px;
  letter-spacing: 0.13em;
  color: var(--accent);
  margin-bottom: 5px;
}
.world-label span {
  display: block;
  font:
    18px Georgia,
    serif;
}
.journey-controls {
  display: none;
  position: fixed;
  top: 111px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  /* (on a phone it runs nearly edge to edge: its empty space lets a tap
     through to the E key and the water, as the top bar's does) */
  pointer-events: none;
}
.journey-controls > * {
  pointer-events: auto;
}
.exploring .journey-controls {
  display: grid;
  justify-items: center;
  gap: 9px;
}
.journey-controls .quiet-button {
  background: #142d25b3;
  font-size: 10px;
  min-height: 40px;
}
/* Auto tour: at a stop, a quiet ring counts the 15 s down beside the stop's
   name, over Open, Next stop and a pause (js/world/explore.js). */
.tour-stop {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 9px 12px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #eee9d133;
  border-radius: 3px;
  background: #142d25b3;
  backdrop-filter: blur(8px);
  text-align: left;
}
.tour-stop[hidden] {
  display: none;
}
.tour-ring {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
}
.tour-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 2;
}
.tour-ring circle {
  stroke: #eee9d126;
}
.tour-ring #tour-arc {
  stroke: var(--gold);
  stroke-dasharray: 1;
  stroke-linecap: round;
}
.tour-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tour-name {
  min-width: 0;
}
.tour-name small {
  display: block;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #d7d9c6;
  opacity: 0.8;
}
.tour-name span {
  display: block;
  margin-top: 3px;
  font:
    16px Georgia,
    serif;
}
.tour-actions {
  display: flex;
  gap: 6px;
}
/* Narrow screens: the buttons go under the name. */
@media (max-width: 760px) {
  .tour-stop {
    grid-template-columns: auto auto;
    justify-content: center;
  }
  .tour-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
.journey-controls .tour-actions .quiet-button {
  min-height: 36px;
  padding: 8px 12px;
}
#tour-pause {
  display: grid;
  place-items: center;
  width: 36px;
  padding: 0;
}
#tour-pause svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#tour-pause[aria-pressed="false"] .tour-play,
#tour-pause[aria-pressed="true"] .tour-bars {
  display: none;
}
#tour-pause[aria-pressed="true"] {
  color: var(--gold);
}
.nearby-button {
  padding: 10px 16px;
  background: #e3c28d;
  border: 0;
  border-radius: 2px;
  color: #1c342c;
  font-size: 11px;
}
/* Off a touch screen the invitation is the E key in the world (place-key.js);
   this button is for screen readers, and shows when Tab lands on it, or when
   the key would be off the screen or under the HUD (.keyless, explore.js). */
@media not (pointer: coarse) {
  .nearby-button:not(.tabbed, .keyless) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (pointer: coarse) {
  .nearby-button {
    min-height: 44px;
  }
}
#place-dialog {
  width: min(530px, calc(100vw - 36px));
}
.place-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 30px 0;
  gap: 16px;
}
.place-heading .eyebrow {
  font-size: 9px;
  line-height: 1.6;
}
.place-heading .close {
  padding-bottom: 0;
}
.place-content {
  padding: 18px 38px 36px;
}
.place-content h2 {
  font:
    38px/1.15 Georgia,
    serif;
  font-weight: normal;
  margin: 10px 0 21px;
}
.place-content p {
  font:
    14px/1.85 Arial,
    sans-serif;
  color: #cbd2bd;
  margin: 0 0 24px;
}
.project-logo:has(img:not([hidden])) {
  background: #f9f5ed;
  border-radius: 3px;
  padding: 16px 22px;
  width: fit-content;
  margin-bottom: 25px;
}
.project-logo img {
  display: block;
  width: 154px;
  height: auto;
}
.place-content .enter-button {
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  margin: 0;
  padding: 14px 20px;
}
.place-content .pending-note {
  border-top: 1px solid #d2b17b40;
  padding-top: 16px;
  color: #b4bfaa;
  font-size: 11px;
}
.back-note {
  display: block;
  margin-top: 24px;
  color: #a7b79e;
  font-size: 10px;
}
.touch-controls {
  display: none;
  position: fixed;
  bottom: 115px;
  left: 25px;
  z-index: 4;
  grid-template-columns: repeat(3, 43px);
  gap: 5px;
}
.touch-controls button {
  width: 43px;
  height: 43px;
  border: 1px solid #d6dfc448;
  background: #183b3090;
  border-radius: 50%;
  font-size: 18px;
  touch-action: none;
  user-select: none;
  backdrop-filter: blur(6px);
}
.touch-controls [data-drive="forward"] {
  grid-column: 2;
}
.touch-controls [data-drive="left"] {
  grid-column: 1;
}
.touch-controls [data-drive="back"] {
  grid-column: 2;
}
.touch-controls [data-drive="right"] {
  grid-column: 3;
}
@media (max-width: 760px) {
  .journey-controls {
    top: 95px;
    width: calc(100vw - 44px);
  }
  .world-label span {
    font-size: 15px;
  }
  .world-label small {
    font-size: 6px;
  }
  .place-content {
    padding: 18px 26px 28px;
  }
  .place-content h2 {
    font-size: 31px;
  }
  .place-heading {
    padding: 24px 26px 0;
  }
  header {
    padding: 23px 22px;
  }
  #detail {
    display: none;
  }
  .time-toggle button:not([aria-pressed="true"]) {
    display: none;
  }
  .name {
    font-size: 17px;
    white-space: nowrap;
  }
  .identity small {
    font-size: 8px;
  }
  .quiet-button {
    padding: 9px 12px;
  }
  #intro {
    padding: 95px 8vw;
  }
  .intro-inner {
    margin-top: -8vh;
  }
  h1 {
    font-size: 58px;
  }
  :root {
    --map: 104px;
    --corner: 28px;
  }
  .minimap {
    right: 23px;
  }
  .controls {
    left: 23px;
    bottom: 28px;
  }
  .map-layout {
    grid-template-columns: 1fr;
    padding: 0 22px 22px;
    gap: 6px;
  }
  .map-heading {
    padding: 24px 22px 18px;
  }
  .map-heading h2 {
    font-size: 24px;
  }
  .map-destination {
    padding: 12px 0;
  }
  .map-help {
    margin: 16px 0;
  }
  #lake-map {
    max-height: 36vh;
    width: auto;
    max-width: 100%;
    margin: auto;
  }
  .intro-copy {
    max-width: 255px;
    font-size: 13px;
  }
  #hud {
    right: 22px;
    font-size: 9px;
  }
}
/* Phones: six icon buttons share the top bar with the name, so the bar
   tightens, the buttons narrow to 34 px (still 40 px tall) and the map
   button drops its word (560 px and down). */
@media (max-width: 560px) {
  header {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-actions {
    gap: 2px;
  }
  .header-actions .icon-button {
    min-width: 34px;
    padding: 0;
  }
  .time-toggle button {
    width: 34px;
  }
  .map-label {
    display: none;
  }
  :root {
    --map: 92px;
  }
}
/* Under 360 px the minimap would crowd the screen: the Map button in the top
   bar is the way to the map. */
@media (max-width: 359px) {
  .exploring .minimap {
    display: none;
  }
}
/* Short windows: the minimap shrinks to leave room for the fishing display
   above it (the hints give way to the F guide, above). */
@media (max-height: 520px) {
  :root {
    --map: 84px;
    --corner: 20px;
  }
}
/* The opening text on a 320 px phone (the headline would run to three lines)
   and on a landscape phone (it would run up under the top bar), each set a
   little tighter so it stays between the top bar and the bottom corners. */
@media (max-width: 359px) {
  h1 {
    font-size: 46px;
  }
}
@media (max-height: 440px) {
  #intro {
    padding: 86px 8vw 70px;
  }
  .intro-inner {
    margin-top: 0;
  }
  h1 {
    font-size: 38px;
    margin: 10px 0;
  }
  .intro-copy {
    font-size: 13px;
    line-height: 1.6;
  }
  .enter-button {
    margin-top: 14px;
    padding: 12px 22px;
  }
}
/* Small phones: the emblem gives way so the map button stays on screen. */
@media (max-width: 419px) {
  header .emblem {
    display: none;
  }
}
/* Narrower windows: the title under the name sets a little tighter and
   wraps beside the icons (two lines on a tablet, three on most phones, five
   at 320 px), its lines balanced so no word sits alone at the end. */
@media (max-width: 1000px) {
  .identity small {
    letter-spacing: 0.16em;
    text-wrap: balance;
  }
}
@media (pointer: coarse) {
  .exploring .touch-controls {
    display: grid;
  }
  /* A finger gets only the T guide, under the steering pad (the pad and the
     fishing button do the rest), with a full-size tap target. */
  .controls .ctl:not(.ctl-tour) {
    display: none;
  }
  .controls .ctl-tour {
    min-height: 44px;
    padding: 0;
    border-left: 0;
    touch-action: manipulation;
  }
  #c {
    cursor: default;
  }
}
/* Fishing ---------------------------------------------------------------- */
.fishing {
  display: none;
}
.exploring .fishing {
  display: block;
}
.fish-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.fish-counter {
  position: fixed;
  top: 92px;
  right: 40px;
  z-index: 4;
  display: grid;
  grid-template-columns: 18px auto;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid #eee9d126;
  border-radius: 3px;
  padding: 9px 14px 10px 12px;
  background: #142d2599;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.fish-counter:hover {
  background: #1d3b32cc;
}
.fish-counter svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  grid-row: 1 / 3;
}
.fish-count {
  font:
    17px Georgia,
    serif;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.fish-count b {
  font-weight: normal;
}
.fish-count i {
  font-style: normal;
  font-size: 13px;
  color: #d5dac6;
}
.fish-streak {
  font:
    8px Arial,
    sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1c342c;
  background: var(--gold);
  border-radius: 2px;
  padding: 3px 5px 2px;
  margin-left: 4px;
  align-self: center;
}
.fish-summary {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c2c9b2;
  margin-top: 5px;
}
.debug .fish-counter {
  top: 150px;
}
.fish-dock {
  position: fixed;
  bottom: 104px; /* clear of the hint row */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 44px);
}
.fish-prompt {
  font:
    15px/1.4 Georgia,
    serif;
  text-align: center;
  text-shadow: 0 1px 12px #0a1e18;
  color: var(--paper);
}
.fish-prompt:empty {
  display: none;
}
.fish-prompt.fish-toast {
  color: #f1dcb4;
}
.fish-prompt.fish-note {
  font:
    9px Arial,
    sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.fish-meter {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #c2c9b2;
  background: #142d25b3;
  border: 1px solid #eee9d126;
  border-radius: 3px;
  backdrop-filter: blur(8px);
}
.fish-meter-label,
.fish-meter-end {
  min-width: 34px;
}
.fish-meter-end {
  text-align: right;
}
.fish-track {
  position: relative;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: #eee9d11f;
}
.fish-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #d2b17b59;
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}
.fish-fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #d2b17b22, #d2b17bcc);
}
.fight .fish-fill {
  display: none;
}
.fish-needle {
  position: absolute;
  top: -5px;
  left: 0;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--paper);
  box-shadow: 0 0 6px #0008;
}
.aim.perfect .fish-meter-end,
.fight.in .fish-meter-label {
  color: var(--gold);
}
.fight.in .fish-needle {
  background: #f4dba6;
}
.fight.hot .fish-needle {
  background: #e7765b;
}
.fight.hot .fish-track {
  box-shadow: 0 0 0 1px #e7765b80;
}
.fight.tell .fish-zone {
  background: #e9c98aa6;
}
.fight.tell .fish-track {
  animation: fish-shiver 0.09s linear infinite;
}
.fight.tell .fish-needle {
  box-shadow:
    0 0 0 3px #e9c98a66,
    0 0 10px #e9c98a;
}
.fight.tell .fish-meter-label {
  color: #f1dcb4;
}
.fight.slack .fish-meter-label {
  color: #f0b39c;
}
.fight.slack .fish-track {
  box-shadow: 0 0 0 1px #f0b39c66;
}
@keyframes fish-shiver {
  25% {
    transform: translateX(2.5px);
  }
  75% {
    transform: translateX(-2.5px);
  }
}
.fish-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid #eee9d133;
  border-radius: 3px;
  background: #142d25b3;
  backdrop-filter: blur(8px);
  font-size: 11px;
  letter-spacing: 0.06em;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.fish-action:hover {
  background: #1d3b32cc;
}
.fish-action kbd {
  font: 9px Arial;
  opacity: 0.6;
  margin-left: 10px;
}
.fish-action.live {
  background: #e3c28d;
  border-color: #e3c28d;
  color: #1c342c;
}
.fish-action.wait {
  border-color: #d2b17b80;
}
.fish-action.dim {
  color: #b6c0a9;
}
/* Idle with a mouse: the F guide makes the offer (screen readers get it
   there, and the fishing line's own live text). */
.fish-action.quiet {
  display: none;
}
/* The bite (fishing.js sets .bite for exactly the hook window): the strike
   button and the Space guide pulse fast, about 3.5 times a second. */
.fishing.bite .fish-action,
.ctl.bite kbd {
  background: #f6dfae;
  border-color: #f6dfae;
  color: #1c342c;
  animation: bite-pulse 0.28s ease-in-out infinite;
}
@keyframes bite-pulse {
  50% {
    transform: scale(1.14);
    box-shadow:
      0 0 0 6px #f6dfae66,
      0 0 22px #f6dfaecc;
  }
}
.fish-card {
  position: fixed;
  /* below the journey row (its button and the place's E pill), so neither
     hides the other. ponytail: the floor is the row's measured bottom (about
     193 px, 188 px on a phone) typed by hand, so a taller row would meet the
     card; and on a short screen the lower card only fits as the compact one
     below (max-height: 520px), its story line dropped. Upgrade: lay the row
     and the card out in one column. */
  top: max(24%, 212px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(340px, calc(100vw - 44px));
  padding: 20px 24px 18px;
  text-align: center;
  /* it stays until clicked or tapped (or Space, Enter, Escape: fishing.js) */
  cursor: pointer;
  background: #1c342cf2;
  border: 1px solid #d0d6b52b;
  border-top: 2px solid #d2b17b99;
  border-radius: 4px;
  box-shadow: 0 30px 80px #0007;
}
.fish-card.show {
  animation: fish-rise 0.45s ease-out;
}
@keyframes fish-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}
.fish-card.rare {
  border-color: #d2b17b;
  background:
    radial-gradient(circle at 50% 0, #d2b17b2e, transparent 60%),
    #1c342cf5;
  box-shadow:
    0 0 0 1px #d2b17b40,
    0 30px 90px #0008;
}
.fish-card-eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.fish-card h3 {
  font:
    28px/1.15 Georgia,
    serif;
  font-weight: normal;
  margin: 9px 0 7px;
}
.fish-stage {
  display: block;
  width: 100%;
  height: 150px;
  margin: 2px 0 6px;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.fish-stage:active {
  cursor: grabbing;
}
.fish-card-size b {
  font:
    19px Georgia,
    serif;
  font-weight: normal;
}
.fish-card-size span {
  font-size: 11px;
  color: #b8c3ac;
  margin-left: 8px;
}
.fish-card p {
  font:
    13px/1.7 Arial,
    sans-serif;
  color: #cbd2bd;
  margin: 12px 0 0;
}
.fish-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.fish-card-tags span {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid #d2b17b55;
  border-radius: 2px;
  padding: 4px 7px 3px;
}
.fish-card-foot {
  display: block;
  margin-top: 14px;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a48b;
}
.fish-card-hint {
  display: block;
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.fish-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fish-log {
  width: min(620px, calc(100vw - 36px));
}
.fish-log-list {
  list-style: none;
  margin: 0;
  padding: 0 30px;
}
.fish-log-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #d4d9be1b;
}
.fish-log-name {
  display: block;
  font:
    17px Georgia,
    serif;
  color: #9eac96;
  font-style: italic;
}
.caught .fish-log-name {
  color: var(--paper);
  font-style: normal;
}
.fish-log-list small {
  display: block;
  font-size: 10px;
  color: #a7b79e;
  margin-top: 4px;
  line-height: 1.5;
}
.caught small {
  font-style: italic;
}
.fish-log-stat {
  text-align: right;
}
.fish-log-stat b {
  font:
    16px Georgia,
    serif;
  font-weight: normal;
  color: var(--gold);
}
.fish-log-stat small {
  font-style: normal !important;
}
/* A caught species or a catch: the whole row a button, opening its details */
.fish-log-list li:has(> .fish-log-row) {
  display: block;
  padding: 0;
}
.fish-log-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 11px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fish-log-row:hover {
  background: #d4d9be12;
}
.fish-log-row:focus-visible,
.fish-back:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.fish-log-row .fish-log-name {
  color: var(--paper);
  font-style: normal;
}
.fish-log-sub,
.fish-log-eyebrow {
  display: block;
  margin: 0;
  font-size: 9px;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.fish-log-sub {
  padding: 22px 30px 4px;
}
.fish-log-eyebrow {
  margin-bottom: 6px;
}
.fish-catch {
  margin: 0;
  padding: 4px 30px 0;
}
.fish-catch div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #d4d9be1b;
}
.fish-catch dt {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93a48b;
  padding-top: 4px;
}
.fish-catch dd {
  margin: 0;
  font:
    16px Georgia,
    serif;
  color: var(--paper);
  line-height: 1.4;
}
.fish-catch-back {
  padding: 18px 30px 26px;
}
.fish-back {
  padding: 9px 16px;
  border: 1px solid #d4d9be40;
  border-radius: 999px;
  background: none;
  color: var(--paper);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.fish-back:hover {
  border-color: var(--gold);
}
.fish-howto {
  padding: 18px 30px 26px;
}
.fish-howto p {
  font-size: 11px;
  line-height: 1.7;
  color: #b4c1aa;
  margin: 0 0 6px;
}
.fish-howto b {
  color: var(--paper);
  font-weight: normal;
  font-family: Georgia, serif;
  font-size: 13px;
  margin-right: 4px;
}
.fish-howto-where {
  margin-top: 12px !important;
  color: #93a48b !important;
}
/* Up to 1024 px the counter drops its summary line (the log has it), so,
   top right, it stays clear of the journey row's button and the E pill. */
@media (max-width: 1024px) {
  .fish-summary {
    display: none;
  }
}
@media (max-width: 760px) {
  .fish-counter,
  .debug .fish-counter {
    top: auto;
    bottom: calc(var(--corner) + var(--map) + 8px); /* above the minimap */
    right: 23px;
    padding: 7px 11px 8px 10px;
  }
  .fish-counter {
    grid-template-columns: 16px auto;
  }
  .fish-counter svg {
    grid-row: auto;
    width: 16px;
    height: 16px;
  }
  .fish-dock {
    bottom: calc(var(--corner) + var(--map) + 8px);
  }
  .fish-prompt {
    font-size: 13px;
  }
  .fish-track {
    width: 160px;
  }
  .fish-card {
    top: max(19%, 198px);
  }
  /* (with the fish, the card still ends above the strike button and the
     steering pad: a lower fish, and the hint in the foot line's place) */
  .fish-card.has-fish .fish-stage {
    height: 104px;
  }
  .fish-card.has-fish .fish-card-foot {
    display: none;
  }
  .fish-log-list,
  .fish-log-sub,
  .fish-catch,
  .fish-catch-back,
  .fish-howto {
    padding-left: 22px;
    padding-right: 22px;
  }
}
/* A short screen (a phone on its side): the card, now under the journey row,
   is made compact to fit whole, without its story line (.fish-live still
   says the catch). */
@media (max-height: 520px) {
  .fish-card {
    width: min(300px, calc(100vw - 44px));
    padding: 10px 18px 9px;
  }
  .fish-card h3 {
    font-size: 22px;
    margin: 4px 0 2px;
  }
  .fish-card p {
    display: none;
  }
  .fish-card-tags,
  .fish-card-foot {
    margin-top: 8px;
  }
  /* the fish beside the name and size, the tags and the hint under both,
     in a card no wider (300 px: clear of the steering pad and the counter)
     and about as tall as without it (the hint takes the foot line's place) */
  .fish-card.has-fish {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 8px;
    align-items: center;
  }
  .fish-card.has-fish > * {
    grid-column: 1 / -1;
  }
  .fish-card.has-fish .fish-card-eyebrow,
  .fish-card.has-fish h3,
  .fish-card.has-fish .fish-card-size {
    grid-column: 2;
  }
  .fish-card.has-fish h3 {
    font-size: 20px;
  }
  .fish-card.has-fish .fish-stage {
    grid-column: 1;
    grid-row: 1 / span 3;
    height: 72px;
    margin: 0;
  }
  .fish-card.has-fish .fish-card-foot {
    display: none;
  }
  .fish-card-hint {
    margin-top: 7px;
  }
}
/* The hints row and the minimap stay full size to 761 px, so the wide fishing
   meter (340 px) would reach them: use the short track up to 810 px. */
@media (max-width: 810px) and (pointer: fine) {
  .fish-track {
    width: 160px;
  }
}
/* Narrow windows with a mouse keep the minimap in the bottom corner, so the
   counter moves up under the header instead. */
@media (max-width: 760px) and (pointer: fine) {
  .fish-counter {
    top: 80px;
    bottom: auto;
  }
  /* (it would meet the long "Flying to ... · Land" button) */
  .flying .fish-counter {
    visibility: hidden;
  }
  /* (with ?debug=1 the stats line takes the top; the counter sits under the
     tour's countdown, which is centred and reaches about 250 px down) */
  .debug .fish-counter {
    top: 262px;
    bottom: auto;
  }
}
/* On the very smallest windows the word "fish" would reach the guide button. */
@media (max-width: 340px) and (pointer: fine) {
  .fish-count i {
    display: none;
  }
}
@media (pointer: coarse) {
  .fish-dock {
    left: auto;
    right: 23px;
    transform: none;
    bottom: max(168px, calc(var(--corner) + var(--map) + 12px));
    justify-items: end;
    max-width: calc(100vw - 200px);
  }
  /* The meter and prompt sit centred above the paddling pad; the action
     button stays under the right thumb. */
  .fish-prompt,
  .fish-meter {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
  .fish-meter {
    bottom: 236px;
  }
  .fish-prompt {
    bottom: 286px;
    width: calc(100vw - 46px);
  }
  .fish-action {
    min-height: 52px;
    padding: 12px 20px;
    font-size: 12px;
    border-radius: 26px;
  }
}
/* Under 761 px the catch counter stands on the minimap (8 px above it, 37 px
   tall), so the action button goes above the counter. */
@media (max-width: 760px) and (pointer: coarse) {
  .fish-dock {
    bottom: calc(var(--corner) + var(--map) + 52px);
  }
}
/* A phone on its side: little height, but room beside the minimap. With a
   mouse the dock stays low; with a finger the meter and prompt drop under the
   guide button, between the pad and the minimap (the action button stays
   above the minimap). */
@media (max-height: 520px) and (min-width: 600px) and (pointer: fine) {
  .fish-dock {
    bottom: 74px;
  }
}
@media (max-height: 520px) and (pointer: coarse) {
  .fish-meter {
    bottom: 24px;
  }
  .fish-prompt {
    bottom: 72px;
    width: calc(100vw - 2 * var(--map) - 70px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fish-card.show,
  .fight.tell .fish-track {
    animation: none;
  }
  .fishing.bite .fish-action,
  .ctl.bite kbd {
    animation: none;
    outline: 2px solid #fffdf3;
    outline-offset: 1px;
    box-shadow: 0 0 18px #f6dfae;
  }
}
/* Cover Flow shelf (js/world/coverflow.js) -------------------------------- */
/* A full-screen modal over the lake, which keeps rendering behind it, dimmed
   and blurred under a radial scrim. W (--W) is the cover size, set in JS. */
#shelf,
#reading {
  --W: 300px;
  --accent: var(--gold);
  --cf-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  color: var(--paper);
  animation: cf-in 420ms var(--cf-ease);
}
#shelf::backdrop,
#reading::backdrop {
  background: radial-gradient(120% 80% at 50% 45%, #071c1733 0%, #071c17cc 100%);
  backdrop-filter: blur(9px) brightness(0.7);
  animation: cf-in 600ms var(--cf-ease);
}
#shelf.cf-closing,
#shelf.cf-closing::backdrop {
  animation: cf-out 260ms var(--cf-ease) forwards;
}
@keyframes cf-in {
  from {
    opacity: 0;
  }
}
@keyframes cf-out {
  to {
    opacity: 0;
  }
}
.shelf-open header,
.shelf-open .touch-controls,
.shelf-open .minimap,
.shelf-open #world-labels {
  visibility: hidden;
}
#shelf a:focus-visible,
#shelf button:focus-visible {
  outline-color: var(--accent);
}
.cf-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 32px 40px;
  margin-top: -1vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cf-identity .emblem {
  display: block;
}
.cf-identity .emblem svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cf-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cf-close > span {
  font-size: 18px;
  line-height: 0;
}
.cf-layout {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  align-content: center;
  justify-items: center;
  padding: 104px 20px 26px;
}
.cf-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e0d4b2;
}
.cf-eyebrow::before,
.cf-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: #d2b17b66;
}
.cf-title {
  font:
    15px Georgia,
    serif;
  font-variant-numeric: lining-nums;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.02em;
  text-align: center;
}
.cf-stage {
  position: relative;
  width: 100%;
  height: calc(var(--W) * var(--cf-stage, 1.62));
  perspective: calc(var(--W) * 3.4);
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  outline: none;
}
.cf-stage.cf-dragging {
  cursor: grabbing;
}
.cf-stage:focus-visible .cf-current .cf-inner > .cf-face,
.cf-stage:focus-visible .cf-current .cf-back {
  box-shadow:
    0 24px 60px #02100c88,
    0 0 0 2px var(--accent);
}
.cf-floor {
  position: absolute;
  left: -20px;
  right: -20px;
  top: calc(50% + var(--W) * 0.38);
  height: calc(var(--W) * 0.9);
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, #ffffff07 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #2a4b4300 0%, #1b3a3366 18%, #0f2621aa 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.cf-floor::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f1eddb40, transparent);
}
.cf-cover {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--W) * 0.12);
  width: var(--W);
  height: var(--W);
  margin: calc(var(--W) * -0.5) 0 0 calc(var(--W) * -0.5);
  transform-style: preserve-3d;
  will-change: transform;
}
.cf-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 640ms var(--cf-ease);
}
.cf-flipped .cf-inner {
  transform: rotateY(180deg);
}
.cf-face,
.cf-back {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    0 24px 60px #02100c88,
    0 0 0 1px #f1eddb1f;
}
.cf-back {
  transform: rotateY(180deg);
}
.cf-shade {
  position: absolute;
  inset: 0;
  background: #06140f;
  opacity: 0;
  pointer-events: none;
}
.cf-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, #ffffff26 0%, #ffffff08 38%, transparent 39%);
}
.cf-reflection {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100%;
  margin-top: 3px;
  transform: scaleY(-1);
  pointer-events: none;
  border-radius: 3px;
  overflow: hidden;
  transition: opacity 300ms var(--cf-ease);
  -webkit-mask-image: linear-gradient(180deg, #0000 50%, #0008 100%);
  mask-image: linear-gradient(180deg, #0000 50%, #0008 100%);
}
.cf-flipped .cf-reflection {
  opacity: 0;
}
.cf-reflection .cf-face {
  box-shadow: none;
}
.cf-reflection::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, #0f2a2433 0 2px, transparent 2px 6px),
    linear-gradient(0deg, #12302a00, #12302a88);
}
/* Cover art */
.cf-art {
  position: absolute;
  inset: 0;
  display: grid;
}
.cf-tag {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}
.cf-mark {
  place-self: center;
  text-align: center;
}
.cf-foot {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.cf-word {
  font:
    calc(var(--W) * 0.1) / 1.1 Georgia,
    serif;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.01em;
  padding: 0 10px;
}
.cf-sub {
  font-size: max(7px, calc(var(--W) * 0.03));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.7;
}
.cf-art-logo {
  background: #f9f5ed;
  color: #2d1a4a;
}
.cf-art-logo .cf-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: var(--accent);
}
.cf-art-logo .cf-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, #ffffff22 0 1px, transparent 1px 12px);
}
.cf-art-logo .cf-mark img {
  display: block;
  width: calc(var(--W) * 0.56);
  height: auto;
  margin-top: calc(var(--W) * -0.1);
}
.cf-art-logo .cf-foot {
  opacity: 0.8;
}
/* A photo face (the Work covers): the photo (--photo, set on the face) under
   a dark scrim, so the white logo reads at 4.5:1 or better. Backgrounds, not
   layers: anything z-indexed here would escape the face's backface culling
   and catch the clicks meant for the turned cover's back. */
.cf-art-photo {
  background:
    linear-gradient(180deg, #0c1a15c7 0%, #0c1a15a6 40%, #0c1a15a6 62%, #0c1a15d9 100%),
    var(--photo) center / cover,
    #1f3b32;
  color: var(--paper);
}
/* An article's cover (Notes): type only. The same dark forest ground as the
   other work covers, with a gold hairline in place of a logo band. */
.cf-art-note {
  background: #1f3b32;
  color: var(--paper);
  padding: calc(var(--W) * 0.14) calc(var(--W) * 0.085) calc(var(--W) * 0.12);
}
.cf-art-note .cf-mark {
  place-self: center stretch;
  text-align: left;
}
.cf-art-note .cf-word {
  font:
    calc(var(--W) * 0.092) / 1.13 Georgia,
    serif;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.015em;
  padding: 0;
  text-wrap: balance;
}
.cf-art-note .cf-sub {
  margin: calc(var(--W) * 0.05) 0 0;
  letter-spacing: 0.2em;
  opacity: 0.8;
}
.cf-note-line {
  margin-top: calc(var(--W) * 0.03);
  font:
    calc(var(--W) * 0.05) / 1.45 Georgia,
    serif;
  font-variant-numeric: lining-nums;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cf-small .cf-note-line,
.cf-small .cf-art-note .cf-tag {
  display: none;
}
/* The back of a cover */
.cf-back-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: calc(var(--W) * 0.065);
  background: #1c342c;
  border-bottom: 2px solid var(--accent);
  text-align: left;
}
.cf-back-inner small {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.cf-back-inner h3 {
  font:
    calc(var(--W) * 0.068) / 1.2 Georgia,
    serif;
  font-variant-numeric: lining-nums;
  margin: 0;
}
.cf-back-inner p {
  font-size: max(11px, calc(var(--W) * 0.043));
  line-height: 1.5;
  color: #cbd2bd;
  margin: 0;
}
/* a body longer than its room scrolls in its own box (fitBacks sets the height) */
.cf-back-inner .cf-scrolls {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  padding-right: 5px; /* keeps text clear of an overlay scrollbar (phones) */
}
.cf-back-inner .cf-scrolls:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cf-back-inner ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(10px, calc(var(--W) * 0.037));
  color: #b4c2a9;
  line-height: 1.5;
}
.cf-back-inner li::before {
  content: "—  ";
  color: var(--accent);
}
.cf-back-inner > * {
  flex-shrink: 0;
}
.cf-spacer {
  flex: 1;
}
/* "Read the story": a text action under the facts. The padding gives it a
   24 px tall target; the negative margin keeps the back's rhythm. */
.cf-back-inner .cf-story {
  display: block;
  margin: -2px 0 -6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: max(11px, calc(var(--W) * 0.043));
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf-back-inner .cf-story:hover {
  color: #f3efe2;
}
/* its padding already clears the text, so the ring sits on it */
.cf-back-inner .cf-story:focus-visible {
  outline-offset: 0;
}
.cf-back-inner .enter-button {
  margin: 0;
  padding: 10px 15px;
  gap: 18px;
  align-self: flex-start;
  text-decoration: none;
}
.cf-hint {
  font-size: 9px;
  color: #a7b79e;
  letter-spacing: 0.04em;
}
/* Caption, actions, dots */
.cf-caption {
  position: relative;
  z-index: 2;
  text-align: center;
  min-height: 128px;
  max-width: 560px;
  padding: 0 8px;
}
.cf-cat {
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.cf-ph-note {
  color: #e3c28d;
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-left: 6px;
}
.cf-caption h2 {
  font:
    30px/1.15 Georgia,
    serif;
  font-variant-numeric: lining-nums;
  margin: 8px 0;
}
.cf-caption p {
  font:
    14px/1.7 Arial,
    sans-serif;
  font-variant-numeric: lining-nums;
  color: #cbd2bd;
  margin: 0 auto 16px;
  max-width: 470px;
}
.cf-swap {
  animation: cf-rise 360ms var(--cf-ease);
}
@keyframes cf-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.cf-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.cf-actions .enter-button {
  display: inline-flex;
  margin: 0;
  padding: 13px 19px;
  gap: 22px;
  text-decoration: none;
}
.cf-ghost {
  border: 1px solid #eee9d14d;
  background: transparent;
  padding: 13px 17px;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.cf-ghost:hover {
  background: #d8dfbd1f;
}
.cf-dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 9px;
  margin-top: 16px;
  justify-content: center;
}
.cf-dots button {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #f1eddb88;
  background: transparent;
}
.cf-dots button::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.cf-dots button[aria-current="true"] {
  background: var(--paper);
  border-color: var(--paper);
}
.cf-help {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #a7b79e;
  text-transform: uppercase;
}
.cf-help kbd {
  font: 9px Arial;
  font-variant-numeric: lining-nums;
  color: var(--paper);
  opacity: 0.8;
  margin-right: 6px;
  letter-spacing: 0.1em;
}
.cf-touch {
  display: none;
}
.cf-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Reduced motion: a flat row, no tilt, reflection, entrance or flip motion */
#shelf.cf-flat,
#shelf.cf-flat::backdrop,
.cf-flat .cf-inner,
.cf-flat .cf-swap {
  animation: none;
  transition: none;
}
.cf-flat .cf-reflection,
.cf-flat .cf-gloss {
  display: none;
}
.cf-flat .cf-floor {
  opacity: 0.4;
}
/* Small covers (W < 260 px): a tighter back */
.cf-small .cf-back-inner {
  gap: 5px;
}
.cf-small .cf-back-inner p {
  font-size: 10.5px;
}
.cf-small .cf-back-inner ul {
  line-height: 1.55;
}
.cf-small .cf-back-inner .enter-button {
  padding: 8px 12px;
  font-size: 11px;
}
.cf-small .cf-hint {
  display: none;
}
/* Phones in portrait */
#shelf.cf-mobile .cf-top {
  padding: 23px 22px;
}
.cf-mobile .cf-identity small,
.cf-mobile .cf-close kbd {
  display: none;
}
.cf-mobile .cf-identity .name {
  font-size: 16px;
}
.cf-mobile .cf-identity .emblem {
  width: 26px;
  height: 26px;
}
.cf-mobile .cf-layout {
  padding: 92px 16px calc(18px + env(safe-area-inset-bottom));
}
.cf-mobile .cf-title {
  font-size: 13px;
}
.cf-mobile .cf-caption {
  min-height: 0;
}
.cf-mobile .cf-caption h2 {
  font-size: 24px;
}
.cf-mobile .cf-caption p {
  font-size: 13px;
  margin-bottom: 14px;
  min-height: 3.4em; /* two lines held, so a longer line never shifts the shelf */
}
.cf-mobile .cf-dots,
.cf-mobile .cf-help {
  margin-top: 12px;
}
/* One row of actions on every cover, so browsing never shifts the shelf */
.cf-mobile .cf-actions {
  flex-wrap: nowrap;
  max-width: calc(100vw - 48px);
}
.cf-mobile .cf-actions > * {
  min-width: 0;
  padding: 12px 13px;
  gap: 12px;
  white-space: nowrap;
}
.cf-mobile .cf-actions .enter-button {
  flex-shrink: 0;
}
.cf-mobile .cf-ghost {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Narrow phones: the caption button reads "More" (its aria-label keeps the
   full name) so it never truncates beside the link */
@media (max-width: 349px) {
  .cf-more-name {
    display: none;
  }
}
.cf-mobile .cf-desktop {
  display: none;
}
.cf-mobile .cf-touch {
  display: inline;
}
/* Short desktop windows: the covers keep their size, the sub-line and the
   key hints give way */
.cf-short .cf-title,
.cf-short .cf-help {
  display: none;
}
.cf-short .cf-layout {
  padding-top: 92px;
}
/* Short viewports (phones in landscape): drop the secondary lines */
.cf-compact .cf-layout {
  padding-top: 64px;
  padding-bottom: 10px;
}
#shelf.cf-compact .cf-top {
  padding-top: 14px;
  padding-bottom: 14px;
}
.cf-compact .cf-title {
  display: none;
}
.cf-compact:not(.cf-roomy) .cf-caption p,
.cf-compact:not(.cf-roomy) .cf-help {
  display: none;
}
/* Portrait compact with spare height: the one-liner (two lines at most) and
   the swipe hint stay */
.cf-compact.cf-roomy .cf-caption p {
  min-height: 0;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cf-compact.cf-roomy .cf-help {
  margin-top: 8px;
}
.cf-compact .cf-caption {
  min-height: 0;
}
.cf-compact .cf-caption h2 {
  font-size: 22px;
  margin: 4px 0 8px;
}
.cf-compact .cf-actions .enter-button,
.cf-compact .cf-ghost {
  padding: 10px 15px;
}
.cf-compact .cf-dots {
  margin-top: 10px;
}
/* Tiny covers (W < 200 px): the back keeps its name, its copy (scrolling when
   it must) and the link; the facts give way */
.cf-tiny .cf-back-inner {
  gap: 4px;
  padding: 9px 10px;
}
.cf-tiny .cf-back-inner small {
  font-size: 7px;
}
.cf-tiny .cf-back-inner h3 {
  font-size: 13px;
}
.cf-tiny .cf-back-inner p {
  font-size: 10px;
  line-height: 1.4;
}
.cf-tiny .cf-back-inner ul {
  display: none;
}
.cf-tiny .cf-back-inner .enter-button {
  padding: 6px 10px;
  gap: 10px;
  font-size: 10px;
}
/* Touch: the story button and the link are 44 px targets. On a small cover
   that leaves no room for the category and name, so they give way to the body
   (the caption under the cover has both). Touch also swaps the key help. */
@media (pointer: coarse) {
  .cf-back-inner .cf-story,
  .cf-back-inner .enter-button {
    box-sizing: border-box;
    min-height: 44px;
  }
  .cf-back-inner .cf-story {
    display: flex;
    align-items: center;
    margin: 0;
  }
  .cf-small .cf-back-inner small,
  .cf-small .cf-back-inner h3 {
    display: none;
  }
  .cf-desktop {
    display: none;
  }
  .cf-touch {
    display: inline;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* The welcome video's captions (assets/video/intro/captions.vtt) ----------- */
/* The browser draws them (the <track> is on by default and its captions button
   turns them off), lower centre: paper on a soft dark green backing, in the
   page's serif, so they read over any frame. The size is its own, a little over
   a phone's reading size and up to a desktop's, because the browser's own
   (a twentieth of the video's height) is too small on a phone. It sits outside
   the reading block below, whose one size and one colour the tests hold. */
.rd-video video::cue {
  color: #f1eddb;
  background-color: rgba(7, 28, 23, 0.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 4vw, 22px);
  font-weight: 400;
  line-height: 1.3;
}
/* Full screen: the video is as big as the screen, so the words grow with it. */
.rd-video video:fullscreen::cue {
  font-size: clamp(22px, 3vw, 40px);
}
/* Reading pages (js/world/reading.js) ------------------------------------- */
/* One quiet page in the shelf's full-screen frame (the rules above), under a
   darker scrim so the words hold at any time of day. It fades out by itself
   as the dialog closes. Everything on it, the page, the vision and the contact
   form, is one size and one colour: change --rd-size or --rd-ink here.
   ponytail: browsers without `overlay` lose the page from the top layer at
   once and skip that fade; the shelf's timed .cf-closing is the upgrade if it
   is ever wanted there. */
#reading {
  --rd-size: 18px;
  --rd-ink: var(--paper);
  font:
    400 var(--rd-size) / 1.5 Georgia,
    "Times New Roman",
    serif;
  font-variant-numeric: lining-nums;
  color: var(--rd-ink);
}
#reading,
#reading::backdrop {
  opacity: 0;
  transition:
    opacity 260ms var(--cf-ease),
    overlay 260ms allow-discrete,
    display 260ms allow-discrete;
}
#reading[open],
#reading[open]::backdrop {
  opacity: 1;
}
#reading::backdrop {
  background: radial-gradient(120% 90% at 50% 40%, #071c17b8 0%, #071c17eb 100%);
  backdrop-filter: blur(12px) brightness(0.6);
}
#reading .cf-top {
  justify-content: flex-end;
  margin: 0;
  padding: 8px max(16px, env(safe-area-inset-right)) 0 16px;
}
#reading .cf-close {
  padding: 0 4px;
}
.rd-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  overflow: hidden auto;
  overscroll-behavior: contain;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: #d2b17b55 transparent;
}
.rd-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  width: min(34rem, 100%);
  height: 100%;
  margin: 0 auto;
  padding: 56px 0 16px;
  box-sizing: border-box;
}
/* The page has the keyboard: a fine rule in the margin, beside the column */
.rd-scroll:focus-visible .rd-page::before {
  content: "";
  position: absolute;
  inset: 56px auto 16px -10px;
  width: 1px;
  background: #d2b17bb3;
}
/* The welcome video: the column's width at 16:9 (the poster fills it before
   play), never smaller, so its captions and big play button always fit; on a
   short screen the page scrolls instead (justify-content: safe center, on
   .rd-page, keeps the top of it reachable). The browser's own controls. */
.rd-video {
  flex: none;
  height: calc(min(34rem, 100vw - 32px) * 9 / 16);
  margin: 0 0 20px;
  container-type: size;
}
/* The stage is the video's box: the big play button is placed against it, and
   the captions are drawn inside the video. */
.rd-stage {
  position: relative;
  width: min(100cqw, 100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  container-type: size;
}
.rd-video video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: #0a201b;
  object-fit: contain;
}
.rd-video video:focus-visible {
  outline: 2px solid #d2b17bb3;
  outline-offset: 3px;
}
/* The big play button: dead centre, a round paper-on-green disc with a gold
   ring. Shown while paused (and as a turning ring while it loads), hidden once
   it plays. It is a sibling of the video, never inside it, so the browser's
   own control bar keeps every click: the video is never under 288 px wide
   (162 px high), where the button is 48 px and ends above the 56 px bar. */
.rd-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: clamp(48px, 30cqh, 96px);
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid #d2b17b;
  border-radius: 50%;
  background: rgba(7, 28, 23, 0.72);
  backdrop-filter: blur(4px);
  transition:
    transform 160ms ease,
    background-color 160ms ease;
}
.rd-play svg {
  width: 44%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform: translateX(6%);
}
.rd-play:hover {
  background: rgba(7, 28, 23, 0.9);
  transform: scale(1.06);
}
.rd-play:focus-visible {
  outline: 2px solid #d2b17b;
  outline-offset: 4px;
}
.rd-stage[data-state="playing"] .rd-play {
  display: none;
}
.rd-stage[data-state="loading"] .rd-play {
  pointer-events: none;
}
.rd-stage[data-state="loading"] .rd-play::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 3px solid transparent;
  border-top-color: #d2b17b;
  border-radius: 50%;
  animation: rd-spin 900ms linear infinite;
}
@keyframes rd-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rd-play {
    transition: none;
  }
  .rd-stage[data-state="loading"] .rd-play::after {
    animation: none;
    border-color: #d2b17b;
  }
}
.rd-blurb {
  flex: none;
}
.rd-bstanza {
  margin: 0 0 0.9em;
  text-wrap: pretty;
}
.rd-bline {
  display: block;
}
.rd-cta {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
}
/* The one kind of action, everywhere: plain text in the page's type, underlined */
.rd-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: #d2b17b99;
  text-underline-offset: 5px;
  cursor: pointer;
}
.rd-link:hover {
  text-decoration-color: currentColor;
}
.rd-link:focus-visible,
.rd-field :is(input, textarea):focus-visible,
.rd-form a:focus-visible {
  outline: 2px solid #d2b17bb3;
  outline-offset: 3px;
}
.rd-link:disabled {
  opacity: 0.6;
  cursor: progress;
}
/* The vision's category and title: the same type as its words */
#reading .eyebrow {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  margin: 0;
}
#reading .eyebrow:before {
  display: none;
}
#rd-title {
  font: inherit;
  letter-spacing: inherit;
  margin: 0 0 0.9em;
}
.rd-stanza {
  margin: 0 0 0.9em;
}
.rd-line {
  display: block;
}
/* The contact form: its own pane in the same frame, over the page */
.rd-scroll[hidden],
.rd-formpane[hidden],
.rd-form[hidden],
.rd-form-done[hidden] {
  display: none;
}
.rd-formpane {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.rd-form,
.rd-form-done {
  width: min(34rem, 100%);
  margin: auto;
  padding: 56px 0 16px;
}
.rd-form h2,
.rd-form-done p {
  font: inherit;
  letter-spacing: inherit;
  margin: 0 0 1em;
  outline: none;
}
.rd-form-done {
  outline: none;
}
.rd-field {
  margin: 0 0 14px;
}
.rd-field label {
  display: block;
  margin: 0 0 4px;
  color: inherit;
}
.rd-field :is(input, textarea) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e0d4b27a;
  border-radius: 3px;
  background: #0a201bcc;
  color: inherit;
  font: inherit;
  line-height: 1.5;
}
.rd-field textarea {
  resize: vertical;
  min-height: 112px;
}
.rd-field [aria-invalid="true"] {
  border-color: #f0b08a;
}
.rd-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rd-form-error {
  min-height: 1.5em;
  margin: 0 0 6px;
  color: inherit;
}
.rd-form-error a {
  color: inherit;
}
.rd-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
}
/* A Notes article (js/content/notes.js): the same type as every page here (the
   --rd-size and --rd-ink above; nothing below sets its own), set to scroll
   instead of fitting one screen. Headings are bold, quotes italic, a poem keeps
   its line breaks, and the close is the same text with a link. */
.rd-article {
  justify-content: flex-start;
  height: auto;
  min-height: 100%;
  padding: 72px 0 72px;
  line-height: 1.7;
}
.rd-article #rd-title {
  margin: 0 0 1.6em;
  text-wrap: balance;
}
.rd-p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
.rd-body strong,
.rd-h {
  font-weight: 700;
}
/* The keyboard-focus rule beside a fixed page is not drawn beside an article */
.rd-scroll:focus-visible .rd-article::before {
  content: none;
}
/* A heading is the page's own size (the browser's h3 is larger), only bold */
.rd-h {
  font: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  margin: 2em 0 0.6em;
}
.rd-quote {
  margin: 1.4em 0;
  padding: 0 0 0 1.2em;
  font-style: italic;
}
.rd-vline {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
.rd-list {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}
.rd-list li {
  margin: 0 0 0.45em;
}
.rd-article a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #d2b17b99;
  text-underline-offset: 5px;
}
.rd-article a:focus-visible {
  outline: 2px solid #d2b17bb3;
  outline-offset: 3px;
}
.rd-fig {
  margin: 2em 0;
}
.rd-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: #0a201b;
}
.rd-source {
  margin: 2.4em 0 0;
}
#reading.rd-flat,
#reading.rd-flat::backdrop {
  animation: none;
  transition: none;
}
/* On a phone the page starts at the top, so the actions sit as high as the words allow */
@media (max-width: 760px) {
  .rd-page {
    justify-content: flex-start;
  }
}
/* Fast travel (js/world/flight.js): while the gull is in the air the
   paddling hints and controls give way to the flight's own hint, and the
   veil is the quick fade of a skipped flight (its opacity is set from the
   frame loop, so it fades under prefers-reduced-motion too). */
.flight-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #0f201b;
  opacity: 0;
}
.controls .flight-hint {
  display: none;
}
.flying .controls .ctl {
  display: none;
}
.flying .controls .flight-hint {
  display: inline;
  opacity: 1;
}
.flying .touch-controls,
.flying #nearby,
.flying .fish-action {
  visibility: hidden;
}
@media (pointer: coarse) {
  .flying .controls {
    display: none;
  }
}