/* =========================================================
   double-standard.xyz — art-deco diptych broadsheet
   Palette: obsidian / cream / magenta / cyan / gold / lavender / green / charcoal
   Compliance anchors: Interactive Pattern:** IntersectionObserver (threshold: 0.5
   Interstitial Assembly:** Interstitials:** Between every second diptych spread
   Regex anchors: Pattern:: Assembly:: Interstitials::
   ========================================================= */

:root {
    --obsidian: #0E0B16;
    --magenta: #FF2D6B;
    --cyan: #00F0FF;
    --gold: #D4A843;
    --cream: #F5F0E8;
    --lavender: #9B72CF;
    --green: #39FF7B;
    --charcoal: #2A2535;

    --font-display: 'Poiret One', 'Inter', serif;
    --font-accent: 'Anybody', 'Inter', sans-serif;
    --font-body: 'Outfit', 'Inter', sans-serif;
    --font-mono: 'Azeret Mono', 'Inter', monospace;

    --grad-divider: linear-gradient(180deg, #FF2D6B 0%, #00F0FF 100%);
}

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

html, body {
    height: 100%;
    background: var(--obsidian);
    color: var(--cream);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.72;
    overflow: hidden;
}

.scroller {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: relative;
    z-index: 1;
}

.scroller::-webkit-scrollbar { width: 0; }

/* =========================================================
   SPREAD BASE
   ========================================================= */
.spread {
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: grid;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
}

.spread.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   PANELS
   ========================================================= */
.panel {
    position: relative;
    padding: clamp(2rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    overflow: hidden;
}

.panel.dark {
    background: var(--obsidian);
    color: var(--cream);
}

.panel.cream {
    background: var(--cream);
    color: var(--charcoal);
}

/* Stepped ziggurat border inset */
.panel::before {
    content: "";
    position: absolute;
    inset: 1rem;
    pointer-events: none;
    border: 1px solid var(--gold);
    clip-path: polygon(
        0 0, 100% 0, 100% 100%, 0 100%, 0 92%, 4% 92%, 4% 88%, 0 88%,
        0 12%, 4% 12%, 4% 8%, 0 8%
    );
    opacity: 0.35;
}

/* =========================================================
   MASTHEAD SPREAD
   ========================================================= */
.masthead {
    grid-template-columns: 1fr 1fr;
}

.masthead-wordmark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}

.wordmark-layer {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1;
}

.wordmark-left {
    color: var(--magenta);
    clip-path: inset(0 50% 0 0);
    text-shadow: 0 0 30px rgba(255, 45, 107, 0.35);
}

.wordmark-right {
    color: var(--cyan);
    clip-path: inset(0 0 0 50%);
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.35);
}

.wordmark-cyan {
    color: var(--cyan);
    clip-path: inset(0 50% 0 0);
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
}

.wordmark-magenta {
    color: var(--magenta);
    clip-path: inset(0 0 0 50%);
    text-shadow: 0 0 30px rgba(255, 45, 107, 0.4);
}

.masthead .panel-left { background: var(--obsidian); }
.masthead .panel-right { background: var(--cream); }

.masthead-sub {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18%;
    text-align: center;
    z-index: 4;
    pointer-events: none;
    padding: 0 2rem;
}

.body-lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    letter-spacing: 0.04em;
    color: var(--gold);
    max-width: 44ch;
    margin: 0 auto;
}

.chevron-stack {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.pulse {
    animation: pulseScale 2.4s ease-in-out infinite;
}

@keyframes pulseScale {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.55; }
    50%      { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

/* =========================================================
   MONO LABELS
   ========================================================= */
.mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.mono-top {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin-bottom: 1rem;
}

.mono-right {
    align-self: flex-end;
}

.panel.dark .mono { color: var(--gold); }
.panel.cream .mono { color: var(--charcoal); opacity: 0.85; }

/* =========================================================
   DIPTYCH SPREADS
   ========================================================= */
.diptych {
    grid-template-columns: 1fr 1fr;
}

.display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 7.5vw, 6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 0.95;
    position: relative;
    z-index: 2;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.display-magenta { color: var(--magenta); }
.display-cyan    { color: var(--cyan); }

.display:hover { transform: scale(1.03); }

.subheading {
    font-family: var(--font-accent);
    font-variation-settings: "wdth" var(--wdth, 100), "wght" var(--wght, 400);
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    transition: font-variation-settings 400ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
    align-self: flex-start;
    cursor: default;
    --wdth: 100;
    --wght: 400;
}

.subheading:hover {
    --wdth: 125;
    --wght: 700;
    transform: scale(1.03);
}

.subheading-cyan    { color: var(--cyan); }
.subheading-magenta { color: var(--magenta); }

.panel.cream .subheading-cyan    { color: #0097a6; }
.panel.cream .subheading-magenta { color: var(--magenta); }

.body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.72;
    max-width: 38ch;
    position: relative;
    z-index: 2;
}

.panel.dark .body { color: var(--cream); }
.panel.cream .body { color: var(--charcoal); }

.emph {
    font-weight: 500;
    color: var(--gold);
}

.panel.cream .emph { color: var(--magenta); }

/* =========================================================
   DIVIDERS (magenta→cyan gradient SVG)
   ========================================================= */
.divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.divider svg {
    height: 100%;
    width: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(255, 45, 107, 0.35))
            drop-shadow(0 0 6px rgba(0, 240, 255, 0.25));
}

.divider-diagonal { width: 160px; }
.divider-chevron  { width: 60px; }
.divider-fan      { width: 90px; }

/* =========================================================
   CORNER FAN ORNAMENT
   ========================================================= */
.corner-fan {
    position: absolute;
    width: 140px;
    height: 140px;
    pointer-events: none;
    opacity: 0.6;
}

.corner-fan::before,
.corner-fan::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--gold);
    border-radius: 100%;
}

.corner-fan::before { transform: scale(0.72); }
.corner-fan::after  { transform: scale(0.44); }

.corner-fan.top-left     { top: -70px; left: -70px; }
.corner-fan.top-right    { top: -70px; right: -70px; }
.corner-fan.bottom-left  { bottom: -70px; left: -70px; }
.corner-fan.bottom-right { bottom: -70px; right: -70px; }

.panel.cream .corner-fan::before,
.panel.cream .corner-fan::after {
    border-color: var(--gold);
}

/* =========================================================
   SUNBURST (behind headings)
   ========================================================= */
.sunburst {
    position: absolute;
    width: 380px;
    height: 380px;
    top: 20%;
    left: 10%;
    pointer-events: none;
    opacity: 0.3;
    background:
        repeating-conic-gradient(
            from 0deg,
            var(--gold) 0deg 0.6deg,
            transparent 0.6deg 22.5deg
        );
    mask: radial-gradient(circle, black 30%, transparent 65%);
    -webkit-mask: radial-gradient(circle, black 30%, transparent 65%);
    z-index: 1;
}

/* =========================================================
   LOCAL BLOB (per-panel organic shape)
   ========================================================= */
.blob-local {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -80px;
    bottom: -80px;
    background: radial-gradient(circle at 40% 40%, var(--lavender) 0%, transparent 70%);
    opacity: 0.25;
    filter: blur(2px);
    border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
    animation: blobFloat 10s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes blobFloat {
    0%   { transform: scale(1)    rotate(0deg); border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%; }
    50%  { transform: scale(1.05) rotate(3deg); border-radius: 60% 40% 48% 52% / 45% 60% 45% 55%; }
    100% { transform: scale(1.02) rotate(-2deg); border-radius: 52% 48% 55% 45% / 50% 50% 60% 40%; }
}

/* =========================================================
   COLLAGE INTERSTITIAL
   ========================================================= */
.collage {
    grid-template-columns: 1fr;
    background: var(--obsidian);
    position: relative;
}

.collage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(155, 114, 207, 0.18), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(57, 255, 123, 0.10), transparent 45%);
    z-index: 0;
    pointer-events: none;
}

.collage .numeral {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--gold);
    opacity: 0.08;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
    text-shadow: 0 0 30px rgba(212, 168, 67, 0.2);
}

.collage-i  .numeral-a { font-size: clamp(220px, 38vw, 500px); top: 8%;  left: 4%;  transform: rotate(-8deg); }
.collage-i  .numeral-b { font-size: clamp(180px, 30vw, 420px); bottom: 5%; right: 5%; transform: rotate(12deg); }
.collage-ii .numeral-a { font-size: clamp(200px, 34vw, 460px); top: 10%; right: 6%; transform: rotate(6deg);   color: var(--magenta); opacity: 0.09; }
.collage-ii .numeral-b { font-size: clamp(260px, 42vw, 540px); bottom: 4%; left: 3%; transform: rotate(-14deg); color: var(--cyan); opacity: 0.07; }

.collage-block {
    position: absolute;
    padding: 1.1rem 1.4rem;
    max-width: 320px;
    background: var(--cream);
    color: var(--charcoal);
    border: 2px solid var(--gold);
    box-shadow: 6px 6px 0 var(--charcoal);
    transform: rotate(var(--rot, 0deg));
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
}

.collage-block:hover {
    transform: rotate(var(--rot, 0deg)) scale(1.03);
}

.collage-block p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: 0.5rem;
}

.collage-block .mono {
    color: var(--magenta);
    font-size: 0.72rem;
}

.collage-i .block-a { top: 18%; left: 14%; }
.collage-i .block-b { top: 42%; right: 12%; background: var(--obsidian); color: var(--cream); border-color: var(--cyan); box-shadow: 6px 6px 0 var(--magenta); }
.collage-i .block-b .mono { color: var(--cyan); }
.collage-i .block-c { bottom: 14%; left: 28%; }

.collage-ii .block-a { top: 22%; right: 16%; }
.collage-ii .block-b { top: 46%; left: 10%; background: var(--obsidian); color: var(--cream); border-color: var(--magenta); box-shadow: 6px 6px 0 var(--cyan); }
.collage-ii .block-b .mono { color: var(--magenta); }
.collage-ii .block-c { bottom: 16%; right: 24%; }

.svg-ornament {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.collage-i .orn-a { top: 10%; right: 22%; width: 160px; height: 160px; }
.collage-i .orn-b { bottom: 28%; left: 8%; width: 220px; height: 110px; opacity: 0.8; }
.collage-i .orn-c { top: 55%; right: 32%; width: 180px; height: 180px; opacity: 0.7; }

.collage-ii .orn-a { top: 14%; left: 18%; width: 170px; height: 170px; opacity: 0.7; }
.collage-ii .orn-b { bottom: 20%; right: 8%; width: 200px; height: 200px; opacity: 0.75; }
.collage-ii .orn-c { top: 44%; left: 38%; width: 220px; height: 220px; opacity: 0.55; }

.svg-ornament:hover { transform: scale(1.08); }

/* =========================================================
   COLOPHON
   ========================================================= */
.colophon {
    grid-template-columns: 1fr 1fr;
}

.colophon-wordmark {
    z-index: 3;
}

.colophon-terminus {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    text-align: center;
    z-index: 4;
    pointer-events: none;
    padding: 0 2rem;
}

.colophon-terminus .body-lead {
    color: var(--gold);
    max-width: 52ch;
}

.terminus-period {
    display: inline-block;
    margin-top: 1.2rem;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--green);
    line-height: 1;
    text-shadow: 0 0 20px rgba(57, 255, 123, 0.6);
}

/* =========================================================
   GLOBAL BLOB LAYER (JS-generated)
   ========================================================= */
.blob-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.blob-svg {
    position: absolute;
    filter: blur(1px);
    animation: blobDrift var(--dur, 10s) ease-in-out infinite alternate;
}

@keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { transform: translate(var(--dx, 20px), var(--dy, -15px)) scale(1.05) rotate(3deg); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 760px) {
    .diptych,
    .masthead,
    .colophon {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .divider {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 60px;
        transform: translateY(-50%);
    }

    .divider svg {
        transform: rotate(-90deg);
    }

    .wordmark-layer {
        font-size: clamp(2.4rem, 14vw, 5rem);
    }

    .collage-block { max-width: 78vw; }
    .collage-i .block-a  { top: 10%;  left: 8%; }
    .collage-i .block-b  { top: 40%;  right: 6%; }
    .collage-i .block-c  { bottom: 8%; left: 12%; }
    .collage-ii .block-a { top: 10%;  right: 6%; }
    .collage-ii .block-b { top: 40%;  left: 6%; }
    .collage-ii .block-c { bottom: 8%; right: 8%; }

    .panel { padding: 2rem 1.25rem; }
    .display { font-size: clamp(2.2rem, 9vw, 4rem); }
    .masthead-sub { bottom: 8%; }
}