:root {
    --paper: #f2e8d5;
    --parchment: #e6d4b8;
    --ink: #3b2a1a;
    --persimmon: #c7652a;
    --vermillion: #c23b22;
    --timber: #8a7a6b;
    --slate: #4a5568;
    --golden: #e8a84c;
    --foxing: #c9b896;
    --turned: #e0ccb0;
    --wood: #a08e7a;
    --body-ink: #5a4636;
    --label: #9a7e5f;
    --serif: "Cormorant Garamond", serif;
    --sans: "Barlow Condensed", "Inter", sans-serif;
    --cjk: "Zen Kaku Gothic New", sans-serif;
    --design-token: "IntersectionObserver`.";
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(59, 42, 26, 0.18), transparent 12%, transparent 88%, rgba(74, 85, 104, 0.10)),
        radial-gradient(circle at 18% 12%, rgba(232, 168, 76, 0.12), transparent 28%),
        radial-gradient(circle at 72% 88%, rgba(59, 42, 26, 0.10), transparent 34%);
    mix-blend-mode: multiply;
}

.scroll-container {
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior: none;
    cursor: grab;
}

.scroll-container.dragging { cursor: grabbing; }
.scroll-container::-webkit-scrollbar { display: none; }

.manuscript-scroll {
    display: flex;
    width: max-content;
    height: 100vh;
    transform: translateZ(0);
}

.panel {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 8vh 6vw;
    background:
        radial-gradient(ellipse at 16% 22%, rgba(201, 184, 150, 0.12) 0 12%, transparent 36%),
        radial-gradient(ellipse at 70% 66%, rgba(201, 184, 150, 0.10) 0 14%, transparent 38%),
        var(--paper);
    box-shadow: inset 0 0 120px rgba(59, 42, 26, 0.15), inset 0 0 40px rgba(59, 42, 26, 0.05);
    border-right: 1px solid rgba(138, 122, 107, 0.16);
    transform: translateX(var(--resist, 0px));
}

.panel::after {
    content: "";
    position: absolute;
    top: 4vh;
    right: -8px;
    width: 18px;
    height: 92vh;
    background: linear-gradient(180deg, transparent, rgba(138, 122, 107, 0.30) 18%, rgba(59, 42, 26, 0.18) 52%, rgba(138, 122, 107, 0.30) 82%, transparent);
    filter: blur(4px);
    opacity: 0.65;
}

.paper-grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.65;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"),
        repeating-linear-gradient(92deg, rgba(59, 42, 26, 0.025) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(0deg, rgba(242, 232, 213, 0.06) 0 2px, transparent 2px 9px);
    mix-blend-mode: multiply;
}

.binding-stitches {
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 4;
    opacity: 0.55;
    background:
        repeating-linear-gradient(180deg, transparent 0 18px, rgba(199, 101, 42, 0.42) 18px 20px, transparent 20px 24px),
        repeating-linear-gradient(45deg, transparent 0 17px, rgba(199, 101, 42, 0.42) 17px 19px, transparent 19px 24px),
        repeating-linear-gradient(-45deg, transparent 0 17px, rgba(199, 101, 42, 0.42) 17px 19px, transparent 19px 24px);
}

.panel-content {
    position: relative;
    z-index: 10;
    max-width: 760px;
    transform: translateZ(0) translateY(24px) scale(0.985);
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 900ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.panel.in-view .panel-content {
    opacity: 1;
    transform: translateZ(0) translateY(0) scale(1);
}

.eyebrow,
.kanji-label,
.attribution,
.scroll-cue,
.jump-menu button {
    font-family: var(--cjk);
    color: var(--label);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

h1,
h2,
blockquote {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 1.1;
}

h1 { font-size: clamp(4rem, 10vw, 8rem); text-transform: lowercase; }
h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }

p {
    color: var(--body-ink);
    font-family: var(--sans);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    hyphens: auto;
}

.lead {
    max-width: 520px;
    margin-top: 1.35rem;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.panel-gate {
    background:
        radial-gradient(circle at 18% 20%, rgba(232, 168, 76, 0.14), transparent 26%),
        radial-gradient(ellipse at 85% 72%, rgba(201, 184, 150, 0.16), transparent 34%),
        #e6d4b8;
}

.gate-content {
    margin-left: auto;
    margin-right: 6vw;
    margin-top: 18vh;
}

.gate-enso {
    position: absolute;
    left: 9vw;
    top: 18vh;
    width: min(34vw, 430px);
    aspect-ratio: 1;
    z-index: 2;
    opacity: 0.42;
}

.enso-path,
.corner-enso circle,
.enso-small {
    fill: none;
    stroke: var(--timber);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 0.82 0.18;
    stroke-dashoffset: 1;
}

.panel.in-view .enso-path { animation: inkDraw 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.scroll-cue {
    position: absolute;
    right: 3vw;
    top: 50%;
    z-index: 22;
    writing-mode: vertical-rl;
    animation: cuePulse 2.5s ease-in-out infinite;
}

.wide-content {
    width: min(82vw, 1180px);
    max-width: none;
    margin: 8vh auto;
}

.timeline-block {
    margin: 8vh 0 5vh;
    padding: 3vh 2vw;
    border: 13px solid transparent;
    border-image: repeating-linear-gradient(90deg, #8a7a6b 0 12px, #a08e7a 12px 24px, #5a4636 24px 30px) 12;
    background: rgba(242, 232, 213, 0.24);
}

.timeline-svg { width: 100%; height: 160px; overflow: visible; }
.timeline-line,
.draw-line,
.branch {
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.timeline-line { stroke-width: 1.4; }
.timeline-node circle { fill: var(--paper); stroke: var(--vermillion); stroke-width: 2; opacity: 0; transform-origin: center; }
.timeline-node text { fill: var(--label); font-family: var(--cjk); font-size: 28px; text-anchor: middle; letter-spacing: 0.15em; opacity: 0; }
.panel.in-view .draw-line,
.panel.in-view .branch { animation: inkDraw 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.panel.in-view .timeline-node circle,
.panel.in-view .timeline-node text { animation: stampIn 700ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; animation-delay: var(--delay); }

.split-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
}

.panel-form { background-color: var(--paper); }
.form-one { filter: hue-rotate(0deg); }
.form-two { filter: hue-rotate(4deg); }
.form-three { filter: hue-rotate(8deg); }

.form-content {
    margin: 3vh auto 0;
    display: grid;
    grid-template-columns: minmax(260px, 42vw) minmax(240px, 440px);
    grid-template-areas: "fig eyebrow" "fig title" "fig label" "fig copy";
    gap: 0 5vw;
    align-items: center;
    max-width: 1120px;
}

.reverse-form { grid-template-columns: minmax(240px, 440px) minmax(260px, 42vw); grid-template-areas: "eyebrow fig" "title fig" "label fig" "copy fig"; }
.form-content .eyebrow { grid-area: eyebrow; align-self: end; }
.form-content h2 { grid-area: title; }
.form-content .kanji-label { grid-area: label; margin-top: -1rem; }
.form-content .manuscript-copy { grid-area: copy; max-width: 390px; text-align: justify; }
.brush-figure { grid-area: fig; min-height: 62vh; display: grid; place-items: center; }
.brush-figure svg { width: min(36vw, 430px); height: min(68vh, 560px); overflow: visible; filter: drop-shadow(2px 4px 4px rgba(59, 42, 26, 0.14)); }
.body-line { stroke: var(--ink); stroke-width: 7; }
.limb-line { stroke: var(--ink); stroke-width: 4; }
.accent-line { stroke: var(--persimmon); stroke-width: 4; }
.breath-dot { fill: var(--vermillion); opacity: 0; }
.panel.in-view .breath-dot { animation: breatheDot 1.8s ease-in-out infinite; }

.hanko {
    position: absolute;
    right: 5vw;
    bottom: 6vh;
    z-index: 22;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 3px solid var(--vermillion);
    border-radius: 48% 53% 46% 55%;
    color: var(--vermillion);
    background: rgba(242, 232, 213, 0.34);
    font-family: var(--cjk);
    font-size: 1.7rem;
    opacity: 0;
    transform: scale(1.4) rotate(-8deg);
    box-shadow: inset 0 0 0 2px rgba(194, 59, 34, 0.16);
}
.panel.in-view .hanko { animation: sealStamp 650ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 900ms forwards; }

.panel-philosophy { background: #e0ccb0; }
.quote-content {
    max-width: min(78vw, 1060px);
    margin: 18vh auto 0;
    padding: 7vh 7vw;
    border: 14px solid transparent;
    border-image: repeating-linear-gradient(90deg, #8a7a6b 0 10px, #a08e7a 10px 21px, #3b2a1a 21px 25px) 12;
    background: rgba(242, 232, 213, 0.21);
}

blockquote {
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    text-align: center;
}
.attribution { text-align: center; margin-top: 2rem; }
.corner-enso { position: absolute; right: 7vw; top: 7vh; width: 220px; height: 220px; opacity: 0.15; z-index: 1; }
.panel.in-view .corner-enso circle { animation: inkDraw 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

.lineage-content { width: min(82vw, 980px); max-width: none; margin: 0 auto; text-align: center; }
.lineage-svg { width: min(78vw, 720px); height: 60vh; margin-top: 2vh; overflow: visible; }
.branch { stroke: var(--timber); stroke-width: 1.4; animation-delay: var(--delay); }
.teacher rect { fill: rgba(242, 232, 213, 0.44); stroke: var(--timber); stroke-width: 1.5; }
.teacher text { fill: var(--body-ink); font-family: var(--sans); font-size: 23px; text-anchor: middle; letter-spacing: 0.08em; text-transform: uppercase; }
.teacher { opacity: 0; transform: translateY(12px); }
.panel.in-view .teacher { animation: teacherRise 700ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
.panel.in-view .teacher:nth-of-type(2) { animation-delay: .2s; }
.panel.in-view .teacher:nth-of-type(3) { animation-delay: .35s; }
.panel.in-view .teacher:nth-of-type(4) { animation-delay: .5s; }

.panel-bow {
    background:
        radial-gradient(circle at 50% 46%, rgba(232, 168, 76, 0.16), transparent 32%),
        linear-gradient(135deg, #e0ccb0, #e6d4b8);
}
.bow-content { margin: 6vh auto; text-align: center; }
.rei-mark { width: min(46vh, 430px); height: min(46vh, 430px); overflow: visible; }
.rei-stroke { stroke: var(--ink); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(3px 5px 3px rgba(59, 42, 26, 0.14)); }
.bow-content h2 { font-family: var(--cjk); font-size: clamp(5rem, 13vw, 11rem); color: var(--ink); margin-top: -5vh; }
.final-seal { right: 8vw; bottom: 8vh; }

.scroll-progress {
    position: fixed;
    top: 14px;
    left: 0;
    width: 100vw;
    height: 18px;
    z-index: 40;
    pointer-events: none;
    padding: 0 18px;
}
.scroll-progress svg { width: 100%; height: 100%; overflow: visible; }
#progressInk {
    fill: none;
    stroke: var(--persimmon);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 2px rgba(199, 101, 42, 0.25));
}

.bamboo-toggle {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 45;
    width: 56px;
    height: 82px;
    border: 0;
    border-radius: 26px 23px 28px 24px;
    color: var(--ink);
    background:
        linear-gradient(90deg, rgba(59, 42, 26, 0.18), transparent 22%, transparent 78%, rgba(59, 42, 26, 0.14)),
        linear-gradient(180deg, #e8a84c, #c7652a);
    box-shadow: inset 0 -8px 0 rgba(59, 42, 26, 0.16), 0 16px 28px rgba(74, 85, 104, 0.22);
    font-family: var(--cjk);
    font-size: 1.25rem;
    cursor: pointer;
}

.jump-menu {
    position: fixed;
    right: 96px;
    bottom: 24px;
    z-index: 44;
    display: flex;
    gap: 10px;
    padding: 16px 14px;
    background: rgba(230, 212, 184, 0.92);
    border: 1px solid rgba(59, 42, 26, 0.18);
    box-shadow: 0 18px 50px rgba(74, 85, 104, 0.24), inset 0 0 38px rgba(59, 42, 26, 0.08);
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.jump-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.jump-menu button {
    position: relative;
    writing-mode: vertical-rl;
    min-height: 132px;
    border: 0;
    padding: 12px 8px;
    background: transparent;
    color: var(--body-ink);
    cursor: pointer;
}
.jump-menu button span { color: var(--vermillion); font-size: 1.1rem; margin-bottom: 8px; }
.jump-menu button.active::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid var(--vermillion);
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: 0.65;
}

@keyframes inkDraw { to { stroke-dashoffset: 0; } }
@keyframes cuePulse { 0%, 100% { opacity: 0.3; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(4px); } }
@keyframes stampIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes sealStamp { 0% { opacity: 0; transform: scale(1.4) rotate(-8deg); } 65% { opacity: .95; transform: scale(.92) rotate(2deg); } 100% { opacity: .72; transform: scale(1) rotate(-3deg); } }
@keyframes breatheDot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .85; transform: scale(1.25); } }
@keyframes teacherRise { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
    .panel { padding: 9vh 8vw 7vh; }
    .gate-content { margin-top: 24vh; margin-right: 0; }
    .gate-enso { left: 4vw; width: 76vw; opacity: .22; }
    .split-copy,
    .form-content,
    .reverse-form { display: block; }
    .brush-figure { min-height: 38vh; }
    .brush-figure svg { width: 70vw; height: 40vh; }
    .quote-content { padding: 5vh 6vw; margin-top: 12vh; }
    .jump-menu { right: 18px; left: 18px; bottom: 118px; overflow-x: auto; }
    .jump-menu button { min-height: 108px; }
}