/* =========================================================
   MonopoleAI -- Field guide to disciplined intelligence
   Flat-design / bento-box / forest-green / handwritten
   Colors (DESIGN.md):
     #1B3A2D Deep Canopy   #2D6A4F Fern Heart
     #52B788 Moss Glow     #74C69D Spring Shoot
     #F5F0E8 Marble Cream  #A8A29E Vein Gray
     #1A1A1A Forest Floor  #FAFAF5 Birch White
     #C9A227 Lichen Gold
     supplemental marble vein layers: #E8E0D4 #EDE7DC
   Fonts: Caveat, Architects Daughter, DM Sans, IBM Plex Mono
   ========================================================= */

:root {
    --c-deep-canopy: #1B3A2D;
    --c-fern-heart: #2D6A4F;
    --c-moss-glow: #52B788;
    --c-spring-shoot: #74C69D;
    --c-marble-cream: #F5F0E8;
    --c-vein-gray: #A8A29E;
    --c-forest-floor: #1A1A1A;
    --c-birch-white: #FAFAF5;
    --c-lichen-gold: #C9A227;
    --c-marble-warm: #EDE7DC;
    --c-marble-cool: #E8E0D4;

    --gutter: 16px;
    --margin: 32px;
    --row-unit: calc((100vh - 128px) / 4);

    --f-display: 'Caveat', 'Lora', cursive;
    --f-sub: 'Architects Daughter', 'Caveat', cursive;
    --f-body: 'DM Sans', 'Inter', system-ui, sans-serif;
    --f-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--f-body);
    color: var(--c-forest-floor);
    line-height: 1.65;
    background-color: var(--c-marble-cream);
    /* Marble texture: layered radial + conic gradients on the cream base */
    background-image:
        radial-gradient(ellipse 60% 40% at 30% 40%, rgba(168, 162, 158, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 45% 55% at 75% 25%, rgba(168, 162, 158, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 55% 35% at 20% 80%, rgba(200, 192, 180, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 85% 75%, rgba(168, 162, 158, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 30% 25% at 50% 55%, rgba(232, 224, 212, 0.40) 0%, transparent 60%),
        conic-gradient(from 145deg at 60% 70%, transparent 0%, rgba(200, 192, 180, 0.10) 3%, transparent 6%, transparent 50%, rgba(200, 192, 180, 0.08) 53%, transparent 56%),
        conic-gradient(from 25deg at 20% 30%, transparent 0%, rgba(168, 162, 158, 0.08) 4%, transparent 8%),
        linear-gradient(135deg, var(--c-marble-warm) 0%, var(--c-marble-cream) 50%, var(--c-marble-cool) 100%);
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
    min-height: 100vh;
}

::selection {
    background: var(--c-moss-glow);
    color: var(--c-birch-white);
}

/* =========================================================
   Canopy / top bar
   ========================================================= */
.canopy {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: var(--c-deep-canopy);
    color: var(--c-birch-white);
    border-bottom: 2px solid var(--c-fern-heart);
}

.canopy-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px var(--margin);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--c-birch-white);
}

.brand-mark {
    color: var(--c-spring-shoot);
    display: inline-flex;
}

.brand-mark.light {
    color: var(--c-birch-white);
}

.brand-name {
    font-family: var(--f-display);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.canopy-nav {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.canopy-nav a {
    font-family: var(--f-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-birch-white);
    text-decoration: none;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 220ms ease, border-color 220ms ease;
}

.canopy-nav a:hover {
    color: var(--c-spring-shoot);
    border-bottom-color: var(--c-moss-glow);
}

.canopy-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    color: var(--c-spring-shoot);
    letter-spacing: 0.05em;
}

.canopy-meta .dot {
    width: 8px;
    height: 8px;
    background: var(--c-lichen-gold);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18);
    animation: pulse 3.2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* =========================================================
   Bento sections (scaffolding common to all)
   ========================================================= */
main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--margin);
    position: relative;
}

.bento-section {
    position: relative;
    padding: 48px 0 56px;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-grid {
    display: grid;
    gap: var(--gutter);
    width: 100%;
}

/* ---------- shared cell base ---------- */
.cell {
    position: relative;
    padding: 28px 30px;
    overflow: hidden;
    color: var(--c-birch-white);
    background-color: var(--c-fern-heart);
    transition: background-color 320ms ease, transform 320ms ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
}

.cell.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 400ms ease-out, transform 400ms ease-out, background-color 320ms ease;
}

.cell h1, .cell h2, .cell h3, .cell p, .cell ul, .cell li, .cell span {
    position: relative;
    z-index: 2;
}

/* Hover: shift to the next-lighter green value (flat color shift only) */
.cell:hover {
    background-color: var(--c-fern-heart);
}

.cell.cell-hero:hover, .cell.cell-r-1:hover, .cell.cell-i-1:hover,
.cell.cell-f-1:hover, .cell.cell-s-1:hover {
    background-color: var(--c-fern-heart);
}

.section-understory .cell.cell-cap:hover { background-color: var(--c-moss-glow); }
.section-research .cell.cell-r-2:hover,
.section-research .cell.cell-r-4:hover { background-color: var(--c-spring-shoot); color: var(--c-deep-canopy); }
.section-research .cell.cell-r-3:hover { background-color: var(--c-fern-heart); }
.section-instruments .cell.cell-i-prod:hover { background-color: var(--c-fern-heart); }
.section-instruments .cell.cell-i-stat:hover { background-color: var(--c-spring-shoot); color: var(--c-deep-canopy); }
.section-fieldnotes .cell.cell-f-2:hover,
.section-fieldnotes .cell.cell-f-3:hover,
.section-fieldnotes .cell.cell-f-4:hover { background-color: var(--c-fern-heart); }
.section-fieldnotes .cell.cell-f-5:hover { background-color: var(--c-moss-glow); }
.section-stewardship .cell.cell-s-2:hover,
.section-stewardship .cell.cell-s-3:hover,
.section-stewardship .cell.cell-s-4:hover { background-color: var(--c-fern-heart); }

/* ---------- typography inside cells ---------- */
.cell-tag {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-spring-shoot);
}

.cell-tag.light {
    color: var(--c-marble-cream);
    opacity: 0.7;
}

.cell-meta {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(250, 250, 245, 0.55);
    margin-top: auto;
}

.hand-display {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.02;
    color: var(--c-birch-white);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: 0.005em;
}

.hand-sub {
    font-family: var(--f-sub);
    font-weight: 400;
    line-height: 1.1;
    color: var(--c-birch-white);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    letter-spacing: 0.01em;
}

.hand-sub-light {
    font-family: var(--f-sub);
    font-weight: 400;
    color: var(--c-birch-white);
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    letter-spacing: 0.01em;
}

.hand-sub-light.small {
    font-size: 1.05rem;
}

.hand-stat {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(4rem, 8vw, 6rem);
    line-height: 0.9;
    color: var(--c-spring-shoot);
}

.hand-stat.tight {
    font-size: clamp(3.5rem, 6.5vw, 5rem);
}

.hero-sub {
    font-family: var(--f-body);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    color: var(--c-birch-white);
    max-width: 60ch;
    opacity: 0.94;
}

.cell p {
    font-family: var(--f-body);
    font-size: clamp(0.92rem, 1.1vw, 1rem);
    line-height: 1.65;
    color: var(--c-birch-white);
    opacity: 0.92;
}

.cell.cell-r-2:hover p, .cell.cell-r-4:hover p,
.cell.cell-i-stat:hover p {
    color: var(--c-deep-canopy);
    opacity: 1;
}

.mono-data {
    font-family: var(--f-mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--c-spring-shoot);
    opacity: 0.9;
}

.mono-data.subtle {
    color: var(--c-marble-cream);
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
}

.quiet-link {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--c-spring-shoot);
    margin-top: auto;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: border-color 220ms ease, color 220ms ease;
    cursor: pointer;
}

.cell:hover .quiet-link {
    border-bottom-color: var(--c-spring-shoot);
}

.hand-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.hand-bullets li {
    font-family: var(--f-sub);
    font-size: 1.05rem;
    color: var(--c-birch-white);
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.hand-bullets li span {
    color: var(--c-spring-shoot);
    font-family: var(--f-mono);
}

/* =========================================================
   Section 1: Understory grid (4x3 bento)
   ========================================================= */
.grid-understory {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, var(--row-unit));
}

.grid-understory .cell-1 {
    grid-column: 1 / span 8;
    grid-row: 1 / span 2;
    background-color: var(--c-deep-canopy);
    padding: 40px 44px;
    justify-content: center;
}

.grid-understory .cell-1:hover {
    background-color: #234836;
}

.grid-understory .cell-2 {
    grid-column: 9 / span 4;
    grid-row: 1 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-understory .cell-3 {
    grid-column: 9 / span 4;
    grid-row: 2 / span 1;
    background-color: var(--c-moss-glow);
    color: var(--c-deep-canopy);
}

.grid-understory .cell-3 .cell-tag.light,
.grid-understory .cell-3 .hand-sub,
.grid-understory .cell-3 p {
    color: var(--c-deep-canopy);
    opacity: 0.95;
}

.grid-understory .cell-3:hover {
    background-color: var(--c-spring-shoot);
}

.grid-understory .cell-4 {
    grid-column: 1 / span 6;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-understory .cell-5 {
    grid-column: 7 / span 3;
    grid-row: 3 / span 1;
    background-color: var(--c-deep-canopy);
    padding: 0;
}

.grid-understory .cell-6 {
    grid-column: 10 / span 3;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
    padding: 0;
}

/* hero leaf-edge bottom flourish */
.cell-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    width: 60%;
    height: 14px;
    z-index: 1;
    opacity: 0.6;
}

/* =========================================================
   Section 2: Research grid
   ========================================================= */
.grid-research {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, var(--row-unit));
}

.grid-research .cell-r-1 {
    grid-column: 1 / span 5;
    grid-row: 1 / span 3;
    background-color: var(--c-deep-canopy);
    padding: 40px 40px;
    justify-content: flex-start;
}

.grid-research .cell-r-2 {
    grid-column: 6 / span 4;
    grid-row: 1 / span 2;
    background-color: var(--c-fern-heart);
}

.grid-research .cell-r-3 {
    grid-column: 10 / span 3;
    grid-row: 1 / span 2;
    background-color: var(--c-moss-glow);
    color: var(--c-deep-canopy);
}

.grid-research .cell-r-3 .cell-tag,
.grid-research .cell-r-3 .hand-sub,
.grid-research .cell-r-3 p,
.grid-research .cell-r-3 .mono-data {
    color: var(--c-deep-canopy);
    opacity: 0.95;
}

.grid-research .cell-r-4 {
    grid-column: 6 / span 3;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-research .cell-r-leaf {
    grid-column: 9 / span 2;
    grid-row: 3 / span 1;
    background-color: var(--c-deep-canopy);
    padding: 0;
}

.grid-research .cell-r-stat {
    grid-column: 11 / span 2;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
    justify-content: center;
    gap: 6px;
}

/* =========================================================
   Section 3: Instruments
   ========================================================= */
.grid-instruments {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, var(--row-unit));
}

.grid-instruments .cell-i-leaf {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    background-color: var(--c-marble-cream);
    padding: 0;
    border: 1px solid rgba(168, 162, 158, 0.35);
}

.grid-instruments .cell-i-1 {
    grid-column: 4 / span 6;
    grid-row: 1 / span 2;
    background-color: var(--c-deep-canopy);
    padding: 38px 40px;
    justify-content: center;
}

.grid-instruments .cell-i-2 {
    grid-column: 10 / span 3;
    grid-row: 1 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-instruments .cell-i-3 {
    grid-column: 10 / span 3;
    grid-row: 2 / span 1;
    background-color: var(--c-moss-glow);
    color: var(--c-deep-canopy);
}

.grid-instruments .cell-i-3 .cell-tag,
.grid-instruments .cell-i-3 .hand-sub,
.grid-instruments .cell-i-3 p,
.grid-instruments .cell-i-3 .mono-data,
.grid-instruments .cell-i-3 .quiet-link {
    color: var(--c-deep-canopy);
    opacity: 0.95;
}

.grid-instruments .cell-i-3 .quiet-link { color: var(--c-deep-canopy); }

.grid-instruments .cell-i-4 {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-instruments .cell-i-stat {
    grid-column: 5 / span 3;
    grid-row: 3 / span 1;
    background-color: var(--c-deep-canopy);
    justify-content: center;
    gap: 8px;
}

.grid-instruments .cell-i-quote {
    grid-column: 8 / span 5;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
    justify-content: center;
}

.grid-instruments .cell-i-quote .hand-sub-light {
    line-height: 1.3;
}

/* =========================================================
   Section 4: Field Notes
   ========================================================= */
.grid-fieldnotes {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, var(--row-unit));
}

.grid-fieldnotes .cell-f-1 {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    background-color: var(--c-deep-canopy);
    padding: 40px 40px;
    justify-content: center;
}

.grid-fieldnotes .cell-f-2 {
    grid-column: 6 / span 3;
    grid-row: 1 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-fieldnotes .cell-f-3 {
    grid-column: 9 / span 4;
    grid-row: 1 / span 1;
    background-color: var(--c-moss-glow);
    color: var(--c-deep-canopy);
}

.grid-fieldnotes .cell-f-3 .cell-tag,
.grid-fieldnotes .cell-f-3 .hand-sub,
.grid-fieldnotes .cell-f-3 p,
.grid-fieldnotes .cell-f-3 .mono-data {
    color: var(--c-deep-canopy);
    opacity: 0.95;
}

.grid-fieldnotes .cell-f-4 {
    grid-column: 6 / span 4;
    grid-row: 2 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-fieldnotes .cell-f-leaf {
    grid-column: 10 / span 3;
    grid-row: 2 / span 1;
    background-color: var(--c-deep-canopy);
    padding: 0;
}

.grid-fieldnotes .cell-f-5 {
    grid-column: 1 / span 8;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
    flex-direction: row;
    align-items: center;
    gap: 28px;
}

.grid-fieldnotes .cell-f-5 .cell-tag {
    flex-shrink: 0;
}

.grid-fieldnotes .cell-f-5 .hand-sub {
    flex-shrink: 0;
    min-width: 140px;
}

.grid-fieldnotes .cell-f-5 p {
    flex: 1;
}

.grid-fieldnotes .cell-f-6 {
    grid-column: 9 / span 4;
    grid-row: 3 / span 1;
    background-color: var(--c-deep-canopy);
    justify-content: center;
    gap: 6px;
}

/* =========================================================
   Section 5: Stewardship
   ========================================================= */
.grid-stewardship {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, var(--row-unit));
}

.grid-stewardship .cell-s-1 {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    background-color: var(--c-deep-canopy);
    padding: 40px 40px;
    justify-content: center;
}

.grid-stewardship .cell-s-2 {
    grid-column: 6 / span 3;
    grid-row: 1 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-stewardship .cell-s-3 {
    grid-column: 9 / span 4;
    grid-row: 1 / span 1;
    background-color: var(--c-moss-glow);
    color: var(--c-deep-canopy);
}

.grid-stewardship .cell-s-3 .cell-tag,
.grid-stewardship .cell-s-3 .hand-sub,
.grid-stewardship .cell-s-3 p {
    color: var(--c-deep-canopy);
    opacity: 0.95;
}

.grid-stewardship .cell-s-4 {
    grid-column: 6 / span 7;
    grid-row: 2 / span 1;
    background-color: var(--c-fern-heart);
}

.grid-stewardship .cell-s-leaf {
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
    background-color: var(--c-deep-canopy);
    padding: 0;
}

.grid-stewardship .cell-s-team {
    grid-column: 4 / span 9;
    grid-row: 3 / span 1;
    background-color: var(--c-fern-heart);
    padding: 28px 32px;
}

.team-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 24px;
    margin-top: 8px;
}

.team-list li {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(116, 198, 157, 0.25);
}

.team-list li.more {
    grid-column: 1 / -1;
    border-bottom: none;
    padding-top: 4px;
    color: var(--c-spring-shoot);
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.hand-name {
    font-family: var(--f-sub);
    font-size: 1.1rem;
    color: var(--c-birch-white);
}

.role {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--c-spring-shoot);
    opacity: 0.85;
    text-transform: uppercase;
}

/* =========================================================
   Leaf SVG containers / spin animation
   ========================================================= */
.leaf-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
}

.leaf-spin {
    animation: spin 60s linear infinite;
}

.leaf-spin-rev {
    animation: spin-rev 72s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes spin-rev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .leaf-spin, .leaf-spin-rev { animation: none; }
}

/* =========================================================
   Branch connectors between sections
   ========================================================= */
.branch-connector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -56px;
    width: 80px;
    height: 56px;
    z-index: 1;
    pointer-events: none;
}

.branch-path {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 1200ms ease-out;
}

.branch-connector.is-drawn .branch-path {
    stroke-dashoffset: 0;
}

/* =========================================================
   Footer / Root zone
   ========================================================= */
.root-zone {
    background-color: var(--c-deep-canopy);
    color: var(--c-birch-white);
    margin-top: 56px;
    padding: 40px var(--margin) 32px;
    border-top: 2px solid var(--c-fern-heart);
}

.root-grid {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px 36px;
    align-items: start;
}

.root-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.root-id {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.root-name {
    font-size: 1.7rem;
    color: var(--c-birch-white);
}

.root-tag {
    color: var(--c-spring-shoot);
    opacity: 0.85;
    flex-basis: 100%;
}

.root-fine {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(82, 183, 136, 0.25);
}

.root-fine .mono-data {
    color: var(--c-vein-gray);
    opacity: 0.85;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

/* =========================================================
   Responsive: tablet
   ========================================================= */
@media (max-width: 1024px) {
    :root {
        --row-unit: 180px;
        --margin: 24px;
    }

    .canopy-inner {
        grid-template-columns: auto 1fr;
        gap: 16px;
    }

    .canopy-meta {
        display: none;
    }

    .canopy-nav {
        gap: 18px;
        font-size: 0.75rem;
    }

    .grid-understory,
    .grid-research,
    .grid-instruments,
    .grid-fieldnotes,
    .grid-stewardship {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
    }

    /* Understory tablet */
    .grid-understory .cell-1 { grid-column: 1 / span 8; grid-row: auto; }
    .grid-understory .cell-2 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-understory .cell-3 { grid-column: 5 / span 4; grid-row: auto; }
    .grid-understory .cell-4 { grid-column: 1 / span 8; grid-row: auto; }
    .grid-understory .cell-5 { grid-column: 1 / span 4; grid-row: auto; height: 200px; }
    .grid-understory .cell-6 { grid-column: 5 / span 4; grid-row: auto; height: 200px; }

    /* Research tablet */
    .grid-research .cell-r-1 { grid-column: 1 / span 8; grid-row: auto; }
    .grid-research .cell-r-2 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-research .cell-r-3 { grid-column: 5 / span 4; grid-row: auto; }
    .grid-research .cell-r-4 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-research .cell-r-leaf { grid-column: 5 / span 4; grid-row: auto; height: 200px; }
    .grid-research .cell-r-stat { grid-column: 1 / span 8; grid-row: auto; }

    /* Instruments tablet */
    .grid-instruments .cell-i-leaf { grid-column: 1 / span 4; grid-row: auto; height: 220px; }
    .grid-instruments .cell-i-1 { grid-column: 5 / span 4; grid-row: auto; }
    .grid-instruments .cell-i-2 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-instruments .cell-i-3 { grid-column: 5 / span 4; grid-row: auto; }
    .grid-instruments .cell-i-4 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-instruments .cell-i-stat { grid-column: 5 / span 4; grid-row: auto; }
    .grid-instruments .cell-i-quote { grid-column: 1 / span 8; grid-row: auto; }

    /* Field Notes tablet */
    .grid-fieldnotes .cell-f-1 { grid-column: 1 / span 8; grid-row: auto; }
    .grid-fieldnotes .cell-f-2 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-fieldnotes .cell-f-3 { grid-column: 5 / span 4; grid-row: auto; }
    .grid-fieldnotes .cell-f-4 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-fieldnotes .cell-f-leaf { grid-column: 5 / span 4; grid-row: auto; height: 200px; }
    .grid-fieldnotes .cell-f-5 { grid-column: 1 / span 8; grid-row: auto; flex-direction: column; align-items: flex-start; }
    .grid-fieldnotes .cell-f-6 { grid-column: 1 / span 8; grid-row: auto; }

    /* Stewardship tablet */
    .grid-stewardship .cell-s-1 { grid-column: 1 / span 8; grid-row: auto; }
    .grid-stewardship .cell-s-2 { grid-column: 1 / span 4; grid-row: auto; }
    .grid-stewardship .cell-s-3 { grid-column: 5 / span 4; grid-row: auto; }
    .grid-stewardship .cell-s-4 { grid-column: 1 / span 8; grid-row: auto; }
    .grid-stewardship .cell-s-leaf { grid-column: 1 / span 8; grid-row: auto; height: 200px; }
    .grid-stewardship .cell-s-team { grid-column: 1 / span 8; grid-row: auto; }

    .team-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .root-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   Responsive: mobile
   ========================================================= */
@media (max-width: 640px) {
    :root {
        --gutter: 12px;
        --margin: 16px;
    }

    .canopy-inner {
        padding: 12px var(--margin);
    }

    .canopy-nav {
        gap: 14px;
        font-size: 0.7rem;
    }

    .canopy-nav a {
        letter-spacing: 0.1em;
    }

    .brand-name {
        font-size: 1.4rem;
    }

    .bento-section {
        padding: 32px 0 40px;
        min-height: auto;
    }

    .bento-grid {
        grid-template-columns: 1fr !important;
    }

    .grid-understory > *,
    .grid-research > *,
    .grid-instruments > *,
    .grid-fieldnotes > *,
    .grid-stewardship > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .cell {
        padding: 22px 22px;
        min-height: 180px;
    }

    .cell.cell-hero, .cell.cell-r-1, .cell.cell-i-1, .cell.cell-f-1, .cell.cell-s-1 {
        padding: 28px 24px;
    }

    .grid-understory .cell-5,
    .grid-understory .cell-6,
    .grid-research .cell-r-leaf,
    .grid-instruments .cell-i-leaf,
    .grid-fieldnotes .cell-f-leaf,
    .grid-stewardship .cell-s-leaf {
        height: 180px;
        padding: 0;
    }

    .grid-fieldnotes .cell-f-5 {
        flex-direction: column;
    }

    .team-list {
        grid-template-columns: 1fr;
    }

    .root-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .leaf-spin, .leaf-spin-rev {
        animation: none;
    }

    /* Mobile alternating slide-in direction (set by JS) */
    .cell.from-left { transform: translateX(-24px); }
    .cell.from-right { transform: translateX(24px); }
    .cell.is-visible.from-left,
    .cell.is-visible.from-right {
        transform: translate(0, 0);
    }
}