/* gazza.news - Hand-Drawn Investigative Warmth */

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

body {
    font-family: 'Lora', serif;
    color: #3D3228;
    background: #F2E8D0;
    overflow-x: hidden;
}

/* ========== BULLETIN BOARD HERO ========== */

.hero {
    min-height: 100vh;
    background: #8B6F47;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}

.hero-stamp {
    position: relative;
    z-index: 1;
}

.stamp-text {
    font-family: 'Special Elite', cursive;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: #1E2832;
    opacity: 0;
    transform: scale(1.3);
    letter-spacing: 0.02em;
}

.stamp-text.stamped {
    opacity: 0.85;
    transform: scale(1);
    transition: opacity 150ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-divider {
    width: 60%;
    height: 20px;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.hero-divider path {
    transition: stroke-dashoffset 800ms ease;
}

/* ========== CONTENT LAYOUT ========== */

.content-layout {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
    gap: 5%;
}

.investigation-column {
    width: 65%;
}

.evidence-sidebar {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ========== CLIPPINGS ========== */

.clipping {
    background: #F2E8D0;
    padding: 28px 32px;
    margin-bottom: 2rem;
    clip-path: polygon(0% 1%, 2% 0%, 98% 0.5%, 100% 1.5%, 99.5% 98%, 100% 99.5%, 1% 100%, 0% 98.5%);
    opacity: 0.3;
    transform-origin: center;
    transition: opacity 500ms ease, transform 500ms ease;
}

.clipping.visible {
    opacity: 1;
}

.clipping-headline {
    font-family: 'Special Elite', cursive;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #3D3228;
    margin-bottom: 1rem;
}

.clipping-body {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8;
    color: #3D3228;
    margin-bottom: 1rem;
}

.highlight {
    background: rgba(232, 212, 77, 0);
    transition: background 400ms ease;
    padding: 0 2px;
}

.highlight.active {
    background: rgba(232, 212, 77, 0.25);
}

.wavy-divider {
    width: 100%;
    height: 15px;
    margin-bottom: 2rem;
}

/* ========== EVIDENCE SIDEBAR ========== */

.pinned-note {
    background: #F2E8D0;
    padding: 16px 20px;
    border-left: 3px solid #C44B3B;
    transition: transform 200ms ease, box-shadow 200ms ease;
    cursor: default;
}

.pinned-note:hover {
    transform: rotate(0deg) !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}

.note-annotation {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 0.9rem;
    color: #C44B3B;
    display: block;
    margin-bottom: 0.5rem;
}

.note-data {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    line-height: 1.6;
    color: #3D3228;
}

/* ========== HAND CHART ========== */

.hand-chart {
    padding: 16px 0;
}

.chart-bar {
    margin-bottom: 0.75rem;
}

.bar-label {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 0.85rem;
    color: #3D3228;
    display: block;
    margin-bottom: 0.25rem;
}

.bar-track {
    width: 100%;
    height: 8px;
    background: rgba(61, 50, 40, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0;
    background: #C44B3B;
    border-radius: 2px;
    transition: width 800ms ease-out;
}

/* ========== COFFEE STAINS ========== */

.coffee-stain {
    position: absolute;
    width: 70px;
    height: 70px;
    pointer-events: none;
    z-index: 0;
}

/* ========== MOUNTAIN FOOTER ========== */

.mountain-footer {
    position: relative;
    padding: 0;
    margin-top: 4rem;
}

.mountain-svg {
    width: 100%;
    height: 200px;
    display: block;
}

.footer-content {
    background: #5C4E3C;
    padding: 2rem;
    text-align: center;
}

.footer-brand {
    font-family: 'Special Elite', cursive;
    font-weight: 400;
    font-size: 1rem;
    color: #F2E8D0;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-tagline {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 0.9rem;
    color: #C4A67A;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .content-layout {
        flex-direction: column;
    }

    .investigation-column,
    .evidence-sidebar {
        width: 100%;
    }

    .coffee-stain {
        display: none;
    }
}