:root {
    --fog-cotton: #F4F1E8;
    --warm-paper: #E5D8C2;
    --ash-wood: #B7A98E;
    --pencil-graphite: #2F332E;
    --summit-red: #C43B2B;
    --lichen-green: #6E7F5E;
    --rain-blue-gray: #7C8F99;
    --shadow-ink: #171A16;
    --sans: "Noto Sans JP", sans-serif;
    --serif: "Instrument Serif", serif;
    --mono: "IBM Plex Mono", monospace;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--fog-cotton);
    color: var(--pencil-graphite);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    background:
        radial-gradient(circle at 20% 8%, rgba(229, 216, 194, 0.9), transparent 34vw),
        linear-gradient(180deg, var(--fog-cotton) 0%, #EDE8DC 52%, var(--warm-paper) 100%);
    overflow-x: hidden;
}

body.ready .ticket-counter {
    transform: translateY(0);
    opacity: 1;
}

.grain,
.fog-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.grain {
    opacity: 0.28;
    background-image:
        linear-gradient(90deg, rgba(47, 51, 46, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(47, 51, 46, 0.025) 1px, transparent 1px);
    background-size: 42px 42px, 42px 42px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.fog-layer-a {
    background: linear-gradient(90deg, rgba(244, 241, 232, 0.3), rgba(244, 241, 232, 0.86), rgba(244, 241, 232, 0.24));
    animation: curtainDrift 18s ease-in-out infinite alternate;
}

.fog-layer-b {
    background: radial-gradient(ellipse at 70% 28%, rgba(124, 143, 153, 0.16), transparent 38vw);
    animation: fogBreath 12s ease-in-out infinite alternate;
}

.station {
    position: relative;
    z-index: 2;
}

.room {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 26px);
    padding: clamp(28px, 5vw, 72px);
    overflow: hidden;
    border-bottom: 1px solid rgba(47, 51, 46, 0.08);
}

.room::before {
    content: attr(data-room);
    position: absolute;
    top: clamp(24px, 3vw, 46px);
    right: clamp(24px, 4vw, 60px);
    font-family: var(--mono);
    color: rgba(47, 51, 46, 0.18);
    letter-spacing: 0.18em;
    font-size: 12px;
}

.room-code,
.mono-label,
.perforated-ticket,
.label-column,
.enamel-plate,
.punched-ticket,
.route-tab,
.map-legend,
.hanging-label,
.final-ticket small,
.station-index {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.wordmark,
h1,
h2 {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.045em;
}

.serif-note,
.notice,
.porch-note p,
.return-counter p {
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1.15;
}

.ticket-window {
    align-items: end;
}

.room-code {
    position: absolute;
    left: clamp(30px, 6vw, 88px);
    bottom: clamp(18px, 4vw, 58px);
    font-size: 11px;
    color: rgba(47, 51, 46, 0.52);
}

.ticket-counter {
    grid-column: 2 / 12;
    align-self: end;
    min-height: min(52vh, 520px);
    padding: clamp(26px, 4vw, 56px);
    background: linear-gradient(180deg, #C1B294, var(--ash-wood) 42%, #A99876 100%);
    box-shadow: 0 -22px 50px rgba(23, 26, 22, 0.18), inset 0 1px rgba(244, 241, 232, 0.48);
    border-radius: 6px 6px 0 0;
    transform: translateY(78%);
    opacity: 0.25;
    transition: transform 1400ms cubic-bezier(0.18, 0.9, 0.18, 1), opacity 900ms ease;
}

.counter-rail {
    height: 16px;
    margin: -12px 0 clamp(30px, 5vw, 80px);
    background: rgba(47, 51, 46, 0.22);
    box-shadow: inset 0 -2px rgba(23, 26, 22, 0.18);
}

.stamp-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.wordmark {
    font-size: clamp(72px, 13vw, 190px);
    line-height: 0.86;
    color: var(--pencil-graphite);
    filter: blur(0.1px);
}

.route-dot,
.summit-marker,
.traveler-dot {
    display: inline-block;
    width: clamp(14px, 1.8vw, 24px);
    height: clamp(14px, 1.8vw, 24px);
    border-radius: 50%;
    background: var(--summit-red);
    box-shadow: 0 0 0 6px rgba(196, 59, 43, 0.08);
}

.ticket-counter .serif-note {
    max-width: 520px;
    color: rgba(23, 26, 22, 0.78);
}

.perforated-ticket {
    margin-top: 44px;
    width: min(560px, 100%);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--warm-paper);
    color: rgba(47, 51, 46, 0.72);
    font-size: 10px;
    background-image: radial-gradient(circle, var(--ash-wood) 2px, transparent 2.6px);
    background-size: 20px 100%;
    background-repeat: repeat-y;
    background-position: 10px center;
    padding-left: 34px;
}

.drawer-room {
    background: linear-gradient(180deg, var(--fog-cotton), #ECE5D6);
    align-items: center;
}

.label-column {
    grid-column: 1 / 3;
    writing-mode: vertical-rl;
    display: flex;
    gap: 26px;
    font-size: 11px;
    color: rgba(47, 51, 46, 0.58);
}

.altitude-drawer {
    grid-column: 4 / 11;
    align-self: center;
    perspective: 1000px;
}

.drawer-front {
    position: relative;
    height: 94px;
    background: linear-gradient(180deg, #C3B493, var(--ash-wood));
    border: 1px solid rgba(47, 51, 46, 0.12);
    box-shadow: 0 24px 44px rgba(23, 26, 22, 0.18);
    transform: translateY(44px);
    transition: transform 900ms ease;
}

.room.in-view .drawer-front {
    transform: translateY(0);
}

.enamel-plate {
    position: absolute;
    left: 26px;
    top: 24px;
    padding: 10px 16px;
    background: var(--fog-cotton);
    border: 1px solid rgba(47, 51, 46, 0.24);
    font-size: 11px;
}

.cotton-pull {
    position: absolute;
    right: 36px;
    top: 38px;
    width: 86px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid rgba(47, 51, 46, 0.48);
    transition: width 900ms ease 180ms;
}

.room.in-view .cotton-pull {
    width: 136px;
}

.drawer-tray {
    display: grid;
    grid-template-columns: 1.2fr 0.22fr 0.8fr 0.36fr;
    gap: 18px;
    padding: clamp(22px, 3vw, 40px);
    background: rgba(229, 216, 194, 0.9);
    box-shadow: inset 0 12px 20px rgba(23, 26, 22, 0.12), 0 28px 54px rgba(23, 26, 22, 0.13);
}

.compact-map,
.punched-ticket,
.route-tab {
    min-height: 190px;
}

.compact-map {
    position: relative;
    background: linear-gradient(90deg, transparent 49.5%, rgba(47, 51, 46, 0.12) 50%, transparent 50.5%), var(--fog-cotton);
    border: 1px solid rgba(47, 51, 46, 0.12);
}

.map-grid {
    position: absolute;
    inset: 14px;
    background-image: linear-gradient(rgba(110, 127, 94, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 127, 94, 0.22) 1px, transparent 1px);
    background-size: 22px 22px;
}

.map-label {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-family: var(--sans);
}

.red-pencil {
    position: relative;
    width: 16px;
    min-height: 210px;
    margin: auto;
    background: var(--summit-red);
    transform: rotate(4deg);
    box-shadow: 0 5px 14px rgba(23, 26, 22, 0.2);
}

.red-pencil::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 20px solid var(--ash-wood);
}

.punched-ticket {
    position: relative;
    padding: 18px;
    background: var(--fog-cotton);
    border-left: 1px dashed rgba(47, 51, 46, 0.38);
    font-size: 10px;
}

.punched-ticket i {
    display: block;
    width: 14px;
    height: 14px;
    margin: 22px 0;
    border-radius: 50%;
    background: var(--warm-paper);
}

.route-tab {
    border: 0;
    background: var(--lichen-green);
    color: var(--fog-cotton);
    cursor: default;
    transform-origin: top center;
    transition: transform 200ms ease;
}

.notice {
    grid-column: 4 / 9;
    max-width: 520px;
    align-self: end;
    color: rgba(47, 51, 46, 0.72);
}

.map-room {
    align-content: center;
    background: var(--warm-paper);
}

.map-header {
    grid-column: 2 / 12;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.map-header h1,
.summit-board h2,
.return-counter h2 {
    margin: 8px 0 0;
    font-size: clamp(42px, 7vw, 104px);
    line-height: 0.95;
    color: var(--pencil-graphite);
}

.mono-label {
    font-size: 11px;
    color: rgba(47, 51, 46, 0.55);
}

.square-label {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(47, 51, 46, 0.2);
    font-family: var(--mono);
}

.square-label.active {
    color: var(--summit-red);
    border-color: var(--summit-red);
}

.folding-map {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(30px, 5vw, 70px);
    min-height: min(48vh, 460px);
    box-shadow: 0 26px 48px rgba(23, 26, 22, 0.16);
}

.fold-panel {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background-color: var(--fog-cotton);
    border-right: 1px solid rgba(47, 51, 46, 0.12);
    transform: rotateY(-82deg);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.2, 0.74, 0.2, 1);
}

.room.in-view .fold-panel {
    transform: rotateY(0deg);
}

.room.in-view .panel-two { transition-delay: 160ms; }
.room.in-view .panel-three { transition-delay: 320ms; }
.room.in-view .panel-four { transition-delay: 480ms; }

.panel-one {
    font-family: var(--serif);
    font-size: 28px;
    background-image: linear-gradient(120deg, transparent 48%, rgba(47, 51, 46, 0.12) 49%, transparent 51%);
}

.contour-svg,
.red-string svg {
    width: 100%;
    height: 100%;
    min-height: 250px;
}

.contour-svg path {
    fill: none;
    stroke: var(--lichen-green);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.8;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
}

.room.in-view .contour-svg path {
    animation: drawLine 1800ms ease forwards;
}

.red-string {
    position: absolute;
    inset: 0;
}

.red-string path {
    fill: none;
    stroke: var(--summit-red);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 8 7;
}

.traveler-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%);
}

.map-legend {
    position: absolute;
    bottom: 24px;
    left: 24px;
    font-size: 10px;
    line-height: 1.8;
}

.porch-room {
    align-items: center;
    background: linear-gradient(90deg, var(--fog-cotton) 0%, #EDF0EC 58%, rgba(124, 143, 153, 0.28) 100%);
}

.porch-glass {
    grid-column: 2 / 9;
    height: min(68vh, 620px);
    position: relative;
    border: 1px solid rgba(124, 143, 153, 0.5);
    background: linear-gradient(180deg, rgba(244, 241, 232, 0.38), rgba(124, 143, 153, 0.14));
    box-shadow: inset 0 0 60px rgba(124, 143, 153, 0.18), 0 30px 52px rgba(23, 26, 22, 0.08);
}

.glass-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    height: 2px;
    background: rgba(124, 143, 153, 0.75);
}

.bead {
    position: absolute;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    left: var(--x);
    top: var(--y);
    background: rgba(124, 143, 153, 0.58);
    box-shadow: inset -2px -2px 3px rgba(23, 26, 22, 0.1), inset 2px 2px 4px rgba(244, 241, 232, 0.68);
    animation: beadSlide var(--d) ease-in-out infinite alternate;
}

.porch-note {
    grid-column: 9 / 12;
    padding: 28px;
    background: var(--warm-paper);
    border-top: 4px solid var(--rain-blue-gray);
    box-shadow: 0 20px 36px rgba(23, 26, 22, 0.12);
    transform-origin: top center;
    transition: transform 200ms ease;
}

.boot-stamps {
    position: absolute;
    left: 9vw;
    bottom: 11vh;
    display: flex;
    gap: 38px;
    opacity: 0.24;
}

.boot-stamps span {
    width: 22px;
    height: 42px;
    border-radius: 50% 50% 44% 44%;
    background: var(--shadow-ink);
    transform: rotate(-18deg);
}

.summit-room {
    align-items: center;
    background: var(--fog-cotton);
}

.summit-board {
    grid-column: 3 / 9;
    padding: clamp(34px, 5vw, 72px);
    background: var(--warm-paper);
    box-shadow: 0 28px 56px rgba(23, 26, 22, 0.12);
    border: 1px solid rgba(47, 51, 46, 0.1);
}

.summit-board h2 {
    font-size: clamp(72px, 15vw, 220px);
}

.summit-marker {
    margin: 24px 0;
}

.hanging-label {
    grid-column: 9 / 11;
    justify-self: center;
    width: 120px;
    height: 180px;
    display: grid;
    place-content: center;
    gap: 14px;
    text-align: center;
    background: var(--fog-cotton);
    border: 1px solid rgba(47, 51, 46, 0.2);
    color: var(--pencil-graphite);
    box-shadow: 0 22px 34px rgba(23, 26, 22, 0.1);
    transform-origin: top center;
    transition: transform 200ms ease;
}

.hanging-label::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -120px;
    width: 1px;
    height: 120px;
    background: var(--summit-red);
}

.hanging-label strong {
    color: var(--summit-red);
    font-size: 30px;
}

.pressed-grass {
    grid-column: 11 / 12;
    display: flex;
    gap: 5px;
    align-self: end;
    opacity: 0.65;
}

.pressed-grass i {
    width: 2px;
    height: 150px;
    background: var(--lichen-green);
    transform: rotate(var(--r, 8deg));
}

.pressed-grass i:nth-child(2) { --r: -8deg; height: 120px; }
.pressed-grass i:nth-child(3) { --r: 14deg; height: 168px; }
.pressed-grass i:nth-child(4) { --r: -3deg; height: 100px; }

.return-room {
    background: linear-gradient(180deg, var(--warm-paper), var(--fog-cotton));
    align-items: center;
}

.return-counter {
    grid-column: 2 / 8;
    position: relative;
    z-index: 2;
}

.return-counter h2 {
    font-size: clamp(44px, 8vw, 112px);
}

.final-ticket {
    margin-top: 42px;
    width: min(430px, 100%);
    padding: 20px;
    background: var(--fog-cotton);
    border: 1px dashed rgba(47, 51, 46, 0.42);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.final-ticket span {
    font-family: var(--sans);
    font-size: 36px;
    color: var(--pencil-graphite);
}

.curtain {
    grid-column: 8 / 13;
    height: 88vh;
    background: repeating-linear-gradient(90deg, rgba(244, 241, 232, 0.26) 0 20px, rgba(229, 216, 194, 0.62) 20px 42px);
    box-shadow: -20px 0 40px rgba(23, 26, 22, 0.08);
    animation: curtainDrift 7s ease-in-out infinite alternate;
}

.station-index {
    position: fixed;
    right: clamp(12px, 2vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: grid;
    gap: 11px;
}

.index-mark {
    width: 34px;
    height: 26px;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: rgba(47, 51, 46, 0.38);
    border-left: 2px solid rgba(47, 51, 46, 0.12);
    font-size: 10px;
    transition: color 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.index-mark.is-active {
    color: var(--summit-red);
    border-color: var(--summit-red);
    transform: translateX(-5px);
}

@keyframes curtainDrift {
    from { transform: translateX(-2.5vw); }
    to { transform: translateX(2.5vw); }
}

@keyframes fogBreath {
    from { opacity: 0.32; transform: scale(1); }
    to { opacity: 0.78; transform: scale(1.08); }
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

@keyframes beadSlide {
    to { transform: translateY(clamp(12px, 6vh, 56px)); }
}

@media (max-width: 820px) {
    .room {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 24px;
    }
    .ticket-counter,
    .map-header,
    .folding-map,
    .porch-glass,
    .summit-board,
    .return-counter,
    .curtain,
    .altitude-drawer,
    .notice,
    .porch-note,
    .hanging-label {
        grid-column: 1 / -1;
    }
    .label-column,
    .station-index {
        display: none;
    }
    .drawer-tray,
    .folding-map {
        grid-template-columns: 1fr;
    }
    .fold-panel {
        min-height: 210px;
    }
    .porch-room,
    .summit-room,
    .return-room {
        align-content: center;
    }
}