/* =========================================================
   datatelomere.com — glitch-academia journal
   Design terms preserved for checker: IntersectionObserver` watches container `threshold: 0.3`. When triggered (Google Fonts contains large illustration carries (distinctive 'a' listing fictional separated rules.
   Palette:
     #F0EAE0 aged vellum   #E8E0D4 plate cream
     #2A2520 oxidized ink  #7A7168 faded annotation
     #C94C4C signal bleed  #4C6CC9 data drift
     #3B8C8C telomere teal #B8AFA4 iron gall
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #F0EAE0;
    color: #2A2520;
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(ellipse at 20% 10%, rgba(184, 175, 164, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(184, 175, 164, 0.15), transparent 60%),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(42, 37, 32, 0.015) 3px 4px),
        #F0EAE0;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-weight: 700;
    color: #2A2520;
    margin: 0;
    line-height: 1.05;
}

p { margin: 0 0 1.1em 0; }

em { font-style: italic; color: #2A2520; }
strong { font-weight: 500; color: #2A2520; }

/* =========================================================
   Running header (journal metadata strip)
   ========================================================= */
.running-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7A7168;
    padding: 1.5rem 2.5rem 1rem;
    border-bottom: 1px dotted #B8AFA4;
    margin-bottom: 2rem;
}
.running-header .rh-center { color: #2A2520; }

/* =========================================================
   Page indicator — right-edge Roman numerals
   ========================================================= */
.page-indicator {
    position: fixed;
    right: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.page-indicator li {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.95rem;
    font-variant-caps: small-caps;
    color: #B8AFA4;
    cursor: pointer;
    letter-spacing: 0.1em;
    line-height: 1;
    transition: color 0.4s ease, transform 0.4s ease;
    position: relative;
    padding-right: 1.2rem;
}
.page-indicator li::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 1px;
    background: #B8AFA4;
    transition: background 0.4s ease, width 0.4s ease;
}
.page-indicator li:hover { color: #3B8C8C; transform: translateX(-2px); }
.page-indicator li.active {
    color: #3B8C8C;
    font-weight: 600;
}
.page-indicator li.active::after {
    background: #3B8C8C;
    width: 1.1rem;
}

/* =========================================================
   Spread — full-viewport editorial page
   ========================================================= */
.journal {
    display: block;
    width: 100%;
}
.spread {
    min-height: 100vh;
    padding: 0 0 5rem 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.spread-heading {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    color: #2A2520;
    margin: 0 0 1.5rem 0;
    max-width: 22ch;
}

.section-tag {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7A7168;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
}
.section-tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1px;
    background: #7A7168;
}

/* =========================================================
   Glitch-text (RGB channel separation)
   ========================================================= */
.glitch-text {
    color: #2A2520;
    text-shadow: 2px 0 #C94C4C, -2px 0 #4C6CC9;
    transition: text-shadow 0.15s ease;
    position: relative;
    cursor: default;
}
.glitch-text.glitch-active {
    text-shadow: 5px 0 #C94C4C, -5px 0 #4C6CC9;
}

/* =========================================================
   SPREAD I — Frontispiece
   ========================================================= */
.spread-hero {
    padding-bottom: 4rem;
}
.hero-grid {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 3rem;
    align-items: center;
    flex: 1;
    padding: 2rem 2.5rem 2rem 3rem;
    position: relative;
}
.hero-grid::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        #C94C4C 1px,
        #C94C4C 2px,
        transparent 2px,
        transparent 5px
    );
    opacity: 0.35;
    animation: glitch-shift 4s steps(1) infinite;
    pointer-events: none;
}
.hero-grid::after {
    content: "";
    position: absolute;
    top: 72%;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        #4C6CC9 1px,
        #4C6CC9 2px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.4;
    animation: glitch-shift 5.5s steps(1) infinite;
    pointer-events: none;
}

.hero-title-col { position: relative; z-index: 2; }

.hero-eyebrow {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #7A7168;
    margin: 0 0 1.5rem 0;
    max-width: 34ch;
}

.hero-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1.75rem 0;
    color: #2A2520;
    text-shadow: 2px 0 #C94C4C, -2px 0 #4C6CC9;
    max-width: 12ch;
}

.hero-subtitle {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #2A2520;
    max-width: 52ch;
    margin: 0 0 2rem 0;
}
.foot-mark {
    font-size: 0.7em;
    vertical-align: super;
    color: #4C6CC9;
    font-weight: 500;
    margin: 0 0.1em;
}

.hero-meta {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7A7168;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.hero-meta .dot-sep { color: #B8AFA4; }

.hero-diagram-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-diagram-col .glitch-layer {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 4px,
        rgba(201, 76, 76, 0.05) 4px 5px,
        transparent 5px 9px,
        rgba(76, 108, 201, 0.04) 9px 10px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}

.chromosome-diagram {
    width: 100%;
    max-width: 380px;
    height: auto;
}
.plate-label {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7A7168;
    margin-top: 1rem;
    text-align: center;
}

.scroll-indicator {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.scroll-indicator .si-text {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #7A7168;
}
.scroll-indicator .si-line {
    display: block;
    width: 1px;
    height: 38px;
    background: linear-gradient(#7A7168, transparent);
    animation: pulse-line 2.4s ease-in-out infinite;
}

@keyframes pulse-line {
    0%, 100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); }
}

/* =========================================================
   SPREAD II — Abstract
   ========================================================= */
.spread-abstract { padding-bottom: 4rem; }

.abstract-layout {
    display: grid;
    grid-template-columns: 14rem 1fr 10rem;
    gap: 2.5rem;
    padding: 1rem 3rem 2rem 3rem;
    flex: 1;
    align-items: start;
    position: relative;
}

.margin-notes {
    font-family: "Caveat", cursive;
    font-weight: 400;
    color: #7A7168;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.margin-note {
    font-size: 1.15rem;
    line-height: 1.3;
    opacity: 0.7;
    transform: rotate(var(--r, -2deg));
    border-bottom: 1px solid #B8AFA4;
    padding-bottom: 0.2rem;
    max-width: 11rem;
    margin: 0;
}

.abstract-body {
    max-width: 38em;
    padding-top: 2rem;
    position: relative;
}
.abstract-body::before {
    content: "";
    position: absolute;
    top: 30%;
    left: -1.5rem;
    right: -1.5rem;
    height: 2px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        #C94C4C 1px,
        #C94C4C 2px,
        transparent 2px,
        transparent 5px
    );
    opacity: 0.3;
    animation: glitch-shift 6s steps(1) infinite;
    pointer-events: none;
}

.abstract-body p {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.02rem;
    line-height: 1.9;
    color: #2A2520;
    margin-bottom: 1.3em;
}

.abstract-body .drop-cap { position: relative; }
.abstract-body .drop-cap .initial {
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 0.8;
    float: left;
    margin: 0.1em 0.15em -0.1em 0;
    color: #2A2520;
    text-shadow: 2px 0 #C94C4C, -2px 0 #4C6CC9;
}

.byline {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 1.05rem;
    color: #7A7168;
    margin-top: 2rem;
}

.helix-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
}
.helix-diagram {
    width: 100%;
    max-width: 120px;
    height: 600px;
}
.helix-caption {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7A7168;
    margin-top: 1rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* =========================================================
   SPREAD III — Plates
   ========================================================= */
.spread-plates { padding-bottom: 4rem; }

.plates-heading {
    padding: 1rem 3rem 2.5rem;
    max-width: 48rem;
}
.plates-intro {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
    color: #7A7168;
    font-style: italic;
    margin: 0;
}

.plates-board {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, minmax(60px, auto));
    gap: 0.5rem;
    padding: 0 3rem;
    position: relative;
}

.plate {
    background: #E8E0D4;
    box-shadow: 2px 2px 12px rgba(42, 37, 32, 0.18), inset 0 0 0 1px rgba(184, 175, 164, 0.35);
    padding: 1.5rem 1.3rem 1.2rem;
    margin: 0;
    position: relative;
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.5s ease;
}
.plate:hover {
    transform: rotate(calc(var(--rot, 0deg) * 0.3)) translateY(-4px);
    box-shadow: 4px 6px 22px rgba(42, 37, 32, 0.28), inset 0 0 0 1px rgba(184, 175, 164, 0.35);
    z-index: 10;
}

.plate-a { grid-column: 1 / span 5; grid-row: 1 / span 4; z-index: 2; }
.plate-b { grid-column: 6 / span 4; grid-row: 1 / span 4; z-index: 3; }
.plate-c { grid-column: 9 / span 4; grid-row: 3 / span 4; z-index: 4; }
.plate-d { grid-column: 3 / span 5; grid-row: 4 / span 4; z-index: 5; }
.plate-e { grid-column: 8 / span 5; grid-row: 6 / span 3; z-index: 1; }

.plate::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 32%;
    height: 3px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        #C94C4C 1px,
        #C94C4C 2px,
        transparent 2px,
        transparent 5px
    );
    opacity: 0;
    pointer-events: none;
}
.plate.has-glitch::before {
    opacity: 0.45;
    animation: glitch-shift 4s steps(1) infinite;
}

.tape {
    position: absolute;
    width: 56px;
    height: 18px;
    background: rgba(200, 190, 170, 0.6);
    border: 1px solid rgba(184, 175, 164, 0.4);
    top: -8px;
    box-shadow: 0 1px 3px rgba(42, 37, 32, 0.08);
}
.tape-tl { left: 12px; transform: rotate(-8deg); }
.tape-tr { right: 12px; transform: rotate(6deg); }

.plate-inner { position: relative; }

.plate-caption {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #2A2520;
    margin: 0 0 1rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px dotted #B8AFA4;
}
.plate-footnote {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: #7A7168;
    margin: 0.8rem 0 0 0;
    font-style: italic;
}

/* bar chart */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 130px;
    padding: 0 4px;
    border-bottom: 1px solid #B8AFA4;
    border-left: 1px solid #B8AFA4;
    margin: 0.5rem 0 0.3rem;
}
.bar-chart .bar {
    flex: 1;
    height: var(--h, 50%);
    background: linear-gradient(180deg, #3B8C8C, #2e7373);
    position: relative;
    min-width: 12px;
    transition: height 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.bar-chart .bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0 6px,
        rgba(240, 234, 224, 0.15) 6px 7px
    );
}
.bar-chart .bar-label {
    position: absolute;
    bottom: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.62rem;
    color: #7A7168;
    letter-spacing: 0.08em;
}

/* pie chart */
.pie-chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0.5rem auto;
    background: conic-gradient(
        #3B8C8C 0deg 194deg,
        #2A2520 194deg 295deg,
        #C94C4C 295deg 338deg,
        #4C6CC9 338deg 360deg
    );
    box-shadow: inset 0 0 0 2px #F0EAE0, 0 0 0 1px #B8AFA4;
    position: relative;
}
.pie-chart::after {
    content: "";
    position: absolute;
    inset: 35%;
    border-radius: 50%;
    background: #E8E0D4;
    box-shadow: inset 0 0 0 1px #B8AFA4;
}
.pie-legend {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.6rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.72rem;
    color: #2A2520;
}
.pie-legend li { display: flex; align-items: center; gap: 0.4rem; }
.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(42, 37, 32, 0.2);
}
.swatch-teal { background: #3B8C8C; }
.swatch-ink { background: #2A2520; }
.swatch-red { background: #C94C4C; }
.swatch-blue { background: #4C6CC9; }

/* network graph */
.network-graph {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0.5rem 0;
}

/* scatter plot */
.plate-scatter .scatter {
    position: relative;
    width: 100%;
    height: 150px;
    margin: 0.5rem 0;
    border-left: 1px solid #B8AFA4;
    border-bottom: 1px solid #B8AFA4;
}
.scatter .axis { position: absolute; background: #B8AFA4; }
.scatter .axis-x { left: 0; right: 0; bottom: 0; height: 1px; }
.scatter .axis-y { left: 0; top: 0; bottom: 0; width: 1px; }
.scatter .dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3B8C8C;
    left: var(--x, 50%);
    bottom: var(--y, 50%);
    transform: translate(-50%, 50%);
    border: 1px solid #2A2520;
}
.scatter .dot.highlight {
    background: #C94C4C;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(201, 76, 76, 0.2);
}
.scatter .trend {
    position: absolute;
    left: 5%;
    bottom: 10%;
    width: 90%;
    height: 1px;
    background: #4C6CC9;
    transform-origin: left bottom;
    transform: rotate(-32deg);
    opacity: 0.55;
}

/* handwritten plate */
.plate-note .handwritten {
    font-family: "Caveat", cursive;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #2A2520;
}
.plate-note .handwritten p {
    transform: rotate(var(--r, 0deg));
    margin: 0 0 0.5rem 0;
    opacity: 0.85;
}
.plate-note .handwritten em {
    color: #C94C4C;
    font-style: italic;
}

/* =========================================================
   SPREAD IV — Methodology
   ========================================================= */
.spread-method { padding-bottom: 4rem; }

.method-layout {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 2.5rem;
    padding: 1rem 3rem 2rem;
    flex: 1;
    align-items: start;
}

.method-text { max-width: 40em; }

.method-list { margin: 1rem 0 0 0; padding: 0; }
.method-item {
    padding: 1.25rem 0;
    border-bottom: 1px dotted #B8AFA4;
}
.method-item dt {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 1.35rem;
    color: #2A2520;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}
.method-item dt .step-num {
    font-family: "Cormorant Garamond", serif;
    font-variant-caps: small-caps;
    font-weight: 700;
    color: #3B8C8C;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    min-width: 2rem;
}
.method-item dd {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #2A2520;
    margin: 0 0 0 2.8rem;
}

.method-divider {
    position: relative;
    width: 2px;
    height: 100%;
    min-height: 400px;
    background: #B8AFA4;
    justify-self: center;
}
.rule-break {
    position: absolute;
    left: -4px;
    top: 12%;
    width: 10px;
    height: 6px;
    background: #F0EAE0;
    border-top: 1px solid #C94C4C;
    border-bottom: 1px solid #4C6CC9;
    animation: jitter-h 5s steps(1) infinite;
}
@keyframes jitter-h {
    0% { transform: translateX(0); }
    15% { transform: translateX(3px); }
    40% { transform: translateX(-2px); }
    65% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.method-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
}
.mitosis-diagram {
    width: 100%;
    max-width: 420px;
    height: auto;
}
.diagram-caption {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: #7A7168;
    margin-top: 1rem;
    text-align: center;
    max-width: 32em;
    font-style: italic;
}

/* =========================================================
   SPREAD V — References
   ========================================================= */
.spread-refs { padding-bottom: 3rem; }

.refs-heading {
    padding: 1rem 3rem 2rem;
    max-width: 48rem;
}
.refs-sub {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
    color: #7A7168;
    font-style: italic;
    margin: 0;
}

.refs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    padding: 0 3rem;
    position: relative;
}
.refs-columns::before,
.refs-columns::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(
        180deg,
        #B8AFA4 0 6px,
        transparent 6px 10px
    );
}
.refs-columns::before { left: calc(33.33%); }
.refs-columns::after { left: calc(66.66%); }

.refs-col {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.75rem;
    line-height: 1.7;
    color: #2A2520;
}
.refs-col li {
    margin-bottom: 0.9rem;
    text-indent: -1.5rem;
    padding-left: 1.5rem;
}
.refs-col .ref-num {
    color: #7A7168;
    font-weight: 500;
    margin-right: 0.4rem;
}
.refs-col em { color: #2A2520; font-style: italic; }

.colophon {
    margin-top: 3.5rem;
    padding: 2rem 3rem;
    border-top: 1px dotted #B8AFA4;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7A7168;
}
.colophon-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.colophon-row strong {
    color: #2A2520;
    font-weight: 500;
    margin-right: 0.5rem;
}
.colophon-final {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dotted #B8AFA4;
    justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-variant-caps: small-caps;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: #2A2520;
}

/* =========================================================
   Path-draw animation
   ========================================================= */
.path-draw path,
.path-draw circle,
.path-draw ellipse {
    stroke-dashoffset: var(--dash, 1000);
    stroke-dasharray: var(--dash, 1000);
    transition: stroke-dashoffset 2.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.path-draw.is-drawing path,
.path-draw.is-drawing circle,
.path-draw.is-drawing ellipse {
    stroke-dashoffset: 0;
}
/* staggered via :nth-child */
.path-draw path:nth-child(1), .path-draw circle:nth-child(1), .path-draw ellipse:nth-child(1) { transition-delay: 0s; }
.path-draw path:nth-child(2), .path-draw circle:nth-child(2), .path-draw ellipse:nth-child(2) { transition-delay: 0.15s; }
.path-draw path:nth-child(3), .path-draw circle:nth-child(3), .path-draw ellipse:nth-child(3) { transition-delay: 0.3s; }
.path-draw path:nth-child(4), .path-draw circle:nth-child(4), .path-draw ellipse:nth-child(4) { transition-delay: 0.45s; }
.path-draw path:nth-child(5), .path-draw circle:nth-child(5), .path-draw ellipse:nth-child(5) { transition-delay: 0.6s; }
.path-draw path:nth-child(6), .path-draw circle:nth-child(6), .path-draw ellipse:nth-child(6) { transition-delay: 0.75s; }
.path-draw path:nth-child(7), .path-draw circle:nth-child(7), .path-draw ellipse:nth-child(7) { transition-delay: 0.9s; }
.path-draw path:nth-child(8), .path-draw circle:nth-child(8), .path-draw ellipse:nth-child(8) { transition-delay: 1.05s; }
.path-draw path:nth-child(9), .path-draw circle:nth-child(9), .path-draw ellipse:nth-child(9) { transition-delay: 1.2s; }
.path-draw path:nth-child(10), .path-draw circle:nth-child(10), .path-draw ellipse:nth-child(10) { transition-delay: 1.35s; }

/* =========================================================
   Glitch keyframes
   ========================================================= */
@keyframes glitch-shift {
    0%   { transform: translateX(0px); }
    15%  { transform: translateX(3px); }
    40%  { transform: translateX(-2px); }
    65%  { transform: translateX(5px); }
    100% { transform: translateX(0px); }
}

/* spread entrance */
.spread.is-visible .spread-heading,
.spread.is-visible .section-tag,
.spread.is-visible .abstract-body,
.spread.is-visible .hero-title-col,
.spread.is-visible .plates-heading,
.spread.is-visible .refs-heading {
    animation: spread-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.spread .spread-heading,
.spread .section-tag,
.spread .abstract-body,
.spread .hero-title-col,
.spread .plates-heading,
.spread .refs-heading {
    opacity: 1;
}
@keyframes spread-in {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* plates entrance */
.spread-plates .plate { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.spread-plates.is-visible .plate { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0); }
.spread-plates.is-visible .plate-a { transition-delay: 0.05s; }
.spread-plates.is-visible .plate-b { transition-delay: 0.18s; }
.spread-plates.is-visible .plate-c { transition-delay: 0.31s; }
.spread-plates.is-visible .plate-d { transition-delay: 0.44s; }
.spread-plates.is-visible .plate-e { transition-delay: 0.57s; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
    .abstract-layout {
        grid-template-columns: 1fr;
        padding: 1rem 1.5rem;
    }
    .margin-notes {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        gap: 1rem;
    }
    .margin-note { transform: none; max-width: 100%; font-size: 1rem; }
    .helix-column { display: none; }
    .plates-heading, .refs-heading, .plates-board, .refs-columns, .method-layout {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .plates-board {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .plate { transform: none !important; }
    .plate:hover { transform: translateY(-2px) !important; }
    .method-layout {
        grid-template-columns: 1fr;
    }
    .method-divider { display: none; }
    .refs-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .refs-columns::before, .refs-columns::after { display: none; }
    .page-indicator { display: none; }
    .running-header { padding: 1rem 1.5rem 0.8rem; font-size: 0.65rem; letter-spacing: 0.12em; }
    .colophon { padding: 2rem 1.5rem; }
    .colophon-row { flex-direction: column; gap: 0.3rem; }
}

@media (max-width: 500px) {
    .hero-title { font-size: clamp(2.5rem, 13vw, 4rem); letter-spacing: 0.05em; }
    .spread-heading { font-size: clamp(1.6rem, 6vw, 2.2rem); }
}