/* ==========================================================================
   holos.dev — a digital rock garden
   Bento-box grid. Burgundy-cream palette. CSS-generated marble.
   ========================================================================== */

:root {
    /* Palette */
    --cream:        #f5ede0;  /* Parchment Cream */
    --linen:        #ebe3d5;  /* Warm Linen */
    --burgundy:     #3a1520;  /* Deep Burgundy */
    --ink:          #4a3040;  /* Burgundy Ink */
    --oxblood:      #6b2737;  /* Oxblood */
    --terracotta:   #c4756a;  /* Terracotta Blush */
    --rose:         #8a5a6a;  /* Dusty Rose */
    --vein:         #d4c4b0;  /* Marble Vein */

    /* Typography */
    --font-display: "Barlow Condensed", "Oswald", "Inter", sans-serif;
    --font-body:    "Libre Baskerville", "Lora", Georgia, serif;
    --font-mono:    "IBM Plex Mono", "Space Mono", monospace;

    /* Geometry */
    --frame: 24px;
    --grid-gap: 2px;
    --cell-border: 2px solid var(--oxblood);

    /* Scroll tracking (updated from JS) */
    --scroll: 0;
    --scroll-parts: 0;
    --scroll-connections: 0;
    --scroll-system: 0;
    --scroll-whole: 0;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.72;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* SVG grain as a full-page faint overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.08  0 0 0 0 0.13  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.18;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   Header / Logo
   ========================================================================== */

.site-header {
    position: fixed;
    top: var(--frame);
    left: var(--frame);
    right: var(--frame);
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.site-logo {
    pointer-events: auto;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--burgundy);
    text-decoration: none;
    opacity: 0;
    animation: logo-fade 1.2s 0.5s ease-out forwards;
    transition: color 0.4s ease;
}
.site-logo:hover { color: var(--terracotta); }

.site-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--rose);
    text-transform: uppercase;
    opacity: 0;
    animation: logo-fade 1.2s 0.9s ease-out forwards;
}

@keyframes logo-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Karesansui rake lines — background layer
   ========================================================================== */

.rake-lines {
    position: fixed;
    inset: -40px -40px -40px -40px;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 7px,
            rgba(212, 196, 176, 0.55) 7px,
            rgba(212, 196, 176, 0.55) 8px
        );
    transform: rotate(2deg);
    opacity: 0.45;
    animation: rake-drift 16s ease-in-out infinite alternate;
}

@keyframes rake-drift {
    from { transform: rotate(2deg) translateX(-2px); }
    to   { transform: rotate(2deg) translateX(2px); }
}

/* ==========================================================================
   Scene base
   ========================================================================== */

.scene {
    position: relative;
    z-index: 1;
    padding: var(--frame);
    min-height: 100vh;
}

.scene-grid {
    padding-top: 120px;
    padding-bottom: 80px;
}

.grid-label {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 28px;
    padding: 0 8px;
    border-bottom: 1px solid var(--vein);
    padding-bottom: 12px;
}
.grid-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--oxblood);
    letter-spacing: -0.02em;
}
.grid-title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}

/* ==========================================================================
   Opening scene
   ========================================================================== */

.scene-opening {
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--frame);
    border-bottom: 1px solid var(--vein);
    position: relative;
    overflow: hidden;
}

.opening-frame {
    position: relative;
    text-align: center;
    max-width: 640px;
    padding: 40px 24px;
}

.enso-wrap {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto 28px;
}
.enso {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 0 rgba(58, 21, 32, 0.08));
}
.enso-path {
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
    animation: enso-draw 2.2s 0.4s cubic-bezier(0.6, 0.05, 0.3, 1) forwards;
}
@keyframes enso-draw {
    from { stroke-dashoffset: 1100; }
    to   { stroke-dashoffset: 0; }
}

.enso-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 64px;
    color: var(--burgundy);
    letter-spacing: -0.02em;
    opacity: 0;
    animation: glyph-fade 1.4s 2.0s ease-out forwards;
}
@keyframes glyph-fade {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.opening-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(18px, 2.4vw, 26px);
    line-height: 1.5;
    color: var(--ink);
    opacity: 0;
    animation: tag-fade 1.4s 2.4s ease-out forwards;
    max-width: 30ch;
    margin: 0 auto;
}
.tag-other {
    color: var(--oxblood);
    font-weight: 400;
    font-style: italic;
    position: relative;
    padding: 0 4px;
}
.tag-other::after {
    content: "";
    position: absolute;
    left: 2px; right: 2px; bottom: 2px;
    height: 6px;
    background: rgba(196, 117, 106, 0.35);
    z-index: -1;
}

.opening-footnote {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rose);
    margin-top: 24px;
    opacity: 0;
    animation: tag-fade 1.4s 3.0s ease-out forwards;
}

@keyframes tag-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: tag-fade 1.4s 3.6s ease-out forwards;
}
.scroll-hint-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rose);
}
.scroll-hint-line {
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, var(--rose) 0%, transparent 100%);
    animation: hint-drift 2s ease-in-out infinite;
}
@keyframes hint-drift {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50%      { transform: translateY(6px); opacity: 0.3; }
}

/* ==========================================================================
   Bento base
   ========================================================================== */

.bento {
    display: grid;
    gap: var(--grid-gap);
    background: var(--oxblood);
    border: var(--cell-border);
    position: relative;
}

/* Grid I — PARTS (6 cols × 4 rows) */
.bento-parts {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, minmax(140px, 18vh));
    grid-template-areas:
        "sigma    sigma    sigma    def      def      g1"
        "sigma    sigma    sigma    def      def      g2"
        "col      col      codepoem codepoem v1       g3"
        "col      col      codepoem codepoem g4       micro1";
}

/* Wider rearrangement when there's room */
@media (min-width: 1100px) {
    .bento-parts {
        grid-template-rows: repeat(4, minmax(150px, 20vh));
        grid-template-areas:
            "sigma    sigma    sigma    def      def      g1"
            "sigma    sigma    sigma    def      def      g2"
            "col      col      codepoem codepoem codepoem v1"
            "col      col      micro1   micro1   g4       g3";
    }
    .bento-parts article[style*="grid-area: g5"] { display: none; }
}

/* Grid II — CONNECTIONS */
.bento-connections {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, minmax(140px, 18vh));
    grid-template-areas:
        "heraclitus heraclitus heraclitus lean      lean      phi"
        "heraclitus heraclitus heraclitus lean      lean      bind"
        "node1      v2         quote2     quote2    vein      bind"
        "pi         quote2     quote2     quote2    vein      node2";
}

/* Grid III — SYSTEM */
.bento-system {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, minmax(140px, 18vh));
    grid-template-areas:
        "big        big        big        list       list       gA"
        "big        big        big        list       list       gB"
        "big        big        big        cite       cite       gC"
        "vx         gD         cite       cite       gA         gB";
}
/* Remove duplicates that appear due to template rewriting */
.bento-system {
    grid-template-areas:
        "big        big        big        list       list       gA"
        "big        big        big        list       list       gB"
        "big        big        big        cite       cite       gC"
        "vx         gD         cite       cite       cite       gC";
}

/* ==========================================================================
   Cell base
   ========================================================================== */

.cell {
    position: relative;
    background: var(--cream);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/* Entrance state */
.cell.is-entering {
    opacity: 0;
    transform: translateY(24px);
}
.cell.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Parallax on scroll (within grid) */
.cell[data-parallax="stone"]  { --p-rate: -0.03; }
.cell[data-parallax="text"]   { --p-rate: -0.05; }
.cell[data-parallax="gravel"] { --p-rate: -0.08; }

.cell[data-parallax] {
    transform: translateY(calc(var(--p-offset, 0px) * 1));
}

/* Gravel variants */
.cell-gravel {
    padding: 0;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: hidden;
}
.gravel-cream      { background: var(--cream); }
.gravel-linen      { background: var(--linen); }
.gravel-burgundy   { background: var(--oxblood); color: var(--cream); }
.gravel-dark       { background: var(--burgundy); color: var(--linen); }
.gravel-terracotta { background: var(--terracotta); color: var(--cream); }

.greek-clip {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(120px, 14vw, 220px);
    line-height: 0.82;
    color: var(--cream);
    letter-spacing: -0.04em;
    position: absolute;
    bottom: -18%;
    left: -6%;
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
}
.gravel-cream .greek-clip { color: var(--vein); opacity: 0.8; }
.gravel-linen .greek-clip { color: var(--vein); opacity: 0.8; }
.greek-clip-light { color: var(--linen) !important; opacity: 0.7; }

.code-mini {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--rose);
    margin: 16px;
    text-transform: uppercase;
}
.gravel-burgundy .code-mini { color: var(--linen); }
.gravel-dark     .code-mini { color: var(--vein); }
.gravel-terracotta .code-mini { color: var(--cream); }

.dot-mark {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 0 4px rgba(245, 237, 224, 0.25);
}

.node-mark {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--oxblood);
    background: var(--cream);
}

/* Void cell */
.cell-void {
    background: var(--cream);
    position: relative;
}
.cell-void::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 7px,
            rgba(212, 196, 176, 0.9) 7px,
            rgba(212, 196, 176, 0.9) 8px
        );
    transform: rotate(1.5deg);
    opacity: 0.7;
}

/* ==========================================================================
   Stone cells (marble + large Greek)
   ========================================================================== */

.cell-stone {
    padding: 0;
    background: var(--linen);
    color: var(--burgundy);
}

.marble-texture {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, #ebe3d5 0%, #d4c4b0 50%, #f5ede0 100%),
        radial-gradient(ellipse at 70% 70%, rgba(138, 90, 106, 0.18) 0%, transparent 60%);
    background-blend-mode: multiply;
}
.marble-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(137deg, transparent 0, transparent 80px, rgba(106, 39, 55, 0.10) 80px, rgba(106, 39, 55, 0.10) 81px),
        repeating-linear-gradient(42deg,  transparent 0, transparent 120px, rgba(74, 48, 64, 0.07) 120px, rgba(74, 48, 64, 0.07) 121px);
}
.marble-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.19  0 0 0 0 0.24  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.35;
}

.cell-stone::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(58, 21, 32, 0.28) 100%);
}

.marble-dim   { filter: brightness(0.92) saturate(0.9); }
.marble-dense { filter: contrast(1.05); }
.marble-warm  { filter: hue-rotate(-8deg) saturate(1.1); }
.marble-fullbleed { inset: 0; }

/* Large Greek letter inside stone cell */
.greek-massive {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(180px, 22vw, 360px);
    line-height: 0.8;
    color: var(--linen);
    letter-spacing: -0.03em;
    opacity: 0.75;
    bottom: -8%;
    right: -3%;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    text-shadow: 0 2px 0 rgba(58, 21, 32, 0.06);
}
.greek-massive-faint { color: var(--vein); opacity: 0.55; }

.cell-caption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.caption-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rose);
}
.caption-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--burgundy);
    text-transform: none;
}

/* Column fragment (Doric) */
.column-fragment {
    position: absolute;
    right: 8%;
    bottom: 8%;
    width: 46%;
    height: 84%;
    z-index: 2;
}
.column-fluting {
    width: 100%;
    height: 86%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(212, 196, 176, 0.9) 0,
            rgba(212, 196, 176, 0.9) 6px,
            rgba(138, 90, 106, 0.35) 6px,
            rgba(138, 90, 106, 0.35) 8px,
            rgba(212, 196, 176, 0.9) 8px,
            rgba(212, 196, 176, 0.9) 14px,
            rgba(74, 48, 64, 0.25) 14px,
            rgba(74, 48, 64, 0.25) 15px
        );
    border-left: 2px solid rgba(106, 39, 55, 0.4);
    border-right: 2px solid rgba(106, 39, 55, 0.4);
}
.column-capital {
    width: 118%;
    height: 14%;
    margin-left: -9%;
    background:
        linear-gradient(to bottom,
            var(--vein) 0%,
            var(--vein) 30%,
            var(--linen) 30%,
            var(--linen) 55%,
            var(--vein) 55%,
            var(--vein) 100%);
    border: 1px solid rgba(106, 39, 55, 0.35);
}

.column-lean {
    transform: rotate(-3deg);
    transform-origin: bottom center;
}

/* ==========================================================================
   Text cells
   ========================================================================== */

.cell-text {
    background: var(--cream);
    padding: 24px 26px;
    gap: 14px;
    justify-content: flex-start;
}
.cell-text-small { padding: 20px 22px; gap: 8px; }
.cell-text-dark {
    background: var(--burgundy);
    color: var(--linen);
}
.cell-text-accent {
    background: var(--linen);
    border-top: 4px solid var(--terracotta);
}

.cell-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rose);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--vein);
    width: max-content;
    max-width: 100%;
}
.tag-inverted {
    color: var(--terracotta);
    border-bottom-color: rgba(196, 117, 106, 0.4);
}
.tag-accent {
    color: var(--oxblood);
    border-bottom-color: var(--terracotta);
}

.cell-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--burgundy);
    text-transform: uppercase;
    margin-top: 4px;
}
.heading-small {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    text-transform: none;
    letter-spacing: -0.015em;
}
.heading-gr {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--terracotta);
    text-transform: none;
    font-size: 0.72em;
    margin-left: 6px;
    letter-spacing: 0;
}

.cell-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.72;
    color: var(--ink);
    max-width: 38ch;
}
.cell-body-inverted { color: var(--linen); }

.cell-micro {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink);
    font-style: italic;
    max-width: 36ch;
}

.inline-code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--rose);
    background: rgba(196, 117, 106, 0.08);
    padding: 0 4px;
    border-radius: 1px;
}

.cell-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink);
}
.cell-list li {
    padding-left: 18px;
    position: relative;
}
.cell-list li::before {
    content: "·";
    position: absolute;
    left: 4px;
    top: -3px;
    color: var(--terracotta);
    font-weight: 700;
    font-size: 20px;
}
.cell-list li em { color: var(--oxblood); font-style: italic; }

.cite-source {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-top: 12px;
}

/* Code blocks */
.code-block {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--linen);
    background: transparent;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
}
.cell-text-accent .code-block {
    color: var(--ink);
}
.code-block .kw  { color: var(--terracotta); }
.code-block .var { color: var(--linen); }
.code-block .fn  { color: var(--vein); }
.code-block .str { color: #e6b3ab; }
.code-block .cmt { color: var(--rose); font-style: italic; }

.cell-text-accent .code-block .kw  { color: var(--oxblood); }
.cell-text-accent .code-block .var { color: var(--ink); }
.cell-text-accent .code-block .fn  { color: var(--terracotta); }
.cell-text-accent .code-block .str { color: var(--oxblood); }
.cell-text-accent .code-block .cmt { color: var(--rose); font-style: italic; }

/* ==========================================================================
   Connector layer (Grid II)
   ========================================================================== */

.connector-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}
.connector {
    fill: none;
    stroke: var(--oxblood);
    stroke-width: 1.2;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    opacity: 0.55;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.5, 0.1, 0.2, 1);
}
.bento-connections.is-connected .connector {
    stroke-dashoffset: 0;
}

/* ==========================================================================
   Grid IV — THE WHOLE
   ========================================================================== */

.scene-whole {
    padding-top: 100px;
    padding-bottom: 80px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.whole-cell {
    flex: 1;
    position: relative;
    border: var(--cell-border);
    background: var(--linen);
    overflow: hidden;
    min-height: 72vh;
}

.whole-letters {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.wl {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(160px, 18vw, 320px);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--burgundy);
    mix-blend-mode: multiply;
    opacity: 0.55;
    user-select: none;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease-out;
}

.wl-sigma  { top:  4%;  left:   6%; color: var(--burgundy);  opacity: 0.7; }
.wl-omega  { top:  8%;  left:  42%; color: var(--oxblood);   opacity: 0.5; }
.wl-phi    { top: 18%;  right:  8%; color: var(--terracotta);opacity: 0.4; }
.wl-delta  { bottom: 10%; left:  10%; color: var(--rose);     opacity: 0.45; }
.wl-pi     { bottom: 14%; left:  44%; color: var(--burgundy); opacity: 0.35; }
.wl-theta  { top: 36%;  left:  22%; color: var(--oxblood);   opacity: 0.3; }
.wl-psi    { top: 44%;  right: 22%; color: var(--burgundy);  opacity: 0.4; }
.wl-xi     { bottom:  4%; right:  6%; color: var(--terracotta); opacity: 0.35; }

.enso-small {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
.enso-path-small {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.6, 0.05, 0.3, 1);
}
.scene-whole.is-visible .enso-small { opacity: 1; }
.scene-whole.is-visible .enso-path-small { stroke-dashoffset: 0; }

.whole-caption {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 24px;
    z-index: 4;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--rose);
}
.whole-signature {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--burgundy);
    text-transform: uppercase;
}
.whole-sep { color: var(--vein); }
.whole-line { color: var(--rose); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--burgundy);
    color: var(--linen);
    padding: 60px var(--frame) 40px;
    position: relative;
    overflow: hidden;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col-right { text-align: right; }
.footer-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--cream);
    text-transform: uppercase;
}
.footer-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--terracotta);
    text-transform: uppercase;
}
.footer-rake {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 7px,
            var(--vein) 7px,
            var(--vein) 8px
        );
    transform: rotate(-1.5deg);
}

/* ==========================================================================
   Responsive — Mobile collapses to 2-column
   ========================================================================== */

@media (max-width: 768px) {
    .scene-grid { padding-top: 90px; padding-bottom: 40px; }

    .bento-parts,
    .bento-connections,
    .bento-system {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas: none;
    }
    /* Stone cells go full-width */
    .cell-stone { grid-column: 1 / -1; min-height: 220px; }
    /* Void cells hidden on mobile */
    .cell-void  { display: none; }
    /* Text cells span full width on mobile */
    .cell-text  { grid-column: 1 / -1; min-height: 180px; }
    /* Gravel cells as 1-col squares */
    .cell-gravel { min-height: 120px; }

    .greek-massive { font-size: 200px; }
    .greek-clip { font-size: 120px; }

    .connector-layer { display: none; }

    .opening-frame { padding: 20px 16px; }
    .enso-wrap { width: 240px; height: 240px; }
    .enso-glyph { font-size: 48px; }

    .whole-cell { min-height: 80vh; }
    .wl { font-size: 140px; }
    .whole-caption { font-size: 11px; }

    .footer-inner { flex-direction: column; align-items: flex-start; }
    .footer-col-right { text-align: left; }
}

@media (max-width: 480px) {
    :root { --frame: 14px; }
    .site-meta { display: none; }
    .enso-wrap { width: 200px; height: 200px; }
    .enso-glyph { font-size: 38px; }
    .cell { padding: 16px 18px; }
    .cell-heading { font-size: 1.8rem; }
}