/* ================================================================
   quirk.one — v2
   Aesthetic: inflated-3d · Layout: portfolio-grid
   Palette: ocean-deep · Patterns: zoom-focus · Imagery: marble-texture
   Motifs: tropical-fish · Tone: optimistic-bright
   ================================================================ */

:root {
    --abyss: #0A1628;
    --deep-water: #14304A;
    --ocean-teal: #1B6B8A;
    --coral: #E87461;
    --vein: #4A6B80;
    --pearl: #E8F0F4;
    --bio: #4AE8C8;

    --pillow-shadow:
        0 4px 6px rgba(10,22,40,0.10),
        0 10px 20px rgba(10,22,40,0.15),
        0 20px 40px rgba(10,22,40,0.10),
        inset 0 -2px 4px rgba(255,255,255,0.10),
        inset 0 2px 6px rgba(255,255,255,0.18);

    --pillow-shadow-hover:
        0 8px 12px rgba(10,22,40,0.12),
        0 18px 36px rgba(10,22,40,0.22),
        0 32px 60px rgba(10,22,40,0.18),
        inset 0 -3px 6px rgba(255,255,255,0.14),
        inset 0 3px 8px rgba(255,255,255,0.24);

    --font-brand: 'Nunito', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--pearl);
    background: var(--abyss);
    line-height: 1.7;
    overflow-x: hidden;
    font-size: clamp(15px, 1.5vw, 17px);
}

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

/* ================================================================
   Section 1 — Deep Dive Entry
   ================================================================ */

.deep-dive {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at 30% 20%, rgba(27,107,138,0.30), transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(74,232,200,0.10), transparent 60%),
        linear-gradient(180deg, var(--abyss) 0%, var(--deep-water) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 32px;
}

.marble-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    mix-blend-mode: screen;
    animation: marble-fade 1.4s ease-out 0.3s forwards;
    pointer-events: none;
}

.marble-bg svg { width: 100%; height: 100%; opacity: 0.45; }

@keyframes marble-fade {
    from { opacity: 0; }
    to   { opacity: 0.30; }
}

.bio-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(720px, 80vw);
    height: min(720px, 80vw);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(74,232,200,0.32) 0%, rgba(74,232,200,0.10) 35%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    animation: bio-pulse 6s ease-in-out infinite;
}

@keyframes bio-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.00); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}

.dive-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 960px;
}

.brand-stamp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(232,240,244,0.06);
    border: 1px solid rgba(232,240,244,0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 28px;
    opacity: 0;
    animation: rise-in 0.9s ease-out 0.45s forwards;
}

.brand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bio);
    box-shadow: 0 0 12px var(--bio);
}

.brand-tag {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pearl);
    opacity: 0.85;
}

.wordmark {
    font-family: var(--font-brand);
    font-weight: 900;
    font-size: clamp(56px, 11vw, 168px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--pearl);
    margin: 0 auto;
    transform: scale(0.8);
    opacity: 0;
    animation: inflate-in 1.2s cubic-bezier(0.34,1.56,0.64,1) 1s forwards;
    text-shadow:
        0 1px 0 #d1dbe1,
        0 2px 0 #b9c4cb,
        0 3px 0 #a4b0b8,
        0 4px 0 #8e9aa3,
        0 5px 0 #79858e,
        0 6px 1px rgba(10,22,40,0.30),
        0 0 8px rgba(10,22,40,0.18),
        0 4px 24px rgba(74,232,200,0.18),
        0 14px 32px rgba(10,22,40,0.55);
    will-change: transform;
}

.wordmark span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.3s ease;
    font-variation-settings: "wght" 800;
}

.wordmark span:hover {
    transform: translateY(-6px) scale(1.05);
    color: var(--bio);
}

.wm-dot {
    color: var(--coral);
    text-shadow:
        0 1px 0 #c46255,
        0 2px 0 #a4564b,
        0 3px 0 #884a40,
        0 4px 6px rgba(10,22,40,0.4);
}

.wm-o {
    color: var(--bio);
    text-shadow:
        0 1px 0 #3fcdb0,
        0 2px 0 #34b29a,
        0 3px 0 #299782,
        0 4px 8px rgba(74,232,200,0.5),
        0 14px 32px rgba(10,22,40,0.55);
}

@keyframes inflate-in {
    0%   { transform: scale(0.8); opacity: 0; filter: blur(6px); }
    60%  { transform: scale(1.04); opacity: 1; filter: blur(0); }
    100% { transform: scale(1.0); opacity: 1; }
}

.dive-tagline {
    margin-top: 28px;
    font-size: clamp(15px, 1.7vw, 20px);
    color: rgba(232,240,244,0.78);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: rise-in 0.9s ease-out 1.6s forwards;
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.scroll-cue {
    margin-top: 56px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: rise-in 0.9s ease-out 2.0s forwards;
}

.cue-label {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(232,240,244,0.65);
}

.cue-arrow {
    width: 18px;
    height: 18px;
    border-right: 2px solid var(--bio);
    border-bottom: 2px solid var(--bio);
    transform: rotate(45deg);
    animation: cue-bob 1.8s ease-in-out infinite;
}

@keyframes cue-bob {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
    50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1.0; }
}

/* Fish swim layer */
.fish-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: rise-in 1s ease-out 0.6s forwards;
}

.fish {
    position: absolute;
    will-change: transform;
    filter: drop-shadow(0 6px 14px rgba(10,22,40,0.45));
}

.fish-1 { color: var(--coral);     top: 18%; animation: swim-1 18s ease-in-out infinite alternate; }
.fish-2 { color: var(--bio);       top: 62%; animation: swim-2 24s ease-in-out infinite alternate; animation-delay: -3s; }
.fish-3 { color: var(--coral);     top: 38%; animation: swim-3 14s ease-in-out infinite alternate; animation-delay: -6s; }
.fish-4 { color: var(--bio);       top: 78%; animation: swim-4 22s ease-in-out infinite alternate; animation-delay: -9s; }
.fish-5 { color: var(--coral);     top: 8%;  animation: swim-5 20s ease-in-out infinite alternate; animation-delay: -2s; }

@keyframes swim-1 {
    0%   { transform: translate(-120px, 0) rotate(0deg); }
    50%  { transform: translate(50vw, -22px) rotate(-3deg); }
    100% { transform: translate(110vw, 8px) scaleX(-1) rotate(2deg); }
}
@keyframes swim-2 {
    0%   { transform: translate(110vw, 0) scaleX(-1); }
    50%  { transform: translate(48vw, 16px) scaleX(-1) rotate(2deg); }
    100% { transform: translate(-140px, -10px) rotate(-2deg); }
}
@keyframes swim-3 {
    0%   { transform: translate(-100px, 0); }
    50%  { transform: translate(55vw, -14px) rotate(-2deg); }
    100% { transform: translate(108vw, 6px) scaleX(-1); }
}
@keyframes swim-4 {
    0%   { transform: translate(108vw, 0) scaleX(-1); }
    50%  { transform: translate(40vw, 12px) scaleX(-1); }
    100% { transform: translate(-120px, -8px); }
}
@keyframes swim-5 {
    0%   { transform: translate(-80px, 0); }
    50%  { transform: translate(50vw, 10px); }
    100% { transform: translate(108vw, -4px) scaleX(-1); }
}

/* ================================================================
   Section 2 — Specimen Grid
   ================================================================ */

.specimens {
    position: relative;
    padding: clamp(64px, 8vw, 120px) 32px;
    background:
        radial-gradient(ellipse at top, rgba(27,107,138,0.18), transparent 60%),
        linear-gradient(180deg, var(--deep-water) 0%, #0F2640 100%);
}

.section-head {
    max-width: 1100px;
    margin: 0 auto 64px;
    text-align: left;
}

.kicker {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bio);
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(74,232,200,0.10);
    border: 1px solid rgba(74,232,200,0.30);
    margin-bottom: 20px;
}

.kicker-light { color: var(--coral); background: rgba(232,116,97,0.12); border-color: rgba(232,116,97,0.32); }

.section-title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--pearl);
    max-width: 820px;
}

.section-title-light { color: var(--pearl); }

.section-lede {
    margin-top: 16px;
    color: rgba(232,240,244,0.72);
    max-width: 580px;
    font-size: clamp(15px, 1.4vw, 17px);
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

.card-tall { grid-row: span 2; }
.card-wide { grid-column: span 2; }

.card {
    position: relative;
    border-radius: 24px;
    padding: 32px;
    background: var(--pearl);
    color: var(--abyss);
    overflow: hidden;
    box-shadow: var(--pillow-shadow);
    transition: transform 0.34s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.34s ease-out,
                opacity 0.3s ease;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.card-marble {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.10;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.card-marble svg { width: 100%; height: 100%; }

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);
    pointer-events: none;
}

.card::after {
    content: "";
    position: absolute;
    left: -30%;
    bottom: -40%;
    z-index: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card-tint, var(--ocean-teal)) 0%, transparent 70%);
    opacity: 0.18;
    filter: blur(14px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.card-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-brand);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--card-tint, var(--ocean-teal));
    margin-bottom: 16px;
}

.card-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--abyss);
    margin-bottom: 14px;
    font-variation-settings: "wght" 800;
    transition: font-variation-settings 0.4s ease, letter-spacing 0.4s ease;
}

.card-tall .card-title { font-size: clamp(26px, 2.6vw, 36px); }

.card-body {
    position: relative;
    z-index: 1;
    color: var(--deep-water);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: auto;
    padding-bottom: 18px;
}

.card-meta {
    position: relative;
    z-index: 1;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(10,22,40,0.10);
}

.card-meta li {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.card-meta span {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vein);
    font-size: 10px;
}

.card-meta strong {
    font-family: var(--font-brand);
    font-weight: 800;
    color: var(--abyss);
    margin-top: 2px;
    font-size: 13px;
}

.card-bubble {
    position: absolute;
    z-index: 0;
    right: -24px;
    top: -24px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.18) 50%, transparent 70%);
    box-shadow:
        inset 0 4px 8px rgba(255,255,255,0.6),
        0 4px 10px rgba(10,22,40,0.10);
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* zoom-focus + sibling-dim */
.card:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: var(--pillow-shadow-hover);
    z-index: 5;
}

.card:hover .card-title {
    font-variation-settings: "wght" 900;
    letter-spacing: 0.005em;
}

.card:hover .card-bubble { transform: translate(-8px, 8px) scale(1.12); }

.card:hover::after { opacity: 0.32; transform: scale(1.15); }

.grid:hover .card:not(:hover) { opacity: 0.85; }

/* reveal-on-scroll */
.card { opacity: 0; transform: translateY(28px); }
.card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        transform 0.7s cubic-bezier(0.34,1.56,0.64,1),
        opacity 0.7s ease,
        box-shadow 0.34s ease-out;
}
.grid:hover .card.is-visible:not(:hover) { opacity: 0.85; }

/* ================================================================
   Section 3 — Ocean Floor Panels
   ================================================================ */

.ocean-floor {
    position: relative;
    padding: clamp(80px, 9vw, 140px) 32px;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(74,232,200,0.10), transparent 60%),
        linear-gradient(180deg, #0F2640 0%, var(--abyss) 100%);
    overflow: hidden;
}

.floor-marble {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    mix-blend-mode: screen;
    pointer-events: none;
}

.floor-marble svg { width: 100%; height: 100%; }

.section-head + .floor-stack { margin-top: 56px; }

.floor-stack {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.panel {
    position: relative;
    border-radius: 32px;
    padding: clamp(36px, 5vw, 64px);
    background: linear-gradient(135deg, #1A4060 0%, #14304A 65%, #0F2640 100%);
    overflow: hidden;
    box-shadow: var(--pillow-shadow);
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.5s ease-out;
    color: var(--pearl);
}

.panel-marble {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.18;
    mix-blend-mode: screen;
    pointer-events: none;
}

.panel-marble svg { width: 100%; height: 100%; }

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%);
    pointer-events: none;
}

.panel::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    z-index: 0;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74,232,200,0.22), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}

.panel[data-panel="B"]::after { background: radial-gradient(circle, rgba(232,116,97,0.22), transparent 70%); }
.panel[data-panel="C"]::after { background: radial-gradient(circle, rgba(27,107,138,0.32), transparent 70%); right: auto; left: -120px; bottom: -120px; top: auto; }

.panel:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: var(--pillow-shadow-hover);
}

.panel-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.panel-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(74,232,200,0.10);
    border: 1px solid rgba(74,232,200,0.30);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bio);
}

.panel-coord {
    font-family: var(--font-brand);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232,240,244,0.62);
}

.panel-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: var(--pearl);
    margin-bottom: 18px;
    max-width: 720px;
}

.panel-body {
    position: relative;
    z-index: 1;
    color: rgba(232,240,244,0.84);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.7;
    max-width: 760px;
    margin-bottom: 24px;
}

.panel-tags {
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-tags li {
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(232,240,244,0.06);
    border: 1px solid rgba(232,240,244,0.14);
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(232,240,244,0.88);
    transition: transform 0.3s ease, background 0.3s ease;
}

.panel:hover .panel-tags li { background: rgba(74,232,200,0.10); }

.panel { opacity: 0; transform: translateY(40px); }
.panel.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        transform 0.8s cubic-bezier(0.34,1.56,0.64,1),
        opacity 0.8s ease,
        box-shadow 0.5s ease-out;
}

/* ================================================================
   Section 4 — Coral Reef Footer
   ================================================================ */

.reef {
    position: relative;
    padding: clamp(88px, 9vw, 140px) 32px clamp(48px, 5vw, 72px);
    background: linear-gradient(180deg, var(--abyss) 0%, #050D18 100%);
    overflow: hidden;
}

.reef-blob {
    position: absolute;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    filter: blur(2px);
    box-shadow: var(--pillow-shadow);
    pointer-events: none;
    opacity: 0.92;
}

.reef-blob-1 {
    width: 320px; height: 220px;
    left: -80px; top: 20%;
    background: linear-gradient(135deg, var(--coral) 0%, #c2554a 100%);
    border-radius: 64% 36% 58% 42% / 52% 64% 36% 48%;
    animation: blob-drift-1 14s ease-in-out infinite alternate;
}

.reef-blob-2 {
    width: 240px; height: 240px;
    right: 8%; top: 8%;
    background: linear-gradient(135deg, #f29683 0%, var(--coral) 100%);
    border-radius: 48% 52% 64% 36% / 60% 40% 56% 44%;
    animation: blob-drift-2 16s ease-in-out infinite alternate;
}

.reef-blob-3 {
    width: 360px; height: 200px;
    right: -120px; bottom: -40px;
    background: linear-gradient(135deg, var(--coral) 0%, #a44a40 100%);
    border-radius: 52% 48% 40% 60% / 64% 56% 44% 36%;
    animation: blob-drift-3 18s ease-in-out infinite alternate;
}

@keyframes blob-drift-1 {
    from { transform: translate(0,0) rotate(0deg);   border-radius: 64% 36% 58% 42% / 52% 64% 36% 48%; }
    to   { transform: translate(20px,-12px) rotate(8deg); border-radius: 56% 44% 64% 36% / 48% 56% 44% 52%; }
}
@keyframes blob-drift-2 {
    from { transform: translate(0,0)   rotate(0deg);  border-radius: 48% 52% 64% 36% / 60% 40% 56% 44%; }
    to   { transform: translate(-16px,14px) rotate(-6deg); border-radius: 56% 44% 48% 52% / 52% 60% 40% 48%; }
}
@keyframes blob-drift-3 {
    from { transform: translate(0,0)   rotate(0deg);  border-radius: 52% 48% 40% 60% / 64% 56% 44% 36%; }
    to   { transform: translate(-30px,-10px) rotate(10deg); border-radius: 60% 40% 56% 44% / 56% 64% 36% 44%; }
}

.reef-content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 36px 48px;
    align-items: start;
}

.reef-brand {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reef-brandname {
    font-family: var(--font-brand);
    font-weight: 900;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--pearl);
    letter-spacing: -0.015em;
    text-shadow:
        0 1px 0 #d1dbe1,
        0 2px 0 #b9c4cb,
        0 3px 4px rgba(10,22,40,0.5);
}

.reef-brand .brand-dot { box-shadow: 0 0 14px var(--bio); }

.reef-tagline {
    color: rgba(232,240,244,0.7);
    max-width: 260px;
    font-size: 14px;
}

.reef-nav h4, .reef-links h4 { display: none; }

.reef-nav ul, .reef-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reef-nav a, .reef-links a {
    text-decoration: none;
    color: rgba(232,240,244,0.78);
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: color 0.3s ease, transform 0.3s ease, padding 0.3s ease;
    display: inline-block;
}

.reef-nav a:hover, .reef-links a:hover {
    color: var(--bio);
    transform: translateX(4px);
}

.reef-credit {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 28px;
    border-top: 1px solid rgba(232,240,244,0.10);
    color: rgba(232,240,244,0.50);
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 920px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 260px;
    }
    .card-tall { grid-row: span 2; }
    .card-wide { grid-column: span 2; }

    .reef-content {
        grid-template-columns: 1fr 1fr;
    }
    .reef-brand { grid-row: auto; grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .card, .card-tall, .card-wide {
        grid-row: auto;
        grid-column: auto;
        min-height: 280px;
    }

    .floor-stack { gap: 24px; }
    .panel { padding: 32px 26px; border-radius: 24px; }

    .reef-content { grid-template-columns: 1fr; }
    .reef-brand { grid-row: auto; }
    .reef-credit { flex-direction: column; gap: 6px; }

    .wordmark { font-size: clamp(48px, 14vw, 84px); }
}