/* ===========================================================
   double-standard.org -- styles.css
   A vertically-bisected manifesto in Swiss-grotesque duotone.
   Palette: Filing-Cabinet White #F5F1E8, Adjudicator Red #FF2C2C,
            Stipulation Black #0A0A0A, Verdict Cream #FBF4DD,
            Loophole Gray #7A7568.
   Type:    Archivo (left), Archivo Narrow (right), Fraunces (body),
            JetBrains Mono (forensic accent).
   Grid:    8px modular baseline. 14-unit (112px) horizontal rules.
   =========================================================== */

:root {
    --c-paper: #F5F1E8;          /* Filing-Cabinet White */
    --c-cream: #FBF4DD;          /* Verdict Cream */
    --c-red: #FF2C2C;            /* Adjudicator Red */
    --c-red-88: rgba(255, 44, 44, 0.88);
    --c-red-14: rgba(255, 44, 44, 0.14);
    --c-ink: #0A0A0A;            /* Stipulation Black */
    --c-gray: #7A7568;           /* Loophole Gray */

    --u: 8px;                    /* baseline unit */
    --u14: 112px;                /* 14-unit horizontal rule cadence */
    --header-h: 96px;
    --footer-h: 200px;
    --rail-w: 24px;

    --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-display-narrow: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
    --f-body: "Fraunces", "Times New Roman", Georgia, serif;
    --f-mono: "JetBrains Mono", "Menlo", "Courier New", monospace;

    --cursor-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><line x1="8" y1="1" x2="8" y2="15" stroke="%23FF2C2C" stroke-width="1.4"/><line x1="1" y1="8" x2="15" y2="8" stroke="%23FF2C2C" stroke-width="1.4"/></svg>') 8 8, crosshair;
    --cursor-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><line x1="1" y1="8" x2="15" y2="8" stroke="%23FF2C2C" stroke-width="1.4"/></svg>') 8 8, crosshair;
    --cursor-plus-lg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23" stroke="%23FF2C2C" stroke-width="1.6"/><line x1="1" y1="12" x2="23" y2="12" stroke="%23FF2C2C" stroke-width="1.6"/></svg>') 12 12, crosshair;
}

/* -----------------------------------------------------------
   Reset & base
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;          /* 3 baseline units */
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    hyphens: auto;
    cursor: var(--cursor-plus);
    overflow-x: hidden;
}

body {
    /* 8px baseline grid -- rendered as a faint subtractive pattern.
       Disabled by default; enable .grid-on body to debug. */
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--u14) - 2px),
            var(--c-red-14) calc(var(--u14) - 2px),
            var(--c-red-14) var(--u14)
        );
    background-attachment: local;
    background-size: 100% var(--u14);
}

main { display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-red); }

p { margin: 0 0 calc(var(--u) * 3); }

::selection { background: var(--c-red); color: var(--c-paper); }

/* Section snap */
html { scroll-behavior: smooth; }

/* -----------------------------------------------------------
   The Seam -- 1px Adjudicator Red hairline at exact 50vw
   ----------------------------------------------------------- */
.seam {
    position: fixed;
    top: 0;
    left: 50vw;
    width: 1px;
    height: 100vh;
    background: var(--c-red);
    transform-origin: 50% 50%;
    z-index: 40;
    pointer-events: none;
    transition: transform 600ms cubic-bezier(.22,.61,.36,1), opacity 3000ms ease;
    will-change: transform;
}

.seam.is-pulsing {
    animation: seam-pulse 1666ms ease-in-out 2;
}

@keyframes seam-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--c-red), 0 0 0 0 var(--c-red); opacity: 1; }
    50%      { box-shadow: 0 0 12px 2px var(--c-red), 0 0 24px 6px var(--c-red-14); opacity: 0.92; }
}

.seam.is-tic { transform: rotate(0.4deg); }
.seam.is-dissolved { opacity: 0; }

/* -----------------------------------------------------------
   Hairline cracks -- 14 hand-placed faint diagonals (no anim)
   ----------------------------------------------------------- */
.cracks {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.crack {
    position: absolute;
    height: 1px;
    background: rgba(10, 10, 10, 0.06);
    transform-origin: 0 0;
}

/* -----------------------------------------------------------
   Numeral Tower -- persistent floating element upper-right
   ----------------------------------------------------------- */
.numeral-tower {
    position: fixed;
    top: calc(var(--header-h) + var(--u) * 4);
    right: calc(var(--u) * 4);
    z-index: 35;
    text-align: right;
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
}
.numeral-tower__roman {
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: 84px;
    line-height: 1;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    transition: transform 360ms ease, color 360ms ease;
}
.numeral-tower__case {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    margin-top: var(--u);
    color: var(--c-red);
    letter-spacing: 0.04em;
}

/* -----------------------------------------------------------
   Mute indicator
   ----------------------------------------------------------- */
.mute-indicator {
    position: fixed;
    bottom: calc(var(--footer-h) + var(--u) * 3);
    left: calc(var(--u) * 4);
    z-index: 35;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--c-gray);
    text-transform: uppercase;
    pointer-events: none;
    display: flex;
    gap: var(--u);
    opacity: 0.66;
}

/* -----------------------------------------------------------
   Masthead (header)
   ----------------------------------------------------------- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-ink);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 calc(var(--u) * 4);
    font-family: var(--f-display-narrow);
    font-weight: 700;
}
.masthead__mark {
    font-family: var(--f-display-narrow);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--c-ink);
}
.masthead__index {
    display: flex;
    gap: calc(var(--u) * 1.5);
    align-items: center;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--c-ink);
}
.masthead__numeral {
    transition: color 200ms ease;
}
.masthead__numeral.is-current { color: var(--c-red); }
.masthead__numeral:hover { cursor: var(--cursor-plus-lg); color: var(--c-red); }
.masthead__sep { color: var(--c-gray); }
.masthead__date {
    text-align: right;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--c-gray);
}

/* -----------------------------------------------------------
   Diptych panels -- 50/50 split, 8px baseline grid
   ----------------------------------------------------------- */
.diptych {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    border-bottom: 2px solid var(--c-red);
    padding: calc(var(--u) * 12) 0 calc(var(--u) * 12);
    scroll-snap-align: start;
}

.diptych--hero { min-height: calc(100vh - var(--header-h)); padding-top: calc(var(--u) * 8); }
.diptych--equal { padding: calc(var(--u) * 16) 0; }
.diptych--retrospect { background: var(--c-paper); }

.diptych__panel {
    position: relative;
    padding: 0 calc(var(--u) * 6);
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    gap: calc(var(--u) * 3);
}

.diptych__panel--left {
    text-align: left;
}
.diptych__panel--right {
    text-align: right;
    transform: translateY(12px); /* 12px vertical offset -- the unsettling micro-misalignment */
}

.diptych__panel--right .diptych__rail {
    order: 2;
    text-align: right;
}
.diptych__panel--right .diptych__body {
    order: 1;
}

/* The marginalia rail */
.diptych__rail {
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 16px;
    color: var(--c-gray);
    letter-spacing: 0.06em;
    transform: translateX(-32px);
    opacity: 0;
    transition: transform 240ms cubic-bezier(.22,.61,.36,1), opacity 240ms ease;
}
.diptych__rail--right {
    transform: translateX(32px);
}
.diptych__panel:hover .diptych__rail,
.diptych:focus-within .diptych__rail {
    transform: translateX(0);
    opacity: 1;
}
.rail__num {
    color: var(--c-red);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: var(--u);
}
.rail__cite { font-weight: 500; }
.rail__note {
    margin-top: calc(var(--u) * 2);
    font-style: italic;
    color: var(--c-gray);
}

/* Body content within each diptych panel */
.diptych__body {
    max-width: 56ch;
}
.diptych__panel--right .diptych__body {
    margin-left: auto;
}
.diptych__body--center {
    max-width: 100%;
    text-align: center;
}

/* Eyebrow line */
.eyebrow {
    font-family: var(--f-body);
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--c-gray);
    margin: 0 0 calc(var(--u) * 4);
    letter-spacing: 0.02em;
}
.eyebrow--right { text-align: right; }
.eyebrow--center { text-align: center; }
.eyebrow em { font-style: italic; color: var(--c-ink); }

/* Display headlines */
.display {
    font-weight: 900;
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0 0 calc(var(--u) * 6);
    text-wrap: balance;
    color: var(--c-ink);
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
}
.display--left {
    font-family: var(--f-display);
}
.display--right {
    font-family: var(--f-display-narrow);
}

/* Lede paragraphs */
.lede {
    font-family: var(--f-body);
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: calc(var(--u) * 4);
    text-wrap: pretty;
}

/* Caption */
.caption {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 14px;
    line-height: 24px;
    color: var(--c-gray);
    margin-top: calc(var(--u) * 3);
}
.caption .mono { color: var(--c-gray); }

/* Inline mono */
.mono {
    font-family: var(--f-mono);
    font-style: normal;
    font-weight: 500;
    font-size: 0.78em;
    letter-spacing: 0.04em;
    color: var(--c-red);
}

/* Paragraphs */
.paragraph {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.paragraph p { margin-bottom: calc(var(--u) * 3); }
.paragraph--cream {
    background: var(--c-cream);
    padding: calc(var(--u) * 3) calc(var(--u) * 4);
    border-left: 1px solid var(--c-red-14);
}
.diptych__panel--right .paragraph--cream { border-left: none; border-right: 1px solid var(--c-red-14); }

/* -----------------------------------------------------------
   Strikethrough -- animated path-draw on scroll-into-view
   ----------------------------------------------------------- */
.strike {
    position: relative;
    display: inline-block;
    color: var(--c-ink);
    cursor: var(--cursor-minus);
}
.strike::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 56%;
    height: 2px;
    background: var(--c-red);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 480ms cubic-bezier(.65,.05,.36,1);
}
.strike.is-struck::after { transform: scaleX(1); }
.strike:hover { color: var(--c-red); }

/* -----------------------------------------------------------
   Asterism (between sections)
   ----------------------------------------------------------- */
.asterism {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 24px;
    line-height: 32px;
    color: var(--c-gray);
    text-align: center;
    padding: calc(var(--u) * 6) 0;
    letter-spacing: 0.4em;
    user-select: none;
}

/* -----------------------------------------------------------
   Timeline (Section III)
   ----------------------------------------------------------- */
.timeline {
    list-style: none;
    margin: 0 0 calc(var(--u) * 4);
    padding: 0;
    border-top: 1px solid var(--c-gray);
}
.timeline li {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 2) 0;
    border-bottom: 1px solid var(--c-gray);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;
}
.timeline--right li {
    grid-template-columns: 1fr 96px;
    direction: rtl;
}
.timeline--right li > * { direction: ltr; }
.timeline__date {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--c-red);
    align-self: center;
}
.timeline--right .timeline__date { text-align: left; }
.timeline__event {
    color: var(--c-ink);
}
.timeline--right .timeline__event { text-align: right; }
.timeline__date--fade,
.timeline__event--fade { color: var(--c-gray); opacity: 0.4; }

.timeline-fade {
    height: calc(var(--u) * 12);
    background: linear-gradient(to bottom, var(--c-paper), var(--c-cream));
}

/* -----------------------------------------------------------
   Quote blocks (Section IV)
   ----------------------------------------------------------- */
.quote-block {
    margin: 0;
    padding: calc(var(--u) * 4) calc(var(--u) * 4);
    border-left: 2px solid var(--c-ink);
    background: transparent;
    font-family: var(--f-body);
    font-style: normal;
    font-size: 22px;
    line-height: 32px;
    transition: opacity 600ms ease;
}
.quote-block p {
    font-weight: 400;
    margin: 0 0 calc(var(--u) * 2);
}
.quote-block--A { color: var(--c-ink); }
.quote-block--B {
    border-left: none;
    border-right: 2px solid var(--c-red);
    background: var(--c-cream);
    color: var(--c-ink);
    margin-left: auto;
}
.quote-block__attrib {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 14px;
    color: var(--c-gray);
    margin-top: calc(var(--u) * 2);
}

/* Contradiction overlay -- ghosting of quote A behind quote B */
.contradiction-overlay {
    position: absolute;
    pointer-events: none;
    inset: 0;
    z-index: 1;
}

/* -----------------------------------------------------------
   Cutouts -- "EQUAL" word cut out of red field (Section V)
   ----------------------------------------------------------- */
.cutout {
    margin: calc(var(--u) * 4) auto;
    width: 100%;
    max-width: 520px;
}
.cutout__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------
   Filmstrip (Section VI -- retrospective miniatures)
   ----------------------------------------------------------- */
.filmstrip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--u) * 2);
}
.filmstrip__cell {
    border: 1px solid var(--c-gray);
    background: var(--c-cream);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 22px;
    color: var(--c-ink);
    position: relative;
    transition: transform 280ms ease, background-color 280ms ease;
}
.filmstrip__cell:hover {
    transform: translateX(-4px);
    background: var(--c-paper);
}
.filmstrip__head {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--c-red);
    margin-bottom: var(--u);
}
.filmstrip__body strong {
    font-family: var(--f-display-narrow);
    font-weight: 900;
    font-size: 16px;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    display: inline-block;
    margin-right: var(--u);
}
.redact {
    display: inline-block;
    background: var(--c-ink);
    color: var(--c-ink);
    padding: 0 calc(var(--u) * 0.5);
    border-radius: 1px;
    user-select: none;
    transition: background 280ms ease, color 280ms ease;
}
.filmstrip__cell.is-revealed .redact {
    background: var(--c-red);
    color: var(--c-paper);
}

/* -----------------------------------------------------------
   Finale (Section VII)
   ----------------------------------------------------------- */
.finale {
    min-height: 90vh;
    display: grid;
    place-items: center;
    padding: calc(var(--u) * 16) calc(var(--u) * 6);
    border-bottom: none;
    scroll-snap-align: start;
    background: var(--c-paper);
}
.finale__inner {
    max-width: 1080px;
    width: 100%;
    text-align: center;
}
.finale__sentence {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    text-wrap: balance;
    margin: calc(var(--u) * 4) 0;
}
.finale__caption {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 14px;
    color: var(--c-gray);
    margin-top: calc(var(--u) * 6);
}

/* -----------------------------------------------------------
   Reveal animations -- 280ms ease-out fade + 8px y-translate
   ----------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 280ms ease-out, transform 280ms ease-out;
}
.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------
   Footer marquee -- right-to-left at 12px/sec
   ----------------------------------------------------------- */
.footer {
    position: relative;
    height: var(--footer-h);
    background: var(--c-ink);
    color: var(--c-paper);
    overflow: hidden;
    display: grid;
    align-items: center;
    border-top: 2px solid var(--c-red);
}
.footer__marquee {
    white-space: nowrap;
    overflow: hidden;
}
.footer__track {
    display: inline-block;
    font-family: var(--f-display-narrow);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.06em;
    color: var(--c-paper);
    animation: marquee 60s linear infinite;
    will-change: transform;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* -----------------------------------------------------------
   Responsive degradation
   The split persists, but rails collapse on narrow viewports.
   ----------------------------------------------------------- */
@media (max-width: 880px) {
    :root { --rail-w: 0px; }

    .diptych__panel {
        grid-template-columns: 1fr;
        padding: 0 calc(var(--u) * 3);
    }
    .diptych__rail { display: none; }
    .display { font-size: clamp(2rem, 8vw, 3.4rem); }
    .lede { font-size: 18px; line-height: 28px; }
    .quote-block { font-size: 18px; line-height: 28px; }
    .timeline li { grid-template-columns: 72px 1fr; }
    .timeline--right li { grid-template-columns: 1fr 72px; }
    .numeral-tower__roman { font-size: 56px; }

    .masthead {
        height: 64px;
        grid-template-columns: 1fr 1fr;
        padding: 0 calc(var(--u) * 2);
    }
    .masthead__index { display: none; }
}

@media (max-width: 600px) {
    .diptych {
        grid-template-columns: 1fr;
        padding: calc(var(--u) * 8) 0;
    }
    .diptych__panel--right { transform: none; text-align: left; }
    .diptych__panel--right .diptych__body { margin-left: 0; }
    .diptych__panel--right .quote-block { margin-left: 0; }
    .seam { left: 0; width: 100vw; height: 1px; top: 50vh; transform: none; }
    .seam.is-tic { transform: rotate(0.4deg); }
}