/*
 * Loneshoal — the page-scoped maritime visual world.
 *
 * Adapted from the approved reference at
 * nomad-games-suite/hytale/live-world-events/assets/branding/landing-page/index.html (lines
 * 144-355), which was a standalone document with its own <body> and its own palette. Here the
 * same world has to sit inside the shared Nomad Labs shell, so every rule is scoped under
 * `.loneshoal-page` and nothing in this file may reach another page.
 *
 * Two things change from the source and are deliberate:
 *   - The shared shell's semantic roles are forced dark for this page only, so the shared header
 *     and footer read as part of the dusk rather than as a light strip bolted on.
 *   - The hero is `min-height`, not `height`, and measures against the viewport minus the shared
 *     header. Short landscape screens then grow to content height instead of clipping the join
 *     controls, which is the one failure the source never had to survive.
 *
 * Constraints this file is built inside: `_headers` CSP allows only self-hosted styles, so no
 * inline style attributes, no <style> block, no remote fonts or assets. All decoration lives
 * inside the hero's `overflow: hidden`, so no `vw`-sized layer can widen the document.
 */

/* ---------------------------------------------------------------------------------------- *
 * Shared-shell roles, forced dark for this page only
 * ---------------------------------------------------------------------------------------- */

.loneshoal-page {
  --page: #17222b;
  --surface: #1b2730;
  --surface-2: #111b23;
  --border: #35444f;
  --border-strong: #61717d;
  --text: #ddd4c4;
  --text-strong: #f6ecd8;
  --text-muted: #b9ad9a;
  --held-text: #ffce8c;
  --held: #ffce8c;
  --held-wash: rgba(255, 206, 140, 0.1);
  --flight: var(--sky-5);
  --flight-text: var(--sky-5);
  --flight-wash: rgba(201, 154, 91, 0.12);
  --focus: #ffce8c;
  background: #17222b;
  color: rgba(238, 230, 214, 0.86);
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------------------- *
 * Page-local palette — the source values, unmodified.
 *
 * `--ls-serif` and `--ls-sans` carry the source's `--serif`/`--sans` names with a prefix: the
 * shared shell already owns a `--sans` that the header and footer read, and redefining it here
 * would repaint chrome this page does not own.
 * ---------------------------------------------------------------------------------------- */

.loneshoal-page {
  --sky-0: #101d2c;
  --sky-1: #17293b;
  --sky-2: #263c47;
  --sky-3: #3a4f57;
  --sky-4: #7a6a4e;
  --sky-5: #c99a5b;
  --sky-6: #8a6a44;
  --sky-7: #4a3a2e;
  --sky-8: #17222b;
  --ink: #0a1116;
  --water-0: #24343a;
  --water-1: #16242a;
  --water-2: #0b1216;
  --cream: #f6ecd8;
  --cream-dim: rgba(238, 230, 214, 0.86);
  --amber: #ffce8c;
  --amber-soft: rgba(255, 226, 182, 0.72);
  --ls-serif: Georgia, "Times New Roman", serif;
  --ls-sans: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  /* The shared header's own height, which the hero subtracts. It wraps below 40rem. */
  --ls-header: 4.5rem;

  font-family: var(--ls-sans);
}

/*
 * The shared `main` is a 76rem column with page padding. The hero is a full-bleed stage and
 * cannot live inside it, so this page's main is the full width and each band pads itself.
 */
.loneshoal-page main.loneshoal {
  position: relative;
  z-index: 6;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--sky-8);
}

/* ---------------------------------------------------------------------------------------- *
 * Hero + parallax stage
 * ---------------------------------------------------------------------------------------- */

.loneshoal-page .loneshoal-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--ls-header));
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--sky-0) 0%,
    var(--sky-1) 22%,
    var(--sky-2) 38%,
    var(--sky-3) 46%,
    var(--sky-4) 52%,
    var(--sky-5) 57%,
    var(--sky-6) 61%,
    var(--sky-7) 65%,
    var(--sky-8) 100%
  );
}

.loneshoal-page .loneshoal-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: none;
}

.loneshoal-page .sun {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 32vmax;
  height: 32vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(2px);
  background: radial-gradient(
    circle,
    rgba(255, 232, 190, 0.95) 0%,
    rgba(255, 200, 120, 0.55) 38%,
    rgba(255, 180, 100, 0) 72%
  );
}

.loneshoal-page .haze {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 48%;
  height: 16vh;
  background: linear-gradient(
    to bottom,
    rgba(201, 154, 91, 0),
    rgba(226, 178, 110, 0.22) 55%,
    rgba(201, 154, 91, 0)
  );
}

.loneshoal-page .water {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -2%;
  top: 66%;
  background: linear-gradient(
    to bottom,
    var(--water-0) 0%,
    var(--water-1) 38%,
    var(--water-2) 100%
  );
}

.loneshoal-page .water::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: repeating-linear-gradient(
    to bottom,
    rgba(220, 175, 110, 0.13) 0,
    rgba(220, 175, 110, 0.13) 1px,
    transparent 1px,
    transparent 9px
  );
}

.loneshoal-page .glint {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 38vw;
  height: 34%;
  transform: translateX(-50%);
  filter: blur(11px);
  background: radial-gradient(
      ellipse 40% 100% at 50% 0%,
      rgba(255, 205, 135, 0.4),
      rgba(255, 205, 135, 0) 70%
    ),
    radial-gradient(ellipse 85% 60% at 50% 0%, rgba(255, 190, 120, 0.16), rgba(255, 190, 120, 0) 75%);
}

.loneshoal-page .isl {
  position: absolute;
  background: var(--ink);
}

.loneshoal-page .isl.far {
  left: 0;
  bottom: 33.5%;
  width: 42vw;
  height: 6vw;
  opacity: 0.42;
  filter: blur(1px);
  clip-path: polygon(0% 100%, 6% 58%, 18% 66%, 30% 32%, 46% 54%, 62% 22%, 78% 48%, 90% 40%, 100% 100%);
}

.loneshoal-page .isl.far2 {
  right: 2%;
  bottom: 33.5%;
  width: 36vw;
  height: 5vw;
  opacity: 0.38;
  filter: blur(1px);
  clip-path: polygon(0% 100%, 10% 46%, 22% 62%, 36% 28%, 52% 52%, 70% 24%, 86% 54%, 100% 100%);
}

.loneshoal-page .isl.mid {
  left: -6%;
  bottom: 32%;
  width: 46vw;
  height: 9.5vw;
  opacity: 0.86;
  clip-path: polygon(0% 100%, 4% 44%, 14% 58%, 26% 18%, 40% 48%, 58% 26%, 74% 62%, 90% 34%, 100% 100%);
}

.loneshoal-page .isl.mid2 {
  right: -7%;
  bottom: 32%;
  width: 48vw;
  height: 8.5vw;
  opacity: 0.86;
  clip-path: polygon(0% 100%, 10% 38%, 24% 60%, 38% 22%, 52% 50%, 68% 18%, 84% 52%, 100% 100%);
}

.loneshoal-page .isl.front {
  left: 50%;
  bottom: 30%;
  width: 58vw;
  height: 8vw;
  margin-left: -29vw;
  opacity: 1;
  clip-path: polygon(0% 100%, 8% 48%, 20% 64%, 33% 26%, 48% 56%, 63% 16%, 78% 50%, 92% 32%, 100% 100%);
}

.loneshoal-page .rose {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 52vmin;
  height: 52vmin;
  transform: translate(-50%, -50%);
  opacity: 0.1;
}

.loneshoal-page .birds {
  position: absolute;
  left: 12%;
  top: 15%;
  width: 22vw;
  max-width: 420px;
  opacity: 0.5;
}

.loneshoal-page .birds2 {
  position: absolute;
  right: 15%;
  top: 23%;
  width: 14vw;
  max-width: 260px;
  opacity: 0.36;
}

.loneshoal-page .drift {
  position: absolute;
  left: 4%;
  bottom: 5%;
  width: 20vw;
  max-width: 330px;
  opacity: 0.8;
}

.loneshoal-page .drift2 {
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: 14vw;
  max-width: 230px;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------------------- *
 * Embers — the seven source `style` attributes, one class each, in source order.
 * ---------------------------------------------------------------------------------------- */

.loneshoal-page .loneshoal-ember {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 196, 120, 0.85);
  box-shadow: 0 0 9px 3px rgba(255, 170, 90, 0.45);
  animation: loneshoal-ember-drift 9s ease-in-out infinite alternate;
}

.loneshoal-page .loneshoal-ember--1 {
  left: 31%;
  top: 60%;
  width: 5px;
  height: 5px;
  animation-delay: -1s;
}

.loneshoal-page .loneshoal-ember--2 {
  left: 36%;
  top: 55%;
  width: 3px;
  height: 3px;
  opacity: 0.7;
  animation-delay: -3s;
}

.loneshoal-page .loneshoal-ember--3 {
  left: 63%;
  top: 58%;
  width: 4px;
  height: 4px;
  opacity: 0.8;
  animation-delay: -5s;
}

.loneshoal-page .loneshoal-ember--4 {
  left: 69%;
  top: 63%;
  width: 3px;
  height: 3px;
  opacity: 0.6;
  animation-delay: -2s;
}

.loneshoal-page .loneshoal-ember--5 {
  left: 44%;
  top: 64%;
  width: 3px;
  height: 3px;
  opacity: 0.55;
  animation-delay: -6s;
}

.loneshoal-page .loneshoal-ember--6 {
  left: 26%;
  top: 66%;
  width: 4px;
  height: 4px;
  opacity: 0.6;
  animation-delay: -4s;
}

.loneshoal-page .loneshoal-ember--7 {
  left: 75%;
  top: 56%;
  width: 3px;
  height: 3px;
  opacity: 0.5;
  animation-delay: -7s;
}

@keyframes loneshoal-ember-drift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-16px);
  }
}

.loneshoal-page .vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.loneshoal-page .grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------------------------------------------------------------------------------------- *
 * Hero type + join card
 * ---------------------------------------------------------------------------------------- */

.loneshoal-page .hero-inner {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* The extra bottom padding is the scroll cue's own room, so it never lands on the card. */
  padding: 24px 24px 78px;
}

.loneshoal-page .kicker {
  margin-bottom: 14px;
  color: var(--amber-soft);
  letter-spacing: 0.6em;
  font-size: clamp(9px, 1.1vw, 13px);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.loneshoal-page .rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.loneshoal-page .rule i {
  display: block;
  height: 1px;
  width: clamp(60px, 12vw, 180px);
  background: linear-gradient(to right, rgba(244, 232, 208, 0), rgba(244, 232, 208, 0.55));
}

.loneshoal-page .rule i.r {
  background: linear-gradient(to left, rgba(244, 232, 208, 0), rgba(244, 232, 208, 0.55));
}

.loneshoal-page .rule b {
  color: rgba(255, 206, 140, 0.9);
  font-size: 12px;
}

.loneshoal-page .loneshoal-hero h1 {
  margin: 0;
  font-family: var(--ls-serif);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(48px, 11.5vw, 150px);
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  line-height: 0.98;
  text-shadow: 0 0 70px rgba(255, 190, 110, 0.42), 0 0 22px rgba(255, 190, 110, 0.25),
    0 6px 26px rgba(0, 0, 0, 0.72);
}

.loneshoal-page .tagline {
  margin: 16px 0 0;
  font-style: italic;
  color: var(--cream-dim);
  font-size: clamp(14px, 2vw, 27px);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.loneshoal-page .loneshoal-join {
  margin-top: clamp(26px, 4vh, 46px);
  width: 100%;
  max-width: 520px;
  background: rgba(9, 15, 21, 0.58);
  border: 1px solid rgba(244, 232, 208, 0.16);
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  backdrop-filter: blur(9px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.loneshoal-page .join-label {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--amber-soft);
}

/*
 * `user-select: all` is the source behaviour and the fallback the whole page rests on: when the
 * clipboard is unavailable the address is still there and one click takes all of it.
 */
.loneshoal-page .addr {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: clamp(19px, 3.6vw, 30px);
  color: var(--cream);
  letter-spacing: 0.03em;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.loneshoal-page .parts {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.loneshoal-page .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(238, 230, 214, 0.72);
  background: rgba(244, 232, 208, 0.07);
  border: 1px solid rgba(244, 232, 208, 0.14);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.loneshoal-page .chip:hover {
  background: rgba(255, 206, 140, 0.14);
  color: var(--cream);
  border-color: rgba(255, 206, 140, 0.4);
}

.loneshoal-page .chip:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.loneshoal-page .chip s {
  text-decoration: none;
  opacity: 0.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--ls-sans);
  /* 11px, not the source's 9px: these label a control, and functional text has a legibility floor. */
  font-size: 11px;
}

.loneshoal-page .join-facts {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(238, 230, 214, 0.6);
}

.loneshoal-page button.copy {
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--ls-sans);
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(to bottom, #f2c98a, #d9a463);
  border: 0;
  border-radius: 9px;
  padding: 15px 18px;
  box-shadow: 0 8px 24px rgba(201, 154, 91, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.loneshoal-page button.copy:hover {
  filter: brightness(1.07);
  box-shadow: 0 12px 30px rgba(201, 154, 91, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.loneshoal-page button.copy:active {
  transform: translateY(1px);
}

.loneshoal-page button.copy:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.loneshoal-page button.copy.ok {
  background: linear-gradient(to bottom, #b7d3a4, #8fb47c);
}

.loneshoal-page a.discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(12px, 1.35vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 230, 214, 0.82);
  background: rgba(244, 232, 208, 0.06);
  border: 1px solid rgba(244, 232, 208, 0.2);
  border-radius: 9px;
  padding: 12px 18px;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.loneshoal-page a.discord svg {
  width: 19px;
  height: auto;
  flex: none;
  opacity: 0.85;
}

.loneshoal-page a.discord:hover {
  background: rgba(255, 206, 140, 0.12);
  border-color: rgba(255, 206, 140, 0.45);
  color: var(--cream);
}

.loneshoal-page a.discord:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.loneshoal-page .hint {
  margin-top: 11px;
  font-size: 12px;
  color: rgba(238, 230, 214, 0.55);
  line-height: 1.5;
}

.loneshoal-page a.scroll-cue {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  /* 11px, not the source's 10px: the cue is a link, and functional text has a legibility floor. */
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(238, 230, 214, 0.45);
  text-decoration: none;
  animation: loneshoal-bob 2.6s ease-in-out infinite;
}

.loneshoal-page a.scroll-cue:hover,
.loneshoal-page a.scroll-cue:focus-visible {
  color: var(--cream);
}

.loneshoal-page a.scroll-cue:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@keyframes loneshoal-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

/* ---------------------------------------------------------------------------------------- *
 * Body sections
 *
 * The source cast `main`'s shadow up over the hero. Here `main` also contains the hero, so the
 * same shadow rides on the first band below it and reads identically without darkening the
 * shared header above.
 * ---------------------------------------------------------------------------------------- */

.loneshoal-page .rules-strip {
  position: relative;
  z-index: 6;
  background: var(--sky-8);
  border-bottom: 1px solid rgba(244, 232, 208, 0.1);
  text-align: center;
  padding: 16px 20px;
  box-shadow: 0 -40px 80px rgba(11, 18, 22, 0.9);
}

.loneshoal-page .rules-strip p {
  margin: 0 auto;
  max-width: 900px;
  font-size: clamp(11.5px, 1.5vw, 13.5px);
  letter-spacing: 0.02em;
  color: rgba(255, 222, 168, 0.82);
  line-height: 1.6;
}

.loneshoal-page .loneshoal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) 24px;
}

.loneshoal-page .loneshoal-wrap--joined {
  padding-top: 0;
}

.loneshoal-page .loneshoal-wrap h2 {
  margin: 0 0 22px;
  font-family: var(--ls-serif);
  color: var(--cream);
  font-weight: 700;
  font-size: clamp(23px, 3.4vw, 36px);
  letter-spacing: 0.05em;
}

.loneshoal-page .loneshoal-wrap p {
  max-width: 68ch;
  margin: 0 0 20px;
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.75;
}

.loneshoal-page .loneshoal-lede {
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--cream);
  line-height: 1.65;
}

/*
 * The stack rows are the shared `.board` component. The forced-dark tokens at the top of this
 * file already carry its surfaces, borders and badge colours; only the row name needs saying,
 * because the shared sheet sets it in `--display` and every other title on this page is serif.
 */
.loneshoal-page .board .row__name {
  font-family: var(--ls-serif);
  letter-spacing: 0.03em;
}

.loneshoal-page .loneshoal-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 16px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.loneshoal-page .loneshoal-facts li {
  background: rgba(244, 232, 208, 0.045);
  border: 1px solid rgba(244, 232, 208, 0.1);
  border-radius: 11px;
  padding: 18px 19px;
}

.loneshoal-page .loneshoal-facts b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--ls-serif);
  color: var(--amber);
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.loneshoal-page .loneshoal-facts span {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(238, 230, 214, 0.78);
}

.loneshoal-page .loneshoal-note {
  max-width: 68ch;
  border-left: 2px solid rgba(255, 206, 140, 0.5);
  padding: 4px 0 4px 18px;
  color: rgba(238, 230, 214, 0.72);
  font-size: 15px;
  line-height: 1.7;
}

.loneshoal-page .loneshoal-plain-list {
  list-style: disc;
  margin: 0 0 24px;
  padding-left: 22px;
  max-width: 68ch;
}

.loneshoal-page .loneshoal-plain-list li {
  margin-bottom: 9px;
  line-height: 1.7;
  font-size: clamp(15px, 1.6vw, 16.5px);
  color: rgba(238, 230, 214, 0.85);
}

.loneshoal-page .loneshoal-subhead {
  margin: 26px 0 10px;
  font-family: var(--ls-serif);
  color: var(--amber);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.loneshoal-page .loneshoal-subhead:first-child {
  margin-top: 0;
}

.loneshoal-page .subnote {
  font-size: 13px;
  font-weight: 400;
  color: rgba(238, 230, 214, 0.55);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--ls-sans);
}

.loneshoal-page code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--amber);
}

/* ---------------------------------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------------------------------- */

/*
 * Below 40rem the shared header wraps its nav onto a second line, so the hero has more chrome to
 * subtract. The wordmark also drops to a viewport ratio that keeps all nine letters plus their
 * 0.15em tracking inside a 320px screen, which 11.5vw does not.
 */
@media (max-width: 40rem) {
  .loneshoal-page {
    --ls-header: 7rem;
  }

  .loneshoal-page .loneshoal-hero h1 {
    font-size: clamp(30px, 10.5vw, 48px);
  }

  .loneshoal-page .rose {
    width: 78vmin;
    height: 78vmin;
  }

  .loneshoal-page .birds {
    left: 4%;
    width: 36vw;
  }

  .loneshoal-page .birds2,
  .loneshoal-page .drift2 {
    display: none;
  }

  .loneshoal-page .drift {
    left: -2%;
    width: 38vw;
  }

  .loneshoal-page .isl.far,
  .loneshoal-page .isl.far2 {
    height: 11vw;
  }

  .loneshoal-page .isl.mid,
  .loneshoal-page .isl.mid2 {
    height: 17vw;
    width: 74vw;
  }

  .loneshoal-page .isl.front {
    height: 15vw;
    width: 96vw;
    margin-left: -48vw;
  }

  .loneshoal-page .glint {
    width: 60vw;
  }
}

/*
 * A short landscape screen — a phone turned sideways — has less height than the join card needs.
 * The hero takes its natural content height there and the cue leaves the corner, so nothing is
 * clipped and nothing overlaps.
 */
@media (max-height: 34rem) and (orientation: landscape) {
  .loneshoal-page .loneshoal-hero {
    min-height: 0;
  }

  .loneshoal-page .hero-inner {
    padding: 32px 24px;
  }

  .loneshoal-page a.scroll-cue {
    position: static;
    transform: none;
    margin: 0 auto 20px;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /*
   * The source turned smooth scrolling off here, and the shared shell sets it on `html`, which no
   * `.loneshoal-page` descendant selector can reach. The `:has()` keeps the override on this page.
   */
  html:has(body.loneshoal-page) {
    scroll-behavior: auto;
  }

  .loneshoal-page .loneshoal-ember,
  .loneshoal-page a.scroll-cue {
    animation: none;
  }

  .loneshoal-page .loneshoal-layer {
    transition: none !important;
    transform: none !important;
  }
}
