/* ppuzzl.dev v2 — Dreamy-ethereal vaporwave atelier in cool grayscale.
   Hexagonal-honeycomb compositional grammar, Playfair-elegant typography,
   tri-layer dolly-zoom parallax, leather-grain ground, pulse-attention breath. */

:root {
    /* Palette — strict cool grays, with two warm accents inside specimen substrates */
    --basalt:        #1B1F26;
    --slate-veil:    #2A303B;
    --pewter-mist:   #5A6373;
    --moonstone:     #9CA4B0;
    --fog:           #C7CCD3;
    --whisper:       #E5E7EB;
    --vellum-cream:  #F0EBE2;
    --quiet-plum:    #3F3848;

    /* Bracketed palette colors from DESIGN: #B0B7C2 and #FF71CE (used as cool/plum highlights only). */
    --pewter-pale:   #B0B7C2;
    --vapor-rose:    #FF71CE; /* used as far-reduced subliminal accent, opacity 0.06 only */
    --vapor-cyan:    #01CDFE; /* used as far-reduced subliminal accent, opacity 0.05 only */
    --gradient-stop: #3A4254; /* DESIGN: ratcheted-down stock vaporwave gradient endpoint */

    /* Timing — bias everything slow. */
    --ease-reverie: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast:    800ms;
    --dur-mid:    1200ms;
    --dur-slow:   1800ms;

    /* Parallax offsets driven from JS (px) */
    --parallax-back: 0px;
    --parallax-mid:  0px;
}

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

html { scroll-behavior: auto; background: var(--basalt); }

body {
    font-family: 'Cormorant Garamond', 'Inter', Georgia, serif;
    color: var(--pewter-mist);
    background: var(--basalt);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- */
/* Layered depth — back / mid / front                                */
/* ---------------------------------------------------------------- */

.layer { position: relative; z-index: 1; }

.layer.back {
    position: fixed;
    inset: -10vh -5vw;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, var(--parallax-back), 0);
}

.layer.mid {
    position: absolute;
    inset: 0 -2vw;
    width: calc(100% + 4vw);
    height: 100%;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, var(--parallax-mid), 0);
}

.layer.front {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------- */
/* Back layer — leather grain texture (animated)                    */
/* ---------------------------------------------------------------- */

.leather-texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 110vh;
    opacity: 0.045;
    mix-blend-mode: soft-light;
    animation: grainLissajous 60s linear infinite;
}

@keyframes grainLissajous {
    0%   { transform: translate3d(0,    0,    0); }
    25%  { transform: translate3d(6px, -4px, 0); }
    50%  { transform: translate3d(-2px, 7px, 0); }
    75%  { transform: translate3d(-7px,-3px, 0); }
    100% { transform: translate3d(0,    0,    0); }
}

/* Drifting mist plate — back layer ambient weather */

.mist-plate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 110vh;
    opacity: 0.5;
    overflow: hidden;
}

.mist-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    will-change: transform;
    mix-blend-mode: screen;
}

.mb1 { width: 60vw; height: 60vw; top: -10vh; left: -10vw;
       background: radial-gradient(circle, var(--slate-veil), transparent 60%);
       animation: mistDrift1 90s ease-in-out infinite; }
.mb2 { width: 50vw; height: 50vw; top: 30vh;  right: -15vw;
       background: radial-gradient(circle, var(--quiet-plum), transparent 60%);
       animation: mistDrift2 90s ease-in-out infinite; }
.mb3 { width: 70vw; height: 70vw; top: 60vh;  left: 20vw;
       background: radial-gradient(circle, var(--slate-veil), transparent 60%);
       animation: mistDrift3 110s ease-in-out infinite; }
.mb4 { width: 40vw; height: 40vw; top: 90vh;  right: 10vw;
       background: radial-gradient(circle, var(--quiet-plum), transparent 65%);
       animation: mistDrift4 100s ease-in-out infinite; }
.mb5 { width: 55vw; height: 55vw; top: 30vh;  left: 35vw;
       background: radial-gradient(circle, var(--slate-veil), transparent 60%);
       animation: mistDrift5 120s ease-in-out infinite; }

@keyframes mistDrift1 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(8vw, 4vh, 0) scale(1.08); }
}
@keyframes mistDrift2 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(-7vw, 6vh, 0) scale(0.94); }
}
@keyframes mistDrift3 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(5vw,-5vh, 0) scale(1.05); }
}
@keyframes mistDrift4 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(-6vw,-3vh, 0) scale(0.92); }
}
@keyframes mistDrift5 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(3vw, 7vh, 0) scale(1.07); }
}

/* ---------------------------------------------------------------- */
/* Mid layer — sparse decorative lattice hexagons                   */
/* ---------------------------------------------------------------- */

.lattice-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.85;
}

/* ---------------------------------------------------------------- */
/* Front layer — Cells                                              */
/* ---------------------------------------------------------------- */

.cell {
    position: relative;
    padding: 80px clamp(20px, 4vw, 80px);
    width: 100%;
    z-index: 5;
}

.cell-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cell-tag {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: var(--moonstone);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    font-feature-settings: "smcp";
}

.cell-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    color: var(--fog);
    letter-spacing: -0.015em;
}

.cell-rule {
    width: 240px;
    height: 1px;
    background: var(--pewter-mist);
    margin-top: 8px;
    opacity: 0.6;
}

/* ---------------------------------------------------------------- */
/* CELL 00 — The Veil                                               */
/* ---------------------------------------------------------------- */

.cell-00 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.veil-hex {
    position: relative;
    width: min(86vw, 920px);
    height: min(86vw, 920px);
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: veilBreath 6s ease-in-out infinite;
}

@keyframes veilBreath {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1.0; }
}

.veil-hex-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.veil-hex-stroke {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: veilStrokeDraw 1.4s var(--ease-reverie) 0.2s forwards;
}

@keyframes veilStrokeDraw {
    to { stroke-dashoffset: 0; }
}

.veil-gradient-mesh {
    position: absolute;
    inset: 8%;
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    background:
        radial-gradient(circle at 25% 30%, var(--slate-veil), transparent 55%),
        radial-gradient(circle at 75% 70%, var(--quiet-plum), transparent 60%),
        radial-gradient(circle at 50% 50%, var(--pewter-mist), transparent 70%),
        var(--basalt);
    opacity: 0;
    animation:
        veilMeshAppear 1.2s var(--ease-reverie) 1.0s forwards,
        veilMeshDrift 28s ease-in-out 2.2s infinite;
}

@keyframes veilMeshAppear {
    to { opacity: 0.85; }
}
@keyframes veilMeshDrift {
    0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
    50%      { background-position: 6% 4%, -4% 6%, 3% -3%; }
}

.veil-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 clamp(20px, 6vw, 80px);
    max-width: 90%;
}

.vapor-halo {
    position: absolute;
    width: 120%;
    height: 280px;
    left: -10%;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at center,
                var(--quiet-plum) 0%,
                rgba(63, 56, 72, 0.45) 28%,
                transparent 70%);
    filter: blur(40px);
    opacity: 0;
    animation:
        haloAppear 1.8s var(--ease-reverie) 2.4s forwards,
        haloBreath 6s ease-in-out 4.5s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes haloAppear {
    to { opacity: 0.55; }
}
@keyframes haloBreath {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.7; }
}

.wordmark {
    position: relative;
    z-index: 3;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(72px, 9vw, 168px);
    line-height: 1;
    color: var(--whisper);
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: wordmarkAppear 1.2s var(--ease-reverie) 1.6s forwards,
               wordmarkBreath 6s ease-in-out 4.5s infinite;
}

@keyframes wordmarkAppear {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wordmarkBreath {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1.0; }
}

.wm-italic { font-style: italic; font-weight: 500; }
.wm-roman  { font-style: normal; font-weight: 500; }

.veil-subtitle {
    position: relative;
    z-index: 3;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--moonstone);
    margin-top: 32px;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: subtitleAppear 0.9s var(--ease-reverie) 3.0s forwards;
}

@keyframes subtitleAppear {
    to { opacity: 0.6; }
}

.veil-arrow {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: arrowAppear 1.2s var(--ease-reverie) 4.8s forwards,
               arrowDrift 6s ease-in-out 6s infinite;
}

@keyframes arrowAppear {
    to { opacity: 0.7; }
}
@keyframes arrowDrift {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
    50%      { transform: translateX(-50%) translateY(8px); opacity: 0.85; }
}

/* ---------------------------------------------------------------- */
/* Common — Hexagon shape (macro)                                   */
/* ---------------------------------------------------------------- */
/* A regular hexagon clip-path, flat-top */
.hex-shape {
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
}

/* Entrance state */
.hex-anim-in {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
    transition: clip-path var(--dur-mid) var(--ease-reverie),
                opacity   var(--dur-mid) var(--ease-reverie);
}
.hex-anim-in.entered {
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    opacity: 1;
}

/* ---------------------------------------------------------------- */
/* CELL 01 — The Comb Awakens                                        */
/* ---------------------------------------------------------------- */

.cell-01 {
    min-height: 120vh;
}

.comb-grid {
    --hex-w: clamp(120px, 16vw, 230px);
    --hex-h: calc(var(--hex-w) * 1.155);
    --hex-row-h: calc(var(--hex-h) * 0.78);
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    height: calc(var(--hex-row-h) * 3 + var(--hex-h) * 0.22 + 80px);
}

.hex {
    position: absolute;
    width: var(--hex-w);
    height: var(--hex-h);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    transition: clip-path 1s var(--ease-reverie),
                opacity 1s var(--ease-reverie),
                transform 1s var(--ease-reverie);
    opacity: 0;
    will-change: transform, opacity;
}

.hex.entered {
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    opacity: 1;
}

/* Honeycomb positioning — flat-top, offset rows.
   Column 1,3,5 on row N sit at y = (N-1)*rowH.
   Column 2,4 (odd row index 1 = top) shift up by half a row when row is odd.
   We use a simpler staggered scheme where columns 2 & 4 are vertically shifted. */
.hex[style*="--col:1"] { left: calc(0 * var(--hex-w) * 0.75); }
.hex[style*="--col:2"] { left: calc(1 * var(--hex-w) * 0.75); }
.hex[style*="--col:3"] { left: calc(2 * var(--hex-w) * 0.75); }
.hex[style*="--col:4"] { left: calc(3 * var(--hex-w) * 0.75); }
.hex[style*="--col:5"] { left: calc(4 * var(--hex-w) * 0.75); }

/* Row positioning + odd-column vertical offset */
.hex[style*="--col:1"][style*="--row:1"] { top: 0; }
.hex[style*="--col:3"][style*="--row:1"] { top: 0; }
.hex[style*="--col:5"][style*="--row:1"] { top: 0; }

.hex[style*="--col:2"][style*="--row:1"] { top: calc(var(--hex-h) * 0.5); }
.hex[style*="--col:4"][style*="--row:1"] { top: calc(var(--hex-h) * 0.5); }

.hex[style*="--col:1"][style*="--row:2"] { top: calc(var(--hex-h) * 1.0); }
.hex[style*="--col:3"][style*="--row:2"] { top: calc(var(--hex-h) * 1.0); }
.hex[style*="--col:5"][style*="--row:2"] { top: calc(var(--hex-h) * 1.0); }

.hex[style*="--col:2"][style*="--row:2"] { top: calc(var(--hex-h) * 1.5); }
.hex[style*="--col:4"][style*="--row:2"] { top: calc(var(--hex-h) * 1.5); }

.hex[style*="--col:1"][style*="--row:3"] { top: calc(var(--hex-h) * 2.0); }
.hex[style*="--col:3"][style*="--row:3"] { top: calc(var(--hex-h) * 2.0); }
.hex[style*="--col:5"][style*="--row:3"] { top: calc(var(--hex-h) * 2.0); }

/* Center the whole comb */
.comb-grid {
    padding-left: max(0px, calc(50% - (5 * var(--hex-w) * 0.75 + var(--hex-w) * 0.25) / 2));
}

/* Depth layers — subtle */
.hex.depth-back  { transform: translateZ(0) translateY(-40px) scale(0.94); filter: blur(0.5px); }
.hex.depth-back.entered  { transform: translateZ(0) translateY(0) scale(0.94); }
.hex.depth-mid   { transform: translateZ(0) translateY(0) scale(1); }
.hex.depth-front { transform: translateZ(0) translateY(20px) scale(1.04); }
.hex.depth-front.entered { transform: translateZ(0) translateY(0) scale(1.04); }

.hex-inner {
    position: absolute;
    inset: 0;
    background: var(--slate-veil);
    border: 1px solid var(--pewter-mist);
    box-sizing: border-box;
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14% 18%;
    gap: 6px;
    text-align: center;
}

.hex.depth-back .hex-inner {
    background: linear-gradient(180deg, var(--slate-veil), var(--basalt));
    border-color: rgba(90, 99, 115, 0.35);
}

.hex.depth-front .hex-inner {
    background: linear-gradient(180deg, var(--slate-veil), #232934);
    box-shadow: inset 0 0 24px rgba(27, 31, 38, 0.6);
}

.hex-eyebrow {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: 0.22em;
    color: var(--moonstone);
    text-transform: lowercase;
    font-feature-settings: "smcp";
}

.hex-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(18px, 2.4vw, 30px);
    color: var(--fog);
    line-height: 1;
    letter-spacing: -0.005em;
}

.hex-headline.italic { font-style: italic; }

.hex-meta {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(11px, 1.1vw, 14px);
    color: var(--pewter-mist);
    font-style: italic;
    letter-spacing: 0.02em;
}

.hex-glyph {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(28px, 3vw, 48px);
    color: var(--moonstone);
    opacity: 0.7;
}
.hex-glyph.italic { font-style: italic; }

.hex-deco .hex-inner {
    background: rgba(42, 48, 59, 0.4);
    border-color: rgba(90, 99, 115, 0.25);
}

.hex-bust .hex-inner {
    background: transparent;
    border-color: rgba(90, 99, 115, 0.2);
    padding: 8%;
}
.bust-silhouette {
    width: 100%;
    height: 100%;
    opacity: 0.25;
}

/* Pulse-attention border glow — runs twice on entrance */
.hex.pulse-target.entered::after,
.specimen-hex.pulse-target.entered::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    box-shadow: 0 0 0 0 rgba(156, 164, 176, 0.0);
    animation: hexPulse 1.4s ease-in-out 2;
    pointer-events: none;
}

@keyframes hexPulse {
    0%   { box-shadow: 0 0 0 0 rgba(156,164,176,0.0); }
    50%  { box-shadow: 0 0 24px 4px rgba(156,164,176,0.18); }
    100% { box-shadow: 0 0 0 0 rgba(156,164,176,0.0); }
}

/* ---------------------------------------------------------------- */
/* CELL 02 — Atelier Specimens                                       */
/* ---------------------------------------------------------------- */

.cell-02 {
    position: relative;
    min-height: 140vh;
    padding-bottom: 140px;
}

.constellation {
    position: absolute;
    inset: 200px 0 0 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.con-line {
    transition: stroke-dashoffset 1s var(--ease-reverie);
}
.con-line.drawn { stroke-dashoffset: 0; }

.atelier-grid {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 56px) clamp(20px, 3vw, 56px);
}

.specimen-hex {
    position: relative;
    aspect-ratio: 1 / 1.0;
    min-height: 340px;
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
    transition: clip-path 1s var(--ease-reverie),
                opacity 1s var(--ease-reverie),
                transform 1s var(--ease-reverie);
    transform: translateY(16px);
}

.specimen-hex.entered {
    clip-path: polygon(15% 2%, 85% 2%, 99% 50%, 85% 98%, 15% 98%, 1% 50%);
    opacity: 1;
    transform: translateY(0);
}

.specimen-frame {
    position: absolute;
    inset: 0;
    clip-path: polygon(15% 2%, 85% 2%, 99% 50%, 85% 98%, 15% 98%, 1% 50%);
    background:
        linear-gradient(180deg, var(--slate-veil), #242a35);
    border: 1px solid var(--pewter-mist);
    box-sizing: border-box;
    padding: 18% 12% 16%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.spec-corner {
    position: absolute;
    width: 32px;
    height: 1px;
    background: var(--moonstone);
    opacity: 0.5;
}
.spec-corner.tl { top: 16%;  left: 12%; transform: rotate(45deg); transform-origin: left center; }
.spec-corner.tr { top: 16%;  right: 12%; transform: rotate(-45deg); transform-origin: right center; }
.spec-corner.bl { bottom: 16%; left: 12%; transform: rotate(-45deg); transform-origin: left center; }
.spec-corner.br { bottom: 16%; right: 12%; transform: rotate(45deg); transform-origin: right center; }

.specimen-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.spec-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--moonstone);
    letter-spacing: 0.12em;
    font-feature-settings: "smcp";
}

.spec-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--fog);
    letter-spacing: -0.005em;
}

.specimen-substrate {
    flex: 1 1 auto;
    background: var(--vellum-cream);
    padding: 12px 14px;
    margin: 0 -2%;
    overflow: hidden;
    position: relative;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(63, 56, 72, 0.12);
}

.code-block {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: var(--basalt);
    tab-size: 2;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-block .kw  { color: var(--quiet-plum); font-weight: 500; }
.code-block .str { color: var(--pewter-mist); font-style: italic; }
.code-block .cmt { color: var(--moonstone); }
.code-block .num { color: var(--quiet-plum); }

.specimen-footer {
    text-align: center;
}
.spec-meta {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--moonstone);
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- */
/* CELL 03 — The Glossary                                            */
/* ---------------------------------------------------------------- */

.cell-03 {
    min-height: 90vh;
}

.glossary-grid {
    --gh-w: clamp(96px, 11vw, 144px);
    --gh-h: calc(var(--gh-w) * 1.155);
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, var(--gh-w));
    gap: 14px 8px;
    justify-content: center;
    padding-top: 20px;
}

/* Stagger every odd row (col 2,4,6 within rows... use nth-child) */
.gloss-hex {
    width: var(--gh-w);
    height: var(--gh-h);
    position: relative;
    cursor: default;
}

.gloss-hex:nth-child(12n+2),
.gloss-hex:nth-child(12n+4),
.gloss-hex:nth-child(12n+6) {
    transform: translateY(calc(var(--gh-h) * 0.5));
}
.gloss-hex:nth-child(12n+8),
.gloss-hex:nth-child(12n+10),
.gloss-hex:nth-child(12n+12) {
    transform: translateY(calc(var(--gh-h) * 0.5));
}

.gh-face,
.gh-def {
    position: absolute;
    inset: 0;
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    background: var(--slate-veil);
    border: 1px solid var(--pewter-mist);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    overflow: hidden;
}

.gh-face {
    transition: box-shadow 1.4s ease-in-out;
}

.gh-def {
    background: linear-gradient(180deg, var(--quiet-plum), var(--slate-veil));
    border-color: var(--moonstone);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-reverie);
}

.gloss-hex:hover .gh-def { transform: translateY(0%); }

.gloss-hex:hover .gh-face {
    box-shadow: 0 0 24px 4px rgba(156, 164, 176, 0.18);
    animation: glossPulseOnce 1.4s ease-in-out 1;
}

@keyframes glossPulseOnce {
    0%   { box-shadow: 0 0 0 0 rgba(156,164,176,0.0); }
    50%  { box-shadow: 0 0 24px 4px rgba(156,164,176,0.22); }
    100% { box-shadow: 0 0 0 0 rgba(156,164,176,0.0); }
}

.gh-term {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(13px, 1.2vw, 16px);
    color: var(--fog);
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.gh-def span {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(11px, 1.05vw, 13px);
    color: var(--whisper);
    font-style: italic;
    line-height: 1.3;
    padding: 0 6px;
}

/* ---------------------------------------------------------------- */
/* CELL 04 — The Closing Hex                                         */
/* ---------------------------------------------------------------- */

.cell-04 {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 100px 20px 120px;
}

.closing-hex {
    position: relative;
    width: min(80vw, 640px);
    height: min(80vw, 640px);
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 3s ease-in-out;
}

.closing-hex.pulse-once {
    animation: closingPulse 3s ease-in-out 1;
}

@keyframes closingPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.15); }
}

.closing-hex-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ch-stroke {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 1.8s var(--ease-reverie);
}
.closing-hex.entered .ch-stroke {
    stroke-dashoffset: 0;
}

.closing-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 12%;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.6s var(--ease-reverie) 0.6s,
                transform 1.6s var(--ease-reverie) 0.6s;
}

.closing-hex.entered .closing-content {
    opacity: 1;
    transform: translateY(0);
}

.colophon-tag {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.22em;
    color: var(--moonstone);
    font-feature-settings: "smcp";
    text-transform: lowercase;
}

.latin-tag {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: 0.06em;
    color: var(--whisper);
    line-height: 1.1;
    font-feature-settings: "smcp";
}

.closing-rule-line {
    width: 120px;
    height: 1px;
    background: var(--pewter-mist);
    margin: 8px 0;
    opacity: 0.5;
}

.colophon-line {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: var(--moonstone);
    letter-spacing: 0.06em;
}

.colophon-small {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--pewter-mist);
    letter-spacing: 0.04em;
}

.closing-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                transparent 30%,
                var(--basalt) 95%);
    opacity: 0;
    transition: opacity 4s ease-in-out;
    z-index: 8;
}

.closing-vignette.active { opacity: 0.85; }

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 1024px) {
    .atelier-grid { grid-template-columns: repeat(2, 1fr); }
    .glossary-grid { grid-template-columns: repeat(4, var(--gh-w)); }
}

@media (max-width: 720px) {
    .cell { padding: 60px 16px; }
    .cell-header { margin-bottom: 40px; }
    .comb-grid {
        --hex-w: clamp(110px, 38vw, 200px);
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding-left: 0;
    }
    .hex {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0;
    }
    .atelier-grid { grid-template-columns: 1fr; }
    .specimen-hex { min-height: 320px; }
    .glossary-grid {
        --gh-w: clamp(86px, 22vw, 120px);
        grid-template-columns: repeat(3, var(--gh-w));
    }
    .gloss-hex:nth-child(n) { transform: none; }
    .gloss-hex:nth-child(6n+2),
    .gloss-hex:nth-child(6n+4),
    .gloss-hex:nth-child(6n+6) {
        transform: translateY(calc(var(--gh-h) * 0.5));
    }
}