/* ==========================================================================
   hangul.day v2 -- vaporwave diagonal monument
   Palette:
     #FF71CE magenta primary
     #01CDFE cyan secondary
     #B967FF lavender tertiary
     #FFFB96 lemon accent
     #05FFA1 mint accent
     #0A0118 deep void
     #FFF8F0 cream paper
   Fonts: Black Han Sans (Korean), Space Mono (UI), Inter (body)
   ========================================================================== */

:root {
    --magenta: #FF71CE;
    --cyan: #01CDFE;
    --lavender: #B967FF;
    --lemon: #FFFB96;
    --mint: #05FFA1;
    --void: #0A0118;
    --cream: #FFF8F0;

    --seam-angle: -8deg;
    --seam-tan: 0.1405;        /* tan(-8deg) ~ -0.1405, used as positive offset */
    --band-pad: clamp(2rem, 5vw, 6rem);

    --font-ko: 'Black Han Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;
    --font-sans: 'Inter', system-ui, sans-serif;
}

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

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--void);
    color: var(--void);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#monument {
    position: relative;
    width: 100%;
}

/* ==========================================================================
   BANDS -- shared
   ========================================================================== */
.band {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    padding: var(--band-pad);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.band-jamo {
    min-height: 90vh;
}

/* Band background diagonal split (used by hero + footer) */
.band-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

.band-bg-magenta {
    background: var(--magenta);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 58%);
}
.band-bg-cyan {
    background: var(--cyan);
    clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%);
}

/* ==========================================================================
   HERO BAND
   ========================================================================== */
.band-hero {
    min-height: 100vh;
    color: var(--void);
}

.hero-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    font-family: var(--font-ko);
    font-size: clamp(20rem, 50vw, 50rem);
    line-height: 0.85;
    color: var(--void);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.05em;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
    color: var(--void);
}

.hero-title {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(2.4rem, 7vw, 5.5rem);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--void);
    margin-bottom: 1.4rem;
    text-shadow: 0 0 24px rgba(255, 251, 150, 0.4);
}

.hero-cursor {
    display: inline-block;
    color: var(--lemon);
    animation: blinkCursor 1s steps(2, end) infinite;
    margin-left: 0.05em;
}

@keyframes blinkCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-sub {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cream);
    background: var(--void);
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: 2rem;
}

.hero-lede {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--void);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.55;
    font-weight: 500;
}

.scroll-pill {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 5;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--void);
    background: var(--lemon);
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid var(--void);
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: scrollPulse 2.4s ease-in-out infinite;
}

.scroll-pill:hover {
    transform: translateY(4px) scale(1.05);
    background: var(--mint);
}

.scroll-pill-arrow {
    display: inline-block;
    transform: translateY(1px);
    margin-left: 0.3rem;
}

@keyframes scrollPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ==========================================================================
   JAMO BANDS -- diagonal stage with one big consonant per band
   ========================================================================== */
.band-jamo {
    position: relative;
}

/* Style A: magenta over lavender */
.band-style-a {
    background: var(--magenta);
}
.band-style-a::before,
.band-style-a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.band-style-a::before {
    background: var(--lavender);
    clip-path: polygon(0 62%, 100% 38%, 100% 100%, 0 100%);
}
.band-style-a .jamo-glyph { color: var(--void); }
.band-style-a .jamo-meta-name { color: var(--void); }
.band-style-a .jamo-meta-roman { color: var(--cream); }
.band-style-a .jamo-meta-ipa { color: var(--lemon); }
.band-style-a .jamo-meta-num { color: var(--mint); }
.band-style-a .jamo-meta-word .word-ko { color: var(--void); }
.band-style-a .jamo-meta-word .word-roman { color: var(--cream); }
.band-style-a .jamo-meta-word .word-meaning { color: var(--cream); }

/* Style B: cyan over void */
.band-style-b {
    background: var(--cyan);
}
.band-style-b::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--void);
    clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%);
}
.band-style-b .jamo-glyph { color: var(--void); }
.band-style-b .jamo-meta-name { color: var(--void); }
.band-style-b .jamo-meta-roman { color: var(--magenta); }
.band-style-b .jamo-meta-ipa { color: var(--cream); }
.band-style-b .jamo-meta-num { color: var(--lemon); }
.band-style-b .jamo-meta-word .word-ko { color: var(--cream); }
.band-style-b .jamo-meta-word .word-roman { color: var(--lemon); }
.band-style-b .jamo-meta-word .word-meaning { color: var(--cream); }

/* Style C: lemon over mint */
.band-style-c {
    background: var(--lemon);
}
.band-style-c::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--mint);
    clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%);
}
.band-style-c .jamo-glyph { color: var(--void); }
.band-style-c .jamo-meta-name { color: var(--void); }
.band-style-c .jamo-meta-roman { color: var(--magenta); }
.band-style-c .jamo-meta-ipa { color: var(--lavender); }
.band-style-c .jamo-meta-num { color: var(--cyan); }
.band-style-c .jamo-meta-word .word-ko { color: var(--void); }
.band-style-c .jamo-meta-word .word-roman { color: var(--magenta); }
.band-style-c .jamo-meta-word .word-meaning { color: var(--void); }

/* Style D: lavender over magenta */
.band-style-d {
    background: var(--lavender);
}
.band-style-d::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--magenta);
    clip-path: polygon(0 62%, 100% 38%, 100% 100%, 0 100%);
}
.band-style-d .jamo-glyph { color: var(--cream); }
.band-style-d .jamo-meta-name { color: var(--lemon); }
.band-style-d .jamo-meta-roman { color: var(--cream); }
.band-style-d .jamo-meta-ipa { color: var(--mint); }
.band-style-d .jamo-meta-num { color: var(--cream); }
.band-style-d .jamo-meta-word .word-ko { color: var(--cream); }
.band-style-d .jamo-meta-word .word-roman { color: var(--lemon); }
.band-style-d .jamo-meta-word .word-meaning { color: var(--mint); }

.jamo-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: 84rem;
    margin: 0 auto;
    width: 100%;
}

.jamo-glyph {
    font-family: var(--font-ko);
    font-size: clamp(10rem, 22vw, 22rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    text-align: center;
    transform-origin: center center;
    will-change: transform, opacity;
    opacity: 0;
    transform: scale(0.5) translateY(40px);
    transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 700ms ease-out;
    text-shadow: 0 8px 32px rgba(10, 1, 24, 0.18);
}

.band.in-view .jamo-glyph {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.band.in-view .jamo-glyph.tilted {
    /* tilt overrides set inline by JS via CSS variable --tx */
}

.jamo-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--font-mono);
}

.jamo-meta-row {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.band.in-view .jamo-meta-row {
    opacity: 1;
    transform: translateY(0);
}

.band.in-view .jamo-meta-row:nth-child(1) { transition-delay: 200ms; }
.band.in-view .jamo-meta-row:nth-child(2) { transition-delay: 280ms; }
.band.in-view .jamo-meta-row:nth-child(3) { transition-delay: 360ms; }
.band.in-view .jamo-meta-row:nth-child(4) { transition-delay: 440ms; }
.band.in-view .jamo-meta-row:nth-child(5) { transition-delay: 520ms; }

.jamo-meta-name {
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.jamo-meta-roman {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.jamo-meta-ipa {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.jamo-meta-word {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.jamo-meta-word .word-ko {
    font-family: var(--font-ko);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1;
}
.jamo-meta-word .word-roman {
    font-size: 0.85rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.jamo-meta-word .word-meaning {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    font-style: italic;
}

.jamo-meta-num {
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* ==========================================================================
   COMPOSITION BAND
   ========================================================================== */
.band-composition {
    background: var(--void);
    color: var(--cream);
    min-height: 110vh;
    padding-top: clamp(4rem, 8vw, 8rem);
}

.band-composition::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--lavender);
    clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0 100%);
}

.comp-header {
    position: relative;
    z-index: 2;
    max-width: 60rem;
    margin: 0 auto 4rem auto;
    text-align: center;
}

.comp-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 1.2rem;
}

.comp-title {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lemon);
    margin-bottom: 1rem;
}

.comp-lede {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: var(--cream);
    max-width: 42rem;
    margin: 0 auto;
}

.comp-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(0.8rem, 2vw, 2rem);
    max-width: 90rem;
    margin: 0 auto;
    width: 100%;
}

.comp-blob {
    position: relative;
    border: none;
    background: var(--magenta);
    cursor: pointer;
    aspect-ratio: 1;
    border-radius: 42% 58% 56% 44% / 50% 46% 54% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-radius 600ms ease-in-out, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), background 250ms ease-out;
    overflow: hidden;
    will-change: border-radius, transform;
    animation: blobMorph 10s ease-in-out infinite;
}

.comp-blob:nth-child(2) { background: var(--cyan); animation-delay: -2s; }
.comp-blob:nth-child(3) { background: var(--lemon); animation-delay: -4s; }
.comp-blob:nth-child(4) { background: var(--mint); animation-delay: -6s; }
.comp-blob:nth-child(5) { background: var(--lavender); animation-delay: -8s; }

@keyframes blobMorph {
    0%, 100% { border-radius: 42% 58% 56% 44% / 50% 46% 54% 50%; }
    25% { border-radius: 58% 42% 44% 56% / 46% 54% 50% 50%; }
    50% { border-radius: 50% 50% 60% 40% / 56% 44% 50% 50%; }
    75% { border-radius: 44% 56% 50% 50% / 50% 60% 40% 50%; }
}

.comp-blob:hover {
    transform: scale(1.06) rotate(-4deg);
    background: var(--lemon);
}

.comp-blob-glyph {
    font-family: var(--font-ko);
    font-size: clamp(3rem, 6vw, 6rem);
    color: var(--void);
    pointer-events: none;
    line-height: 1;
}

.comp-blob.split {
    transform: scale(0.92);
}
.comp-blob.split .comp-blob-glyph {
    opacity: 0;
}

.comp-blob-decomp {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font-ko);
    font-size: clamp(2rem, 4vw, 4rem);
    color: var(--void);
    line-height: 1;
    opacity: 0;
    transition: opacity 200ms ease-out 100ms;
    pointer-events: none;
}
.comp-blob.split .comp-blob-decomp {
    opacity: 1;
}
.comp-blob-decomp small {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* ==========================================================================
   HISTORY BAND
   ========================================================================== */
.band-history {
    background: var(--cream);
    color: var(--void);
    min-height: 90vh;
    padding-top: clamp(4rem, 8vw, 8rem);
}

.band-history::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--cyan);
    clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%);
}

.hist-header {
    position: relative;
    z-index: 2;
    max-width: 60rem;
    margin: 0 auto 4rem auto;
    text-align: center;
}

.hist-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: 1.2rem;
}

.hist-title {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--void);
}

.hist-track {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    height: 14rem;
    transform: skewY(-2deg);
}

.hist-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--magenta), var(--lavender), var(--cyan), var(--mint));
    transform: translateY(-50%);
}

.hist-point {
    position: absolute;
    top: 50%;
    left: var(--p);
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.hist-point-blob {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--void);
    border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease-out;
    animation: blobMorph 8s ease-in-out infinite;
    animation-delay: calc(var(--p) * -0.05s);
}

.hist-point:hover .hist-point-blob {
    transform: scale(1.6);
    background: var(--magenta);
}

.hist-point-year {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--void);
    text-transform: uppercase;
    transform: skewY(2deg);
}

.hist-point.active .hist-point-blob {
    background: var(--magenta);
    transform: scale(1.4);
}

.hist-readout {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 4rem auto 0 auto;
    max-width: 50rem;
}

.hist-readout-year {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--magenta);
    letter-spacing: 0.16em;
}

.hist-readout-event {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--void);
    margin-top: 0.6rem;
    font-weight: 500;
}

/* ==========================================================================
   FOOTER BAND
   ========================================================================== */
.band-footer {
    min-height: 50vh;
    color: var(--cream);
}

.footer-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 50rem;
    margin: 0 auto;
}

.footer-quote {
    font-family: var(--font-ko);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    color: var(--void);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.footer-quote-en {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    color: var(--cream);
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

.footer-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    color: var(--cream);
    text-transform: uppercase;
    opacity: 0.85;
}

/* ==========================================================================
   BLOBS (SVG) and ABSTRACT SHAPES
   ========================================================================== */
.blob {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    z-index: -1;
    opacity: 0.32;
    pointer-events: none;
    will-change: transform;
}
.blob-path {
    fill: var(--lemon);
    transition: fill 600ms ease-out;
}

.band-style-a .blob-path { fill: var(--lemon); }
.band-style-b .blob-path { fill: var(--magenta); }
.band-style-c .blob-path { fill: var(--lavender); }
.band-style-d .blob-path { fill: var(--cyan); }
.band-composition .blob-path { fill: var(--magenta); opacity: 0.6; }
.band-history .blob-path { fill: var(--lemon); }

.blob-hero { width: 60%; height: 60%; top: 20%; left: 20%; }
.blob-jamo { opacity: 0.32; }
.blob-comp { width: 80%; height: 80%; top: 10%; left: 10%; opacity: 0.5; }
.blob-hist { width: 60%; height: 60%; top: 25%; left: 30%; opacity: 0.45; }

.band-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    will-change: transform;
}

.shape-circle {
    width: clamp(8rem, 16vw, 16rem);
    height: clamp(8rem, 16vw, 16rem);
    background: var(--cream);
    border-radius: 50%;
    top: 12%;
    right: 8%;
    mix-blend-mode: overlay;
}

.band-style-a .shape-circle { background: var(--lemon); }
.band-style-b .shape-circle { background: var(--lemon); }
.band-style-c .shape-circle { background: var(--lavender); }
.band-style-d .shape-circle { background: var(--mint); }
.band-composition .shape-circle { background: var(--cyan); opacity: 0.25; }
.band-history .shape-circle { background: var(--magenta); opacity: 0.25; }
.band-hero .shape-circle { background: var(--lemon); }

.shape-tri {
    width: 0;
    height: 0;
    border-left: clamp(4rem, 8vw, 8rem) solid transparent;
    border-right: clamp(4rem, 8vw, 8rem) solid transparent;
    border-bottom: clamp(7rem, 14vw, 14rem) solid var(--mint);
    bottom: 12%;
    left: 6%;
    opacity: 0.4;
    transform: rotate(-12deg);
}

.band-style-a .shape-tri { border-bottom-color: var(--cyan); }
.band-style-b .shape-tri { border-bottom-color: var(--lemon); }
.band-style-c .shape-tri { border-bottom-color: var(--magenta); }
.band-style-d .shape-tri { border-bottom-color: var(--lemon); }
.band-composition .shape-tri { border-bottom-color: var(--lemon); opacity: 0.3; }
.band-history .shape-tri { border-bottom-color: var(--lavender); opacity: 0.3; }
.band-hero .shape-tri { border-bottom-color: var(--mint); }

.shape-hero-1 { top: 18%; right: 12%; }
.shape-hero-2 { bottom: 18%; left: 8%; }

/* ==========================================================================
   GLOBAL DIAGONAL SEAM OVERLAY (purely decorative hairline)
   ========================================================================== */
.seam-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.3;
}
.seam-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.seam-line {
    stroke: var(--void);
    stroke-width: 0.15;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 6 8;
    animation: seamCrawl 12s linear infinite;
}
@keyframes seamCrawl {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -28; }
}

/* ==========================================================================
   DOT NAV
   ========================================================================== */
.dot-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.dot {
    display: block;
    width: 1rem;
    height: 1rem;
    text-decoration: none;
    position: relative;
}

.dot-mark {
    position: absolute;
    inset: 0.18rem;
    background: var(--cream);
    border: 1.5px solid var(--void);
    border-radius: 50%;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease-out;
}

.dot-active .dot-mark,
.dot:hover .dot-mark {
    background: var(--magenta);
    transform: scale(1.6);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
    .jamo-stage {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .jamo-meta {
        align-items: center;
    }
    .jamo-meta-word {
        justify-content: center;
    }
    .comp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dot-nav { right: 0.6rem; }
    .scroll-pill { right: 1rem; bottom: 1.2rem; }
    .hist-track { height: 10rem; }
    .hist-point-year { font-size: 0.6rem; }
}

@media (max-width: 540px) {
    .comp-grid {
        grid-template-columns: 1fr;
    }
    .hero-watermark {
        font-size: clamp(14rem, 80vw, 30rem);
    }
}