/* =====================================================================
   GGIGGL.com — dopamine-pastoral marble cathedral
   Z-pattern load-bearing armature, procedural marble, crystalline motifs
   ===================================================================== */

:root {
    /* Palette - warm, pushed past nostalgia into dopamine */
    --cathedral-cream: #FFF1E0;
    --apricot-vein:    #F5C9A4;
    --persimmon-ribbon:#E89B6F;
    --carved-coral:    #C97152;
    --pomegranate-ink: #7A2E2E;
    --quartz-blush:    #FFB4C7;
    --reservoir-wax:   #3B1B1B;

    /* Z geometry as custom properties - reflow by configuring */
    --z-tl-x: 14vw;  --z-tl-y: 16vh;
    --z-tr-x: 86vw;  --z-tr-y: 18vh;
    --z-bl-x: 14vw;  --z-bl-y: 78vh;
    --z-br-x: 86vw;  --z-br-y: 88vh;

    /* Signature bounce curve - the giggle */
    --bounce-giggle: cubic-bezier(0.25, 1.5, 0.4, 1);
    --bounce-easeout: cubic-bezier(0.6, 0, 0.4, 1);

    /* Type scale */
    --wordmark-size: clamp(120px, 14vw, 232px);
    --chapter-size:  clamp(64px, 6vw, 96px);

    /* Stable scatter seeds for fallen shards (CSS custom props, fixed at first paint) */
    --shard-a-x: -22px; --shard-a-y: 14px;  --shard-a-r: 8deg;
    --shard-b-x:  18px; --shard-b-y: -6px;  --shard-b-r: -14deg;
    --shard-c-x:   4px; --shard-c-y: 28px;  --shard-c-r: 22deg;
    --shard-d-x: -14px; --shard-d-y: -18px; --shard-d-r: -6deg;
    --shard-e-x:  24px; --shard-e-y: 20px;  --shard-e-r: 18deg;

    /* Font stretch for ribbon-stretched bebas */
    --bebas-stretch: 125%;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--cathedral-cream);
    color: var(--pomegranate-ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    overflow-x: hidden;
}

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

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* =================================================================
   MARBLE SUBSTRATE - procedural, the single substrate of every surface
   ================================================================= */

.marble-substrate {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--cathedral-cream);
    overflow: hidden;
}

.marble-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.marble-base {
    transition: filter 6s linear;
}

.marble-grain {
    mix-blend-mode: multiply;
}

.marble-bloom {
    pointer-events: none;
    transition: opacity 4s ease-in-out;
    mix-blend-mode: multiply;
}

.marble-bloom.bloomed {
    opacity: 0.32;
}

/* =================================================================
   Z ARMATURE - the load-bearing structural skeleton
   ================================================================= */

.z-armature {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.z-armature path {
    /* preserveAspectRatio="none" stretches viewBox 0-100 to whole viewport */
}

.z-vein {
    stroke: var(--carved-coral);
    stroke-width: 4px;
    fill: none;
    opacity: 0.85;
}

.z-vein-top, .z-vein-bottom {
    stroke-width: 3.4px;
    opacity: 0.78;
}

.z-vein-diagonal {
    stroke-width: 4px;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 2.6s var(--bounce-easeout);
}

.z-vein-diagonal.drawn {
    stroke-dashoffset: 0;
}

.z-vein-glow {
    stroke: var(--apricot-vein);
    stroke-width: 22px;
    filter: blur(8px);
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 2.6s var(--bounce-easeout), opacity 1s ease-out;
}

.z-vein-glow.drawn {
    stroke-dashoffset: 0;
    opacity: 0.55;
}

/* =================================================================
   Z STAGE - the layout container
   ================================================================= */

.z-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 240vh;
}

/* =================================================================
   VERTEX SHARED
   ================================================================= */

.vertex {
    position: absolute;
    z-index: 5;
}

/* =================================================================
   VERTEX 1: WORDMARK (top-left, vertical Bebas, two G's bobbing)
   ================================================================= */

.vertex-1 {
    left: var(--z-tl-x);
    top: var(--z-tl-y);
    transform: translate(-50%, 0);
}

.wordmark {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: var(--wordmark-size);
    line-height: 0.82;
    letter-spacing: 0;
    color: var(--pomegranate-ink);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 400;
    user-select: none;
}

.wm-letter {
    display: block;
    position: relative;
    transform-origin: 50% 50%;
}

/* The two G's are crystalline bobbing beads */
.wm-g {
    position: relative;
    width: 1em;
    height: 1em;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wm-crystal-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
}

.wm-letter-glyph {
    position: relative;
    z-index: 1;
    color: var(--cathedral-cream);
    text-shadow: 0 2px 0 rgba(122, 46, 46, 0.45);
    transform: scale(1.06);
    display: inline-block;
}

.wm-g-1 {
    animation: gigglebob1 4s var(--bounce-giggle) infinite alternate;
}

.wm-g-2 {
    animation: gigglebob2 4s var(--bounce-giggle) infinite alternate;
    animation-delay: 0.3s;
}

@keyframes gigglebob1 {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-12px) scale(1.12); }
    100% { transform: translateY(8px) scale(0.96); }
}

@keyframes gigglebob2 {
    0%   { transform: translateY(6px) scale(1); }
    50%  { transform: translateY(-10px) scale(1.10); }
    100% { transform: translateY(-2px) scale(1.04); }
}

.wm-pantone {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--carved-coral);
    margin: 1.2rem 0 0 4px;
}

/* =================================================================
   RIBBONS - persimmon hand-cut shapes carrying tagline & colophon
   ================================================================= */

.ribbon {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    width: 64vw;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ribbon-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ribbon-top {
    left: calc(var(--z-tl-x) + 2vw);
    top: calc(var(--z-tl-y) - 7vh);
    width: calc(var(--z-tr-x) - var(--z-tl-x) - 4vw);
    transform: rotate(-1.5deg);
}

.ribbon-bottom {
    left: calc(var(--z-bl-x) + 2vw);
    top: calc(var(--z-bl-y) + 28vh);
    width: calc(var(--z-br-x) - var(--z-bl-x) - 4vw);
    transform: rotate(0.8deg);
    height: 56px;
}

.ribbon-body {
    fill: var(--persimmon-ribbon);
    stroke: var(--pomegranate-ink);
    stroke-width: 1.4;
}

.ribbon-underside {
    fill: var(--carved-coral);
    opacity: 0.55;
}

.ribbon-flutter {
    transform-origin: 980px 32px;
    animation: flutter 6s ease-in-out infinite;
}

@keyframes flutter {
    0%   { transform: rotate(0deg) translateX(0) skewY(0deg); }
    20%  { transform: rotate(8deg) translateX(2px) skewY(-3deg); }
    45%  { transform: rotate(-4deg) translateX(-1px) skewY(2deg); }
    70%  { transform: rotate(11deg) translateX(3px) skewY(-4deg); }
    100% { transform: rotate(0deg) translateX(0) skewY(0deg); }
}

.ribbon-text {
    position: relative;
    z-index: 2;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--cathedral-cream);
    text-shadow: 0 1px 0 rgba(58, 27, 27, 0.4);
    letter-spacing: 0.01em;
    line-height: 1;
    pointer-events: none;
    font-feature-settings: "swsh" 1, "salt" 1;
}

.ribbon-text-colophon {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-style: normal;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cathedral-cream);
    font-stretch: 125%;
    transform: scaleX(1.25);
    transform-origin: center;
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.colophon-cell {
    display: inline-block;
}

.colophon-divider {
    color: var(--quartz-blush);
    opacity: 0.85;
}

/* =================================================================
   VERTEX 2: MARBLE CABINET (top-right, rotating specimen)
   ================================================================= */

.vertex-2 {
    left: var(--z-tr-x);
    top: var(--z-tr-y);
    transform: translate(-50%, 0);
}

.plinth {
    width: clamp(220px, 22vw, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plinth-window {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    border: 2px solid var(--pomegranate-ink);
    background: var(--cathedral-cream);
    overflow: hidden;
    box-shadow:
        0 18px 0 -8px var(--apricot-vein),
        0 30px 0 -10px var(--carved-coral);
}

.plinth-window::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cathedral-cream);
    filter: url(#marble-cream);
    opacity: 0.55;
    pointer-events: none;
}

.plinth-light {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.62;
    mix-blend-mode: multiply;
}

.plinth-specimen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

.cabinet-crystal {
    width: 55%;
    height: 85%;
    overflow: visible;
    transform-style: preserve-3d;
    animation: cabinet-rotate 55s linear infinite;
    filter: drop-shadow(0 10px 12px rgba(122, 46, 46, 0.35));
}

@keyframes cabinet-rotate {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.plinth-base {
    margin-top: 14px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    background: var(--apricot-vein);
    padding: 8px 14px;
    border: 1px solid var(--pomegranate-ink);
    box-shadow: 0 6px 0 -3px var(--carved-coral);
}

.plinth-base::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wax-seal {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.plinth-caption {
    margin: 0;
    color: var(--pomegranate-ink);
    line-height: 1.1;
    font-size: 16px;
}

.plinth-caption em {
    display: block;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    font-feature-settings: "swsh" 1, "salt" 1;
}

.instrumentation {
    display: inline-block;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--carved-coral);
    margin-top: 4px;
}

/* =================================================================
   DIAGONAL STAGE - vein with bouncing motes
   ================================================================= */

.diagonal-stage {
    position: absolute;
    top: var(--z-tr-y);
    left: 0;
    width: 100vw;
    height: calc(var(--z-bl-y) - var(--z-tr-y) + 4vh);
    pointer-events: none;
    z-index: 3;
}

.vein-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.diagonal-vein-path {
    stroke: var(--carved-coral);
    stroke-width: 3.4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 2.6s var(--bounce-easeout);
}

.diagonal-vein-path.drawn {
    stroke-dashoffset: 0;
}

.diagonal-vein-thin {
    stroke: var(--pomegranate-ink);
    stroke-width: 1.1;
    fill: none;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 2.8s var(--bounce-easeout);
    opacity: 0.45;
}

.diagonal-vein-thin.drawn {
    stroke-dashoffset: 0;
}

.motes-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mote {
    position: absolute;
    width: 84px;
    height: 84px;
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.7s var(--bounce-giggle), opacity 0.7s ease-out;
    opacity: 0;
    pointer-events: auto;
}

.mote.bounced {
    transform: scale(1);
    opacity: 1;
    animation: mote-settle 0.7s var(--bounce-giggle) forwards;
}

.mote svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 4px 6px rgba(122, 46, 46, 0.25));
}

.mote::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--quartz-blush) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-out;
    z-index: -1;
}

.mote.bounced::after {
    animation: blush-pulse 1.2s ease-out forwards;
}

@keyframes mote-settle {
    0%   { transform: scale(0); }
    35%  { transform: scale(1.18); }
    65%  { transform: scale(0.92); }
    85%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes blush-pulse {
    0%   { opacity: 0; }
    40%  { opacity: 0.6; }
    100% { opacity: 0.12; }
}

.mote-caption {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--carved-coral);
    white-space: nowrap;
    text-align: center;
}

.mote-caption em {
    text-transform: none;
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--pomegranate-ink);
    letter-spacing: 0.04em;
    font-size: 12px;
}

.aside-line {
    display: block;
    color: var(--carved-coral);
    margin-top: 2px;
}

/* Mote positions along the diagonal vein (percentages of stage box) */
.mote-1 { left: calc(98% - 42px);  top: calc(5% - 42px); }
.mote-2 { left: calc(86% - 42px);  top: calc(16% - 42px); }
.mote-3 { left: calc(74% - 42px);  top: calc(29% - 42px); }
.mote-4 { left: calc(60% - 42px);  top: calc(42% - 42px); }
.mote-5 { left: calc(52% - 42px);  top: calc(52% - 42px); transform-origin: center; }
.mote-6 { left: calc(42% - 42px);  top: calc(60% - 42px); }
.mote-7 { left: calc(30% - 42px);  top: calc(71% - 42px); }
.mote-8 { left: calc(16% - 42px);  top: calc(82% - 42px); }
.mote-9 { left: calc(4%  - 42px);  top: calc(94% - 42px); }

/* Honey aside is rotated 8 degrees, slightly off-axis */
.mote-honey-aside.bounced {
    animation: honey-aside-settle 0.7s var(--bounce-giggle) forwards;
}

@keyframes honey-aside-settle {
    0%   { transform: rotate(8deg) scale(0); }
    35%  { transform: rotate(8deg) scale(1.18); }
    65%  { transform: rotate(8deg) scale(0.92); }
    100% { transform: rotate(8deg) scale(1); }
}

/* =================================================================
   VERTEX 3: ORCHARD CENSUS + FALLEN SHARDS
   ================================================================= */

.vertex-3 {
    left: var(--z-bl-x);
    top: var(--z-bl-y);
    transform: translate(-30%, 0);
    width: 38vw;
    min-width: 320px;
}

.fallen-pile {
    position: absolute;
    top: -50px;
    left: -40px;
    width: 220px;
    height: 140px;
    pointer-events: none;
    z-index: 6;
}

.fallen-shard {
    position: absolute;
    width: 60px;
    height: 60px;
    transition: transform 0.8s ease-out;
}

.fallen-shard svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgba(122, 46, 46, 0.3));
}

.shard-a { top: 10px;  left: 30px;
    transform: translate(var(--shard-a-x, 0), var(--shard-a-y, 0)) rotate(var(--shard-a-r, 0deg)); }
.shard-b { top: 30px;  left: 80px;
    transform: translate(var(--shard-b-x, 0), var(--shard-b-y, 0)) rotate(var(--shard-b-r, 0deg)); }
.shard-c { top: 56px;  left: 24px;
    transform: translate(var(--shard-c-x, 0), var(--shard-c-y, 0)) rotate(var(--shard-c-r, 0deg)); }
.shard-d { top: 72px;  left: 90px;
    transform: translate(var(--shard-d-x, 0), var(--shard-d-y, 0)) rotate(var(--shard-d-r, 0deg)); }
.shard-e { top: 88px;  left: 50px;
    transform: translate(var(--shard-e-x, 0), var(--shard-e-y, 0)) rotate(var(--shard-e-r, 0deg)); }

.census-heading {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: var(--chapter-size);
    line-height: 0.82;
    letter-spacing: 0;
    color: var(--pomegranate-ink);
    margin: 0;
    display: flex;
    flex-direction: column;
    font-weight: 400;
}

.census-heading span {
    display: block;
}

.census-subhead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17.5px;
    line-height: 1.55;
    color: var(--carved-coral);
    margin: 14px 0 28px 0;
    font-feature-settings: "swsh" 1, "salt" 1;
}

.census-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.census-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(201, 113, 82, 0.45);
}

.census-medallion {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--apricot-vein);
    border: 1px solid var(--pomegranate-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.census-medallion::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--apricot-vein);
    filter: url(#marble-apricot);
    opacity: 0.7;
    z-index: 0;
}

.census-medallion svg {
    width: 70%;
    height: 70%;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.census-text {
    display: block;
    line-height: 1.45;
}

.census-binomial {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: var(--pomegranate-ink);
    font-feature-settings: "swsh" 1, "salt" 1;
}

.census-note {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    color: var(--carved-coral);
    line-height: 1.5;
    margin-top: 2px;
}

/* =================================================================
   VERTEX 4: GIGGLE RESERVOIR
   ================================================================= */

.vertex-4 {
    left: var(--z-br-x);
    top: var(--z-br-y);
    transform: translate(-50%, -50%);
    text-align: center;
}

.reservoir-jar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.jar-svg {
    width: clamp(140px, 14vw, 200px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 12px 14px rgba(122, 46, 46, 0.3));
}

.jar-contents circle {
    transform-origin: center;
    animation: jar-bubble 6s ease-in-out infinite alternate;
}

.jar-contents circle:nth-child(2) { animation-delay: -1s; animation-duration: 7s; }
.jar-contents circle:nth-child(3) { animation-delay: -2s; animation-duration: 5.5s; }
.jar-contents circle:nth-child(4) { animation-delay: -3s; animation-duration: 6.5s; }
.jar-contents circle:nth-child(5) { animation-delay: -4s; animation-duration: 7.5s; }

@keyframes jar-bubble {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-12px) scale(1.1); }
    100% { transform: translateY(4px) scale(0.95); }
}

.reservoir-readout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
}

.reservoir-label {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--carved-coral);
}

.reservoir-count {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    color: var(--pomegranate-ink);
    letter-spacing: 0;
    transition: color 0.3s ease-out;
    display: inline-block;
}

.reservoir-count.pulse {
    animation: count-bounce 0.6s var(--bounce-giggle);
}

@keyframes count-bounce {
    0%   { transform: scale(1); color: var(--pomegranate-ink); }
    50%  { transform: scale(1.4); color: var(--quartz-blush); }
    100% { transform: scale(1); color: var(--pomegranate-ink); }
}

.reservoir-instrumentation {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--carved-coral);
    opacity: 0.7;
    margin-top: 4px;
}

.reservoir-line {
    margin: 18px 0 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17.5px;
    line-height: 1.55;
    color: var(--pomegranate-ink);
    font-feature-settings: "swsh" 1, "salt" 1;
    max-width: 320px;
}

/* =================================================================
   RESPONSIVE - the Z is preserved by squashing the diagonal,
   never by collapsing the vertices into a stack
   ================================================================= */

@media (max-width: 1024px) {
    :root {
        --z-tl-x: 16vw;  --z-tl-y: 14vh;
        --z-tr-x: 84vw;  --z-tr-y: 18vh;
        --z-bl-x: 16vw;  --z-bl-y: 76vh;
        --z-br-x: 84vw;  --z-br-y: 90vh;
    }
}

@media (max-width: 768px) {
    :root {
        --z-tl-x: 18vw;  --z-tl-y: 12vh;
        --z-tr-x: 82vw;  --z-tr-y: 22vh;
        --z-bl-x: 18vw;  --z-bl-y: 72vh;
        --z-br-x: 82vw;  --z-br-y: 92vh;
        --wordmark-size: clamp(86px, 16vw, 140px);
        --chapter-size: clamp(48px, 9vw, 72px);
    }

    body {
        min-height: 260vh;
    }

    .vertex-2 .plinth {
        width: clamp(160px, 36vw, 220px);
    }

    .mote {
        width: 64px;
        height: 64px;
    }

    .mote-caption {
        font-size: 9px;
    }

    .ribbon-text {
        font-size: 16px;
    }

    .ribbon-text-colophon {
        font-size: 9px;
        letter-spacing: 0.14em;
    }

    .vertex-3 {
        width: 70vw;
    }
}

@media (max-width: 480px) {
    :root {
        --z-tl-x: 22vw;  --z-tl-y: 10vh;
        --z-tr-x: 78vw;  --z-tr-y: 24vh;
        --z-bl-x: 22vw;  --z-bl-y: 70vh;
        --z-br-x: 78vw;  --z-br-y: 94vh;
    }

    body {
        min-height: 280vh;
    }

    .ribbon {
        height: 44px;
    }

    .colophon-divider {
        display: none;
    }

    .ribbon-text-colophon {
        flex-wrap: wrap;
        white-space: normal;
        gap: 0.4em;
    }
}

/* =================================================================
   REDUCED MOTION - halves amplitudes but never freezes
   the giggle is the site; freezing it is wrong
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    @keyframes gigglebob1 {
        0%   { transform: translateY(0) scale(1); }
        50%  { transform: translateY(-3px) scale(1.04); }
        100% { transform: translateY(2px) scale(0.99); }
    }
    @keyframes gigglebob2 {
        0%   { transform: translateY(2px) scale(1); }
        50%  { transform: translateY(-3px) scale(1.03); }
        100% { transform: translateY(-1px) scale(1.01); }
    }
    @keyframes flutter {
        0%   { transform: rotate(0deg); }
        50%  { transform: rotate(2deg); }
        100% { transform: rotate(0deg); }
    }
    @keyframes cabinet-rotate {
        0%   { transform: rotateY(0deg); }
        100% { transform: rotateY(360deg); }
    }
    .cabinet-crystal {
        animation-duration: 110s;
    }
    @keyframes jar-bubble {
        0%   { transform: translateY(0) scale(1); }
        50%  { transform: translateY(-3px) scale(1.03); }
        100% { transform: translateY(1px) scale(0.99); }
    }
}