:root {
    /* Intersection Observer API (NOT Scroll Event listeners) IntersectionObserver at `threshold: 0.5` */
    --font-display: "Caveat", cursive;
    --font-body: "Cormorant Garamond", Georgia, serif;
    --font-annotation: "Noto Sans JP", "Inter", sans-serif;
    --umber: #3d1e0e;
    --brown: #4a3728;
    --parchment: #f5ebe0;
    --terracotta: #c17f59;
    --copper: #a0674b;
    --gold: #c9a84c;
    --charcoal: #1c1410;
    --cream: #f0d9c4;
    --fog: #8a7e74;
    --axis: 61.8%;
    --slow: 800ms cubic-bezier(0.25, 0, 0.1, 1);
    --pulse: 1200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--parchment);
    color: var(--umber);
    font-family: var(--font-body);
    transition: background-color 1.2s ease;
}

button {
    font: inherit;
}

.patina-layer {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background:
        radial-gradient(circle at 16% 24%, #a0674b 0 2px, transparent 3px 72px),
        radial-gradient(circle at 78% 30%, #c17f59 0 1px, transparent 3px 58px),
        radial-gradient(circle at 48% 82%, #c9a84c 0 1px, transparent 2px 64px),
        repeating-linear-gradient(36deg, transparent 0 18px, rgba(61, 30, 14, 0.32) 19px 20px);
}

.golden-axis {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--axis);
    z-index: 12;
    width: 1px;
    background: rgba(193, 127, 89, 0.15);
    pointer-events: none;
}

.progress-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    width: 14px;
    pointer-events: none;
}

.progress-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    background: #c9a84c;
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.35);
}

.progress-marker {
    position: absolute;
    right: -5px;
    width: 12px;
    height: 12px;
    border: 1.5px solid #c9a84c;
    border-radius: 49% 51% 44% 56%;
    background: rgba(28, 20, 16, 0.2);
    transform: translateY(-50%);
}

.section-nav {
    position: fixed;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    z-index: 130;
    border: 1px solid rgba(193, 127, 89, 0.2);
    border-right-color: #c9a84c;
    border-bottom-color: #c9a84c;
    background: rgba(245, 235, 224, 0.72);
    color: #3d1e0e;
    cursor: pointer;
    padding: 0.65rem 0.9rem;
    text-align: right;
    backdrop-filter: blur(10px);
    animation: kintsugiPulse 8s infinite;
    transition: color var(--slow), background var(--slow), transform var(--slow);
}

body[data-tone="dark"] .section-nav {
    background: rgba(28, 20, 16, 0.72);
    color: #f0d9c4;
}

.section-nav:hover {
    transform: translateY(-3px);
    color: #c9a84c;
}

.nav-whisper,
.annotation {
    display: block;
    color: rgba(193, 127, 89, 0.6);
    font-family: var(--font-annotation);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
}

.current-section {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    letter-spacing: -0.02em;
    line-height: 1;
}

.section-index-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(28, 20, 16, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--slow);
}

.section-index-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.index-panel {
    width: min(620px, calc(100vw - 3rem));
    padding: clamp(2rem, 7vw, 5rem);
    border: 1px solid rgba(201, 168, 76, 0.35);
    background: linear-gradient(135deg, rgba(61, 30, 14, 0.7), rgba(28, 20, 16, 0.94));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.index-link {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(193, 127, 89, 0.2);
    background: transparent;
    color: #f0d9c4;
    cursor: pointer;
    padding: 0.85rem 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    transition: color var(--slow), padding-left var(--slow);
}

.index-link:hover {
    color: #c9a84c;
    padding-left: 1rem;
}

.viewport-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    align-items: center;
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity var(--slow), transform var(--pulse);
}

.viewport-section.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.light-section {
    background: #f5ebe0;
}

.dark-section {
    background: #1c1410;
}

.viewport-section::before,
.viewport-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 5vw;
    background: linear-gradient(90deg, transparent, rgba(193, 127, 89, 0.08), transparent);
    opacity: 0.03;
    animation: gutterBreath 8s ease-in-out infinite;
    pointer-events: none;
}

.viewport-section::before {
    left: 55%;
}

.viewport-section::after {
    left: 91%;
    animation-delay: -4s;
}

.section-grid {
    position: relative;
    z-index: 5;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.5fr 1fr 1fr 0.5fr;
    gap: 0 clamp(8px, 1.5vw, 24px);
    padding: clamp(2rem, 5vh, 6rem) clamp(1rem, 3vw, 4rem);
    align-items: center;
}

.content-block {
    position: relative;
    z-index: 10;
    padding: clamp(1rem, 3vw, 2.4rem);
    border-right: 1px solid rgba(201, 168, 76, 0.28);
}

.wide-copy {
    border-left: 1px solid rgba(201, 168, 76, 0.28);
    border-right: 0;
}

.annotation-block {
    align-self: start;
    padding-top: clamp(2rem, 10vh, 8rem);
}

.lower-note {
    align-self: end;
    padding-bottom: 9vh;
}

.display-title {
    margin: 0 0 1.35rem;
    color: #3d1e0e;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.light-text,
.display-title.light-text {
    color: #f0d9c4;
}

.body-text {
    color: #4a3728;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.75;
}

.body-text.light-text {
    color: #d9c4b0;
}

.annotation.light-text {
    color: rgba(240, 217, 196, 0.7);
}

.line-fragment {
    display: inline;
    opacity: 0;
    transition: opacity 900ms ease;
}

.line-fragment.visible {
    opacity: 1;
}

.city-bg {
    position: absolute;
    inset: -12vh 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(193, 127, 89, 0.75), rgba(61, 30, 14, 0.85));
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.light-section .city-bg {
    opacity: 0.28;
}

.dark-section .city-bg {
    opacity: 0.45;
}

.city-bg::before {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 8vh;
    height: 28vh;
    background:
        linear-gradient(to top, rgba(28, 20, 16, 0.8), transparent),
        linear-gradient(90deg, #1c1410 0 4%, transparent 4% 7%, #1c1410 7% 11%, transparent 11% 17%, #1c1410 17% 23%, transparent 23% 30%, #1c1410 30% 34%, transparent 34% 42%, #1c1410 42% 47%, transparent 47% 55%, #1c1410 55% 64%, transparent 64% 72%, #1c1410 72% 77%, transparent 77% 83%, #1c1410 83% 91%, transparent 91%);
    clip-path: polygon(0 58%, 6% 58%, 6% 35%, 10% 35%, 10% 64%, 16% 64%, 16% 25%, 22% 25%, 22% 70%, 30% 70%, 30% 42%, 33% 42%, 33% 20%, 35% 42%, 40% 42%, 40% 68%, 49% 68%, 49% 18%, 56% 18%, 56% 60%, 64% 60%, 64% 34%, 68% 34%, 68% 67%, 76% 67%, 76% 27%, 82% 27%, 82% 62%, 91% 62%, 91% 38%, 100% 38%, 100% 100%, 0 100%);
}

.city-bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45vh;
    background: radial-gradient(ellipse at center bottom, rgba(245, 235, 224, 0.38), transparent 62%);
}

.skyline-b {
    background: linear-gradient(180deg, #1c1410, #3d1e0e 52%, #c17f59);
}

.skyline-c {
    background: linear-gradient(180deg, #f5ebe0, #c17f59 55%, #3d1e0e);
}

.render-scene {
    position: relative;
    min-height: clamp(340px, 55vh, 620px);
    border: 1px solid rgba(193, 127, 89, 0.25);
    background:
        radial-gradient(circle at 42% 35%, rgba(240, 217, 196, 0.36), transparent 25%),
        linear-gradient(145deg, rgba(245, 235, 224, 0.18), rgba(160, 103, 75, 0.18));
    box-shadow: inset 0 0 80px rgba(61, 30, 14, 0.12), 0 36px 80px rgba(61, 30, 14, 0.22);
    perspective: 900px;
}

.dark-section .render-scene {
    background: linear-gradient(145deg, rgba(240, 217, 196, 0.08), rgba(193, 127, 89, 0.16));
}

.hero-scene {
    margin-bottom: -18vh;
}

.sun-disc {
    position: absolute;
    top: 12%;
    left: 12%;
    width: clamp(70px, 11vw, 150px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #c9a84c, rgba(201, 168, 76, 0.16) 70%);
    filter: blur(0.2px);
}

.concrete-plinth,
.raked-sand {
    position: absolute;
    left: 13%;
    right: 8%;
    bottom: 13%;
    height: 32%;
    transform: rotateX(62deg) rotateZ(-3deg);
    transform-origin: bottom center;
}

.concrete-plinth {
    background: linear-gradient(135deg, #8a7e74, #4a3728);
    box-shadow: 18px 24px 24px rgba(28, 20, 16, 0.35);
}

.raked-sand {
    bottom: 22%;
    left: 20%;
    right: 15%;
    height: 25%;
    background: repeating-linear-gradient(92deg, #f5ebe0 0 7px, #d9c4b0 8px 10px);
}

.zen-stone {
    position: absolute;
    border-radius: 55% 45% 48% 52%;
    background: linear-gradient(135deg, #4a3728, #1c1410 75%);
    box-shadow: 10px 14px 18px rgba(28, 20, 16, 0.34);
}

.stone-one {
    width: 86px;
    height: 54px;
    left: 43%;
    bottom: 31%;
}

.stone-two {
    width: 54px;
    height: 38px;
    left: 58%;
    bottom: 38%;
}

.gold-crack {
    position: absolute;
    left: 36%;
    bottom: 34%;
    width: 30%;
    height: 3px;
    background: #c9a84c;
    transform: rotate(-8deg);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
    animation: kintsugiPulse 8s infinite;
}

.tower {
    position: absolute;
    bottom: 29%;
    width: 2px;
    background: #1c1410;
    opacity: 0.62;
}

.tower::before,
.tower::after {
    content: "";
    position: absolute;
    left: -20px;
    width: 42px;
    height: 1px;
    background: #1c1410;
}

.tower::before { top: 22%; transform: rotate(18deg); }
.tower::after { top: 45%; transform: rotate(-16deg); }
.tower-one { right: 16%; height: 35%; }
.tower-two { right: 25%; height: 24%; }

.glass-slab {
    position: absolute;
    bottom: 15%;
    width: 28%;
    height: 70%;
    border: 1px solid rgba(240, 217, 196, 0.18);
    background: linear-gradient(100deg, rgba(245, 235, 224, 0.05), rgba(193, 127, 89, 0.16));
}

.slab-one { left: 8%; transform: skewY(-7deg); }
.slab-two { right: 9%; transform: skewY(5deg); }

.bell-frame {
    position: absolute;
    left: 23%;
    right: 23%;
    top: 24%;
    height: 4px;
    background: #c9a84c;
}

.bronze-bell {
    position: absolute;
    left: 38%;
    top: 30%;
    width: 25%;
    height: 34%;
    border-radius: 45% 45% 18% 18%;
    background: radial-gradient(circle at 35% 24%, #c9a84c, #a0674b 36%, #3d1e0e 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
}

.bell-rope {
    position: absolute;
    left: 50%;
    top: 24%;
    width: 2px;
    height: 62%;
    background: rgba(240, 217, 196, 0.5);
}

.material-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.material-tile {
    min-height: 130px;
    display: flex;
    align-items: end;
    padding: 1rem;
    border: 1px solid rgba(61, 30, 14, 0.18);
    color: #f0d9c4;
    font-family: var(--font-annotation);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
    transition: transform var(--slow), box-shadow var(--slow);
}

.material-tile:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 38px rgba(61, 30, 14, 0.18);
}

.umber { background: #3d1e0e; }
.parchment { background: #f5ebe0; color: #3d1e0e; }
.terracotta { background: #c17f59; }
.copper { background: #a0674b; }
.gold { background: #c9a84c; color: #3d1e0e; animation: kintsugiPulse 8s infinite; }
.charcoal { background: #1c1410; }

.axis-diagram {
    position: relative;
    min-height: 58vh;
    border: 1px solid rgba(193, 127, 89, 0.18);
    background: repeating-linear-gradient(90deg, transparent 0 11.11%, rgba(193, 127, 89, 0.07) 11.2% 11.4%);
}

.axis-gold {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 61.8%;
    width: 2px;
    background: #c9a84c;
    animation: kintsugiPulse 8s infinite;
}

.path-stone {
    position: absolute;
    width: clamp(52px, 7vw, 96px);
    height: clamp(34px, 4vw, 58px);
    border-radius: 55% 45% 50% 50%;
    background: linear-gradient(135deg, #8a7e74, #3d1e0e);
}

.p1 { left: 12%; top: 17%; }
.p2 { left: 55%; top: 32%; }
.p3 { left: 34%; top: 58%; }
.p4 { left: 70%; top: 72%; }

.type-specimen {
    padding: clamp(1.25rem, 4vw, 3rem);
    border-left: 1px solid #c9a84c;
    background: rgba(240, 217, 196, 0.24);
}

.specimen-display {
    color: #3d1e0e;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
}

.specimen-body {
    margin: 1.3rem 0;
    color: #4a3728;
    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1.75;
}

.torii-scene { min-height: 62vh; }
.alley-wall {
    position: absolute;
    top: 8%;
    bottom: 0;
    width: 35%;
    background: repeating-linear-gradient(0deg, #a0674b 0 22px, #3d1e0e 23px 24px);
    opacity: 0.7;
}
.left-wall { left: 0; transform: skewY(7deg); }
.right-wall { right: 0; transform: skewY(-7deg); }
.torii-post,
.torii-beam {
    position: absolute;
    background: linear-gradient(90deg, #a0674b, #c17f59, #3d1e0e);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}
.torii-post { bottom: 18%; width: 8%; height: 48%; }
.post-left { left: 36%; }
.post-right { right: 36%; }
.torii-beam { left: 25%; right: 25%; top: 26%; height: 8%; }
.moss-base {
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 12%;
    height: 7%;
    background: linear-gradient(90deg, #4a3728, #8a7e74, #4a3728);
    border-radius: 50%;
}

.enso-divider {
    position: relative;
    height: 240px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(193, 127, 89, 0.03), rgba(193, 127, 89, 0.08), rgba(193, 127, 89, 0.03));
}

.enso-svg {
    width: clamp(80px, 15vw, 160px);
    height: clamp(80px, 15vw, 160px);
    overflow: visible;
}

.enso-path {
    fill: none;
    stroke: #c9a84c;
    stroke-linecap: round;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 7px rgba(201, 168, 76, 0.35));
}

@keyframes gutterBreath {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.08; }
}

@keyframes kintsugiPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(201, 168, 76, 0); }
    50% { box-shadow: 0 0 12px rgba(201, 168, 76, 0.3); }
}

@media (max-width: 1024px) {
    :root { --axis: 70%; }

    .section-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .content-block,
    .annotation-block,
    .render-scene,
    .material-board,
    .axis-diagram,
    .type-specimen {
        grid-column: 1 / -1 !important;
    }

    .hero-scene {
        margin-bottom: 0;
        order: 2;
    }

    .content-block:nth-child(odd) {
        padding-left: 4vw;
        padding-right: 8vw;
    }

    .content-block:nth-child(even) {
        padding-left: 8vw;
        padding-right: 4vw;
    }
}

@media (max-width: 768px) {
    .section-grid {
        padding: clamp(1.25rem, 4vh, 2.5rem) 4vw;
    }

    .golden-axis {
        left: 70%;
    }

    .render-scene,
    .axis-diagram {
        min-height: 42vh;
    }

    .material-board {
        grid-template-columns: 1fr 1fr;
    }

    .section-nav {
        right: 1rem;
        bottom: 1rem;
    }

    .enso-divider {
        height: 150px;
    }
}

@media (max-width: 520px) {
    .golden-axis {
        opacity: 0.45;
    }

    .display-title {
        font-size: clamp(2.4rem, 16vw, 4rem);
    }

    .material-board {
        grid-template-columns: 1fr;
    }

    .annotation-block {
        padding-top: 1rem;
    }

    .progress-marker {
        right: -3px;
        width: 9px;
        height: 9px;
    }
}