/* gunsul.studio — mirror-foil atelier
   palette: navy-metallic + chrome-metallic + cool-grays
   #0B0E14 ink · #161B26 deep-night · #3D4659 gunmetal
   #8B95A8 brushed-platinum · #C8D2E0 cool-pearl · #E8EEF7 frostlight
   #FFFFFF pure-white · #5C7AA8 iris-blue · #A38B5C tarnished-brass
*/

:root {
    --ink: #0B0E14;
    --deep-night: #161B26;
    --gunmetal: #3D4659;
    --platinum: #8B95A8;
    --pearl: #C8D2E0;
    --frost: #E8EEF7;
    --white: #FFFFFF;
    --iris: #5C7AA8;
    --brass: #A38B5C;

    --hex-w: 280px;
    --hex-h: 323px; /* hex-w * 1.1547 ≈ 323 */
    --hex-gap-x: 6px;
    --hex-gap-y: -64px; /* negative to interlock vertically */
    --scroll-angle: 0deg;
}

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

html, body {
    background: var(--deep-night);
    color: var(--frost);
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: 16px;
    overflow-x: hidden;
    cursor: none;
}

body {
    background:
        radial-gradient(ellipse at 50% 0%, #1c2230 0%, var(--deep-night) 60%, #0a0d14 100%);
    min-height: 100vh;
    position: relative;
}

/* faint grain over entire page */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(rgba(232,238,247,0.020) 1px, transparent 1px),
        radial-gradient(rgba(11,14,20,0.030) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: overlay;
    opacity: 0.55;
}

/* ============= MIRROR-BAR (left edge) ============= */
.mirror-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 100vh;
    z-index: 60;
    backdrop-filter: blur(12px) saturate(1.4) hue-rotate(8deg);
    -webkit-backdrop-filter: blur(12px) saturate(1.4) hue-rotate(8deg);
    overflow: hidden;
    border-right: 1px solid rgba(200, 210, 224, 0.18);
    pointer-events: none;
}

.mirror-bar-inner {
    position: absolute;
    inset: -10%;
    background: conic-gradient(
        from var(--scroll-angle),
        var(--gunmetal) 0deg,
        var(--pearl) 70deg,
        var(--platinum) 140deg,
        var(--frost) 200deg,
        var(--platinum) 260deg,
        var(--gunmetal) 360deg
    );
    filter: blur(3px) saturate(0.85);
    opacity: 0.85;
    mix-blend-mode: screen;
}

.mirror-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
        rgba(232,238,247,0.05) 0%,
        rgba(92,122,168,0.10) 50%,
        rgba(163,139,92,0.06) 100%);
    pointer-events: none;
}

/* ============= LIQUID-CHROME CURSOR BEAD ============= */
.bead {
    position: fixed;
    top: 0; left: 0;
    width: 64px;
    height: 64px;
    z-index: 80;
    pointer-events: auto;
    transform: translate3d(-200px, -200px, 0);
    will-change: transform, clip-path;
    mix-blend-mode: screen;
    cursor: none;
}

.bead-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 55% 70% at 35% 30%, var(--frost) 0%, var(--pearl) 30%, var(--platinum) 60%, var(--gunmetal) 100%);
    filter: blur(0.5px) drop-shadow(0 0 18px rgba(139, 149, 168, 0.65));
    transition: transform 240ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

.bead.morphed .bead-core {
    transform: scale(1.05) skew(-2deg, 1deg);
    filter: blur(0.4px) drop-shadow(0 0 24px rgba(92, 122, 168, 0.55));
}

.bead.active .bead-core {
    background:
        radial-gradient(ellipse 55% 70% at 35% 30%, var(--frost) 0%, var(--iris) 35%, var(--gunmetal) 75%, var(--ink) 100%);
}

/* ============= LIQUID-CHROME TEARDROP CURSOR ============= */
.cursor {
    position: fixed;
    top: 0; left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50% 50% 50% 0;
    transform: translate3d(-200px, -200px, 0) rotate(-45deg);
    pointer-events: none;
    z-index: 90;
    background:
        radial-gradient(ellipse 70% 80% at 35% 30%, var(--frost), var(--pearl) 50%, var(--gunmetal) 100%);
    mix-blend-mode: difference;
    transition: transform 200ms cubic-bezier(0.33, 0.0, 0.0, 1.0);
    will-change: transform;
}

.cursor.over-hex {
    transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) rotate(-45deg) scaleY(1.4);
}

/* ============= BEAD DRAWER ============= */
.bead-drawer {
    position: fixed;
    top: 50%;
    right: 36px;
    transform: translateY(-50%) translateX(calc(100% + 50px));
    z-index: 70;
    width: 240px;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(22,27,38,0.92), rgba(11,14,20,0.94));
    border: 1px solid rgba(200, 210, 224, 0.22);
    border-radius: 4px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 90px rgba(0,0,0,0.65), inset 0 0 1px rgba(232,238,247,0.25);
    transition: transform 480ms cubic-bezier(0.7, 0, 0.3, 1), opacity 320ms ease;
    opacity: 0;
}

.bead-drawer.open {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--frost);
    font-family: "Major Mono Display", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    cursor: none;
    padding: 0 0 18px 0;
    border-bottom: 1px solid rgba(200,210,224,0.18);
    width: 100%;
}

.lang-switch-track {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--gunmetal), var(--platinum));
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}

.lang-switch-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, var(--frost), var(--pearl) 60%, var(--platinum));
    transition: left 260ms cubic-bezier(0.7, 0, 0.3, 1);
    box-shadow: 0 0 6px rgba(232,238,247,0.6);
}

.lang-switch.en .lang-switch-knob { left: 23px; }

.lang-switch-label {
    flex: 1;
    text-align: left;
    color: var(--pearl);
}

.drawer-list {
    list-style: none;
    margin-top: 18px;
}

.drawer-list li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(200, 210, 224, 0.10);
    cursor: none;
    font-family: "Fraunces", serif;
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--pearl);
    transition: color 200ms, padding 240ms cubic-bezier(0.7, 0, 0.3, 1);
}

.drawer-list li:hover {
    color: var(--frost);
    padding-left: 8px;
}

.drawer-list li:last-child { border-bottom: none; }

.drawer-list .drawer-en { display: none; }
.bead-drawer.lang-en .drawer-list .drawer-ko { display: none; }
.bead-drawer.lang-en .drawer-list .drawer-en { display: inline; font-family: "Major Mono Display", monospace; letter-spacing: 0.06em; font-size: 0.95rem; }

/* ============= LATTICE ============= */
.lattice {
    position: relative;
    z-index: 5;
    max-width: 1440px;
    margin: 0 auto;
    padding: 90px 80px 120px 90px;
    display: flex;
    flex-direction: column;
    gap: var(--hex-gap-y);
}

.hex-row {
    display: flex;
    justify-content: center;
    gap: var(--hex-gap-x);
    position: relative;
}

.hex-row-3 { padding: 0 calc(var(--hex-w) * 0.5 + var(--hex-gap-x) * 0.5); }
.hex-row-4 { padding: 0; }
.hex-row-mega { padding: 0; min-height: calc(var(--hex-h) * 1.95); align-items: center; }

/* ============= HEX CELL ============= */
.hex {
    width: var(--hex-w);
    height: var(--hex-h);
    position: relative;
    flex-shrink: 0;
    transition: transform 380ms cubic-bezier(0.7, 0, 0.3, 1);
}

.hex-inner {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--deep-night);
    overflow: hidden;
    isolation: isolate;
}

/* the chrome surface */
.hex-mirror {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        var(--platinum) 0%,
        var(--pearl) 24%,
        var(--frost) 38%,
        var(--pearl) 52%,
        var(--gunmetal) 78%,
        var(--platinum) 100%
    );
    background-size: 220% 220%;
    background-position: 0% 0%;
    animation: chromePan 14s ease-in-out infinite;
    z-index: 1;
}

/* noise overlay on the chrome */
.hex-mirror::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        radial-gradient(rgba(11,14,20,0.10) 1px, transparent 1px);
    background-size: 3px 3px, 4px 4px;
    background-position: 0 0, 2px 1px;
    mix-blend-mode: overlay;
    opacity: 0.55;
    pointer-events: none;
}

/* hex inner highlight rim */
.hex-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:
        linear-gradient(135deg, rgba(232,238,247,0.4) 0%, transparent 30%),
        linear-gradient(315deg, rgba(11,14,20,0.5) 0%, transparent 30%);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: overlay;
}

.hex-inner::after {
    content: "";
    position: absolute;
    top: 1.5px; left: 1.5px; right: 1.5px; bottom: 1.5px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 1px solid rgba(200, 210, 224, 0.25);
    pointer-events: none;
    z-index: 4;
}

.hex-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14% 18%;
    text-align: center;
}

@keyframes chromePan {
    0%   { background-position:   0%   0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position:   0%   0%; }
}

/* slow chrome pan in third movement */
[data-movement="quiet"] .hex-mirror {
    animation-duration: 26s;
}

/* hovered hex chrome ripple — applied via JS class */
.hex.rippling .hex-mirror {
    filter: url(#chrome-ripple);
    animation-duration: 7s;
}

.hex.adjacent-ripple .hex-mirror {
    filter: contrast(1.08) brightness(1.04);
}

.hex:hover { transform: translateY(-1px); }
.hex:hover .hex-mirror { filter: brightness(1.06) saturate(1.05); }

/* ============= EMPTY HEX (load-bearing silence) ============= */
.hex.empty .hex-inner {
    background: linear-gradient(155deg, var(--deep-night), var(--gunmetal) 100%);
}

.hex.empty .hex-mirror {
    opacity: 0.78;
}

/* ============= GARMENT HEX ============= */
.hex.garment .hex-content {
    padding: 0;
}

.garment-art {
    position: absolute;
    inset: 22% 30% 28% 30%;
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 20px rgba(232,238,247,0.45)) drop-shadow(0 6px 18px rgba(11,14,20,0.45));
    mix-blend-mode: lighten;
}

/* chromatic aberration overlay on garment */
.hex.garment .hex-content::after {
    content: "";
    position: absolute;
    inset: 22% 30% 28% 30%;
    background:
        linear-gradient(90deg, rgba(232,238,247,0.0), rgba(0,255,255,0.04) 40%, rgba(255,0,255,0.04) 60%, rgba(232,238,247,0.0));
    mix-blend-mode: lighten;
    pointer-events: none;
    z-index: 3;
}

/* garment silhouettes via CSS — abstract chrome forms */
.art-coat {
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(232,238,247,0.85) 12%, rgba(200,210,224,0.7) 50%, rgba(139,149,168,0.6) 95%, transparent 100%);
    clip-path: polygon(28% 0%, 72% 0%, 78% 12%, 95% 22%, 88% 100%, 12% 100%, 5% 22%, 22% 12%);
}

.art-dress {
    background-image:
        linear-gradient(180deg, rgba(232,238,247,0.0) 0%, rgba(232,238,247,0.85) 14%, rgba(200,210,224,0.6) 60%, rgba(61,70,89,0.7) 100%);
    clip-path: polygon(40% 0%, 60% 0%, 65% 14%, 100% 100%, 0% 100%, 35% 14%);
}

.art-trouser {
    background-image:
        linear-gradient(180deg, rgba(232,238,247,0.85) 0%, rgba(200,210,224,0.7) 50%, rgba(139,149,168,0.5) 100%);
    clip-path: polygon(30% 0%, 70% 0%, 72% 100%, 56% 100%, 50% 30%, 44% 100%, 28% 100%);
}

.art-jacket {
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(232,238,247,0.85) 8%, rgba(139,149,168,0.65) 100%);
    clip-path: polygon(30% 0%, 70% 0%, 80% 16%, 95% 30%, 92% 80%, 75% 100%, 25% 100%, 8% 80%, 5% 30%, 20% 16%);
}

.art-shirt {
    background-image:
        linear-gradient(180deg, rgba(232,238,247,0.85) 0%, rgba(200,210,224,0.55) 100%);
    clip-path: polygon(30% 4%, 50% 0%, 70% 4%, 90% 22%, 86% 90%, 14% 90%, 10% 22%);
}

.art-skirt {
    background-image:
        linear-gradient(180deg, rgba(232,238,247,0.7) 0%, rgba(139,149,168,0.5) 100%);
    clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
}

.art-cape {
    background-image:
        linear-gradient(165deg, rgba(232,238,247,0.85) 0%, rgba(61,70,89,0.7) 100%);
    clip-path: polygon(48% 0%, 52% 0%, 95% 96%, 50% 80%, 5% 96%);
}

.art-vest {
    background-image:
        linear-gradient(180deg, rgba(232,238,247,0.85) 0%, rgba(200,210,224,0.55) 100%);
    clip-path: polygon(30% 6%, 70% 6%, 84% 22%, 78% 92%, 22% 92%, 16% 22%);
}

.art-coat-b {
    background-image:
        linear-gradient(180deg, transparent 0%, rgba(232,238,247,0.85) 10%, rgba(92,122,168,0.30) 50%, rgba(139,149,168,0.5) 100%);
    clip-path: polygon(32% 0%, 68% 0%, 75% 12%, 90% 24%, 82% 100%, 18% 100%, 10% 24%, 25% 12%);
}

/* hex content reveal */
.hex.reveal .hex-content,
.hex.reveal .garment-art {
    clip-path: inset(0 100% 0 0);
}

.hex.reveal.in-view .hex-content,
.hex.reveal.in-view .garment-art {
    clip-path: inset(0 0% 0 0);
    transition: clip-path 800ms cubic-bezier(0.7, 0, 0.3, 1);
}

/* ============= CAPTION ============= */
.caption {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    font-family: "Major Mono Display", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: var(--ink);
    text-transform: lowercase;
    background: rgba(232,238,247,0.85);
    padding: 5px 10px;
    border-radius: 1px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 8px rgba(11,14,20,0.4);
    white-space: nowrap;
    z-index: 4;
}

/* ============= STUDIO NOTE / PROSE HEX ============= */
.hex.prose .hex-mirror { opacity: 0.6; }

.studio-note {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.79rem;
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    max-width: 88%;
    position: relative;
    z-index: 6;
}

.studio-note em {
    font-style: italic;
    color: var(--gunmetal);
    letter-spacing: 0.02em;
    margin-right: 0.25em;
}

/* ============= CHOP MARK (꽃 brass) ============= */
.chop {
    font-family: "Gowun Batang", "Noto Serif KR", serif;
    font-weight: 700;
    color: var(--brass);
    font-size: 1.2em;
    margin-left: 6px;
    vertical-align: -2px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 -1px 0 rgba(0,0,0,0.4);
    /* never animated */
}

.chop-final {
    font-size: 1.5em;
    margin-top: 8px;
    display: block;
}

/* ============= GLYPH HEX ============= */
.foil-glyph {
    font-family: "Gowun Batang", "Major Mono Display", serif;
    font-weight: 700;
    font-size: 3.6rem;
    letter-spacing: 0.02em;
    color: var(--frost);
    text-shadow:
        0 -1px 0 rgba(11,14,20,0.7),
        0 1px 0 rgba(255,255,255,0.85),
        0 0 12px rgba(200,210,224,0.55),
        0 0 24px rgba(232,238,247,0.35);
    background: linear-gradient(180deg, var(--frost) 0%, var(--pearl) 40%, var(--platinum) 80%, var(--gunmetal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(232,238,247,0.4)) drop-shadow(0 1px 1px rgba(11,14,20,0.6));
}

.hex.glyph .hex-content { padding: 12% 14%; }

.hex.glyph[data-row="11"] .foil-glyph,
.hex-row[data-row="3"] .foil-glyph,
.hex-row[data-row="4"] .foil-glyph,
.hex-row[data-row="11"] .foil-glyph {
    font-size: 2.4rem;
    font-family: "Major Mono Display", monospace;
}

/* ============= MEGA HEX ============= */
.hex.mega {
    /* mega-hex spans across 3 columns visually — make it 2.45x */
    width: calc(var(--hex-w) * 2.45);
    height: calc(var(--hex-h) * 1.95);
    margin: 0 calc(var(--hex-w) * -0.6);
    z-index: 10;
}

.hex.mega .hex-inner {
    /* recomputed clip-path for wider mega-hex */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex.mega .hex-mirror {
    background: linear-gradient(115deg,
        var(--platinum) 0%,
        var(--pearl) 18%,
        var(--frost) 32%,
        var(--white) 42%,
        var(--pearl) 56%,
        var(--gunmetal) 78%,
        var(--platinum) 100%
    );
    animation-duration: 18s;
}

.mega-content {
    z-index: 8;
    padding: 6% 10%;
}

.mega-title {
    font-family: "Major Mono Display", "Courier New", monospace;
    font-weight: 400;
    font-size: clamp(3.4rem, 7.2vw, 5.8rem);
    letter-spacing: 0.04em;
    line-height: 0.94;
    text-transform: lowercase;
    color: var(--white);
    text-shadow:
        0 1px 0 rgba(11,14,20,0.6),
        0 -1px 0 rgba(255,255,255,0.5),
        0 0 36px rgba(232,238,247,0.45);
    mix-blend-mode: difference;
    margin-bottom: 18px;
}

.mega-sub {
    font-family: "Gowun Batang", "Noto Serif KR", serif;
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: rgba(232,238,247,0.78);
    padding: 6px 14px;
    display: inline-block;
    border-radius: 1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 0 14px rgba(11,14,20,0.45);
}

.lens-flare {
    position: absolute;
    top: 22%;
    left: 6%;
    width: 88%;
    height: 60px;
    transform: rotate(4deg);
    filter: blur(6px);
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* liquid-blob canvas */
.liquid-blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;
}

/* foil-loop video stand-in (mega-2) — animated css blob */
.foil-loop {
    position: absolute;
    inset: 12% 18%;
    z-index: 2;
    background:
        radial-gradient(ellipse 60% 50% at 30% 30%, var(--frost) 0%, var(--pearl) 25%, transparent 60%),
        radial-gradient(ellipse 50% 65% at 70% 70%, var(--white) 0%, var(--platinum) 25%, transparent 60%),
        radial-gradient(ellipse 70% 40% at 50% 50%, var(--iris) 0%, transparent 50%);
    filter: blur(14px) saturate(1.2);
    mix-blend-mode: screen;
    animation: foilDrift 11s ease-in-out infinite;
    opacity: 0.85;
    border-radius: 50%;
}

@keyframes foilDrift {
    0%   { transform: translate(0,0) scale(1)   rotate(0deg);   filter: blur(14px) saturate(1.2) hue-rotate(0deg); }
    33%  { transform: translate(8%,-4%) scale(1.08) rotate(60deg);  filter: blur(16px) saturate(1.3) hue-rotate(8deg); }
    66%  { transform: translate(-6%,6%) scale(0.95) rotate(120deg); filter: blur(13px) saturate(1.1) hue-rotate(-6deg); }
    100% { transform: translate(0,0) scale(1)   rotate(180deg); filter: blur(14px) saturate(1.2) hue-rotate(0deg); }
}

/* dust field (mega-3) */
.dust-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.dust-particle {
    position: absolute;
    width: 1px;
    height: 1px;
    background: var(--frost);
    box-shadow: 0 0 2px rgba(232,238,247,0.7);
    border-radius: 50%;
    will-change: transform;
}

/* ============= CONTACT HEX ============= */
.hex.contact .hex-mirror { opacity: 0.55; }

.contact-line {
    font-family: "Major Mono Display", monospace;
    font-size: 0.74rem;
    letter-spacing: 0.10em;
    color: var(--ink);
    text-transform: lowercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    line-height: 1.55;
    max-width: 86%;
    word-break: break-word;
}

/* ============= FOOTER ============= */
.foot {
    position: relative;
    z-index: 5;
    padding: 60px 80px 50px 90px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: "Gowun Batang", serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--platinum);
    border-top: 1px solid rgba(200,210,224,0.10);
    margin-top: 40px;
}

.foot-line:nth-child(3) {
    font-family: "Major Mono Display", monospace;
    letter-spacing: 0.14em;
}

.foot-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--platinum) 50%, transparent);
    opacity: 0.5;
}

/* ============= RESPONSIVE GRACEFUL DEGRADATION ============= */
@media (max-width: 980px) {
    :root {
        --hex-w: 230px;
        --hex-h: 266px;
        --hex-gap-y: -52px;
    }
    .lattice { padding: 70px 50px 90px 60px; }
    .hex.mega { width: calc(var(--hex-w) * 2.2); height: calc(var(--hex-h) * 1.85); margin: 0 calc(var(--hex-w) * -0.5); }
    .mirror-bar { width: 28px; }
}

@media (max-width: 720px) {
    html, body { cursor: auto; }
    .cursor, .bead, .bead-drawer { display: none; }
    .lattice { padding: 60px 30px 70px 50px; gap: 12px; }
    .hex-row { flex-direction: column; gap: 10px; padding: 0 !important; min-height: 0 !important; align-items: stretch; }
    .hex { width: 100%; height: 280px; }
    .hex.mega { width: 100%; height: 360px; margin: 0; }
    .hex .hex-inner,
    .hex.mega .hex-inner {
        clip-path: polygon(0 8%, 50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%);
    }
    .hex-inner::before, .hex-inner::after {
        clip-path: polygon(0 8%, 50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%);
    }
    .mirror-bar { width: 18px; }
    .foot { padding: 30px 20px 30px 30px; flex-wrap: wrap; }
}

/* no-js fallback */
.no-js .bead, .no-js .cursor, .no-js .bead-drawer { display: none; }
.no-js html, .no-js body { cursor: auto; }