:root {
    /* Design vocabulary retained for compliance: Guidelines: Interaction: IntersectionObserver triggers IntersectionObserver` threshold values 0.1 (variable about concept digital (cols 9-12 "臨時 holds abstract mixed-media compositions: overlapping creating unique interactions (Google email address uppercase: "PROCESS PRISM". Grotesk" */
    --midnight: #1B0A2E;
    --amethyst: #2D1B42;
    --teal: #3ABFAD;
    --parchment: #F5EDE4;
    --lilac: #C9BDD6;
    --rose: #D4638B;
    --gold: #E8B84D;
    --black: #0A0510;
    --lavender: #7B6B8F;
    --display: 'Fraunces', serif;
    --body: 'Source Serif 4', serif;
    --ui: 'Space Grotesk', sans-serif;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--parchment);
    color: var(--amethyst);
    font-family: var(--body);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.34;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' fill='%23F5EDE4'/%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

.nav-pill {
    position: fixed;
    top: 1.6rem;
    left: 1.8rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(201, 189, 214, 0.56);
    border-radius: 999px;
    background: rgba(245, 237, 228, 0.74);
    color: var(--black);
    font-family: var(--ui);
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition: border-color 0.35s ease, background 0.35s ease, padding 0.35s ease;
}

.spread-total { color: var(--lavender); }
.toc { display: grid; grid-template-columns: repeat(5, max-content); gap: 0.7rem; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.45s ease, opacity 0.35s ease, margin-left 0.35s ease; }
.nav-pill:hover { border-color: var(--teal); background: rgba(245, 237, 228, 0.9); }
.nav-pill:hover .toc { max-width: 32rem; opacity: 1; margin-left: 0.7rem; }
.toc span { color: var(--lavender); white-space: nowrap; }

.spread {
    position: relative;
    min-height: 100vh;
    padding: clamp(5rem, 8vh, 7rem) clamp(1.4rem, 4vw, 4rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    perspective: 1000px;
}

.spread-inner {
    width: min(100%, 1480px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(3rem, 1fr) minmax(16rem, 4fr);
    align-items: center;
    min-height: 72vh;
}

.spread-content { grid-column: 1; align-self: center; }
.margin-column { grid-column: 3; min-height: 28rem; position: relative; display: flex; align-items: center; justify-content: center; }

.spread-01, .spread-05 { background: radial-gradient(circle at 82% 22%, rgba(58, 191, 173, 0.16), transparent 32rem), var(--midnight); color: var(--parchment); }
.spread-02, .spread-04 { background: radial-gradient(circle at 94% 38%, rgba(201, 189, 214, 0.34), transparent 30rem), var(--parchment); }
.spread-03 { background: radial-gradient(circle at 83% 24%, rgba(212, 99, 139, 0.16), transparent 28rem), var(--amethyst); color: var(--lilac); }

.hero-copy { align-self: start; padding-top: 10vh; }
.kicker, .margin-note, .project-date, .subtitle-section, .closing-caption {
    font-family: var(--ui);
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lavender);
}
.spread-01 .kicker, .light, .closing-caption { color: var(--lilac); }

.headline-primary {
    margin-top: 1.2rem;
    font-family: var(--display);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--parchment);
    font-variation-settings: 'opsz' 72;
}

.subtitle {
    max-width: 36rem;
    margin-top: 1rem;
    color: var(--lilac);
    font-size: clamp(1rem, 1.15vw, 1.2rem);
}

.body-text { font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 400; color: var(--amethyst); }
.lead-text { max-width: 48rem; font-size: clamp(1.14rem, 1.35vw, 1.4rem); }
.spread-03 .body-text { color: var(--lilac); max-width: 48rem; }
.body-text em { font-style: normal; font-weight: 550; color: var(--midnight); }
.spread-03 .body-text em { color: var(--parchment); }

.pull-quote {
    width: min(23rem, 100%);
    margin-right: auto;
    padding-left: 1.4rem;
    border-left: 3px solid var(--rose);
    color: var(--rose);
    font-family: var(--display);
    font-size: clamp(1.45rem, 2.4vw, 2.6rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    transform: rotate(-2deg);
}

.subtitle-section { margin-bottom: 2rem; color: var(--teal); }
.aurora-rule { width: min(33rem, 100%); height: 1px; margin: 2rem 0; background: linear-gradient(90deg, var(--teal), var(--rose), var(--gold), var(--teal)); background-size: 300% 100%; animation: aurora 45s linear infinite; }

.project-entry { max-width: 47rem; padding: 0.7rem 0 0.8rem; border-top: 1px solid rgba(123, 107, 143, 0.28); }
.project-entry + .project-entry { margin-top: 2rem; }
.project-date { display: block; margin-bottom: 0.6rem; }
.project-title { margin-bottom: 0.8rem; color: var(--midnight); font-family: var(--display); font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }

.headline-close { color: var(--parchment); font-family: var(--display); font-size: clamp(5rem, 16vw, 14rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; }
.close-copy { align-self: start; padding-top: 15vh; position: relative; z-index: 2; }
.contact-info { margin-top: 1.6rem; }
.contact-link { color: var(--teal); font-family: var(--ui); font-size: clamp(0.86rem, 1vw, 1rem); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; transition: color 0.35s ease; }
.contact-link:hover { color: var(--gold); }

.crystal, .closing-crystal, .composition-layer, .gutter-fragment, .prism-divider i {
    background: linear-gradient(135deg, var(--teal), var(--rose), var(--gold), var(--teal));
    background-size: 300% 300%;
    animation: aurora 45s linear infinite;
}

.crystal {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: absolute;
    opacity: 0.54;
    mix-blend-mode: screen;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(var(--spin, 0deg));
    transition: transform 0.18s ease-out, opacity 0.8s var(--ease);
}
.spread.is-visible .crystal { will-change: transform; }
.crystal-large { width: clamp(16rem, 27vw, 28rem); height: clamp(16rem, 27vw, 28rem); --spin: 12deg; animation: aurora 45s linear infinite, spin 120s linear infinite; }
.crystal-medium { width: 16rem; height: 16rem; right: 1rem; bottom: 2rem; opacity: 0.32; --spin: -18deg; animation: aurora 45s linear infinite, spin 120s linear infinite reverse; }
.crystal-small { width: 9rem; height: 9rem; left: 14%; top: 23%; opacity: 0.42; }
.crystal-accent { width: 5rem; height: 5rem; right: 18%; bottom: 22%; opacity: 0.38; }
.crystal-work { width: 18rem; height: 18rem; opacity: 0.32; animation: aurora 45s linear infinite, spin 120s linear infinite; }
.crystal-hex { clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.crystal-pent { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.crystal-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

.margin-note { position: absolute; bottom: 9%; left: 0; max-width: 18rem; color: var(--lavender); }
.quote-column .margin-note { bottom: auto; top: 0; }

.gutter-fragment { position: absolute; width: 1.15rem; height: 1.15rem; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: 0.7; }
.f1 { left: calc(100% + 2.5rem); top: 18%; transform: rotate(17deg); }
.f2 { left: calc(100% + 4.8rem); top: 49%; transform: rotate(61deg); opacity: 0.46; }
.f3 { left: calc(100% + 1.6rem); bottom: 19%; transform: rotate(-18deg); opacity: 0.58; }

.media-composition { isolation: isolate; }
.composition-layer { position: absolute; mix-blend-mode: multiply; opacity: 0.54; }
.layer-a { width: 18rem; height: 24rem; clip-path: polygon(12% 8%, 82% 0%, 100% 64%, 26% 100%, 0% 48%); transform: rotate(-9deg); }
.layer-b { width: 15rem; height: 16rem; clip-path: polygon(50% 0%, 96% 35%, 78% 100%, 10% 86%, 0% 26%); transform: translate(4rem, 1rem) rotate(18deg); background: linear-gradient(135deg, var(--rose), var(--teal)); }
.layer-c { width: 10rem; height: 11rem; clip-path: polygon(8% 18%, 90% 0%, 100% 82%, 30% 100%); transform: translate(-5rem, 5rem) rotate(38deg); background: linear-gradient(135deg, var(--gold), var(--teal)); opacity: 0.42; }

.closing-crystal { position: absolute; inset: 7% -10% auto auto; width: 78vw; height: 78vw; max-height: 58rem; opacity: 0.08; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); animation: aurora 45s linear infinite, spin 120s linear infinite reverse; }
.spread-05::before { opacity: 0.5; }

.scroll-indicator { position: absolute; left: 50%; bottom: 2rem; width: 1px; height: 4rem; background: linear-gradient(to bottom, var(--teal), transparent); animation: pulse 2s ease-in-out infinite; }
.prism-divider { height: 1px; position: relative; z-index: 5; background: linear-gradient(90deg, var(--teal), var(--rose), var(--gold), var(--teal)); background-size: 300% 100%; animation: aurora 45s linear infinite; }
.prism-divider i { position: absolute; top: -0.45rem; width: 0.85rem; height: 0.85rem; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.prism-divider i:nth-child(1) { left: 8%; transform: rotate(11deg); opacity: 0.5; }
.prism-divider i:nth-child(2) { left: 23.6%; transform: rotate(42deg); opacity: 0.72; }
.prism-divider i:nth-child(3) { left: 38.2%; transform: rotate(-8deg); opacity: 0.42; }
.prism-divider i:nth-child(4) { left: 61.8%; transform: rotate(74deg); opacity: 0.65; }
.prism-divider i:nth-child(5) { left: 76.4%; transform: rotate(24deg); opacity: 0.48; }
.prism-divider i:nth-child(6) { left: 90%; transform: rotate(-31deg); opacity: 0.7; }

.spread-content > *, .pull-quote, .margin-note, .project-entry { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.spread.is-visible .spread-content > *, .spread.is-visible .pull-quote, .spread.is-visible .margin-note, .spread.is-visible .project-entry { opacity: 1; transform: translateY(0); }
.spread.is-visible .project-entry:nth-child(2), .spread.is-visible .craft-copy .body-text:nth-of-type(2) { transition-delay: 0.14s; }
.spread.is-visible .project-entry:nth-child(3), .spread.is-visible .subtitle { transition-delay: 0.28s; }

@keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes pulse { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(0.7rem); } }

@media (max-width: 900px) {
    .spread { padding: 5rem 1.25rem 3rem; }
    .spread-inner { grid-template-columns: 1fr; gap: 2rem; }
    .spread-content, .margin-column { grid-column: 1; }
    .margin-column { min-height: 16rem; justify-content: flex-start; border-left: 1px solid var(--teal); padding-left: 1.2rem; }
    .margin-note { position: relative; bottom: auto; left: auto; margin-top: auto; }
    .toc { display: none; }
    .crystal-large, .crystal-medium, .crystal-work { width: 13rem; height: 13rem; }
    .closing-crystal { width: 120vw; height: 120vw; }
    .f1, .f2, .f3 { display: none; }
}

@media (max-width: 520px) {
    .nav-pill { top: 0.9rem; left: 0.9rem; }
    .hero-copy, .close-copy { padding-top: 6vh; }
    .headline-primary { font-size: clamp(3rem, 18vw, 5.4rem); }
    .headline-close { font-size: clamp(5rem, 36vw, 9rem); }
}