/* =========================================================
   monopole.bar — A Singular Point of Light
   Navy-metallic palette, HUD-overlay observatory layout
   ========================================================= */

:root {
    /* Palette (per DESIGN.md) */
    --void:           #0A0E1C;
    --field:          #111728;
    --void-hud:       rgba(10, 14, 28, 0.85);
    --void-bar:       rgba(10, 14, 28, 0.92);
    --border:         #3A4A6B;
    --border-soft:    #2A3A5B;
    --border-deep:    #1E2A45;
    --bg-deep:        #1A2440;
    --text-primary:   #D4D8E0;
    --text-secondary: #8A94A6;
    --text-body:      #C8CCD4;
    --accent:         #C9A96E;
    --accent-hover:   #E8D5A3;
    --star-bright:    #E8EDF5;
    --link:           #4A7BB5;
    --nebula:         #2E2247;

    /* Typography */
    --font-condensed: "Barlow Condensed", "Inter", system-ui, sans-serif;
    --font-serif:     "Cormorant Garamond", "Cormorant", Georgia, serif;
    --font-mono:      "Space Mono", "Space", "Inter", monospace;

    /* Module clip-path */
    --notch: 8px;
    --module-clip: polygon(
        var(--notch) 0,
        calc(100% - var(--notch)) 0,
        100% var(--notch),
        100% calc(100% - var(--notch)),
        calc(100% - var(--notch)) 100%,
        var(--notch) 100%,
        0 calc(100% - var(--notch)),
        0 var(--notch)
    );
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--void);
    color: var(--text-primary);
    font-family: var(--font-condensed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 60% 40%, rgba(46, 34, 71, 0.18) 0%, rgba(10, 14, 28, 0) 70%),
        var(--void);
}

/* ---------------------------------------------------------
   Star field canvas — fixed full viewport background
   --------------------------------------------------------- */
#starfield {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Nebula drift gradient — subtle warmth that breathes */
.nebula-drift {
    position: fixed;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 60% 40%, rgba(46, 34, 71, 0.22) 0%, rgba(10, 14, 28, 0) 60%),
        radial-gradient(ellipse 40% 35% at 40% 60%, rgba(74, 123, 181, 0.06) 0%, rgba(10, 14, 28, 0) 70%);
    animation: nebula-drift 30s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes nebula-drift {
    0%   { transform: translate(0%, 0%); }
    50%  { transform: translate(-4%, 4%); }
    100% { transform: translate(0%, 0%); }
}

/* Compass rose — slow rotating cross-hair behind everything */
.compass-rose {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(90vmin, 1100px);
    height: min(90vmin, 1100px);
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0.6;
}

.compass-rose svg {
    width: 100%;
    height: 100%;
    display: block;
}

.compass-rose .compass-group {
    transform-origin: 0 0;
    animation: rotate 120s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Magnetic field arcs */
.field-arcs {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
    opacity: 0.7;
}

/* Constellation overlay — drawn between starfield and modules */
.constellation-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4;
    pointer-events: none;
}

.constellation-overlay line,
.constellation-overlay path {
    stroke: var(--border-soft);
    stroke-width: 0.7;
    fill: none;
    opacity: 0.85;
}

.constellation-overlay path.draw {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.constellation-overlay path.draw.is-drawn {
    stroke-dashoffset: 0;
}

.constellation-overlay circle.rivet {
    fill: var(--accent);
    opacity: 0;
    transition: opacity 1200ms ease-out 600ms;
}

.constellation-overlay circle.rivet.is-shown {
    opacity: 0.9;
}

/* ---------------------------------------------------------
   Status Bars — top + bottom
   --------------------------------------------------------- */
.status-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--void-bar);
    border-color: var(--border);
    z-index: 60;
    display: flex;
    align-items: stretch;
    font-family: var(--font-condensed);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.status-bar--top {
    top: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 0 40px rgba(26, 42, 78, 0.5);
}

.status-bar--bottom {
    bottom: 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 0 40px rgba(26, 42, 78, 0.5);
    flex-wrap: wrap;
}

.sb-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    font-size: 12px;
    border-right: 1px solid var(--border-deep);
    white-space: nowrap;
}

.status-bar--bottom .sb-cell {
    border-right: 1px solid var(--border-deep);
    border-left: 1px solid var(--border-deep);
}

.sb-cell:last-child {
    border-right: none;
}

.sb-cell--brand {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
}

.sb-glyph {
    color: var(--accent);
    font-size: 14px;
    line-height: 1;
}

.sb-name {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.22em;
}

.sb-cell--center {
    flex: 1;
    justify-content: center;
}

.sb-label {
    color: var(--text-secondary);
    font-size: 10px;
    letter-spacing: 0.18em;
}

.sb-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent); }
    50%      { opacity: 0.5; box-shadow: 0 0 14px var(--accent); }
}

.sb-status-text {
    color: var(--text-primary);
    font-size: 11px;
}

.sb-cell--clock,
.sb-cell--mag {
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.sb-clock,
.sb-coord {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
}

/* Bottom waypoints */
.sb-waypoints {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    gap: 4px;
}

.waypoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: color 0.4s ease, transform 0.4s ease;
    position: relative;
}

.waypoint::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.5s ease;
}

.waypoint:hover,
.waypoint.is-active {
    color: var(--text-primary);
}

.waypoint:hover::before,
.waypoint.is-active::before {
    width: 60%;
}

.wp-num {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
}

.waypoint.is-active .wp-num,
.waypoint:hover .wp-num {
    color: var(--accent);
}

.wp-coord {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------
   Stations & Modules
   --------------------------------------------------------- */
.stations {
    position: relative;
    z-index: 20;
    width: 100%;
}

.station {
    position: relative;
    height: 100vh;
    min-height: 720px;
    width: 100%;
    overflow: hidden;
}

/* Module base */
.module {
    position: absolute;
    background: var(--void-hud);
    border: 1px solid var(--border);
    color: var(--text-primary);
    clip-path: var(--module-clip);
    box-shadow: 0 0 40px rgba(26, 42, 78, 0.6);
    padding: 28px 32px;
    opacity: 0;
    transform: translate(0, 0);
    transition:
        opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.station.is-active .module {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* Power-on stagger via CSS variable delay */
.module { transition-delay: var(--enter-delay, 0ms); }

/* Module corner notches accent */
.module-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--accent);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
    opacity: 0.85;
}

.module-corner--tl { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.module-corner--tr { top: 4px; right: 4px; border-top-width: 1px; border-right-width: 1px; }
.module-corner--bl { bottom: 4px; left: 4px; border-bottom-width: 1px; border-left-width: 1px; }
.module-corner--br { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }

/* Pulse stars */
.pulse-star {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px rgba(201, 169, 110, 0.6);
    z-index: 4;
    pointer-events: none;
}

.pulse-star::before,
.pulse-star::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(201, 169, 110, 0.4);
    animation: pulse-attention 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulse-star::after {
    animation-delay: 1.5s;
}

@keyframes pulse-attention {
    0%   { width: 4px;  height: 4px;  opacity: 0.5; }
    70%  { width: 24px; height: 24px; opacity: 0; }
    100% { width: 24px; height: 24px; opacity: 0; }
}

.pulse-star--tl { top: -4px; left: -4px; }
.pulse-star--tr { top: -4px; right: -4px; }
.pulse-star--bl { bottom: -4px; left: -4px; }
.pulse-star--br { bottom: -4px; right: -4px; }

/* ---------------------------------------------------------
   Module type: Primary Display Module (PDM)
   --------------------------------------------------------- */
.module--pdm {
    width: min(680px, 56vw);
    border-top: 1px solid var(--accent);
}

.module--pdm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 30%,
        var(--accent) 70%,
        transparent 100%);
    opacity: 0.7;
}

.module-content {
    position: relative;
    padding: 12px 0 6px 0;
}

.module-content--center {
    text-align: center;
}

.module-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-deep);
}

.module-content--center .module-eyebrow {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
}

.me-glyph {
    color: var(--accent);
    font-size: 12px;
}

.me-text {
    color: var(--text-secondary);
}

.display-title {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: clamp(56px, 8vw, 96px);
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--text-primary);
    text-shadow: 0 0 32px rgba(201, 169, 110, 0.18);
    margin-bottom: 18px;
}

.display-title--small {
    font-size: clamp(34px, 4.6vw, 56px);
    letter-spacing: 0.32em;
    margin-bottom: 22px;
}

.display-subtitle {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 22px;
    color: var(--text-body);
    line-height: 1.6;
    letter-spacing: 0.01em;
    margin-bottom: 24px;
}

.accent-singular {
    color: var(--link);
    font-style: italic;
    border-bottom: 1px solid var(--link);
    padding-bottom: 1px;
}

.display-meta {
    font-family: var(--font-condensed);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 18px;
}

.module-title {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 22px;
    line-height: 1.15;
}

.body-prose {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: var(--text-body);
    margin-bottom: 18px;
}

.body-prose--small {
    font-size: 16.5px;
    line-height: 1.65;
}

.body-prose--quote {
    font-family: var(--font-serif);
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-primary);
    border-left: 1px solid var(--accent);
    padding-left: 18px;
    margin: 26px 0 8px 0;
}

/* Dashed rule (Morse-like) */
.dashed-rule {
    height: 1px;
    width: 100%;
    margin: 22px 0;
    background-image: repeating-linear-gradient(90deg,
        var(--border) 0 14px,
        transparent 14px 22px,
        var(--border) 22px 30px,
        transparent 30px 38px);
    opacity: 0.7;
}

/* ---------------------------------------------------------
   Module type: Peripheral Readout Module (PRM)
   --------------------------------------------------------- */
.module--prm {
    width: 200px;
    padding: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: prm-pulse 6s ease-in-out infinite;
}

@keyframes prm-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(26, 42, 78, 0.6); }
    50%      { box-shadow: 0 0 50px rgba(201, 169, 110, 0.18), 0 0 40px rgba(26, 42, 78, 0.6); }
}

.prm-label {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-deep);
    margin-bottom: 4px;
}

.prm-value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.prm-value--lg {
    font-size: 22px;
    font-family: var(--font-condensed);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-primary);
    margin: 4px 0 2px 0;
}

.prm-meta {
    font-family: var(--font-condensed);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Log list inside log PRM */
.log-list {
    list-style: none;
    margin: 4px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.log-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.log-date {
    color: var(--text-secondary);
}

.log-name {
    color: var(--accent);
    font-weight: 400;
}

/* ---------------------------------------------------------
   Module type: Triad (Station 03 facets)
   --------------------------------------------------------- */
.module--triad {
    width: min(360px, 30vw);
    min-height: 290px;
    padding: 24px 26px;
}

.triad-title {
    font-family: var(--font-condensed);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.triad-coord {
    display: block;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-deep);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------
   Coordinate block (Station 05)
   --------------------------------------------------------- */
.coordinate-block {
    margin: 28px auto;
    max-width: 480px;
    padding: 18px 22px;
    border: 1px solid var(--border-deep);
    background: rgba(17, 23, 40, 0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coord-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.05em;
}

.coord-key {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10.5px;
    font-family: var(--font-condensed);
    font-weight: 500;
}

.coord-val {
    color: var(--accent);
}

/* ---------------------------------------------------------
   Per-station module placement
   --------------------------------------------------------- */

/* Station 01 - First Light */
#station-01 .module--first-light {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(0, 30px);
    --enter-delay: 320ms;
}

#station-01.is-active .module--first-light {
    transform: translate(-50%, -50%) !important;
}

#station-01 .module--prm-coords {
    top: 18%;
    left: 5%;
    --enter-delay: 80ms;
    transform: translateX(-30px);
}

#station-01 .module--prm-mag {
    bottom: 18%;
    right: 5%;
    --enter-delay: 200ms;
    transform: translateX(30px);
}

/* Station 02 - Observation Deck */
#station-02 .module--log {
    top: 50%;
    left: 5%;
    transform: translateY(-50%) translateX(-30px);
    --enter-delay: 80ms;
    width: 230px;
}

#station-02.is-active .module--log {
    transform: translateY(-50%) !important;
}

#station-02 .module--observation {
    top: 50%;
    right: 6%;
    transform: translateY(-50%) translateX(30px);
    --enter-delay: 240ms;
    width: min(640px, 52vw);
}

#station-02.is-active .module--observation {
    transform: translateY(-50%) !important;
}

/* Station 03 - Instrument Panel (triangular) */
#station-03 .module--triad-1 {
    top: 14%;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    --enter-delay: 100ms;
}

#station-03.is-active .module--triad-1 {
    transform: translateX(-50%) !important;
}

#station-03 .module--triad-2 {
    bottom: 14%;
    left: 8%;
    transform: translateX(-30px);
    --enter-delay: 220ms;
}

#station-03 .module--triad-3 {
    bottom: 14%;
    right: 8%;
    transform: translateX(30px);
    --enter-delay: 340ms;
}

#station-03 .module--prm-side-a {
    top: 15%;
    left: 4%;
    --enter-delay: 40ms;
    transform: translateX(-30px);
    width: 160px;
}

#station-03 .module--prm-side-b {
    top: 15%;
    right: 4%;
    --enter-delay: 40ms;
    transform: translateX(30px);
    width: 160px;
}

/* Station 04 - Deep Field */
#station-04 .module--deepfield-meta {
    top: 12%;
    left: 6%;
    --enter-delay: 60ms;
    transform: translateY(-30px);
    width: 240px;
}

#station-04.is-active .module--deepfield-meta {
    transform: translate(0, 0) !important;
}

#station-04 .module--deep {
    bottom: 12%;
    right: 6%;
    --enter-delay: 240ms;
    transform: translate(30px, 30px);
    width: min(660px, 55vw);
}

#station-04.is-active .module--deep {
    transform: translate(0, 0) !important;
}

/* Station 05 - Last Light */
#station-05 .module--last-light {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(0, 30px);
    --enter-delay: 200ms;
    width: min(600px, 60vw);
}

#station-05.is-active .module--last-light {
    transform: translate(-50%, -50%) !important;
}

/* ---------------------------------------------------------
   Coordinate-shift on scroll (subtle drift)
   The JS sets --shift-x / --shift-y per station based on
   scroll progress; modules apply it via composed transform.
   --------------------------------------------------------- */
.station {
    --shift-x: 0px;
    --shift-y: 0px;
}

.station.is-active .module--pdm {
    transform: translate(var(--pdm-tx, 0), var(--pdm-ty, 0)) !important;
}

/* override the centered first/last light inside .is-active using more specific rules below */
#station-01.is-active .module--first-light {
    transform: translate(-50%, calc(-50% + var(--shift-y, 0px))) translateX(calc(var(--shift-x, 0px) * 0.4)) !important;
}

#station-05.is-active .module--last-light {
    transform: translate(-50%, calc(-50% + var(--shift-y, 0px))) translateX(calc(var(--shift-x, 0px) * -0.4)) !important;
}

#station-02.is-active .module--observation {
    transform: translateY(calc(-50% + var(--shift-y, 0px) * 0.5)) translateX(calc(var(--shift-x, 0px) * -0.6)) !important;
}

#station-02.is-active .module--log {
    transform: translateY(calc(-50% + var(--shift-y, 0px) * -0.3)) translateX(calc(var(--shift-x, 0px) * 0.7)) !important;
}

#station-03.is-active .module--triad-1 {
    transform: translateX(calc(-50% + var(--shift-x, 0px) * 0.4)) translateY(calc(var(--shift-y, 0px) * -0.4)) !important;
}

#station-03.is-active .module--triad-2 {
    transform: translateX(calc(var(--shift-x, 0px) * -0.6)) translateY(calc(var(--shift-y, 0px) * 0.3)) !important;
}

#station-03.is-active .module--triad-3 {
    transform: translateX(calc(var(--shift-x, 0px) * 0.6)) translateY(calc(var(--shift-y, 0px) * 0.3)) !important;
}

#station-04.is-active .module--deep {
    transform: translate(calc(var(--shift-x, 0px) * -0.6), calc(var(--shift-y, 0px) * 0.4)) !important;
}

#station-04.is-active .module--deepfield-meta {
    transform: translate(calc(var(--shift-x, 0px) * 0.7), calc(var(--shift-y, 0px) * -0.4)) !important;
}

/* PRMs general drift */
#station-01.is-active .module--prm-coords {
    transform: translate(calc(var(--shift-x, 0px) * 0.5), calc(var(--shift-y, 0px) * -0.2)) !important;
}

#station-01.is-active .module--prm-mag {
    transform: translate(calc(var(--shift-x, 0px) * -0.5), calc(var(--shift-y, 0px) * 0.2)) !important;
}

#station-03.is-active .module--prm-side-a {
    transform: translate(calc(var(--shift-x, 0px) * 0.6), calc(var(--shift-y, 0px) * -0.3)) !important;
}

#station-03.is-active .module--prm-side-b {
    transform: translate(calc(var(--shift-x, 0px) * -0.6), calc(var(--shift-y, 0px) * -0.3)) !important;
}

/* ---------------------------------------------------------
   Responsive: collapse to vertical flow on mobile
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .compass-rose { opacity: 0.35; }
    .field-arcs { opacity: 0.35; }

    .status-bar { height: 44px; }
    .status-bar--top .sb-cell--center { display: none; }
    .status-bar--bottom { padding: 6px 0; height: auto; min-height: 56px; }
    .sb-waypoints { gap: 0; padding: 0; }
    .waypoint { padding: 4px 8px; }
    .wp-coord { display: none; }
    .sb-cell--mag, .sb-cell--brand .sb-name { font-size: 11px; letter-spacing: 0.14em; }
    .status-bar--bottom .sb-cell:not(.sb-waypoints):not(.sb-cell--mag):not(.sb-cell--brand) { display: none; }

    .station {
        height: auto;
        min-height: auto;
        padding: 70px 16px 70px;
    }

    .module {
        position: relative !important;
        width: 100% !important;
        max-width: 100%;
        margin: 24px auto;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
    }

    .module--prm-coords,
    .module--prm-mag,
    .module--prm-side-a,
    .module--prm-side-b,
    .module--deepfield-meta {
        display: none;
    }

    #station-01.is-active .module--first-light,
    #station-05.is-active .module--last-light,
    #station-02.is-active .module--observation,
    #station-02.is-active .module--log,
    #station-03.is-active .module--triad-1,
    #station-03.is-active .module--triad-2,
    #station-03.is-active .module--triad-3,
    #station-04.is-active .module--deep,
    #station-04.is-active .module--deepfield-meta {
        transform: none !important;
    }

    .display-title { font-size: 52px; }
    .display-title--small { font-size: 32px; }
    .module-title { font-size: 26px; }
    .body-prose { font-size: 17px; }
    .module--triad { min-height: auto; }
}

@media (max-width: 480px) {
    .sb-cell--brand { padding: 0 12px; }
    .sb-name { font-size: 10px; letter-spacing: 0.18em; }
    .status-bar--bottom .sb-cell--mag { padding: 0 10px; font-size: 10px; }
}