/* bada.coffee — Coastal Roastery Design */
/* Colors: #2C1810 #C4A882 #8B7355 #A8C5B8 #7BA395 #F2EDE6 #5C5C5C #3D3029 #e0be96 #b8a08a #a8926e #ffffff */
/* Fonts: Caveat (headings), DM Sans (body), IBM Plex Mono (accents) */

:root {
    --espresso: #2C1810;
    --basalt: #3D3029;
    --wet-sand: #C4A882;
    --driftwood: #8B7355;
    --sea-foam: #A8C5B8;
    --celadon: #7BA395;
    --kiln-white: #F2EDE6;
    --storm: #5C5C5C;
    --sand-highlight: #e0be96;
    --sand-tan: #b8a08a;
    --sand-shadow: #a8926e;
    --white: #ffffff;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--kiln-white);
    color: var(--espresso);
    line-height: 1.65;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

/* ---------- LEATHER TEXTURE (pure CSS layered radial-gradients) ---------- */
.leather-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
    background-color: var(--wet-sand);
    background-image:
        radial-gradient(circle at 13% 17%, rgba(44,24,16,0.9) 0 0.6px, transparent 1.2px),
        radial-gradient(circle at 37% 42%, rgba(44,24,16,0.85) 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 61% 29%, rgba(44,24,16,0.9) 0 0.5px, transparent 1.1px),
        radial-gradient(circle at 83% 61%, rgba(44,24,16,0.85) 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 22% 73%, rgba(44,24,16,0.9) 0 0.6px, transparent 1.2px),
        radial-gradient(circle at 47% 88%, rgba(44,24,16,0.85) 0 0.55px, transparent 1.15px),
        radial-gradient(circle at 71% 81%, rgba(44,24,16,0.9) 0 0.65px, transparent 1.25px),
        radial-gradient(circle at 9% 53%, rgba(44,24,16,0.85) 0 0.5px, transparent 1.1px),
        radial-gradient(circle at 55% 9%, rgba(44,24,16,0.9) 0 0.55px, transparent 1.15px),
        radial-gradient(circle at 92% 21%, rgba(44,24,16,0.85) 0 0.6px, transparent 1.2px),
        radial-gradient(ellipse 60% 40% at 30% 30%, rgba(139,115,85,0.15), transparent 70%),
        radial-gradient(ellipse 50% 60% at 70% 80%, rgba(61,48,41,0.12), transparent 70%);
    background-size: 24px 24px, 31px 31px, 27px 27px, 33px 33px, 29px 29px, 35px 35px, 26px 26px, 30px 30px, 28px 28px, 32px 32px, 100% 100%, 100% 100%;
}

/* ---------- TOP NAV ---------- */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 40px;
    background: rgba(242, 237, 230, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(139, 115, 85, 0.15);
}

.nav-logo {
    font-family: 'Caveat', cursive;
    font-size: 26px;
    font-weight: 700;
    color: var(--espresso);
    letter-spacing: 0.01em;
}

.nav-dot {
    color: var(--celadon);
}

.nav-links {
    display: flex;
    gap: 28px;
}

.nav-links a {
    position: relative;
    font-family: 'Caveat', cursive;
    font-size: 20px;
    color: var(--basalt);
    transition: color 180ms ease;
}

.nav-links a::before {
    content: attr(data-nav);
    display: inline-block;
    margin-right: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--driftwood);
    letter-spacing: 0.1em;
    vertical-align: middle;
    transform: translateY(-2px);
}

.nav-links a:hover,
.nav-links a.is-active {
    color: var(--celadon);
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--celadon);
    transition: width 220ms ease;
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
    width: 100%;
}

.nav-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--driftwood);
    letter-spacing: 0.1em;
}

/* ---------- TIDE METER ---------- */
.tide-meter {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tide-meter-track {
    width: 4px;
    height: 160px;
    background: rgba(44, 24, 16, 0.12);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 1px 1px 2px rgba(168, 146, 110, 0.4),
                inset -1px -1px 2px rgba(255, 255, 255, 0.5);
}

.tide-meter-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, var(--celadon), var(--sea-foam));
    border-radius: 2px;
    transition: height 120ms linear;
}

.tide-meter-label {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--driftwood);
    writing-mode: vertical-rl;
    letter-spacing: 0.05em;
}

.tide-meter-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--driftwood);
    letter-spacing: 0.1em;
}

/* ---------- ZONES ---------- */
.zone {
    position: relative;
    padding: 120px 48px 100px;
    z-index: 2;
}

.zone-light {
    background-color: var(--kiln-white);
    color: var(--espresso);
}

.zone-roastery {
    background: linear-gradient(180deg, var(--basalt) 0%, var(--espresso) 100%);
    color: var(--kiln-white);
}

.zone-kiln {
    background: linear-gradient(180deg, var(--kiln-white) 0%, #ebe3d6 100%);
}

.zone-dark {
    background-color: var(--basalt);
    color: var(--kiln-white);
}

/* Sharp-angle clip-paths between zones (10-12 deg) */
.zone-clip-top {
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%);
    margin-top: -3vh;
    padding-top: 140px;
}

.zone-clip-top-rev {
    clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 100%);
    margin-top: -3vh;
    padding-top: 140px;
}

/* Zone label */
.zone-label {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 56px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.zone-label.visible {
    opacity: 1;
    transform: translateX(0);
}

.zone-number {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--driftwood);
    letter-spacing: 0.15em;
}

.zone-roastery .zone-number,
.zone-dark .zone-number {
    color: var(--sand-shadow);
}

.zone-name {
    font-family: 'Caveat', cursive;
    font-size: 32px;
    font-weight: 600;
    color: var(--basalt);
}

.zone-roastery .zone-name,
.zone-dark .zone-name {
    color: var(--sand-highlight);
}

.zone-coord {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--driftwood);
    letter-spacing: 0.1em;
}

.zone-roastery .zone-coord,
.zone-dark .zone-coord {
    color: var(--sand-tan);
}

/* ---------- PORTFOLIO GRID (Zone 1) ---------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    grid-auto-flow: dense;
}

.card-span-2 { grid-column: span 2; }
.card-span-3 { grid-column: span 3; }
.card-span-5 { grid-column: span 5; }

.card-short  { min-height: 240px; }
.card-medium { min-height: 300px; }
.card-tall   { min-height: 400px; }

/* ---------- NEOMORPHIC CARD (Wet Sand surface) ---------- */
.neo-card {
    background: var(--wet-sand);
    border-radius: 16px;
    box-shadow:
        6px 6px 12px var(--sand-shadow),
        -6px -6px 12px var(--sand-highlight);
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition:
        transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 250ms ease,
        opacity 600ms ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.neo-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.neo-card:hover {
    transform: translateY(-6px);
    box-shadow:
        10px 10px 20px var(--sand-shadow),
        -10px -10px 20px var(--sand-highlight);
}

.neo-card:active {
    transform: translateY(0);
    box-shadow:
        inset 4px 4px 8px var(--sand-shadow),
        inset -4px -4px 8px var(--sand-highlight);
}

/* Sharp 45-deg corner cuts (alternating) */
.clip-tr {
    clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
}

.clip-bl {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 36px 100%, 0 calc(100% - 36px));
}

/* Card inner pieces */
.card-image-area {
    width: 100%;
    flex: 1 1 auto;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(145deg, rgba(224, 190, 150, 0.35), rgba(168, 146, 110, 0.25));
    position: relative;
    overflow: hidden;
}

.card-image-area::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 30% 30%, rgba(255,255,255,0.25), transparent 70%);
}

.card-svg-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    position: relative;
    z-index: 1;
}

.card-content {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-content-wide {
    padding: 22px 28px 26px;
}

.card-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--driftwood);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.card-title {
    font-family: 'Caveat', cursive;
    font-size: 34px;
    font-weight: 600;
    color: var(--espresso);
    line-height: 1.05;
    margin-bottom: 2px;
}

.card-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--basalt);
    margin-bottom: 6px;
    opacity: 0.88;
}

.card-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--driftwood);
    letter-spacing: 0.08em;
}

/* Ceramic dots (small neomorphic circles as decoration) */
.ceramic-dot {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wet-sand);
    box-shadow:
        3px 3px 6px var(--sand-shadow),
        -3px -3px 6px var(--sand-highlight);
    pointer-events: none;
}

.ceramic-dot-tr {
    top: 14px;
    right: 14px;
    z-index: 3;
}

.ceramic-dot-filled {
    background: var(--celadon);
}

.ceramic-dot-kiln-1 {
    top: 280px;
    right: 5%;
    width: 36px;
    height: 36px;
}

.ceramic-dot-kiln-2 {
    bottom: 220px;
    left: 3%;
    width: 40px;
    height: 40px;
}

.ceramic-dot-kiln-3 {
    top: 520px;
    left: 48%;
    width: 24px;
    height: 24px;
}

/* ---------- WAVE SEPARATOR (ocean-line SVG) ---------- */
.wave-separator {
    max-width: 1280px;
    margin: 64px auto 0;
    width: 100%;
    opacity: 0.8;
}

.wave-separator svg {
    width: 100%;
    height: 40px;
    display: block;
    overflow: visible;
}

.drift-wave {
    animation: waveDrift 20s linear infinite;
}

.drift-wave-2 { animation-duration: 24s; animation-direction: reverse; }
.drift-wave-3 { animation-duration: 28s; }

@keyframes waveDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-80px); }
}

/* ---------- ZONE 2 — Quote ---------- */
.kiln-quote {
    max-width: 1100px;
    margin: 32px auto 96px;
    padding: 48px 40px;
    text-align: center;
    position: relative;
}

.kiln-quote::before,
.kiln-quote::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 1px;
    background: var(--sand-shadow);
    top: 50%;
    opacity: 0.5;
}

.kiln-quote::before { left: 0; }
.kiln-quote::after  { right: 0; }

.kiln-quote-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(44px, 6vw, 76px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--kiln-white);
    letter-spacing: 0.01em;
}

.kiln-quote-accent {
    color: var(--sea-foam);
    font-style: italic;
}

.kiln-quote-sub {
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-size: 15px;
    color: var(--sand-tan);
    margin-top: 16px;
    letter-spacing: 0.02em;
}

/* ---------- ZONE 2 — Origin cards (inverted neomorphism) ---------- */
.roastery-content {
    max-width: 1280px;
    margin: 0 auto;
}

.roastery-header {
    margin-bottom: 64px;
    max-width: 620px;
}

.roastery-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--sand-highlight);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.section-title {
    font-family: 'Caveat', cursive;
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.05;
}

.zone-roastery .section-title,
.zone-dark .section-title {
    color: var(--sand-highlight);
}

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

.section-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    color: var(--storm);
    max-width: 560px;
    line-height: 1.65;
}

.zone-roastery .section-subtitle {
    color: var(--sand-tan);
}

.origin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

.origin-card {
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 16px;
    position: relative;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 600ms ease,
        transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 250ms ease;
    cursor: pointer;
}

.inverted-neo {
    background: var(--basalt);
    box-shadow:
        inset 5px 5px 10px #2a211b,
        inset -5px -5px 10px #4e3d32;
}

.origin-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.origin-card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 3px 3px 6px #2a211b,
        inset -3px -3px 6px #4e3d32,
        6px 6px 14px rgba(0,0,0,0.4);
}

.origin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.origin-badge {
    width: 54px;
    height: 54px;
}

.origin-badge svg {
    width: 100%;
    height: 100%;
}

.origin-number {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--sand-shadow);
    letter-spacing: 0.1em;
}

.origin-name {
    font-family: 'Caveat', cursive;
    font-size: 30px;
    font-weight: 600;
    color: var(--kiln-white);
    line-height: 1.05;
}

.origin-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--sand-tan);
    line-height: 1.55;
}

.origin-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px dashed rgba(184, 160, 138, 0.2);
}

.origin-detail {
    display: flex;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
}

.origin-detail dt {
    color: var(--driftwood);
    min-width: 70px;
}

.origin-detail dd {
    color: var(--sand-tan);
}

.roast-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.roast-label,
.roast-level {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--sand-shadow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.roast-level {
    color: var(--sand-highlight);
    min-width: 72px;
    text-align: right;
}

.roast-meter-track {
    flex: 1;
    height: 4px;
    background: rgba(184, 160, 138, 0.18);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.35);
}

.roast-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wet-sand), var(--driftwood));
    border-radius: 2px;
    width: 0%;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- ZONE 3 — Kiln / Tasting Notes ---------- */
.zone-kiln {
    padding-bottom: 140px;
}

.kiln-content {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

.kiln-header {
    margin-bottom: 56px;
    max-width: 620px;
    margin-left: auto;
    text-align: right;
}

.kiln-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--driftwood);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.tasting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.tasting-card {
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(16px);
    min-height: 280px;
}

.tasting-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.tasting-card-square {
    aspect-ratio: auto;
}

.tasting-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wet-sand);
    border-radius: 50%;
    box-shadow:
        inset 2px 2px 4px var(--sand-shadow),
        inset -2px -2px 4px var(--sand-highlight);
    padding: 10px;
    margin-bottom: 4px;
}

.tasting-icon svg {
    width: 100%;
    height: 100%;
}

.tasting-name {
    font-family: 'Caveat', cursive;
    font-size: 34px;
    font-weight: 600;
    color: var(--espresso);
    line-height: 1;
}

.tasting-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--storm);
    flex: 1;
}

.tasting-intensity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed rgba(139,115,85,0.2);
}

.intensity-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--driftwood);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.intensity-bar {
    flex: 1;
    height: 4px;
    background: rgba(139, 115, 85, 0.18);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 1px 1px 2px rgba(168,146,110,0.3);
}

.intensity-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--celadon), var(--sea-foam));
    border-radius: 2px;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.intensity-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--espresso);
    min-width: 32px;
    text-align: right;
    font-weight: 500;
}

.wave-separator-bottom {
    margin-top: 80px;
}

/* ---------- ZONE 4 — Horizon / Footer ---------- */
.zone-footer {
    padding-bottom: 60px;
    padding-top: 140px;
}

.horizon-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.horizon-brand {
    text-align: center;
    margin-bottom: 72px;
    position: relative;
}

.horizon-logo {
    font-family: 'Caveat', cursive;
    font-size: 72px;
    font-weight: 700;
    color: var(--sand-highlight);
    line-height: 1;
}

.horizon-dot {
    color: var(--celadon);
}

.horizon-tagline {
    font-family: 'DM Sans', sans-serif;
    font-style: italic;
    font-size: 17px;
    color: var(--sand-tan);
    margin-top: 14px;
    letter-spacing: 0.02em;
}

.horizon-waves {
    width: 100%;
    max-width: 600px;
    margin: 32px auto 0;
    height: 60px;
    overflow: hidden;
}

.horizon-waves svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.horizon-wave {
    animation: horizonDrift 20s linear infinite;
}

.horizon-wave-2 {
    animation-duration: 24s;
    animation-direction: reverse;
}

.horizon-wave-3 {
    animation-duration: 28s;
}

@keyframes horizonDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

.horizon-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 64px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(168, 146, 110, 0.18);
}

.horizon-col-title {
    font-family: 'Caveat', cursive;
    font-size: 28px;
    font-weight: 600;
    color: var(--wet-sand);
    margin-bottom: 14px;
}

.horizon-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.9;
    color: var(--sand-tan);
}

.horizon-index {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.horizon-index a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--sand-tan);
    transition: color 180ms ease;
}

.horizon-index a:hover {
    color: var(--sea-foam);
}

.horizon-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.copyright-text,
.copyright-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--driftwood);
    letter-spacing: 0.08em;
}

.copyright-meta {
    color: var(--sand-shadow);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .card-span-5 { grid-column: span 6; }
    .card-span-3 { grid-column: span 3; }
    .card-span-2 { grid-column: span 3; }

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

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

@media (max-width: 768px) {
    .zone {
        padding: 100px 20px 80px;
    }
    .zone-clip-top,
    .zone-clip-top-rev {
        padding-top: 120px;
    }

    .top-nav {
        padding: 10px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-links {
        gap: 14px;
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .nav-time {
        display: none;
    }

    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
    .card-span-5,
    .card-span-3,
    .card-span-2 { grid-column: span 4; }

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

    .kiln-header {
        text-align: left;
        margin-left: 0;
    }

    .horizon-details {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tide-meter {
        display: none;
    }

    .section-title {
        font-size: 42px;
    }

    .horizon-logo {
        font-size: 52px;
    }

    .zone-coord {
        margin-left: 0;
        width: 100%;
    }

    .kiln-quote::before,
    .kiln-quote::after {
        display: none;
    }
}

@media (max-width: 460px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .card-span-5,
    .card-span-3,
    .card-span-2 { grid-column: span 1; }

    .nav-links a::before {
        display: none;
    }
}

/* ---------- MOTION REDUCE ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .drift-wave,
    .horizon-wave {
        animation: none;
    }
}