/* ==========================================================================
   Components — shared by every page. Order: icon, button, chip, nav, footer,
   panel, server card, stats, steps, table, FAQ, prose, page head, side index,
   CTA band, toast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icon — references the inline sprite stamped into each page by
   scripts/build.js (an external sprite file can't be <use>d under file://).
   -------------------------------------------------------------------------- */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* --------------------------------------------------------------------------
   Item — a 16×16 pixel-art sprite (img/items/), the thing an inventory slot
   holds. Line icons above are for controls; items are for things in the
   world. Decorative: the label always sits beside it as text.
   -------------------------------------------------------------------------- */

.item {
  flex: none;
  width: var(--item-2x);
  height: var(--item-2x);
  image-rendering: pixelated;
}

.item--1x {
  width: var(--item);
  height: var(--item);
}

/* --------------------------------------------------------------------------
   Button — a chunky block with a darker bottom ledge, pressed like the
   game's own menu buttons: it sinks onto the ledge when clicked.
   -------------------------------------------------------------------------- */

.btn {
  --n: var(--notch-sm);
  --ledge: 4px;
  --btn-fill: var(--night-600);
  --btn-ink: var(--ink);
  --btn-ledge: rgba(0, 0, 0, 0.35);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3rem;
  padding: 0 var(--s-5) var(--ledge);
  border: 0;
  background: var(--btn-fill);
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 calc(var(--ledge) * -1) 0 var(--btn-ledge), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), padding var(--t-fast);
}

.btn:hover {
  color: var(--btn-ink);
  filter: brightness(1.12);
}

.btn:active {
  --ledge: 1px;
  transform: translateY(3px);
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -5px;
}

.btn--primary {
  --btn-fill: var(--oasis-grad);
  --btn-ink: var(--ink-on-accent);
  --btn-ledge: rgba(64, 96, 0, 0.55);
}

.btn--primary:focus-visible {
  outline-color: var(--ink-on-accent);
}

.btn--sky {
  --btn-fill: linear-gradient(180deg, #6cc4ff 0%, var(--algo-blue) 100%);
  --btn-ink: #04182b;
  --btn-ledge: rgba(6, 50, 100, 0.6);
}

/* Solid enough to hold its shape over photography, quiet on a panel. */
.btn--ghost {
  --btn-fill: rgba(29, 44, 66, 0.82);
  --btn-ledge: rgba(150, 190, 255, 0.2);
  box-shadow: inset 0 calc(var(--ledge) * -1) 0 var(--btn-ledge);
}

.btn--lg {
  min-height: 3.5rem;
  padding-inline: var(--s-6);
  font-size: var(--text-lg);
}

.btn--sm {
  --ledge: 3px;
  min-height: 2.5rem;
  padding-inline: var(--s-4);
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Copy-IP buttons swap their label in place once the address is copied. */
[data-copy-ip].is-copied {
  --btn-fill: var(--online);
  --btn-ink: var(--ink-on-accent);
  --btn-ledge: rgba(0, 70, 0, 0.5);
}

/* A plain text link with an arrow that nudges on hover. */
.more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--oasis-lime);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.more .icon {
  transition: transform var(--t-fast) var(--ease-out);
}

.more:hover {
  color: var(--oasis-gold);
}

.more:hover .icon {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Chip — small HUD label.
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3rem 0.6rem;
  background: rgba(150, 190, 255, 0.1);
  color: var(--ink-soft);
  font-family: var(--font-hud);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.chip--lime { background: rgba(182, 227, 50, 0.14); color: var(--oasis-lime); }
.chip--sky { background: rgba(47, 155, 240, 0.16); color: var(--algo-sky); }
.chip--gold { background: rgba(247, 213, 59, 0.14); color: var(--oasis-gold); }
.chip--red { background: rgba(255, 107, 107, 0.14); color: var(--offline); }
.chip--violet { background: rgba(184, 140, 245, 0.16); color: var(--end); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base);
}

/* Over the hero the bar is clear; once the page scrolls (or on any page
   without a hero) it becomes a solid surface. */
.nav.is-solid,
.no-js .nav {
  background: rgba(5, 8, 15, 0.92);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.nav__brand img {
  width: auto;
  height: 2.5rem;
  transition: transform var(--t-base) var(--ease-out);
}

.nav__brand:hover img {
  transform: scale(1.04);
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--s-1);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  display: block;
  padding: var(--s-3) var(--s-4);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--ink);
}

/* Active marker: a short lit bar, the same "selected slot" language as the
   hotbar on the home page. */
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 0.25rem;
  height: 3px;
  background: var(--oasis-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}

.nav__link:hover::after {
  transform: scaleX(0.35);
}

.nav__link[aria-current="page"] {
  color: var(--ink);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
}

.nav__ip {
  display: none;
}

.nav__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: rgba(5, 8, 15, 0.6);
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.nav__toggle .icon--close,
.nav__toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.nav__toggle[aria-expanded="true"] .icon--close {
  display: block;
}

.no-js .nav__toggle {
  display: none;
}

/* Mobile sheet */
.nav__sheet {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) var(--gutter) var(--s-7);
  background: var(--night-950);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}

.nav__sheet.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.nav__sheet-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav__sheet-link[aria-current="page"] {
  color: var(--oasis-lime);
}

.nav__sheet-link .icon {
  color: var(--ink-mute);
}

body.is-locked {
  overflow: hidden;
}

/* Below this the links and the address button no longer fit on one line. */
@media (min-width: 1100px) {
  .nav__links { display: flex; }
  .nav__ip { display: inline-flex; }
  .nav__toggle,
  .nav__sheet { display: none; }
}

/* Without JS there is no toggle, so the links simply wrap under the bar. */
.no-js .nav { position: static; height: auto; }
.no-js .nav__inner { flex-wrap: wrap; padding-block: var(--s-3); }
.no-js .nav__links { display: flex; flex-wrap: wrap; width: 100%; order: 3; margin: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  padding-block: var(--s-8) var(--s-6);
  background: var(--night-900);
  border-top: 1px solid var(--line);
}

.footer__grid {
  display: grid;
  gap: var(--s-7);
}

.footer__brand img {
  width: 11rem;
  margin-bottom: var(--s-4);
}

.footer__brand p {
  max-width: 24rem;
  color: var(--ink-mute);
  font-size: var(--text-sm);
}

.footer__address {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  font-family: var(--font-hud);
  font-size: var(--text-sm);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
}

.footer__title {
  margin-bottom: var(--s-3);
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

.footer__list a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--oasis-lime);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

@media (min-width: 860px) {
  .footer__grid { grid-template-columns: 1.2fr 2fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Panel — the standard content surface (a .block with padding).
   -------------------------------------------------------------------------- */

.panel {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.panel--raised {
  --block-fill: var(--night-700);
}

/* Accent edge for the one panel in a group that matters most. */
.panel--lime {
  --block-edge: var(--line-accent);
  --block-fill: linear-gradient(180deg, rgba(182, 227, 50, 0.07), transparent 60%), var(--night-800);
}

.panel--sky {
  --block-edge: rgba(47, 155, 240, 0.5);
  --block-fill: linear-gradient(180deg, rgba(47, 155, 240, 0.09), transparent 60%), var(--night-800);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.panel__title .icon {
  color: var(--oasis-lime);
}

.panel h2 + p,
.panel h3 + p,
.panel h4 + p {
  margin-top: var(--s-2);
}

.panel p + p,
.panel p + ul,
.panel ul + p {
  margin-top: var(--s-3);
}

/* Interactive panels lift their edge colour rather than their position. */
a.panel {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background var(--t-base);
}

a.panel:hover {
  --block-edge: var(--oasis-lime);
  color: inherit;
}

a.panel:hover h3,
a.panel:hover h4 {
  color: var(--oasis-lime);
}

/* Icon tile — an inventory slot holding one item (or, for Discord, a glyph). */
.slot-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--s-4);
  background: var(--night-950);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(150, 190, 255, 0.14);
  color: var(--oasis-lime);
}

.slot-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.slot-icon--sky { color: var(--algo-sky); }

/* Bulleted list with pixel bullets. */
.ticks > li {
  position: relative;
  padding-left: 1.4rem;
}

.ticks > li + li {
  margin-top: var(--s-2);
}

.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--oasis-lime);
}

.ticks--sky > li::before { background: var(--algo-sky); }

/* --------------------------------------------------------------------------
   Server card — modelled on an entry in the game's multiplayer list:
   icon, name, message line, signal bars and player count. Fed live by
   site.js; reads sensibly before the first response and if it never comes.
   -------------------------------------------------------------------------- */

.server {
  --n: var(--notch);
  --block-fill: rgba(5, 8, 15, 0.86);
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  width: 100%;
  max-width: 30rem;
}

.server__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
}

.server__icon {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  background: var(--night-700);
  image-rendering: auto;
}

.server__name {
  color: var(--ink);
  font-family: var(--font-hud);
  font-size: var(--text-base);
  line-height: 1.3;
}

.server__motd {
  color: var(--ink-mute);
  font-family: var(--font-hud);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.server__meta {
  display: grid;
  justify-items: end;
  gap: var(--s-1);
  color: var(--ink-soft);
  font-family: var(--font-hud);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Discord entry: the same list row, as one link, with a glyph for an icon. */
.server--discord {
  --block-edge: rgba(47, 155, 240, 0.4);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast);
}

.server--discord:hover {
  --block-edge: var(--algo-sky);
}

.server--discord .server__name,
.server--discord .server__motd {
  display: block;
}

.server__glyph {
  display: grid;
  place-items: center;
  background: var(--algo-deep);
  color: var(--ink);
}

.server__glyph .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.server__sub {
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

/* Five signal bars, as in the server list. */
.signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.signal i {
  width: 3px;
  background: var(--night-500);
}

.signal i:nth-child(1) { height: 20%; }
.signal i:nth-child(2) { height: 40%; }
.signal i:nth-child(3) { height: 60%; }
.signal i:nth-child(4) { height: 80%; }
.signal i:nth-child(5) { height: 100%; }

[data-status="online"] .signal i { background: var(--online); }
[data-status="offline"] .signal i:first-child { background: var(--offline); }

@keyframes signal-scan {
  0%, 100% { background: var(--night-500); }
  50% { background: var(--ink-mute); }
}

[data-status="pending"] .signal i {
  animation: signal-scan 1.2s infinite;
}

[data-status="pending"] .signal i:nth-child(2) { animation-delay: 0.12s; }
[data-status="pending"] .signal i:nth-child(3) { animation-delay: 0.24s; }
[data-status="pending"] .signal i:nth-child(4) { animation-delay: 0.36s; }
[data-status="pending"] .signal i:nth-child(5) { animation-delay: 0.48s; }

.server__address {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
}

.server__ip {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 var(--s-4);
  background: var(--night-950);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(150, 190, 255, 0.12);
  color: var(--ink);
  font-family: var(--font-hud);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

/* Small inline status: a dot and a label, used in nav-adjacent places. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-soft);
  font-family: var(--font-hud);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--pending);
}

[data-status="online"] .status::before { background: var(--online); box-shadow: 0 0 10px var(--online); }
[data-status="offline"] .status::before { background: var(--offline); }

/* --------------------------------------------------------------------------
   Stat — a HUD numeral over a label.
   -------------------------------------------------------------------------- */

.stat__num {
  display: block;
  color: var(--ink);
  font-family: var(--font-hud);
  font-size: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);
  line-height: 1;
  -webkit-font-smoothing: none;
}

.stat__label {
  display: block;
  margin-top: var(--s-2);
  color: var(--ink-mute);
  font-size: var(--text-sm);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Steps — numbered sequence.
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--s-5);
}

.step {
  counter-increment: step;
  position: relative;
  padding-left: 4rem;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--night-950);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(150, 190, 255, 0.14);
  color: var(--oasis-lime);
  font-family: var(--font-hud);
  font-size: var(--text-sm);
}

/* Connector between consecutive step markers. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.375rem - 1px);
  top: 3.25rem;
  bottom: calc(var(--s-5) * -1 + 0.5rem);
  width: 2px;
  background: var(--line-strong);
}

.step h3,
.step h4 {
  margin-bottom: var(--s-2);
  padding-top: 0.45rem;
}

.step > * + * {
  margin-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   Data table
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.table th,
.table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table thead th {
  color: var(--ink-mute);
  font-family: var(--font-hud);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table tbody th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

/* A table whose row headers each carry an item. */
.table--items th,
.table--items td {
  vertical-align: middle;
}

.table--items .item {
  display: inline-block;
  margin-right: var(--s-3);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   FAQ — native <details>, so it works without JS and is searchable in-page.
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--s-2);
}

.faq__item {
  --n: var(--notch-sm);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* A plus drawn from two bars; the vertical one collapses when open. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--oasis-lime), var(--oasis-lime)) center / 100% 2px no-repeat,
    linear-gradient(var(--oasis-lime), var(--oasis-lime)) center / 2px 100% no-repeat;
  transition: transform var(--t-base) var(--ease-out);
}

.faq__item[open] summary::after {
  background-size: 100% 2px, 2px 0;
  transform: rotate(180deg);
}

.faq__item summary:hover {
  color: var(--oasis-lime);
}

.faq__item summary:focus-visible {
  outline-offset: -5px;
}

.faq__body {
  padding: 0 var(--s-5) var(--s-5);
  max-width: var(--w-prose);
}

.faq__body > * + * {
  margin-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   Prose — long-form reading (rules, legal, wiki).
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--w-prose);
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose h2 {
  margin-top: var(--s-8);
  font-size: var(--text-2xl);
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--s-6);
  font-size: var(--text-xl);
}

.prose ul {
  display: grid;
  gap: var(--s-2);
}

.prose ul > li {
  position: relative;
  padding-left: 1.4rem;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--oasis-lime);
}

/* A rule's closing line: the plain-English takeaway. */
.prose .takeaway {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--oasis-lime);
  background: rgba(182, 227, 50, 0.06);
  color: var(--ink);
}

.note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-left: 3px solid var(--algo-blue);
  background: rgba(47, 155, 240, 0.08);
  font-size: var(--text-sm);
}

.note .icon {
  margin-top: 0.15em;
  color: var(--algo-sky);
}

/* --------------------------------------------------------------------------
   Scene — a photograph filling its parent, optionally with a looping video
   over it. The still is the video's own first frame, so the fade between
   them is invisible and the page is finished before (and without) the
   video. site.js only fetches the video when it will actually be watched.
   The parent needs position + isolation, and paints its own scrim on top.
   -------------------------------------------------------------------------- */

.scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.scene__still,
.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--scene-focus, 50% 50%);
}

.scene__video {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.scene__video.is-playing {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Page head — the header of every interior page. By default there is no
   photo: a lit grid that fades out. Pages that open onto a place add
   .page-head--scene and a .scene behind the copy.
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(47, 155, 240, 0.2), transparent 60%),
    radial-gradient(40rem 24rem at 95% 0%, rgba(182, 227, 50, 0.1), transparent 60%),
    var(--night-900);
}

/* Block grid, masked so it dissolves toward the content. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}

.page-head > .wrap {
  position: relative;
}

.page-head--scene {
  padding-block: calc(var(--nav-h) + clamp(4rem, 11vw, 9rem)) clamp(3rem, 7vw, 5.5rem);
  background: var(--night-950);
  isolation: isolate;
}

/* Dark where the copy sits (left) and where the page continues (bottom);
   the scene is left to show through on the right. */
.page-head--scene::before {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 8, 15, 0.78) 0%, rgba(5, 8, 15, 0.1) 30%, rgba(5, 8, 15, 0.35) 62%, var(--night-950) 100%),
    linear-gradient(90deg, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.62) 45%, rgba(5, 8, 15, 0.18) 80%);
  -webkit-mask-image: none;
  mask-image: none;
}

.page-head--scene .lede {
  color: var(--ink);
}

/* Shorter variant for pages deeper in a section (wiki topics). */
.page-head--compact {
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(2rem, 5vw, 3.5rem);
}

.page-head h1 {
  font-size: var(--text-3xl);
  max-width: 18ch;
}

.page-head .lede {
  max-width: 38rem;
}

.page-head .btn-row {
  margin-top: var(--s-6);
}

.page-head__meta {
  margin-top: var(--s-5);
  color: var(--ink-mute);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Side index — sticky in-page navigation beside long pages.
   -------------------------------------------------------------------------- */

.with-index {
  display: grid;
  gap: var(--s-7);
}

.index {
  font-size: var(--text-sm);
}

.index__title {
  margin-bottom: var(--s-3);
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

.index__list {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scrollbar-width: thin;
}

.index__list a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.index__list a:hover,
.index__list a.is-active,
.index__list a[aria-current="page"] {
  border-color: var(--oasis-lime);
  color: var(--oasis-lime);
}

@media (min-width: 960px) {
  .with-index {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }

  .index {
    position: sticky;
    top: calc(var(--nav-h) + var(--s-5));
    max-height: calc(100vh - var(--nav-h) - var(--s-7));
    overflow-y: auto;
  }

  .index__list {
    display: grid;
    gap: 0;
    overflow: visible;
    padding: 0;
    border-left: 1px solid var(--line);
  }

  .index__list a {
    margin-left: -1px;
    padding: 0.4rem var(--s-4);
    border: 0;
    border-left: 2px solid transparent;
    white-space: normal;
  }

  .index__list a:hover,
  .index__list a.is-active,
  .index__list a[aria-current="page"] {
    border-left-color: var(--oasis-lime);
  }
}

/* --------------------------------------------------------------------------
   CTA band — the closing invitation on every page.
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--night-950) 0%, rgba(5, 8, 15, 0.72) 35%, rgba(5, 8, 15, 0.78) 70%, var(--night-900) 100%);
}

/* Pages without a photo behind the CTA get a quiet lit ground instead. */
.cta--plain {
  background: radial-gradient(50rem 22rem at 50% 110%, rgba(182, 227, 50, 0.14), transparent 70%), var(--night-950);
}

.cta--plain::after {
  content: none;
}

.cta h2 {
  max-width: 16ch;
  margin-inline: auto;
}

.cta .lede {
  margin-inline: auto;
}

.cta .btn-row {
  justify-content: center;
  margin-top: var(--s-6);
}

.cta__address {
  margin-top: var(--s-5);
  color: var(--ink-mute);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Toast — copy confirmation, announced politely to assistive tech.
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--night-700);
  border: 1px solid var(--online);
  color: var(--ink);
  font-family: var(--font-hud);
  font-size: var(--text-sm);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 1rem);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base), visibility 0s linear var(--t-base);
  pointer-events: none;
}

.toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.toast::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--online);
}