:root {
  --ink: #1a1b19;
  --ink-soft: #44433e;
  --paper: #f1ebdf;
  --paper-deep: #e5d9c5;
  --sand: #d7c29d;
  --brick: #8e3f30;
  --brick-bright: #ae5742;
  --harbor: #153945;
  --harbor-deep: #0d2932;
  --harbor-light: #4d7780;
  --brass: #b59b66;
  --mist: #dbe2df;
  --line: rgba(26, 27, 25, 0.22);
  --rail: 86px;
  --content-max: 1540px;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", "Times New Roman", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(21,57,69,.05) 1px) 0 0 / 32px 32px,
    linear-gradient(transparent calc(100% - 1px), rgba(21,57,69,.05) 1px) 0 0 / 32px 32px,
    var(--paper);
  font-family: var(--sans);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

::selection {
  background: var(--brick);
  color: #fff;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: var(--rail);
  background: var(--paper);
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rail-brand {
  min-height: 116px;
  border-bottom: 1px solid var(--ink);
  display: grid;
  place-content: center;
  gap: 1px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.25;
  text-align: center;
}

.rail-brand span:last-child {
  color: var(--brick);
}

.rail-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rail-nav a {
  position: relative;
  height: 64px;
  display: grid;
  place-items: center;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, color .25s ease;
}

.rail-nav a b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
}

.rail-nav a span {
  position: absolute;
  left: calc(100% + 1px);
  top: 0;
  height: 64px;
  width: 132px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 13px;
  letter-spacing: .14em;
  white-space: nowrap;
  transform: translateX(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s var(--ease), opacity .25s ease;
}

.rail-nav a:hover,
.rail-nav a.is-active {
  background: var(--brick);
  color: #fff;
  border-color: var(--ink);
}

.rail-nav a:hover span {
  opacity: 1;
  transform: translateX(0);
}

.rail-coordinates {
  border-top: 1px solid var(--ink);
  height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
}

.mobile-header,
.mobile-dock {
  display: none;
}

main,
.source-footer {
  margin-left: var(--rail);
}

.chapter {
  position: relative;
  min-height: 80vh;
}

.chapter-label {
  position: absolute;
  top: 72px;
  right: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  letter-spacing: .14em;
  font-size: 10px;
}

.chapter-label b {
  color: var(--brick);
  font-size: 18px;
  font-weight: 500;
}

.chapter-label--light {
  color: rgba(255,255,255,.66);
}

.chapter-label--light b {
  color: #d98b72;
}

.section-kicker {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--brick);
}

.section-kicker::before {
  content: "";
  width: 44px;
  border-top: 1px solid currentColor;
}

.section-kicker--light {
  color: #dca58e;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 8px 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  border-bottom: 1px solid currentColor;
}

.text-link span {
  font-size: 20px;
  transition: transform .2s ease;
}

.text-link:hover span {
  transform: translate(3px, 2px);
}

.text-link--light {
  color: #fff;
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 44% 56%;
  grid-template-rows: 1fr auto;
  color: #fff;
  background: var(--harbor-deep);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 96px 100%;
  mix-blend-mode: screen;
  opacity: .55;
}

.hero-visual {
  position: absolute;
  inset: 0 0 0 42%;
  overflow: hidden;
}

.hero-visual picture,
.hero-visual img {
  width: 100%;
  height: 100%;
}

.hero-visual img {
  object-fit: cover;
  object-position: 48% center;
  transform: scale(1.02);
}

.hero-visual__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--harbor-deep) 0%, rgba(13,41,50,.84) 7%, rgba(13,41,50,.08) 36%, rgba(13,41,50,.08) 100%),
    linear-gradient(0deg, rgba(6,20,25,.5), transparent 45%);
}

.hero-copy {
  position: relative;
  z-index: 4;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 88px 7vw 88px 6vw;
}

.eyebrow {
  margin: 0 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.7);
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(78px, 8vw, 150px);
  line-height: .78;
  letter-spacing: -.08em;
}

.hero h1 span {
  display: block;
}

.hero h1 span:last-child {
  margin-left: .42em;
  color: #d5886f;
}

.hero-lead {
  max-width: 620px;
  margin: 48px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 23px);
  line-height: 1.8;
  letter-spacing: .03em;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.hero-manifest {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-left: 4vw;
  border-top: 1px solid rgba(255,255,255,.55);
  background: rgba(8,28,35,.76);
  backdrop-filter: blur(12px);
}

.hero-manifest > div {
  min-height: 104px;
  padding: 24px 30px;
  border-right: 1px solid rgba(255,255,255,.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-manifest small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.55);
}

.hero-manifest strong {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .08em;
}

.hero-bearing {
  position: absolute;
  z-index: 5;
  top: 44px;
  right: 42px;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
}

.hero-bearing::before,
.hero-bearing::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.45);
}

.hero-bearing::before {
  width: 1px;
  height: 156px;
}

.hero-bearing::after {
  width: 156px;
  height: 1px;
}

.hero-bearing span {
  position: absolute;
  top: -20px;
}

.hero-bearing i {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 28px solid #d5886f;
  transform: rotate(-55deg) translateY(-5px);
}

.hero-bearing b {
  position: absolute;
  bottom: 18px;
  font-weight: 400;
}

.hero-bearing em {
  position: absolute;
  right: 146px;
  width: 120px;
  font-style: normal;
  color: rgba(255,255,255,.52);
  letter-spacing: .12em;
}

.sight {
  position: absolute;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
}

.sight::before,
.sight::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.85);
}

.sight::before {
  width: 42px;
  height: 1px;
  left: -8px;
  top: 13px;
}

.sight::after {
  height: 42px;
  width: 1px;
  top: -8px;
  left: 13px;
}

.sight i {
  position: absolute;
  left: 38px;
  top: 13px;
  width: 72px;
  border-top: 1px solid rgba(255,255,255,.75);
}

.sight b {
  position: absolute;
  left: 116px;
  top: 4px;
  white-space: nowrap;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .12em;
  font-weight: 400;
}

.sight--one {
  left: 56%;
  top: 29%;
}

.sight--two {
  right: 24%;
  top: 61%;
}

.photo-index {
  position: absolute;
  right: 30px;
  bottom: 124px;
  z-index: 4;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
}

.hero-scroll {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 132px;
  display: flex;
  align-items: center;
  gap: 14px;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
}

.hero-scroll i {
  height: 48px;
  border-left: 1px solid currentColor;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* Position */
.position-section {
  padding: 150px clamp(44px, 8vw, 140px) 128px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
  grid-template-areas:
    "copy map"
    "note map";
  gap: 58px 8vw;
  align-items: center;
  background:
    radial-gradient(circle at 86% 18%, rgba(142,63,48,.12), transparent 32%),
    var(--paper);
}

.position-copy {
  grid-area: copy;
}

.position-copy h2,
.plan-heading h2,
.brick-copy h2,
.history-heading h2,
.view-heading h2,
.route-heading h2,
.itinerary-copy h2,
.food-menu h2,
.faq-heading h2,
.closing-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 5.2vw, 82px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.045em;
}

.section-intro {
  max-width: 680px;
  margin: 34px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 2;
}

.position-facts {
  margin-top: 48px;
  border-top: 1px solid var(--ink);
}

.position-facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.position-facts b {
  font-size: 13px;
  letter-spacing: .08em;
}

.position-facts span {
  color: var(--ink-soft);
}

.harbor-map {
  grid-area: map;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.harbor-map__frame {
  position: relative;
  flex: 1;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #aabfcb;
}

.harbor-map__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.05);
}

.map-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.26) 1px, transparent 1px) 0 0 / 20% 20%,
    linear-gradient(90deg, rgba(255,255,255,.26) 1px, transparent 1px) 0 0 / 20% 20%;
  pointer-events: none;
}

.map-reticle {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 2px solid var(--brick);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(142,63,48,.18);
}

.map-reticle::after {
  content: "";
  position: absolute;
  width: 70px;
  border-top: 1px solid var(--brick);
  left: 20px;
  top: 9px;
}

.map-reticle span {
  position: absolute;
  left: 94px;
  top: -4px;
  white-space: nowrap;
  padding: 2px 7px;
  background: var(--paper);
  color: var(--brick);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.map-reticle--fort {
  left: 31%;
  top: 62%;
}

.map-reticle--channel {
  left: 55%;
  top: 38%;
  border-color: var(--harbor);
  box-shadow: 0 0 0 8px rgba(21,57,69,.16);
}

.map-reticle--channel::after {
  border-color: var(--harbor);
}

.map-reticle--channel span {
  color: var(--harbor);
}

.harbor-map figcaption,
.brick-photo figcaption,
.route-media figure figcaption,
.food-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
}

.defense-note {
  grid-area: note;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  align-items: start;
  border-top: 1px solid var(--ink);
  padding-top: 22px;
}

.defense-note__number {
  font-family: var(--serif);
  font-size: 68px;
  line-height: 1;
  color: var(--brick);
}

.defense-note p {
  margin: 0;
  max-width: 520px;
}

/* Fort plan */
.chapter--dark,
.plan-section,
.view-section {
  color: #eef2ef;
  background: var(--harbor-deep);
}

.plan-section {
  padding: 150px clamp(36px, 7vw, 122px) 144px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(circle at 76% 22%, rgba(142,63,48,.36), transparent 28%),
    var(--harbor-deep);
}

.plan-section::before {
  content: "FORT 1876";
  position: absolute;
  right: -70px;
  bottom: 140px;
  font-family: var(--serif);
  font-size: clamp(110px, 16vw, 260px);
  color: rgba(255,255,255,.025);
  letter-spacing: -.06em;
  pointer-events: none;
}

.plan-heading {
  max-width: 900px;
  margin-bottom: 70px;
}

.plan-heading p:last-child {
  max-width: 650px;
  margin: 30px 0 0 auto;
  color: rgba(255,255,255,.68);
  font-size: 16px;
}

.fort-explorer {
  display: grid;
  grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr);
  min-height: 720px;
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
}

.fort-plan {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.35);
  background:
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.035) 48px 49px),
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(255,255,255,.035) 48px 49px);
}

.fort-plan::before {
  content: "";
  position: absolute;
  inset: 8% 13% 9%;
  border: 2px solid rgba(255,255,255,.5);
  clip-path: polygon(9% 0, 91% 0, 100% 12%, 94% 100%, 11% 100%, 0 84%, 5% 16%);
}

.fort-plan::after {
  content: "";
  position: absolute;
  inset: 13% 20% 15%;
  border: 1px dashed rgba(181,155,102,.65);
  clip-path: polygon(12% 0, 88% 0, 100% 15%, 93% 100%, 8% 100%, 0 84%, 6% 12%);
}

.fort-plan__outline {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(181,155,102,.35) 49.8% 50.2%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(181,155,102,.2) 49.8% 50.2%, transparent 50.2%);
}

.fort-plan__north {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 26px;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
}

.fort-plan__north i {
  position: absolute;
  bottom: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 19px solid var(--brick-bright);
}

.fort-plan__sea {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.42);
}

.fort-plan__axis {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 12%;
  height: 76%;
  border-left: 1px dashed rgba(255,255,255,.24);
}

.fort-plan__axis span {
  position: absolute;
  left: -11px;
  top: 50%;
  padding: 6px 0;
  background: var(--harbor-deep);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.34);
}

.fort-zone {
  position: absolute;
  z-index: 5;
  margin: 0;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 0;
  background: rgba(13,41,50,.92);
  color: #fff;
  text-align: left;
  padding: 14px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background .25s ease, color .25s ease, transform .25s var(--ease), border-color .25s ease;
}

.fort-zone:hover,
.fort-zone:focus-visible {
  transform: translateY(-4px);
  border-color: #fff;
  outline: none;
}

.fort-zone.is-active {
  background: var(--brick);
  border-color: #e9b5a3;
}

.fort-zone span,
.fort-zone small {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.58);
}

.fort-zone b {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .08em;
}

.fort-zone small {
  margin-top: 10px;
}

.fort-zone--gate { left: 7%; top: 43%; width: 22%; }
.fort-zone--drill { left: 31%; top: 20%; width: 29%; height: 24%; }
.fort-zone--command { left: 39%; top: 48%; width: 25%; height: 20%; }
.fort-zone--barracks { right: 8%; top: 18%; width: 25%; height: 28%; }
.fort-zone--battery { right: 9%; bottom: 16%; width: 28%; height: 25%; }

.zone-view {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(390px, 1.15fr) auto;
  min-width: 0;
}

.zone-view__image {
  position: relative;
  overflow: hidden;
  background: #081e25;
}

.zone-view__image::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}

.zone-view__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .22s ease, transform .7s var(--ease);
}

.zone-view__image img.is-changing {
  opacity: .1;
  transform: scale(1.025);
}

.zone-view__image span {
  position: absolute;
  right: 22px;
  top: 18px;
  padding: 5px 8px;
  background: rgba(13,41,50,.8);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
}

.zone-view figcaption {
  padding: 34px 38px 40px;
  border-top: 1px solid rgba(255,255,255,.36);
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 6px 30px;
}

.zone-view figcaption > p:first-child {
  grid-row: 1 / 5;
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: #dca58e;
}

.zone-view h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 47px);
  font-weight: 600;
  line-height: 1.2;
}

.zone-view figcaption > p:nth-of-type(2) {
  margin: 14px 0 0;
  max-width: 670px;
  color: rgba(255,255,255,.72);
}

.zone-view small {
  margin-top: 16px;
  color: #dca58e;
  font-size: 12px;
}

.noscript-note {
  border: 1px solid rgba(255,255,255,.4);
  padding: 16px;
}

/* Brick editorial */
.brick-section {
  padding: 150px clamp(36px, 7vw, 118px) 160px;
  background:
    linear-gradient(90deg, rgba(142,63,48,.065) 1px, transparent 1px) 0 0 / 160px 100%,
    var(--paper);
}

.brick-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.1fr) minmax(260px, .62fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.brick-photo {
  margin: 0;
}

.brick-photo img {
  width: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
}

.brick-photo--gate {
  align-self: start;
  margin-top: 70px;
}

.brick-photo--gate img {
  aspect-ratio: 3 / 4;
}

.brick-photo--corridor {
  align-self: end;
  margin-bottom: -80px;
}

.brick-photo--corridor img {
  aspect-ratio: 2 / 3;
}

.brick-copy > p:nth-of-type(2) {
  margin: 34px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
}

.detail-register {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.detail-register li {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.detail-register li > span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--brick);
}

.detail-register b {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .08em;
}

.detail-register p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* History */
.history-section {
  padding: 152px clamp(36px, 7vw, 118px) 146px;
  background: #ded7c9;
  overflow: hidden;
}

.history-section::before {
  content: "1876";
  position: absolute;
  right: -20px;
  top: 20px;
  font-family: var(--serif);
  font-size: clamp(140px, 22vw, 360px);
  color: rgba(142,63,48,.07);
  line-height: 1;
}

.history-heading {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.timeline {
  position: relative;
  margin-top: 110px;
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
}

.timeline::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--ink);
}

.timeline-item {
  position: relative;
  padding: 0 24px 0 0;
}

.timeline-item time {
  display: block;
  height: 46px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--brick);
}

.timeline-mark {
  position: relative;
  z-index: 2;
  display: block;
  width: 13px;
  height: 13px;
  margin: -6px 0 34px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.timeline-item--major .timeline-mark {
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-bottom: 27px;
  background: var(--brick);
  box-shadow: 0 0 0 8px rgba(142,63,48,.15);
}

.timeline-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.35;
}

.timeline-item p {
  margin: 15px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.history-caption {
  margin-top: 90px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}

.history-caption i {
  flex: 1;
  border-top: 1px solid var(--ink);
}

/* Panorama */
.view-section {
  padding: 152px clamp(36px, 6vw, 104px) 132px;
}

.view-heading {
  max-width: 880px;
  margin-bottom: 58px;
}

.panorama {
  position: relative;
  margin: 0;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.4);
}

.panorama picture,
.panorama img {
  width: 100%;
  height: 100%;
}

.panorama img {
  min-height: 560px;
  object-fit: cover;
}

.panorama-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,20,25,.05), rgba(6,20,25,.42));
}

.panorama-label {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(13,41,50,.82);
  border: 1px solid rgba(255,255,255,.55);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
}

.panorama-label i {
  width: 6px;
  height: 6px;
  background: #d98b72;
  border-radius: 50%;
}

.panorama-label::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 100%;
  height: 55px;
  border-left: 1px solid rgba(255,255,255,.72);
}

.panorama-label--city { left: 13%; top: 48%; }
.panorama-label--harbor { left: 31%; top: 57%; }
.panorama-label--coast { right: 23%; top: 62%; }
.panorama-label--sea { right: 12%; top: 27%; }

.panorama figcaption {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
}

.view-register {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: end;
  margin-top: 36px;
}

.view-register > p {
  max-width: 800px;
  margin: 0;
  color: rgba(255,255,255,.72);
}

.view-register > div {
  min-width: 310px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.58);
  display: flex;
  flex-direction: column;
}

.view-register span {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255,255,255,.5);
  letter-spacing: .12em;
}

.view-register strong {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 22px;
}

/* Route */
.route-section {
  padding: 150px clamp(36px, 7vw, 118px) 150px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(21,57,69,.055) 48% 52%, transparent 52%) 0 0 / 80px 80px,
    var(--paper);
}

.route-heading {
  max-width: 950px;
}

.route-heading > p:last-child {
  max-width: 700px;
  margin: 30px 0 0 22%;
  color: var(--ink-soft);
}

.route-board {
  margin-top: 80px;
  display: grid;
  grid-template-columns: minmax(380px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}

.route-ticket {
  position: sticky;
  top: 42px;
  min-height: 390px;
  background: var(--brick);
  color: #fff;
  box-shadow: 18px 18px 0 var(--harbor);
}

.ticket-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px dashed rgba(255,255,255,.6);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .11em;
}

.ticket-top b {
  font-weight: 500;
}

.ticket-main {
  display: grid;
  grid-template-columns: 138px 1fr;
  align-items: center;
  padding: 38px 26px;
}

.ticket-code {
  font-family: var(--serif);
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
  border-right: 1px solid rgba(255,255,255,.5);
}

.ticket-main > div {
  padding-left: 24px;
}

.ticket-main small,
.ticket-fare small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.6);
}

.ticket-main strong {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 29px;
}

.ticket-main p {
  margin: 5px 0 0;
  font-size: 13px;
}

.ticket-perforation {
  position: relative;
  height: 20px;
  border-top: 1px dashed rgba(255,255,255,.6);
  border-bottom: 1px dashed rgba(255,255,255,.6);
}

.ticket-perforation::before,
.ticket-perforation::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--paper);
  border-radius: 50%;
  transform: translateY(-50%);
}

.ticket-perforation::before { left: -10px; }
.ticket-perforation::after { right: -10px; }

.ticket-fare {
  padding: 22px 26px 25px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.ticket-fare strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
}

.ticket-fare span {
  font-size: 12px;
}

.route-line {
  list-style: none;
  margin: 0;
  padding: 0;
}

.route-line li {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  min-height: 128px;
}

.route-line li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 48px;
  bottom: -14px;
  border-left: 1px solid var(--ink);
}

.route-line li > span {
  position: relative;
  z-index: 2;
  width: 49px;
  height: 49px;
  border: 1px solid var(--ink);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
}

.route-line li:nth-child(2) > span,
.route-line li:nth-child(3) > span {
  border-radius: 50%;
  background: var(--harbor);
  color: #fff;
}

.route-line b {
  font-family: var(--serif);
  font-size: 24px;
}

.route-line p {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

.route-media {
  margin-top: 105px;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: end;
}

.route-media figure {
  margin: 0;
}

.route-media figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.visit-data {
  padding-bottom: 18px;
}

.visit-data h3 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: 30px;
}

.visit-data dl {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.visit-data dl > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.visit-data dt {
  font-weight: 700;
}

.visit-data dd {
  margin: 0;
  color: var(--ink-soft);
}

.coordinate-button {
  width: 100%;
  margin-top: 34px;
  padding: 17px 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  transition: background .2s ease, color .2s ease;
}

.coordinate-button:hover,
.coordinate-button:focus-visible {
  background: var(--harbor);
  color: #fff;
  outline: none;
}

.coordinate-button span {
  font-weight: 700;
}

.coordinate-button b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
}

/* Itinerary */
.chapter--sand,
.itinerary-section {
  background: var(--paper-deep);
}

.itinerary-section {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr);
  min-height: 940px;
}

.itinerary-photo {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
}

.itinerary-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itinerary-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,41,50,.64));
}

.itinerary-photo > div {
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.itinerary-photo span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.65);
}

.itinerary-photo b {
  font-family: var(--serif);
  font-size: 38px;
}

.itinerary-copy {
  padding: 140px clamp(42px, 7vw, 110px) 140px;
}

.field-plan {
  list-style: none;
  margin: 68px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.field-plan li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.field-plan time {
  font-family: var(--mono);
  color: var(--brick);
  font-size: 13px;
}

.field-plan b {
  font-family: var(--serif);
  font-size: 22px;
}

.field-plan p {
  margin: 5px 0 0;
  color: var(--ink-soft);
}

/* Food */
.food-section {
  min-height: 960px;
  display: grid;
  grid-template-columns: 52% 48%;
  background: var(--harbor-deep);
  color: #fff;
}

.food-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.food-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.04);
}

.food-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--harbor-deep));
}

.food-photo figcaption {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 24px;
  padding: 8px 10px;
  background: rgba(13,41,50,.82);
}

.food-menu {
  padding: 132px clamp(42px, 6vw, 96px) 120px;
}

.food-menu > p:nth-of-type(2) {
  margin: 28px 0 0;
  color: rgba(255,255,255,.68);
}

.food-menu ol {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.55);
}

.food-menu li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.food-menu li span {
  font-family: var(--mono);
  font-size: 9px;
  color: #dca58e;
}

.food-menu li b {
  font-family: var(--serif);
  font-size: 22px;
}

.food-menu li em {
  font-style: normal;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.food-tip {
  margin-top: 38px;
  padding: 20px 0 0;
  border-top: 1px solid #dca58e;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
}

.food-tip b {
  color: #dca58e;
}

.food-tip p {
  margin: 0;
  color: rgba(255,255,255,.72);
}

/* FAQ */
.faq-section {
  padding: 145px clamp(36px, 9vw, 160px) 145px;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
  gap: clamp(50px, 9vw, 150px);
  background: var(--paper);
}

.faq-heading {
  position: sticky;
  top: 70px;
  align-self: start;
}

.faq-list {
  border-top: 1px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--ink);
}

.faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 24px 70px 24px 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 20px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "−";
  background: var(--brick);
  color: #fff;
}

.faq-list summary span {
  position: absolute;
  right: 48px;
  top: 26px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--brick);
}

.faq-list details p {
  margin: 0;
  padding: 0 70px 25px 0;
  color: var(--ink-soft);
}

/* Closing */
.closing-section {
  position: relative;
  min-height: 76vh;
  color: #fff;
  background: var(--harbor-deep);
  overflow: hidden;
}

.closing-image {
  position: absolute;
  inset: 0;
}

.closing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.72) contrast(1.08);
}

.closing-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,28,35,.88), rgba(8,28,35,.22) 70%);
}

.closing-copy {
  position: relative;
  z-index: 2;
  min-height: 76vh;
  padding: 16vh 9vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.closing-copy > p {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: #dca58e;
}

.closing-copy h2 {
  max-width: 820px;
}

.closing-copy .text-link {
  margin-top: 46px;
}

/* Footer */
.source-footer {
  min-height: 160px;
  padding: 36px clamp(30px, 6vw, 90px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}

.source-footer strong {
  font-family: var(--serif);
  font-size: 23px;
}

.source-footer p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.source-footer__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}

.source-footer__links a {
  border-bottom: 1px solid currentColor;
}

.toast {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 30px);
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Credits page */
.credits-page {
  min-height: 100vh;
  padding: 86px clamp(24px, 8vw, 140px) 120px;
  margin-left: var(--rail);
}

.credits-page__head {
  max-width: 880px;
  margin-bottom: 72px;
}

.credits-page__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(50px, 8vw, 110px);
  line-height: 1;
}

.credits-page__head p {
  margin-top: 28px;
  max-width: 720px;
  color: var(--ink-soft);
}

.credits-back {
  display: inline-flex;
  margin-bottom: 38px;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 1px solid currentColor;
}

.credits-table {
  border-top: 1px solid var(--ink);
}

.credit-row {
  display: grid;
  grid-template-columns: 90px minmax(190px, .85fr) minmax(260px, 1.15fr) 180px;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.credit-row > span:first-child {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--brick);
}

.credit-row b {
  font-family: var(--serif);
  font-size: 18px;
}

.credit-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.credit-row a {
  font-size: 12px;
  border-bottom: 1px solid currentColor;
}

.credits-sources {
  margin-top: 82px;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 80px;
}

.credits-sources h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 40px;
}

.credits-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.credits-sources li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.credits-sources a {
  border-bottom: 1px solid currentColor;
}

/* Responsive */
@media (max-width: 1180px) {
  :root { --rail: 72px; }

  .rail-brand { min-height: 105px; font-size: 15px; }
  .rail-nav a { height: 58px; }
  .rail-nav a span { height: 58px; }
  .rail-coordinates { height: 126px; }

  .hero { grid-template-columns: 52% 48%; }
  .hero-visual { left: 48%; }
  .hero-copy { padding-left: 5vw; padding-right: 5vw; }
  .hero h1 { font-size: clamp(72px, 10vw, 120px); }
  .hero-bearing { width: 96px; height: 96px; }
  .hero-bearing::before { height: 122px; }
  .hero-bearing::after { width: 122px; }
  .sight--one { left: 60%; }
  .sight--two { display: none; }

  .position-section {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .harbor-map__frame { min-height: 500px; }
  .fort-explorer { grid-template-columns: .9fr 1.1fr; }
  .fort-zone { padding: 10px; }
  .fort-zone b { font-size: 16px; }
  .zone-view figcaption { grid-template-columns: 110px 1fr; padding: 28px; }
  .brick-grid { grid-template-columns: .62fr 1.1fr .55fr; gap: 38px; }
  .brick-photo--corridor { margin-bottom: -20px; }
  .timeline-item { padding-right: 16px; }
  .timeline-item h3 { font-size: 18px; }
  .route-board { grid-template-columns: .85fr 1.15fr; gap: 65px; }
  .food-section { grid-template-columns: 47% 53%; }
  .food-menu { padding-left: 54px; padding-right: 54px; }
}

@media (max-width: 920px) {
  :root { --rail: 0px; }

  .site-rail { display: none; }
  main,
  .source-footer { margin-left: 0; }

  .mobile-header {
    position: fixed;
    z-index: 110;
    inset: 0 0 auto;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #fff;
    background: rgba(13,41,50,.94);
    border-bottom: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(14px);
  }

  .mobile-brand {
    font-family: var(--serif);
    font-size: 19px;
    letter-spacing: .1em;
  }

  .menu-button {
    width: 70px;
    height: 38px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .menu-button span {
    width: 22px;
    border-top: 1px solid currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .menu-button em {
    position: absolute;
    right: 0;
    top: 10px;
    font-style: normal;
    font-size: 11px;
  }

  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    z-index: -1;
    inset: 62px 0 auto;
    min-height: calc(100svh - 62px);
    padding: 34px 24px 100px;
    background:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px,
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px,
      var(--harbor-deep);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s var(--ease), opacity .25s ease;
  }

  .mobile-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu a {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
    font-family: var(--serif);
    font-size: 26px;
  }

  .mobile-menu b {
    font-family: var(--mono);
    font-size: 10px;
    color: #dca58e;
  }

  .mobile-dock {
    position: fixed;
    z-index: 105;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 54px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: #fff;
    background: rgba(13,41,50,.96);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
  }

  .mobile-dock a,
  .mobile-dock button {
    border: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    background: transparent;
    color: inherit;
    display: grid;
    place-items: center;
    font-size: 12px;
    cursor: pointer;
  }

  .mobile-dock button { border-right: 0; }

  .hero {
    min-height: 900px;
    display: block;
    padding-top: 62px;
  }

  .hero-visual {
    inset: 62px 0 auto;
    height: 54%;
  }

  .hero-visual__wash {
    background: linear-gradient(0deg, var(--harbor-deep), rgba(13,41,50,.02) 52%);
  }

  .hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 37%;
    padding: 40px 7vw 160px;
  }

  .hero h1 { font-size: clamp(78px, 18vw, 140px); }
  .hero-lead { max-width: 660px; }
  .hero-manifest {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-manifest > div { min-height: 78px; padding: 15px 20px; }
  .hero-bearing { top: 92px; right: 22px; }
  .hero-bearing em { display: none; }
  .hero-scroll,
  .photo-index { display: none; }
  .sight--one { left: 20%; top: 24%; }

  .chapter-label { display: none; }
  .position-section {
    padding: 120px 7vw 100px;
    display: flex;
    flex-direction: column;
  }
  .position-copy { order: 1; }
  .harbor-map { order: 2; width: 100%; }
  .defense-note { order: 3; width: 100%; }
  .harbor-map__frame { min-height: 520px; }

  .plan-section { padding: 120px 5vw 110px; }
  .fort-explorer { grid-template-columns: 1fr; }
  .fort-plan { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.35); min-height: 600px; }
  .zone-view { grid-template-rows: 500px auto; }

  .brick-section { padding: 120px 7vw; }
  .brick-grid {
    grid-template-columns: .72fr 1.28fr;
    grid-template-areas:
      "gate copy"
      "corridor copy";
    align-items: start;
  }
  .brick-photo--gate { grid-area: gate; margin: 60px 0 0; }
  .brick-photo--corridor { grid-area: corridor; margin: 0; }
  .brick-copy { grid-area: copy; }

  .history-section { padding: 120px 7vw; }
  .timeline {
    margin-top: 70px;
    display: block;
  }
  .timeline::before {
    top: 0;
    bottom: 0;
    left: 11px;
    right: auto;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
  .timeline-item {
    padding: 0 0 52px 54px;
  }
  .timeline-item time { height: auto; }
  .timeline-mark {
    position: absolute;
    left: 5px;
    top: 8px;
    margin: 0;
  }
  .timeline-item--major .timeline-mark {
    left: -2px;
    top: 0;
    margin: 0;
  }
  .timeline-item h3 { margin-top: 8px; font-size: 23px; }

  .view-section { padding: 120px 5vw 100px; }
  .panorama,
  .panorama img { min-height: 620px; }
  .panorama img { object-position: 64% center; }
  .panorama-label--city { left: 5%; top: 39%; }
  .panorama-label--harbor { left: 20%; top: 57%; }
  .panorama-label--coast { right: 8%; top: 70%; }
  .panorama-label--sea { right: 8%; top: 22%; }
  .view-register { grid-template-columns: 1fr; gap: 30px; }

  .route-section { padding: 120px 7vw; }
  .route-heading > p:last-child { margin-left: 0; }
  .route-board { grid-template-columns: 1fr; }
  .route-ticket { position: relative; top: auto; max-width: 570px; }
  .route-media { grid-template-columns: 1fr; }
  .visit-data { max-width: 620px; }

  .itinerary-section { grid-template-columns: 42% 58%; }
  .itinerary-photo { min-height: 660px; }
  .itinerary-copy { padding: 110px 6vw; }

  .food-section { grid-template-columns: 42% 58%; }
  .food-menu { padding: 110px 6vw; }
  .food-menu li { grid-template-columns: 44px 1fr; }
  .food-menu li em { grid-column: 2; }

  .faq-section { padding: 120px 7vw; grid-template-columns: 1fr; }
  .faq-heading { position: static; }

  .source-footer { padding-bottom: 90px; }
  .credits-page { margin-left: 0; padding-top: 100px; }
  .credit-row { grid-template-columns: 60px 1fr 1.2fr; }
  .credit-row a { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
  body { background-size: 24px 24px; }

  .hero { min-height: 930px; }
  .hero-visual { height: 46%; }
  .hero-visual img { object-position: 58% center; }
  .hero-copy { top: 33%; padding-left: 22px; padding-right: 22px; }
  .eyebrow { margin-bottom: 26px; font-size: 8px; }
  .hero h1 { font-size: clamp(68px, 23vw, 105px); }
  .hero h1 span:last-child { margin-left: .24em; }
  .hero-lead { margin-top: 32px; font-size: 16px; line-height: 1.75; }
  .hero-actions { margin-top: 28px; gap: 22px; }
  .hero-manifest strong { font-size: 15px; }
  .hero-bearing { width: 70px; height: 70px; top: 86px; right: 18px; }
  .hero-bearing::before { height: 88px; }
  .hero-bearing::after { width: 88px; }
  .hero-bearing i { border-left-width: 4px; border-right-width: 4px; border-bottom-width: 18px; }
  .sight { display: none; }

  .position-copy h2,
  .plan-heading h2,
  .brick-copy h2,
  .history-heading h2,
  .view-heading h2,
  .route-heading h2,
  .itinerary-copy h2,
  .food-menu h2,
  .faq-heading h2,
  .closing-copy h2 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .position-section { padding: 100px 22px 90px; }
  .position-facts > div { grid-template-columns: 110px 1fr; }
  .harbor-map__frame { min-height: 400px; }
  .map-reticle--fort { left: 24%; top: 62%; }
  .map-reticle span { left: 55px; }
  .map-reticle::after { width: 34px; }
  .defense-note { grid-template-columns: 70px 1fr; }
  .defense-note__number { font-size: 52px; }

  .plan-section { padding: 100px 16px 86px; }
  .plan-heading p:last-child { margin-left: 0; }
  .fort-plan { min-height: 500px; }
  .fort-zone { padding: 8px; }
  .fort-zone span,
  .fort-zone small { font-size: 6px; }
  .fort-zone b { font-size: 13px; }
  .fort-zone--gate { left: 5%; width: 26%; }
  .fort-zone--drill { left: 30%; width: 31%; }
  .fort-zone--command { left: 36%; width: 29%; }
  .fort-zone--barracks { right: 4%; width: 28%; }
  .fort-zone--battery { right: 5%; width: 31%; }
  .zone-view { grid-template-rows: 330px auto; }
  .zone-view figcaption { display: block; padding: 24px 20px 28px; }
  .zone-view figcaption > p:first-child { margin-bottom: 8px; }

  .brick-section { padding: 100px 22px; }
  .brick-grid {
    display: flex;
    flex-direction: column;
  }
  .brick-copy { order: 1; }
  .brick-photo--gate { order: 2; margin: 18px 0 0; width: 78%; }
  .brick-photo--corridor { order: 3; width: 70%; margin: -90px 0 0 auto; }
  .brick-photo--gate img { aspect-ratio: 4 / 5; }
  .brick-photo--corridor img { aspect-ratio: 3 / 4; }

  .history-section { padding: 100px 22px; }
  .history-section::before { top: 50px; }
  .history-caption { margin-top: 30px; }

  .view-section { padding: 100px 16px 86px; }
  .panorama,
  .panorama img { min-height: 560px; }
  .panorama figcaption { display: block; }
  .panorama figcaption span { display: block; margin-top: 4px; }
  .panorama-label { font-size: 7px; }
  .panorama-label::after { height: 34px; }
  .view-register > div { min-width: 0; }

  .route-section { padding: 100px 22px; }
  .route-board { margin-top: 55px; }
  .route-ticket { min-height: 340px; box-shadow: 10px 10px 0 var(--harbor); }
  .ticket-main { grid-template-columns: 100px 1fr; padding: 28px 20px; }
  .ticket-code { font-size: 62px; }
  .ticket-main strong { font-size: 23px; }
  .ticket-fare strong { font-size: 35px; }
  .route-line li { grid-template-columns: 58px 1fr; min-height: 132px; }
  .route-line li:not(:last-child)::before { left: 20px; }
  .route-line li > span { width: 41px; height: 41px; }
  .route-line b { font-size: 21px; }
  .route-media { margin-top: 70px; }
  .coordinate-button { align-items: flex-start; flex-direction: column; }

  .itinerary-section { display: block; }
  .itinerary-photo { position: relative; height: 66vh; min-height: 500px; }
  .itinerary-copy { padding: 100px 22px; }
  .field-plan li { grid-template-columns: 70px 1fr; gap: 12px; }

  .food-section { display: block; }
  .food-photo { height: 60vh; min-height: 480px; }
  .food-photo::after { background: linear-gradient(0deg, var(--harbor-deep), transparent 48%); }
  .food-menu { padding: 80px 22px 100px; }
  .food-menu li { grid-template-columns: 38px 1fr; }
  .food-tip { grid-template-columns: 80px 1fr; }

  .faq-section { padding: 100px 22px; gap: 45px; }
  .faq-list summary { padding-right: 60px; font-size: 18px; }
  .faq-list summary span { right: 42px; }
  .faq-list details p { padding-right: 0; }

  .closing-section,
  .closing-copy { min-height: 72vh; }
  .closing-copy { padding: 14vh 22px 20vh; }
  .closing-image img { object-position: 68% center; }

  .source-footer {
    display: block;
    padding: 34px 22px 100px;
  }
  .source-footer__links {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-dock { left: 6px; right: 6px; bottom: 6px; }
  .mobile-dock a,
  .mobile-dock button { font-size: 11px; }
  .toast { bottom: 74px; white-space: nowrap; }

  .credits-page { padding: 90px 22px 110px; }
  .credit-row { display: block; }
  .credit-row > * { display: block; margin-top: 6px; }
  .credits-sources { grid-template-columns: 1fr; gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}