/* matchoomnews.com-v2 — Terracotta Warm, Layered Depth, Leather Reading Room */

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

:root {
    --reading-dark: #1A1210;
    --card-dark: #241A14;
    --leather-brown: #5A3A20;
    --terracotta-glow: #A0604A;
    --circuit-copper: #C87850;
    --warm-cream: #F0E0D0;
    --muted-blush: #8A6A5A;

    --font-headline: 'Caveat', cursive;
    --font-body: 'Merriweather', serif;
    --font-meta: 'IBM Plex Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
    background: var(--reading-dark);
    color: var(--warm-cream);
    font-family: var(--font-body);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
    perspective: 1400px;
    perspective-origin: 50% 30%;
    background-image:
        radial-gradient(1200px 800px at 20% 0%, rgba(160, 96, 74, 0.10), transparent 60%),
        radial-gradient(900px 700px at 90% 30%, rgba(200, 120, 80, 0.06), transparent 65%),
        radial-gradient(1100px 900px at 50% 110%, rgba(90, 58, 32, 0.20), transparent 60%);
}

/* ---- Atmospheric glow layer ---- */
.atmosphere {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
}
.glow {
    position: absolute; border-radius: 50%; filter: blur(80px);
    opacity: 0.55;
    mix-blend-mode: screen;
}
.glow-a {
    width: 60vw; height: 60vw; left: -10vw; top: -10vw;
    background: radial-gradient(circle, rgba(160, 96, 74, 0.18), transparent 70%);
    animation: drift-a 28s ease-in-out infinite alternate;
}
.glow-b {
    width: 50vw; height: 50vw; right: -10vw; top: 30vh;
    background: radial-gradient(circle, rgba(200, 120, 80, 0.10), transparent 70%);
    animation: drift-b 36s ease-in-out infinite alternate;
}
.glow-c {
    width: 70vw; height: 70vw; left: 10vw; bottom: -20vw;
    background: radial-gradient(circle, rgba(90, 58, 32, 0.30), transparent 70%);
    animation: drift-c 44s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(6vw, 4vh, 0); } }
@keyframes drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-5vw, 6vh, 0); } }
@keyframes drift-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(4vw, -3vh, 0); } }

/* ---- Leather texture utility ---- */
.leather {
    background-color: var(--leather-brown);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.35) 1px, transparent 2px),
        radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,0.30) 1px, transparent 2px),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(0,0,0,0.25) 1px, transparent 2px),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 220, 190, 0.06) 1px, transparent 2px),
        radial-gradient(2px 2px at 10% 60%, rgba(0,0,0,0.20) 1px, transparent 3px),
        linear-gradient(135deg, #4A2E18 0%, #5A3A20 40%, #3A2412 100%);
    background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px, 90px 90px, 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(240, 224, 208, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        inset 0 0 60px rgba(0, 0, 0, 0.45);
}

/* ---- Hero ---- */
.hero {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 5vw, 64px) clamp(20px, 6vw, 96px) 0;
}

.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    padding-top: clamp(60px, 14vh, 160px);
    opacity: 0;
    transform: translateY(12px);
    animation: fade-in 1100ms 200ms cubic-bezier(.2,.7,.2,1) forwards;
}

.kicker {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-blush);
    margin-bottom: 28px;
}
.kicker-date { color: var(--circuit-copper); }

.logotype {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(64px, 11vw, 168px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--warm-cream);
    text-shadow:
        0 1px 0 rgba(0,0,0,0.4),
        0 8px 30px rgba(160, 96, 74, 0.20);
}
.logotype-dot {
    color: var(--terracotta-glow);
    display: inline-block;
    transform: translateY(-0.05em);
}

.tagline {
    margin-top: 18px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 19px);
    color: var(--muted-blush);
    letter-spacing: 0.01em;
}
.tagline em { color: var(--circuit-copper); font-style: italic; }

/* ---- Leather nav ---- */
.leather-nav {
    composes: leather;
    background-color: var(--leather-brown);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.35) 1px, transparent 2px),
        radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,0.30) 1px, transparent 2px),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(0,0,0,0.25) 1px, transparent 2px),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 220, 190, 0.06) 1px, transparent 2px),
        radial-gradient(2px 2px at 10% 60%, rgba(0,0,0,0.20) 1px, transparent 3px),
        linear-gradient(180deg, #4A2E18 0%, #5A3A20 50%, #3A2412 100%);
    background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px, 90px 90px, 100% 100%;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(240, 224, 208, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        inset 0 0 80px rgba(0, 0, 0, 0.50),
        0 18px 30px rgba(0,0,0,0.45),
        0 1px 0 rgba(0, 0, 0, 0.4);
    margin: clamp(48px, 10vh, 110px) auto 40px;
    max-width: 1200px;
    width: 100%;
    transform: translateY(-30px);
    opacity: 0;
    animation: nav-drop 600ms 700ms cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes nav-drop {
    to { transform: translateY(0); opacity: 1; }
}

.nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding: 8px 16px;
}
.nav-item {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-cream);
    background: transparent;
    border: none;
    padding: 16px 22px;
    cursor: pointer;
    position: relative;
    transition: color 280ms ease;
    text-shadow: 0 1px 0 rgba(0,0,0,0.55);
}
.nav-item::after {
    content: '';
    position: absolute;
    left: 22px; right: 22px; bottom: 10px;
    height: 1px;
    background: var(--circuit-copper);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 360ms ease;
}
.nav-item:hover { color: var(--warm-cream); }
.nav-item:hover::after { transform: scaleX(1); }
.nav-item.is-active { color: var(--circuit-copper); }
.nav-item.is-active::after { transform: scaleX(1); background: var(--circuit-copper); }

/* ---- Briefing main ---- */
.briefing {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(40px, 8vw, 120px) clamp(20px, 6vw, 96px);
    transform-style: preserve-3d;
}

.briefing-head {
    text-align: center;
    margin-bottom: 64px;
}

.briefing-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-blush);
    margin-bottom: 18px;
}
.marker-line { width: 60px; height: 1px; background: var(--leather-brown); }
.marker-label { color: var(--circuit-copper); }

.briefing-title {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    color: var(--warm-cream);
}
.briefing-sub {
    max-width: 640px;
    margin: 18px auto 0;
    color: var(--muted-blush);
    font-size: clamp(14px, 1vw, 16px);
}

.section-eyebrow {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted-blush);
    margin-bottom: 18px;
}

/* ---- Interest tags ---- */
.interests {
    position: relative;
    margin-bottom: 80px;
    padding: 24px 0 40px;
}
.interest-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 880px;
}
.interest {
    font-family: var(--font-meta);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--warm-cream);
    background: rgba(36, 26, 20, 0.6);
    border: 1px solid var(--leather-brown);
    padding: 8px 14px;
    border-radius: 2px;
    cursor: default;
    transition: border-color 320ms ease, color 320ms ease, background 320ms ease;
    position: relative;
}
.interest::before {
    content: '·';
    color: var(--circuit-copper);
    margin-right: 6px;
    font-size: 18px;
    line-height: 0;
    vertical-align: middle;
}
.interest:hover {
    color: var(--warm-cream);
    border-color: var(--circuit-copper);
    background: rgba(160, 96, 74, 0.10);
}
.interest.is-pulsing {
    border-color: var(--circuit-copper);
    box-shadow: 0 0 0 3px rgba(200, 120, 80, 0.18);
}

/* ---- Circuit SVG ---- */
.circuit {
    position: absolute;
    left: 0; right: 0; top: 60px;
    width: 100%;
    height: 280px;
    pointer-events: none;
    opacity: 0.85;
}
.circuit-paths path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1500ms cubic-bezier(.4, .1, .2, 1);
}
.circuit.is-drawn path {
    stroke-dashoffset: 0;
}
.circuit.is-drawn path:nth-child(1) { transition-delay: 0ms; }
.circuit.is-drawn path:nth-child(2) { transition-delay: 220ms; }
.circuit.is-drawn path:nth-child(3) { transition-delay: 440ms; }
.circuit.is-drawn path:nth-child(4) { transition-delay: 660ms; }
.circuit.is-drawn path:nth-child(5) { transition-delay: 880ms; }
.circuit.is-drawn path:nth-child(6) { transition-delay: 1100ms; }

.circuit-nodes circle {
    opacity: 0;
    transition: opacity 400ms ease;
}
.circuit.is-drawn .circuit-nodes circle { opacity: 1; transition-delay: 1300ms; }

/* ---- Stage with layered depth ---- */
.stage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 28px;
    margin-bottom: 100px;
    transform-style: preserve-3d;
    perspective: 1600px;
}

.card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(.2, .7, .2, 1), opacity 600ms ease, filter 600ms ease;
    opacity: 0;
    transform: translateY(28px) translateZ(-200px);
}
.card.is-in { opacity: var(--card-target-opacity, 1); transform: translateY(0) translateZ(var(--card-target-z, 0)) scale(var(--card-target-scale, 1)); filter: var(--card-target-filter, none); }

.card-primary {
    grid-column: span 6;
    --card-target-opacity: 1;
    --card-target-z: 0px;
    --card-target-scale: 1;
    --card-target-filter: none;
    z-index: 3;
}
.card-secondary {
    grid-column: span 4;
    --card-target-opacity: 0.7;
    --card-target-z: -50px;
    --card-target-scale: 0.95;
    --card-target-filter: none;
    z-index: 2;
}
.card-tertiary {
    grid-column: span 2;
    --card-target-opacity: 0.4;
    --card-target-z: -100px;
    --card-target-scale: 0.9;
    --card-target-filter: blur(1px);
    z-index: 1;
}

.card-frame {
    background: var(--card-dark);
    background-image:
        linear-gradient(180deg, rgba(160, 96, 74, 0.04), rgba(0,0,0,0)),
        linear-gradient(180deg, rgba(36, 26, 20, 1), rgba(26, 18, 16, 1));
    border: 1px solid rgba(90, 58, 32, 0.55);
    border-radius: 3px;
    padding: clamp(20px, 2.4vw, 32px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(240, 224, 208, 0.04);
    position: relative;
    overflow: hidden;
}
.card-frame::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(800px 200px at 0% 0%, rgba(160, 96, 74, 0.08), transparent 60%);
    pointer-events: none;
}

.card-meta {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-blush);
    margin-bottom: 16px;
}
.card-cat { color: var(--circuit-copper); }

.card-headline {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 40px);
    line-height: 1.1;
    color: var(--warm-cream);
    margin-bottom: 14px;
}
.card-deck {
    color: var(--warm-cream);
    opacity: 0.86;
    margin-bottom: 18px;
    font-size: clamp(14px, 1vw, 16px);
}
.card-byline {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-blush);
}
.card-rule {
    display: block;
    margin: 18px 0;
    width: 30%;
    height: 1px;
    background: linear-gradient(90deg, var(--circuit-copper), transparent);
}
.card-why {
    font-family: var(--font-meta);
    font-size: 11px;
    color: var(--circuit-copper);
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.card-why em { color: var(--warm-cream); font-style: normal; }

.card-primary .card-frame:hover { transform: translateZ(20px); }
.card-secondary .card-frame { padding: 22px; }
.card-tertiary .card-frame { padding: 16px; }
.card-tertiary .card-headline { font-size: clamp(18px, 1.6vw, 24px); }
.card-tertiary .card-deck { font-size: 13px; opacity: 0.7; }

/* ---- Long read ---- */
.long-read {
    position: relative;
    margin: 100px 0;
    padding: 80px clamp(20px, 4vw, 64px);
    border-top: 1px solid var(--leather-brown);
    border-bottom: 1px solid var(--leather-brown);
    background:
        radial-gradient(900px 500px at 20% 30%, rgba(160, 96, 74, 0.10), transparent 70%),
        linear-gradient(180deg, rgba(36, 26, 20, 0.4), rgba(26, 18, 16, 0));
}
.long-read-rail {
    position: absolute;
    left: 30px;
    top: 80px;
    bottom: 80px;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--circuit-copper) 20%, var(--circuit-copper) 80%, transparent);
    opacity: 0.7;
}

.long-headline {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: var(--warm-cream);
    margin: 18px 0 36px;
    max-width: 920px;
}
.long-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1080px;
    margin-bottom: 36px;
}
.long-graf {
    color: var(--warm-cream);
    opacity: 0.92;
    font-size: clamp(14px, 1.1vw, 17px);
}

.pullquote {
    position: relative;
    margin: 36px 0;
    padding: 28px 36px 28px 56px;
    background-color: var(--leather-brown);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.35) 1px, transparent 2px),
        radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,0.30) 1px, transparent 2px),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(0,0,0,0.25) 1px, transparent 2px),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 220, 190, 0.06) 1px, transparent 2px),
        linear-gradient(135deg, #4A2E18 0%, #5A3A20 40%, #3A2412 100%);
    background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px, 100% 100%;
    border-radius: 3px;
    color: var(--warm-cream);
    font-family: var(--font-headline);
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.25;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(240, 224, 208, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        inset 0 0 80px rgba(0, 0, 0, 0.40),
        0 12px 30px rgba(0,0,0,0.45);
    max-width: 880px;
}
.pullquote-mark {
    position: absolute;
    left: 16px; top: 0;
    font-family: var(--font-headline);
    font-size: 80px;
    color: var(--circuit-copper);
    line-height: 1;
}
.pullquote cite {
    display: block;
    margin-top: 14px;
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-blush);
    font-style: normal;
}

/* ---- Depth explainer ---- */
.depth-explainer {
    margin-bottom: 80px;
    max-width: 880px;
}
.depth-list {
    list-style: none;
    counter-reset: depth;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.depth-list li {
    display: flex;
    gap: 18px;
    align-items: baseline;
    color: var(--warm-cream);
    opacity: 0.9;
}
.depth-tag {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--leather-brown);
    border-radius: 2px;
    flex-shrink: 0;
    min-width: 110px;
    text-align: center;
}
.depth-tag-1 { color: var(--circuit-copper); border-color: var(--circuit-copper); }
.depth-tag-2 { color: var(--terracotta-glow); }
.depth-tag-3 { color: var(--muted-blush); filter: blur(0.4px); }

/* ---- Signal strip ---- */
.signal-strip {
    margin-bottom: 80px;
}
.signal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 14px;
}
.signal {
    background: rgba(36, 26, 20, 0.55);
    border: 1px solid var(--leather-brown);
    border-left: 2px solid var(--circuit-copper);
    padding: 20px 22px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.signal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(200px 60px at 0% 0%, rgba(200, 120, 80, 0.12), transparent 70%);
    pointer-events: none;
}
.signal-num {
    display: block;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(40px, 4.8vw, 64px);
    line-height: 1;
    color: var(--warm-cream);
}
.signal-label {
    display: block;
    margin-top: 10px;
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-blush);
}

/* ---- Footer ---- */
.footer {
    position: relative;
    z-index: 2;
    padding: clamp(40px, 6vw, 96px) clamp(20px, 6vw, 96px);
    background: var(--reading-dark);
}
.footer-leather {
    background-color: var(--leather-brown);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.35) 1px, transparent 2px),
        radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,0.30) 1px, transparent 2px),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(0,0,0,0.25) 1px, transparent 2px),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 220, 190, 0.06) 1px, transparent 2px),
        linear-gradient(135deg, #4A2E18 0%, #5A3A20 40%, #3A2412 100%);
    background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px, 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(240, 224, 208, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        inset 0 0 100px rgba(0, 0, 0, 0.50);
    border-radius: 3px;
    padding: 36px clamp(20px, 4vw, 48px);
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
}
.footer-mark {
    font-family: var(--font-headline);
    font-size: 36px;
    color: var(--warm-cream);
    line-height: 1;
    margin-bottom: 12px;
}
.footer-line {
    color: var(--warm-cream);
    opacity: 0.85;
    font-style: italic;
    margin-bottom: 8px;
}
.footer-meta {
    font-family: var(--font-meta);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-blush);
}

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

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .stage { grid-template-columns: repeat(6, 1fr); gap: 22px; }
    .card-primary { grid-column: span 6; }
    .card-secondary { grid-column: span 3; }
    .card-tertiary { grid-column: span 3; }
    .long-grid { grid-template-columns: 1fr; }
    .signal-grid { grid-template-columns: repeat(2, 1fr); }
    .long-read-rail { display: none; }
    .circuit { display: none; }
}

@media (max-width: 640px) {
    .nav-list { gap: 0; padding: 6px 8px; }
    .nav-item { padding: 12px 12px; font-size: 11px; letter-spacing: 0.14em; }
    .stage { grid-template-columns: 1fr; gap: 18px; }
    .card-primary, .card-secondary, .card-tertiary { grid-column: span 1; }
    .signal-grid { grid-template-columns: 1fr 1fr; }
    .briefing-title { font-size: 44px; }
    .long-headline { font-size: 36px; }
    .pullquote { padding: 24px 20px 24px 44px; font-size: 22px; }
    .pullquote-mark { font-size: 56px; left: 12px; }
}