:root {
  --slate: #1d232b;
  --night: #081018;
  --deep: #03070b;
  --fog: #d9dee2;
  --fog-dim: #aab4b9;
  --beam: #ffe9b8;
  --beam-soft: rgba(255, 233, 184, 0.68);
  --hull: #b83a32;
  --hull-dark: #74252a;
  --brass: #c59a5b;
  --ink: #101720;
  --line: rgba(217, 222, 226, 0.23);
  --panel: rgba(13, 22, 30, 0.72);
  --panel-strong: rgba(19, 31, 41, 0.86);
  --lamp-x: 22rem;
  --lamp-y: 13rem;
  --beam-angle: 218deg;
  --beam-power: 0.82;
  --beam-opacity: 0.85;
  --lamp-alpha: 0.49;
  --sea-glint: 0.69;
  --beam-r: 255;
  --beam-g: 233;
  --beam-b: 184;
  --stamp: #d4a057;
  --sign: 'Archivo', sans-serif;
  --log: 'Zilla Slab', Georgia, serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-behavior: smooth;
  scrollbar-color: var(--brass) var(--night);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 0.72rem;
  height: 0.72rem;
}

::-webkit-scrollbar-track {
  background: #050a0f;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #050a0f;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brass), var(--hull));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--beam), var(--hull));
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--night);
  color: #eef3f1;
  font-family: var(--log);
  font-size: 18px;
  line-height: 1.58;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "pnum" 1;
  font-optical-sizing: auto;
  text-rendering: geometricPrecision;
  -webkit-tap-highlight-color: rgba(255, 233, 184, 0.18);
}

body[data-light-color="red"] {
  --beam-r: 255;
  --beam-g: 95;
  --beam-b: 76;
  --beam: #ff8f74;
  --beam-soft: rgba(255, 95, 76, 0.58);
}

body[data-light-color="wr"] {
  --beam-r: 255;
  --beam-g: 205;
  --beam-b: 154;
  --beam: #ffd39a;
  --beam-soft: rgba(255, 211, 154, 0.62);
}

::selection {
  background: var(--beam);
  color: var(--ink);
}

a {
  color: inherit;
}

p,
li {
  text-wrap: pretty;
}

button,
input,
textarea,
select {
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--beam);
  outline-offset: 4px;
}

code {
  padding: 0.02rem 0.28rem;
  border: 1px solid rgba(255, 233, 184, 0.28);
  border-radius: 3px;
  background: rgba(255, 233, 184, 0.08);
  color: var(--beam);
  font-family: var(--sign);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 1rem;
  left: 1rem;
  transform: translateY(-180%);
  padding: 0.8rem 1rem;
  border: 1px solid var(--beam);
  border-radius: 4px;
  background: var(--night);
  color: var(--beam);
  font-family: var(--sign);
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.storm-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 8%, rgba(176, 193, 202, 0.22), transparent 18rem),
    radial-gradient(circle at 20% 70%, rgba(184, 58, 50, 0.16), transparent 22rem),
    linear-gradient(180deg, #111a24 0%, #101821 38%, #091019 68%, #03070b 100%);
}

.storm-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(217, 222, 226, 0.045) 0 1px, transparent 1px 5rem),
    repeating-linear-gradient(0deg, rgba(217, 222, 226, 0.035) 0 1px, transparent 1px 4rem);
  opacity: 0.42;
  mask-image: linear-gradient(180deg, black 0%, transparent 72%);
}

.storm-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 233, 184, 0.12) 0 0.08rem, transparent 0.09rem),
    radial-gradient(circle at 63% 42%, rgba(217, 222, 226, 0.1) 0 0.07rem, transparent 0.08rem),
    radial-gradient(circle at 82% 74%, rgba(197, 154, 91, 0.11) 0 0.06rem, transparent 0.07rem);
  background-size: 8rem 7rem, 11rem 9rem, 6rem 10rem;
  opacity: 0.36;
  mix-blend-mode: screen;
  animation: grainDrift 18s linear infinite;
}

.sky-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(217, 222, 226, 0.08) 42.1% 42.35%, transparent 42.45%),
    linear-gradient(244deg, transparent 0 55%, rgba(184, 58, 50, 0.1) 55.1% 55.35%, transparent 55.45%);
  opacity: 0.8;
}

.beam-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--beam-opacity);
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.68), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.12) 7rem, transparent 17rem),
    conic-gradient(from var(--beam-angle) at var(--lamp-x) var(--lamp-y),
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0) 0deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.24) 3deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.82) 11deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.28) 22deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0) 42deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0) 360deg);
  filter: blur(0.5px) saturate(1.08);
  mix-blend-mode: screen;
  transition: opacity 120ms linear;
}

.fog-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.rain-slant {
  position: absolute;
  inset: -5rem;
  z-index: 5;
  background: repeating-linear-gradient(106deg, transparent 0 1.25rem, rgba(217, 222, 226, 0.12) 1.32rem 1.38rem, transparent 1.46rem 2.6rem);
  opacity: 0.22;
  transform: translate3d(0, 0, 0);
  animation: rainMove 760ms linear infinite;
}

.sea-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 22vh;
  min-height: 9rem;
  background:
    repeating-linear-gradient(176deg, rgba(217, 222, 226, 0.12) 0 1px, transparent 1px 1.8rem),
    linear-gradient(180deg, rgba(8, 16, 24, 0), rgba(3, 7, 11, 0.76) 24%, #020406 100%);
}

.sea-plate::before {
  content: "";
  position: absolute;
  inset: 1.5rem 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 184, 0.55), transparent);
  opacity: var(--sea-glint);
}

.lighthouse-figure {
  position: absolute;
  z-index: 6;
  left: auto;
  right: 6rem;
  bottom: -0.8rem;
  width: 21rem;
  max-width: 30%;
  height: auto;
  overflow: visible;
  opacity: 0.88;
  filter: drop-shadow(0 2.4rem 2rem rgba(0, 0, 0, 0.52));
}

.lighthouse-figure path,
.lighthouse-figure circle {
  vector-effect: non-scaling-stroke;
}

.rock {
  fill: #05080b;
}

.tower-shadow {
  fill: rgba(0, 0, 0, 0.38);
}

.tower {
  fill: url("#towerShade");
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.2;
}

.tower-edge {
  fill: none;
  stroke: rgba(20, 28, 36, 0.28);
  stroke-width: 2;
}

.band {
  fill: url("#redBand");
}

.gallery {
  fill: #111820;
  stroke: rgba(255, 233, 184, 0.45);
  stroke-width: 2;
}

.gallery-rail,
.weather-vane,
.steps {
  fill: none;
  stroke: #d9dee2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.lantern-room {
  fill: #101720;
  stroke: #d9dee2;
  stroke-width: 3;
}

.lantern-glass {
  fill: rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.24);
  stroke: rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.86);
  stroke-width: 2;
}

.lamp-aura {
  fill: rgba(var(--beam-r), var(--beam-g), var(--beam-b), var(--lamp-alpha));
  filter: url("#lampBlur");
}

.lamp-core {
  fill: rgb(var(--beam-r), var(--beam-g), var(--beam-b));
}

.roof {
  fill: #0b1118;
  stroke: #d9dee2;
  stroke-width: 2;
}

.service-door {
  fill: #111820;
  stroke: rgba(255, 233, 184, 0.34);
  stroke-width: 2;
}

.site-header {
  position: fixed;
  z-index: 18;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid rgba(217, 222, 226, 0.22);
  border-radius: 6px;
  background: rgba(5, 10, 15, 0.7);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: #f3f7f5;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--beam);
  border-radius: 4px;
  background: linear-gradient(145deg, var(--hull), #121b23 58%);
  color: var(--beam);
  font-family: var(--sign);
  font-size: 1.5rem;
  font-weight: 900;
}

.brand-name,
.brand-sub,
.station-nav a,
.kicker,
.plate-label,
.card-code,
.role,
.forecast-line span,
.log-entry time,
.editor-status output,
.site-footer,
.control-bank button,
.preset-row button,
.order-strip,
.order-strip button {
  font-family: var(--sign);
  letter-spacing: 0;
}

.brand-name {
  display: block;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.brand-sub {
  display: block;
  margin-top: 0.18rem;
  color: var(--fog-dim);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.station-nav {
  display: flex;
  gap: 0.4rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.station-nav::-webkit-scrollbar {
  display: none;
}

.station-nav a {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid rgba(217, 222, 226, 0.2);
  border-radius: 4px;
  background: rgba(217, 222, 226, 0.06);
  color: #eef3f1;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.station-nav a:hover {
  border-color: rgba(255, 233, 184, 0.58);
  background: rgba(255, 233, 184, 0.11);
  color: var(--beam);
}

main {
  position: relative;
  z-index: 1;
}

.section-slab {
  position: relative;
  width: min(100% - 2rem, 76rem);
  margin: 0 auto;
  padding: 7.5rem 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: end;
  gap: 2rem;
  min-height: 100svh;
  padding-top: 10rem;
  padding-bottom: 5rem;
}

.hero-copy {
  max-width: 52rem;
}

.kicker {
  margin: 0 0 0.85rem;
  color: var(--beam);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-title {
  margin: 0;
  color: #f7fbf8;
  font-family: var(--sign);
  font-size: 7rem;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow: 0 0 2.6rem rgba(255, 233, 184, 0.22), 0 0.5rem 0 rgba(184, 58, 50, 0.18);
}

.hero-dek,
.lead {
  color: #dce5e2;
  font-size: 1.32rem;
  line-height: 1.48;
}

.hero-dek {
  max-width: 43rem;
  margin: 1.1rem 0 0;
}

.hero-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 2rem;
}

.hero-ledger span {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid rgba(217, 222, 226, 0.22);
  border-left: 0.35rem solid var(--hull);
  border-radius: 4px;
  background: rgba(13, 22, 30, 0.68);
}

.hero-ledger b {
  display: block;
  color: #ffffff;
  font-family: var(--sign);
  font-size: 0.78rem;
  font-weight: 900;
}

.hero-ledger small {
  display: block;
  margin-top: 0.3rem;
  color: var(--fog-dim);
  font-size: 0.86rem;
  line-height: 1.25;
}

.beam-card {
  --beam-hit: 0;
  --beam-hit-pct: 0%;
  --beam-alpha: 0;
  --beam-glow: 0rem;
  border: 1px solid color-mix(in srgb, rgba(217, 222, 226, 0.28), var(--beam) var(--beam-hit-pct));
  border-radius: 8px;
  background:
    linear-gradient(128deg, rgba(var(--beam-r), var(--beam-g), var(--beam-b), var(--beam-alpha)), transparent 42%),
    linear-gradient(180deg, rgba(16, 27, 36, 0.96), rgba(4, 10, 16, 0.91));
  box-shadow:
    0 0 var(--beam-glow) rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.28),
    0 1.4rem 3rem rgba(0, 0, 0, 0.34);
  transition: border-color 160ms linear, background 160ms linear, box-shadow 160ms linear, transform 180ms ease;
}

.beam-card:hover {
  transform: translateY(-3px);
}

.hero-ticket {
  align-self: center;
  padding: 1.2rem;
  backdrop-filter: blur(10px);
}

.plate-label {
  margin: 0 0 0.6rem;
  color: var(--fog-dim);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-ticket strong {
  display: block;
  color: var(--beam);
  font-family: var(--sign);
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
}

.hero-ticket span {
  display: block;
  margin-top: 0.9rem;
  color: #dfe8e5;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.section-heading.narrow {
  display: block;
  max-width: 55rem;
}

h2,
h3 {
  color: #f7fbf8;
  font-family: var(--sign);
  letter-spacing: 0;
}

h2 {
  margin: 0;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 0.98;
}

h3 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.1;
}

.lead {
  margin: 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.service-card,
.roster-card {
  min-height: 18rem;
  padding: 1rem;
}

.service-card:nth-child(even) {
  margin-top: 2rem;
}

.card-code,
.role {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.22rem 0.45rem;
  border: 1px solid rgba(255, 233, 184, 0.28);
  border-radius: 3px;
  color: var(--beam);
  font-size: 0.72rem;
  font-weight: 900;
}

.service-card p,
.roster-card p,
.forecast-line p,
.log-entry p {
  margin: 0.85rem 0 0;
  color: #d6dfdd;
}

.editor-section {
  width: min(100% - 2rem, 70rem);
}

.editor-shell {
  padding: 1rem;
}

.editor-status {
  display: grid;
  grid-template-columns: minmax(13rem, 0.6fr) minmax(14rem, 0.9fr) minmax(0, 1.2fr);
  gap: 1rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid rgba(217, 222, 226, 0.18);
  border-radius: 6px;
  background: rgba(3, 7, 11, 0.28);
}

.editor-status .plate-label {
  margin: 0;
}

.editor-status output {
  color: var(--beam);
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1;
}

.editor-status span {
  color: #d8e0de;
}

.control-bank,
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.control-bank button,
.preset-row button {
  min-height: 44px;
  border: 1px solid rgba(217, 222, 226, 0.28);
  border-radius: 4px;
  background: rgba(217, 222, 226, 0.08);
  color: #f2f7f4;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
}

.control-bank button {
  min-width: 6.2rem;
  padding: 0.65rem 0.8rem;
}

.preset-row button {
  flex: 1 1 10rem;
  padding: 0.65rem 0.9rem;
  color: var(--beam);
}

.control-bank button:hover,
.preset-row button:hover,
.control-bank button[aria-pressed="true"] {
  border-color: rgba(255, 233, 184, 0.72);
  background: rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.16);
}

.rhythm-wrap {
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid rgba(217, 222, 226, 0.18);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(217, 222, 226, 0.08) 0 1px, transparent 1px 10%),
    rgba(3, 7, 11, 0.32);
}

.rhythm-stave {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  min-height: 4.9rem;
}

.rhythm-segment {
  position: relative;
  min-width: 0.4rem;
  border-radius: 3px;
  background: rgba(217, 222, 226, 0.12);
  overflow: hidden;
}

.rhythm-segment::after {
  content: attr(data-label);
  position: absolute;
  left: 0.4rem;
  bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--sign);
  font-size: 0.68rem;
  font-weight: 800;
}

.rhythm-segment.is-lit {
  background:
    linear-gradient(180deg, rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.92), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.22)),
    var(--beam);
  box-shadow: 0 0 1.2rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.42);
}

.rhythm-segment.is-dark {
  background: linear-gradient(180deg, rgba(5, 10, 15, 0.96), rgba(28, 39, 50, 0.82));
}

.forecast-section {
  width: min(100% - 2rem, 72rem);
}

.forecast-board {
  display: grid;
  gap: 0.7rem;
}

.forecast-line {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.forecast-line span {
  color: var(--beam);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.forecast-line strong {
  color: #f5faf7;
  font-size: 1.1rem;
  line-height: 1.35;
}

.forecast-line p {
  margin: 0;
}

.logbook {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.log-entry {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  min-height: 12rem;
  padding: 1rem;
}

.log-entry time {
  color: var(--beam);
  font-size: 1rem;
  font-weight: 900;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.roster-card {
  min-height: 15rem;
}

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - 2rem, 76rem);
  margin: 0 auto;
  padding: 1.05rem 1rem;
  border: 1px solid rgba(217, 222, 226, 0.22);
  border-left: 0.35rem solid var(--hull);
  border-radius: 6px;
  background: rgba(5, 10, 15, 0.76);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  color: #dce5e2;
  font-size: 0.85rem;
  font-weight: 800;
}

.site-footer p {
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.site-footer a {
  color: var(--beam);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff8e6;
  text-decoration-color: var(--hull);
}

.reveal {
  opacity: 1;
  transform: none;
}

body.is-loading .reveal {
  opacity: 0;
  transform: translateY(1rem);
}

body.loaded .reveal.in-view {
  animation: revealUp 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.loaded .reveal.in-view:nth-child(2) {
  animation-delay: 80ms;
}

body.loaded .reveal.in-view:nth-child(3) {
  animation-delay: 150ms;
}

body.loaded .reveal.in-view:nth-child(4) {
  animation-delay: 220ms;
}

.guide-main {
  width: min(100% - 2rem, 56rem);
  margin: 0 auto;
  padding: 10rem 0 4rem;
}

.guide-article {
  position: relative;
  overflow: hidden;
  padding: 1.45rem 1.65rem;
}

.guide-article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.35rem;
  background: linear-gradient(180deg, var(--beam), var(--hull) 42%, transparent);
}

.guide-title {
  margin: 0;
  color: #f7fbf8;
  font-family: var(--sign);
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
}

.guide-article h2 {
  margin-top: 2.2rem;
  font-size: 2rem;
}

.guide-article p {
  color: #dce5e2;
}

.guide-article .lead {
  margin-top: 1rem;
}

.guide-page .lighthouse-figure {
  left: 4rem;
  right: auto;
  max-width: 28%;
  opacity: 0.42;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes grainDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-6rem, 4rem, 0);
  }
}

@keyframes rainMove {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-1.8rem, 3.2rem, 0);
  }
}

@keyframes orderFlare {
  0% {
    opacity: 0;
    filter: blur(0.4px);
  }
  18% {
    opacity: 0.98;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(1.2px);
  }
}

@keyframes orderSweep {
  0% {
    opacity: 0;
    transform: translateX(-42%);
  }
  36% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

@keyframes orderStamp {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(-7deg) scale(1.45);
  }
  22% {
    opacity: 0;
  }
  38% {
    opacity: 0.92;
    transform: translateY(-50%) rotate(-7deg) scale(0.96);
  }
  72% {
    opacity: 0.72;
    transform: translateY(-50%) rotate(-7deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) rotate(-7deg) scale(1.04);
  }
}

@keyframes instrumentAnswer {
  0%,
  100% {
    box-shadow: inset 0 0 0 rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0), 0 0 0 rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0);
  }
  34% {
    box-shadow: inset 0 0 1.2rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.28), 0 0 1.4rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.18);
  }
}

@media (min-width: 78rem) {
  .hero-title {
    font-size: 9.8rem;
  }
}

@media (max-width: 62rem) {
  .hero {
    grid-template-columns: 1fr;
    align-items: center;
    padding-top: 11rem;
  }

  .hero-title {
    font-size: 5.6rem;
  }

  .hero-ledger,
  .service-grid,
  .roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading {
    display: block;
  }

  .section-heading .lead {
    margin-top: 1rem;
  }

  .editor-status,
  .forecast-line {
    grid-template-columns: 1fr;
  }

  .lighthouse-figure {
    left: auto;
    right: -1rem;
    width: 17rem;
    max-width: 46%;
    opacity: 0.82;
  }
}

@media (max-width: 48rem) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .station-nav {
    width: 100%;
  }
}

@media (max-width: 40rem) {
  body {
    font-size: 16px;
  }

  .site-header {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.55rem;
    gap: 0.45rem;
  }

  .brand-sub {
    display: none;
  }

  .station-nav a {
    padding: 0 0.72rem;
  }

  .section-slab {
    width: min(100% - 1rem, 76rem);
    padding: 4.8rem 0;
  }

  .hero {
    min-height: 100svh;
    padding-top: 10rem;
    padding-bottom: 2rem;
  }

  .hero-title {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.35rem;
  }

  .hero-dek,
  .lead {
    font-size: 1.08rem;
  }

  .hero-ledger,
  .service-grid,
  .logbook,
  .roster-grid {
    grid-template-columns: 1fr;
  }

  .service-card,
  .roster-card {
    min-height: auto;
  }

  .service-card:nth-child(even) {
    margin-top: 0;
  }

  .hero-ticket strong,
  .editor-status output {
    font-size: 2.1rem;
  }

  .control-bank button {
    flex: 1 1 calc(50% - 0.55rem);
    min-width: 0;
  }

  .rhythm-stave {
    min-height: 4.2rem;
  }

  .rhythm-segment::after {
    display: none;
  }

  .log-entry {
    grid-template-columns: 1fr;
  }

  .lighthouse-figure {
    right: -4rem;
    width: 16rem;
    max-width: 72%;
    opacity: 0.42;
  }

  .guide-main {
    width: min(100% - 1rem, 62rem);
    padding-top: 9rem;
  }

  .guide-title {
    font-size: 3.2rem;
  }

  code {
    padding: 0 0.18rem;
    font-size: 0.78em;
  }

  .guide-article {
    padding: 1.1rem 1rem 1.1rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .rain-slant {
    opacity: 0.08;
  }
}

/* Pass 2: make the service feel like a working optical instrument. */
button,
a {
  touch-action: manipulation;
}

section[id],
h2[id] {
  scroll-margin-top: 8rem;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.024), transparent 38%, rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.48;
}

.storm-scene {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 233, 184, 0.16), transparent 16rem),
    radial-gradient(circle at 18% 65%, rgba(184, 58, 50, 0.2), transparent 24rem),
    linear-gradient(180deg, #1d232b 0%, #111b25 31%, #071019 68%, #020508 100%);
}

.range-rings,
.bearing-scale {
  position: absolute;
  left: var(--lamp-x);
  top: var(--lamp-y);
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.range-rings {
  width: 78vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 4.8rem, rgba(255, 233, 184, 0.16) 4.86rem 4.93rem, transparent 5rem 8.4rem),
    radial-gradient(circle, rgba(255, 233, 184, 0.08), transparent 48%);
  mask-image: linear-gradient(110deg, transparent 0 12%, black 24% 76%, transparent 91%);
  opacity: 0.34;
  animation: ringBreathe 8s ease-in-out infinite;
}

.bearing-scale {
  width: 112vmax;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 210deg, rgba(217, 222, 226, 0.16) 0deg 0.22deg, transparent 0.22deg 7.5deg);
  mask-image: radial-gradient(circle, transparent 0 7rem, black 8rem 52%, transparent 72%);
  opacity: 0.18;
}

.beam-sweep {
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.9), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.18) 7rem, transparent 19rem),
    conic-gradient(from var(--beam-angle) at var(--lamp-x) var(--lamp-y),
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0) 0deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.22) 2deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.96) 8deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.62) 13deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.18) 24deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0) 43deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0) 360deg);
  filter: blur(0.25px) saturate(1.16);
}

.beam-sweep::before,
.beam-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.beam-sweep::before {
  background: conic-gradient(from calc(var(--beam-angle) + 3deg) at var(--lamp-x) var(--lamp-y),
      transparent 0deg,
      rgba(255, 255, 255, 0.28) 6deg,
      transparent 7.5deg,
      rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.2) 12deg,
      transparent 15deg,
      transparent 360deg);
  mix-blend-mode: screen;
  opacity: var(--beam-prism, 0.56);
}

.beam-sweep::after {
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), transparent 0 2.7rem, rgba(255, 255, 255, 0.28) 2.8rem 2.92rem, transparent 3rem 5.5rem, rgba(255, 233, 184, 0.18) 5.6rem 5.78rem, transparent 5.9rem),
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.16), transparent 9rem);
  mix-blend-mode: screen;
  opacity: var(--beam-lens, 0.42);
}

.order-flare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(255, 255, 255, 0.86), rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.34) 4.8rem, transparent 16rem),
    conic-gradient(from calc(var(--beam-angle) - 5deg) at var(--lamp-x) var(--lamp-y), transparent 0deg, rgba(255, 255, 255, 0.82) 4deg, rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.28) 16deg, transparent 36deg, transparent 360deg);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateZ(0);
}

body.order-struck .order-flare {
  animation: orderFlare 980ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

.rain-slant {
  opacity: 0.28;
}

.lighthouse-figure {
  right: 7.5rem;
  width: 23rem;
  max-width: 32%;
  opacity: 0.96;
}

.site-header {
  top: max(1rem, env(safe-area-inset-top));
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(9, 15, 21, 0.94), rgba(2, 6, 10, 0.82)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 0.9rem);
  border-color: rgba(255, 233, 184, 0.28);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.32rem;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--beam), var(--hull) 46%, var(--hull-dark));
}

.site-header::after {
  content: "NORTH MARROW / NIGHT ORDER";
  position: absolute;
  left: 50%;
  bottom: -0.72rem;
  padding: 0.08rem 0.5rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 233, 184, 0.22);
  background: rgba(5, 10, 15, 0.82);
  color: rgba(255, 233, 184, 0.82);
  font-family: var(--sign);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.2;
}

.brand-mark {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 1.4rem rgba(255, 233, 184, 0.18);
}

.brand-code {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 233, 184, 0.78);
  font-family: var(--sign);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.station-nav a {
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(217, 222, 226, 0.08), rgba(217, 222, 226, 0.03)),
    rgba(5, 10, 15, 0.45);
  text-transform: uppercase;
}

.station-nav a:hover {
  box-shadow: inset 0 -0.18rem 0 rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.55);
}

.section-slab {
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}

.hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.72fr);
  align-items: center;
}

.hero::before {
  content: "LIGHT LIST 33 / PRIVATE STATION";
  position: absolute;
  left: -2.8rem;
  top: 27%;
  writing-mode: vertical-rl;
  color: rgba(255, 233, 184, 0.46);
  font-family: var(--sign);
  font-size: 0.72rem;
  font-weight: 900;
}

.hero-title {
  position: relative;
  z-index: 0;
  text-wrap: balance;
  text-shadow:
    0 0 2.4rem rgba(255, 233, 184, 0.28),
    0 0.56rem 0 rgba(184, 58, 50, 0.26),
    0 1.4rem 2.5rem rgba(0, 0, 0, 0.46);
}

.hero-title::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: -0.02em;
  bottom: 0.04em;
  z-index: -1;
  height: 0.1em;
  background: linear-gradient(90deg, var(--hull), rgba(255, 233, 184, 0.18), transparent);
}

.hero-dek {
  padding-left: 1rem;
  border-left: 0.32rem solid rgba(255, 233, 184, 0.66);
  color: #edf4f1;
}

.hero-transmission {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 1.4rem;
}

.hero-transmission span {
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(255, 233, 184, 0.26);
  background:
    linear-gradient(90deg, rgba(184, 58, 50, 0.18), transparent 42%),
    rgba(3, 7, 11, 0.48);
}

.hero-transmission b,
.hero-transmission small {
  display: block;
}

.hero-transmission b {
  color: var(--beam);
  font-family: var(--sign);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-transmission small {
  margin-top: 0.2rem;
  color: #d7e0dd;
  font-size: 0.82rem;
  line-height: 1.25;
}

.hero-ledger span {
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(14, 24, 32, 0.88), rgba(3, 7, 11, 0.66)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 0.8rem);
}

.beam-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 5px;
  background:
    linear-gradient(118deg, rgba(var(--beam-r), var(--beam-g), var(--beam-b), var(--beam-alpha)), transparent 38%),
    linear-gradient(180deg, rgba(14, 26, 35, 0.97), rgba(3, 8, 13, 0.93));
}

.beam-card::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 15%, rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.42) 44%, rgba(255, 255, 255, 0.4) 50%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.18), transparent 52%);
  opacity: var(--beam-wash, 0);
  transform: translateX(var(--beam-shift, 0rem)) skewX(-8deg);
}

.beam-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 0.55rem);
  opacity: 0.54;
  mix-blend-mode: overlay;
}

.beam-card > * {
  position: relative;
  z-index: 1;
}

.hero-ticket {
  margin-top: 4rem;
  padding: 1.35rem;
  border-top: 0.28rem solid rgba(255, 233, 184, 0.66);
}

.hero-ticket::after {
  content: "SIGNED M. VENN";
  position: absolute;
  right: 0.75rem;
  bottom: 0.55rem;
  color: rgba(255, 233, 184, 0.3);
  font-family: var(--sign);
  font-size: 0.62rem;
  font-weight: 900;
}

.flash-register {
  display: flex;
  gap: 0.22rem;
  align-items: stretch;
  height: 2.25rem;
  margin-top: 0.95rem;
  padding: 0.28rem;
  border: 1px solid rgba(255, 233, 184, 0.24);
  background:
    repeating-linear-gradient(90deg, rgba(255, 233, 184, 0.08) 0 1px, transparent 1px 10%),
    rgba(3, 7, 11, 0.52);
}

.flash-register .rhythm-segment {
  min-width: 0.32rem;
  border-radius: 2px;
}

.flash-register .rhythm-segment::after {
  display: none;
}

.section-heading {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
}

.section-heading .kicker {
  padding-top: 0.62rem;
  border-top: 0.18rem solid var(--hull);
}

h2 {
  text-wrap: balance;
}

.service-grid {
  grid-template-columns: 1.15fr 0.92fr 0.92fr 1.08fr;
}

.service-card,
.roster-card,
.log-entry,
.forecast-line {
  border-left: 0.22rem solid rgba(184, 58, 50, 0.82);
}

.service-card {
  min-height: 20rem;
  padding: 1.1rem;
}

.service-card:nth-child(2) {
  margin-top: 3.2rem;
}

.service-card:nth-child(3) {
  margin-top: 1.2rem;
}

.editor-shell {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border-left: 0.38rem solid var(--hull);
}

.editor-status {
  grid-template-columns: minmax(12rem, 0.52fr) minmax(15rem, 0.92fr) minmax(0, 1.2fr);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(184, 58, 50, 0.16), transparent 36%),
    rgba(3, 7, 11, 0.48);
}

.editor-status output {
  text-shadow: 0 0 1.5rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.42);
}

.instrument-deck {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.period-dial,
.paper-tape {
  border: 1px solid rgba(255, 233, 184, 0.24);
  background: rgba(3, 7, 11, 0.46);
}

.period-dial {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.9) 0 var(--phase-progress, 0deg), rgba(217, 222, 226, 0.1) 0 360deg),
    radial-gradient(circle, #04080d 0 48%, rgba(255, 233, 184, 0.16) 49% 51%, #050a10 52%);
  box-shadow: inset 0 0 0 0.9rem rgba(3, 7, 11, 0.74), 0 0 1.2rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.18);
}

.period-dial::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 43%;
  height: 2px;
  transform: rotate(calc(var(--phase-progress, 0deg) - 90deg));
  transform-origin: left center;
  background: var(--beam);
  box-shadow: 0 0 1rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.74);
}

.period-dial span {
  position: absolute;
  color: rgba(255, 233, 184, 0.72);
  font-family: var(--sign);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.period-dial span:nth-child(1) {
  top: 0.8rem;
}

.period-dial span:nth-child(2) {
  right: 0.72rem;
  bottom: 1.2rem;
}

.period-dial span:nth-child(3) {
  bottom: 0.72rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(217, 222, 226, 0.72);
}

.paper-tape {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 7rem;
  padding: 1rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 233, 184, 0.06) 0 1px, transparent 1px 1.1rem),
    linear-gradient(90deg, rgba(255, 233, 184, 0.08), rgba(184, 58, 50, 0.1)),
    rgba(3, 7, 11, 0.52);
}

.paper-tape b {
  color: var(--beam);
  font-family: var(--sign);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.paper-tape span {
  margin-top: 0.45rem;
  color: #eef3f1;
}

.order-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 0.82fr) minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-height: 5.2rem;
  padding: 0.78rem;
  border: 1px solid rgba(255, 233, 184, 0.28);
  border-left: 0.3rem solid var(--stamp);
  border-radius: 3px;
  background:
    radial-gradient(circle at 1rem 1rem, rgba(255, 233, 184, 0.26) 0 0.09rem, transparent 0.1rem),
    radial-gradient(circle at 1rem calc(100% - 1rem), rgba(255, 233, 184, 0.2) 0 0.09rem, transparent 0.1rem),
    repeating-linear-gradient(90deg, rgba(255, 233, 184, 0.055) 0 1px, transparent 1px 1.15rem),
    linear-gradient(90deg, rgba(184, 58, 50, 0.17), rgba(255, 233, 184, 0.07) 34%, rgba(3, 7, 11, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.order-strip::before,
.order-strip::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.order-strip::before {
  inset: 0;
  background: linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.18) 48%, transparent 60%);
  opacity: 0;
  transform: translateX(-35%);
}

.order-strip::after {
  content: "TRANSMITTED";
  right: 7rem;
  top: 50%;
  padding: 0.15rem 0.58rem;
  transform: translateY(-50%) rotate(-7deg) scale(1.2);
  border: 2px solid rgba(184, 58, 50, 0.72);
  color: rgba(255, 233, 184, 0.76);
  font-size: 0.72rem;
  font-weight: 900;
  opacity: 0;
}

.order-strip b,
.order-strip output,
.order-strip span {
  position: relative;
  z-index: 1;
  display: block;
}

.order-strip b {
  color: rgba(217, 222, 226, 0.72);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.order-strip output {
  margin-top: 0.12rem;
  color: var(--beam);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 1rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.36);
}

.order-strip span {
  color: #dce5e2;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.order-strip button {
  position: relative;
  z-index: 1;
  min-height: 44px;
  min-width: 8.4rem;
  border: 1px solid rgba(255, 233, 184, 0.38);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 233, 184, 0.18), rgba(184, 58, 50, 0.2)),
    rgba(3, 7, 11, 0.62);
  color: #fff5d9;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.order-strip button:hover,
.order-strip button:focus-visible {
  border-color: var(--beam);
  background:
    linear-gradient(180deg, rgba(255, 233, 184, 0.24), rgba(184, 58, 50, 0.26)),
    rgba(3, 7, 11, 0.78);
  box-shadow: 0 0 1.25rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.18);
}

body.order-struck .order-strip::before {
  animation: orderSweep 780ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

body.order-struck .order-strip::after {
  animation: orderStamp 980ms cubic-bezier(0.18, 0.92, 0.2, 1) both;
}

body.order-struck .paper-tape,
body.order-struck .period-dial {
  animation: instrumentAnswer 980ms cubic-bezier(0.18, 0.92, 0.2, 1) both;
}

.control-bank,
.preset-row {
  gap: 0.45rem;
}

.control-bank button,
.preset-row button {
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(217, 222, 226, 0.1), rgba(3, 7, 11, 0.34));
}

.control-bank button[aria-pressed="true"],
.preset-row button[aria-pressed="true"],
.preset-row button:hover,
.control-bank button:hover {
  box-shadow: inset 0 -0.18rem 0 rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.64), 0 0 1.1rem rgba(var(--beam-r), var(--beam-g), var(--beam-b), 0.14);
}

.control-bank button:active,
.preset-row button:active,
.order-strip button:active {
  transform: translateY(1px);
}

.rhythm-wrap {
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(184, 58, 50, 0.12), transparent 28%),
    repeating-linear-gradient(90deg, rgba(217, 222, 226, 0.09) 0 1px, transparent 1px 5%),
    rgba(3, 7, 11, 0.48);
}

.rhythm-stave {
  min-height: 5.6rem;
}

.rhythm-segment {
  border-radius: 2px;
}

.forecast-line {
  grid-template-columns: 7.5rem minmax(0, 1.04fr) 11rem minmax(14rem, 0.76fr);
  background:
    linear-gradient(90deg, rgba(184, 58, 50, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(14, 26, 35, 0.96), rgba(3, 8, 13, 0.9));
}

.forecast-line small {
  color: rgba(255, 233, 184, 0.76);
  font-family: var(--sign);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.35;
  text-transform: uppercase;
}

.logbook {
  position: relative;
}

.logbook::before {
  content: "";
  position: absolute;
  left: 2.45rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 233, 184, 0.42), transparent);
}

.log-entry time {
  font-variant-numeric: tabular-nums;
}

.site-footer {
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(184, 58, 50, 0.16), transparent 24%),
    rgba(5, 10, 15, 0.84);
}

.guide-main {
  width: min(100% - 2rem, 64rem);
}

.guide-article {
  border-radius: 4px;
  padding: 2rem 2.2rem 2.2rem;
  background:
    linear-gradient(90deg, rgba(184, 58, 50, 0.13), transparent 22%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 1.2rem),
    linear-gradient(180deg, rgba(14, 26, 35, 0.98), rgba(3, 8, 13, 0.94));
}

.guide-article::after {
  content: "MANUAL 33";
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: rgba(255, 233, 184, 0.24);
  font-family: var(--sign);
  font-size: 0.8rem;
  font-weight: 900;
}

.guide-title {
  max-width: 13ch;
  text-wrap: balance;
}

.guide-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1.2rem 0 0.4rem;
}

.guide-ledger span {
  padding: 0.7rem;
  border: 1px solid rgba(255, 233, 184, 0.22);
  border-left: 0.25rem solid var(--hull);
  background: rgba(3, 7, 11, 0.5);
  color: #dce5e2;
  font-family: var(--sign);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.guide-article h2 {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 233, 184, 0.24);
}

.guide-page .lighthouse-figure {
  width: 24rem;
  max-width: 31%;
  opacity: 0.58;
}

@keyframes ringBreathe {
  0%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.985);
  }
  50% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.015);
  }
}

@media (min-width: 78rem) {
  .hero-title {
    font-size: 10.8rem;
  }

  h2 {
    font-size: 4.1rem;
  }
}

@media (max-width: 62rem) {
  .site-header::after,
  .hero::before {
    display: none;
  }

  .hero {
    align-items: start;
    gap: 1rem;
  }

  .hero-transmission {
    grid-template-columns: 1fr;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card:nth-child(2),
  .service-card:nth-child(3) {
    margin-top: 0;
  }

  .instrument-deck {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  .order-strip {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1fr);
  }

  .order-strip button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .forecast-line {
    grid-template-columns: 1fr;
  }

  .lighthouse-figure {
    width: 18rem;
    max-width: 44%;
  }
}

@media (max-width: 48rem) {
  .brand-code {
    display: none;
  }

  .site-header {
    top: max(0.5rem, env(safe-area-inset-top));
  }
}

@media (max-width: 40rem) {
  section[id],
  h2[id] {
    scroll-margin-top: 10rem;
  }

  .section-slab {
    padding-top: 4.6rem;
    padding-bottom: 4.6rem;
  }

  .hero {
    padding-top: 9.6rem;
  }

  .hero-title {
    font-size: 4.35rem;
  }

  .hero-dek {
    padding-left: 0.75rem;
  }

  .hero-ticket {
    margin-top: 0.8rem;
    padding: 1rem;
  }

  .flash-register {
    height: 1.9rem;
  }

  .hero-transmission {
    margin-top: 1rem;
  }

  .instrument-deck {
    grid-template-columns: 1fr;
  }

  .period-dial {
    width: 8.8rem;
    justify-self: center;
  }

  .paper-tape {
    min-height: auto;
  }

  .order-strip {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    min-height: 0;
  }

  .order-strip::after {
    right: 0.7rem;
    top: 0.82rem;
    transform: rotate(-7deg) scale(1.1);
  }

  .order-strip output {
    font-size: 1.46rem;
  }

  .order-strip button {
    width: 100%;
  }

  .control-bank button {
    flex-basis: calc(50% - 0.45rem);
  }

  .guide-ledger {
    grid-template-columns: 1fr;
  }

  .guide-article {
    padding: 1.25rem 1rem 1.25rem 1.35rem;
  }

  .guide-article::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .range-rings,
  .order-flare,
  .storm-scene::after,
  .rain-slant,
  .order-strip::before,
  .order-strip::after,
  .paper-tape,
  .period-dial {
    animation: none !important;
  }

  .beam-card,
  .beam-card::before,
  .station-nav a,
  .control-bank button,
  .preset-row button,
  .order-strip button {
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 62rem) {
  .hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .station-nav {
    display: grid;
    grid-template-columns: 1fr 0.78fr 1.18fr 0.7fr 0.92fr;
    gap: 0.25rem;
    overflow: visible;
  }

  .station-nav a {
    min-width: 0;
    padding: 0 0.18rem;
    font-size: 0.66rem;
  }

  .guide-page .station-nav {
    grid-template-columns: 0.72fr 1.18fr 0.9fr 1.16fr;
  }

  .editor-status {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .editor-status output {
    overflow-wrap: anywhere;
  }

  .order-strip {
    overflow: hidden;
  }

  .order-strip span,
  .order-strip output {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .order-strip span {
    font-size: 0.68rem;
  }

  .control-bank,
  .preset-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-bank button,
  .preset-row button {
    width: 100%;
    min-width: 0;
    padding-right: 0.35rem;
    padding-left: 0.35rem;
    font-size: 0.72rem;
  }
}