/* ============================================================
   SSETTL.com — styles.css
   Pop-art settlement: asymmetric slab-serif narrative scroll
   Design implementation terms: Intersection Observer triggering `opacity` and `translateY` transitions on individual `<span>` elements. Each word has a 60ms stagger. A vertical strip of `#d4a843` (Ochre Welcome IntersectionObserver` with `threshold: [0 Interstitial Moments:** Between major sections Source Sans 3's design supports the inviting tone. Source Sans 3" (Google Fonts
   ============================================================ */

:root {
    --cerulean: #4a90d9;
    --midnight: #1a1a3e;
    --coral: #e85d4a;
    --mist: #f0f4f8;
    --powder: #b8d4e8;
    --ochre: #d4a843;
    --shadow: #0f0f2a;

    --font-head: "Zilla Slab", Georgia, serif;
    --font-sub:  "Bitter", Georgia, serif;
    --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Inconsolata", "SF Mono", Menlo, monospace;

    --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html {
    background: var(--mist);
    color: var(--midnight);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--midnight);
    background: var(--mist);
    -webkit-font-smoothing: antialiased;
    scroll-snap-type: y proximity;
    overflow-x: hidden;
}

p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 700; }
em { font-style: italic; }

.scroll-stage {
    display: block;
    width: 100%;
}

.panel {
    position: relative;
    width: 100%;
    scroll-snap-align: start;
    overflow: hidden;
}

/* ============================================================
   Menu trigger — Benday dot cluster
   ============================================================ */
.menu-trigger {
    position: fixed;
    top: 2.25rem;
    right: 2.25rem;
    z-index: 50;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mist);
    border: 2px solid var(--midnight);
    cursor: pointer;
    padding: 0;
    box-shadow: 4px 4px 0 var(--midnight);
    transition: transform 320ms var(--ease-spring), box-shadow 320ms var(--ease-spring), background 220ms ease;
}

.menu-trigger:hover {
    transform: translate(-2px, -2px) rotate(-6deg);
    box-shadow: 6px 6px 0 var(--coral);
}

.menu-trigger__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 14px;
    width: 100%;
    height: 100%;
    align-content: center;
    justify-content: center;
}

.menu-trigger__grid span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--midnight);
    justify-self: center;
    align-self: center;
    transition: transform 500ms var(--ease-spring), background 300ms ease;
}

.menu-trigger__grid span:nth-child(1) { width: 6px; height: 6px; }
.menu-trigger__grid span:nth-child(3) { width: 10px; height: 10px; background: var(--coral); }
.menu-trigger__grid span:nth-child(5) { background: var(--cerulean); }
.menu-trigger__grid span:nth-child(7) { width: 10px; height: 10px; background: var(--ochre); }
.menu-trigger__grid span:nth-child(9) { width: 6px; height: 6px; }

.menu-trigger.is-open .menu-trigger__grid span:nth-child(1) { transform: translate(-8px, -8px); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(2) { transform: translate(0, -10px); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(3) { transform: translate(8px, -8px); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(4) { transform: translate(-10px, 0); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(5) { transform: scale(1.6); background: var(--coral); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(6) { transform: translate(10px, 0); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(7) { transform: translate(-8px, 8px); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(8) { transform: translate(0, 10px); }
.menu-trigger.is-open .menu-trigger__grid span:nth-child(9) { transform: translate(8px, 8px); }

.menu-trigger__label {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--midnight);
}

/* ============================================================
   Scatter nav
   ============================================================ */
.scatter-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 82vw);
    height: 100vh;
    background: var(--midnight);
    color: var(--mist);
    z-index: 40;
    padding: 7rem 3rem 3rem;
    transform: translateX(100%);
    transition: transform 520ms var(--ease-settle);
    background-image:
        radial-gradient(circle at 20% 12%, rgba(232, 93, 74, 0.18) 0, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(74, 144, 217, 0.22) 0, transparent 55%);
}

.scatter-nav.is-open {
    transform: translateX(0);
}

.scatter-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.scatter-nav li {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 480ms var(--ease-settle), transform 540ms var(--ease-settle);
}

.scatter-nav.is-open li { opacity: 1; transform: translateX(0); }
.scatter-nav.is-open li:nth-child(1) { transition-delay: 120ms; }
.scatter-nav.is-open li:nth-child(2) { transition-delay: 200ms; }
.scatter-nav.is-open li:nth-child(3) { transition-delay: 280ms; }
.scatter-nav.is-open li:nth-child(4) { transition-delay: 360ms; }

.scatter-nav a {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--mist);
    text-decoration: none;
    display: inline-block;
    padding: 0.15em 0;
    border-bottom: 3px solid transparent;
    transition: color 220ms ease, border-color 220ms ease, letter-spacing 300ms var(--ease-settle);
}

.scatter-nav a:hover {
    color: var(--coral);
    border-bottom-color: var(--ochre);
    letter-spacing: 0.02em;
}

/* ============================================================
   Panel 1 — Arrival
   ============================================================ */
.panel--arrival {
    min-height: 100vh;
    background: var(--mist);
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    grid-template-rows: auto 1fr auto;
    padding: 3rem 8vw 0;
    gap: 0;
    isolation: isolate;
}

.arrival__halftone {
    position: absolute;
    top: 0;
    right: 0;
    width: 55vw;
    height: 60vh;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='4' fill='%23e85d4a' opacity='0.38'/></svg>");
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 45%, transparent 78%);
            mask-image: radial-gradient(ellipse at 70% 30%, #000 45%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.arrival__polygon {
    position: absolute;
    top: -4vh;
    right: -6vw;
    width: 42vw;
    height: 52vh;
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
    animation: floatPoly 9s ease-in-out infinite;
}

@keyframes floatPoly {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(-1.2vw, 1.6vh) rotate(-2.2deg); }
}

.arrival__kente {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4vw;
    height: 100%;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--ochre) 0 14px,
        var(--cerulean) 14px 22px,
        var(--coral) 22px 32px,
        var(--midnight) 32px 36px
    );
    z-index: 1;
}

.arrival__brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 3;
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--midnight);
}

.arrival__brand-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 4px var(--mist), 0 0 0 5px var(--midnight);
    margin-right: 0.25rem;
}

.arrival__brand-word {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.05em;
}

.arrival__brand-meta { margin-left: auto; color: var(--shadow); }

.arrival__type {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: end;
    padding-bottom: 8vh;
    z-index: 3;
    max-width: 92vw;
}

.arrival__kicker {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 1.5rem;
}

.arrival__kicker::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--coral);
    vertical-align: middle;
    margin-right: 0.8rem;
}

.arrival__headline {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: 0.9;
    color: var(--midnight);
    letter-spacing: -0.02em;
    display: block;
}

.arrival__headline-line {
    display: block;
    overflow: hidden;
}

.arrival__headline-line--later {
    color: var(--cerulean);
    transform: translateY(110%);
    opacity: 0;
    transition: transform 900ms var(--ease-settle) 150ms, opacity 600ms ease 150ms;
}

.arrival__headline-line--later.is-revealed {
    transform: translateY(0);
    opacity: 1;
}

.arrival__lede {
    font-family: var(--font-sub);
    font-weight: 400;
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    line-height: 1.55;
    max-width: 34ch;
    color: var(--shadow);
    margin-top: 2.5rem;
}

.arrival__ticker {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    border-top: 2px solid var(--midnight);
    border-bottom: 2px solid var(--midnight);
    background: var(--ochre);
    overflow: hidden;
    height: 56px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
    margin: 0 -8vw;
}

.arrival__ticker-track {
    display: flex;
    gap: 2.5rem;
    white-space: nowrap;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--midnight);
    text-transform: lowercase;
    animation: ticker 32s linear infinite;
    padding: 0 1rem;
}

.arrival__ticker-track span:nth-child(even) { color: var(--coral); }

@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.arrival__scrollcue {
    position: absolute;
    bottom: 7.5rem;
    right: 3rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--midnight);
    z-index: 3;
    writing-mode: vertical-rl;
}

.arrival__scrollcue-line {
    display: block;
    width: 2px;
    height: 64px;
    background: var(--midnight);
    position: relative;
    overflow: hidden;
}

.arrival__scrollcue-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--coral);
    transform: translateY(-100%);
    animation: drip 2.4s ease-in-out infinite;
}

@keyframes drip {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* ============================================================
   Interstitial bands (rotated text)
   ============================================================ */
.band {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-top: 2px solid var(--midnight);
    border-bottom: 2px solid var(--midnight);
    scroll-snap-align: none;
}

.band--ochre  { background: var(--ochre); }
.band--coral  { background: var(--coral); }
.band--powder { background: var(--powder); }

.band__inner {
    transform: rotate(-2deg) scale(1.06);
    padding: 3.2rem 0;
    white-space: nowrap;
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: center;
}

.band__inner--reverse {
    transform: rotate(2deg) scale(1.06);
}

.band__text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--midnight);
}

.band__text::before,
.band__text::after {
    content: " \2014 ";
    color: var(--shadow);
    opacity: 0.55;
}

/* ============================================================
   Panel 2 — Story
   ============================================================ */
.panel--story {
    background: var(--midnight);
    color: var(--mist);
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    padding: 9vh 0 9vh 12vw;
    gap: 0;
    position: relative;
}

.story__sashiko {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M0 14 H10 M18 14 H28 M14 0 V10 M14 18 V28' stroke='%23f0f4f8' stroke-width='1' stroke-dasharray='3 2' opacity='0.08' fill='none'/></svg>");
    background-size: 28px 28px;
    pointer-events: none;
}

.story__content {
    position: relative;
    z-index: 2;
    max-width: 55vw;
    align-self: center;
}

.story__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 2rem;
}

.story__eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--ochre);
    vertical-align: middle;
    margin-right: 0.8rem;
}

.story__paragraph {
    font-family: var(--font-sub);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    line-height: 1.35;
    color: var(--mist);
    letter-spacing: -0.005em;
}

.story__paragraph .w {
    display: inline-block;
    opacity: 0.15;
    transform: translateY(18px);
    transition: opacity 520ms var(--ease-settle), transform 520ms var(--ease-settle), color 520ms ease;
    margin-right: 0.28em;
}

.story__paragraph .w.is-lit {
    opacity: 1;
    transform: translateY(0);
}

.story__paragraph .w.is-lit:nth-child(7n+3) { color: var(--coral); }
.story__paragraph .w.is-lit:nth-child(11n+5) { color: var(--ochre); }
.story__paragraph .w.is-lit:nth-child(13n+9) { color: var(--powder); }

.story__aside {
    margin-top: 3.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--shadow);
    border-left: 4px solid var(--coral);
    max-width: 42ch;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--powder);
    line-height: 1.6;
}

.story__aside-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 0.5rem;
}

.story__aside em { color: var(--mist); font-style: italic; }

.story__strip {
    position: relative;
    width: 8vw;
    justify-self: end;
    background: var(--ochre);
    overflow: hidden;
    border-left: 2px solid var(--mist);
    display: flex;
    align-items: center;
    justify-content: center;
}

.story__strip-inner {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path d='M0 11 H8 M14 11 H22 M11 0 V8 M11 14 V22' stroke='%231a1a3e' stroke-width='1.2' stroke-dasharray='3 2' opacity='0.45' fill='none'/></svg>");
    background-size: 22px 22px;
    mix-blend-mode: multiply;
}

.story__strip-label {
    position: relative;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--midnight);
}

/* ============================================================
   Panel 3 — Mosaic
   ============================================================ */
.panel--mosaic {
    background: var(--mist);
    min-height: 110vh;
    padding: 9vh 8vw 10vh;
    position: relative;
}

.panel--mosaic::before {
    content: "";
    position: absolute;
    top: 6vh;
    right: 10vw;
    width: 140px;
    height: 140px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><circle cx='9' cy='9' r='3.2' fill='%234a90d9' opacity='0.45'/></svg>");
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
            mask-image: radial-gradient(circle, #000 55%, transparent 78%);
    pointer-events: none;
}

.mosaic__head {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
    align-items: end;
}

.mosaic__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--coral);
    margin: 0;
}

.mosaic__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.02;
    color: var(--midnight);
    letter-spacing: -0.015em;
    margin: 0;
}

.mosaic__title em {
    font-style: italic;
    color: var(--cerulean);
    position: relative;
}

.mosaic__title em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.08em;
    height: 0.18em;
    background: var(--ochre);
    z-index: -1;
}

.mosaic__grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.4rem;
    min-height: 72vh;
}

.mosaic__panel {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2.25rem;
    color: var(--mist);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 2px solid var(--midnight);
    box-shadow: 8px 8px 0 var(--midnight);
    opacity: 0;
    transition: transform 720ms var(--ease-settle), opacity 520ms ease;
}

.mosaic__panel[data-enter="left"]  { transform: translateX(-80px); }
.mosaic__panel[data-enter="right"] { transform: translateX(80px); }

.mosaic__panel.is-in {
    opacity: 1;
    transform: translateX(0);
}

.mosaic__panel--large {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: var(--cerulean);
}

.mosaic__panel--small {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background: var(--coral);
}

.mosaic__panel--medium {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: var(--ochre);
    color: var(--midnight);
}

.mosaic__body {
    position: relative;
    z-index: 2;
}

.mosaic__tag {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    opacity: 0.9;
}

.mosaic__panel h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2.4rem);
    line-height: 1.08;
    margin: 0 0 0.8rem;
    letter-spacing: -0.01em;
}

.mosaic__note {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    max-width: 42ch;
    color: rgba(240, 244, 248, 0.92);
    margin: 0;
}

.mosaic__panel--medium .mosaic__note { color: rgba(26, 26, 62, 0.82); }

.mosaic__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.mosaic__pattern--greek {
    background-image:
        linear-gradient(to right, var(--midnight) 0 2px, transparent 2px 20px),
        linear-gradient(to bottom, var(--midnight) 0 2px, transparent 2px 20px),
        repeating-linear-gradient(90deg, transparent 0 18px, var(--midnight) 18px 20px, transparent 20px 38px, var(--midnight) 38px 40px);
    background-size: 100% 100%, 100% 100%, 40px 40px;
    background-position: top left, bottom left, top;
    mask-image: linear-gradient(to bottom, #000 0 14px, transparent 14px 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0 14px, transparent 14px 100%);
    opacity: 0.7;
}

.mosaic__pattern--kente {
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0 60%,
        var(--midnight) 60% 60.5%,
        transparent 60.5% 80%,
        var(--mist) 80% 81%,
        transparent 81% 100%
    ),
    repeating-linear-gradient(
        to bottom,
        transparent 0 88%,
        var(--midnight) 88% 90%,
        transparent 90% 92%,
        var(--ochre) 92% 94%,
        transparent 94% 100%
    );
}

.mosaic__pattern--sashiko {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M0 14 H10 M18 14 H28 M14 0 V10 M14 18 V28' stroke='%231a1a3e' stroke-width='1.3' stroke-dasharray='3 2' opacity='0.6' fill='none'/></svg>");
    background-size: 28px 28px;
}

.mosaic__corner {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    opacity: 0.9;
}

.mosaic__foot {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--shadow);
    letter-spacing: 0.04em;
}

.mosaic__foot-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 3px var(--mist), 0 0 0 4px var(--midnight);
}

/* ============================================================
   Panel 4 — Welcome
   ============================================================ */
.panel--welcome {
    min-height: 100vh;
    background: radial-gradient(circle at 50% 50%, var(--cerulean) 0%, #2d498a 45%, var(--midnight) 78%, var(--shadow) 100%);
    color: var(--mist);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.welcome__rays {
    position: absolute;
    inset: -20%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 10deg,
        rgba(232, 93, 74, 0.12) 10deg 22deg,
        transparent 22deg 45deg,
        rgba(212, 168, 67, 0.14) 45deg 58deg,
        transparent 58deg 90deg,
        rgba(184, 212, 232, 0.10) 90deg 105deg,
        transparent 105deg 160deg,
        rgba(232, 93, 74, 0.10) 160deg 175deg,
        transparent 175deg 220deg,
        rgba(212, 168, 67, 0.12) 220deg 235deg,
        transparent 235deg 290deg,
        rgba(184, 212, 232, 0.10) 290deg 305deg,
        transparent 305deg 360deg
    );
    animation: rotate-rays 60s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

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

.welcome__dots {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='3' fill='%23f0f4f8' opacity='0.12'/></svg>");
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle, transparent 25%, #000 85%);
            mask-image: radial-gradient(circle, transparent 25%, #000 85%);
    pointer-events: none;
}

.welcome__content {
    position: relative;
    z-index: 2;
    padding: 0 6vw;
}

.welcome__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 2.5rem;
}

.welcome__line {
    font-family: var(--font-head);
    font-weight: 300;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.05;
    color: var(--mist);
    margin: 0;
    letter-spacing: -0.015em;
}

.welcome__rule {
    width: 60vw;
    max-width: 640px;
    height: 4px;
    margin: 2.5rem auto 2rem;
    background: var(--ochre);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 1200ms ease-out;
}

.welcome__rule.is-drawn { transform: scaleX(1); }

.welcome__signoff {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--powder);
    margin: 0;
}

.welcome__wordmark {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.9rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mist);
    z-index: 2;
}

.welcome__wordmark span {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    background: rgba(15, 15, 42, 0.55);
    border: 1px solid rgba(240, 244, 248, 0.22);
}

.welcome__wordmark span:nth-child(1) { background: var(--coral); color: var(--midnight); border-color: var(--midnight); }
.welcome__wordmark span:nth-child(3) { background: var(--ochre); color: var(--midnight); border-color: var(--midnight); }
.welcome__wordmark span:nth-child(5) { background: var(--powder); color: var(--midnight); border-color: var(--midnight); }

/* ============================================================
   Responsive trim
   ============================================================ */
@media (max-width: 860px) {
    .panel--arrival {
        grid-template-columns: 1fr;
        padding: 2rem 6vw 0;
    }
    .arrival__scrollcue { display: none; }
    .arrival__polygon { width: 70vw; height: 40vh; top: 4vh; right: -10vw; }
    .arrival__halftone { width: 90vw; height: 45vh; }

    .panel--story {
        grid-template-columns: 1fr;
        padding: 8vh 6vw;
    }
    .story__content { max-width: 100%; }
    .story__strip { display: none; }

    .mosaic__head { grid-template-columns: 1fr; }
    .mosaic__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(260px, auto);
    }
    .mosaic__panel--large,
    .mosaic__panel--small,
    .mosaic__panel--medium {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .scatter-nav { width: 100vw; }
    .menu-trigger { top: 1rem; right: 1rem; }
}