/* HHUDDL.com — vaporwave-meets-city-noir, hexagonal honeycomb, spring physics */

:root {
    --burgundy: #6B1D3A;
    --burgundy-dark: #3A0E20;
    --pink: #FF6B9D;
    --cyan: #4ECDC4;
    --cream: #F5EDE3;
    --midnight: #1A0A12;
    --lavender: #C9B1D0;
    --gold: #D4A574;

    --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    --hex-size: 220px;

    --spring-in: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-hover: cubic-bezier(0.22, 0.68, 0, 1.71);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --font-body: "Source Serif 4", "Cormorant Garamond", Georgia, serif;
    --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-mono: "DM Mono", "Inter", "Space Mono", monospace;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--cream);
    background: var(--midnight);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* ---------- ambient overlays ---------- */

.noise-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: 0.03;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
    mix-blend-mode: overlay;
}

.scanlines {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 199;
    background: repeating-linear-gradient(
        0deg,
        rgba(107, 29, 58, 0.08) 0,
        rgba(107, 29, 58, 0.08) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: multiply;
}

body::after {
    /* CRT vignette + curvature hint */
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 198;
    background:
        radial-gradient(ellipse at center, transparent 50%, rgba(26, 10, 18, 0.55) 100%);
}

/* ---------- ambient floating artifacts ---------- */

.ambient-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.artifact {
    position: absolute;
    color: var(--lavender);
    opacity: 0.18;
    width: 120px;
    height: auto;
    will-change: transform;
}

.artifact-column {
    top: 12%;
    left: 6%;
    width: 60px;
    height: 200px;
    color: var(--lavender);
    opacity: 0.22;
    animation: drift1 24s ease-in-out infinite alternate;
}
.artifact-palm {
    bottom: 8%;
    right: 4%;
    width: 130px;
    color: var(--lavender);
    opacity: 0.18;
    animation: drift2 28s ease-in-out infinite alternate;
}
.artifact-bust {
    top: 45%;
    right: 10%;
    width: 100px;
    color: var(--gold);
    opacity: 0.22;
    animation: drift3 32s ease-in-out infinite alternate;
}
.artifact-blossom {
    top: 70%;
    left: 8%;
    width: 70px;
    color: var(--pink);
    opacity: 0.28;
    animation: drift4 20s ease-in-out infinite alternate;
}

@keyframes drift1 { 0% { transform: translate(0,0) rotate(-2deg);} 100% { transform: translate(30px, -20px) rotate(3deg);} }
@keyframes drift2 { 0% { transform: translate(0,0) rotate(0);} 100% { transform: translate(-40px, 30px) rotate(-4deg);} }
@keyframes drift3 { 0% { transform: translate(0,0) rotate(0);} 100% { transform: translate(20px, -30px) rotate(5deg);} }
@keyframes drift4 { 0% { transform: translate(0,0) rotate(0);} 100% { transform: translate(20px, 25px) rotate(8deg);} }

/* ---------- hex helpers ---------- */

.hex-shape {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: linear-gradient(135deg, var(--burgundy-dark) 0%, var(--burgundy) 100%);
    color: var(--cream);
    width: 100%;
    aspect-ratio: 1 / 0.866;
    padding: 0.5em;
    transition: transform 0.5s var(--spring-hover), background 0.4s var(--ease-soft);
}

/* ---------- floating hexagonal navigation ---------- */

.hex-nav {
    position: fixed;
    top: 24px;
    left: 24px;
    width: 220px;
    height: 220px;
    z-index: 250;
    pointer-events: none;
}

.hex-nav-trigger {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    background: transparent;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    z-index: 3;
    padding: 0;
}

.hex-trigger {
    background: linear-gradient(135deg, var(--pink) 0%, var(--burgundy) 80%);
    color: var(--cream);
    box-shadow: 0 0 24px rgba(255, 107, 157, 0.35);
    transition: transform 0.6s var(--spring-hover), filter 0.4s var(--ease-soft);
}
.hex-nav.open .hex-trigger { transform: rotate(30deg) scale(1.05); filter: hue-rotate(20deg); }
.hex-nav-trigger:hover .hex-trigger { transform: scale(1.08); }

.hex-trigger .hex-label {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--cream);
    text-shadow: 1px 0 var(--cyan), -1px 0 var(--pink);
}

.hex-rosette {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hex-petal {
    position: absolute;
    top: 50%; left: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.7s var(--spring-in),
        opacity 0.5s var(--ease-soft);
    text-decoration: none;
}

.hex-nav.open .hex-petal {
    opacity: 1;
    pointer-events: auto;
}

.hex-nav.open .hex-petal[data-petal="0"] { transform: translate(-50%, -50%) translate(0, -78px) scale(1); transition-delay: 0ms; }
.hex-nav.open .hex-petal[data-petal="1"] { transform: translate(-50%, -50%) translate(68px, -38px) scale(1); transition-delay: 60ms; }
.hex-nav.open .hex-petal[data-petal="2"] { transform: translate(-50%, -50%) translate(68px, 38px) scale(1); transition-delay: 120ms; }
.hex-nav.open .hex-petal[data-petal="3"] { transform: translate(-50%, -50%) translate(0, 78px) scale(1); transition-delay: 180ms; }
.hex-nav.open .hex-petal[data-petal="4"] { transform: translate(-50%, -50%) translate(-68px, 38px) scale(1); transition-delay: 240ms; }
.hex-nav.open .hex-petal[data-petal="5"] { transform: translate(-50%, -50%) translate(-68px, -38px) scale(1); transition-delay: 300ms; }

.hex-petal .hex-shape {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
    border: 1px solid rgba(212, 165, 116, 0.45);
}
.hex-petal:hover .hex-shape {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--burgundy) 100%);
    transform: scale(1.08);
}

.hex-petal .hex-label {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0.1em;
}
.hex-petal .hex-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--cream);
    opacity: 0.8;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ---------- chapters ---------- */

.chapter {
    position: relative;
    min-height: 100vh;
    padding: 12vh 6vw;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.chapter-header {
    margin-bottom: 4vh;
    max-width: 880px;
}

.chapter-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

.chapter-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 88px);
    line-height: 1.05;
    color: var(--cream);
    letter-spacing: -0.01em;
}

.meta-line {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--gold);
    text-transform: uppercase;
}

/* ---------- chapter 1: hero ---------- */

.chapter-hero {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 107, 157, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(78, 205, 196, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--midnight) 0%, var(--burgundy-dark) 100%);
    align-items: center;
    justify-content: center;
}

.hero-hex-wrap {
    position: relative;
    width: min(70vh, 80vw);
    aspect-ratio: 1 / 0.866;
    margin: 0 auto;
}

.hero-hex {
    position: absolute;
    inset: 0;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    overflow: hidden;
    background: var(--burgundy-dark);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    transform-origin: center center;
    animation: heroBreath 8s ease-in-out infinite alternate;
}

@keyframes heroBreath {
    0% { transform: scale(1) rotate(0); }
    100% { transform: scale(1.015) rotate(0.4deg); }
}

.hero-hex-photo {
    position: absolute;
    inset: 0;
}

.hero-hex-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4vh 8vw;
    z-index: 5;
    background: linear-gradient(135deg, rgba(58, 14, 32, 0.78) 0%, rgba(107, 29, 58, 0.55) 40%, rgba(255, 107, 157, 0.25) 100%);
}

.hero-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(36px, 5.5vw, 84px);
    line-height: 1;
    color: var(--cream);
    letter-spacing: -0.015em;
    text-shadow: 2px 0 rgba(78, 205, 196, 0.45), -2px 0 rgba(255, 107, 157, 0.4);
    margin: 18px 0 22px;
    max-width: 14ch;
}

.hero-sub {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--cream);
    opacity: 0.86;
    max-width: 38ch;
    font-style: italic;
}

.satellite {
    position: absolute;
    width: 130px;
    aspect-ratio: 1 / 0.866;
    z-index: 6;
    transition: transform 0.6s var(--spring-hover);
}
.satellite:hover { transform: translateY(-4px) scale(1.05); }

.satellite-a { top: -5%; right: -8%; }
.satellite-b { bottom: -8%; left: -8%; }
.satellite-c { top: 35%; right: -14%; }

.sat-hex {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
    border: 1px solid rgba(212, 165, 116, 0.5);
    padding: 0 12%;
}

.sat-eyebrow {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--cyan);
    text-transform: uppercase;
}
.sat-text {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 11px;
    color: var(--cream);
    margin-top: 6px;
    line-height: 1.3;
}

.hero-foot {
    position: absolute;
    bottom: 28px;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--gold);
}
.scroll-arrow {
    width: 18px;
    height: 30px;
    color: var(--gold);
    animation: bobArrow 2.4s var(--spring-in) infinite;
}
@keyframes bobArrow {
    0%, 100% { transform: translateY(0); opacity: 0.7;}
    50% { transform: translateY(8px); opacity: 1;}
}

/* ---------- duotone photo system ---------- */

.duotone-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--burgundy-dark);
}

.duotone-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.15) brightness(0.9);
    transition: filter 0.6s var(--ease-soft), transform 1.2s var(--spring-in);
    transform: scale(1.05);
}

.duotone-img[data-bg="city-1"] {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.4)),
        repeating-linear-gradient(90deg, #222 0 12%, #444 12% 15%, #222 15% 28%, #555 28% 33%, #222 33% 50%, #666 50% 56%, #222 56% 70%, #444 70% 75%, #222 75% 100%),
        linear-gradient(180deg, #1a1a1a 0%, #444 60%, #2a2a2a 100%);
}
.duotone-img[data-bg="city-2"] {
    background-image:
        radial-gradient(circle at 30% 60%, #888 0 6%, transparent 6%),
        radial-gradient(circle at 70% 40%, #aaa 0 8%, transparent 8%),
        repeating-linear-gradient(0deg, #2c2c2c 0 8px, #1a1a1a 8px 16px),
        linear-gradient(180deg, #555 0%, #1a1a1a 100%);
}
.duotone-img[data-bg="city-3"] {
    background-image:
        repeating-linear-gradient(0deg, #1a1a1a 0 10px, #333 10px 14px),
        repeating-linear-gradient(90deg, transparent 0 80%, #555 80% 82%, transparent 82% 100%),
        linear-gradient(180deg, #222 0%, #4a4a4a 100%);
}
.duotone-img[data-bg="city-4"] {
    background-image:
        radial-gradient(ellipse at 50% 80%, #888 0 10%, transparent 11%),
        repeating-linear-gradient(90deg, #2a2a2a 0 6px, #3a3a3a 6px 8px),
        linear-gradient(180deg, #1a1a1a 0%, #555 100%);
}
.duotone-img[data-bg="city-5"] {
    background-image:
        repeating-linear-gradient(135deg, #1a1a1a 0 4px, #444 4px 6px),
        linear-gradient(180deg, #222 0%, #3a3a3a 100%);
}
.duotone-img[data-bg="city-6"] {
    background-image:
        repeating-linear-gradient(90deg, #2c2c2c 0 18%, #1a1a1a 18% 22%, #2c2c2c 22% 40%, #1a1a1a 40% 44%, #2c2c2c 44% 62%, #1a1a1a 62% 66%, #2c2c2c 66% 84%, #1a1a1a 84% 88%, #2c2c2c 88% 100%),
        linear-gradient(180deg, #2a2a2a 0%, #4a4a4a 100%);
}
.duotone-img[data-bg="city-7"] {
    background-image:
        radial-gradient(circle at 25% 40%, #aaa 0 4%, transparent 5%),
        radial-gradient(circle at 75% 70%, #aaa 0 5%, transparent 6%),
        radial-gradient(circle at 50% 20%, #999 0 3%, transparent 4%),
        linear-gradient(180deg, #111 0%, #333 100%);
}
.duotone-img[data-bg="city-8"] {
    background-image:
        repeating-linear-gradient(0deg, #1a1a1a 0 6px, #2a2a2a 6px 8px),
        linear-gradient(180deg, #2a2a2a 0%, #444 100%);
}
.duotone-img[data-bg="city-9"] {
    background-image:
        radial-gradient(ellipse at 50% 90%, #777 0 14%, transparent 15%),
        linear-gradient(180deg, #1a1a1a 0%, #4a4a4a 100%);
}
.duotone-img[data-bg="city-10"] {
    background-image:
        repeating-linear-gradient(45deg, #1a1a1a 0 4px, #333 4px 6px),
        linear-gradient(180deg, #222 0%, #444 100%);
}

.duotone-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s var(--ease-soft);
}
.duotone-overlay.multiply {
    background: var(--burgundy-dark);
    mix-blend-mode: multiply;
}
.duotone-overlay.screen {
    background: var(--pink);
    mix-blend-mode: screen;
}
.duotone-overlay.screen.cyan {
    background: var(--cyan);
}

.duotone-stage.duotone-on .duotone-img {
    filter: grayscale(1) contrast(1.05) brightness(0.85);
    transform: scale(1);
}
.duotone-stage.duotone-on .duotone-overlay.multiply { opacity: 0.85; }
.duotone-stage.duotone-on .duotone-overlay.screen { opacity: 0.55; }

/* ---------- chapter 2: honeycomb grid ---------- */

.chapter-grid {
    background: linear-gradient(180deg, var(--burgundy-dark) 0%, var(--midnight) 100%);
}

.honeycomb-grid {
    --hex-w: 220px;
    --hex-h: 254px; /* hex-w / 0.866 */
    --gap-x: 12px;
    --row-overlap: -64px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-x);
    margin-top: 4vh;
    max-width: 1100px;
    align-self: center;
    width: 100%;
}

.hc-cell {
    position: relative;
    width: var(--hex-w);
    height: var(--hex-h);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
    overflow: hidden;
    transform: scale(0);
    opacity: 0;
    transition:
        transform 0.9s var(--spring-in) var(--cell-delay, 0ms),
        opacity 0.6s var(--ease-soft) var(--cell-delay, 0ms),
        background 0.4s var(--ease-soft);
    cursor: default;
}
.hc-cell.in-view {
    transform: scale(1);
    opacity: 1;
}
.hc-cell:hover {
    background: radial-gradient(circle, var(--cyan) 0%, var(--burgundy-dark) 70%);
}

/* honeycomb offset every other row using nth-child */
.honeycomb-grid > .hc-cell:nth-child(n+4) {
    margin-top: var(--row-overlap);
}
.honeycomb-grid > .hc-cell:nth-child(4),
.honeycomb-grid > .hc-cell:nth-child(5),
.honeycomb-grid > .hc-cell:nth-child(6) {
    transform-origin: center;
}

.hc-photo .duotone-stage {
    position: absolute;
    inset: 0;
}

.hc-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 14%;
}
.cell-num {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.cell-body {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--cream);
    line-height: 1.4;
}

.hc-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--gold);
    padding: 14% 14% 18%;
}
.cell-icon {
    width: 60%;
    height: auto;
    margin-bottom: 10px;
}
.cell-tag {
    position: absolute;
    bottom: 18%;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 4;
}
.hc-photo .cell-tag {
    color: var(--cream);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* ---------- chapter 3: horizontal strip ---------- */

.chapter-strip {
    background: linear-gradient(180deg, var(--midnight) 0%, var(--burgundy-dark) 100%);
    overflow: hidden;
    padding: 14vh 0 8vh;
}

.strip-track {
    display: flex;
    gap: 28px;
    padding: 0 6vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.strip-track::-webkit-scrollbar { display: none; }

.strip-panel {
    flex: 0 0 auto;
    width: clamp(280px, 36vw, 480px);
    height: 60vh;
    min-height: 420px;
    scroll-snap-align: center;
    border: 1px solid rgba(212, 165, 116, 0.3);
    background: rgba(58, 14, 32, 0.5);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 1s var(--spring-in), opacity 0.7s var(--ease-soft);
}
.strip-panel.in-view { transform: translateY(0); opacity: 1; }

.strip-photo {
    padding: 0;
    overflow: hidden;
}

.strip-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.strip-line {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(24px, 2.4vw, 38px);
    line-height: 1.15;
    color: var(--cream);
}

.hex-divider {
    margin-top: 8vh;
    width: 100%;
    overflow: hidden;
}
.hex-divider-svg {
    width: 100%;
    height: 80px;
    display: block;
}
.hex-stroke polygon {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 1.4s var(--ease-soft);
}
.hex-divider.in-view .hex-stroke polygon {
    stroke-dashoffset: 0;
}
.hex-divider.in-view .hex-stroke polygon:nth-child(odd) { transition-delay: 0.1s; }
.hex-divider.in-view .hex-stroke polygon:nth-child(even) { transition-delay: 0.3s; }

/* ---------- chapter 4: night ---------- */

.chapter-night {
    background:
        radial-gradient(circle at 80% 20%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, var(--burgundy-dark) 0%, var(--midnight) 100%);
}

.night-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6vw;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 6vh auto 0;
}

.night-numeral {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.numeral-display {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(160px, 22vw, 320px);
    line-height: 0.85;
    color: var(--gold);
    letter-spacing: -0.05em;
    text-shadow:
        3px 0 rgba(255, 107, 157, 0.45),
        -3px 0 rgba(78, 205, 196, 0.45);
}

.numeral-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--cyan);
    text-transform: uppercase;
}

.night-text {
    position: relative;
    padding-left: 40px;
}

.quote-mark {
    position: absolute;
    top: -40px; left: 0;
    font-family: var(--font-display);
    font-size: 160px;
    line-height: 1;
    color: var(--burgundy);
    opacity: 0.6;
}
.pull-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.25;
    color: var(--cream);
}
.quote-attr {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: 22px;
}

.night-hex-cluster {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 6vh;
}

.hc-mini {
    width: 160px;
    height: 184px;
    position: relative;
}

/* ---------- chapter 5: tower ---------- */

.chapter-tower {
    background: linear-gradient(180deg, var(--midnight) 0%, var(--burgundy-dark) 100%);
}

.tower-row {
    width: 100%;
    margin-top: 4vh;
    overflow: hidden;
}
.tower-svg {
    width: 100%;
    height: auto;
    display: block;
}
.tower-svg g rect, .tower-svg g line, .tower-svg g polygon, .tower-svg g circle {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.6s var(--ease-soft);
}
.chapter-tower.in-view .tower-svg g rect,
.chapter-tower.in-view .tower-svg g line,
.chapter-tower.in-view .tower-svg g polygon,
.chapter-tower.in-view .tower-svg g circle {
    stroke-dashoffset: 0;
}

.tower-caption {
    margin-top: 18px;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--lavender);
    text-align: center;
    font-size: 14px;
}

/* ---------- chapter 6: echo ---------- */

.chapter-echo {
    background: linear-gradient(180deg, var(--burgundy-dark) 0%, var(--midnight) 60%, #0a0508 100%);
}
.echo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 6vh;
    max-width: 1100px;
    align-self: center;
    width: 100%;
}
.echo-cell {
    border: 1px solid rgba(212, 165, 116, 0.3);
    padding: 32px;
    background: linear-gradient(160deg, rgba(107, 29, 58, 0.45) 0%, rgba(26, 10, 18, 0.6) 100%);
    transform: translateY(28px);
    opacity: 0;
    transition: transform 0.9s var(--spring-in) var(--cell-delay, 0ms),
                opacity 0.7s var(--ease-soft) var(--cell-delay, 0ms);
    position: relative;
}
.echo-cell::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 18px; height: 18px;
    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}
.echo-cell::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 18px; height: 18px;
    border-bottom: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}
.echo-cell.in-view { transform: translateY(0); opacity: 1; }

.echo-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cyan);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.echo-body {
    margin-top: 18px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.35;
    color: var(--cream);
}

/* ---------- footer scatter ---------- */

.site-footer {
    position: relative;
    padding: 16vh 6vw 8vh;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(78, 205, 196, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, #0a0508 0%, var(--midnight) 100%);
    z-index: 2;
}

.footer-hex-scatter {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: 320px;
}

.fh-cell {
    position: absolute;
    width: 130px;
    aspect-ratio: 1 / 0.866;
    transform: translate(-50%, -50%);
    transition: transform 1s var(--spring-in), opacity 0.7s var(--ease-soft);
}

.fh-cell .hex-shape {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
    border: 1px solid rgba(212, 165, 116, 0.5);
    cursor: default;
}
.fh-cell:hover .hex-shape {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--burgundy) 100%);
    transform: scale(1.06);
}

.fh-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
}
.fh-sub {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 11px;
    color: var(--cream);
    margin-top: 4px;
}

/* clustered start positions (closer to center) */
.fh-1 { top: 50%; left: 50%; }
.fh-2 { top: 50%; left: 50%; }
.fh-3 { top: 50%; left: 50%; }
.fh-4 { top: 50%; left: 50%; }
.fh-5 { top: 50%; left: 50%; }

/* scattered positions when in-view */
.footer-hex-scatter.scattered .fh-1 { transform: translate(-50%, -50%) translate(-260px, -60px); }
.footer-hex-scatter.scattered .fh-2 { transform: translate(-50%, -50%) translate(-130px, 60px); }
.footer-hex-scatter.scattered .fh-3 { transform: translate(-50%, -50%) translate(0, -80px); }
.footer-hex-scatter.scattered .fh-4 { transform: translate(-50%, -50%) translate(140px, 60px); }
.footer-hex-scatter.scattered .fh-5 { transform: translate(-50%, -50%) translate(270px, -60px); }

.footer-meta {
    text-align: center;
    margin-top: 6vh;
}
.footer-meta .meta-line + .meta-line { margin-top: 6px; opacity: 0.7; }

/* ---------- spring text ---------- */

.spring-char {
    display: inline-block;
    transform: scale(1.5) translateY(-6px);
    opacity: 0;
    transition: transform 0.7s var(--spring-in), opacity 0.5s var(--ease-soft);
    will-change: transform, opacity;
}
.spring-char.in {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.spring-char.space { width: 0.32em; }

/* ---------- VHS glitch entry ---------- */

.chapter.glitching {
    animation: vhsGlitch 0.5s steps(6, end);
}
@keyframes vhsGlitch {
    0% { clip-path: inset(0 0 0 0); transform: translateX(0); }
    20% { clip-path: inset(8% 0 60% 0); transform: translateX(-3px); }
    40% { clip-path: inset(40% 0 30% 0); transform: translateX(3px); }
    60% { clip-path: inset(70% 0 5% 0); transform: translateX(-2px); }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .hex-nav { width: 180px; height: 180px; top: 14px; left: 14px; }
    .hex-nav-trigger { width: 70px; height: 70px; }
    .hex-nav.open .hex-petal[data-petal="0"] { transform: translate(-50%, -50%) translate(0, -64px) scale(1); }
    .hex-nav.open .hex-petal[data-petal="1"] { transform: translate(-50%, -50%) translate(56px, -32px) scale(1); }
    .hex-nav.open .hex-petal[data-petal="2"] { transform: translate(-50%, -50%) translate(56px, 32px) scale(1); }
    .hex-nav.open .hex-petal[data-petal="3"] { transform: translate(-50%, -50%) translate(0, 64px) scale(1); }
    .hex-nav.open .hex-petal[data-petal="4"] { transform: translate(-50%, -50%) translate(-56px, 32px) scale(1); }
    .hex-nav.open .hex-petal[data-petal="5"] { transform: translate(-50%, -50%) translate(-56px, -32px) scale(1); }
    .hex-petal { width: 60px; height: 60px; }

    .satellite { display: none; }
    .satellite-b { display: block; bottom: -12%; left: 0; }

    .night-grid { grid-template-columns: 1fr; }
    .night-text { padding-left: 24px; }
    .night-hex-cluster { flex-wrap: wrap; }

    .echo-grid { grid-template-columns: 1fr; }

    .honeycomb-grid > .hc-cell:nth-child(n+4) { margin-top: 0; }
    .honeycomb-grid {
        gap: 18px;
    }
    .hc-cell {
        clip-path: none;
        -webkit-clip-path: none;
        border-radius: 14px;
        width: min(320px, 90%);
        height: 220px;
        position: relative;
    }
    .hc-cell::before, .hc-cell::after {
        content: "";
        position: absolute;
        width: 22px; height: 22px;
        border-color: var(--gold);
    }
    .hc-cell::before { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid;}
    .hc-cell::after { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

    .footer-hex-scatter { height: 520px; }
    .footer-hex-scatter.scattered .fh-1 { transform: translate(-50%, -50%) translate(0, -180px); }
    .footer-hex-scatter.scattered .fh-2 { transform: translate(-50%, -50%) translate(0, -90px); }
    .footer-hex-scatter.scattered .fh-3 { transform: translate(-50%, -50%) translate(0, 0); }
    .footer-hex-scatter.scattered .fh-4 { transform: translate(-50%, -50%) translate(0, 90px); }
    .footer-hex-scatter.scattered .fh-5 { transform: translate(-50%, -50%) translate(0, 180px); }
}