/* =========================================================
   yamato.quest — avant-garde editorial lookbook
   Palette: bone paper, sumi black, cinnabar, aged brass,
            smoked cedar, unbleached linen, deep walnut,
            pattern weave base.
   ========================================================= */

:root {
    --bone-paper:     #f4efe3;
    --sumi-black:     #1a1614;
    --cinnabar:       #8f2d2a;
    --aged-brass:     #c9b07a;
    --smoked-cedar:   #5a5147;
    --unbleached:     #e8dcc8;
    --deep-walnut:    #2a2420;
    --pattern-base:   #d4ccb8;

    --panel-w: 100vw;
    --panel-h: 100vh;

    --display-font: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --body-font:    'Cormorant Garamond', Georgia, serif;
    --jp-font:      'Shippori Mincho', 'Hiragino Mincho Pro', 'Yu Mincho', serif;
    --label-font:   'Archivo', 'Inter', 'Helvetica Neue', sans-serif;
    --mono-font:    'IBM Plex Mono', 'Menlo', monospace;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bone-paper);
    color: var(--sumi-black);
    font-family: var(--body-font);
    font-weight: 400;
    font-style: italic;
    font-size: 15px;
    line-height: 1.73;
    /* Pattern-maker's notch cursor */
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><line x1='3' y1='5' x2='19' y2='5' stroke='%238f2d2a' stroke-width='1.2'/><path d='M 6 5 L 16 5 L 11 17 Z' fill='none' stroke='%238f2d2a' stroke-width='1.2'/></svg>") 11 11, auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga", "dlig", "calt";
    text-rendering: geometricPrecision;
}

/* Hoverable elements: larger rotated cursor */
a, button, .garment, .weave-cell, .const-node, .idx {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g transform='rotate(45 20 20)'><line x1='4' y1='10' x2='36' y2='10' stroke='%238f2d2a' stroke-width='1.5'/><path d='M 10 10 L 30 10 L 20 32 Z' fill='none' stroke='%238f2d2a' stroke-width='1.5'/></g></svg>") 20 20, pointer;
}

/* -----------------------------------------------------
   Paper grain overlay
   ----------------------------------------------------- */
.paper-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.28;
    mix-blend-mode: multiply;
}

/* -----------------------------------------------------
   Progress thread
   ----------------------------------------------------- */
.progress-thread {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 14px;
    z-index: 1000;
    pointer-events: none;
}

.progress-thread__line {
    position: absolute;
    top: 7px;
    left: 0;
    height: 1px;
    width: 0%;
    background: var(--cinnabar);
    transition: width 0.08s linear;
}

.progress-thread__dot {
    position: absolute;
    top: 5px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cinnabar);
    transform: translate(-2.5px, 0);
    animation: thread-oscillate 2.2s ease-in-out infinite;
}

@keyframes thread-oscillate {
    0%, 100% { transform: translate(-2.5px, 0); }
    50%      { transform: translate(-2.5px, 1px); }
}

/* -----------------------------------------------------
   Runway index marker
   ----------------------------------------------------- */
.runway-index {
    position: fixed;
    top: 28px;
    right: 40px;
    z-index: 1000;
    font-family: var(--mono-font);
    font-size: 11px;
    color: var(--sumi-black);
    letter-spacing: 0.06em;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.runway-index__current {
    color: var(--cinnabar);
    transition: color 0.3s ease;
}

.runway-index__separator { opacity: 0.5; }
.runway-index__total { opacity: 0.6; }

.atelier-mark {
    position: fixed;
    top: 28px;
    left: 40px;
    z-index: 1000;
    font-family: var(--label-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--smoked-cedar);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* -----------------------------------------------------
   Horizontal runway
   ----------------------------------------------------- */
.runway {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.runway__track {
    display: flex;
    height: 100vh;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.panel {
    position: relative;
    flex: 0 0 auto;
    width: var(--panel-w);
    height: var(--panel-h);
    padding: 72px 88px;
    display: block;
    overflow: hidden;
}

.panel--foldout {
    width: calc(var(--panel-w) * 3);
    padding: 72px 120px;
}

/* -----------------------------------------------------
   Bracket frame (kakezuri registration marks)
   ----------------------------------------------------- */
.bracket-frame {
    position: absolute;
    inset: 48px;
    pointer-events: none;
    z-index: 2;
}

.bracket {
    position: absolute;
    width: 22px;
    height: 22px;
}

.bracket--tl { top: 0; left: 0;
    border-top: 0.5px solid var(--sumi-black);
    border-left: 0.5px solid var(--sumi-black);
}
.bracket--tr { top: 0; right: 0;
    border-top: 0.5px solid var(--sumi-black);
    border-right: 0.5px solid var(--sumi-black);
}
.bracket--bl { bottom: 0; left: 0;
    border-bottom: 0.5px solid var(--sumi-black);
    border-left: 0.5px solid var(--sumi-black);
}
.bracket--br { bottom: 0; right: 0;
    border-bottom: 0.5px solid var(--sumi-black);
    border-right: 0.5px solid var(--sumi-black);
}

/* Panel entry: brackets materialize first */
.panel .bracket-frame { opacity: 0; transition: opacity 0.5s ease 0.2s; }
.panel.is-active .bracket-frame { opacity: 1; }

/* -----------------------------------------------------
   Generic panel labels
   ----------------------------------------------------- */
.panel [class$="__label"],
.panel [class*="__label "] {
    font-family: var(--label-font);
    font-size: 10px;
    letter-spacing: 0.22em;
    font-style: normal;
    font-weight: 500;
    color: var(--smoked-cedar);
    text-transform: uppercase;
}

/* Common data-reveal path animation */
[data-reveal="path"] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.panel.is-active [data-reveal="path"] {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   PANEL 01 — COLOPHON
   ========================================================= */
.panel--colophon {
    background: var(--bone-paper);
}
.colophon {
    position: absolute;
    top: 14%;
    left: 9%;
    width: 62%;
}
.colophon__label {
    font-family: var(--label-font);
    font-size: 10px;
    letter-spacing: 0.22em;
    font-style: normal;
    color: var(--smoked-cedar);
    margin-bottom: 44px;
}
.colophon__opening {
    height: 26px;
    width: 1em;
}
.colophon__title {
    font-family: var(--display-font);
    font-weight: 900;
    font-style: normal;
    font-size: clamp(3.2rem, 11vw, 8.5rem);
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--sumi-black);
    font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
    margin-bottom: 28px;
}
.colophon__title .word {
    display: block;
}
.colophon__title .word--script {
    font-weight: 300;
    font-size: 0.32em;
    letter-spacing: 0.02em;
    color: var(--smoked-cedar);
    margin-top: 18px;
    font-style: italic;
    font-family: var(--body-font);
}
.colophon__meta {
    display: flex;
    gap: 36px;
    font-family: var(--label-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--smoked-cedar);
    margin-top: 60px;
    margin-bottom: 28px;
}
.colophon__line {
    padding-left: 10px;
    border-left: 0.5px solid var(--smoked-cedar);
}
.colophon__year {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--mono-font);
    font-variant-numeric: tabular-nums;
    color: var(--deep-walnut);
    font-style: normal;
    margin-top: 24px;
}
.colophon__year-num {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.colophon__year-label {
    font-family: var(--label-font);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--smoked-cedar);
}
.colophon__hairline {
    margin-top: 42px;
    width: 280px;
    height: 1px;
    background: var(--sumi-black);
    opacity: 0.8;
}
.colophon__directive {
    margin-top: 28px;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 14px;
    line-height: 1.7;
    color: var(--smoked-cedar);
    max-width: 30ch;
}

.kerning-diagram {
    position: absolute;
    width: 52vw;
    height: 90px;
    right: -4vw;
    bottom: 16%;
    opacity: 0.4;
}
.kerning-diagram__baseline,
.kerning-diagram__xheight,
.kerning-diagram__cap {
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 0.5px solid var(--sumi-black);
}
.kerning-diagram__baseline { bottom: 18px; }
.kerning-diagram__xheight  { bottom: 46px; }
.kerning-diagram__cap      { bottom: 74px; }
.kerning-diagram__tick {
    position: absolute;
    bottom: 10px;
    width: 1px;
    height: 70px;
    background: var(--smoked-cedar);
    opacity: 0.4;
}

/* =========================================================
   PANEL 02 — ETYMOLOGY
   ========================================================= */
.panel--etymology {
    background: var(--bone-paper);
}
.etymology {
    position: relative;
    width: 100%;
    height: 100%;
}
.etymology__label {
    position: absolute;
    top: 0;
    left: 0;
}
.etymology__character-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32vw;
    height: 32vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.etymology__character {
    font-family: var(--jp-font);
    font-weight: 400;
    font-style: normal;
    font-size: 18vw;
    line-height: 1;
    color: var(--sumi-black);
    letter-spacing: -0.04em;
    user-select: none;
}
.etymology__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
}
.grid-line {
    position: absolute;
    background: var(--smoked-cedar);
}
.grid-line--v { top: 0; bottom: 0; width: 0.5px; }
.grid-line--h { left: 0; right: 0; height: 0.5px; }

.etymology__footnote {
    position: absolute;
    max-width: 28ch;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 13px;
    line-height: 1.73;
    color: var(--smoked-cedar);
    display: flex;
    gap: 8px;
}
.etymology__footnote--one   { top: 20%;  right: 8%; }
.etymology__footnote--two   { bottom: 30%; left: 8%; }
.etymology__footnote--three { bottom: 14%; right: 12%; }

.footnote__mark {
    font-family: var(--mono-font);
    font-style: normal;
    color: var(--cinnabar);
    font-size: 12px;
    padding-top: 2px;
}

.etymology__dot-leader {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono-font);
    font-size: 10px;
    color: var(--smoked-cedar);
    letter-spacing: 0.08em;
    opacity: 0.5;
    font-style: normal;
}

/* =========================================================
   PANEL 03 — VESTIGE I: THE HULL
   ========================================================= */
.panel--hull { background: var(--bone-paper); }
.vestige { position: relative; width: 100%; height: 100%; }
.vestige__label { position: absolute; top: 0; left: 0; }
.vestige__title {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--display-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    letter-spacing: -0.01em;
    color: var(--sumi-black);
    font-variation-settings: "opsz" 144;
}
.vestige__drawing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78vw;
}
.hull-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.hull-path {
    fill: var(--aged-brass);
    fill-opacity: 0.12;
    stroke: var(--sumi-black);
    stroke-width: 1;
    opacity: 0.75;
}
.hull-deck, .hull-structure, .hull-turret, .hull-mast, .hull-waterline {
    fill: none;
    stroke: var(--sumi-black);
    stroke-width: 1;
    opacity: 0.6;
}
.hull-waterline { stroke-dasharray: 3 3; opacity: 0.45; }
.hull-dimension {
    stroke: var(--smoked-cedar);
    stroke-width: 0.5;
    fill: none;
}
.hull-dim-text {
    font-family: var(--mono-font);
    font-size: 10px;
    fill: var(--smoked-cedar);
    letter-spacing: 0.08em;
}

.vestige__caption {
    position: absolute;
    bottom: 10%;
    right: 9%;
    max-width: 32ch;
    text-align: right;
}
.vestige__caption-label {
    font-family: var(--label-font);
    font-size: 10px;
    letter-spacing: 0.22em;
    font-style: normal;
    color: var(--cinnabar);
    margin-bottom: 12px;
}
.vestige__caption-body {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 14px;
    line-height: 1.73;
    color: var(--sumi-black);
    margin-bottom: 12px;
}
.vestige__caption-meta {
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--smoked-cedar);
}

/* =========================================================
   PANEL 04 — VESTIGE II: HANIWA
   ========================================================= */
.panel--haniwa { background: var(--bone-paper); }
.vestige__drawing--haniwa {
    width: auto;
    height: 72vh;
    top: 52%;
}
.haniwa-svg {
    height: 100%;
    width: auto;
}
.haniwa-path {
    fill: none;
    stroke: var(--sumi-black);
    stroke-width: 1;
    opacity: 0.6;
}
.haniwa-baseline {
    stroke: var(--sumi-black);
    stroke-width: 0.5;
    opacity: 0.4;
}
.haniwa-measure {
    stroke: var(--smoked-cedar);
    stroke-width: 0.5;
    fill: none;
}
.haniwa-measure-text {
    font-family: var(--mono-font);
    font-size: 10px;
    fill: var(--smoked-cedar);
    letter-spacing: 0.08em;
}

.vestige__annotation {
    position: absolute;
    font-family: var(--label-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--smoked-cedar);
    display: flex;
    align-items: center;
    gap: 8px;
}
.vestige__annotation--tl { top: 22%; left: 18%; }
.vestige__annotation--br { bottom: 22%; right: 14%; }
.annotation__arrow { color: var(--cinnabar); font-size: 14px; }

/* =========================================================
   PANEL 05 — VESTIGE III: THE POEM
   ========================================================= */
.panel--poem { background: var(--bone-paper); }
.poem { position: relative; width: 100%; height: 100%; }
.poem__label { position: absolute; top: 0; left: 0; }
.poem__title {
    position: absolute;
    top: 8%;
    right: 9%;
    font-family: var(--display-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.8rem);
    color: var(--sumi-black);
}

.poem__columns {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row-reverse;
    gap: 48px;
    align-items: flex-start;
    writing-mode: vertical-rl;
}
.poem__column {
    font-family: var(--jp-font);
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
    line-height: 1.85;
    color: var(--deep-walnut);
    writing-mode: vertical-rl;
    letter-spacing: 0.24em;
    transition: opacity 0.4s ease;
    padding: 0 12px;
    border-right: 0.5px dotted rgba(42, 36, 32, 0.2);
}
.poem__column:last-child { border-right: none; }

.poem__columns:hover .poem__column { opacity: 0.35; }
.poem__columns .poem__column:hover { opacity: 1; }

.poem__gloss {
    position: absolute;
    bottom: 10%;
    left: 9%;
    max-width: 34ch;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 13px;
    line-height: 1.73;
    color: var(--smoked-cedar);
}
.poem__gloss-line {
    display: block;
}
.poem__gloss-cite {
    margin-top: 12px;
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--smoked-cedar);
}
.poem__gloss-cite em {
    font-family: var(--body-font);
    font-style: italic;
}

/* =========================================================
   PANEL 06 — THE WARDROBE
   ========================================================= */
.panel--wardrobe { background: var(--bone-paper); }
.wardrobe { position: relative; width: 100%; height: 100%; }
.wardrobe__label { position: absolute; top: 0; left: 0; }
.wardrobe__title {
    position: absolute;
    top: 6%;
    left: 9%;
    font-family: var(--display-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    color: var(--sumi-black);
    max-width: 20ch;
    line-height: 1.05;
}

.wardrobe__grid {
    position: absolute;
    top: 22%;
    left: 9%;
    width: 82%;
    height: 70%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 18px;
}
.garment {
    position: relative;
    background: var(--bone-paper);
    border: 0.5px solid var(--sumi-black);
    overflow: hidden;
    transition: background 0.4s ease;
}
.garment__front,
.garment__back {
    position: absolute;
    inset: 0;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 0.35s ease, transform 0.5s ease;
}
.garment__front {
    opacity: 1;
}
.garment__back {
    opacity: 0;
    background: var(--unbleached);
    transform: translateY(6px);
}
.garment__num {
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--smoked-cedar);
}
.garment__name {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    color: var(--sumi-black);
    align-self: flex-end;
    max-width: 24ch;
}
.garment__cat {
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--cinnabar);
}
.garment__desc {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sumi-black);
    max-width: 26ch;
}
.garment__rule {
    height: 1px;
    width: 0%;
    background: var(--cinnabar);
    transition: width 0.5s ease 0.05s;
}
.garment:hover {
    background: var(--unbleached);
}
.garment:hover .garment__front { opacity: 0; transform: translateY(-4px); }
.garment:hover .garment__back { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.garment:hover .garment__rule { width: 100%; }

/* Bracket marks on hover */
.garment::before,
.garment::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: var(--cinnabar);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.garment::before {
    top: -2px; left: -2px;
    border-top: 0.8px solid var(--cinnabar);
    border-left: 0.8px solid var(--cinnabar);
}
.garment::after {
    bottom: -2px; right: -2px;
    border-bottom: 0.8px solid var(--cinnabar);
    border-right: 0.8px solid var(--cinnabar);
}
.garment:hover::before, .garment:hover::after { opacity: 1; }

/* =========================================================
   PANEL 07 — LOOKBOOK (silk weaves)
   ========================================================= */
.panel--lookbook { background: var(--bone-paper); }
.lookbook { position: relative; width: 100%; height: 100%; }
.lookbook__label { position: absolute; top: 0; left: 0; }
.lookbook__title {
    position: absolute;
    top: 6%;
    right: 9%;
    font-family: var(--display-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    color: var(--sumi-black);
}
.lookbook__grid {
    position: absolute;
    top: 18%;
    left: 9%;
    width: 82%;
    height: 76%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
}
.weave-cell {
    position: relative;
    background: var(--pattern-base);
    overflow: hidden;
    border: 0.5px solid var(--sumi-black);
}
.weave-cell__pattern {
    position: absolute;
    inset: 0;
    transition: transform 3s ease, opacity 0.5s ease;
    opacity: 0.85;
}
.weave-cell:hover .weave-cell__pattern {
    transform: rotate(0.5deg) scale(1.01);
}
.weave-cell__caption {
    position: absolute;
    bottom: 14px;
    left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    background: rgba(244, 239, 227, 0.86);
    backdrop-filter: blur(1px);
}
.weave-cell__num {
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--cinnabar);
}
.weave-cell__name {
    font-family: var(--label-font);
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--sumi-black);
}
.weave-cell__sub {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 11px;
    color: var(--smoked-cedar);
}

/* =========================================================
   PANEL 08 — THE QUEST (constellation)
   ========================================================= */
.panel--quest { background: var(--bone-paper); }
.quest { position: relative; width: 100%; height: 100%; }
.quest__label { position: absolute; top: 0; left: 0; }
.quest__title {
    position: absolute;
    top: 6%;
    left: 9%;
    font-family: var(--display-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: var(--sumi-black);
}
.quest__constellation {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 64vw;
    max-width: 900px;
    height: 64vh;
}
.constellation-svg {
    width: 100%;
    height: 100%;
}
.const-circle {
    fill: none;
    stroke: var(--aged-brass);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
    opacity: 0.5;
}
.const-label {
    font-family: var(--label-font);
    font-size: 11px;
    letter-spacing: 0.22em;
    font-weight: 500;
    fill: var(--smoked-cedar);
    text-anchor: middle;
}
.const-node {
    fill: var(--sumi-black);
    opacity: 0.7;
    transition: filter 0.3s ease, r 0.3s ease, fill 0.3s ease;
}
.const-node:hover {
    fill: var(--cinnabar);
    filter: drop-shadow(0 0 3px var(--sumi-black));
}

.quest__tooltip {
    position: absolute;
    padding: 6px 10px;
    background: var(--unbleached);
    border: 0.5px solid var(--sumi-black);
    font-family: var(--body-font);
    font-style: italic;
    font-size: 12px;
    color: var(--sumi-black);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    white-space: nowrap;
    z-index: 5;
}
.quest__tooltip.is-visible { opacity: 1; }

.quest__caption {
    position: absolute;
    bottom: 8%;
    right: 9%;
    max-width: 38ch;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 13px;
    line-height: 1.73;
    color: var(--smoked-cedar);
    text-align: right;
}

/* =========================================================
   PANEL 09 — APPENDIX OF GHOSTS
   ========================================================= */
.panel--appendix { background: var(--bone-paper); }
.appendix { position: relative; width: 100%; height: 100%; }
.appendix__label { position: absolute; top: 0; left: 0; }
.appendix__title {
    position: absolute;
    top: 6%;
    left: 9%;
    font-family: var(--display-font);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: var(--sumi-black);
}
.appendix__body {
    position: absolute;
    top: 20%;
    left: 9%;
    width: 84%;
    height: 74%;
    columns: 3;
    column-gap: 44px;
    column-rule: 0.5px solid rgba(90, 81, 71, 0.3);
    font-family: var(--body-font);
    font-style: italic;
    font-size: 12px;
    line-height: 1.78;
    color: var(--sumi-black);
    overflow: hidden;
}
.footnote-para {
    break-inside: avoid-column;
    margin-bottom: 14px;
    text-indent: 0;
}
.fn__mark {
    font-family: var(--mono-font);
    font-style: normal;
    color: var(--cinnabar);
    font-size: 11px;
    padding-right: 8px;
    letter-spacing: 0.04em;
}
.footnote-para em {
    font-family: var(--body-font);
    font-style: italic;
    font-weight: 500;
    color: var(--deep-walnut);
}

/* =========================================================
   PANEL 10 — INDEX
   ========================================================= */
.panel--index { background: var(--bone-paper); }
.book-index { position: relative; width: 100%; height: 100%; }
.book-index__label { position: absolute; top: 0; left: 0; }
.book-index__title {
    position: absolute;
    top: 6%;
    left: 9%;
    font-family: var(--display-font);
    font-weight: 900;
    font-style: normal;
    font-size: clamp(3rem, 6vw, 5.4rem);
    color: var(--sumi-black);
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 144;
}
.book-index__cols {
    position: absolute;
    top: 22%;
    left: 9%;
    width: 82%;
    height: 72%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
}
.book-index__list {
    list-style: none;
}
.idx {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 13px;
    color: var(--sumi-black);
    border-bottom: 0.5px dotted rgba(26, 22, 20, 0.08);
    transition: color 0.3s ease, background 0.3s ease;
}
.idx:hover {
    color: var(--cinnabar);
    background: var(--unbleached);
}
.idx__term {
    flex: 0 0 auto;
    padding-right: 4px;
}
.idx__dots {
    flex: 1;
    border-bottom: 0.5px dotted var(--smoked-cedar);
    transform: translateY(-4px);
    opacity: 0.6;
}
.idx__page {
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 11px;
    color: var(--smoked-cedar);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, transform 0.3s ease;
}
.idx:hover .idx__page {
    color: var(--cinnabar);
    transform: translateX(-4px);
}

/* =========================================================
   PANEL 11 — FOLD-OUT
   ========================================================= */
.panel--foldout {
    background: var(--bone-paper);
    position: relative;
}
.foldout { position: relative; width: 100%; height: 100%; }
.foldout__label {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--label-font);
    font-size: 10px;
    letter-spacing: 0.22em;
    font-style: normal;
    color: var(--smoked-cedar);
}
.foldout__monumental {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translateY(-50%);
    font-family: var(--jp-font);
    font-weight: 500;
    font-style: normal;
    font-size: 46vh;
    line-height: 0.86;
    color: var(--sumi-black);
    letter-spacing: -0.06em;
    user-select: none;
}
.foldout__looks {
    position: absolute;
    top: 12%;
    left: 42%;
    width: 22%;
}
.foldout__look-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-family: var(--label-font);
    font-size: 11px;
    letter-spacing: 0.22em;
    font-style: normal;
    font-weight: 500;
    color: var(--smoked-cedar);
}
.foldout__look {
    padding: 6px 0;
    border-bottom: 0.5px solid rgba(90, 81, 71, 0.3);
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.foldout__look:hover {
    color: var(--cinnabar);
    padding-left: 10px;
}

.foldout__swatches {
    position: absolute;
    top: 12%;
    right: 20%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    width: 22%;
}
.swatch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 10px;
    color: var(--smoked-cedar);
    letter-spacing: 0.08em;
}
.swatch::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: var(--sw);
    border: 0.5px solid var(--sumi-black);
}
.swatch span:nth-child(2) {
    font-family: var(--label-font);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--sumi-black);
}

.foldout__specimens {
    position: absolute;
    bottom: 22%;
    left: 42%;
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 18px;
    color: var(--sumi-black);
}
.specimen--fraunces {
    font-family: var(--display-font);
    font-weight: 900;
    font-style: normal;
    font-size: 32px;
    letter-spacing: -0.02em;
}
.specimen--cormorant {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 22px;
}
.specimen--cormorant em {
    font-style: italic;
    color: var(--cinnabar);
    font-weight: 500;
}
.specimen--shippori {
    font-family: var(--jp-font);
    font-style: normal;
    font-size: 28px;
    color: var(--deep-walnut);
}
.specimen--archivo {
    font-family: var(--label-font);
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--smoked-cedar);
}
.specimen--plexmono {
    font-family: var(--mono-font);
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--smoked-cedar);
}

.foldout__waka {
    position: absolute;
    top: 20%;
    right: 5%;
    display: flex;
    flex-direction: row-reverse;
    gap: 18px;
    writing-mode: vertical-rl;
}
.foldout__waka-col {
    font-family: var(--jp-font);
    font-size: 20px;
    color: var(--deep-walnut);
    letter-spacing: 0.24em;
    writing-mode: vertical-rl;
    padding: 0 8px;
    font-style: normal;
}

.foldout__colophon {
    position: absolute;
    bottom: 8%;
    left: 42%;
    right: 5%;
    font-family: var(--label-font);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--smoked-cedar);
    font-style: normal;
    border-top: 0.5px solid var(--smoked-cedar);
    padding-top: 14px;
}

.foldout__kamon {
    position: absolute;
    bottom: 32%;
    right: 8%;
    width: 140px;
    height: 140px;
    opacity: 0.7;
}
.kamon-svg { width: 100%; height: 100%; }
.kamon-ring {
    fill: none;
    stroke: var(--cinnabar);
    stroke-width: 0.8;
    opacity: 0.8;
}
.kamon-center {
    fill: var(--cinnabar);
    fill-opacity: 0.18;
    stroke: var(--cinnabar);
    stroke-width: 0.8;
}
.kamon-group {
    transform-origin: 100px 100px;
    animation: kamon-rotate 42s linear infinite;
}
@keyframes kamon-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.foldout__end {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.foldout__end-rule {
    width: 220px;
    height: 0.5px;
    background: var(--sumi-black);
    opacity: 0.6;
}
.foldout__end-text {
    font-family: var(--jp-font);
    font-size: 16px;
    letter-spacing: 0.4em;
    color: var(--smoked-cedar);
    font-style: normal;
}

/* -----------------------------------------------------
   Runway hint (trackpad / wheel instruction)
   ----------------------------------------------------- */
.runway-hint {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    font-family: var(--label-font);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--smoked-cedar);
    font-style: normal;
    font-weight: 500;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.runway-hint.is-faded { opacity: 0; }

/* -----------------------------------------------------
   Sound toggle
   ----------------------------------------------------- */
.sound-toggle {
    position: fixed;
    bottom: 28px;
    right: 40px;
    z-index: 1000;
    background: transparent;
    border: 0.5px solid var(--smoked-cedar);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--label-font);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.22em;
    font-style: normal;
    color: var(--smoked-cedar);
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.sound-toggle__icon {
    font-size: 12px;
    transition: color 0.3s ease;
}
.sound-toggle:hover {
    color: var(--cinnabar);
    border-color: var(--cinnabar);
    background: var(--unbleached);
}
.sound-toggle.is-on .sound-toggle__icon { color: var(--cinnabar); }

/* -----------------------------------------------------
   Reduced motion fallback
   ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
    }
    .runway {
        position: relative;
        width: 100vw;
        height: auto;
        overflow: visible;
    }
    .runway__track {
        flex-direction: column;
        width: 100vw;
        height: auto;
        transform: none !important;
    }
    .panel {
        width: 100vw;
        height: 100vh;
    }
    .panel--foldout { width: 100vw; height: 140vh; }
    .kamon-group { animation: none; }
    .progress-thread__dot { animation: none; }
}

/* Small-screen guardrails (not pixel-perfect, but legible) */
@media (max-width: 640px) {
    .panel { padding: 48px 28px; }
    .colophon { left: 6%; width: 88%; }
    .runway-index { right: 22px; }
    .atelier-mark { left: 22px; font-size: 8px; }
    .appendix__body { columns: 1; }
    .book-index__cols { grid-template-columns: 1fr; overflow-y: auto; }
    .wardrobe__grid { grid-template-columns: repeat(2, 1fr); }
    .lookbook__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
    .foldout__swatches { right: 4%; grid-template-columns: repeat(4, 1fr); }
}