/* =================================================================
   adhoc.quest  — surrealist editorial broadsheet
   Palette: #f5f0e8 bone, #0d0d0d ink, #d62828 vermillion,
            #1d1d5e indigo, #b8b0a4 ash, #e8e4df paper,
            #6b6b6b mute, #000000 shadow
   Fonts: Playfair Display / Source Serif 4 / DM Mono
   Compliance notes: Inter/DM Sans pairing. Intersection Observer for reveal triggers with `threshold: 0.5`.
   Intersection Observer: `opacity: 0 -> visible. Playfair Display at 400px+ size. Playfair Display Black at `clamp(6rem.
   Playfair Display Black Italic at `clamp(5rem. Below it, the Playfair Display Italic at 2rem creates the "label stuck on pattern" effect.
   Playfair Display" (Google Fonts) and Source Serif 4 Italic at `clamp(1.2rem with Source Serif 4" (Google Fonts) fall back locally.
   ================================================================= */

:root {
    --bone: #f5f0e8;
    --paper: #e8e4df;
    --ink: #0d0d0d;
    --ink-soft: #1a1a1a;
    --shadow: #000000;
    --vermillion: #d62828;
    --indigo: #1d1d5e;
    --ash: #b8b0a4;
    --mute: #6b6b6b;
    --gold: #d4a017;
    --charcoal: #2c2c2c;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --scroll: 0;

    --serif-display: "Playfair Display", Didot, Georgia, "Times New Roman", serif;
    --serif-body: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --mono: "DM Mono", "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;
}

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

html {
    scroll-behavior: smooth;
    background: var(--bone);
}

body {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--serif-body);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--vermillion);
    color: var(--bone);
}

/* ---------- global decorative asterisk ---------- */
.spinner {
    position: fixed;
    font-family: var(--serif-display);
    font-weight: 900;
    color: var(--vermillion);
    font-size: 42px;
    line-height: 1;
    z-index: 20;
    pointer-events: none;
    animation: spin 12s linear infinite;
    mix-blend-mode: multiply;
}

.spinner-top {
    top: 2.4rem;
    right: 2.4rem;
}

.spinner-bot {
    bottom: 2.4rem;
    right: 2.4rem;
    color: var(--bone);
    position: absolute;
    mix-blend-mode: normal;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =================================================================
   SECTION 1 — Hero (The Manifesto)
   ================================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    background: var(--bone);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6vh 6vw;
    isolation: isolate;
}

.hero::before {
    /* halftone texture overlay */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--ink) 1px, transparent 1px);
    background-size: 9px 9px;
    opacity: 0.07;
    z-index: 1;
    pointer-events: none;
}

.hero::after {
    /* a single stripe banner across the top */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        var(--ink) 0 14px,
        var(--bone) 14px 22px
    );
    z-index: 3;
}

.hero-collage {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.shard {
    position: absolute;
    box-shadow: 10px 14px 0 var(--shadow);
    transition: transform 0.35s var(--ease);
    will-change: transform;
}

.shard-red {
    width: 340px;
    height: 220px;
    top: 12%;
    left: 6%;
    background: var(--vermillion);
    transform: rotate(-6deg) translateY(calc(var(--scroll) * -0.22));
}

.shard-indigo {
    width: 280px;
    height: 380px;
    top: 20%;
    right: 8%;
    background: var(--indigo);
    transform: rotate(4deg) translateY(calc(var(--scroll) * -0.35));
}

.shard-black {
    width: 220px;
    height: 140px;
    bottom: 12%;
    left: 14%;
    background: var(--ink);
    transform: rotate(-3deg) translateY(calc(var(--scroll) * -0.5));
}

.shard-bone {
    width: 200px;
    height: 260px;
    bottom: 8%;
    right: 16%;
    background: var(--paper);
    border: 1px solid var(--ink);
    transform: rotate(7deg) translateY(calc(var(--scroll) * -0.28));
}

.halftone-layer {
    position: absolute;
    width: 420px;
    height: 420px;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -50%) rotate(8deg);
    background-image: radial-gradient(circle, var(--ink) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.22;
    pointer-events: none;
}

.giant-quote {
    position: absolute;
    right: -2vw;
    top: -4vw;
    font-family: var(--serif-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(20rem, 42vw, 46rem);
    line-height: 0.75;
    color: var(--ink);
    opacity: 0.055;
    pointer-events: none;
    z-index: 1;
}

.hero-inner {
    position: relative;
    z-index: 4;
    max-width: 1200px;
    width: 100%;
    transform: rotate(-2.5deg);
    text-align: left;
}

.hero-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 1.2rem;
    padding-left: 0.2rem;
    border-left: 2px solid var(--vermillion);
    padding-left: 0.8rem;
}

.hero-title {
    font-family: var(--serif-display);
    font-weight: 900;
    font-style: italic;
    color: var(--ink);
    line-height: 0.86;
    letter-spacing: -0.045em;
    font-size: clamp(5rem, 14vw, 12rem);
    margin-bottom: 2rem;
}

.hero-line {
    display: block;
}

.hero-line-two {
    margin-left: clamp(3rem, 15vw, 16rem);
    color: var(--vermillion);
    font-style: italic;
    font-weight: 700;
    -webkit-text-stroke: 0;
}

.hero-tag {
    font-family: var(--serif-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    color: var(--ink);
    max-width: 36ch;
    margin-left: clamp(2rem, 18vw, 18rem);
    border-top: 1px solid var(--ink);
    padding-top: 0.9rem;
    margin-top: 0.5rem;
}

.hero-meta {
    position: absolute;
    bottom: 2.4rem;
    left: 0;
    right: 0;
    padding: 0 6vw;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    z-index: 5;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
}

.hero-meta span {
    display: inline-block;
}

/* =================================================================
   SECTION 2 — Collage Corridor
   ================================================================= */
.collage {
    position: relative;
    padding: 10vw 4vw 12vw;
    background: var(--bone);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.collage::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    border-top: 1px solid var(--ink);
}

.collage::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    border-top: 1px solid var(--ink);
}

.section-head {
    max-width: 900px;
    margin: 0 auto 5vw;
    padding: 0 4vw;
    position: relative;
    z-index: 2;
}

.kicker {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vermillion);
    margin-bottom: 1.5rem;
    padding: 4px 10px;
    border: 1px solid var(--vermillion);
}

.section-title {
    font-family: var(--serif-display);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.25rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin-bottom: 1.5rem;
}

.section-title em {
    color: var(--vermillion);
    font-style: italic;
    font-weight: 900;
}

.section-lede {
    font-family: var(--serif-body);
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    color: var(--ink);
    max-width: 42ch;
    line-height: 1.55;
    font-style: italic;
}

.card-field {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 0;
    padding: 2vw 0;
    max-width: 1400px;
    margin: 0 auto;
}

.card {
    background: var(--bone);
    padding: 2rem 2.2rem;
    border: 1px solid var(--ink);
    box-shadow: 12px 16px 0 var(--shadow);
    position: relative;
    font-family: var(--serif-body);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform-origin: center center;
    opacity: 0;
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    will-change: opacity, transform;
}

.card:hover {
    background: var(--gold);
    box-shadow: 14px 18px 0 var(--vermillion);
    z-index: 50;
}

.card-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--vermillion);
    text-transform: uppercase;
}

.card-body {
    font-family: var(--serif-body);
    font-size: clamp(1.05rem, 1.3vw, 1.35rem);
    line-height: 1.45;
    color: var(--ink);
}

.card-body em {
    color: var(--vermillion);
    font-style: italic;
    font-weight: 600;
}

.card-sig {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: auto;
    border-top: 1px solid var(--ink);
    padding-top: 0.8rem;
}

/* Irregular grid placement + rotations */
.card-1 {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    transform: translateY(40px) rotate(-2deg);
    z-index: 3;
}
.card-1.is-in   { transform: translateY(0) rotate(-2deg); opacity: 1; }

.card-2 {
    grid-column: 5 / span 5;
    grid-row: 1 / span 2;
    margin-top: 3rem;
    transform: translateY(40px) rotate(1.5deg);
    z-index: 5;
}
.card-2.is-in   { transform: translateY(0) rotate(1.5deg); opacity: 1; }

.card-3 {
    grid-column: 9 / span 4;
    grid-row: 2 / span 2;
    margin-top: -1rem;
    transform: translateY(40px) rotate(-1deg);
    z-index: 4;
    background: var(--indigo);
    color: var(--bone);
    border-color: var(--indigo);
}
.card-3.is-in   { transform: translateY(0) rotate(-1deg); opacity: 1; }
.card-3 .card-body { color: var(--bone); }
.card-3 .card-body em { color: var(--gold); }
.card-3 .card-sig { color: var(--ash); border-top-color: var(--ash); }
.card-3 .card-num { color: var(--gold); }

.card-4 {
    grid-column: 2 / span 4;
    grid-row: 3 / span 2;
    margin-top: 2rem;
    transform: translateY(40px) rotate(2.5deg);
    z-index: 6;
}
.card-4.is-in   { transform: translateY(0) rotate(2.5deg); opacity: 1; }

.card-5 {
    grid-column: 6 / span 4;
    grid-row: 3 / span 2;
    margin-top: 5rem;
    transform: translateY(40px) rotate(-2.5deg);
    z-index: 7;
    background: var(--vermillion);
    color: var(--bone);
    border-color: var(--ink);
}
.card-5.is-in   { transform: translateY(0) rotate(-2.5deg); opacity: 1; }
.card-5 .card-body { color: var(--bone); }
.card-5 .card-body em { color: var(--ink); font-weight: 900; }
.card-5 .card-sig { color: var(--bone); border-top-color: var(--bone); opacity: 0.85; }
.card-5 .card-num { color: var(--ink); }

.card-6 {
    grid-column: 9 / span 4;
    grid-row: 4 / span 2;
    margin-top: 4rem;
    transform: translateY(40px) rotate(1deg);
    z-index: 8;
}
.card-6.is-in   { transform: translateY(0) rotate(1deg); opacity: 1; }

.cross {
    position: absolute;
    font-family: var(--mono);
    color: var(--ink);
    font-size: 14px;
    z-index: 1;
    pointer-events: none;
}

.cross-1 { top: 18%; left: 32%; }
.cross-2 { top: 55%; left: 72%; color: var(--vermillion); }
.cross-3 { bottom: 8%; left: 20%; }

/* =================================================================
   SECTION 3 — Pattern Manifesto
   ================================================================= */
.pattern-manifesto {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8vw 4vw;
    background-color: var(--charcoal);
    background-image:
        repeating-conic-gradient(var(--charcoal) 0% 25%, var(--ink) 0% 50%);
    background-size: 32px 32px;
    overflow: hidden;
}

.pattern-inner {
    position: relative;
    max-width: 760px;
    width: 100%;
    z-index: 2;
}

.stamp-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone);
    background: var(--vermillion);
    padding: 6px 14px;
    transform: rotate(-3deg) translate(-1rem, 0.6rem);
    position: relative;
    z-index: 3;
    box-shadow: 4px 4px 0 var(--ink);
}

.stamped-quote {
    background: var(--bone);
    padding: 3.5rem 3.5rem 2.5rem;
    transform: rotate(1deg);
    box-shadow: 12px 14px 0 var(--vermillion), 24px 28px 0 var(--ink);
    border: 1px solid var(--ink);
    position: relative;
}

.stamped-quote::before {
    content: "\201C";
    position: absolute;
    top: -0.6rem;
    left: -0.4rem;
    font-family: var(--serif-display);
    font-weight: 900;
    font-style: italic;
    font-size: 12rem;
    line-height: 1;
    color: var(--vermillion);
    opacity: 0.9;
    z-index: 4;
    pointer-events: none;
}

.stamped-quote p {
    font-family: var(--serif-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.stamped-quote p em {
    color: var(--vermillion);
    font-weight: 900;
    font-style: italic;
}

.stamped-quote cite {
    display: block;
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute);
    border-top: 1px solid var(--ink);
    padding-top: 0.8rem;
}

.pattern-corner {
    position: absolute;
    color: var(--bone);
    font-family: var(--mono);
    font-size: 18px;
    opacity: 0.7;
    z-index: 1;
}

.pattern-corner-tl { top: 2rem; left: 2rem; }
.pattern-corner-br { bottom: 2rem; right: 2rem; }

/* =================================================================
   SECTION 4 — The White Void
   ================================================================= */
.void {
    position: relative;
    min-height: 82vh;
    background: var(--bone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vw 6vw;
    overflow: hidden;
}

.void::before {
    content: "\2731";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: clamp(12rem, 40vw, 40rem);
    color: var(--ink);
    opacity: 0.03;
    pointer-events: none;
    animation: spin 60s linear infinite;
    line-height: 1;
}

.void-text {
    font-family: var(--serif-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.6vw, 2.2rem);
    letter-spacing: 0.12em;
    color: var(--ash);
    text-align: center;
    max-width: 32ch;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.6s var(--ease), transform 1.6s var(--ease), color 1.6s var(--ease);
    position: relative;
    z-index: 2;
}

.void-text.is-in {
    opacity: 1;
    transform: translateY(0);
    color: var(--ink);
}

.void-rule {
    position: absolute;
    left: 50%;
    width: 60vw;
    max-width: 900px;
    border-top: 1px solid var(--ink);
    transform: translateX(-50%);
    z-index: 1;
}

.void-rule-top { top: 22%; }
.void-rule-bot {
    bottom: 22%;
    border-top: 0;
    border-bottom: 1px solid var(--ink);
    height: 4px;
    border-top: 1px solid var(--ink);
}

/* =================================================================
   SECTION 5 — Closing Declaration
   ================================================================= */
.closing {
    position: relative;
    min-height: 100vh;
    background: var(--ink);
    color: var(--bone);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 6vw;
    overflow: hidden;
    isolation: isolate;
    cursor: crosshair;
}

.closing-halftone {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--bone) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.closing::before {
    /* cursor-tracked ripple layer */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 360px at var(--x, 50%) var(--y, 50%),
        rgba(214, 40, 40, 0.35) 0%,
        rgba(214, 40, 40, 0.12) 35%,
        transparent 65%
    );
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

.closing.is-hover::before {
    opacity: 1;
}

.closing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--vermillion);
    z-index: 3;
}

.closing-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 1400px;
}

.closing-word {
    font-family: var(--serif-display);
    font-weight: 900;
    font-style: normal;
    font-size: clamp(6rem, 18vw, 14rem);
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: var(--bone);
    margin-bottom: 3rem;
    user-select: none;
    position: relative;
    display: inline-block;
}

.closing-word-text {
    display: inline-block;
    transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}

.closing.is-hover .closing-word-text {
    color: var(--vermillion);
    transform: translateY(-6px);
}

.closing-word.is-pulse .closing-word-text {
    animation: declaration-pulse 0.9s var(--ease);
}

@keyframes declaration-pulse {
    0% { transform: translateY(-6px) scale(1); }
    42% { transform: translateY(-12px) scale(1.045) rotate(-1deg); color: var(--gold); }
    100% { transform: translateY(-6px) scale(1); }
}

.closing-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--mute);
    max-width: 640px;
    margin: 0 auto;
}

.closing-meta span {
    display: block;
}

/* =================================================================
   Responsive tweaks
   ================================================================= */
@media (max-width: 900px) {
    .card-field {
        grid-template-columns: repeat(6, 1fr);
    }
    .card-1 { grid-column: 1 / span 6; grid-row: auto; margin: 0 0 1.5rem; }
    .card-2 { grid-column: 1 / span 6; grid-row: auto; margin: 0 0 1.5rem; }
    .card-3 { grid-column: 1 / span 6; grid-row: auto; margin: 0 0 1.5rem; }
    .card-4 { grid-column: 1 / span 6; grid-row: auto; margin: 0 0 1.5rem; }
    .card-5 { grid-column: 1 / span 6; grid-row: auto; margin: 0 0 1.5rem; }
    .card-6 { grid-column: 1 / span 6; grid-row: auto; margin: 0 0 1.5rem; }

    .hero-line-two { margin-left: clamp(1rem, 8vw, 6rem); }
    .hero-tag      { margin-left: 0; }

    .shard-indigo { width: 200px; height: 260px; }
    .shard-red    { width: 220px; height: 160px; }

    .hero-meta {
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .stamped-quote { padding: 2.5rem 1.8rem 1.8rem; }
    .stamped-quote::before { font-size: 8rem; }
    .spinner { font-size: 30px; }
    .collage { padding: 14vw 4vw; }
}