/* =========================================================
   aiice.dev — Bauhaus functionalism frozen in permafrost
   HUD-overlay architecture over animated marble substrate
   ========================================================= */

:root {
    --c-substrate: #0d1117;
    --c-panel-bg: #161b22;
    --c-border-teal: #4a6670;
    --c-warm: #b85c38;
    --c-ochre: #d4a24e;
    --c-body: #c8cdd3;
    --c-muted: #7a8b96;
    --c-amber: #2d1f14;
    --c-circuit: #3d5a66;
    --c-crystal: #e8f4f8;
    --c-deep-blue: #1a2332;

    --panel-bg: rgba(13, 17, 23, 0.72);
    --panel-bg-data: rgba(13, 17, 23, 0.85);
    --panel-bg-core: rgba(13, 17, 23, 0.82);

    --font-display: "DM Sans", "Inter", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Space Mono", ui-monospace, monospace;

    --depth-warmth: 0;
}

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

html, body {
    background: var(--c-substrate);
    color: var(--c-body);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
}

.defs-only {
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
}

/* =========================================================
   MARBLE SUBSTRATE
   ========================================================= */

.marble,
.marble-warm,
.noise-overlay,
.ambient-ripples {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -10;
}

.marble {
    background-color: #0d1117;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(61, 90, 102, 0.22) 0px, transparent 220px),
        radial-gradient(circle at 78% 32%, rgba(26, 35, 50, 0.55) 0px, transparent 600px),
        radial-gradient(circle at 24% 72%, rgba(74, 102, 112, 0.12) 0px, transparent 280px),
        radial-gradient(circle at 88% 88%, rgba(22, 27, 34, 0.9) 0px, transparent 1100px),
        radial-gradient(ellipse 1200px 800px at 50% 50%, rgba(20, 28, 38, 0.35) 0%, transparent 70%),
        linear-gradient(135deg, #0d1117 0%, #11161d 40%, #161b22 100%);
    background-size: 620px 620px, 1200px 1200px, 480px 480px, 1600px 1600px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    animation: marble-drift 120s linear infinite;
    z-index: -10;
}

.marble-warm {
    background-image:
        radial-gradient(circle at 30% 60%, rgba(184, 92, 56, 0.18) 0px, transparent 500px),
        radial-gradient(circle at 70% 80%, rgba(212, 162, 78, 0.09) 0px, transparent 700px),
        radial-gradient(ellipse 1400px 900px at 50% 120%, rgba(45, 31, 20, 0.55) 0%, transparent 80%);
    background-size: 900px 900px, 1200px 1200px, 100% 100%;
    animation: marble-drift-warm 160s linear infinite;
    opacity: var(--depth-warmth);
    transition: opacity 300ms linear;
    z-index: -9;
    mix-blend-mode: screen;
}

.noise-overlay {
    filter: url(#noise);
    opacity: 0.04;
    z-index: -8;
    background: #fff;
}

@keyframes marble-drift {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 620px 310px, -600px 400px, 240px -240px, 800px 800px, 0% 0%, 0% 0%; }
}

@keyframes marble-drift-warm {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 450px -300px, -400px 500px, 0% 0%; }
}

/* =========================================================
   VERTICAL CIRCUIT TRUNK
   ========================================================= */

.circuit-trunk {
    position: fixed;
    top: 0;
    left: 8%;
    width: 40px;
    height: 100vh;
    z-index: -5;
    pointer-events: none;
}

.circuit-trunk .trunk-line {
    stroke: var(--c-circuit);
    stroke-width: 1;
    opacity: 0.45;
    vector-effect: non-scaling-stroke;
}

/* =========================================================
   AMBIENT RIPPLES
   ========================================================= */

.ambient-ripples {
    z-index: -6;
}

.ripple {
    position: absolute;
    border: 1px solid var(--c-border-teal);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: ripple 600ms ease-out forwards;
}

.ripple--ambient {
    border-color: rgba(74, 102, 112, 0.7);
    animation: ripple-ambient 4200ms ease-out forwards;
}

@keyframes ripple {
    0%   { width: 0; height: 0; opacity: 0.4; }
    100% { width: 200px; height: 200px; opacity: 0; }
}

@keyframes ripple-ambient {
    0%   { width: 0; height: 0; opacity: 0.35; }
    100% { width: 420px; height: 420px; opacity: 0; }
}

/* =========================================================
   GEOMETRIC NAVIGATION
   ========================================================= */

.geo-nav {
    position: fixed;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 48px;
    z-index: 50;
}

.geo-nav__item {
    display: block;
    width: 24px;
    height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 220ms ease;
}

.geo-nav__item:hover {
    transform: scale(1.15);
}

.geo-shape {
    display: block;
    width: 24px;
    height: 24px;
    background: transparent;
}

.geo-shape--circle {
    border: 2px solid var(--c-warm);
    border-radius: 50%;
}
.geo-shape--triangle {
    background: transparent;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow: inset 0 0 0 2px var(--c-warm);
    /* clip-path + box-shadow inset gives hollow triangle */
    background-image: linear-gradient(var(--c-warm), var(--c-warm)),
                      linear-gradient(var(--c-warm), var(--c-warm)),
                      linear-gradient(var(--c-warm), var(--c-warm));
    background-position: 0 100%, 100% 100%, 50% 0%;
    background-size: 100% 2px, 2px 100%, 2px 100%;
    background-repeat: no-repeat;
    background: none;
    border: 2px solid var(--c-warm);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.geo-shape--square {
    border: 2px solid var(--c-warm);
}

.geo-nav__item.is-active .geo-shape--circle,
.geo-nav__item.is-active .geo-shape--square {
    background: var(--c-warm);
}
.geo-nav__item.is-active .geo-shape--triangle {
    background: var(--c-warm);
    border: 2px solid var(--c-warm);
}

/* Final section: all filled */
body.descent-complete .geo-shape--circle,
body.descent-complete .geo-shape--square {
    background: var(--c-warm);
}
body.descent-complete .geo-shape--triangle {
    background: var(--c-warm);
}

/* =========================================================
   MAIN DESCENT + SECTIONS
   ========================================================= */

.descent {
    position: relative;
    display: block;
    width: 100%;
}

.depth {
    position: relative;
    width: 100%;
    padding: 120px 6vw 120px 14vw;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    column-gap: 16px;
    row-gap: 24px;
    align-content: center;
}

.depth::before,
.depth::after {
    content: "";
    position: absolute;
    left: 14vw;
    right: 6vw;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(61, 90, 102, 0.35) 20%,
        rgba(61, 90, 102, 0.35) 80%,
        transparent 100%);
    pointer-events: none;
    opacity: 0.6;
}
.depth::before { top: 60px; }
.depth::after { bottom: 60px; }

.depth--00 { min-height: 100vh; }
.depth--01 { min-height: 150vh; align-content: start; padding-top: 180px; }
.depth--02 { min-height: 120vh; }
.depth--03 { min-height: 130vh; }
.depth--04 { min-height: 80vh; align-content: center; }

/* Depth markers + headers */
.depth__header {
    grid-column: 2 / span 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
}
.depth__header--right {
    grid-column: 6 / span 10;
    align-items: flex-start;
}

.depth__marker {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.depth__marker--warm { color: var(--c-warm); }

/* Section indicator (Bauhaus shape in left gutter) */
.section-indicator {
    position: absolute;
    left: calc(14vw - 72px);
    top: 180px;
    width: 48px;
    height: 48px;
    z-index: 3;
}
.section-indicator .connector {
    position: absolute;
    top: 24px;
    left: 48px;
    width: 80px;
    height: 1px;
    background: var(--c-circuit);
    opacity: 0.55;
}
.section-indicator--circle {
    background: var(--c-warm);
    border-radius: 50%;
}
.section-indicator--triangle {
    background: var(--c-ochre);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.section-indicator--square {
    background: var(--c-border-teal);
}
.section-indicator--warm {
    background: var(--c-warm);
}
.section-indicator--filled {
    background: var(--c-warm);
    box-shadow: 0 0 0 4px rgba(184, 92, 56, 0.18);
}

.section-indicator.is-active {
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.title-xxl,
.title-l,
.panel__title,
.eyebrow,
.depth__marker,
.panel__label,
.panel__chip,
.overlay-badge,
.data-row dt,
.data-row dd {
    font-feature-settings: "ss01" on, "cv11" on;
}

.title-xxl {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(72px, 13vw, 160px);
    letter-spacing: -0.02em;
    color: var(--c-body);
    text-transform: lowercase;
    line-height: 0.95;
}

.title-l {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.5vw, 72px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-body);
    line-height: 1.05;
}
.title-l--warm { color: var(--c-crystal); }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-muted);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-top: 24px;
}

/* =========================================================
   DEPTH 00 STAGE
   ========================================================= */

.depth-00__stage {
    grid-column: 2 / span 14;
    text-align: center;
    padding-top: 18vh;
    padding-bottom: 18vh;
}

/* =========================================================
   PANELS
   ========================================================= */

.panel {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid rgba(74, 102, 112, 0.6);
    padding: 32px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    overflow: hidden;
}

.panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.panel--primary {
    grid-column: span 8;
    background: var(--panel-bg);
}

.panel--data {
    grid-column: span 4;
    background: var(--panel-bg-data);
    border-color: rgba(184, 92, 56, 0.6);
}

.panel--circuit {
    grid-column: span 6;
    border: 1px dashed var(--c-circuit);
    background: rgba(13, 17, 23, 0.4);
    padding: 20px 32px;
    display: flex;
    align-items: center;
}

.panel--core {
    grid-column: 3 / span 12;
    background: rgba(13, 17, 23, 0.82);
    border-color: var(--c-warm);
    padding: 56px 64px;
}

/* Panel header (label + chip) */
.panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(74, 102, 112, 0.3);
}
.panel--data .panel__header {
    border-bottom-color: rgba(184, 92, 56, 0.3);
}

.panel__label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.panel__label--warm { color: var(--c-warm); }

.panel__chip {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-body);
    padding: 4px 10px;
    border: 1px solid var(--c-circuit);
    background: rgba(26, 35, 50, 0.7);
}
.panel__chip--active {
    color: var(--c-crystal);
    border-color: var(--c-crystal);
    background: rgba(232, 244, 248, 0.08);
}
.panel__chip--warm {
    color: var(--c-warm);
    border-color: var(--c-warm);
    background: rgba(184, 92, 56, 0.08);
}

.panel__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.005em;
    color: var(--c-body);
    margin-bottom: 16px;
    line-height: 1.2;
}
.panel__title--sm { font-size: 22px; }
.panel__title--lg { font-size: 40px; line-height: 1.15; }

.panel__lede {
    font-size: 19px;
    line-height: 1.65;
    color: var(--c-body);
    margin-bottom: 20px;
}
.panel__lede em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--c-crystal);
}

.panel p {
    margin-bottom: 16px;
    color: var(--c-body);
}
.panel p:last-of-type { margin-bottom: 0; }

.panel p em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--c-ochre);
}

.panel__caption {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(74, 102, 112, 0.2);
}
.panel__caption--quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    font-size: 15px;
    color: var(--c-ochre);
    border-top: none;
    padding-top: 28px;
}

/* Corner marks (Bauhaus decorative dots / blocks) */
.corner-mark {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--c-border-teal);
    opacity: 0.6;
}
.corner-mark--tl { top: 8px; left: 8px; }
.corner-mark--tr { top: 8px; right: 8px; border-radius: 50%; background: var(--c-warm); }
.corner-mark--bl { bottom: 8px; left: 8px; border-radius: 50%; background: var(--c-ochre); }
.corner-mark--br { bottom: 8px; right: 8px; }
.corner-mark--warm { background: var(--c-warm); }

/* =========================================================
   PANEL POSITIONS (grid placement)
   ========================================================= */

/* DEPTH 00 */
.panel--pos-00-status {
    grid-column: 12 / span 5;
    grid-row: 2;
    justify-self: end;
    width: 100%;
    max-width: 360px;
    align-self: end;
    margin-bottom: 0;
    transform: translateY(0);
    opacity: 1;
}

/* DEPTH 01 */
.panel--pos-01-a { grid-column: 2 / span 6; }
.panel--pos-01-bridge { grid-column: 8 / span 6; align-self: center; }
.panel--pos-01-b { grid-column: 8 / span 8; margin-top: 40px; }

/* DEPTH 02 */
.panel--pos-02-a { grid-column: 1 / span 4; }
.panel--pos-02-b { grid-column: 6 / span 4; margin-top: 80px; }
.panel--pos-02-c { grid-column: 11 / span 4; }

/* DEPTH 03 */
.panel--pos-03 { grid-column: 3 / span 12; }

/* =========================================================
   DATA LISTS
   ========================================================= */

.data-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(74, 102, 112, 0.25);
}
.data-row:last-child { border-bottom: none; }

.data-row dt {
    color: var(--c-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.data-row dd {
    color: var(--c-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-list--compact .data-row {
    padding: 4px 0;
    font-size: 12px;
}

/* =========================================================
   OVERLAY BADGES
   ========================================================= */

.overlay-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--c-border-teal);
    color: var(--c-substrate);
    font-weight: 500;
    z-index: 4;
}

.overlay-badge--depth {
    position: absolute;
    top: 40px;
    left: 14vw;
    background: var(--c-warm);
    color: var(--c-substrate);
}

.overlay-badge--status {
    position: absolute;
    background: var(--c-ochre);
    color: var(--c-substrate);
}
.overlay-badge--warm {
    background: var(--c-warm);
    color: var(--c-substrate);
}

.overlay-badge--pos-01 {
    grid-column: 14 / span 2;
    justify-self: end;
    align-self: start;
    margin-top: -12px;
}

.overlay-badge--pos-02-a {
    grid-column: 5 / span 2;
    align-self: center;
    margin-top: -40px;
    background: var(--c-ochre);
    color: var(--c-substrate);
}
.overlay-badge--pos-02-b {
    grid-column: 10 / span 2;
    align-self: end;
}
.overlay-badge--pos-02-c {
    grid-column: 15 / span 2;
    align-self: start;
    margin-top: -40px;
    background: var(--c-border-teal);
}

.overlay-badge--pos-03 {
    grid-column: 13 / span 4;
    align-self: start;
    justify-self: end;
    margin-top: -12px;
}

/* =========================================================
   CIRCUIT BRIDGE (inside Circuit Panel)
   ========================================================= */

.bridge-circuit {
    width: 100%;
    height: 80px;
    display: block;
}

.bridge-circuit .trace {
    fill: none;
    stroke: var(--c-circuit);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 800ms ease-out;
}

.panel--circuit.is-visible .bridge-circuit .trace {
    stroke-dashoffset: 0;
}

.bridge-circuit .node {
    fill: var(--c-warm);
    opacity: 0;
    transition: opacity 400ms ease-out 500ms;
}
.panel--circuit.is-visible .bridge-circuit .node {
    opacity: 1;
}

/* =========================================================
   SCHEMATIC SVG (DEPTH 01 — architecture diagram)
   ========================================================= */

.schematic {
    width: 100%;
    margin: 16px 0;
}
.schematic__svg {
    width: 100%;
    height: auto;
    display: block;
}

.sch-frame {
    fill: none;
    stroke: var(--c-circuit);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.5;
}
.sch-core {
    fill: var(--c-warm);
    opacity: 0.85;
}
.sch-core-ring {
    fill: none;
    stroke: var(--c-ochre);
    stroke-width: 1;
    opacity: 0.7;
}
.sch-trace {
    fill: none;
    stroke: var(--c-circuit);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1000ms ease-out 200ms;
}
.panel.is-visible .sch-trace {
    stroke-dashoffset: 0;
}
.sch-node-sq { fill: var(--c-border-teal); }
.sch-node-sq--warm { fill: var(--c-warm); }
.sch-node-tri { fill: var(--c-ochre); }
.sch-node-ci { fill: var(--c-border-teal); }
.sch-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    fill: var(--c-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.sch-label--center {
    fill: var(--c-crystal);
    font-weight: 500;
    text-anchor: middle;
}
.sch-label {
    text-anchor: start;
}

/* =========================================================
   CONVERGING CIRCUITS (DEPTH 03)
   ========================================================= */

.converge {
    grid-column: 1 / span 16;
    grid-row: 2;
    width: 100%;
    height: 300px;
    margin: 20px 0 -20px;
    align-self: center;
    pointer-events: none;
    opacity: 0.85;
}

.converge-trace {
    fill: none;
    stroke: var(--c-warm);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.65;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 1400ms ease-out;
}

.depth--03.is-visible .converge-trace {
    stroke-dashoffset: 0;
}

.converge-node {
    fill: var(--c-warm);
    opacity: 0;
    transition: opacity 500ms ease-out 900ms;
}

.depth--03.is-visible .converge-node { opacity: 1; }

/* =========================================================
   ECHO SECTION (DEPTH 04)
   ========================================================= */

.echo {
    grid-column: 1 / span 16;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    text-align: center;
    padding: 60px 0;
}

.echo__text {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.24em;
    color: var(--c-body);
    text-transform: lowercase;
}

.echo__shape {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-warm);
    box-shadow: 0 0 0 6px rgba(184, 92, 56, 0.15);
}

.echo__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--c-muted);
    text-transform: uppercase;
}

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

@media (max-width: 1100px) {
    .depth { padding: 100px 4vw 100px 10vw; }
    .section-indicator { left: calc(10vw - 60px); }
    .circuit-trunk { left: 5%; }
    .overlay-badge--depth { left: 10vw; }

    .panel--pos-01-a { grid-column: 1 / span 8; }
    .panel--pos-01-bridge { grid-column: 9 / span 8; }
    .panel--pos-01-b { grid-column: 1 / span 10; }
    .panel--pos-02-a { grid-column: 1 / span 6; }
    .panel--pos-02-b { grid-column: 7 / span 6; margin-top: 60px; }
    .panel--pos-02-c { grid-column: 3 / span 6; }
    .panel--core { padding: 40px 40px; }
    .panel--pos-03 { grid-column: 2 / span 14; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .geo-nav { left: 16px; gap: 32px; }
    .depth {
        padding: 80px 20px 80px 64px;
        grid-template-columns: 1fr;
    }
    .section-indicator {
        left: 16px;
        top: 80px;
        width: 36px;
        height: 36px;
    }
    .section-indicator .connector { display: none; }
    .circuit-trunk { left: 32px; }
    .overlay-badge--depth { left: 64px; top: 20px; }

    .depth__header, .depth__header--right { grid-column: 1; margin-bottom: 24px; }

    .panel,
    .panel--primary,
    .panel--data,
    .panel--circuit,
    .panel--core,
    .panel--pos-00-status,
    .panel--pos-01-a,
    .panel--pos-01-bridge,
    .panel--pos-01-b,
    .panel--pos-02-a,
    .panel--pos-02-b,
    .panel--pos-02-c,
    .panel--pos-03 {
        grid-column: 1;
        margin-top: 0;
        padding: 24px;
        max-width: 100%;
    }

    .overlay-badge--pos-01,
    .overlay-badge--pos-02-a,
    .overlay-badge--pos-02-b,
    .overlay-badge--pos-02-c,
    .overlay-badge--pos-03 {
        grid-column: 1;
        justify-self: start;
        margin-top: 0;
    }

    .panel--core { padding: 28px 24px; }
    .title-xxl { font-size: 22vw; }
    .title-l { font-size: 36px; }
    .panel__title--lg { font-size: 28px; }

    .converge { display: none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .marble, .marble-warm { animation: none; }
    .panel { transition: opacity 200ms ease; transform: none; }
    .section-indicator.is-active { animation: none; }
    .bridge-circuit .trace, .sch-trace, .converge-trace { transition: none; stroke-dashoffset: 0; }
}