:root {
  --chapter-ink: rgba(9, 22, 18, .79);
  --chapter-gold: #e5c682;
  --chapter-gold-soft: rgba(229, 198, 130, .48);
  --chapter-glass: rgba(11, 27, 21, .7);
}

.chapter-rail {
  display: none;
}

@media (min-width: 900px) {
  .chapter-rail {
    position: fixed;
    z-index: 42;
    top: 50%;
    right: clamp(17px, 2.5vw, 42px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    width: min(178px, 15vw);
    transform: translateY(-50%);
    transition: opacity 250ms ease, transform 340ms cubic-bezier(.16, 1, .3, 1);
  }
  .chapter-rail-track {
    position: relative;
    display: grid;
    justify-items: end;
    gap: 4px;
    width: 100%;
    padding: 11px 0;
  }
  .chapter-rail-track::before {
    position: absolute;
    top: 10px;
    right: 6px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(transparent, rgba(233, 210, 163, .63) 10%, rgba(233, 210, 163, .63) 90%, transparent);
    content: "";
  }
  .chapter-rail-button {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: rgba(255, 251, 239, .68);
    font-size: 9px;
    letter-spacing: .15em;
    text-align: right;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .45);
  }
  .chapter-rail-button::after {
    display: block;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255, 243, 211, .82);
    border-radius: 50%;
    background: rgba(9, 23, 18, .64);
    box-shadow: 0 1px 7px rgba(0, 0, 0, .25);
    content: "";
    transition: transform 230ms ease, background 230ms ease, box-shadow 230ms ease, border-color 230ms ease;
  }
  .chapter-rail-name {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(8px);
    transition: max-width 340ms cubic-bezier(.16, 1, .3, 1), opacity 220ms ease, transform 340ms cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
  }
  .chapter-rail-button:hover::after,
  .chapter-rail-button.is-active::after {
    border-color: #fff0bb;
    background: var(--chapter-gold);
    box-shadow: 0 0 0 5px rgba(230, 195, 117, .13), 0 0 16px rgba(233, 201, 129, .64);
    transform: scale(1.12);
  }
  .chapter-rail-button.is-active {
    color: #fff2cf;
  }
  .chapter-rail-button.is-active .chapter-rail-name {
    max-width: 148px;
    opacity: 1;
    transform: translateX(0);
  }
  .chapter-rail-current {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding-top: 11px;
    border-top: 1px solid rgba(240, 218, 171, .32);
    color: rgba(255, 249, 234, .72);
    font-size: 8px;
    letter-spacing: .16em;
    text-align: right;
  }
  .chapter-rail-current strong {
    color: #f8deb0;
    font-family: "Songti TC", "STSong", Georgia, serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .05em;
  }
  body.menu-open .chapter-rail,
  body:has(.overview-lightbox.is-open) .chapter-rail,
  body:has(.architecture-lightbox.is-open) .chapter-rail,
  body:has(.clubhouse-lightbox.is-open) .chapter-rail,
  body:has(.location-reader.is-open) .chapter-rail,
  body:has(.residence-reader.is-open) .chapter-rail,
  body:has(.transport-lightbox.is-open) .chapter-rail,
  body:has(.school-reader.is-open) .chapter-rail {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(12px);
  }
}

@media (max-width: 899px) {
  html { scroll-padding-top: 76px; }
  body { min-height: 100%; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: auto; }
  main { min-height: 100svh; overflow: visible; }
  main > section { scroll-margin-top: 76px; }
  main > section,
  main > section * { min-width: 0; }

  .site-header { z-index: 60; }
  .header-controls {
    gap: 14px;
    padding: max(10px, env(safe-area-inset-top)) 16px 0;
  }
  .language-trigger,
  .menu-trigger {
    min-width: 44px;
    min-height: 44px;
    justify-content: flex-end;
    padding: 9px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .language-trigger { gap: 8px; border-bottom: 1px solid rgba(255,255,255,.52); }
  .menu-trigger { gap: 9px; }
  .language-panel { top: calc(100% + 7px); right: 0; }
  .menu-overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .chapter-nav { width: min(500px, 100%); padding: max(112px, calc(env(safe-area-inset-top) + 80px)) 28px calc(48px + env(safe-area-inset-bottom)); }
  .chapter-nav a { min-height: 52px; padding: 14px 0; }
  .chapter-nav strong { font-size: clamp(17px, 5.3vw, 23px); }

  .floating-booking {
    z-index: 61;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 46px;
    padding: 12px 14px;
  }
  .floating-booking svg { flex: 0 0 auto; }

  .overview-shell,
  .architecture-inner,
  .clubhouse-inner,
  .residences-inner,
  .transport-inner,
  .schools-inner,
  .location-inner,
  .documents-inner { width: min(100% - 40px, 660px); }
  .overview-footer { padding-bottom: max(28px, calc(94px + env(safe-area-inset-bottom))); }
  .documents-section {
    overflow: visible;
    min-height: max-content;
    padding-bottom: max(190px, calc(210px + env(safe-area-inset-bottom)));
  }
  html { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; }
  body { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; touch-action: pan-y; }
  main { height: auto; min-height: 100svh; overflow: visible; }
  .documents-inner,
  .documents-archive,
  .site-disclaimer { overflow: visible; }
  .site-disclaimer { padding-bottom: max(56px, calc(74px + env(safe-area-inset-bottom))); }

  .overview-photo-zoom,
  .architecture-card-zoom,
  .clubhouse-card-zoom,
  .residence-plan-zoom,
  .transport-photo-zoom,
  .schools-image-zoom,
  .location-map-open { min-width: 44px; min-height: 44px; }
  .overview-lightbox-close,
  .architecture-lightbox-close,
  .clubhouse-lightbox-close,
  .location-reader-close,
  .residence-reader-close,
  .transport-lightbox-close,
  .school-reader-close { min-width: 44px; min-height: 44px; }
  .location-reader-controls button,
  .residence-reader-controls button,
  .school-reader-controls button { min-width: 44px; min-height: 44px; }
  .location-reader-controls,
  .residence-reader-controls { gap: 8px; }
}

@media (max-width: 420px) {
  .floating-booking { gap: 7px; padding-inline: 12px; font-size: 11px; }
  .header-controls { padding-right: 10px; }
  .language-trigger { max-width: 126px; overflow: hidden; }
  .language-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-rail,
  .chapter-rail-name,
  .chapter-rail-button::after { transition: none; }
}