:root {
      color-scheme: dark;
      --ivory: #f5f0e4;
      --ivory-72: rgba(245, 240, 228, .72);
      --ivory-45: rgba(245, 240, 228, .45);
      --ivory-18: rgba(245, 240, 228, .18);
      --pine: #13201d;
      --moss: #8fa28c;
      --amber: #d9a66d;
      --ease: cubic-bezier(.2, .78, .22, 1);
    }

    * { box-sizing: border-box; }
    html { background: var(--pine); scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background: var(--pine);
      color: var(--ivory);
      font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
      font-size: 16px;
      text-rendering: geometricPrecision;
    }
    body.panel-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    button { color: inherit; }
    :focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
    ::selection { color: #13201d; background: #f5f0e4; }

    .stage {
      position: fixed;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100svh;
      overflow: hidden;
      isolation: isolate;
      background: #75827e;
    }

    .scene-stack,
    .scene-layer,
    .scene-layer img,
    #webgl {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .scene-stack { z-index: 0; overflow: hidden; }
    .scene-layer {
      opacity: 0;
      overflow: hidden;
      background: #87928e;
      contain: paint;
      isolation: isolate;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .scene-layer:first-child { opacity: 1; }
    .scene-layer[data-scene="0"] { --object-position: 50% 50%; }
    .scene-layer[data-scene="1"] { --object-position: 50% 50%; }
    .scene-layer[data-scene="2"] { --object-position: 50% 50%; }
    .scene-layer[data-scene="3"] { --object-position: 50% 50%; }
    .scene-layer[data-scene="4"] { --object-position: 50% 50%; }
    .scene-layer img {
      object-fit: cover;
      object-position: var(--object-position, 50% 50%);
      pointer-events: none;
      user-select: none;
      will-change: transform;
      transform-origin: 50% 50%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .scene-layer .depth {
      z-index: 1;
    }
    .scene-layer[data-scene="0"] .depth {
      -webkit-mask-image: linear-gradient(90deg, transparent 0 57%, rgba(0,0,0,.14) 64%, #000 79%);
      mask-image: linear-gradient(90deg, transparent 0 57%, rgba(0,0,0,.14) 64%, #000 79%);
    }
    .scene-layer[data-scene="1"] .depth {
      -webkit-mask-image: radial-gradient(ellipse 47% 105% at -2% 58%, #000 0 57%, rgba(0,0,0,.55) 70%, transparent 100%);
      mask-image: radial-gradient(ellipse 47% 105% at -2% 58%, #000 0 57%, rgba(0,0,0,.55) 70%, transparent 100%);
    }
    .scene-layer[data-scene="2"] .depth {
      -webkit-mask-image: radial-gradient(ellipse 48% 88% at 96% 91%, #000 0 52%, rgba(0,0,0,.55) 71%, transparent 100%);
      mask-image: radial-gradient(ellipse 48% 88% at 96% 91%, #000 0 52%, rgba(0,0,0,.55) 71%, transparent 100%);
    }
    .scene-layer[data-scene="3"] .depth {
      -webkit-mask-image: radial-gradient(ellipse 54% 96% at 95% 61%, #000 0 54%, rgba(0,0,0,.55) 72%, transparent 100%);
      mask-image: radial-gradient(ellipse 54% 96% at 95% 61%, #000 0 54%, rgba(0,0,0,.55) 72%, transparent 100%);
    }
    .scene-layer[data-scene="4"] .depth {
      -webkit-mask-image: radial-gradient(ellipse 58% 108% at 3% 63%, #000 0 51%, rgba(0,0,0,.55) 72%, transparent 100%);
      mask-image: radial-gradient(ellipse 58% 108% at 3% 63%, #000 0 51%, rgba(0,0,0,.55) 72%, transparent 100%);
    }
    .scene-layer::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(4, 10, 9, .48), transparent 38%, transparent 73%, rgba(4, 10, 9, .16)),
        linear-gradient(0deg, rgba(4, 10, 9, .5), transparent 37%, rgba(4, 10, 9, .08) 74%, rgba(4, 10, 9, .18));
    }
    .scene-layer[data-scene="1"]::after {
      background:
        linear-gradient(90deg, rgba(4, 10, 9, .23), transparent 35%, transparent 63%, rgba(4, 10, 9, .5)),
        linear-gradient(0deg, rgba(4, 10, 9, .5), transparent 40%, rgba(4, 10, 9, .14));
    }
    .scene-layer[data-scene="2"]::after {
      background:
        linear-gradient(90deg, rgba(5, 11, 10, .45), transparent 45%, transparent 76%, rgba(5, 11, 10, .25)),
        linear-gradient(0deg, rgba(4, 9, 8, .56), transparent 43%, rgba(4, 9, 8, .08));
    }
    .scene-layer[data-scene="3"]::after {
      background:
        linear-gradient(90deg, rgba(3, 10, 16, .48), transparent 43%, transparent 72%, rgba(2, 8, 12, .19)),
        linear-gradient(0deg, rgba(2, 8, 12, .55), transparent 42%, rgba(2, 8, 12, .12));
    }
    .scene-layer[data-scene="4"]::after {
      background:
        linear-gradient(90deg, rgba(2, 7, 11, .13), transparent 40%, transparent 66%, rgba(2, 7, 11, .52)),
        linear-gradient(0deg, rgba(2, 6, 10, .59), transparent 43%, rgba(2, 6, 10, .11));
    }

    #webgl { z-index: 3; display: block; pointer-events: none; }
    .color-wash, .vignette, .grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .color-wash {
      z-index: 2;
      opacity: 0;
      background: rgba(225, 154, 86, .14);
      mix-blend-mode: color;
      transition: opacity 1s var(--ease), background 1.2s var(--ease);
    }
    .vignette {
      z-index: 4;
      background: radial-gradient(ellipse at center, transparent 42%, rgba(3, 8, 7, .14) 76%, rgba(3, 8, 7, .42) 120%);
    }
    .grain {
      z-index: 5;
      opacity: .09;
      mix-blend-mode: soft-light;
      background-image: url("../assets/textures/grain.svg");
    }

    .loading {
      position: fixed;
      z-index: 100;
      inset: 0;
      display: grid;
      place-items: center;
      background: #d9ded8;
      color: #17231f;
      contain: strict;
    }
    .ready .loading { display: none; }
    .loading-inner { width: min(390px, calc(100vw - 64px)); text-align: center; }
    .loading-seal {
      width: 64px;
      height: 64px;
      margin: 0 auto 26px;
      border: 1px solid rgba(23, 35, 31, .52);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: "Noto Serif SC", serif;
      font-size: 25px;
    }
    .loading-word {
      margin: 0 0 24px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .3em;
      text-transform: uppercase;
    }
    .loading-track { height: 1px; background: rgba(23,35,31,.18); overflow: hidden; }
    .loading-bar { display: block; width: 0; height: 100%; background: #17231f; transition: width .3s ease; }
    .loading-count { display: block; margin-top: 10px; font-size: 10px; letter-spacing: .15em; }

    .site-header {
      position: fixed;
      z-index: 20;
      inset: 0 0 auto;
      height: 92px;
      padding: 0 clamp(24px, 4.4vw, 72px);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      border-bottom: 1px solid rgba(245,240,228,.16);
      background: linear-gradient(rgba(8,15,13,.34), transparent);
      opacity: 0;
      transform: translateY(-18px);
      transition: opacity .9s .55s var(--ease), transform .9s .55s var(--ease), background .4s;
    }
    .ready .site-header { opacity: 1; transform: none; }
    .scrolled .site-header { background: rgba(11, 19, 17, .52); backdrop-filter: blur(18px) saturate(1.2); }
    .brand {
      justify-self: start;
      display: inline-flex;
      align-items: center;
      gap: 13px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .brand-seal {
      width: 32px;
      height: 32px;
      border: 1px solid rgba(245,240,228,.66);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: "Noto Serif SC", serif;
      font-size: 14px;
      letter-spacing: 0;
    }
    .nav-links { display: flex; gap: clamp(16px, 2.2vw, 36px); }
    .nav-links a {
      position: relative;
      padding: 10px 2px;
      color: rgba(245,240,228,.72);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .17em;
      text-transform: uppercase;
      transition: color .3s;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 4px;
      height: 1px;
      background: var(--ivory);
      transition: right .45s var(--ease);
    }
    .nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ivory); }
    .nav-links a:hover::after, .nav-links a[aria-current="true"]::after { right: 0; }
    .header-action {
      justify-self: end;
      min-width: 132px;
      height: 40px;
      padding: 0 17px;
      border: 1px solid rgba(245,240,228,.4);
      border-radius: 999px;
      background: rgba(15, 25, 22, .18);
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      transition: background .35s, color .35s, border-color .35s, transform .35s;
    }
    .header-action:hover { color: #14201d; background: var(--ivory); border-color: var(--ivory); transform: translateY(-2px); }

    .chapter-rail {
      position: fixed;
      z-index: 18;
      top: 50%;
      right: clamp(18px, 2.1vw, 34px);
      display: grid;
      gap: 13px;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity .8s 1s;
    }
    .ready .chapter-rail { opacity: 1; }
    .rail-dot {
      position: relative;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }
    .rail-dot::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      width: 7px;
      height: 7px;
      border: 1px solid rgba(245,240,228,.58);
      border-radius: 50%;
      transform: translateY(-50%);
      transition: width .35s var(--ease), border-radius .35s, background .35s;
    }
    .rail-dot span {
      position: absolute;
      top: 50%;
      right: 33px;
      width: max-content;
      color: rgba(245,240,228,.7);
      font-size: 9px;
      letter-spacing: .15em;
      text-transform: uppercase;
      opacity: 0;
      transform: translate(7px, -50%);
      transition: opacity .3s, transform .3s;
    }
    .rail-dot:hover span, .rail-dot.active span { opacity: 1; transform: translate(0,-50%); }
    .rail-dot.active::before { width: 23px; border-radius: 10px; background: var(--ivory); }

    main { position: relative; z-index: 6; }
    .scene-section {
      position: relative;
      min-height: 140svh;
      pointer-events: none;
    }
    #lantern-night { min-height: 150svh; }
    .copy-frame {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100svh;
      min-height: 620px;
      padding: 118px clamp(25px, 5.6vw, 92px) 46px;
      display: flex;
      align-items: flex-end;
    }
    .copy {
      width: min(720px, 72vw);
      opacity: var(--presence, 1);
      transform: translate3d(0, calc((1 - var(--presence, 1)) * 34px), 0);
      will-change: opacity, transform;
      pointer-events: auto;
      text-shadow: 0 2px 22px rgba(3,9,8,.25);
    }
    .scene-section:nth-child(2) .copy-frame { justify-content: flex-end; }
    .scene-section:nth-child(2) .copy { width: min(610px, 54vw); }
    .scene-section:nth-child(3) .copy { width: min(610px, 60vw); }
    #table .copy { width: min(620px, 52vw); }
    #lantern-night .copy-frame { justify-content: flex-end; }
    #lantern-night .copy { width: min(610px, 52vw); }
    .hero-copy {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 1.2s 2.25s var(--ease), transform 1.2s 2.25s var(--ease);
    }
    .ready .hero-copy { opacity: var(--presence, 1); transform: translateY(calc((1 - var(--presence, 1)) * 34px)); }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 13px;
      margin: 0 0 19px;
      color: rgba(245,240,228,.73);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .24em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
    h1, h2, p { margin-top: 0; }
    h1, h2 {
      font-family: "Newsreader", "Noto Serif SC", Georgia, serif;
      font-weight: 300;
      letter-spacing: -.045em;
      text-wrap: balance;
    }
    h1 {
      max-width: 760px;
      margin-bottom: 20px;
      font-size: clamp(65px, 8.7vw, 142px);
      line-height: .79;
    }
    .hero-title-lead {
      display: block;
      opacity: 0;
      filter: blur(9px);
      transform: translate3d(0, 22px, 0) scale(.985);
      transform-origin: left bottom;
      will-change: opacity, filter, transform;
    }
    .ready .hero-title-lead {
      animation: titleThroughMist 1.55s 2.08s cubic-bezier(.16,.78,.22,1) forwards;
    }
    .hero-calligraphy {
      display: block;
      width: min(5.75em, 100%);
      height: auto;
      margin: -.17em 0 -.09em -.035em;
      overflow: visible;
      color: var(--ivory);
      filter: drop-shadow(0 2px 16px rgba(3,9,8,.18));
    }
    .calligraphy-text {
      font-family: "WindSong", "Ma Shan Zheng", cursive;
      font-size: 130px;
      font-weight: 500;
      letter-spacing: -4px;
    }
    .calligraphy-glyph {
      fill: rgba(245,240,228,0);
      stroke: currentColor;
      stroke-width: 1.45px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 0 900;
      paint-order: stroke fill;
    }
    .ready .calligraphy-glyph {
      animation: drawCalligraphy .94s calc(3.08s + var(--glyph) * .14s) cubic-bezier(.32,.04,.2,1) forwards;
    }
    .calligraphy-flourish,
    .calligraphy-wisp {
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
    .calligraphy-flourish {
      stroke: var(--ivory);
      stroke-width: 3.4;
      opacity: 0;
    }
    .ready .calligraphy-flourish {
      animation: drawFlourish 1.38s 4.92s cubic-bezier(.2,.64,.16,1) forwards;
    }
    .calligraphy-wisp {
      stroke: rgba(245,240,228,.54);
      stroke-width: 9;
      opacity: 0;
      filter: blur(5px);
    }
    .ready .calligraphy-wisp {
      animation: calligraphyToCloud 1.95s 5.32s ease-out forwards;
    }
    @keyframes titleThroughMist {
      0% { opacity: 0; filter: blur(9px); transform: translate3d(0,22px,0) scale(.985); }
      42% { opacity: .76; filter: blur(3.6px); }
      100% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
    }
    @keyframes drawCalligraphy {
      0% { fill: rgba(245,240,228,0); stroke-dasharray: 0 900; stroke-width: .7px; }
      62% { fill: rgba(245,240,228,0); stroke-dasharray: 900 0; stroke-width: 2.3px; }
      82% { fill: rgba(245,240,228,.18); stroke-dasharray: 900 0; stroke-width: 1.8px; }
      100% { fill: var(--ivory); stroke-dasharray: 900 0; stroke-width: .5px; }
    }
    @keyframes drawFlourish {
      0% { stroke-dashoffset: 1; opacity: 0; stroke-width: 1px; }
      12% { opacity: .9; }
      58% { stroke-width: 4.2px; }
      100% { stroke-dashoffset: 0; opacity: .9; stroke-width: 1.6px; }
    }
    @keyframes calligraphyToCloud {
      0% { stroke-dashoffset: 1; opacity: 0; transform: translate3d(-5px,0,0) scaleX(.86); }
      20% { opacity: .42; }
      60% { stroke-dashoffset: 0; opacity: .24; }
      100% { stroke-dashoffset: 0; opacity: 0; transform: translate3d(42px,-8px,0) scaleX(1.14); }
    }
    h1 em, h2 em { font-weight: 400; font-style: italic; }
    h2 {
      margin-bottom: 20px;
      font-size: clamp(53px, 6vw, 100px);
      line-height: .88;
    }
    .intro {
      max-width: 510px;
      margin-bottom: 30px;
      color: rgba(245,240,228,.76);
      font-family: "Newsreader", Georgia, serif;
      font-size: clamp(17px, 1.45vw, 22px);
      line-height: 1.45;
    }
    .chapter-number {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 21px;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .chapter-number b { font-weight: 600; }
    .chapter-number i { width: 30px; height: 1px; background: rgba(245,240,228,.6); }

    .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; }
    .reserve-button {
      position: relative;
      width: 222px;
      height: 62px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
      isolation: isolate;
    }
    .reserve-button::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: -1px;
      border-radius: inherit;
      background: conic-gradient(from var(--angle, 0deg), rgba(245,240,228,.2), var(--ivory), rgba(245,240,228,.2) 35%, rgba(245,240,228,.6));
      transition: filter .4s;
    }
    .reserve-button::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 1px;
      border-radius: inherit;
      background: rgba(13, 23, 20, .62);
      backdrop-filter: blur(15px);
      transition: background .45s var(--ease), inset .45s var(--ease);
    }
    .reserve-button:hover::after { inset: 5px; background: rgba(245,240,228,.94); }
    .button-inner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 7px 6px 23px;
      will-change: transform;
      transition: color .4s;
    }
    .reserve-button:hover .button-inner { color: #13201d; }
    .button-label { font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
    .button-orb {
      width: 49px;
      height: 49px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #13201d;
      background: var(--ivory);
      overflow: hidden;
      transition: color .4s, background .4s, transform .45s var(--ease);
    }
    .reserve-button:hover .button-orb { color: var(--ivory); background: #13201d; transform: rotate(45deg); }
    .button-orb svg { width: 17px; }
    .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,.36);
      transform: translate(-50%,-50%) scale(0);
      pointer-events: none;
      animation: ripple .72s ease-out forwards;
    }
    @keyframes ripple { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

    .route-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 13px;
      min-height: 46px;
      padding: 0 2px 3px;
      font-family: "Newsreader", Georgia, serif;
      font-size: 16px;
      font-style: italic;
    }
    .route-link svg { width: 45px; overflow: visible; }
    .route-link path { stroke-dasharray: 48; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease); }
    .route-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(245,240,228,.55);
      transform-origin: right;
      transition: transform .5s var(--ease);
    }
    .route-link:hover::after { transform: scaleX(.15); }
    .route-link:hover path { animation: route .8s var(--ease); }
    @keyframes route { 0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: -48; } 46% { stroke-dashoffset: 48; } 100% { stroke-dashoffset: 0; } }

    .detail-row {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 28px;
    }
    .detail {
      min-width: 137px;
      padding: 13px 15px 12px;
      border: 1px solid rgba(245,240,228,.22);
      border-radius: 3px;
      background: linear-gradient(135deg, rgba(10,18,16,.32), rgba(10,18,16,.13));
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    .detail strong { display: block; margin-bottom: 3px; font-family: "Newsreader", serif; font-size: 20px; font-weight: 400; }
    .detail span { color: rgba(245,240,228,.62); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }

    .scroll-cue {
      position: absolute;
      right: clamp(25px, 5.6vw, 92px);
      bottom: 47px;
      display: flex;
      align-items: center;
      gap: 13px;
      color: rgba(245,240,228,.62);
      font-size: 8px;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity .8s 3s;
    }
    .ready .scroll-cue { opacity: 1; }
    .scroll-line { position: relative; width: 58px; height: 1px; overflow: hidden; background: rgba(245,240,228,.25); }
    .scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--ivory); animation: scrollLine 2.1s infinite var(--ease); }
    @keyframes scrollLine { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

    .journey-close {
      position: relative;
      z-index: 7;
      min-height: 148svh;
      padding: 54svh clamp(25px, 5.6vw, 92px) 0;
      background: linear-gradient(transparent 0, rgba(8,15,16,.56) 25%, #0c1715 62%, #0b1513 100%);
    }
    .journey-inner {
      width: min(1280px, 100%);
      margin: 0 auto;
      padding: 72px 0 88px;
      border-top: 1px solid rgba(245,240,228,.2);
    }
    .journey-heading {
      display: grid;
      grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr);
      gap: clamp(48px,8vw,130px);
      align-items: end;
    }
    .journey-kicker {
      grid-column: 1 / -1;
      margin-bottom: -20px;
      color: rgba(245,240,228,.56);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .journey-heading h3 {
      max-width: 800px;
      margin: 0;
      font-family: "Newsreader", serif;
      font-size: clamp(58px,7vw,116px);
      font-weight: 300;
      line-height: .82;
      letter-spacing: -.05em;
    }
    .journey-heading h3 em { font-weight: 400; font-style: italic; }
    .journey-heading > p:last-child {
      max-width: 420px;
      margin: 0 0 5px;
      color: rgba(245,240,228,.66);
      font-family: "Newsreader", serif;
      font-size: 19px;
      line-height: 1.52;
    }
    .gallery-chapter {
      position: relative;
      z-index: 7;
      min-height: 152svh;
      padding: 28svh clamp(25px,5.6vw,92px) 18svh;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 18% 12%, rgba(85,112,105,.2), transparent 38%),
        linear-gradient(180deg, rgba(8,16,15,.12), #101b18 24%, #0c1715 100%);
    }
    .gallery-chapter::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .09;
      background-image: repeating-linear-gradient(90deg, transparent 0 31px, rgba(245,240,228,.12) 32px);
      mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
    }
    .gallery-scroll-rail {
      position: relative;
      width: min(1280px,100%);
      margin: 0 auto clamp(44px,7vw,92px);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 24px;
      align-items: center;
      color: rgba(245,240,228,.5);
    }
    .gallery-scroll-rail span { height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
    .gallery-scroll-rail span:last-child { transform: scaleX(-1); }
    .gallery-scroll-rail i { width: 54px; height: 54px; border: 1px solid rgba(245,240,228,.34); border-radius: 50%; display: grid; place-items: center; font-family: "Noto Serif SC",serif; font-size: 13px; font-style: normal; letter-spacing: .08em; }
    .mountain-gallery { position: relative; width: min(1280px,100%); margin: 0 auto; }
    .gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 36px; }
    .gallery-heading span { display: block; margin-bottom: 13px; color: rgba(245,240,228,.46); font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .gallery-heading h4 { max-width: 760px; margin: 0; font-family: "Newsreader",serif; font-size: clamp(42px,5vw,78px); font-weight: 300; line-height: .9; letter-spacing: -.045em; }
    .gallery-heading h4 em { font-weight: 400; font-style: italic; }
    .gallery-heading > p { max-width: 340px; margin: 0 0 5px; color: rgba(245,240,228,.52); font-size: 11px; line-height: 1.65; }
    .gallery-grid {
      position: relative;
      height: clamp(560px,67vh,740px);
      padding: 10px 0;
      display: flex;
      gap: 0;
      overflow: hidden;
      border-top: 1px solid rgba(200,167,112,.36);
      border-bottom: 1px solid rgba(200,167,112,.36);
      perspective: 1600px;
      perspective-origin: 50% 48%;
      isolation: isolate;
      background:
        linear-gradient(90deg, rgba(128,88,43,.09), transparent 4% 96%, rgba(128,88,43,.09)),
        #111c1b;
    }
    .gallery-piece {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      overflow: visible;
      border: 0;
      border-left: 1px solid rgba(200,167,112,.28);
      border-right: 1px solid rgba(200,167,112,.2);
      color: var(--ivory);
      background: #111c1b;
      opacity: 0;
      transform: translateY(22px) rotateY(-2.5deg);
      transform-style: preserve-3d;
      transform-origin: center;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      box-shadow: none;
      will-change: flex-grow, transform;
      transition: flex 1.15s var(--ease), opacity .75s ease, transform .92s var(--ease), box-shadow .92s var(--ease);
      transition-delay: 0s, var(--reveal-delay,0s), var(--reveal-delay,0s), 0s;
      --gx: 0px;
      --gy: 0px;
    }
    .gallery-piece:nth-of-type(even) { transform: translateY(22px) rotateY(2.5deg); }
    .gallery-piece:nth-of-type(1) { --reveal-delay: .48s; }
    .gallery-piece:nth-of-type(2) { --reveal-delay: .61s; }
    .gallery-piece:nth-of-type(3) { --reveal-delay: .74s; }
    .gallery-piece:nth-of-type(4) { --reveal-delay: .87s; }
    .gallery-piece:nth-of-type(5) { --reveal-delay: 1s; }
    .mountain-gallery.in-view .gallery-piece { opacity: 1; transform: none; }
    .mountain-gallery.in-view.is-settled .gallery-piece { transition-delay: 0s; }
    .gallery-grid:hover .gallery-piece:not(:hover) { flex: .78 1 0; }
    .gallery-piece:hover,
    .gallery-piece:focus-within { z-index: 4; flex: 2.15 1 0; outline: 0; }
    .mountain-gallery.in-view.is-settled .gallery-piece:has(+ .gallery-piece:hover),
    .mountain-gallery.in-view.is-settled .gallery-piece:has(+ .gallery-piece:focus-within) {
      z-index: 2;
      transform-origin: 100% 50%;
      transform: translateZ(-24px) rotateY(19deg);
      box-shadow: -24px 0 38px rgba(2,7,6,.34);
    }
    .mountain-gallery.in-view.is-settled .gallery-piece:hover + .gallery-piece,
    .mountain-gallery.in-view.is-settled .gallery-piece:focus-within + .gallery-piece {
      z-index: 2;
      transform-origin: 0 50%;
      transform: translateZ(-24px) rotateY(-19deg);
      box-shadow: 24px 0 38px rgba(2,7,6,.34);
    }
    .mountain-gallery.in-view.is-settled .gallery-piece:hover,
    .mountain-gallery.in-view.is-settled .gallery-piece:focus-within,
    .mountain-gallery.in-view.is-settled .gallery-piece.is-active {
      z-index: 4;
      transform: none;
      transform-origin: 50% 50%;
      box-shadow: none;
    }
    .gallery-flip { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; color: inherit; background: #111c1b; cursor: pointer; perspective: 1400px; }
    .gallery-card {
      position: absolute;
      inset: 0;
      display: block;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      transition: transform 1.08s var(--ease);
    }
    .gallery-piece.is-flipped .gallery-card { transform: rotateY(180deg); }
    .gallery-face {
      position: absolute;
      inset: 0;
      display: block;
      overflow: hidden;
      background: #111c1b;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      box-shadow: inset 12px 0 20px -20px rgba(245,240,228,.3), inset -12px 0 20px -20px rgba(2,7,6,.82);
    }
    .gallery-face--back { transform: rotateY(180deg); }
    .gallery-face::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(3,8,7,.82),transparent 47%),linear-gradient(90deg,rgba(3,8,7,.17),transparent 44%); }
    .gallery-face img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--gx),var(--gy),0) scale(1.065); transition: transform 1.2s var(--ease), filter .75s; }
    .gallery-face--front img { filter: saturate(.92) brightness(.82); }
    .gallery-piece:hover .gallery-face img,
    .gallery-piece:focus-within .gallery-face img { transform: translate3d(var(--gx),var(--gy),0) scale(1.025); filter: saturate(1.02) brightness(.94); }
    .gallery-label { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-family: "Newsreader",serif; font-size: 17px; text-align: left; white-space: nowrap; pointer-events: none; text-shadow: 0 2px 12px rgba(2,7,6,.7); }
    .gallery-label b { font-family: "Noto Serif SC","Manrope",sans-serif; font-size: 8px; font-weight: 500; letter-spacing: .14em; }
    .gallery-expand { position: absolute; z-index: 8; top: 17px; right: 17px; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(245,240,228,.48); border-radius: 2px; display: grid; place-items: center; color: var(--ivory); background: rgba(7,14,13,.34); opacity: 0; cursor: pointer; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease), color .35s, background .35s; }
    .gallery-expand svg { width: 17px; height: 17px; }
    .gallery-piece:hover .gallery-expand,
    .gallery-piece:focus-within .gallery-expand,
    .gallery-piece.is-flipped .gallery-expand { opacity: 1; transform: none; }
    .gallery-expand:hover,
    .gallery-expand:focus-visible { color: #14201d; background: var(--ivory); }
    .gallery-mist { position: absolute; z-index: 7; top: -8%; width: 70%; height: 116%; pointer-events: none; opacity: .98; transition: transform 2.25s .12s var(--ease), opacity 1.85s .2s ease; }
    .gallery-mist--left { left: -15%; background: radial-gradient(ellipse 78% 42% at 62% 26%,rgba(238,242,236,.92),transparent 72%),radial-gradient(ellipse 82% 52% at 40% 59%,rgba(199,213,207,.88),transparent 72%),radial-gradient(ellipse 72% 48% at 74% 82%,rgba(158,182,176,.68),transparent 76%); }
    .gallery-mist--right { right: -15%; background: radial-gradient(ellipse 82% 46% at 38% 20%,rgba(228,235,229,.92),transparent 72%),radial-gradient(ellipse 88% 54% at 61% 55%,rgba(193,210,204,.86),transparent 73%),radial-gradient(ellipse 76% 50% at 28% 84%,rgba(151,177,171,.67),transparent 76%); }
    .mountain-gallery.in-view .gallery-mist--left { opacity: 0; transform: translateX(-112%) scale(1.08); }
    .mountain-gallery.in-view .gallery-mist--right { opacity: 0; transform: translateX(112%) scale(1.08); }
    .gallery-instruction { display: flex; align-items: center; justify-content: flex-end; gap: 13px; margin-top: 16px; color: rgba(245,240,228,.4); font-size: 7px; letter-spacing: .17em; text-transform: uppercase; }
    .gallery-instruction i { width: 42px; height: 1px; background: rgba(245,240,228,.28); }
    .gallery-hint-touch { display: none; }
    @media (hover: none), (pointer: coarse) {
      .gallery-hint-fine { display: none; }
      .gallery-hint-touch { display: inline; }
      .gallery-piece.is-active { z-index: 4; flex: 2.15 1 0; }
      .gallery-grid.has-active .gallery-piece:not(.is-active) { flex: .78 1 0; }
      .gallery-piece.is-active .gallery-expand { opacity: 1; transform: none; }
      .mountain-gallery.in-view.is-settled .gallery-piece:has(+ .gallery-piece.is-active) {
        z-index: 2;
        transform-origin: 100% 50%;
        transform: translateZ(-20px) rotateY(16deg);
        box-shadow: -20px 0 32px rgba(2,7,6,.31);
      }
      .mountain-gallery.in-view.is-settled .gallery-piece.is-active + .gallery-piece {
        z-index: 2;
        transform-origin: 0 50%;
        transform: translateZ(-20px) rotateY(-16deg);
        box-shadow: 20px 0 32px rgba(2,7,6,.31);
      }
      .mountain-gallery.in-view.is-settled .gallery-piece.is-active {
        z-index: 4;
        transform: none;
        transform-origin: 50% 50%;
        box-shadow: none;
      }
    }

    .gallery-viewer {
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: none;
      margin: 0;
      padding: clamp(12px,2vw,30px);
      border: 0;
      color: var(--ivory);
      background: transparent;
      overflow: hidden;
    }
    .gallery-viewer::backdrop { background: rgba(4,9,9,.94); }
    .gallery-viewer-shell { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(245,240,228,.18); background: #0b1514; transform-origin: left center; }
    .gallery-viewer[open] .gallery-viewer-shell { animation: galleryDoorEnter .9s var(--ease) both; }
    @keyframes galleryDoorEnter { from { opacity: 0; transform: perspective(1400px) rotateY(-11deg) scale(.955); } to { opacity: 1; transform: none; } }
    .gallery-viewer-shell::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(3,8,8,.86), transparent 48%), linear-gradient(90deg, rgba(3,8,8,.22), transparent 42%); }
    .gallery-viewer-image { position: absolute; inset: 0; padding: 0; overflow: hidden; border: 0; color: inherit; background: #0b1514; text-align: left; cursor: pointer; perspective: 1500px; }
    .gallery-viewer-track { position: absolute; z-index: 0; inset: 0; display: block; transform: scale(1.015); transition: transform 1.08s var(--ease); }
    .gallery-viewer-card { position: absolute; inset: 0; display: block; transform: rotateY(0deg); transform-style: preserve-3d; transition: transform 1.14s var(--ease); }
    .gallery-viewer-card.is-flipped { transform: rotateY(180deg); }
    .gallery-viewer-face { position: absolute; inset: 0; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .gallery-viewer-face--inward { transform: rotateY(180deg); }
    .gallery-viewer-face img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-viewer.is-changing.direction-next .gallery-viewer-track { transform: translateX(-11%) scale(1.025); }
    .gallery-viewer.is-changing.direction-prev .gallery-viewer-track { transform: translateX(11%) scale(1.025); }
    .gallery-viewer.is-resolving .gallery-viewer-track { transition-duration: .46s; }
    .gallery-viewer-folds { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(5,1fr); pointer-events: none; perspective: 1500px; visibility: hidden; opacity: 1; transition: opacity .42s ease; }
    .gallery-viewer.direction-next .gallery-viewer-folds,
    .gallery-viewer.direction-prev .gallery-viewer-folds { visibility: visible; }
    .gallery-fold-panel { position: relative; overflow: hidden; transform-style: preserve-3d; transform-origin: left center; transition: transform 1.02s var(--ease); transition-delay: var(--delay-next); }
    .gallery-fold-panel:nth-child(even) { transform-origin: right center; }
    .gallery-fold-panel::before { content: ""; position: absolute; inset: 0; background-image: var(--next-image); background-size: 500% 100%; background-position: var(--image-position) center; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    .gallery-fold-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 1px 0 rgba(245,240,228,.18),inset -8px 0 18px rgba(2,7,6,.2); }
    .gallery-viewer.direction-next .gallery-fold-panel { transform: translateX(var(--shift-next)) rotateY(-68deg); }
    .gallery-viewer.direction-prev .gallery-fold-panel { transform: translateX(var(--shift-prev)) rotateY(68deg); transition-delay: var(--delay-prev); }
    .gallery-viewer.is-changing .gallery-fold-panel { transform: translateX(0) rotateY(0); }
    .gallery-viewer.is-resolving .gallery-viewer-folds { opacity: 0; }
    .gallery-viewer.is-resolving .gallery-fold-panel { transform: translateX(0) rotateY(0) !important; transition: none !important; }
    .gallery-viewer.is-settling .gallery-viewer-track,
    .gallery-viewer.is-settling .gallery-fold-panel { transition: none !important; }
    .gallery-viewer-turn-hint { position: absolute; z-index: 4; top: 23px; left: clamp(22px,4vw,58px); display: inline-flex; align-items: center; gap: 10px; color: rgba(245,240,228,.72); font-size: 8px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(2,7,6,.72); pointer-events: none; }
    .gallery-viewer-turn-hint::before { content: ""; width: 34px; height: 1px; background: rgba(245,240,228,.48); }
    .gallery-viewer-close,
    .gallery-viewer-nav button {
      position: relative;
      z-index: 4;
      border: 1px solid rgba(245,240,228,.35);
      color: var(--ivory);
      background: rgba(9,17,16,.28);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: color .35s, background .35s, transform .35s;
    }
    .gallery-viewer-close { position: absolute; top: 22px; right: 22px; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; }
    .gallery-viewer-close:hover { color: #13201d; background: var(--ivory); transform: rotate(90deg); }
    .gallery-viewer-meta { position: absolute; z-index: 3; left: clamp(26px,5vw,78px); bottom: clamp(28px,6vw,82px); }
    .gallery-viewer-count, .gallery-viewer-time { color: rgba(245,240,228,.58); font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .gallery-viewer-meta h3 { max-width: 760px; margin: 15px 0 12px; font-family: "Newsreader", serif; font-size: clamp(44px,7vw,108px); font-weight: 300; line-height: .84; letter-spacing: -.05em; }
    .gallery-viewer-meta p { margin: 0; }
    .gallery-viewer-nav { position: absolute; z-index: 4; right: clamp(24px,4vw,58px); bottom: clamp(28px,5vw,68px); display: flex; gap: 9px; }
    .gallery-viewer-nav button { width: 54px; height: 54px; border-radius: 50%; font-size: 19px; }
    .gallery-viewer-nav button:hover { color: #13201d; background: var(--ivory); transform: translateY(-3px); }
    .passage-list {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      margin-top: 82px;
      border-top: 1px solid rgba(245,240,228,.18);
      border-bottom: 1px solid rgba(245,240,228,.18);
    }
    .passage-day {
      position: relative;
      min-height: 235px;
      padding: 28px clamp(22px,3.2vw,48px) 34px;
      overflow: hidden;
      isolation: isolate;
      cursor: pointer;
      outline: 0;
      --image-x: 50%;
      --image-y: 50%;
      --ink-filter: grayscale(1) sepia(.16) contrast(1.16) brightness(.78);
      --ink-wash:
        linear-gradient(108deg, rgba(12,18,16,.72), rgba(123,116,99,.14) 58%, rgba(230,217,185,.08)),
        radial-gradient(ellipse at 84% 9%, rgba(190,153,96,.14), transparent 42%);
    }
    .passage-day:nth-child(2) {
      --ink-filter: grayscale(.72) sepia(.24) hue-rotate(69deg) saturate(.72) contrast(1.18) brightness(.72);
      --ink-wash:
        linear-gradient(112deg, rgba(8,20,16,.75), rgba(66,96,75,.2) 56%, rgba(154,173,131,.09)),
        radial-gradient(ellipse at 73% 18%, rgba(143,164,116,.14), transparent 43%);
    }
    .passage-day:nth-child(3) {
      --ink-filter: grayscale(.62) sepia(.2) hue-rotate(157deg) saturate(1.16) contrast(1.2) brightness(.61);
      --ink-wash:
        linear-gradient(108deg, rgba(5,11,25,.82), rgba(24,48,71,.28) 58%, rgba(127,93,51,.08)),
        radial-gradient(ellipse at 72% 15%, rgba(205,155,77,.16), transparent 39%);
    }
    .passage-day + .passage-day { border-left: 1px solid rgba(245,240,228,.18); }
    .passage-day::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(0deg, rgba(5,12,11,.5), rgba(5,12,11,.02) 68%),
        var(--day-image) var(--image-x) var(--image-y) / cover;
      opacity: .78;
      transform: scale(1.095);
      filter: var(--ink-filter);
      transition: opacity 1.05s .08s var(--ease), transform 1.65s var(--ease), filter 1.15s var(--ease), background-position .22s ease-out;
    }
    .passage-day::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      background:
        var(--ink-wash),
        url("../assets/textures/ink-wash.svg");
      background-blend-mode: normal, soft-light, soft-light;
      opacity: .72;
      transition: opacity 1s var(--ease);
    }
    .passage-day:hover::before,
    .passage-day:focus-visible::before,
    .passage-day.active::before { opacity: 1; transform: scale(1.025); filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1.04) contrast(1.02) brightness(1); }
    .passage-day:hover::after,
    .passage-day:focus-visible::after,
    .passage-day.active::after { opacity: .32; }
    .passage-day:focus-visible { box-shadow: inset 0 0 0 1px rgba(245,240,228,.78); }
    .passage-day > * { position: relative; z-index: 2; }
    .passage-clouds {
      position: absolute;
      z-index: 0;
      left: -15%;
      bottom: -24%;
      width: 82%;
      height: 72%;
      pointer-events: none;
      opacity: .48;
      filter: blur(12px);
      transform: translate3d(-4%,6%,0) rotate(-5deg) scale(1.04);
      transform-origin: center;
      transition: transform 1.72s cubic-bezier(.18,.72,.16,1), opacity 1.08s .22s ease;
      will-change: transform, opacity;
    }
    .passage-clouds,
    .passage-clouds::before,
    .passage-clouds::after {
      background:
        radial-gradient(ellipse 35% 42% at 16% 68%, rgba(231,237,233,.88) 0 34%, rgba(205,218,212,.46) 58%, transparent 78%),
        radial-gradient(ellipse 43% 48% at 48% 48%, rgba(241,244,239,.9) 0 32%, rgba(211,223,217,.43) 58%, transparent 79%),
        radial-gradient(ellipse 38% 43% at 78% 68%, rgba(222,232,226,.76) 0 31%, rgba(190,208,200,.34) 59%, transparent 79%);
    }
    .passage-clouds::before,
    .passage-clouds::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .65;
      transform: translate3d(-6%,7%,0) scale(.92);
      animation: passageCloudDrift 9s ease-in-out infinite alternate;
    }
    .passage-clouds::after {
      opacity: .42;
      transform: translate3d(9%,-8%,0) scale(.82);
      animation-duration: 12s;
      animation-direction: alternate-reverse;
    }
    .passage-day:nth-child(2) .passage-clouds {
      left: -29%;
      top: 3%;
      bottom: auto;
      width: 69%;
      height: 82%;
      opacity: .4;
      transform: translate3d(-8%,-2%,0) rotate(6deg) scale(1.06);
    }
    .passage-day:nth-child(3) .passage-clouds {
      right: -22%;
      left: auto;
      top: -13%;
      bottom: auto;
      width: 88%;
      height: 61%;
      opacity: .32;
      transform: translate3d(10%,-4%,0) rotate(-7deg) scale(1.08);
    }
    .passage-day:hover .passage-clouds,
    .passage-day:focus-visible .passage-clouds,
    .passage-day.active .passage-clouds {
      opacity: 0;
      transform: translate3d(136%,-32%,0) rotate(-9deg) scale(1.16);
    }
    .passage-day:nth-child(2):hover .passage-clouds,
    .passage-day:nth-child(2):focus-visible .passage-clouds,
    .passage-day:nth-child(2).active .passage-clouds { transform: translate3d(162%,-12%,0) rotate(-7deg) scale(1.16); }
    .passage-day:nth-child(3):hover .passage-clouds,
    .passage-day:nth-child(3):focus-visible .passage-clouds,
    .passage-day:nth-child(3).active .passage-clouds { transform: translate3d(-134%,-36%,0) rotate(9deg) scale(1.14); }
    @keyframes passageCloudDrift {
      to { transform: translate3d(8%,-4%,0) scale(1.04); }
    }
    .passage-day > span {
      color: rgba(245,240,228,.5);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .passage-day h4 {
      margin: 62px 0 10px;
      font-family: "Newsreader", serif;
      font-size: clamp(25px,2.25vw,36px);
      font-weight: 300;
      letter-spacing: -.025em;
      transition: transform .55s var(--ease);
    }
    .passage-day p { max-width: 320px; margin: 0; color: rgba(245,240,228,.56); font-size: 12px; line-height: 1.62; }
    .passage-day:hover h4, .passage-day:focus-visible h4, .passage-day.active h4 { transform: translateY(-4px); }
    .passage-calligraphy {
      position: absolute;
      top: 24px;
      right: clamp(17px,2.25vw,32px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      color: rgba(245,240,228,.34);
      font-family: "Ma Shan Zheng","Noto Serif SC",serif;
      font-size: clamp(30px,2.7vw,43px);
      font-weight: 400;
      line-height: .88;
      letter-spacing: .08em;
      writing-mode: vertical-rl;
      text-orientation: upright;
      filter: drop-shadow(0 3px 15px rgba(2,7,6,.34));
      transform: translateY(7px) rotate(-2deg);
      transform-origin: top center;
      transition: color .65s var(--ease), transform .8s var(--ease), filter .65s;
    }
    .passage-calligraphy small { width: 18px; height: 18px; margin-top: 8px; border: 1px solid rgba(190,77,53,.8); display: grid; place-items: center; color: rgba(217,102,75,.86); font-family: "Noto Serif SC",serif; font-size: 7px; line-height: 1; letter-spacing: 0; writing-mode: horizontal-tb; opacity: .3; transform: rotate(9deg) scale(1.32); }
    .passage-day:hover .passage-calligraphy,
    .passage-day:focus-visible .passage-calligraphy,
    .passage-day.active .passage-calligraphy { color: rgba(245,240,228,.86); filter: drop-shadow(0 5px 19px rgba(2,7,6,.5)); transform: translateY(0) rotate(0deg); }
    .passage-day:hover .passage-calligraphy small,
    .passage-day:focus-visible .passage-calligraphy small,
    .passage-day.active .passage-calligraphy small { animation: passageSeal .58s .9s cubic-bezier(.2,.84,.24,1.18) both; }
    @keyframes passageSeal {
      0% { opacity: 0; transform: rotate(13deg) scale(1.85); filter: blur(1.5px); }
      62% { opacity: 1; transform: rotate(-2deg) scale(.9); filter: blur(0); }
      100% { opacity: .9; transform: rotate(3deg) scale(1); filter: blur(0); }
    }
    .passage-open {
      position: absolute;
      right: clamp(18px,2.4vw,34px);
      bottom: 24px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: rgba(245,240,228,.74);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .45s .08s, transform .45s .08s var(--ease);
    }
    .passage-open i { font-family: "Newsreader", serif; font-size: 15px; font-style: normal; transition: transform .45s var(--ease); }
    .passage-day:nth-child(3) .passage-open { right: auto; left: clamp(22px,3.2vw,48px); }
    .passage-day:hover .passage-open, .passage-day:focus-visible .passage-open, .passage-day.active .passage-open { opacity: 1; transform: none; }
    .passage-day:hover .passage-open i, .passage-day.active .passage-open i { transform: translate(3px,-3px); }
    .journey-action {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 52px;
      padding-top: 52px;
    }
    .journey-facts { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,74px); }
    .journey-facts span { font-family: "Newsreader", serif; font-size: 18px; }
    .journey-facts small { display: block; margin-bottom: 7px; color: rgba(245,240,228,.45); font-family: "Manrope", sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
    .site-footer {
      width: min(1280px,100%);
      margin: 0 auto;
      padding: 68px 0 27px;
      display: grid;
      grid-template-columns: minmax(300px,1.55fr) minmax(130px,.55fr) minmax(160px,.65fr);
      gap: clamp(44px,7vw,110px);
      align-items: start;
      border-top: 1px solid rgba(245,240,228,.14);
      color: rgba(245,240,228,.58);
    }
    .footer-intro { max-width: 430px; }
    .footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ivory); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
    .footer-brand span { width: 31px; height: 31px; border: 1px solid rgba(245,240,228,.44); border-radius: 50%; display: grid; place-items: center; font-family: "Noto Serif SC", serif; font-size: 13px; }
    .footer-intro > p { max-width: 390px; margin: 24px 0 27px; font-family: "Newsreader",serif; font-size: 18px; line-height: 1.5; }
    .footer-reserve,
    .footer-text-button {
      padding: 0;
      border: 0;
      color: var(--ivory);
      background: transparent;
      cursor: pointer;
    }
    .footer-reserve { display: inline-flex; align-items: center; gap: 15px; font-size: 9px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
    .footer-reserve::after { content: "↗"; width: 32px; height: 32px; border: 1px solid rgba(245,240,228,.34); border-radius: 50%; display: grid; place-items: center; font-family: "Newsreader",serif; font-size: 15px; transition: color .35s, background .35s, transform .45s var(--ease); }
    .footer-reserve:hover::after,
    .footer-reserve:focus-visible::after { color: #13201d; background: var(--ivory); transform: rotate(45deg); }
    .footer-column { display: grid; align-content: start; gap: 13px; }
    .footer-column > p { margin: 4px 0 13px; color: rgba(245,240,228,.36); font-size: 8px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
    .footer-column a,
    .footer-text-button { width: fit-content; color: rgba(245,240,228,.72); font-family: "Newsreader",serif; font-size: 17px; text-align: left; transition: color .3s, transform .35s var(--ease); }
    .footer-column a:hover,
    .footer-column a:focus-visible,
    .footer-text-button:hover,
    .footer-text-button:focus-visible { color: var(--ivory); transform: translateX(4px); }
    .footer-bottom {
      grid-column: 1 / -1;
      margin-top: 18px;
      padding-top: 23px;
      border-top: 1px solid rgba(245,240,228,.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: rgba(245,240,228,.34);
      font-size: 7px;
      font-weight: 600;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .footer-bottom p { margin: 0; }

    .booking-backdrop {
      position: fixed;
      z-index: 60;
      inset: 0;
      border: 0;
      padding: 0;
      background: rgba(4, 9, 9, .68);
      opacity: 0;
      pointer-events: none;
      backdrop-filter: blur(0);
      transition: opacity .55s, backdrop-filter .7s;
    }
    .booking-backdrop.open { opacity: 1; pointer-events: auto; backdrop-filter: blur(18px) saturate(.72); }
    .booking-panel {
      position: fixed;
      z-index: 61;
      top: 50%;
      left: 50%;
      width: min(1180px, calc(100% - 40px));
      height: min(780px, calc(100svh - 40px));
      padding: 0;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      color: var(--ivory);
      background: #0d1816;
      border: 1px solid rgba(245,240,228,.2);
      box-shadow: 0 38px 120px rgba(0,0,0,.48);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%,-46%) scale(.965);
      transition: transform .78s var(--ease), opacity .55s;
      overflow: hidden;
    }
    .booking-panel.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
    .panel-visual {
      position: relative;
      min-width: 0;
      overflow: hidden;
      background:
        linear-gradient(0deg, rgba(5,12,11,.8), transparent 56%),
        linear-gradient(90deg, transparent 60%, rgba(6,13,12,.5)),
        url("../assets/scenes/arrival.jpg") 64% center / cover;
    }
    .panel-visual::before,
    .panel-visual::after {
      content: "";
      position: absolute;
      inset: auto -14% -13% -18%;
      height: 43%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(219,229,224,.24), rgba(181,204,197,.07) 48%, transparent 72%);
      filter: blur(18px);
      transform: translateX(-8%);
      animation: panelMist 10s ease-in-out infinite alternate;
    }
    .panel-visual::after { inset: auto -26% 3% 8%; height: 28%; opacity: .65; animation-duration: 14s; animation-direction: alternate-reverse; }
    @keyframes panelMist { to { transform: translateX(11%) translateY(-5%) scale(1.08); } }
    .panel-visual-copy { position: absolute; z-index: 2; left: clamp(28px,4vw,58px); right: clamp(28px,4vw,58px); bottom: clamp(30px,5vw,65px); }
    .panel-visual-copy > p { margin-bottom: 16px; color: rgba(245,240,228,.58); font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .panel-visual-copy h3 { max-width: 590px; margin: 0; font-family: "Newsreader", serif; font-size: clamp(43px,4.5vw,72px); font-weight: 300; line-height: .88; letter-spacing: -.045em; }
    .panel-visual-copy h3 em { font-weight: 400; font-style: italic; }
    .altitude-route { max-width: 500px; margin-top: 36px; color: rgba(245,240,228,.65); }
    .altitude-route svg { display: block; width: 100%; overflow: visible; }
    .booking-panel.open .altitude-route path { animation: drawAltitude 1.8s .52s var(--ease) forwards; }
    @keyframes drawAltitude { to { stroke-dashoffset: 0; } }
    .altitude-labels { display: flex; justify-content: space-between; margin-top: 8px; color: rgba(245,240,228,.52); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
    .altitude-labels span { display: grid; gap: 3px; }
    .altitude-labels small { color: rgba(245,240,228,.82); font-size: 9px; }
    .panel-content {
      min-width: 0;
      padding: clamp(28px,3.6vw,52px);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background:
        linear-gradient(145deg, rgba(34,56,49,.38), transparent 38%),
        #101c19;
    }
    .panel-content > * { opacity: 0; transform: translateY(16px); }
    .booking-panel.open .panel-content > * { animation: panelContentIn .7s var(--ease) forwards; }
    .booking-panel.open .panel-content > :nth-child(1) { animation-delay: .22s; }
    .booking-panel.open .panel-content > :nth-child(2) { animation-delay: .3s; }
    .booking-panel.open .panel-content > :nth-child(3) { animation-delay: .36s; }
    .booking-panel.open .panel-content > :nth-child(4) { animation-delay: .42s; }
    .booking-panel.open .panel-content > :nth-child(5) { animation-delay: .49s; }
    .booking-panel.open .panel-content > :nth-child(6) { animation-delay: .56s; }
    @keyframes panelContentIn { to { opacity: 1; transform: none; } }
    .panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(48px,7vh,88px); }
    .panel-brand { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .panel-step { margin-bottom: 15px; color: rgba(245,240,228,.44); font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .panel-close {
      width: 45px;
      height: 45px;
      border: 1px solid rgba(245,240,228,.3);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--ivory);
      background: transparent;
      cursor: pointer;
      transition: transform .4s, background .4s, color .4s;
    }
    .panel-close:hover { color: #13201d; background: var(--ivory); transform: rotate(90deg); }
    .booking-panel h2 { margin-bottom: 14px; font-size: clamp(52px,5.1vw,78px); line-height: .84; }
    .panel-intro { max-width: 430px; color: rgba(245,240,228,.62); font-family: "Newsreader", serif; font-size: 17px; line-height: 1.45; }
    .booking-form { margin-top: 30px; display: grid; gap: 17px; }
    .field { position: relative; padding-bottom: 10px; border-bottom: 1px solid rgba(245,240,228,.22); transition: border-color .35s; }
    .field:focus-within { border-color: rgba(245,240,228,.84); }
    .field label { display: block; margin-bottom: 8px; font-size: 8px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
    .field input, .field select { width: 100%; padding: 0; border: 0; outline: none; color: var(--ivory); background: transparent; color-scheme: dark; font-family: "Newsreader", serif; font-size: 20px; }
    .panel-submit {
      min-height: 58px;
      margin-top: 16px;
      padding: 0 7px 0 22px;
      border: 1px solid rgba(245,240,228,.66);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #13201d;
      background: var(--ivory);
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      transition: color .4s, background .4s, transform .4s;
    }
    .panel-submit i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ivory); background: #17231f; font-family: "Newsreader", serif; font-size: 18px; font-style: normal; transition: transform .45s var(--ease); }
    .panel-submit:hover { color: var(--ivory); background: transparent; transform: translateY(-2px); }
    .panel-submit:hover i { color: #13201d; background: var(--ivory); transform: rotate(45deg); }
    .panel-note { margin-top: auto; padding-top: 34px; color: rgba(245,240,228,.4); font-size: 8px; line-height: 1.55; letter-spacing: .07em; }

    .noscript {
      position: fixed;
      z-index: 200;
      inset: auto 18px 18px;
      padding: 14px 18px;
      color: #17231f;
      background: #f5f0e4;
      font-size: 13px;
    }

    @media (max-width: 820px) {
      .site-header { height: 76px; grid-template-columns: 1fr auto; }
      .nav-links { display: none; }
      .header-action { min-width: 114px; height: 36px; padding: 0 13px; font-size: 9px; }
      .scene-layer[data-scene="0"] { --object-position: 82% 50%; }
      .scene-layer[data-scene="1"] { --object-position: 60% 50%; }
      .scene-layer[data-scene="2"] { --object-position: 59% 50%; }
      .scene-layer[data-scene="3"] { --object-position: 62% 50%; }
      .scene-layer[data-scene="4"] { --object-position: 43% 50%; }
      .chapter-rail { right: 10px; }
      .rail-dot span { display: none; }
      .copy-frame { min-height: 560px; padding: 96px 25px 34px; }
      .copy { width: calc(100vw - 60px); }
      .scene-section:not(#arrival) .copy { width: min(390px, calc(100vw - 82px)); }
      h1 { font-size: clamp(62px, 20vw, 95px); line-height: .82; }
      h2 { font-size: clamp(44px, 9vw, 68px); }
      .intro { max-width: 340px; margin-bottom: 21px; font-size: 15px; line-height: 1.4; }
      .chapter-number { margin-bottom: 13px; }
      .scene-section:nth-child(2) .copy-frame { justify-content: flex-start; }
      .scene-section:not(#arrival) .copy {
        padding: 13px 18px 14px;
        border-left: 1px solid rgba(245,240,228,.38);
        background: linear-gradient(90deg, rgba(8,15,13,.22), rgba(8,15,13,.08) 56%, transparent);
        backdrop-filter: none;
      }
      #lantern-night .copy { border-left: 0; border-right: 1px solid rgba(245,240,228,.38); background: linear-gradient(270deg, rgba(4,10,15,.24), rgba(4,10,15,.08) 56%, transparent); }
      .detail-row { display: none; }
      .scroll-cue { right: 25px; bottom: 30px; }
      .journey-close { min-height: auto; padding: 42svh 28px 0; }
      .journey-inner { padding: 58px 0 68px; }
      .journey-heading { grid-template-columns: 1fr; gap: 28px; }
      .journey-kicker { margin-bottom: 0; }
      .journey-heading h3 { font-size: clamp(58px,12vw,86px); }
      .journey-heading > p:last-child { max-width: 520px; font-size: 17px; }
      .gallery-chapter { min-height: 132svh; padding: 22svh 28px 15svh; }
      .mountain-gallery { margin: 0 auto; }
      .gallery-grid { height: min(69svh,640px); }
      .passage-list { margin-top: 58px; }
      .passage-day { min-height: 218px; padding-top: 23px; }
      .passage-day h4 { margin-top: 48px; }
      .journey-action { align-items: flex-start; flex-direction: column; }
      .site-footer { grid-template-columns: 1.4fr .6fr .7fr; gap: 38px; }
      .booking-panel {
        top: 0;
        left: 0;
        width: 100%;
        height: 100svh;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(250px,34svh) auto;
        border: 0;
        opacity: 0;
        transform: translateY(28px) scale(.985);
        overflow-y: auto;
      }
      .booking-panel.open { opacity: 1; transform: none; }
      .panel-visual-copy { bottom: 28px; }
      .panel-visual-copy h3 { max-width: 560px; font-size: clamp(38px,7vw,56px); }
      .altitude-route { display: none; }
      .panel-content { min-height: 650px; overflow: visible; }
      .panel-top { margin-bottom: 42px; }
    }

    @media (max-width: 680px) {
      .gallery-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
      .gallery-heading > p { max-width: 420px; }
      .gallery-grid {
        width: 100%;
        height: min(68svh,560px);
        min-height: 440px;
        margin: 0;
        padding: 8px 0;
        gap: 0;
        overflow: hidden;
        perspective: 1050px;
      }
      .gallery-piece {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
      }
      .gallery-piece:hover,
      .gallery-piece:focus-within,
      .gallery-piece.is-active { z-index: 4; flex: 3.65 1 0; }
      .gallery-grid:hover .gallery-piece:not(:hover),
      .gallery-grid.has-active .gallery-piece:not(.is-active) { flex: .58 1 0; }
      .gallery-label { left: 10px; right: 10px; bottom: 12px; font-size: 14px; }
      .gallery-label span { opacity: 0; transform: translateY(5px); transition: opacity .45s .25s, transform .55s .25s var(--ease); }
      .gallery-piece:hover .gallery-label span,
      .gallery-piece:focus-within .gallery-label span,
      .gallery-piece.is-active .gallery-label span { opacity: 1; transform: none; }
      .gallery-expand { top: 11px; right: 11px; width: 38px; height: 38px; opacity: 1; }
      .passage-list { grid-template-columns: 1fr; }
      .passage-day { min-height: 0; padding: 24px clamp(20px,5vw,34px) 28px; }
      .passage-day + .passage-day { border-left: 0; border-top: 1px solid rgba(245,240,228,.18); }
      .passage-day h4 { margin: 28px 0 8px; }
      .passage-calligraphy { top: 20px; right: 8px; font-size: 30px; }
    }

    @media (max-width: 480px) {
      .brand-word { display: none; }
      .chapter-rail { display: none; }
      .copy-frame { padding-left: 20px; padding-right: 20px; }
      .copy { width: calc(100vw - 48px); }
      .scene-section:not(#arrival) .copy {
        width: min(300px, calc(100vw - 54px));
        padding: 9px 0 10px 14px;
        background: none;
      }
      #lantern-night .copy { padding: 9px 14px 10px 0; background: none; }
      .scene-section:not(#arrival) .intro { display: none; }
      .scene-section:not(#arrival) h2 { margin-bottom: 13px; font-size: clamp(41px, 12vw, 53px); }
      .actions { gap: 15px; }
      .reserve-button { width: 210px; }
      .route-link { font-size: 15px; }
      .scroll-cue { display: none; }
      .journey-close { padding: 34svh 20px 0; }
      .journey-inner { padding: 46px 0 54px; }
      .journey-heading h3 { font-size: clamp(54px,17vw,72px); }
      .journey-heading > p:last-child { font-size: 16px; }
      .gallery-chapter { padding: 18svh 20px 13svh; }
      .mountain-gallery { margin: 0 auto; }
      .gallery-heading h4 { font-size: 43px; }
      .gallery-grid { height: 61svh; min-height: 420px; }
      .gallery-piece:hover,
      .gallery-piece:focus-within,
      .gallery-piece.is-active { z-index: 4; flex: 4.15 1 0; }
      .gallery-grid:hover .gallery-piece:not(:hover),
      .gallery-grid.has-active .gallery-piece:not(.is-active) { flex: .48 1 0; }
      .gallery-viewer { padding: 0; }
      .gallery-viewer-shell { border: 0; }
      .gallery-viewer-close { top: 16px; right: 16px; }
      .gallery-viewer-meta { left: 20px; right: 20px; bottom: 94px; }
      .gallery-viewer-meta h3 { max-width: 310px; font-size: 51px; }
      .gallery-viewer-nav { right: 18px; bottom: 18px; }
      .gallery-viewer-nav button { width: 50px; height: 50px; }
      .booking-panel { grid-template-rows: minmax(215px,28svh) auto; }
      .panel-visual-copy { left: 22px; right: 22px; bottom: 22px; }
      .panel-visual-copy > p { margin-bottom: 10px; }
      .panel-visual-copy h3 { max-width: 340px; font-size: 38px; }
      .panel-content { min-height: 680px; padding: 24px 22px 34px; }
      .panel-top { margin-bottom: 34px; }
      .booking-panel h2 { font-size: 54px; }
      .passage-list { grid-template-columns: 1fr; margin-top: 46px; }
      .passage-day { min-height: 0; padding: 22px 20px 26px; }
      .passage-day + .passage-day { border-left: 0; border-top: 1px solid rgba(245,240,228,.18); }
      .passage-day h4 { margin: 25px 0 8px; font-size: 28px; }
      .journey-action { gap: 38px; padding-top: 38px; }
      .journey-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; }
      .site-footer { grid-template-columns: 1fr 1fr; gap: 40px 28px; padding: 45px 0 24px; }
      .footer-intro { grid-column: 1 / -1; }
      .footer-bottom { grid-column: 1 / -1; align-items: flex-start; flex-direction: column; gap: 9px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
      .ready .hero-copy, .hero-copy, .site-header, .chapter-rail { opacity: var(--presence, 1); transform: none; transition-delay: 0s !important; }
      #webgl { display: none; }
      .hero-title-lead { opacity: 1; filter: none; transform: none; }
      .calligraphy-glyph { fill: var(--ivory); stroke-dasharray: none; }
      .calligraphy-flourish { opacity: .9; stroke-dashoffset: 0; }
      .calligraphy-wisp { display: none; }
    }
    html.reduced *, html.reduced *::before, html.reduced *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    html.reduced #webgl { display: none; }
    html.reduced .hero-title-lead { opacity: 1; filter: none; transform: none; }
    html.reduced .calligraphy-glyph { fill: var(--ivory); stroke-dasharray: none; }
    html.reduced .calligraphy-flourish { opacity: .9; stroke-dashoffset: 0; }
    html.reduced .calligraphy-wisp { display: none; }
    html.reduced .ready .hero-copy { opacity: var(--presence, 1); transform: none; transition-delay: 0s !important; }
    html.reduced .site-header, html.reduced .chapter-rail { opacity: 1; transform: none; transition-delay: 0s !important; }
    .entered .hero-copy { transition-delay: 0s; }