:root {
    /* Design terms: Inter" (Google Fonts Interference Patterns:** Patterns* Pattern: Overlapping CSS grid patterns created with `repeating-linear-gradient` — one set of lines at 0deg in #D4AF37 at 5% opacity. Interlocking circles in #D4AF37 at 8% opacity (`radial-gradient` repeating. IntersectionObserver` to trigger line-draw animations when cells enter the viewport. */
    --void-black: #0A0A0A;
    --void-black-alt: #0a0a0a;
    --charred-umber: #1A1510;
    --imperial-gold: #D4AF37;
    --oxidized-gold: #A08932;
    --straw-gold: #E8D48B;
    --muted-gold: #C9A040;
    --warm-silver: #C8C0AE;
    --weathered-bronze: #8A8272;
    --lacquer-red: #B83230;
    --antique-ivory: #E8E0CC;
    --cell: clamp(180px, 22vw, 320px);
    --gap: clamp(2px, 0.35vw, 6px);
}

* { box-sizing: border-box; }
html { background: var(--void-black); scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 500vh;
    overflow-x: hidden;
    font-family: "Inter", Arial, sans-serif;
    color: var(--warm-silver);
    background:
        radial-gradient(circle at 16% 12%, rgba(212, 175, 55, 0.12), transparent 26vw),
        radial-gradient(circle at 85% 45%, rgba(184, 50, 48, 0.10), transparent 22vw),
        linear-gradient(135deg, var(--void-black), #050505 46%, var(--charred-umber));
}

.viewport-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.05) 0 1px, transparent 1px 82px),
        repeating-linear-gradient(60deg, rgba(212, 175, 55, 0.05) 0 1px, transparent 1px 82px),
        repeating-linear-gradient(120deg, rgba(160, 137, 50, 0.045) 0 1px, transparent 1px 82px);
    transition: box-shadow 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.viewport-field.rupture-field { box-shadow: inset 0 0 120px rgba(184, 50, 48, 0.34); }
.ghost-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.04; transition: opacity 0.7s ease; }
.ghost-map path, .ghost-map polygon { fill: none; stroke: var(--imperial-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.viewport-field.rupture-field .ghost-map { opacity: 0.15; }
.depth-plane { position: absolute; inset: -18vh -12vw; will-change: transform; }
.plane-back {
    background:
        radial-gradient(circle, rgba(212, 175, 55, 0.075) 0 2px, transparent 3px 46px),
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(160, 137, 50, 0.06) 14px 16px, transparent 16px 38px);
    opacity: 0.7;
}
.plane-mid {
    background:
        conic-gradient(from 30deg at 20% 30%, transparent 0 14%, rgba(212, 175, 55, 0.08) 14% 17%, transparent 17% 55%, rgba(184, 50, 48, 0.055) 55% 58%, transparent 58%),
        repeating-radial-gradient(circle at 78% 22%, transparent 0 26px, rgba(212, 175, 55, 0.075) 27px 29px, transparent 30px 58px);
    mix-blend-mode: screen;
    opacity: 0.74;
}
.connector-web { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.82; }
.connector-web line { stroke: var(--muted-gold); stroke-width: 0.09; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s ease; opacity: 0.62; }
.connector-web line.drawn { stroke-dashoffset: 0; }

.honeycomb-narrative { position: relative; z-index: 1; }
.chamber {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 5vw, 76px) clamp(14px, 4vw, 64px);
    position: relative;
}
.chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 38%, rgba(232, 212, 139, 0.035) 48%, transparent 58% 100%);
    opacity: 0.58;
}
.chamber-rupture::after {
    content: "";
    position: absolute;
    inset: 7vh -6vw;
    background:
        linear-gradient(100deg, transparent 0 14%, rgba(184, 50, 48, 0.22) 15% 22%, transparent 23% 100%),
        linear-gradient(17deg, transparent 0 64%, rgba(184, 50, 48, 0.28) 65% 69%, transparent 70% 100%);
    clip-path: polygon(0 12%, 100% 0, 88% 86%, 10% 100%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.chamber-rupture.rupture-active::after { opacity: 1; }

.honey-grid {
    width: min(1420px, 108vw);
    display: grid;
    grid-template-columns: repeat(5, minmax(124px, 1fr));
    grid-auto-rows: calc(var(--cell) * 0.54);
    gap: var(--gap);
    margin-inline: auto;
    transform-style: preserve-3d;
}
.offset-grid { transform: translateX(clamp(-58px, -4vw, -18px)); }
.rupture-grid { transform: translateX(clamp(18px, 3vw, 58px)); }

.hex-cell {
    position: relative;
    min-height: var(--cell);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(44px) scale(0.92);
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s ease, filter 0.45s ease;
    isolation: isolate;
}
.hex-cell.visible { opacity: 1; transform: translateY(0) scale(1); }
.hex-cell::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: inherit;
    border: 1px solid rgba(212, 175, 55, 0.72);
    z-index: 2;
}
.hex-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 32%, rgba(232, 212, 139, 0.16) 45%, transparent 58% 100%);
    opacity: 0;
    transform: translateX(-80%);
    transition: transform 0.7s ease, opacity 0.5s ease;
    z-index: 1;
}
.hex-cell:hover::after { opacity: 1; transform: translateX(80%); }
.primary-cell {
    grid-column: span 2;
    grid-row: span 3;
    min-height: calc(var(--cell) * 1.7);
    background:
        linear-gradient(155deg, rgba(26, 21, 16, 0.98), rgba(10, 10, 10, 0.93)),
        repeating-linear-gradient(60deg, rgba(212, 175, 55, 0.08) 0 2px, transparent 2px 18px);
    box-shadow: inset 0 0 80px rgba(212, 175, 55, 0.14), 0 24px 70px rgba(0, 0, 0, 0.38);
}
.secondary-cell {
    background:
        linear-gradient(145deg, rgba(26, 21, 16, 0.92), rgba(10, 10, 10, 0.84)),
        radial-gradient(circle at 28% 18%, rgba(212, 175, 55, 0.25), transparent 50%);
}
.void-cell { background-color: var(--void-black-alt); opacity: 0.54; }
.void-cell.visible { opacity: 0.72; }
.pattern-stripes { background-image: repeating-linear-gradient(45deg, rgba(160, 137, 50, 0.18) 0 2px, transparent 2px 14px); }
.pattern-dots { background-image: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0 5px, transparent 6px 31px); }
.pattern-rings { background-image: repeating-radial-gradient(circle, transparent 0 24px, rgba(212, 175, 55, 0.15) 25px 27px, transparent 28px 54px); }

.hex-content {
    position: absolute;
    inset: 11%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 18px);
    text-align: center;
}
.cell-title { grid-column: span 3; grid-row: span 3; }
.cell-title .hex-content { inset: 7% 10%; }
.wordmark, .chamber-title {
    margin: 0;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 0.86;
    color: var(--imperial-gold);
    mix-blend-mode: screen;
    background: linear-gradient(110deg, #D4AF37 0%, #E8D48B 45%, #D4AF37 55%, #A08932 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}
.wordmark { font-size: clamp(4rem, 10vw, 9rem); }
.chamber-title { font-size: clamp(3.4rem, 7.5vw, 8rem); }
h2 {
    margin: 0;
    font-family: "Barlow Condensed", Arial Narrow, sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oxidized-gold);
}
.kicker, .annotation, .glyph-cell p, .small-note p, .swatch-cell p, .seal-cell p, .collage-cell p, .text-cell p {
    margin: 0;
    font-family: "Barlow Condensed", Arial Narrow, sans-serif;
    font-size: clamp(0.92rem, 1.45vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--antique-ivory);
}
.kicker { color: var(--oxidized-gold); }
.body-copy, .secondary-cell p {
    max-width: 38ch;
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(0.875rem, 1.2vw, 1.1rem);
    font-weight: 300;
    line-height: 1.72;
    color: var(--warm-silver);
}
.korean-glyph {
    font-family: "Nanum Myeongjo", serif;
    font-size: clamp(3rem, 6vw, 6rem);
    color: rgba(212, 175, 55, 0.7);
    line-height: 1;
}
.red-glyph { color: rgba(184, 50, 48, 0.82); }
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(62px, 8vw, 126px);
    min-height: clamp(46px, 6vw, 92px);
    padding: 0.15em 0.35em;
    border: 2px solid var(--imperial-gold);
    color: rgba(212, 175, 55, 0.78);
    font-family: "Nanum Myeongjo", serif;
    font-size: clamp(1.7rem, 3.2vw, 3.6rem);
    background: rgba(10, 10, 10, 0.46);
    box-shadow: inset 0 0 22px rgba(212, 175, 55, 0.10);
    opacity: 0;
    transform: scale(0.7) rotate(-20deg);
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s ease;
}
.visible .stamp { opacity: 0.88; transform: scale(1) rotate(var(--stamp-rot, -4deg)); }
.rotate-a { --stamp-rot: -5deg; }
.rotate-b { --stamp-rot: 8deg; }
.rotate-c { --stamp-rot: -1deg; }
.red-stamp { border-color: var(--lacquer-red); color: var(--lacquer-red); }
.seal-mark, .hex-seal {
    width: clamp(82px, 11vw, 158px);
    aspect-ratio: 1;
    display: block;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:
        radial-gradient(circle, rgba(232, 212, 139, 0.86), rgba(212, 175, 55, 0.42) 28%, rgba(10, 10, 10, 0.2) 29%),
        repeating-conic-gradient(from 30deg, rgba(212, 175, 55, 0.9) 0 6deg, transparent 6deg 18deg);
    border: 2px solid var(--imperial-gold);
    animation: sealBreathe 3.6s ease-in-out infinite;
    mix-blend-mode: overlay;
}
.hex-seal.large { width: clamp(112px, 14vw, 190px); }
.swatch {
    width: clamp(70px, 9vw, 120px);
    aspect-ratio: 1;
    clip-path: inherit;
    border: 2px solid var(--imperial-gold);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}
.gold { background: #D4AF37; } .umber { background: #1A1510; } .bronze { background: #8A8272; } .red { background: #B83230; } .parchment { background: #E8E0CC; }
.small-note span {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: clamp(2rem, 4.5vw, 4.8rem);
    letter-spacing: 0.06em;
    color: var(--imperial-gold);
}

.rupture-active .disruptible.visible {
    transform: rotate(var(--rupture-rotation)) translate(var(--rupture-x), var(--rupture-y)) scale(1.02);
    filter: drop-shadow(0 0 24px rgba(184, 50, 48, 0.34));
}
.rupture-active .primary-cell .hex-content { transform: translateX(-2vw) rotate(-1deg); }
.rupture-active .stamp { border-color: var(--lacquer-red); }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes sealBreathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.07) rotate(6deg); } }

@media (max-width: 980px) {
    :root { --cell: clamp(148px, 25vw, 250px); }
    .honey-grid { grid-template-columns: repeat(3, minmax(112px, 1fr)); grid-auto-rows: calc(var(--cell) * 0.6); width: min(900px, 106vw); }
    .cell-title, .primary-cell { grid-column: span 2; grid-row: span 2; min-height: calc(var(--cell) * 1.45); }
}

@media (max-width: 768px) {
    :root { --cell: clamp(142px, 45vw, 230px); }
    .connector-web { display: none; }
    .plane-mid { display: none; }
    .chamber { padding: 26px 7px; }
    .honey-grid, .offset-grid, .rupture-grid { grid-template-columns: repeat(2, minmax(132px, 1fr)); grid-auto-rows: calc(var(--cell) * 0.62); width: 104vw; transform: none; }
    .primary-cell, .cell-title { grid-column: span 2; grid-row: span 2; min-height: calc(var(--cell) * 1.25); }
    .wordmark { font-size: clamp(4rem, 23vw, 7rem); }
    .chamber-title { font-size: clamp(3.2rem, 17vw, 5.5rem); }
    .rupture-active .disruptible.visible { transform: rotate(var(--rupture-rotation)) scale(1); }
}