/* =========================================================
   historygrapher.net v2  --  mid-century, diagonal-sections,
   oversized-display, coastal-blend, cursor-follow,
   noise-texture, retro-patterns, whimsical-creative
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
    --c-sandstone:      #F2D7B5;
    --c-cream:          #F4EBD8;
    --c-pool:           #9CC6C4;
    --c-coral:          #E89986;
    --c-teal:           #3F6E72;
    --c-vermilion:      #D9583E;
    --c-terracotta:     #B45F3F;
    --c-driftwood:      #2E2622;
    --c-bleached:       #FBF6EA;
    --c-mono:           #5B4634;

    --tilt-hero:        -6deg;
    --tilt-charts:       4deg;
    --tilt-atlas:       -3deg;
    --tilt-editors:      5deg;
    --tilt-work:        -4deg;

    --seam-thickness:   6px;

    --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
    --font-headline: "DM Serif Display", "Source Serif 4", Georgia, serif;
    --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-sandstone);
    color: var(--c-driftwood);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.05vw, 1.1875rem);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    cursor: default;
    position: relative;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: 0; background: transparent; }

/* ---------- Global grain ---------- */
.grain-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(rgba(46,38,34,0.6) 1px, transparent 1.4px),
        radial-gradient(rgba(46,38,34,0.4) 1px, transparent 1.6px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
}

/* ---------- Cursor halo ---------- */
.cursor-halo {
    position: fixed;
    top: 0; left: 0;
    width: 240px; height: 240px;
    margin-left: -120px;
    margin-top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
                rgba(217,88,62,0.28) 0%,
                rgba(217,88,62,0.18) 35%,
                rgba(217,88,62,0.08) 65%,
                rgba(217,88,62,0.00) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 70;
    transform: translate3d(50vw, 50vh, 0);
    will-change: transform;
}

@media (hover: none) {
    .cursor-halo { opacity: 0; }
}

/* ---------- Bands  ---------- */
.bands {
    display: block;
    position: relative;
    isolation: isolate;
}

.band {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.band__inner {
    position: relative;
    z-index: 4;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 64px);
}

/* Per-band tilts: clip-path slices the band along the diagonal */
.band--hero {
    background: var(--c-sandstone);
    color: var(--c-driftwood);
    min-height: 110vh;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
    margin-bottom: -60px;
    padding-bottom: 90px;
}

.band--charts {
    background: var(--c-pool);
    color: var(--c-driftwood);
    min-height: 105vh;
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 calc(100% - 60px));
    margin-top: -30px;
    margin-bottom: -30px;
    padding: 130px clamp(20px, 4vw, 64px) 120px;
}

.band--atlas {
    background: var(--c-cream);
    color: var(--c-driftwood);
    min-height: 95vh;
    clip-path: polygon(0 0, 100% 60px, 100% calc(100% - 90px), 0 100%);
    margin-top: -50px;
    margin-bottom: -50px;
    padding: 120px clamp(20px, 4vw, 64px) 130px;
}

.band--editors {
    background: var(--c-coral);
    color: var(--c-driftwood);
    min-height: 100vh;
    clip-path: polygon(0 90px, 100% 0, 100% calc(100% - 60px), 0 100%);
    margin-top: -50px;
    margin-bottom: -30px;
    padding: 130px clamp(20px, 4vw, 64px) 120px;
}

.band--workbench {
    background: var(--c-teal);
    color: var(--c-bleached);
    min-height: 110vh;
    clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 calc(100% - 80px));
    margin-top: -30px;
    margin-bottom: -50px;
    padding: 120px clamp(20px, 4vw, 64px) 140px;
}

.band--footer {
    background: var(--c-sandstone);
    color: var(--c-driftwood);
    min-height: 60vh;
    margin-top: -20px;
    padding: 120px clamp(20px, 4vw, 64px) 60px;
}

/* ---------- Diagonal seams  ---------- */
.band__seam {
    position: absolute;
    left: -10vw;
    width: 130vw;
    height: var(--seam-thickness);
    background: var(--c-terracotta);
    z-index: 5;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: height 320ms ease-out, background-color 320ms ease-out, box-shadow 320ms ease-out;
    box-shadow: 0 0 0 rgba(217,88,62,0);
}

.band__seam--bottom { bottom: 30px; }
.band__seam--top { top: 30px; }

/* Per-section tilt rotations of seams */
.band--hero .band__seam--bottom         { transform: translateY(40px) rotate(-3deg); }
.band--charts .band__seam--top          { transform: translateY(0) rotate(2deg); }
.band--charts .band__seam--bottom       { transform: translateY(0) rotate(-1.4deg); }
.band--atlas .band__seam--top           { transform: translateY(0) rotate(1.4deg); }
.band--atlas .band__seam--bottom        { transform: translateY(0) rotate(-2deg); }
.band--editors .band__seam--top         { transform: translateY(0) rotate(2.5deg); }
.band--editors .band__seam--bottom      { transform: translateY(0) rotate(-1.6deg); }
.band--workbench .band__seam--top       { transform: translateY(0) rotate(1.6deg); }
.band--workbench .band__seam--bottom    { transform: translateY(0) rotate(-2.4deg); }
.band--footer .band__seam--top          { transform: translateY(0) rotate(1.2deg); }

/* Hover-near (JS adds .seam-active and sets --seam-h) */
.band__seam.seam-active {
    height: var(--seam-h, 12px);
    background: var(--c-vermilion);
    box-shadow: 0 0 18px rgba(217,88,62,0.45);
}

/* ---------- Per-band noise ---------- */
.band__noise {
    position: absolute;
    inset: -10px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(rgba(46,38,34,0.18) 0.6px, transparent 0.9px),
        radial-gradient(rgba(46,38,34,0.10) 0.6px, transparent 1.1px);
    background-size: 2.5px 2.5px, 4px 4px;
    background-position: 0 0, 1px 1px;
}

.band--workbench .band__noise {
    opacity: 0.4;
    background-image:
        radial-gradient(rgba(251,246,234,0.16) 0.6px, transparent 0.9px),
        radial-gradient(rgba(251,246,234,0.10) 0.6px, transparent 1.1px);
    mix-blend-mode: screen;
}

/* ---------- Retro patterns ---------- */
.band__retro {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0.6;
}

.band__retro--scallop {
    bottom: 60px;
    left: 0; right: 0;
    height: 30px;
    background:
        radial-gradient(circle at 15px 30px, var(--c-vermilion) 0 12px, transparent 13px) repeat-x;
    background-size: 30px 30px;
    opacity: 0.55;
}

.band__retro--starburst {
    top: 18%;
    right: 4%;
    width: 240px;
    height: 240px;
    background: conic-gradient(
        from 22deg,
        var(--c-vermilion) 0 12deg,
        transparent 12deg 45deg,
        var(--c-vermilion) 45deg 57deg,
        transparent 57deg 90deg,
        var(--c-vermilion) 90deg 102deg,
        transparent 102deg 135deg,
        var(--c-vermilion) 135deg 147deg,
        transparent 147deg 180deg,
        var(--c-vermilion) 180deg 192deg,
        transparent 192deg 225deg,
        var(--c-vermilion) 225deg 237deg,
        transparent 237deg 270deg,
        var(--c-vermilion) 270deg 282deg,
        transparent 282deg 315deg,
        var(--c-vermilion) 315deg 327deg,
        transparent 327deg 360deg
    );
    -webkit-mask: radial-gradient(circle at center, black 18px, transparent 19px, black 22px, black 100%);
            mask: radial-gradient(circle at center, black 18px, transparent 19px, black 22px, black 100%);
    border-radius: 50%;
    opacity: 0.32;
    transform: rotate(8deg);
}

.band__retro--crosses {
    inset: 0;
    background-image:
        linear-gradient(0deg, transparent 8px, var(--c-terracotta) 8px 10px, transparent 10px 18px),
        linear-gradient(90deg, transparent 8px, var(--c-terracotta) 8px 10px, transparent 10px 18px);
    background-size: 18px 18px;
    background-position: 0 0;
    opacity: 0.10;
}

.band__retro--grid {
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(251,246,234,0.06) 22px 23px),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(251,246,234,0.06) 22px 23px);
    opacity: 0.7;
}

/* ---------- Hero ---------- */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    padding-top: clamp(20px, 4vw, 60px);
}

@media (max-width: 880px) {
    .hero { grid-template-columns: 1fr; }
}

.hero__copy { position: relative; }

.logotype {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(4rem, 12vw, 14rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--c-driftwood);
    margin: 0 0 0.45em;
    display: block;
}

.logotype__row {
    display: block;
    transform-origin: left center;
}

.logotype__row--lower {
    margin-left: 0.3em;
}

.logotype__char {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(0.4em) rotate(-3deg);
    transition: opacity 380ms ease-out, transform 380ms cubic-bezier(.34,1.56,.64,1);
    will-change: opacity, transform;
}

.logotype.is-typed .logotype__char {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

.logotype__char--i {
    width: 0.42em;
    text-align: center;
}

.logotype__char--i::before {
    content: "i";
    color: inherit;
    visibility: hidden;
}

.logotype__sunburst {
    position: absolute;
    top: -0.46em;
    left: 50%;
    width: 0.48em;
    height: 0.48em;
    margin-left: -0.24em;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--c-vermilion) 0 22deg,
        var(--c-sandstone) 22deg 30deg,
        var(--c-vermilion) 30deg 52deg,
        var(--c-sandstone) 52deg 60deg,
        var(--c-vermilion) 60deg 82deg,
        var(--c-sandstone) 82deg 90deg,
        var(--c-vermilion) 90deg 112deg,
        var(--c-sandstone) 112deg 120deg,
        var(--c-vermilion) 120deg 142deg,
        var(--c-sandstone) 142deg 150deg,
        var(--c-vermilion) 150deg 172deg,
        var(--c-sandstone) 172deg 180deg,
        var(--c-vermilion) 180deg 202deg,
        var(--c-sandstone) 202deg 210deg,
        var(--c-vermilion) 210deg 232deg,
        var(--c-sandstone) 232deg 240deg,
        var(--c-vermilion) 240deg 262deg,
        var(--c-sandstone) 262deg 270deg,
        var(--c-vermilion) 270deg 292deg,
        var(--c-sandstone) 292deg 300deg,
        var(--c-vermilion) 300deg 322deg,
        var(--c-sandstone) 322deg 330deg,
        var(--c-vermilion) 330deg 352deg,
        var(--c-sandstone) 352deg 360deg
    );
    box-shadow: 0 0 0 2px var(--c-vermilion) inset;
    opacity: 0;
    transform: scale(0);
    transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.34,1.56,.64,1);
    animation: sun-rotate 60s linear infinite, sun-pulse 4s ease-in-out infinite alternate;
}

.logotype.is-typed .logotype__sunburst {
    opacity: 1;
    transform: scale(1);
}

@keyframes sun-rotate {
    to { transform: rotate(360deg) scale(var(--sun-s, 1)); }
}

@keyframes sun-pulse {
    from { box-shadow: 0 0 0 2px var(--c-vermilion) inset, 0 0 0 0 rgba(217,88,62,0.3); }
    to   { box-shadow: 0 0 0 2px var(--c-vermilion) inset, 0 0 14px 2px rgba(217,88,62,0.45); }
}

.hero__tag {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
    line-height: 1.25;
    margin: 0 0 1.5em;
    max-width: 32ch;
    color: var(--c-driftwood);
    opacity: 0.86;
}

.hero__cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-headline);
    font-size: 1rem;
    letter-spacing: 0.005em;
    border: 2px solid var(--c-driftwood);
    background: var(--c-driftwood);
    color: var(--c-bleached);
    transform: rotate(2deg);
    transition: transform 260ms cubic-bezier(.34,1.56,.64,1), background-color 240ms ease-out, color 240ms ease-out, box-shadow 240ms ease-out;
    box-shadow: 4px 4px 0 var(--c-vermilion);
}

.chip:hover, .chip:focus-visible {
    transform: rotate(-2deg) translateY(-2px);
    background: var(--c-vermilion);
    border-color: var(--c-vermilion);
    color: var(--c-bleached);
    box-shadow: 6px 6px 0 var(--c-driftwood);
}

.chip--ghost {
    background: transparent;
    color: var(--c-driftwood);
    box-shadow: 4px 4px 0 var(--c-terracotta);
}

.chip--ghost:hover, .chip--ghost:focus-visible {
    background: var(--c-driftwood);
    color: var(--c-sandstone);
    box-shadow: 6px 6px 0 var(--c-terracotta);
}

.hero__meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--c-mono);
    margin: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero__meta .dot { opacity: 0.5; }

.hero__diagram {
    background: var(--c-bleached);
    border: 2px solid var(--c-driftwood);
    border-radius: 4px;
    padding: 18px 22px 22px;
    box-shadow: 12px 12px 0 var(--c-terracotta);
    transform: rotate(-1.5deg);
    position: relative;
}

.hero__diagram::before {
    content: "fig. I  --  the long century";
    position: absolute;
    top: -14px; left: 24px;
    background: var(--c-bleached);
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-mono);
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

.timeline-svg { width: 100%; height: auto; }

.timeline-rail { stroke-dasharray: 660; stroke-dashoffset: 660; animation: rail-draw 1400ms ease-out 600ms forwards; }

.timeline-ticks line {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: rail-draw 320ms ease-out forwards;
}
.timeline-ticks line:nth-of-type(1) { animation-delay: 1100ms; }
.timeline-ticks line:nth-of-type(2) { animation-delay: 1180ms; }
.timeline-ticks line:nth-of-type(3) { animation-delay: 1260ms; }
.timeline-ticks line:nth-of-type(4) { animation-delay: 1340ms; }
.timeline-ticks line:nth-of-type(5) { animation-delay: 1420ms; }
.timeline-ticks line:nth-of-type(6) { animation-delay: 1500ms; }
.timeline-ticks line:nth-of-type(7) { animation-delay: 1580ms; }
.timeline-ticks line:nth-of-type(8) { animation-delay: 1660ms; }

@keyframes rail-draw { to { stroke-dashoffset: 0; } }

.timeline-labels text { opacity: 0; animation: fade-in 360ms ease-out forwards; }
.timeline-labels text:nth-of-type(1) { animation-delay: 1200ms; }
.timeline-labels text:nth-of-type(2) { animation-delay: 1280ms; }
.timeline-labels text:nth-of-type(3) { animation-delay: 1360ms; }
.timeline-labels text:nth-of-type(4) { animation-delay: 1440ms; }
.timeline-labels text:nth-of-type(5) { animation-delay: 1520ms; }
.timeline-labels text:nth-of-type(6) { animation-delay: 1600ms; }
.timeline-labels text:nth-of-type(7) { animation-delay: 1680ms; }
.timeline-labels text:nth-of-type(8) { animation-delay: 1760ms; }

.timeline-events text { opacity: 0; animation: fade-in 480ms ease-out forwards; }
.timeline-events text:nth-of-type(1) { animation-delay: 1900ms; }
.timeline-events text:nth-of-type(2) { animation-delay: 1980ms; }
.timeline-events text:nth-of-type(3) { animation-delay: 2060ms; }
.timeline-events text:nth-of-type(4) { animation-delay: 2140ms; }

@keyframes fade-in { to { opacity: 1; } }

.locomotive { transform: translateX(-40px); animation: loco-run 16s linear infinite; }
.locomotive__smoke circle:nth-of-type(1) { animation: smoke-puff 2s ease-out infinite; }
.locomotive__smoke circle:nth-of-type(2) { animation: smoke-puff 2s ease-out 0.4s infinite; }
.locomotive__smoke circle:nth-of-type(3) { animation: smoke-puff 2s ease-out 0.8s infinite; }

@keyframes loco-run {
    from { transform: translateX(-60px); }
    to   { transform: translateX(720px); }
}

@keyframes smoke-puff {
    0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translate(-12px, -32px) scale(1.4); opacity: 0; }
}

/* ---------- Generic band header ---------- */
.band__header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: clamp(20px, 3vw, 48px);
    margin-bottom: clamp(40px, 6vw, 80px);
}

.band__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(5rem, 14vw, 14rem);
    line-height: 0.86;
    letter-spacing: -0.05em;
    color: var(--c-vermilion);
    grid-row: 1 / 3;
    align-self: stretch;
    display: block;
    transform: rotate(-3deg);
    transform-origin: bottom left;
    text-shadow: 4px 4px 0 var(--c-driftwood);
}

.band__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "SOFT" 80;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
    margin: 0;
    max-width: 22ch;
}

.band__title em {
    font-style: italic;
    font-weight: 700;
    color: var(--c-vermilion);
}

.band__lede {
    grid-column: 2;
    font-family: var(--font-headline);
    font-style: italic;
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    color: var(--c-driftwood);
    margin: 18px 0 0;
    max-width: 42ch;
    opacity: 0.85;
}

/* ---------- Charts band ---------- */
.charts-stair {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 80px);
    position: relative;
}

@media (min-width: 880px) {
    .charts-stair {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }
}

.chart-card {
    position: relative;
    background: var(--c-bleached);
    border: 4px solid var(--c-terracotta);
    padding: clamp(20px, 2.5vw, 32px);
    transform: translateY(60px);
    opacity: 0;
    transition: transform 600ms ease-out, opacity 600ms ease-out;
    box-shadow: 10px 10px 0 var(--c-driftwood);
    overflow: visible;
}

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

@media (min-width: 880px) {
    .chart-card--a { transform: translateY(20px) translateX(-10px); }
    .chart-card--b { transform: translateY(80px); }
    .chart-card--c { transform: translateY(140px) translateX(10px); }

    .chart-card.is-visible.chart-card--a { transform: translateY(0) translateX(-10px) rotate(-1deg); }
    .chart-card.is-visible.chart-card--b { transform: translateY(60px) rotate(1deg); }
    .chart-card.is-visible.chart-card--c { transform: translateY(120px) translateX(10px) rotate(-0.6deg); }
}

.chart-card__ribbon {
    position: absolute;
    top: -22px; right: 22px;
    background: var(--c-vermilion);
    color: var(--c-bleached);
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 0.92rem;
    padding: 8px 18px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    transform: translateY(-100%) rotate(-12deg);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.34,1.56,.64,1), opacity 220ms ease-out;
    transform-origin: top center;
    pointer-events: none;
}

.chart-card:hover .chart-card__ribbon,
.chart-card:focus-within .chart-card__ribbon {
    transform: translateY(0) rotate(2deg);
    opacity: 1;
}

.chart-card__viz {
    background: var(--c-cream);
    border: 1.5px solid var(--c-terracotta);
    height: 180px;
    margin-bottom: 22px;
    padding: 18px;
    display: flex;
    align-items: end;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.chart-card__viz--bars {
    align-items: end;
    gap: 8%;
    padding: 18px 14px;
}

.chart-card__viz--bars .bar {
    width: 9%;
    height: var(--h, 50%);
    background: linear-gradient(to top, var(--c-vermilion) 0%, var(--c-terracotta) 100%);
    background-color: var(--c-vermilion);
    background-image: none;
    background: var(--c-vermilion);
    transform-origin: bottom center;
    transform: scaleY(0);
    transition: transform 760ms cubic-bezier(.34,1.56,.64,1);
}

.chart-card.is-visible .chart-card__viz--bars .bar {
    transform: scaleY(1);
}

.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(1) { transition-delay: 60ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(2) { transition-delay: 130ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(3) { transition-delay: 200ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(4) { transition-delay: 270ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(5) { transition-delay: 340ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(6) { transition-delay: 410ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(7) { transition-delay: 480ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(8) { transition-delay: 550ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(9) { transition-delay: 620ms; }
.chart-card.is-visible .chart-card__viz--bars .bar:nth-child(10){ transition-delay: 690ms; }

.chart-card__viz--scatter svg { width: 100%; height: 100%; }

.chart-card__viz--circle svg { width: 80%; height: 100%; }

.chart-card__title {
    font-family: var(--font-headline);
    font-size: clamp(1.3rem, 1.9vw, 1.7rem);
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--c-driftwood);
}

.chart-card__caption {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 18px;
    color: var(--c-mono);
}

.chart-card__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--c-mono);
    letter-spacing: 0.04em;
}

.chart-card__sep {
    width: 14px;
    height: 1.5px;
    background: var(--c-terracotta);
}

/* ---------- Atlas band ---------- */
.atlas__header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: clamp(20px, 3vw, 64px);
    margin-bottom: clamp(40px, 6vw, 64px);
    position: relative;
}

.atlas__num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(7rem, 22vw, 22rem);
    line-height: 0.78;
    letter-spacing: -0.06em;
    color: var(--c-vermilion);
    text-shadow: 6px 6px 0 var(--c-driftwood);
    transform: rotate(-4deg);
    transform-origin: bottom left;
    clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    transition: clip-path 900ms ease-out;
}

.atlas__num.is-revealed {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.atlas__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 4.6vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    max-width: 24ch;
}

.atlas__title em {
    font-style: italic;
    color: var(--c-terracotta);
}

.atlas__columns {
    column-count: 1;
    column-gap: 56px;
    margin: 0 0 64px;
    max-width: 100%;
}

@media (min-width: 720px) {
    .atlas__columns { column-count: 2; }
}

.atlas__copy {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.62;
    margin: 0 0 1em;
    break-inside: avoid-column;
    text-align: justify;
    hyphens: auto;
    color: var(--c-driftwood);
}

.dropcap {
    float: left;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 4.6em;
    line-height: 0.82;
    margin: 0.06em 0.08em -0.04em -0.04em;
    color: var(--c-vermilion);
    text-shadow: 3px 3px 0 var(--c-terracotta);
}

.atlas__pegboard {
    background:
        radial-gradient(circle at center, var(--c-terracotta) 0 1.4px, transparent 1.6px) 0 0/26px 26px,
        var(--c-cream);
    border: 2px solid var(--c-driftwood);
    padding: 36px 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 18px;
    align-items: flex-start;
    box-shadow: 8px 8px 0 var(--c-terracotta);
}

.chip--peg {
    position: relative;
    background: var(--c-bleached);
    color: var(--c-driftwood);
    border: 2px solid var(--c-driftwood);
    font-family: var(--font-headline);
    font-size: 1.05rem;
    padding: 10px 18px 10px 24px;
    border-radius: 4px;
    transform: rotate(var(--rot, 0deg));
    box-shadow: 3px 3px 0 var(--c-terracotta);
    transition: transform 260ms ease-out, box-shadow 260ms ease-out;
}

.chip--peg::before {
    content: "";
    position: absolute;
    top: 6px; left: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-vermilion);
    box-shadow: 0 0 0 1.5px var(--c-driftwood);
}

.chip--peg.is-wobbling {
    animation: wobble 1.4s ease-out;
}

@keyframes wobble {
    0%   { transform: rotate(var(--rot, 0deg)); }
    20%  { transform: rotate(calc(var(--rot, 0deg) + 6deg)); }
    40%  { transform: rotate(calc(var(--rot, 0deg) - 4deg)); }
    60%  { transform: rotate(calc(var(--rot, 0deg) + 2deg)); }
    80%  { transform: rotate(calc(var(--rot, 0deg) - 1deg)); }
    100% { transform: rotate(var(--rot, 0deg)); }
}

.chip--peg:hover {
    box-shadow: 5px 5px 0 var(--c-vermilion);
}

/* ---------- Editors band ---------- */
.editors-z {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px 0;
    position: relative;
    margin-top: 24px;
}

@media (min-width: 880px) {
    .editors-z {
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: auto;
        gap: 32px 0;
    }
    .editor--a       { grid-column: 1 / 3; grid-row: 1; }
    .editor-arrow--ab{ grid-column: 3 / 5; grid-row: 1; align-self: center; }
    .editor--b       { grid-column: 5 / 8; grid-row: 1; justify-self: end; }
    .editor-arrow--bc{ grid-column: 4 / 7; grid-row: 2; }
    .editor--c       { grid-column: 1 / 4; grid-row: 3; }
    .editor-arrow--cd{ grid-column: 4 / 6; grid-row: 3; align-self: center; }
    .editor--d       { grid-column: 6 / 8; grid-row: 3; justify-self: end; }
}

.editor {
    background: var(--c-bleached);
    border: 3px solid var(--c-driftwood);
    padding: 24px;
    margin: 0;
    box-shadow: 8px 8px 0 var(--c-vermilion);
    max-width: 360px;
    transform: rotate(-1deg);
    transition: transform 320ms ease-out, box-shadow 320ms ease-out;
}

.editor:nth-child(7n) { transform: rotate(1.4deg); }

.editor:hover {
    transform: rotate(0) translateY(-4px);
    box-shadow: 12px 12px 0 var(--c-vermilion);
}

.editor__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--c-cream);
    border: 2px solid var(--c-driftwood);
    margin-bottom: 18px;
    overflow: hidden;
}

.portrait__head {
    position: absolute;
    top: 26%; left: 50%;
    width: 52%; height: 56%;
    margin-left: -26%;
    background: var(--c-sandstone);
    border: 2px solid var(--c-driftwood);
    border-radius: 50%;
}

.portrait__hair {
    position: absolute;
    top: 8%; left: 50%;
    width: 60%; height: 36%;
    margin-left: -30%;
    border: 2px solid var(--c-driftwood);
}

.portrait__hair--a { background: var(--c-vermilion); clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%, 80% 80%, 50% 95%, 20% 80%); }
.portrait__hair--b { background: var(--c-teal);      clip-path: polygon(0 100%, 0 50%, 100% 30%, 100% 100%); }
.portrait__hair--c { background: var(--c-driftwood); clip-path: polygon(0 100%, 10% 30%, 30% 0, 70% 0, 90% 30%, 100% 100%, 70% 90%, 30% 90%); }
.portrait__hair--d { background: var(--c-pool);      clip-path: polygon(0 100%, 0 50%, 30% 0, 70% 0, 100% 50%, 100% 100%); }

.portrait__shoulder {
    position: absolute;
    bottom: -2px; left: 0;
    width: 100%; height: 22%;
    border-top: 2px solid var(--c-driftwood);
}
.portrait__shoulder--a { background: var(--c-teal); clip-path: polygon(0 100%, 14% 0, 86% 0, 100% 100%); }
.portrait__shoulder--b { background: var(--c-vermilion); clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%); }
.portrait__shoulder--c { background: var(--c-pool); clip-path: polygon(0 100%, 12% 0, 88% 0, 100% 100%); }
.portrait__shoulder--d { background: var(--c-terracotta); clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%); }

.portrait__eye {
    position: absolute;
    top: 46%;
    width: 4%; aspect-ratio: 1/1;
    background: var(--c-driftwood);
    border-radius: 50%;
}
.portrait__eye--l { left: 38%; }
.portrait__eye--r { left: 58%; }

.portrait__mouth {
    position: absolute;
    top: 60%; left: 44%;
    width: 12%; height: 4%;
    border-bottom: 2px solid var(--c-driftwood);
    border-radius: 0 0 50% 50%;
}

.editor__name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    line-height: 0.96;
    margin: 0 0 10px;
    color: var(--c-driftwood);
}

.editor__name em {
    color: var(--c-vermilion);
    font-style: italic;
}

.editor__quote {
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--c-driftwood);
}

.editor__role {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--c-mono);
}

.editor-arrow {
    width: 100%;
    max-width: 220px;
    height: 80px;
    align-self: center;
}

.editor-arrow path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 800ms ease-out;
}

.editor-arrow.is-drawn path {
    stroke-dashoffset: 0;
}

/* ---------- Workbench band ---------- */
.manifesto {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(2.6rem, 7vw, 8rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--c-bleached);
    margin: 0 0 clamp(40px, 6vw, 80px);
    max-width: 22ch;
    text-shadow: 4px 4px 0 var(--c-driftwood);
}

.manifesto em {
    font-style: italic;
    color: var(--c-coral);
    font-weight: 900;
}

.workbench {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

@media (min-width: 880px) {
    .workbench { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.workbench__illustration {
    background: var(--c-cream);
    border: 3px solid var(--c-bleached);
    padding: 16px;
    box-shadow: 10px 10px 0 var(--c-vermilion);
    transform: rotate(-2deg);
}

.process {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.process__step {
    background: var(--c-bleached);
    color: var(--c-driftwood);
    padding: 22px 26px 26px;
    border-left: 8px solid var(--c-vermilion);
    transform: skewX(-2deg);
    box-shadow: 6px 6px 0 rgba(46,38,34,0.4);
    position: relative;
}

.process__step > * { transform: skewX(2deg); }

.process__step--a { transform: skewX(-2deg) translateX(0); }
.process__step--b { transform: skewX(-2deg) translateX(28px); }
.process__step--c { transform: skewX(-2deg) translateX(56px); }

.process__num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    color: var(--c-vermilion);
    display: block;
    margin-bottom: 6px;
}

.process__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 2.8vw, 2.8rem);
    line-height: 1;
    margin: 0 0 12px;
    color: var(--c-driftwood);
}

.process__copy {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    color: var(--c-mono);
}

/* ---------- Footer band ---------- */
.footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 880px) {
    .footer {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: end;
    }
}

.footer__signoff {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 6rem);
    line-height: 0.95;
    margin: 0;
    color: var(--c-driftwood);
    grid-column: 1 / -1;
    transform: rotate(-2deg);
    transform-origin: left;
}

.footer__signoff em {
    color: var(--c-vermilion);
}

.footer__sub {
    grid-column: 1 / -1;
    background: var(--c-bleached);
    border: 2px solid var(--c-driftwood);
    padding: 22px 26px;
    box-shadow: 6px 6px 0 var(--c-terracotta);
    transform: rotate(-1deg);
    max-width: 560px;
}

.footer__label {
    display: block;
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 1.05rem;
    margin-bottom: 12px;
    color: var(--c-driftwood);
}

.footer__sub-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer__input {
    flex: 1 1 220px;
    font: inherit;
    padding: 10px 14px;
    border: 2px solid var(--c-driftwood);
    background: var(--c-bleached);
    color: var(--c-driftwood);
    border-radius: 4px;
    font-family: var(--font-body);
}

.footer__input:focus {
    outline: 0;
    border-color: var(--c-vermilion);
    box-shadow: 3px 3px 0 var(--c-vermilion);
}

.footer__btn {
    transform: rotate(-2deg);
}

.footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    transform: rotate(-2deg);
    transform-origin: left;
    font-family: var(--font-headline);
    font-size: 1.1rem;
}

.footer__links a {
    border-bottom: 2px solid var(--c-vermilion);
    padding-bottom: 2px;
    transition: color 200ms ease-out, border-color 200ms ease-out;
}

.footer__links a:hover {
    color: var(--c-vermilion);
    border-color: var(--c-driftwood);
}

.footer__mark {
    grid-column: 1 / -1;
    margin: 24px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--c-mono);
}

.footer__sun {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--c-vermilion) 0 22deg,
        var(--c-sandstone) 22deg 30deg,
        var(--c-vermilion) 30deg 52deg,
        var(--c-sandstone) 52deg 60deg,
        var(--c-vermilion) 60deg 82deg,
        var(--c-sandstone) 82deg 90deg,
        var(--c-vermilion) 90deg 112deg,
        var(--c-sandstone) 112deg 120deg,
        var(--c-vermilion) 120deg 142deg,
        var(--c-sandstone) 142deg 150deg,
        var(--c-vermilion) 150deg 172deg,
        var(--c-sandstone) 172deg 180deg,
        var(--c-vermilion) 180deg 202deg,
        var(--c-sandstone) 202deg 210deg,
        var(--c-vermilion) 210deg 232deg,
        var(--c-sandstone) 232deg 240deg,
        var(--c-vermilion) 240deg 262deg,
        var(--c-sandstone) 262deg 270deg,
        var(--c-vermilion) 270deg 292deg,
        var(--c-sandstone) 292deg 300deg,
        var(--c-vermilion) 300deg 322deg,
        var(--c-sandstone) 322deg 330deg,
        var(--c-vermilion) 330deg 352deg,
        var(--c-sandstone) 352deg 360deg
    );
    box-shadow: 0 0 0 2px var(--c-vermilion) inset;
    animation: sun-rotate 60s linear infinite;
}

/* ---------- Opening choreography (slide-in stagger) ---------- */
.band {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease-out, transform 700ms cubic-bezier(.2,.8,.2,1);
}

.band.is-loaded {
    opacity: 1;
    transform: translateY(0);
}

.band__seam {
    transform-origin: 50% 50%;
}
.band__seam:not(.seam-active) {
    /* Keep the per-band rotation but allow scale-x animation on init. */
}

/* JS will scale the seams from 0 to 1 horizontally on load */
.band__seam {
    --seam-x: 1;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .band { opacity: 1; transform: none; }
    .logotype__char { opacity: 1; transform: none; }
    .logotype__sunburst { opacity: 1; transform: none; }
    .chart-card { opacity: 1; transform: none !important; }
    .atlas__num { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    .editor-arrow path { stroke-dashoffset: 0; }
    .cursor-halo { display: none; }
}

/* ---------- Small-screen adjustments ---------- */
@media (max-width: 720px) {
    .band__num { font-size: clamp(4rem, 18vw, 8rem); }
    .atlas__num { font-size: clamp(5rem, 28vw, 10rem); }
    .band__header { grid-template-columns: 1fr; }
    .band__lede { grid-column: 1; }
    .band__retro--starburst { width: 140px; height: 140px; right: -20px; top: 8%; }
    .footer__sub { transform: none; }
    .footer__signoff { transform: rotate(-2deg); font-size: clamp(2rem, 10vw, 3.4rem); }
    .process__step--b, .process__step--c { transform: skewX(-2deg) translateX(0); }
}