/* martiallaw.wiki - Watercolor Protest Broadsheet */

/* ============================
   CSS CUSTOM PROPERTIES
   ============================ */
:root {
    --aged-newsprint: #f0e6d3;
    --iron-gall-ink: #1c1008;
    --terracotta-bleed: #c4613a;
    --raw-sienna: #b8863e;
    --burnt-umber-dark: #3a1f0e;
    --ochre-pale: #dfc89a;
    --indigo-ink: #2a3142;
    --candle-flame: #e8a84c;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Serif 4', 'Georgia', serif;
    --font-accent: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-quote: 'Cormorant Garamond', 'Garamond', serif;
}

/* ============================
   RESET & BASE
   ============================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--aged-newsprint);
    color: var(--iron-gall-ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.85;
    overflow-x: hidden;
}

/* ============================
   HIDDEN SVG DEFS
   ============================ */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================
   PAPER GRAIN OVERLAY
   ============================ */
.paper-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    mix-blend-mode: multiply;
    filter: url(#grain);
    background: var(--aged-newsprint);
}

/* ============================
   NAVIGATION
   ============================ */
.spread-nav {
    position: fixed;
    right: 2.5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.spread-nav.visible {
    opacity: 1;
}

.nav-numeral {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--iron-gall-ink);
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    flex-direction: row-reverse;
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--iron-gall-ink);
    transition: all 0.3s ease;
}

.nav-numeral.active .nav-dot {
    background: var(--terracotta-bleed);
    border-color: var(--terracotta-bleed);
    width: 8px;
    height: 8px;
}

.nav-numeral.active {
    color: var(--terracotta-bleed);
}

.nav-text {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.nav-numeral.active .nav-text {
    opacity: 1;
}

/* ============================
   SPREAD BASE
   ============================ */
.spread {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

.spread-wash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ============================
   STAMPS
   ============================ */
.stamp {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 10;
    transform: rotate(-12deg);
    opacity: 0.5;
}

.stamp-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.stamp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.45rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--terracotta-bleed);
    text-align: center;
    width: 60px;
    line-height: 1.2;
}

.stamp-1 { top: 8vh; left: 5vw; }
.stamp-2 { top: 6vh; right: 8vw; left: auto; }
.stamp-3 { top: 10vh; left: 55vw; }
.stamp-4 { top: 5vh; left: 8vw; }

/* ============================
   SPREAD 1 - THE PROCLAMATION
   ============================ */
.spread-1-wash {
    background:
        radial-gradient(ellipse at 85% 15%, rgba(196, 97, 58, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(184, 134, 62, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(223, 200, 154, 0.2) 0%, transparent 70%);
    background-blend-mode: multiply;
    opacity: 0;
    animation: fadeWash 1.5s ease-out 0.3s forwards;
}

@keyframes fadeWash {
    to { opacity: 1; }
}

.proclamation-headline {
    position: relative;
    z-index: 5;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.2rem, 8vw, 7rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--iron-gall-ink);
    padding-top: 15vh;
    padding-left: 8vw;
    max-width: 70vw;
    transform: rotate(-1.5deg);
    opacity: 0;
    animation: fadeInHeadline 1.2s ease-out 0.8s forwards;
}

@keyframes fadeInHeadline {
    from {
        opacity: 0;
        text-shadow:
            1px 1px 0px rgba(196, 97, 58, 0),
            2px 2px 0px rgba(196, 97, 58, 0),
            3px 3px 0px rgba(196, 97, 58, 0);
    }
    to {
        opacity: 1;
        text-shadow:
            1px 1px 1px rgba(196, 97, 58, 0.3),
            2px 2px 3px rgba(196, 97, 58, 0.15),
            3px 3px 6px rgba(196, 97, 58, 0.06);
    }
}

.headline-line {
    display: block;
}

.headline-accent {
    color: var(--terracotta-bleed);
}

.proclamation-body {
    position: relative;
    z-index: 5;
    max-width: 28ch;
    margin-left: auto;
    margin-right: 12%;
    margin-top: 6vh;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.85;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.dateline {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--indigo-ink);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(42, 49, 66, 0.2);
}

.proclamation-body p + p {
    margin-top: 1rem;
}

/* ============================
   SPREAD 2 - THE ARCHIVE
   ============================ */
.spread-2 {
    display: grid;
    grid-template-columns: 38% 10% 52%;
    min-height: 100vh;
    padding: 0;
}

.spread-2-wash {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(223, 200, 154, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(196, 97, 58, 0.06) 0%, transparent 50%);
    background-blend-mode: multiply;
}

.archive-document {
    position: relative;
    z-index: 5;
    grid-column: 1;
    padding: 12vh 4vw 4vh 6vw;
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-document.visible {
    transform: translateX(0);
}

.document-inner {
    background: rgba(240, 230, 211, 0.9);
    padding: 2.5rem 2rem;
    clip-path: polygon(0 2%, 15% 0, 32% 3%, 48% 1%, 65% 4%, 78% 0, 100% 2%, 100% 97%, 82% 100%, 67% 96%, 52% 100%, 35% 97%, 18% 100%, 0 98%);
    box-shadow: 4px 4px 20px rgba(28, 16, 8, 0.1);
    position: relative;
}

.document-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(184, 134, 62, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(196, 97, 58, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.document-header {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--indigo-ink);
    margin-bottom: 0.5rem;
}

.hand-drawn-line {
    width: 100%;
    height: 4px;
    margin-bottom: 1rem;
}

.document-date {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--raw-sienna);
    margin-bottom: 1.5rem;
}

.document-body {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
    color: var(--iron-gall-ink);
}

.document-orders {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.7;
}

.document-orders li {
    margin-bottom: 0.5rem;
    color: var(--iron-gall-ink);
}

.document-orders li::marker {
    color: var(--terracotta-bleed);
}

.document-footer {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--raw-sienna);
    text-align: right;
    font-style: italic;
}

.archive-text {
    position: relative;
    z-index: 5;
    grid-column: 3;
    padding: 16vh 8vw 4vh 0;
    max-width: 32ch;
    opacity: 0;
    transition: opacity 0.6s ease 0.2s;
}

.archive-text.visible {
    opacity: 1;
}

.archive-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 2rem;
    color: var(--iron-gall-ink);
    text-shadow:
        1px 1px 1px rgba(196, 97, 58, 0.2),
        2px 2px 3px rgba(196, 97, 58, 0.1);
}

.archive-text p {
    margin-bottom: 1.2rem;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.85;
}

/* ============================
   SPREAD 3 - THE TESTIMONY
   ============================ */
.spread-3 {
    position: relative;
}

.spread-3-wash {
    background:
        radial-gradient(ellipse at 25% 30%, rgba(196, 97, 58, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 60%, rgba(184, 134, 62, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 40% 80%, rgba(223, 200, 154, 0.25) 0%, transparent 50%);
    background-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.spread-3-wash.wash-25 { opacity: 0.4; }
.spread-3-wash.wash-50 { opacity: 0.7; }
.spread-3-wash.wash-75 { opacity: 1; }

.testimony-content {
    position: relative;
    z-index: 5;
    width: 40vw;
    margin-left: 15vw;
    padding: 12vh 0;
}

.testimony-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 2.5rem;
    color: var(--iron-gall-ink);
    text-shadow:
        1px 1px 1px rgba(196, 97, 58, 0.2),
        2px 2px 3px rgba(196, 97, 58, 0.1);
}

.testimony-text {
    margin-bottom: 2rem;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.85;
    max-width: 36ch;
}

.pull-quote {
    position: relative;
    margin: 2.5rem 0 2.5rem -5vw;
    padding: 1.5rem 2rem 1.5rem 2.5rem;
    width: 120%;
    transition: transform 0.2s ease-out;
}

.quote-border {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
}

.quote-border-path {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 0.6s ease;
}

.pull-quote.visible .quote-border-path {
    stroke-dashoffset: 0;
}

.pull-quote p {
    font-family: var(--font-quote);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.5;
    color: var(--iron-gall-ink);
    font-style: italic;
}

.pull-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--raw-sienna);
    font-style: normal;
}

/* ============================
   SPREAD 4 - THE EVIDENCE GRID
   ============================ */
.spread-4 {
    padding: 10vh 6vw;
}

.spread-4-wash {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(196, 97, 58, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 70%, rgba(223, 200, 154, 0.15) 0%, transparent 60%);
    background-blend-mode: multiply;
}

.evidence-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 5vh;
}

.evidence-card {
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    cursor: default;
}

.evidence-card.stacked {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.card-1 { transform: rotate(-2deg); grid-column: 1; grid-row: 1; }
.card-2 { transform: rotate(1.5deg); grid-column: 2; grid-row: 1; margin-top: 3vh; }
.card-3 { transform: rotate(-1deg); grid-column: 3; grid-row: 1; }
.card-4 { transform: rotate(2.5deg); grid-column: 1; grid-row: 2; margin-top: -2vh; }
.card-5 { transform: rotate(-1.5deg); grid-column: 2; grid-row: 2; }
.card-6 { transform: rotate(3deg); grid-column: 3; grid-row: 2; margin-top: 2vh; }

.card-inner {
    background: var(--ochre-pale);
    padding: 1rem;
    clip-path: polygon(0 2%, 15% 0, 32% 3%, 48% 1%, 65% 4%, 78% 0, 100% 2%, 100% 97%, 82% 100%, 67% 96%, 52% 100%, 35% 97%, 18% 100%, 0 98%);
    box-shadow: 3px 3px 15px rgba(28, 16, 8, 0.12);
}

.card-photo {
    width: 100%;
    aspect-ratio: 3/4;
    background:
        linear-gradient(135deg, rgba(58, 31, 14, 0.3) 0%, rgba(184, 134, 62, 0.2) 50%, rgba(58, 31, 14, 0.4) 100%),
        radial-gradient(ellipse at 30% 40%, rgba(196, 97, 58, 0.15) 0%, transparent 70%);
    filter: sepia(0.4) contrast(0.9) brightness(0.95);
    position: relative;
    margin-bottom: 0.75rem;
}

.card-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 40px rgba(28, 16, 8, 0.3);
    pointer-events: none;
}

.card-caption {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--indigo-ink);
    margin-bottom: 0.4rem;
}

.card-detail {
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--iron-gall-ink);
}

.evidence-card:hover {
    filter: sepia(0.2);
    z-index: 10;
}

.evidence-card:hover .card-inner {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

/* ============================
   SPREAD 5 - THE DECLARATION
   ============================ */
.spread-5 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
}

.spread-5-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--aged-newsprint) 0%, var(--aged-newsprint) 68%, var(--burnt-umber-dark) 70%, var(--iron-gall-ink) 100%);
    z-index: 1;
}

.declaration-bloom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 168, 76, 0.15) 0%, rgba(196, 97, 58, 0.08) 40%, transparent 70%);
    z-index: 2;
    transition: width 3s ease-out, height 3s ease-out;
    pointer-events: none;
}

.declaration-bloom.blooming {
    width: 120vmax;
    height: 120vmax;
}

.declaration-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 0 8vw;
    margin-bottom: auto;
    margin-top: auto;
    transform: translateY(-5vh);
}

.declaration-text {
    font-family: var(--font-quote);
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.declaration-dark {
    color: var(--iron-gall-ink);
}

.declaration-light {
    color: var(--aged-newsprint);
}

.declaration-text-lower {
    margin-top: 0.3em;
}

.declaration-footer {
    position: relative;
    z-index: 5;
    padding: 4vh 8vw 6vh;
}

.footer-text {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240, 230, 211, 0.5);
    text-align: center;
}

.footer-date {
    margin-top: 0.5rem;
    opacity: 0.4;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.05em;
}

/* ============================
   ANIMATIONS - EVIDENCE CARDS
   ============================ */
.evidence-card {
    opacity: 0;
}

.evidence-card.dealt {
    opacity: 1;
}

.card-1.dealt { animation: dealCard1 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.card-2.dealt { animation: dealCard2 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
.card-3.dealt { animation: dealCard3 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; }
.card-4.dealt { animation: dealCard4 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards; }
.card-5.dealt { animation: dealCard5 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; }
.card-6.dealt { animation: dealCard6 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards; }

@keyframes dealCard1 {
    from { opacity: 0; transform: translate(30%, 30%) rotate(0deg) scale(0.8); }
    to   { opacity: 1; transform: translate(0, 0) rotate(-2deg) scale(1); }
}
@keyframes dealCard2 {
    from { opacity: 0; transform: translate(0%, 30%) rotate(0deg) scale(0.8); }
    to   { opacity: 1; transform: translate(0, 3vh) rotate(1.5deg) scale(1); }
}
@keyframes dealCard3 {
    from { opacity: 0; transform: translate(-30%, 30%) rotate(0deg) scale(0.8); }
    to   { opacity: 1; transform: translate(0, 0) rotate(-1deg) scale(1); }
}
@keyframes dealCard4 {
    from { opacity: 0; transform: translate(30%, -30%) rotate(0deg) scale(0.8); }
    to   { opacity: 1; transform: translate(0, -2vh) rotate(2.5deg) scale(1); }
}
@keyframes dealCard5 {
    from { opacity: 0; transform: translate(0%, -30%) rotate(0deg) scale(0.8); }
    to   { opacity: 1; transform: translate(0, 0) rotate(-1.5deg) scale(1); }
}
@keyframes dealCard6 {
    from { opacity: 0; transform: translate(-30%, -30%) rotate(0deg) scale(0.8); }
    to   { opacity: 1; transform: translate(0, 2vh) rotate(3deg) scale(1); }
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
    .spread-2 {
        display: flex;
        flex-direction: column;
    }

    .archive-document {
        padding: 10vh 4vw 2vh 4vw;
    }

    .archive-text {
        padding: 2vh 4vw 8vh 4vw;
        max-width: 100%;
    }

    .testimony-content {
        width: 80vw;
        margin-left: 10vw;
    }

    .pull-quote {
        margin-left: 0;
        width: 100%;
    }

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

    .card-5, .card-6 {
        grid-column: auto;
        grid-row: auto;
    }

    .proclamation-headline {
        max-width: 90vw;
        padding-left: 5vw;
    }

    .proclamation-body {
        margin-right: 5%;
        max-width: 80vw;
    }

    .spread-nav {
        right: 1.5vw;
    }

    .nav-text {
        font-size: 0.6rem;
    }
}