/* ============================================================
   THE TREQ — Horizon home
   Horizon terrain · waypoint releases · overlook turntable
   Shared shell tokens live in horizon-shell.css for subpages;
   this file stays self-contained for the production index.
   ============================================================ */

:root {
    --ochre:        #d4a55a;
    --ochre-light:  #e8c078;
    --rust:         #c45c3e;
    --deep:         #0d1a12;
    --forest:       #1a2f23;
    --rain:         #3d5c52;
    --fog:          #8fa5a0;
    --mist:         #c4d4cf;
    --off-white:    #f5f2eb;
    --violet:       #6b5a8e;

    --font-display: 'Climate Crisis', cursive;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Cascadia Mono', monospace;

    --hud-pad: clamp(1rem, 3vw, 2.25rem);
    --panel-pad: clamp(4rem, 10vh, 8rem);
}

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

html {
    scroll-behavior: smooth;
    /* clip (not hidden): hidden boxes are still programmatically scrollable
       on Android — Samsung pans them sideways. clip forbids it outright. */
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--mist);
    background: var(--deep);
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
    min-height: 100vh;
    position: relative;
}

::selection { background: rgba(212, 165, 90, 0.35); color: var(--off-white); }

:focus-visible {
    outline: 2px solid var(--ochre-light);
    outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   SKY + TERRAIN CANVAS + GRAIN
   The sky gradient shifts with the visitor's local time of day
   (body[data-light]) — the page never looks the same twice.
   ============================================================ */

.sky {
    position: fixed;
    inset: 0;
    z-index: -3;
    transition: background 3s ease;
    background: linear-gradient(180deg, #131f2b 0%, #23313a 42%, #4a4438 58%, #0d1a12 100%);
}
body[data-light="dawn"]  .sky,
body[data-light="dawn"]  { background: linear-gradient(180deg, #16222e 0%, #33414a 40%, #b0764a 58%, #0d1a12 100%); }
body[data-light="day"]   .sky { background: linear-gradient(180deg, #22333c 0%, #3d5c52 45%, #8fa5a0 60%, #0d1a12 100%); }
body[data-light="dusk"]  .sky { background: linear-gradient(180deg, #131f2b 0%, #2d3339 40%, #a06a3d 58%, #0d1a12 100%); }
body[data-light="night"] .sky { background: linear-gradient(180deg, #05090c 0%, #0b141a 45%, #1c2a26 60%, #060d08 100%); }

#horizon-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    z-index: -2;
    display: block;
}

/* film grain — static grit only. Any animation (even background-position)
   combined with off-canvas UI has caused horizontal scroll thrash on Samsung. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.045;
    contain: strict;
    clip-path: inset(0);
    background-image: repeating-conic-gradient(rgba(255,255,255,0.6) 0% 0.00012%, transparent 0.00012% 0.00024%);
    background-size: 120px 120px;
}

/* ============================================================
   HUD — logo, nav, trip meter, light meter
   ============================================================ */

.hud { position: fixed; z-index: 50; }

.hud-top {
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(var(--hud-pad) * 0.75) max(var(--hud-pad), env(safe-area-inset-right, 0px)) calc(var(--hud-pad) * 0.75) max(var(--hud-pad), env(safe-area-inset-left, 0px));
    /* deep-forest scrim: near-solid behind the logo/nav... */
    background: linear-gradient(180deg,
        rgba(13, 26, 18, 0.97) 0%,
        rgba(13, 26, 18, 0.9) 70%,
        rgba(13, 26, 18, 0.82) 100%);
    z-index: 70;
    box-sizing: border-box;
    max-width: 100%;
}
/* ...with a soft fade tail below the bar (pointer-events off so it
   never blocks clicks on content underneath) */
.hud-top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 3.5rem;
    background: linear-gradient(180deg, rgba(13, 26, 18, 0.82) 0%, rgba(13, 26, 18, 0) 100%);
    pointer-events: none;
}

/* The existing Treq logo — Climate Crisis outline wordmark */
.logo {
    font-family: var(--font-display);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    line-height: 0.9;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ochre);
    text-shadow: 0 0 30px rgba(212,165,90,0.2), 0 0 60px rgba(212,165,90,0.1);
    animation: logo-glow 5s ease-in-out infinite;
    position: relative;
    z-index: 72;
    flex-shrink: 0;
}
@keyframes logo-glow {
    0%, 100% { text-shadow: 0 0 30px rgba(212,165,90,0.2), 0 0 60px rgba(212,165,90,0.1); -webkit-text-stroke-color: var(--ochre); }
    50%      { text-shadow: 0 0 50px rgba(212,165,90,0.4), 0 0 100px rgba(212,165,90,0.2); -webkit-text-stroke-color: var(--ochre-light); }
}

/* Desktop: single-row labeled links. Mobile drawer: see ≤960px. */
.hud-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.65rem, 1.8vw, 1.6rem);
}
.hud-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(196, 212, 207, 0.85);
    text-shadow: 0 1px 6px rgba(6, 13, 8, 0.9);
    padding: 0.45rem 0.15rem;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
    min-height: 44px;
    white-space: nowrap;
}
.hud-nav a .material-symbols-outlined {
    font-size: 1.35rem;
    color: var(--ochre);
    filter: drop-shadow(0 1px 4px rgba(6, 13, 8, 0.9));
    transition: color 0.25s ease, transform 0.25s ease;
}
.hud-nav a:hover,
.hud-nav a.is-active { color: var(--ochre-light); border-color: rgba(212,165,90,0.5); }
.hud-nav a:hover .material-symbols-outlined,
.hud-nav a.is-active .material-symbols-outlined { color: var(--ochre-light); transform: translateY(-2px); }

/* Mobile menu toggle — hidden on desktop */
.nav-toggle {
    display: none;
    position: relative;
    z-index: 72;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(212, 165, 90, 0.35);
    background: rgba(13, 26, 18, 0.65);
    color: var(--ochre-light);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle .material-symbols-outlined { font-size: 1.75rem; line-height: 1; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }
.nav-toggle:hover { border-color: rgba(212, 165, 90, 0.7); background: rgba(13, 26, 18, 0.85); }

.nav-backdrop {
    display: none;
}

/* trip meter — bottom left; elevation climbs as you scroll */
.trip-meter {
    left: var(--hud-pad);
    bottom: var(--hud-pad);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: rgba(196, 212, 207, 0.8);
    background: rgba(13, 26, 18, 0.55);
    border: 1px solid rgba(212, 165, 90, 0.25);
    padding: 0.8rem 1rem 0.9rem;
    backdrop-filter: blur(6px);
    min-width: 220px;
}
.tm-row { display: flex; justify-content: space-between; gap: 1.25rem; padding: 0.14rem 0; }
.tm-key { color: rgba(212, 165, 90, 0.85); }
.tm-val { color: var(--mist); text-align: right; }
.tm-track {
    margin-top: 0.55rem;
    height: 3px;
    background: rgba(196, 212, 207, 0.15);
    overflow: hidden;
}
.tm-progress {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ochre), var(--ochre-light));
    transition: width 0.15s linear;
}

/* light meter — bottom right; names the current light */
.light-meter {
    right: var(--hud-pad);
    bottom: var(--hud-pad);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(196, 212, 207, 0.7);
    background: rgba(13, 26, 18, 0.55);
    border: 1px solid rgba(212, 165, 90, 0.25);
    padding: 0.6rem 1rem;
    backdrop-filter: blur(6px);
}
.lm-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ochre);
    box-shadow: 0 0 12px rgba(212,165,90,0.8);
    animation: lm-breathe 6s ease-in-out infinite;
}
@keyframes lm-breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.35); opacity: 1; }
}

/* ============================================================
   PANELS & TYPE
   ============================================================ */

.panel {
    position: relative;
    padding: var(--panel-pad) clamp(1.25rem, 6vw, 5rem);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

.kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(212, 165, 90, 0.9);
    text-shadow: 0 1px 6px rgba(6, 13, 8, 0.95), 0 0 18px rgba(6, 13, 8, 0.8);
    margin: 0 0 1rem;
    padding: 0;
    display: inline-block;
    margin-right: -0.28em;
    max-width: 100%;
}

.section-head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.section-head h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(2rem, 6vw, 3.6rem);
    line-height: 1.55;
    letter-spacing: 0.06em;
    word-spacing: 0.45em;
    color: rgba(13, 26, 18, 0.6);
    -webkit-text-stroke: 1.5px var(--ochre);
    text-shadow: 0 0 25px rgba(212,165,90,0.25), 0 4px 30px rgba(6, 13, 8, 0.8);
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-left: 0.06em;
    margin-bottom: 1rem;
}
.section-sub {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(196, 212, 207, 0.75);
    font-weight: 300;
    line-height: 1.65;
}

/* scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============================================================
   BASECAMP (hero)
   ============================================================ */

#basecamp {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    /* clear the fixed opaque HUD so the kicker never slides under it */
    padding-top: clamp(6.5rem, 14vh, 9rem);
    padding-bottom: clamp(3rem, 8vh, 5rem);
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
}
.basecamp-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(780px, 100%);
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
.basecamp-inner::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: min(118%, 52rem);
    height: min(118%, 28rem);
    background: radial-gradient(
        ellipse 70% 55% at 50% 48%,
        rgba(13, 26, 18, 0.78) 0%,
        rgba(13, 26, 18, 0.52) 42%,
        rgba(13, 26, 18, 0.18) 72%,
        transparent 100%
    );
    pointer-events: none;
}

.wordmark {
    font-family: var(--font-display);
    text-transform: uppercase;
    /* Cap hard: Climate Crisis is extremely wide; 8.5vw was overflowing right on desktops */
    font-size: clamp(1.45rem, 5.2vw, 4.35rem);
    line-height: 1;
    color: rgba(13, 26, 18, 0.55);
    -webkit-text-stroke: 2px var(--ochre);
    text-shadow: 0 0 30px rgba(212,165,90,0.25), 0 0 60px rgba(212,165,90,0.12), 0 8px 40px rgba(6, 13, 8, 0.85);
    animation: logo-glow 5s ease-in-out infinite;
    margin: 0.5rem 0 1.25rem;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    /* Ink overflows the advance box toward the Q — nudge left on large type */
    translate: -0.12em 0;
}

.tagline {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.6vw, 1rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--off-white);
    margin: 0 0 1.75rem;
    padding: 0;
    display: inline-block;
    margin-right: -0.35em;
    max-width: 100%;
}

.lede {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(196, 212, 207, 0.85);
    max-width: min(560px, 100%);
    width: 100%;
    margin: 0 auto 2.25rem;
    padding: 0;
    text-align: center;
}

.motto {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.55rem, 2vw, 1.4rem);
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 2vw, 1.35rem);
    letter-spacing: 0.04em;
    word-spacing: normal;
    text-transform: uppercase;
    line-height: 1;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
.motto i {
    width: 5px; height: 5px;
    background: var(--ochre);
    transform: rotate(45deg);
    opacity: 0.7;
    flex-shrink: 0;
}
/* same three-state story as the Ascent: outline → lit → become.
   Outlined words get a dark fill (not transparent) so the terrain
   mesh can never show through and swallow them. */
.motto span { padding-left: 0; }
.motto span:nth-of-type(1) {
    color: rgba(13, 26, 18, 0.8);
    -webkit-text-stroke: 1px rgba(212, 165, 90, 0.65);
    text-shadow: 0 2px 14px rgba(6, 13, 8, 0.9);
}
.motto span:nth-of-type(2) {
    color: rgba(13, 26, 18, 0.8);
    -webkit-text-stroke: 1px var(--ochre);
    text-shadow: 0 0 18px rgba(212, 165, 90, 0.3), 0 2px 14px rgba(6, 13, 8, 0.9);
}
.motto span:nth-of-type(3) {
    color: var(--ochre-light);
    text-shadow: 0 0 22px rgba(232, 192, 120, 0.5), 0 0 50px rgba(232, 192, 120, 0.2), 0 2px 14px rgba(6, 13, 8, 0.85);
}

/* the trailhead marker — this is the invitation to move, so it glows */
.scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.45rem;
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ochre-light);
    text-shadow: 0 0 18px rgba(232, 192, 120, 0.55), 0 2px 10px rgba(6, 13, 8, 0.9);
    animation: cue-breathe 2.6s ease-in-out infinite;
    transition: color 0.3s ease;
}
.scroll-cue:hover { transform: translateY(4px); }
.scroll-cue:hover .cue-text { color: var(--off-white); -webkit-text-fill-color: var(--off-white); }
/* compensation on the text span only — line/chevrons stay on true center.
   A band of light travels through the letters. */
.cue-text {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding-left: 0.4em;
    background: linear-gradient(100deg,
        var(--ochre) 0%, var(--ochre) 38%, #fff3d8 50%, var(--ochre) 62%, var(--ochre) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(6, 13, 8, 0.9));
    animation: cue-shimmer 3.2s linear infinite;
}
@keyframes cue-shimmer {
    from { background-position: 125% 0; }
    to   { background-position: -125% 0; }
}
@keyframes cue-breathe {
    0%, 100% { text-shadow: 0 0 18px rgba(232, 192, 120, 0.55), 0 2px 10px rgba(6, 13, 8, 0.9); }
    50%      { text-shadow: 0 0 32px rgba(232, 192, 120, 0.95), 0 2px 10px rgba(6, 13, 8, 0.9); }
}
/* trail dashes — the Route's dashed trail line starts right here,
   lighting up in sequence down toward the arrow */
.cue-trail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}
.cue-trail i {
    display: block;
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: var(--ochre);
    opacity: 0.28;
    animation: cue-dash 1.7s ease-in-out infinite;
}
.cue-trail i:nth-child(2) { animation-delay: 0.14s; }
.cue-trail i:nth-child(3) { animation-delay: 0.28s; }
.cue-trail i:nth-child(4) { animation-delay: 0.42s; }
@keyframes cue-dash {
    0%, 55%, 100% { opacity: 0.28; box-shadow: none; }
    22%           { opacity: 1; box-shadow: 0 0 12px rgba(232, 192, 120, 0.9); }
}
/* cascading double chevron with a sonar ping radiating from it */
.cue-chevrons {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.35rem;
    padding: 10px 0 16px;
}
.cue-chevrons i {
    /* one clean solid arrowhead — filled shape, not border tricks */
    display: block;
    width: 38px;
    height: 20px;
    background: linear-gradient(180deg, var(--ochre-light), var(--ochre));
    clip-path: polygon(0% 0%, 50% 55%, 100% 0%, 100% 45%, 50% 100%, 0% 45%);
    filter: drop-shadow(0 0 10px rgba(232, 192, 120, 0.7));
    /* the arrow dips as the last beat of the dash sequence above it */
    animation: cue-dip 1.7s ease-in-out infinite;
    animation-delay: 0.56s;
}
@keyframes cue-dip {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    22%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   THE ROUTE — trail line + waypoints
   ============================================================ */

.trail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 10vh, 7rem);
    padding: 2rem 0 3rem;
    overflow-x: clip;
}
/* the trail itself — a dashed line stitched down the middle */
.trail::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(180deg,
        rgba(212,165,90,0.55) 0 10px,
        transparent 10px 22px);
    transform: translateX(-50%);
}

.waypoint {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(5rem, 9vw, 7rem);
    align-items: center;
}
/* alternate sides like switchbacks */
.waypoint:nth-child(even) .wp-sleeve { order: 2; }
.waypoint:nth-child(even) .wp-info   { order: 1; text-align: right; }
.waypoint:nth-child(even) .wp-actions { justify-content: flex-end; }

.wp-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.wp-num {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--deep);
    border: 1px solid rgba(212,165,90,0.7);
    color: var(--ochre-light);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    box-shadow: 0 0 0 6px rgba(13,26,18,0.9), 0 0 24px rgba(212,165,90,0.25);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.waypoint.is-active .wp-num {
    border-color: var(--ochre-light);
    box-shadow: 0 0 0 6px rgba(13,26,18,0.9), 0 0 34px rgba(212,165,90,0.6);
}

/* ---------- album cover over vinyl (the signature motif) ---------- */

.wp-sleeve { display: flex; justify-content: center; }

.album-card {
    position: relative;
    width: min(340px, 100%);
    max-width: 100%;
    aspect-ratio: 1;
    margin-bottom: 22%;              /* room for the vinyl peeking below */
}
.album-card img {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    object-fit: cover;
    border: 1px solid rgba(212, 165, 90, 0.35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
/* sleeve-edge shading where the record exits */
.album-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 18%;
    z-index: 3;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    pointer-events: none;
}

.vinyl {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 24%);
    width: 94%;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: 1;
    background:
        /* dead wax around the label (label covers to 34% of radius) +
           thin smooth lead-in rim, like a real pressing */
        radial-gradient(circle closest-side at 50% 50%,
            #141414 0 43%, transparent 44% 93.5%, #0b0b0b 94% 97.5%, #1f1f1f 98% 100%),
        /* fine grooves */
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255,255,255,0.055) 0 1px,
            transparent 1px 3.5px),
        /* pressed-wax body — off-center light is fine here: this disc only
           turns briefly on hover, and the offset gives it depth at rest */
        radial-gradient(circle at 38% 32%,
            #262626 0%, #111 38%, #1c1c1c 55%, #0a0a0a 78%, #000 100%);
    border: 3px solid #2c2c2c;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.85),
        inset 0 0 26px rgba(0, 0, 0, 0.7),
        inset 0 0 2px rgba(255, 255, 255, 0.12);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* light streak across the wax */
.vinyl::before {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
        transparent 0deg, rgba(255,255,255,0.08) 18deg, transparent 45deg,
        transparent 180deg, rgba(255,255,255,0.05) 200deg, transparent 230deg);
    /* groove-band only — smooth rim and dead wax don't diffract
       (band 44–93.5% of the disc; this layer is inset 4%, hence /0.96) */
    -webkit-mask: radial-gradient(circle closest-side at 50% 50%,
        transparent 0 46%, #000 49% 92%, transparent 97%);
    mask: radial-gradient(circle closest-side at 50% 50%,
        transparent 0 46%, #000 49% 92%, transparent 97%);
    pointer-events: none;
}
.vinyl-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(245, 242, 235, 0.85);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.35), 0 0 10px rgba(0,0,0,0.5);
}
.vinyl-hole {
    width: 7%; height: 7%;
    min-width: 5px; min-height: 5px;
    background: #000;
    border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.25);
}
/* per-release label pressings */
.vinyl-teal   .vinyl-label { background: radial-gradient(circle at 42% 35%, #4b7a6e, #274a41 70%, #1a352f); }
.vinyl-ochre  .vinyl-label { background: radial-gradient(circle at 42% 35%, #e0b168, #a97b34 70%, #7c5a24); }
.vinyl-rust   .vinyl-label { background: radial-gradient(circle at 42% 35%, #d47450, #a04628 70%, #6f2f1a); }
.vinyl-violet .vinyl-label { background: radial-gradient(circle at 42% 35%, #8d7ab5, #574277 70%, #392b50); }

/* hover: sleeve lifts, record drops out and spins slow */
.waypoint:hover .album-card img {
    transform: translateY(-6px);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.65), 0 0 40px rgba(212, 165, 90, 0.12);
}
.waypoint:hover .vinyl {
    transform: translate(-50%, 34%) rotate(200deg);
}

/* ---------- waypoint text + actions ---------- */

.wp-kicker {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(212, 165, 90, 0.85);
    text-shadow: 0 1px 6px rgba(6, 13, 8, 0.95), 0 0 18px rgba(6, 13, 8, 0.8);
    margin-bottom: 0.8rem;
}
.wp-info h3 {
    /* hairline release title — thin Inter, wide tracking */
    font-family: var(--font-body);
    font-weight: 100;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    line-height: 1.25;
    letter-spacing: 0.14em;
    color: var(--off-white);
    text-shadow: 0 2px 8px rgba(6, 13, 8, 0.9), 0 8px 30px rgba(6, 13, 8, 0.7);
    margin-bottom: 0.9rem;
}
.wp-desc {
    font-weight: 300;
    line-height: 1.7;
    color: rgba(196, 212, 207, 0.8);
    max-width: 420px;
    margin-bottom: 1.4rem;
}
.waypoint:nth-child(even) .wp-desc { margin-left: auto; }
/* right-aligned text: pull the trailing letter-space past the edge
   so glyphs align flush with the column */
.waypoint:nth-child(even) .wp-kicker { margin-right: -0.24em; }
.waypoint:nth-child(even) .wp-info h3 { margin-right: -0.14em; }

.wp-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.btn {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    padding: 0.75rem 1.3rem;
    transition: all 0.3s ease;
}
.btn-solid {
    background: rgba(212, 165, 90, 0.14);
    border: 1px solid rgba(212, 165, 90, 0.6);
    color: var(--ochre-light);
}
.btn-solid:hover {
    background: rgba(212, 165, 90, 0.28);
    box-shadow: 0 0 24px rgba(212, 165, 90, 0.25);
}
.btn-ghost {
    background: transparent;
    border: 1px solid rgba(196, 212, 207, 0.25);
    color: rgba(196, 212, 207, 0.75);
}
.btn-ghost:hover { border-color: rgba(196, 212, 207, 0.6); color: var(--off-white); }

.wp-embed { margin-top: 1.4rem; }
.wp-embed iframe {
    width: 100%;
    height: 352px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}

/* ============================================================
   THE OVERLOOK — turntable player
   ============================================================ */

.turntable {
    display: grid;
    grid-template-columns: minmax(300px, 460px) 1fr;
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: start;
    background: rgba(13, 26, 18, 0.62);
    border: 1px solid rgba(212, 165, 90, 0.25);
    backdrop-filter: blur(10px);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.tt-deck { position: relative; }

.tt-platter {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.tt-vinyl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* dead wax around the label (label covers to 33% of radius) +
           thin smooth lead-in rim */
        radial-gradient(circle closest-side at 50% 50%,
            #131313 0 42%, transparent 43% 93.5%, #0a0a0a 94% 97%, #202020 97.5% 100%),
        repeating-radial-gradient(circle at 50% 50%,
            rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
        /* concentric body — this layer spins; off-center shading would orbit */
        radial-gradient(circle closest-side at 50% 50%,
            #1f1f1f 0%, #101010 40%, #1a1a1a 58%, #080808 80%, #000 100%);
    border: 4px solid #262626;
    box-shadow: 0 18px 50px rgba(0,0,0,0.8), inset 0 0 34px rgba(0,0,0,0.7);
}
.tt-sheen {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    background: conic-gradient(from 230deg,
        transparent 0deg, rgba(255,255,255,0.07) 16deg, transparent 40deg,
        transparent 190deg, rgba(255,255,255,0.045) 210deg, transparent 235deg);
    /* streaks are groove diffraction — mask them to the groove band only
       (band is 44–94% of the disc; this layer is inset 3%, hence /0.97) */
    -webkit-mask: radial-gradient(circle closest-side at 50% 50%,
        transparent 0 45%, #000 48% 93%, transparent 97%);
    mask: radial-gradient(circle closest-side at 50% 50%,
        transparent 0 45%, #000 48% 93%, transparent 97%);
    pointer-events: none;
}
.tt-label {
    /* centered via inset+margin so the spin animation's transform
       can't knock it off-center */
    position: absolute;
    inset: 0;
    margin: auto;
    width: 33%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 35%, #e0b168, #a97b34 68%, #6f5222);
    border: 2px solid rgba(245, 242, 235, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12%;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
}
.tt-label-brand {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(0.5rem, 1.4vw, 0.8rem);
    color: rgba(13, 26, 18, 0.9);
    letter-spacing: 0.02em;
}
.tt-label-side {
    font-family: var(--font-mono);
    font-size: clamp(0.4rem, 1vw, 0.55rem);
    letter-spacing: 0.3em;
    padding-left: 0.3em; /* trailing letter-space compensation */
    color: rgba(13, 26, 18, 0.65);
}
.tt-hole {
    width: 8%; aspect-ratio: 1;
    background: #000;
    border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.3);
}

/* the album cover rides on top of the record, slightly up-left,
   so the vinyl peeks out — the sleeve motif, now on the deck */
.tt-cover {
    position: absolute;
    top: -4%;
    left: -6%;
    /* platter is square — equal % width/height keeps the sleeve square */
    width: 62%;
    height: 62%;
    max-width: 62%;
    max-height: 62%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    z-index: 3;
    border: 1px solid rgba(212, 165, 90, 0.4);
    box-shadow: 14px 18px 44px rgba(0, 0, 0, 0.65);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.turntable.is-playing .tt-cover { transform: translate(-4%, -3%) rotate(-2deg); }

/* spin the record while playing — the sheen stays still: reflections
   belong to the light source, not the wax */
@keyframes tt-spin { to { transform: rotate(360deg); } }
.turntable.is-playing .tt-vinyl,
.turntable.is-playing .tt-label { animation: tt-spin 3.6s linear infinite; }

/* tonearm — pure CSS, drops onto the record when playing */
.tt-arm {
    position: absolute;
    top: 2%;
    right: -9%;
    width: 46%;
    height: 90%;
    /* at rest the arm hangs straight down the right side of the platter */
    transform: rotate(-17deg);
    transform-origin: 82% 8.5%;
    transition: transform 0.9s cubic-bezier(0.34, 1.2, 0.5, 1);
    z-index: 4;
    pointer-events: none;
}
.turntable.is-playing .tt-arm { transform: rotate(13deg); }
.tt-arm-pivot {
    position: absolute;
    top: 4%; right: 8%;
    width: 17%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #6a6a6a, #2c2c2c 70%);
    border: 2px solid #1a1a1a;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}
.tt-arm-tube {
    position: absolute;
    top: 10%; right: 14%;
    width: 4.5%;
    height: 74%;
    background: linear-gradient(90deg, #555, #999 45%, #444);
    transform: rotate(16deg);
    transform-origin: top center;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
/* cartridge head lives at the end of the tube, so it can never drift */
.tt-arm-tube::after {
    content: '';
    position: absolute;
    bottom: -1%;
    left: 50%;
    transform: translateX(-50%);
    width: 300%;
    height: 10%;
    background: linear-gradient(135deg, #d4a55a, #8c6a33);
    border-radius: 2px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

/* ---------- console ---------- */

.tt-console { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }

.tt-np-kicker {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(212, 165, 90, 0.85);
    margin-bottom: 0.5rem;
}
.tt-nowplaying h3 {
    /* hairline track title — thin Inter, wide tracking */
    font-family: var(--font-body);
    font-weight: 100;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    color: var(--off-white);
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-shadow: 0 2px 8px rgba(6, 13, 8, 0.9);
    margin-bottom: 0.4rem;
}
.tt-np-sub { font-weight: 300; color: rgba(196, 212, 207, 0.7); font-size: 0.9rem; }

.tt-ridge {
    width: 100%;
    height: 120px;
    display: block;
    border-bottom: 1px solid rgba(212, 165, 90, 0.3);
}

.tt-transport {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.tt-btn {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(212, 165, 90, 0.55);
    background: rgba(212, 165, 90, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}
.tt-btn:hover { background: rgba(212, 165, 90, 0.25); box-shadow: 0 0 20px rgba(212,165,90,0.25); }
.tt-play { width: 58px; height: 58px; }

/* icons drawn in CSS — no SVG needed */
.ico-play {
    display: block;
    width: 0; height: 0;
    border-left: 16px solid var(--ochre-light);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 4px;
}
.tt-play.is-playing .ico-play {
    width: 6px; height: 18px;
    margin-left: 0;
    border-top: 0; border-bottom: 0;
    border-left: 5px solid var(--ochre-light);
    border-right: 5px solid var(--ochre-light);
    background: transparent;
}
.tt-prev, .tt-next { display: flex; align-items: center; justify-content: center; gap: 1px; }
.tt-prev i, .tt-next i {
    display: inline-block;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.tt-next i { border-left: 9px solid var(--ochre-light); }
.tt-prev i { border-right: 9px solid var(--ochre-light); }

.tt-time {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 220px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(196, 212, 207, 0.7);
}
#tt-seek {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    height: 3px;
    background: rgba(196, 212, 207, 0.2);
    outline: none;
    cursor: pointer;
}
#tt-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--ochre-light);
    box-shadow: 0 0 12px rgba(212, 165, 90, 0.7);
    cursor: pointer;
}
#tt-seek::-moz-range-thumb {
    width: 13px; height: 13px;
    border: 0;
    border-radius: 50%;
    background: var(--ochre-light);
    box-shadow: 0 0 12px rgba(212, 165, 90, 0.7);
    cursor: pointer;
}

.tt-list { list-style: none; display: flex; flex-direction: column; }
.tt-list li button {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid rgba(196, 212, 207, 0.12);
    padding: 0.85rem 0.4rem;
    cursor: pointer;
    color: rgba(196, 212, 207, 0.85);
    font-family: var(--font-body);
    font-size: 0.92rem;
    transition: color 0.25s ease, background 0.25s ease;
}
.tt-list li:last-child button { border-bottom: 1px solid rgba(196, 212, 207, 0.12); }
.tt-list li button:hover { color: var(--off-white); background: rgba(212, 165, 90, 0.06); }
.tt-list li button .trk-no {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: rgba(212, 165, 90, 0.8);
    letter-spacing: 0.1em;
}
.tt-list li button .trk-sub {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(196, 212, 207, 0.45);
}
.tt-list li.is-current button { color: var(--ochre-light); }
.tt-list li.is-current button .trk-no { color: var(--ochre-light); }

.tt-note {
    font-size: 0.78rem;
    font-weight: 300;
    color: rgba(196, 212, 207, 0.5);
    line-height: 1.6;
}

/* Listening focus — center the turntable when .reveal.in-view.is-playing */
body.is-listening #overlook {
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(5.5rem, 12vh, 7.5rem);
    padding-bottom: clamp(2rem, 8vh, 4rem);
}

body.is-listening #overlook .turntable.reveal.in-view.is-playing,
body.is-listening #overlook .turntable.is-playing {
    scroll-margin-block: clamp(4rem, 10vh, 6rem);
}

body.is-listening #overlook .section-head,
body.is-listening #overlook .tt-note {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease;
}

#overlook .section-head,
#overlook .tt-note {
    transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.is-listening #overlook .section-head,
    body.is-listening #overlook .tt-note,
    #overlook .section-head,
    #overlook .tt-note {
        transition: none;
    }
}

/* ============================================================
   SIGNALS
   ============================================================ */

/* ---- signal beacons: uniform cards, live meter, radar sweep ---- */
.cairns {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto clamp(4rem, 10vh, 6.5rem);
}
.cairns a {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.3rem;
    min-height: 150px;
    height: 100%;
    padding: 1.1rem 1.2rem 1rem;
    text-decoration: none;
    border: 1px solid rgba(196, 212, 207, 0.18);
    background:
        radial-gradient(140% 120% at 100% 0%, rgba(212, 165, 90, 0.09) 0%, transparent 55%),
        rgba(13, 26, 18, 0.55);
    backdrop-filter: blur(6px);
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
/* topo-ring texture radiating from the corner */
.cairns a::before {
    content: '';
    position: absolute;
    top: -45%; right: -30%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(circle,
        rgba(212, 165, 90, 0.11) 0 1px, transparent 1px 13px);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
/* light sweep that scans across on hover */
.cairns a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 42%, rgba(232, 192, 120, 0.15) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform 0.85s ease;
    pointer-events: none;
}
.cairns a:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 165, 90, 0.65);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(212, 165, 90, 0.12);
}
.cairns a:hover::after { transform: translateX(130%); }
.cairns a:hover::before { transform: scale(1.15); opacity: 1; }

.cairns .is-featured a,
.cairns li.is-featured a {
    border-color: rgba(212, 165, 90, 0.55);
    background:
        radial-gradient(140% 120% at 100% 0%, rgba(212, 165, 90, 0.18) 0%, transparent 60%),
        rgba(20, 33, 24, 0.6);
}

.sg-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}
.sg-num {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    color: rgba(212, 165, 90, 0.9);
    white-space: nowrap;
}
/* signal-strength meter — comes alive on hover */
.sg-meter { display: flex; align-items: flex-end; gap: 3px; height: 15px; }
.sg-meter i {
    width: 3px;
    background: rgba(212, 165, 90, 0.5);
    transform-origin: bottom;
}
.sg-meter i:nth-child(1) { height: 22%; }
.sg-meter i:nth-child(2) { height: 40%; }
.sg-meter i:nth-child(3) { height: 58%; }
.sg-meter i:nth-child(4) { height: 78%; }
.sg-meter i:nth-child(5) { height: 100%; }
.cairns a:hover .sg-meter i {
    background: var(--ochre-light);
    animation: sg-eq 0.85s ease-in-out infinite alternate;
}
.cairns a:hover .sg-meter i:nth-child(1) { animation-delay: 0s; }
.cairns a:hover .sg-meter i:nth-child(2) { animation-delay: 0.12s; }
.cairns a:hover .sg-meter i:nth-child(3) { animation-delay: 0.24s; }
.cairns a:hover .sg-meter i:nth-child(4) { animation-delay: 0.36s; }
.cairns a:hover .sg-meter i:nth-child(5) { animation-delay: 0.48s; }
@keyframes sg-eq {
    from { transform: scaleY(0.4); }
    to   { transform: scaleY(1); }
}

.sg-name {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--off-white);
    letter-spacing: 0.02em;
}
.sg-desc {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(196, 212, 207, 0.5);
}

/* ---- the ascent: Ascend · Transcend · Become ----
   Stacked switchback rows: column-reverse puts Ascend at the bottom-left
   and Become at the top-right, so the climb still reads left → right and
   upward — but nothing can ever overflow the viewport. */
.ascent {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: clamp(0.6rem, 2.2vh, 1.4rem);
    max-width: min(880px, 100%);
    margin: 0 auto clamp(3rem, 8vh, 5rem);
    padding-top: 1rem;
}
.ascent-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: fit-content;
    max-width: 100%;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* each word lands a beat after the last, one step higher */
.ascent.in-view .ascent-step { opacity: 1; transform: translateY(0); }
.ascent.in-view .ascent-step:nth-child(2) { transition-delay: 0.35s; }
.ascent.in-view .ascent-step:nth-child(3) { transition-delay: 0.7s; }
/* the switchback: base camp left, ridge center, summit right */
.ascent-step:nth-child(1) { align-self: flex-start; margin-left: 3%; }
.ascent-step:nth-child(2) { align-self: center; }
.ascent-step:nth-child(3) { align-self: flex-end; margin-right: 3%; }

.ascent-word {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 1;
    font-size: clamp(1.7rem, 5.5vw, 3.8rem);
    white-space: nowrap;
}
/* the story in three states: faint outline → lit outline → fully become
   (dark fills keep the words solid over the terrain mesh) */
.ascent-step:nth-child(1) .ascent-word {
    color: rgba(13, 26, 18, 0.8);
    -webkit-text-stroke: 1.5px rgba(212, 165, 90, 0.6);
    text-shadow: 0 3px 18px rgba(6, 13, 8, 0.9);
}
.ascent-step:nth-child(2) .ascent-word {
    color: rgba(13, 26, 18, 0.8);
    -webkit-text-stroke: 1.5px var(--ochre);
    text-shadow: 0 0 30px rgba(212, 165, 90, 0.35), 0 3px 18px rgba(6, 13, 8, 0.9);
}
.ascent-step:nth-child(3) .ascent-word {
    color: var(--ochre-light);
    text-shadow: 0 0 40px rgba(232, 192, 120, 0.55), 0 0 90px rgba(232, 192, 120, 0.25);
    animation: become-glow 5s ease-in-out infinite;
}
@keyframes become-glow {
    0%, 100% { text-shadow: 0 0 40px rgba(232, 192, 120, 0.55), 0 0 90px rgba(232, 192, 120, 0.25); }
    50%      { text-shadow: 0 0 60px rgba(232, 192, 120, 0.8), 0 0 130px rgba(232, 192, 120, 0.4); }
}
.ascent-elev {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    padding-left: 0.28em; /* trailing letter-space compensation */
    text-transform: uppercase;
    color: rgba(196, 212, 207, 0.55);
    white-space: nowrap;
}

/* ============================================================
   WORKSHOP — Shimmer teaser card (tools/shimmer/)
   Deliberately styled in Shimmer's own studio-dark brand so it
   reads as a doorway into a different room.
   ============================================================ */

#workshop { padding-block: clamp(2rem, 5vh, 3.5rem); }

.workshop-card {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 3.5vw, 2.4rem);
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.4rem, 4vw, 2.6rem);
    text-decoration: none;
    background:
        radial-gradient(120% 140% at 85% -20%, rgba(244, 114, 182, 0.08) 0%, transparent 55%),
        radial-gradient(120% 140% at 10% 120%, rgba(245, 165, 36, 0.10) 0%, transparent 55%),
        #0e1116;
    border: 1px solid #252c37;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.workshop-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 165, 36, 0.5);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(245, 165, 36, 0.12);
}

/* the aurora S — same treatment as the Shimmer page */
.ws-mark,
.ws-name {
    font-family: 'Audiowide', 'Inter', sans-serif;
    text-transform: uppercase;
    background: linear-gradient(100deg,
        #f5a524 0%, #ffd97a 18%, #f77450 38%,
        #f472b6 55%, #f5a524 75%, #ffd97a 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ws-aurora 7s linear infinite;
}
@keyframes ws-aurora { to { background-position: -220% 0; } }

.ws-mark {
    font-size: clamp(3rem, 8vw, 4.6rem);
    line-height: 1;
    flex-shrink: 0;
    filter:
        drop-shadow(0 0 22px rgba(245, 165, 36, 0.45))
        drop-shadow(0 0 60px rgba(244, 114, 182, 0.22));
}

.ws-body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.ws-kicker {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7d8894;
}
.ws-name {
    font-size: clamp(1.3rem, 3.4vw, 1.9rem);
    letter-spacing: 0.26em;
    margin-right: -0.26em;
    line-height: 1.1;
}
.ws-desc {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.6;
    color: #c0c8d2;
    max-width: 460px;
}

.ws-cta {
    flex-shrink: 0;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #14100a;
    background: linear-gradient(100deg, #f5a524, #f77450);
    padding: 0.8rem 1.3rem;
    border-radius: 9px;
    box-shadow: 0 6px 24px rgba(245, 165, 36, 0.3);
    transition: box-shadow 0.3s ease;
}
.workshop-card:hover .ws-cta { box-shadow: 0 10px 32px rgba(245, 165, 36, 0.45); }

@media (max-width: 700px) {
    .workshop-card { flex-direction: column; text-align: center; }
    .ws-body { align-items: center; }
    .ws-cta { margin-top: 0.4rem; }
}

.closing { text-align: center; }
.closing-line {
    font-size: clamp(1.1rem, 2.6vw, 1.5rem);
    font-weight: 300;
    font-style: italic;
    color: rgba(245, 242, 235, 0.9);
    margin-bottom: 1.6rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-foot {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 2rem clamp(1.25rem, 6vw, 5rem) 7rem; /* clears the HUD meters */
    border-top: 1px solid rgba(212, 165, 90, 0.2);
    background: rgba(13, 26, 18, 0.7);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: rgba(196, 212, 207, 0.55);
    max-width: 100%;
    box-sizing: border-box;
}
.logo-small { font-size: 1rem; -webkit-text-stroke-width: 1px; animation: none; }
.site-foot nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.65rem 1.15rem;
    max-width: 100%;
}
.site-foot a {
    color: rgba(196, 212, 207, 0.6);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.1rem;
    white-space: nowrap;
}
.site-foot a:hover { color: var(--ochre-light); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
    .logo { font-size: 1.2rem; -webkit-text-stroke-width: 1px; }

    .nav-toggle { display: inline-flex; }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 68;
        background: rgba(6, 13, 8, 0.62);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }
    .nav-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .hud-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(19.5rem, 86vw);
        height: 100dvh;
        z-index: 69;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 5.25rem 1.35rem 2rem;
        background: rgba(13, 26, 18, 0.98);
        border-left: 1px solid rgba(212, 165, 90, 0.28);
        box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Closed: collapse to zero box. translateX(110%) off-canvas expands the
       scrollport on Samsung/Android and makes the HUD hitch left/right. */
    .hud-nav:not(.is-open) {
        width: 0;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        overflow: clip;
        /* size+paint containment: the 300px-wide links inside the collapsed
           drawer can never influence the viewport or be scroll-revealed */
        contain: strict;
        visibility: hidden;
        pointer-events: none;
        transform: none;
    }
    .hud-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .hud-nav a {
        font-size: 0.92rem;
        letter-spacing: 0.14em;
        gap: 0.85rem;
        padding: 1rem 0.65rem;
        min-height: 52px;
        border-bottom: 1px solid rgba(196, 212, 207, 0.12);
        border-radius: 0;
    }
    .hud-nav a .material-symbols-outlined {
        font-size: 1.55rem;
        width: 1.75rem;
        text-align: center;
    }
    .hud-nav a:hover,
    .hud-nav a.is-active {
        background: rgba(212, 165, 90, 0.08);
        border-bottom-color: rgba(212, 165, 90, 0.35);
    }

    body.nav-open {
        overflow: hidden;
        touch-action: none;
    }

    /* Hide the soft fade while the drawer is open so it doesn't wash the panel */
    body.nav-open .hud-top::after { opacity: 0; }
}

@media (max-width: 900px) {
    /* Trail rail sits ON TOP of sleeves so covers can tuck under it.
       Never size route cards in vw — panel pad eats the budget at ~360px. */
    .panel {
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    }
    .trail {
        overflow-x: clip;
    }
    .trail::before {
        left: 18px;
        z-index: 4;
    }
    .waypoint,
    .waypoint:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        padding-left: 0;
        min-width: 0;
        overflow-x: clip;
    }
    .waypoint:nth-child(even) .wp-sleeve { order: 1; }
    .waypoint:nth-child(even) .wp-info   { order: 2; text-align: left; }
    .waypoint:nth-child(even) .wp-actions { justify-content: flex-start; }
    .waypoint:nth-child(even) .wp-desc { margin-left: 0; }
    .waypoint:nth-child(even) .wp-kicker,
    .waypoint:nth-child(even) .wp-info h3 { margin-right: 0; }
    .wp-sleeve {
        justify-content: flex-start;
        position: relative;
        z-index: 1;
        min-width: 0;
        max-width: 100%;
    }
    .wp-info {
        padding-left: 2.5rem; /* ~40px — clears 18px rail + marker without starving the column */
        min-width: 0;
        max-width: 100%;
    }
    .wp-info h3,
    .wp-kicker,
    .wp-desc {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .wp-kicker { letter-spacing: 0.14em; }
    .wp-info h3 {
        font-size: clamp(1.35rem, 6.5vw, 1.9rem);
        letter-spacing: 0.08em;
    }
    .wp-actions {
        max-width: 100%;
    }
    .wp-actions .btn {
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.7rem 1rem;
        letter-spacing: 0.12em;
    }
    .wp-marker {
        left: 18px;
        top: 0;
        transform: translate(-50%, 0);
        z-index: 5;
    }
    .wp-num {
        width: 36px;
        height: 36px;
        font-size: 0.65rem;
        box-shadow: 0 0 0 4px rgba(13,26,18,0.9), 0 0 18px rgba(212,165,90,0.25);
    }
    .album-card {
        width: 100%;
        max-width: 100%;
    }

    .turntable {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.15rem;
        min-width: 0;
        overflow: clip;
    }
    .tt-deck {
        width: min(300px, 100%);
        max-width: 100%;
        margin: 0 auto;
        overflow: clip; /* cover/arm hang past the platter on purpose — clip on small screens */
    }
    .tt-cover {
        left: 0;
        top: 0;
    }
    .tt-arm {
        right: 0;
    }
    .turntable.is-playing .tt-cover { transform: translate(-2%, -2%) rotate(-2deg); }

    .trip-meter { display: none; }
    .light-meter { right: 50%; transform: translateX(50%); }
    .site-foot {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1.1rem;
        padding: 2rem 1rem 6.5rem;
    }
    .site-foot nav {
        width: 100%;
        max-width: 22rem;
        justify-content: center;
        gap: 0.55rem 0.95rem;
    }
    .site-foot a { letter-spacing: 0.08em; }
}

@media (max-width: 700px) {
    /* same switchback shape, tighter and larger type for small screens */
    .ascent { gap: 1.2rem; }
    .ascent-word { font-size: clamp(1.9rem, 8.5vw, 2.9rem); }
}

@media (max-width: 720px) {
    .wordmark {
        font-size: clamp(1.4rem, 8.5vw, 2.5rem);
        -webkit-text-stroke-width: 1.25px;
        translate: -0.06em 0;
        text-shadow: 0 0 18px rgba(212,165,90,0.22), 0 4px 20px rgba(6, 13, 8, 0.85);
    }
    .tagline {
        letter-spacing: 0.2em;
        margin-right: -0.2em;
        font-size: clamp(0.65rem, 3.2vw, 0.8rem);
    }
    .kicker {
        letter-spacing: 0.18em;
        margin-right: -0.18em;
    }
    .motto {
        gap: 0.45rem 0.7rem;
        font-size: clamp(0.72rem, 3.8vw, 1rem);
    }
    .scroll-cue {
        letter-spacing: 0.18em;
        font-size: clamp(0.78rem, 3.5vw, 1rem);
        margin-top: 1.7rem;
    }
    .cue-text { padding-left: 0.18em; margin-right: -0.18em; }
    .album-card { width: 100%; max-width: 100%; }
}

@media (max-width: 380px) {
    .wordmark {
        font-size: clamp(1.3rem, 8vw, 2.1rem);
        -webkit-text-stroke-width: 1px;
        translate: -0.04em 0;
    }
    .tagline {
        letter-spacing: 0.12em;
        margin-right: -0.12em;
    }
    .motto { gap: 0.35rem 0.55rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lm-dot { animation: none !important; }
    .scroll-cue { animation: none !important; }
    .cue-text, .cue-chevrons i, .cue-trail i { animation: none !important; }
    .ws-mark, .ws-name { animation: none !important; }
    .cue-trail i { opacity: 0.7; }
    .cue-text { color: var(--ochre-light); -webkit-text-fill-color: var(--ochre-light); }
    .logo, .wordmark { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .turntable.is-playing .tt-vinyl,
    .turntable.is-playing .tt-sheen,
    .turntable.is-playing .tt-label { animation: none; }
    .ascent-step { opacity: 1; transform: none; transition: none; }
    .ascent-step:nth-child(3) .ascent-word { animation: none; }
    .cairns a:hover .sg-meter i { animation: none; }
    .hud-nav, .nav-backdrop { transition: none !important; }
}