/* ============================================================
   annual.quest - Crystalline Descent
   Color Palette:
     Void Indigo:      #0D0221
     Aubergine Deep:   #2A1B3D
     Dusty Purple:     #7B68AE
     Muted Lavender:   #B8A0D8
     Pale Lilac:       #E8D5FF
     Rose Quartz:      #E8A0B8
     Amber Refraction: #F0C878
     Prismatic Teal:   #68D8C8
     Glacier White:    #F0E8FF
     Dark Base:        #1A0A2E
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: #0D0221;
    color: #D4C5E8;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

/* --- Hexagonal Lattice Overlay --- */
.lattice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.05;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(184, 160, 216, 0.3) 40px,
            rgba(184, 160, 216, 0.3) 41px
        ),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 40px,
            rgba(184, 160, 216, 0.3) 40px,
            rgba(184, 160, 216, 0.3) 41px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 40px,
            rgba(184, 160, 216, 0.3) 40px,
            rgba(184, 160, 216, 0.3) 41px
        );
    animation: lattice-drift 120s linear infinite;
}

@keyframes lattice-drift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 40px 80px, -40px 80px, 80px 0; }
}

/* --- Fixed Navigation --- */
.fixed-nav {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 100;
}

.nav-home {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7B68AE;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-home:hover {
    color: #68D8C8;
}

/* --- Scene Base --- */
.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Scene Backgrounds --- */
.scene--outer-facet {
    background: linear-gradient(
        180deg,
        #0D0221 0%,
        #0D0221 60%,
        #1A0A2E 100%
    );
}

.scene--refraction {
    background: linear-gradient(
        180deg,
        #1A0A2E 0%,
        #2A1B3D 40%,
        #2A1B3D 100%
    );
}

.scene--prismatic {
    background: linear-gradient(
        180deg,
        #2A1B3D 0%,
        #2A1B3D 50%,
        #1A0A2E 100%
    );
}

.scene--heart {
    background: #2A1B3D;
    animation: heart-pulse 15s ease-in-out infinite;
}

@keyframes heart-pulse {
    0%, 100% { background-color: #2A1B3D; }
    50% { background-color: #1A0A2E; }
}

.scene--shadow {
    background: linear-gradient(
        180deg,
        #1A0A2E 0%,
        #0D0221 40%,
        #0D0221 100%
    );
}

/* --- Amber Glow (Prismatic Core) --- */
.amber-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(240, 200, 120, 0.12) 0%,
        rgba(232, 160, 184, 0.06) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* --- Refraction Lines --- */
.refraction-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.refraction-lines--scene1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        -35deg,
        transparent,
        transparent 80px,
        rgba(123, 104, 174, 0.08) 80px,
        rgba(123, 104, 174, 0.08) 81px
    );
    transform: translate(-25%, -25%);
}

.refraction-lines--scene2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        -32deg,
        transparent,
        transparent 60px,
        rgba(123, 104, 174, 0.12) 60px,
        rgba(123, 104, 174, 0.12) 61px
    );
    transform-origin: top left;
}

.refraction-lines--scene3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        -28deg,
        transparent,
        transparent 50px,
        rgba(123, 104, 174, 0.15) 50px,
        rgba(123, 104, 174, 0.15) 51px
    );
    transform: translate(-25%, -25%);
}

.refraction-lines--scene4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        -38deg,
        transparent,
        transparent 100px,
        rgba(123, 104, 174, 0.06) 100px,
        rgba(123, 104, 174, 0.06) 101px
    );
    transform: translate(-25%, -25%);
}

.refraction-lines--scene5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        -35deg,
        transparent,
        transparent 80px,
        rgba(123, 104, 174, 0.06) 80px,
        rgba(123, 104, 174, 0.06) 81px
    );
    transform: translate(-25%, -25%);
}

/* --- Prismatic Flares --- */
.prismatic-flare {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: flare-pulse 8s ease-in-out infinite;
}

@keyframes flare-pulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.flare-1 {
    top: 20%;
    left: 30%;
    background: radial-gradient(circle, #E8A0B8, transparent);
    animation-delay: 0s;
}

.flare-2 {
    top: 60%;
    right: 25%;
    background: radial-gradient(circle, #68D8C8, transparent);
    animation-delay: 2.5s;
    width: 20px;
    height: 20px;
}

.flare-3 {
    top: 15%;
    left: 60%;
    background: radial-gradient(circle, #F0C878, transparent);
    animation-delay: 1s;
}

.flare-4 {
    top: 50%;
    left: 20%;
    background: radial-gradient(circle, #E8A0B8, transparent);
    animation-delay: 3s;
    width: 14px;
    height: 14px;
}

.flare-5 {
    bottom: 20%;
    right: 35%;
    background: radial-gradient(circle, #68D8C8, transparent);
    animation-delay: 5s;
}

.flare-6 {
    top: 10%;
    left: 40%;
    background: radial-gradient(circle, #F0C878, transparent);
    animation-delay: 0.5s;
    width: 18px;
    height: 18px;
}

.flare-7 {
    top: 30%;
    right: 15%;
    background: radial-gradient(circle, #E8A0B8, transparent);
    animation-delay: 2s;
}

.flare-8 {
    bottom: 30%;
    left: 25%;
    background: radial-gradient(circle, #68D8C8, transparent);
    animation-delay: 4s;
    width: 14px;
    height: 14px;
}

.flare-9 {
    bottom: 15%;
    right: 45%;
    background: radial-gradient(circle, #F0C878, transparent);
    animation-delay: 6s;
    width: 20px;
    height: 20px;
}

.flare-10 {
    top: 40%;
    left: 50%;
    background: radial-gradient(circle, #68D8C8, transparent);
    animation-delay: 1.5s;
}

/* --- Accent Lines (Teal) --- */
.accent-line {
    position: absolute;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        #68D8C8 20%,
        #68D8C8 80%,
        transparent
    );
    z-index: 3;
    opacity: 0.6;
}

.accent-line--top {
    top: 0;
    left: 50%;
    height: 30vh;
    transform: translateX(-50%);
}

.accent-line--bottom {
    bottom: 0;
    left: 50%;
    height: 30vh;
    transform: translateX(-50%);
}

/* --- Bento Grid Base --- */
.bento-grid {
    position: relative;
    z-index: 5;
    display: grid;
    gap: 8px;
    padding: 40px;
    width: 100%;
    max-width: 1200px;
}

/* --- Bento Cell Base --- */
.bento-cell {
    position: relative;
    border: 1px solid rgba(180, 160, 255, 0.2);
    box-shadow: inset 0 0 40px rgba(180, 160, 255, 0.05);
    background: rgba(42, 27, 61, 0.4);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translateY(30px);
}

.bento-cell.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: calc(var(--cell-index, 0) * 120ms);
}

.bento-cell:hover {
    transform: translateZ(12px) scale(1.01);
    border-color: rgba(180, 160, 255, 0.5);
    box-shadow: inset 0 0 60px rgba(180, 160, 255, 0.08),
                0 0 30px rgba(180, 160, 255, 0.05);
}

.cell-inner {
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* --- Chamfered Corners --- */
.cell-inner--chamfered-tr {
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}

.cell-inner--chamfered-bl {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}

.cell-inner--void {
    background: transparent;
    border-color: transparent;
}

/* === SCENE 1: Outer Facet - Sparse Grid === */
.bento-grid--sparse {
    grid-template-columns: 1.618fr 1fr 0.618fr;
    grid-template-rows: minmax(180px, auto) minmax(180px, auto);
    grid-template-areas:
        "hero crystal strip"
        "hero crystal strip";
    min-height: 70vh;
    align-content: center;
}

.cell-hero {
    grid-area: hero;
}

.cell-crystal-main {
    grid-area: crystal;
}

.cell-data-strip {
    grid-area: strip;
}

/* --- Site Title --- */
.site-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 700;
    font-size: clamp(48px, 7vw, 80px);
    color: #E8D5FF;
    letter-spacing: 0.08em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letter-fade-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(var(--letter-index) * 100ms + 0.5s);
}

@keyframes letter-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B8A0D8;
}

/* --- Crystal Wireframe SVGs --- */
.crystal-wireframe {
    width: 100%;
    height: 100%;
    max-height: 400px;
}

.crystal-paths path {
    fill: none;
    stroke: #B8A0D8;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-crystal 2.5s ease-out forwards;
}

.crystal-paths path:nth-child(2) { animation-delay: 0.1s; }
.crystal-paths path:nth-child(3) { animation-delay: 0.2s; }
.crystal-paths path:nth-child(4) { animation-delay: 0.3s; }
.crystal-paths path:nth-child(5) { animation-delay: 0.4s; }
.crystal-paths path:nth-child(6) { animation-delay: 0.5s; }
.crystal-paths path:nth-child(7) { animation-delay: 0.6s; }
.crystal-paths path:nth-child(8) { animation-delay: 0.7s; }
.crystal-paths path:nth-child(9) { animation-delay: 0.8s; }
.crystal-paths path:nth-child(10) { animation-delay: 0.9s; }
.crystal-paths path:nth-child(11) { animation-delay: 1.0s; }
.crystal-paths path:nth-child(12) { animation-delay: 1.1s; }
.crystal-paths path:nth-child(13) { animation-delay: 1.2s; }
.crystal-paths path:nth-child(14) { animation-delay: 1.3s; }
.crystal-paths path:nth-child(15) { animation-delay: 1.4s; }
.crystal-paths path:nth-child(16) { animation-delay: 1.5s; }
.crystal-paths path:nth-child(17) { animation-delay: 1.6s; }
.crystal-paths path:nth-child(18) { animation-delay: 1.7s; }

@keyframes draw-crystal {
    to {
        stroke-dashoffset: 0;
    }
}

/* Slowly rotating crystal */
.crystal-wireframe--main {
    animation: crystal-rotate 30s linear infinite;
}

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

/* Fragment crystals */
.crystal-wireframe--fragment1,
.crystal-wireframe--fragment2,
.crystal-wireframe--micro {
    max-height: 250px;
}

/* Heart crystal rotation */
.crystal-paths--rotating {
    animation: crystal-rotate-slow 45s linear infinite;
    transform-origin: center center;
}

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

.crystal-wireframe--heart {
    max-height: 500px;
    margin: 0 auto;
    display: block;
}

/* Dissolved crystal (dashed) */
.crystal-paths--dashed path {
    stroke-dasharray: 4 8;
    stroke-dashoffset: 0;
    opacity: 0.5;
    animation: none;
}

/* --- Data Labels & Crystals --- */
.data-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B8A0D8;
    margin-bottom: 8px;
    display: block;
}

.data-crystal {
    width: 56px;
    height: 56px;
    transform: rotate(45deg);
    border: 1px solid rgba(180, 160, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto;
    background: rgba(13, 2, 33, 0.6);
}

.data-crystal--amber {
    border-color: rgba(240, 200, 120, 0.4);
    background: rgba(240, 200, 120, 0.08);
}

.data-crystal--fading {
    border-color: rgba(180, 160, 255, 0.15);
    opacity: 0.5;
}

.data-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 400;
    color: #7B68AE;
    transform: rotate(-45deg);
    display: block;
}

.data-crystal--amber .data-value {
    color: #F0C878;
}

/* --- Cell Labels --- */
.cell-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B8A0D8;
    margin-bottom: 16px;
    display: block;
}

.cell-label--amber {
    color: #F0C878;
}

/* --- Section Headings --- */
.section-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 700;
    font-size: clamp(32px, 5vw, 56px);
    color: #E8D5FF;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 16px;
}

.section-heading--amber {
    color: #F0C878;
}

/* --- Body Text --- */
.body-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: #D4C5E8;
    line-height: 1.65;
    max-width: 42ch;
}

.body-text--warm {
    color: #E8D5FF;
}

/* --- Accent Text --- */
.accent-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 15px;
    font-style: italic;
    color: #E8A0B8;
    line-height: 1.5;
}

.accent-text--amber {
    color: #F0C878;
}

/* --- Mono Text --- */
.mono-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    color: #7B68AE;
    letter-spacing: 0.02em;
}

.mono-text--amber {
    color: #F0C878;
    opacity: 0.7;
}

/* --- Growth Rings --- */
.growth-rings {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring {
    position: absolute;
    border: 1px solid #B8A0D8;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.ring-1 {
    width: 40px;
    height: 46px;
    opacity: 0.8;
    animation: ring-expand 3s ease-out infinite;
}

.ring-2 {
    width: 70px;
    height: 81px;
    opacity: 0.6;
    animation: ring-expand 3s ease-out 0.4s infinite;
}

.ring-3 {
    width: 100px;
    height: 115px;
    opacity: 0.4;
    animation: ring-expand 3s ease-out 0.8s infinite;
}

.ring-4 {
    width: 130px;
    height: 150px;
    opacity: 0.25;
    animation: ring-expand 3s ease-out 1.2s infinite;
}

.ring-5 {
    width: 160px;
    height: 185px;
    opacity: 0.12;
    animation: ring-expand 3s ease-out 1.6s infinite;
}

.growth-rings--warm .ring {
    border-color: #F0C878;
}

@keyframes ring-expand {
    0% { transform: scale(0.9); opacity: 0; }
    50% { opacity: var(--ring-opacity, 0.4); }
    100% { transform: scale(1.15); opacity: 0; }
}

.ring-1 { --ring-opacity: 0.8; }
.ring-2 { --ring-opacity: 0.6; }
.ring-3 { --ring-opacity: 0.4; }
.ring-4 { --ring-opacity: 0.25; }
.ring-5 { --ring-opacity: 0.12; }

/* === SCENE 2: Refraction Zone - Medium Grid === */
.bento-grid--medium {
    grid-template-columns: 1.618fr 1fr 1.618fr;
    grid-template-rows: minmax(180px, auto) minmax(120px, auto) minmax(80px, auto);
    grid-template-areas:
        "wide crystal1 tall"
        "small1 small2 tall"
        "banner banner banner";
}

.cell-ref-wide { grid-area: wide; }
.cell-ref-crystal1 { grid-area: crystal1; }
.cell-ref-tall { grid-area: tall; }
.cell-ref-small1 { grid-area: small1; }
.cell-ref-small2 { grid-area: small2; }
.cell-ref-banner { grid-area: banner; }

/* === SCENE 3: Prismatic Core - Dense Grid === */
.bento-grid--dense {
    grid-template-columns: 1.618fr 1fr 1fr 1.618fr;
    grid-template-rows: repeat(4, minmax(120px, auto));
    grid-template-areas:
        "a a b c"
        "d e e c"
        "f g h h"
        "i i j j";
    gap: 6px;
}

.cell-core-a { grid-area: a; }
.cell-core-b { grid-area: b; }
.cell-core-c { grid-area: c; }
.cell-core-d { grid-area: d; }
.cell-core-e { grid-area: e; }
.cell-core-f { grid-area: f; }
.cell-core-g { grid-area: g; }
.cell-core-h { grid-area: h; }
.cell-core-i { grid-area: i; }
.cell-core-j { grid-area: j; }

/* --- Prismatic Core increased lattice opacity --- */
.scene--prismatic .lattice-overlay {
    opacity: 0.08;
}

/* === SCENE 4: Heart Chamber === */
.heart-container {
    position: relative;
    z-index: 5;
    width: 80%;
    max-width: 900px;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-heart {
    width: 100%;
    min-height: 60vh;
    border: 1px solid rgba(180, 160, 255, 0.25);
    box-shadow: inset 0 0 80px rgba(180, 160, 255, 0.06);
    background: rgba(42, 27, 61, 0.3);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cell-heart.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cell-heart .cell-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
    perspective: 800px;
}

.heart-message {
    margin-top: 30px;
    max-width: 52ch;
}

.heart-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 2.5vw, 32px);
    color: #E8D5FF;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* === SCENE 5: Shadow Facet - Sparse Inverted === */
.bento-grid--inverted {
    grid-template-columns: 0.618fr 1.618fr 1fr;
    grid-template-areas:
        "void1 content strip"
        "void1 content strip";
}

.cell-shadow-void1 {
    grid-area: void1;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.cell-shadow-content {
    grid-area: content;
}

.cell-shadow-data {
    grid-area: strip;
}

/* --- Parallax via custom property --- */
.refraction-lines {
    will-change: transform;
}

/* --- Scroll-triggered visibility --- */
.bento-cell {
    --cell-index: attr(data-cell-index);
}

/* --- Responsive: Tablet --- */
@media (max-width: 1024px) {
    .bento-grid--sparse {
        grid-template-columns: 1.618fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "hero crystal"
            "hero crystal"
            "strip strip";
    }

    .bento-grid--medium {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "wide wide"
            "crystal1 tall"
            "small1 small2"
            "banner banner";
    }

    .bento-grid--dense {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, minmax(100px, auto));
        grid-template-areas:
            "a a"
            "b c"
            "d e"
            "f g"
            "h i"
            "j j";
    }

    .bento-grid--inverted {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "content content"
            "void1 strip";
    }

    .heart-container {
        width: 90%;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 640px) {
    .bento-grid {
        padding: 20px;
        gap: 6px;
    }

    .bento-grid--sparse {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "crystal"
            "strip";
    }

    .bento-grid--medium {
        grid-template-columns: 1fr;
        grid-template-areas:
            "wide"
            "crystal1"
            "tall"
            "small1"
            "small2"
            "banner";
    }

    .bento-grid--dense {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, minmax(90px, auto));
        grid-template-areas:
            "a a"
            "b c"
            "d e"
            "f g"
            "h h"
            "i j";
    }

    .bento-grid--inverted {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "strip"
            "void1";
    }

    .site-title {
        font-size: clamp(36px, 10vw, 56px);
        letter-spacing: 0.04em;
    }

    .section-heading {
        font-size: clamp(28px, 7vw, 40px);
    }

    .heart-container {
        width: 95%;
    }

    .heart-text {
        font-size: clamp(16px, 4vw, 24px);
    }

    .cell-inner {
        padding: 16px;
    }

    .cell-heart .cell-inner {
        padding: 24px;
    }

    .crystal-wireframe--heart {
        max-height: 300px;
    }
}

/* --- Selection color --- */
::selection {
    background: rgba(104, 216, 200, 0.3);
    color: #F0E8FF;
}