:root {
  --ink: #132238;
  --muted: #607086;
  --soft: #f3f7f7;
  --paper: #ffffff;
  --line: #dce6e7;
  --teal: #0f766e;
  --teal-dark: #0b5c57;
  --teal-soft: #dff6f2;
  --orange: #f97316;
  --orange-dark: #c94f0c;
  --orange-soft: #fff0e3;
  --navy: #0d1e2e;
  --shadow-sm: 0 8px 30px rgba(15, 46, 55, .08);
  --shadow-lg: 0 24px 70px rgba(15, 46, 55, .16);
  --radius-sm: .8rem;
  --radius: 1.25rem;
  --radius-lg: 2rem;
  --max-width: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 5%, rgba(15, 118, 110, .06), transparent 26rem),
    linear-gradient(180deg, #fbfdfd 0, #f6f9f9 45rem, #fbfcfc 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
::selection { color: #063e3a; background: #b9ece4; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: #fff;
  background: var(--teal);
  border-radius: .65rem;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(249, 115, 22, .45); outline-offset: 3px; }

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom: 1px solid rgba(220, 230, 231, .86);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 24px rgba(13, 30, 46, .05);
  backdrop-filter: blur(18px);
}
.header-inner {
  width: min(var(--max-width), calc(100% - 2rem));
  min-height: 4.8rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.brand-mark {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--teal), #20a898);
  border-radius: .7rem .7rem 1rem .7rem;
  box-shadow: 0 8px 20px rgba(15, 118, 110, .24);
}
.brand-mark svg { width: 1.2rem; height: 1.2rem; }
.brand-accent { color: var(--teal); }
.desktop-nav { display: flex; align-items: center; gap: .15rem; margin-left: 1rem; }
.nav-link {
  padding: .6rem .8rem;
  border-radius: .7rem;
  color: #56677c;
  font-size: .88rem;
  font-weight: 750;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav-link:hover, .nav-link.active { color: var(--teal-dark); background: var(--teal-soft); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.language-menu { position: relative; flex: 0 0 auto; }
.language-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-width: 3.1rem;
  height: 2.45rem;
  padding: 0 .72rem;
  color: var(--teal-dark);
  border: 1px solid #b8dcd8;
  border-radius: 999px;
  background: #f6fbfa;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.language-menu-toggle svg { width: .95rem; height: .95rem; }
.language-menu-toggle:hover, .language-menu-toggle:focus, .language-menu.open .language-menu-toggle { color: #fff; border-color: var(--teal); background: var(--teal); }
.language-menu-panel {
  position: absolute;
  z-index: 95;
  top: calc(100% + .55rem);
  right: 0;
  width: 11rem;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.language-menu-panel[hidden] { display: none; }
.language-menu-panel a { display: flex; align-items: center; min-height: 2.45rem; padding: .55rem .7rem; color: #405368; border-radius: .6rem; font-size: .78rem; font-weight: 800; }
.language-menu-panel a:hover, .language-menu-panel a:focus { color: var(--teal-dark); background: var(--teal-soft); }
.language-menu-panel a[aria-current="page"]::after { content: "✓"; margin-left: auto; color: var(--teal); }
.icon-button {
  width: 2.65rem;
  height: 2.65rem;
  display: none;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: .8rem;
  cursor: pointer;
}
.icon-button:hover { color: var(--teal); border-color: #9bd3cd; background: var(--teal-soft); }
.icon-button svg { width: 1.15rem; height: 1.15rem; }
.header-search { position: relative; width: min(19rem, 28vw); }
.header-search > svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: .9rem;
  width: 1rem;
  height: 1rem;
  color: #7b8a9b;
  transform: translateY(-50%);
  pointer-events: none;
}
.header-search input {
  width: 100%;
  height: 2.65rem;
  padding: 0 1rem 0 2.55rem;
  color: var(--ink);
  border: 1px solid transparent;
  background: #eef3f4;
  border-radius: 999px;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.header-search input:focus { border-color: #80c9c1; background: #fff; box-shadow: 0 0 0 4px rgba(15, 118, 110, .09); }
.search-results {
  position: absolute;
  top: calc(100% + .7rem);
  right: 0;
  width: min(27rem, calc(100vw - 2rem));
  padding: .55rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .98);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
}
.search-results[hidden] { display: none; }
.search-result {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border-radius: .75rem;
}
.search-result:hover, .search-result:focus { background: var(--teal-soft); }
.search-result-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; color: var(--teal); background: #fff; border: 1px solid #c9e6e2; border-radius: .7rem; }
.search-result strong { display: block; font-size: .86rem; line-height: 1.25; }
.search-result small { display: block; color: var(--muted); font-size: .72rem; }
.search-result span:last-child { color: var(--orange-dark); font-size: .72rem; font-weight: 800; }
.search-empty { padding: 1.2rem; color: var(--muted); font-size: .85rem; text-align: center; }

.site-shell {
  position: relative;
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: 2.5rem;
}
.sidebar {
  position: sticky;
  top: 4.8rem;
  align-self: start;
  height: calc(100vh - 4.8rem);
  padding: 2rem 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd8da transparent;
}
.sidebar-mobile-head { display: none; }
.sidebar-section { margin-bottom: 1.7rem; }
.sidebar-label {
  margin: 0 0 .55rem;
  color: #8a98a9;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.sidebar-links { display: grid; gap: .25rem; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .68rem;
  min-height: 2.55rem;
  padding: .55rem .7rem;
  color: #57687c;
  border-radius: .72rem;
  font-size: .86rem;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sidebar-link svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.sidebar-link:hover { color: var(--teal-dark); background: #eaf5f3; transform: translateX(2px); }
.sidebar-link.active { color: #fff; background: var(--navy); box-shadow: 0 8px 20px rgba(13, 30, 46, .12); }
.sidebar-link.sub { margin-left: 1.15rem; font-size: .82rem; }
.sidebar-link.sub::before { content: ""; width: .35rem; height: .35rem; background: #9ab2b5; border-radius: 50%; }
.sidebar-link.sub.active::before { background: #53d1c2; }
.sidebar-accordion {
  margin: .35rem 0;
  border: 1px solid #dbe5e6;
  border-radius: .85rem;
  background: rgba(255,255,255,.72);
  overflow: clip;
}
.sidebar-accordion > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.7rem;
  padding: .62rem 2rem .62rem .72rem;
  color: #405568;
  cursor: pointer;
  list-style: none;
  font-size: .79rem;
  font-weight: 850;
  line-height: 1.25;
  transition: color .18s ease, background .18s ease;
}
.sidebar-accordion > summary::-webkit-details-marker { display: none; }
.sidebar-accordion > summary::after {
  content: "";
  position: absolute;
  right: .8rem;
  width: .42rem;
  height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.sidebar-accordion[open] > summary::after { transform: rotate(225deg) translate(-1px,-1px); }
.sidebar-accordion > summary:hover { color: var(--teal-dark); background: #eff8f6; }
.sidebar-accordion > summary:focus-visible { outline: 3px solid rgba(29,143,130,.28); outline-offset: -3px; }
.sidebar-summary-main { display: flex; min-width: 0; align-items: center; gap: .58rem; }
.sidebar-summary-main svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.sidebar-summary-meta { color: #8b9aa6; font-size: .62rem; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.sidebar-accordion-body { padding: .35rem; border-top: 1px solid rgba(204,219,220,.78); }
.sidebar-continent { margin-top: .45rem; border-color: #bfd9d5; background: linear-gradient(155deg, #eaf6f3, #fff 60%); }
.sidebar-continent > summary { min-height: 3.1rem; color: #133f42; font-size: .9rem; }
.sidebar-continent > summary .sidebar-summary-main svg { color: var(--teal); }
.sidebar-country { border: 0; border-bottom: 1px solid #dce9e7; border-radius: .55rem; background: transparent; }
.sidebar-country:last-child { border-bottom: 0; }
.sidebar-country > summary { min-height: 2.45rem; padding-block: .52rem; }
.sidebar-country > .sidebar-accordion-body { padding: .25rem 0 .5rem; border-top: 0; }
.sidebar-country .sidebar-link.sub { margin-left: .45rem; }
.sidebar-chapters { border-color: transparent; border-top-color: #dce5e7; border-radius: 0; background: transparent; }
.sidebar-chapters > summary { padding-left: .35rem; color: #667887; font-size: .72rem; letter-spacing: .025em; }
.sidebar-chapters[open] > summary { color: var(--teal-dark); }
.sidebar-chapters > .sidebar-accordion-body { padding: .25rem 0 .5rem .35rem; border-top: 0; border-left: 2px solid #d9ebe8; }
.sidebar-chapters .sidebar-link { font-size: .79rem; }
.sidebar-note {
  padding: 1rem;
  border: 1px solid #cee5e2;
  background: linear-gradient(145deg, #f0fbf9, #fff);
  border-radius: 1rem;
  color: var(--muted);
  font-size: .76rem;
}
.sidebar-note strong { display: block; margin-bottom: .25rem; color: var(--teal-dark); font-size: .8rem; }
.mobile-overlay { display: none; }
.page-content { min-width: 0; padding: 2.4rem 0 5rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  padding: .42rem .7rem;
  color: #9a3e0b;
  background: var(--orange-soft);
  border: 1px solid #fed0ad;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.eyebrow svg { width: .9rem; height: .9rem; }
.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(19rem, .96fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 35rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid #d7e5e6;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(233, 247, 244, .9));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.home-hero::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  top: -13rem;
  left: 20%;
  background: rgba(15, 118, 110, .08);
  border-radius: 50%;
  filter: blur(10px);
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 {
  max-width: 13ch;
  margin: 0 0 1.25rem;
  color: var(--navy);
  font-size: clamp(2.65rem, 5.4vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.065em;
}
.hero-copy h1 span { color: var(--teal); }
.hero-copy > p { max-width: 36rem; margin: 0 0 1.75rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .85rem;
  font-weight: 850;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 1rem; height: 1rem; }
.button.primary { color: #fff; background: var(--teal); box-shadow: 0 12px 28px rgba(15, 118, 110, .2); }
.button.primary:hover { background: var(--teal-dark); box-shadow: 0 16px 32px rgba(15, 118, 110, .26); }
.button.secondary { color: var(--ink); background: rgba(255, 255, 255, .8); border-color: #cfdcde; }
.button.secondary:hover { border-color: #9fc8c4; background: #fff; }
.hero-visual { position: relative; min-height: 27rem; }
.hero-image-main {
  position: absolute;
  inset: 0 0 1rem 2rem;
  width: calc(100% - 2rem);
  height: calc(100% - 1rem);
  object-fit: cover;
  border-radius: 1.7rem;
  box-shadow: var(--shadow-lg);
}
.hero-image-main::after { content: ""; }
.hero-stamp {
  position: absolute;
  z-index: 2;
  right: -1rem;
  bottom: 0;
  width: 9.5rem;
  padding: 1rem;
  color: #fff;
  background: rgba(13, 30, 46, .92);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
.hero-stamp strong { display: block; color: #7ce0d4; font-size: 1.2rem; }
.hero-stamp span { display: block; margin-top: .2rem; color: #c4d1dc; font-size: .72rem; line-height: 1.4; }
.hero-chip {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  left: 0;
  padding: .68rem .85rem;
  color: #7f3309;
  background: rgba(255, 246, 236, .94);
  border: 1px solid #ffd4b5;
  border-radius: .85rem;
  box-shadow: var(--shadow-sm);
  font-size: .75rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: 1rem;
}
.trust-item { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.1rem; background: rgba(255, 255, 255, .88); }
.trust-item svg { width: 1.1rem; height: 1.1rem; color: var(--teal); flex: 0 0 auto; }
.trust-item strong { display: block; font-size: .8rem; line-height: 1.25; }
.trust-item span { display: block; color: var(--muted); font-size: .7rem; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 1rem; color: #728096; font-size: .78rem; font-weight: 700; }
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs svg { width: .8rem; height: .8rem; }
.page-hero {
  position: relative;
  min-height: 32rem;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.page-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(9, 23, 33, .08) 10%, rgba(9, 23, 33, .9) 100%); }
.page-hero-content { width: 100%; max-width: 48rem; padding: clamp(1.6rem, 5vw, 4rem); color: #fff; }
.page-hero-content .eyebrow { color: #fff4ec; background: rgba(249, 115, 22, .22); border-color: rgba(255, 185, 130, .45); }
.page-hero h1 { margin: 0 0 1rem; font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -.055em; }
.page-hero p { max-width: 42rem; margin: 0; color: #e2ecf1; font-size: clamp(1rem, 1.6vw, 1.18rem); }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.page-hero-meta span { padding: .45rem .65rem; color: #effafa; background: rgba(9, 23, 33, .48); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: .72rem; font-weight: 750; backdrop-filter: blur(8px); }

.area-hero {
  position: relative;
  min-height: 33rem;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(22rem, 1.08fr);
  overflow: hidden;
  border: 1px solid #d5e3e3;
  background: linear-gradient(145deg, #eff9f7, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.area-hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.area-hero-copy h1 { margin: 0 0 1rem; color: var(--navy); font-size: clamp(2.8rem, 5.8vw, 5.3rem); line-height: .96; letter-spacing: -.06em; }
.area-hero-copy > p { max-width: 37rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.area-hero-media { position: relative; min-height: 33rem; overflow: hidden; }
.area-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 30, 46, .2), transparent 45%); }
.area-hero-stamp { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem; max-width: 13rem; padding: .9rem 1rem; color: #dce8ec; background: rgba(13, 30, 46, .9); border: 1px solid rgba(255, 255, 255, .16); border-radius: 1rem; box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); font-size: .72rem; line-height: 1.45; }
.area-hero-stamp strong { display: block; margin-bottom: .18rem; color: #76dfd2; font-size: .88rem; }
.area-hero-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.area-hero-meta span { padding: .42rem .62rem; color: var(--teal-dark); background: rgba(255, 255, 255, .75); border: 1px solid #c5dedb; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.area-hero--dark { border-color: #243d50; background: radial-gradient(circle at 15% 20%, #173f48, transparent 48%), var(--navy); }
.area-hero--dark .area-hero-copy h1 { color: #fff; }
.area-hero--dark .area-hero-copy > p { color: #c4d4dd; }
.area-hero--dark .area-hero-copy .eyebrow { color: #ffe8d6; background: rgba(249, 115, 22, .18); border-color: rgba(255, 176, 111, .38); }
.area-hero--dark .area-hero-meta span { color: #eaf8f6; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.area-hero--reverse { grid-template-columns: minmax(22rem, 1.08fr) minmax(0, .92fr); }
.area-hero--reverse .area-hero-media { order: -1; }
.area-hero--reverse .area-hero-media::after { background: linear-gradient(270deg, rgba(13, 30, 46, .18), transparent 45%); }
.area-hero--poster { grid-template-columns: minmax(19rem, .76fr) minmax(0, 1.24fr); background: linear-gradient(135deg, #fff7ef, #fff 54%, #eaf7f5); }
.area-hero--poster .area-hero-media { order: -1; min-height: 38rem; }
.area-hero--poster .area-hero-media > img { object-position: 50% 38%; }
.area-hero--poster .area-hero-media::after { background: linear-gradient(0deg, rgba(13, 30, 46, .42), transparent 55%); }
.page-hero--calm::after { background: linear-gradient(90deg, rgba(9, 23, 33, .84) 0, rgba(9, 23, 33, .48) 48%, rgba(9, 23, 33, .08) 82%); }
.page-hero--calm .page-hero-content { max-width: 42rem; }

.area-jump-nav {
  display: flex;
  gap: .45rem;
  margin-top: 1rem;
  padding: .65rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.area-jump-nav a { flex: 0 0 auto; padding: .48rem .7rem; color: #536579; border-radius: .65rem; font-size: .74rem; font-weight: 800; }
.area-jump-nav a:hover { color: var(--teal-dark); background: var(--teal-soft); }

.zone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.zone-card { position: relative; min-height: 14rem; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 1.25rem; box-shadow: var(--shadow-sm); }
.zone-card::before { content: ""; position: absolute; top: -3rem; right: -3rem; width: 9rem; height: 9rem; background: var(--teal-soft); border-radius: 50%; opacity: .72; }
.zone-card:nth-child(2n)::before { background: var(--orange-soft); }
.zone-card small { position: relative; color: var(--orange-dark); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.zone-card h3 { position: relative; margin: .35rem 0 .5rem; color: var(--navy); font-size: 1.22rem; line-height: 1.2; }
.zone-card p { position: relative; margin: 0; color: var(--muted); font-size: .84rem; }
.zone-card .zone-meta { position: relative; display: inline-flex; margin-top: 1rem; padding: .3rem .5rem; color: var(--teal-dark); background: #edf8f6; border-radius: 999px; font-size: .67rem; font-weight: 850; }

.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.decision-card { padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid #cfe1df; background: linear-gradient(145deg, #edf9f7, #fff); border-radius: 1.25rem; }
.decision-card.caution { border-color: #f4d0b2; background: linear-gradient(145deg, #fff5eb, #fff); }
.decision-card h3 { margin: 0 0 .8rem; color: var(--navy); font-size: 1.2rem; }
.decision-card ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .84rem; }

.route-board { overflow: hidden; color: #e8f1f4; background: radial-gradient(circle at 85% 15%, rgba(32, 168, 152, .2), transparent 24rem), var(--navy); border: 1px solid #233e52; border-radius: 1.4rem; box-shadow: var(--shadow-lg); }
.route-board-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.4rem 1rem; border-bottom: 1px solid #284156; }
.route-board-head h3 { margin: 0; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); }
.route-board-head span { color: #ffb47c; font-size: .72rem; font-weight: 850; }
.route-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-stop { position: relative; padding: 1.35rem; border-right: 1px solid #284156; }
.route-stop:last-child { border-right: 0; }
.route-stop::before { content: ""; display: block; width: .75rem; height: .75rem; margin-bottom: .8rem; background: #70dacd; border: 3px solid #183449; border-radius: 50%; box-shadow: 0 0 0 2px #70dacd; }
.route-stop small { color: #77ded2; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.route-stop h4 { margin: .3rem 0 .35rem; color: #fff; font-size: .98rem; }
.route-stop p { margin: 0; color: #aebfca; font-size: .76rem; }

/* Tokyo guide system: shared content rules with deliberately different hero compositions. */
.tokyo-city-hero {
  position: relative;
  min-height: 39rem;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(25rem, 1.14fr);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(239, 68, 68, .22), transparent 22rem),
    linear-gradient(135deg, #111827, #07111f 70%);
  border: 1px solid #263449;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.tokyo-city-copy { align-self: center; padding: clamp(2rem, 5vw, 4.2rem); }
.tokyo-city-copy .eyebrow { color: #ffe8df; background: rgba(239, 68, 68, .14); border-color: rgba(251, 146, 60, .38); }
.tokyo-city-copy h1 { margin: 0 0 1rem; font-size: clamp(3.4rem, 8vw, 7.2rem); line-height: .84; letter-spacing: -.075em; }
.tokyo-city-copy > p { max-width: 34rem; margin: 0; color: #cbd5e1; font-size: clamp(1rem, 1.6vw, 1.14rem); }
.tokyo-city-copy .page-hero-meta span { background: rgba(255, 255, 255, .08); }
.tokyo-city-mosaic { position: relative; min-height: 39rem; padding: 1.15rem; }
.tokyo-city-mosaic::before { content: ""; position: absolute; inset: 9% 5% 4% 20%; border: 1px solid rgba(255, 255, 255, .13); border-radius: 7rem 1.4rem 1.4rem 1.4rem; }
.tokyo-city-mosaic .tokyo-mosaic-main { position: absolute; inset: 1.15rem 1.15rem 8.6rem 4.4rem; width: calc(100% - 5.55rem); height: calc(100% - 9.75rem); object-fit: cover; border-radius: 6rem 1.15rem 1.15rem 1.15rem; box-shadow: 0 25px 65px rgba(0, 0, 0, .35); }
.tokyo-city-mosaic .tokyo-mosaic-small { position: absolute; right: 1.15rem; bottom: 1.15rem; width: 52%; height: 11rem; object-fit: cover; border: 5px solid #0b1524; border-radius: 1rem; }
.tokyo-mosaic-note { position: absolute; z-index: 2; left: 1.15rem; bottom: 1.35rem; width: 45%; padding: 1rem; color: #cbd5e1; background: rgba(15, 23, 42, .92); border: 1px solid #344154; border-radius: .9rem; font-size: .72rem; }
.tokyo-mosaic-note strong { display: block; color: #fbbf24; font-size: .86rem; }

.tokyo-area-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.tokyo-area-card { position: relative; min-height: 17rem; display: flex; align-items: end; grid-column: span 4; overflow: hidden; isolation: isolate; color: #fff; border-radius: 1.25rem; box-shadow: var(--shadow-sm); }
.tokyo-area-card.wide { grid-column: span 8; }
.tokyo-area-card.full { min-height: 15rem; grid-column: 1 / -1; }
.tokyo-area-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tokyo-area-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(5, 13, 24, .92)); }
.tokyo-area-card:hover > img { transform: scale(1.04); }
.tokyo-area-card-copy { width: 100%; padding: 1.3rem; }
.tokyo-area-card small { color: #bae6fd; font-size: .64rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.tokyo-area-card h3 { margin: .25rem 0 .35rem; font-size: 1.35rem; line-height: 1.1; }
.tokyo-area-card p { margin: 0; color: #dbe7ef; font-size: .77rem; }
.tokyo-area-card span { display: inline-block; margin-top: .75rem; color: #fbbf24; font-size: .73rem; font-weight: 850; }

.tokyo-base-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #d9e1e8; background: #fff; border-radius: 1.25rem; box-shadow: var(--shadow-sm); }
.tokyo-base-meter article { padding: 1.35rem; border-right: 1px solid #e2e8f0; }
.tokyo-base-meter article:last-child { border-right: 0; }
.tokyo-base-meter small { color: #64748b; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tokyo-base-meter h3 { margin: .3rem 0; font-size: 1.06rem; }
.tokyo-base-meter p { margin: 0; color: var(--muted); font-size: .76rem; }
.tokyo-score { display: flex; gap: .2rem; margin-top: .75rem; }
.tokyo-score i { width: 1rem; height: .3rem; background: #dbe4ea; border-radius: 999px; }
.tokyo-score i.on { background: #ef4444; }

body[data-city="tokyo"] {
  --area-accent: #dc2626;
  --area-accent-2: #f97316;
  --area-soft: #fff1f2;
  --area-dark: #111827;
}
body[data-area="shinjuku"] { --area-accent: #f43f5e; --area-accent-2: #fb923c; --area-soft: #fff1f2; --area-dark: #150b18; }
body[data-area="shibuya-harajuku"] { --area-accent: #db2777; --area-accent-2: #65a30d; --area-soft: #fdf2f8; --area-dark: #271021; }
body[data-area="asakusa-ueno"] { --area-accent: #b91c1c; --area-accent-2: #b7791f; --area-soft: #fff7ed; --area-dark: #35140f; }
body[data-area="tokyo-station-ginza"] { --area-accent: #b78628; --area-accent-2: #1e3a5f; --area-soft: #fbf7ed; --area-dark: #0d2035; }
body[data-area="akihabara-kanda"] { --area-accent: #22d3ee; --area-accent-2: #a855f7; --area-soft: #ecfeff; --area-dark: #07111c; }
body[data-area="roppongi-azabu"] { --area-accent: #d69e2e; --area-accent-2: #111827; --area-soft: #faf7ef; --area-dark: #11100e; }
body[data-area="odaiba-toyosu"] { --area-accent: #0284c7; --area-accent-2: #14b8a6; --area-soft: #effaff; --area-dark: #05253b; }
body[data-area="ikebukuro"] { --area-accent: #7c3aed; --area-accent-2: #ec4899; --area-soft: #f5f3ff; --area-dark: #1e1535; }
body[data-city="tokyo"] .section-kicker { color: var(--area-accent); }
body[data-city="tokyo"] .fact-card small { color: var(--area-accent); }
body[data-city="tokyo"] .zone-card::before { background: var(--area-soft); }
body[data-city="tokyo"] .zone-card:nth-child(2n)::before { background: color-mix(in srgb, var(--area-accent-2) 15%, white); }
body[data-city="tokyo"] .zone-card small { color: var(--area-accent); }
body[data-city="tokyo"] .zone-card .zone-meta { color: var(--area-dark); background: var(--area-soft); }
body[data-city="tokyo"] .decision-card { border-color: color-mix(in srgb, var(--area-accent) 24%, white); background: linear-gradient(145deg, var(--area-soft), #fff); }
body[data-city="tokyo"] .decision-card.caution { border-color: color-mix(in srgb, var(--area-accent-2) 28%, white); background: linear-gradient(145deg, color-mix(in srgb, var(--area-accent-2) 10%, white), #fff); }
body[data-city="tokyo"] .route-board { background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--area-accent) 28%, transparent), transparent 24rem), var(--area-dark); border-color: color-mix(in srgb, var(--area-accent) 24%, #1f2937); }
body[data-city="tokyo"] .route-stop::before { background: var(--area-accent); border-color: var(--area-dark); box-shadow: 0 0 0 2px var(--area-accent); }
body[data-city="tokyo"] .route-stop small, body[data-city="tokyo"] .route-board-head span { color: color-mix(in srgb, var(--area-accent) 58%, white); }
body[data-city="tokyo"] .area-jump-nav a:hover { color: var(--area-dark); background: var(--area-soft); }

.tokyo-area-hero {
  position: relative;
  min-height: 35rem;
  display: grid;
  overflow: hidden;
  border: 1px solid #d9e1e8;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.tokyo-area-copy { position: relative; z-index: 2; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.tokyo-area-copy h1 { margin: 0 0 1rem; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .92; letter-spacing: -.065em; }
.tokyo-area-copy > p { max-width: 36rem; margin: 0; color: inherit; opacity: .78; font-size: clamp(1rem, 1.5vw, 1.12rem); }
.tokyo-area-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.tokyo-area-meta span { padding: .42rem .62rem; color: inherit; background: rgba(255, 255, 255, .1); border: 1px solid currentColor; border-radius: 999px; font-size: .69rem; font-weight: 800; opacity: .88; }
.tokyo-area-media { position: relative; min-height: 35rem; }
.tokyo-area-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tokyo-area-caption { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; max-width: 14rem; padding: .85rem 1rem; color: #edf2f7; background: rgba(7, 17, 28, .86); border: 1px solid rgba(255, 255, 255, .18); border-radius: .9rem; font-size: .7rem; backdrop-filter: blur(10px); }
.tokyo-area-caption strong { display: block; margin-bottom: .18rem; color: var(--area-accent); font-size: .84rem; }

.tokyo-hero-neon { display: flex; align-items: end; color: #fff; border-color: #3f1c31; }
.tokyo-hero-neon .tokyo-area-media { position: absolute; z-index: -2; inset: 0; }
.tokyo-hero-neon::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(9, 5, 14, .96) 0, rgba(17, 7, 20, .7) 48%, rgba(17, 7, 20, .06) 82%); }
.tokyo-hero-neon .tokyo-area-copy { width: min(100%, 45rem); }
.tokyo-hero-neon .eyebrow { color: #ffe4e6; background: rgba(244, 63, 94, .18); border-color: rgba(251, 146, 60, .38); }

.tokyo-hero-split { grid-template-columns: minmax(20rem, .82fr) minmax(0, 1.18fr); color: #361226; background: linear-gradient(145deg, #fdf2f8, #fff 65%); }
.tokyo-hero-split .tokyo-area-media { order: 2; }
.tokyo-hero-split .tokyo-area-media::before { content: "TOKYO / STYLE / STREET"; position: absolute; z-index: 2; top: 1rem; right: 1rem; padding: .45rem .6rem; color: #fff; background: #db2777; font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.tokyo-hero-split .tokyo-area-meta span { color: #6b214b; background: #fff; }

.tokyo-hero-paper { grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr); color: #35140f; background: #fbf3e5; border-color: #e1c9a7; }
.tokyo-hero-paper::before { content: "浅 草 · 上 野"; position: absolute; z-index: 3; top: 1.6rem; right: 1.6rem; color: rgba(185, 28, 28, .18); font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 4.8rem); writing-mode: vertical-rl; letter-spacing: .14em; pointer-events: none; }
.tokyo-hero-paper .tokyo-area-media { order: -1; margin: 1.1rem; min-height: 32.8rem; }
.tokyo-hero-paper .tokyo-area-media > img { border-radius: 9rem 9rem .8rem .8rem; }
.tokyo-hero-paper .tokyo-area-meta span { color: #6f261d; background: rgba(255, 255, 255, .52); }

.tokyo-hero-editorial { display: block; min-height: 39rem; color: #fff; background: #0d2035; border-color: #233b55; }
.tokyo-hero-editorial .tokyo-area-media { position: absolute; z-index: -2; inset: 0; }
.tokyo-hero-editorial .tokyo-area-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 32, 53, .18), rgba(13, 32, 53, .96)); }
.tokyo-hero-editorial .tokyo-area-copy { position: absolute; right: 0; bottom: 0; left: 0; padding-top: 10rem; border-bottom: .55rem solid #b78628; }
.tokyo-hero-editorial .tokyo-area-copy h1 { max-width: 11ch; font-family: Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.tokyo-hero-editorial .tokyo-area-caption { top: 1rem; bottom: auto; }

.tokyo-hero-signal { grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); color: #e6fbff; background-color: #07111c; background-image: linear-gradient(rgba(34, 211, 238, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 85, 247, .07) 1px, transparent 1px); background-size: 28px 28px; border-color: #19445a; }
.tokyo-hero-signal .tokyo-area-media { order: -1; margin: 1rem; min-height: 33rem; border: 1px solid rgba(34, 211, 238, .45); clip-path: polygon(0 0, 95% 0, 100% 8%, 100% 100%, 0 100%); }
.tokyo-hero-signal .tokyo-area-copy h1 { color: #fff; text-shadow: 0 0 25px rgba(34, 211, 238, .3); }
.tokyo-hero-signal .eyebrow { color: #cffafe; background: rgba(34, 211, 238, .1); border-color: rgba(34, 211, 238, .38); }

.tokyo-hero-gallery { grid-template-columns: minmax(20rem, .78fr) minmax(0, 1.22fr); color: #24211d; background: #faf7ef; border-color: #d9cfba; }
.tokyo-hero-gallery .tokyo-area-copy { border-top: .4rem solid #d69e2e; }
.tokyo-hero-gallery .tokyo-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
.tokyo-hero-gallery .tokyo-area-media { margin: 1rem; min-height: 33rem; }
.tokyo-hero-gallery .tokyo-area-media > img { filter: saturate(.8) contrast(1.04); }
.tokyo-hero-gallery .tokyo-area-meta span { color: #4a4030; background: #fff; }

.tokyo-hero-glass { display: flex; justify-content: end; align-items: center; min-height: 38rem; color: #fff; border-color: #9fd7ea; }
.tokyo-hero-glass .tokyo-area-media { position: absolute; z-index: -2; inset: 0; }
.tokyo-hero-glass::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5, 37, 59, .08), rgba(5, 37, 59, .42)); }
.tokyo-hero-glass .tokyo-area-copy { width: min(46rem, 62%); margin: 2rem; padding: clamp(1.6rem, 4vw, 3rem); background: rgba(5, 37, 59, .72); border: 1px solid rgba(255, 255, 255, .32); border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(5, 37, 59, .25); backdrop-filter: blur(16px); }
.tokyo-hero-glass .eyebrow { color: #e0f2fe; background: rgba(14, 165, 233, .14); border-color: rgba(186, 230, 253, .4); }

.tokyo-hero-stack { grid-template-rows: auto 25rem; min-height: 39rem; color: #fff; background: linear-gradient(115deg, #1e1535, #39235e 60%, #6d28d9); border-color: #4c3281; }
.tokyo-hero-stack .tokyo-area-copy { display: grid; grid-template-columns: 1fr minmax(15rem, .65fr); gap: 1.5rem; align-items: end; padding: 2.2rem 2.5rem; }
.tokyo-hero-stack .tokyo-area-copy > p { align-self: center; }
.tokyo-hero-stack .tokyo-area-meta { grid-column: 1 / -1; margin-top: -.5rem; }
.tokyo-hero-stack .tokyo-area-media { min-height: 25rem; margin: 0 1rem 1rem; overflow: hidden; border-radius: 1rem; }
.tokyo-hero-stack .tokyo-area-media > img { object-position: center 44%; }

.tokyo-duo-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); gap: 1rem; }
.tokyo-duo-feature > img { width: 100%; height: 100%; min-height: 25rem; object-fit: cover; border-radius: 1.25rem; box-shadow: var(--shadow-sm); }
.tokyo-duo-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.8rem); color: #e7edf4; background: var(--area-dark); border-radius: 1.25rem; }
.tokyo-duo-copy h2 { margin: .3rem 0 .7rem; color: #fff; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; }
.tokyo-duo-copy p { color: #bdc8d3; }
.tokyo-duo-copy .section-kicker { color: color-mix(in srgb, var(--area-accent) 55%, white); }

.tokyo-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tokyo-note { position: relative; padding: 1.35rem; border-top: .3rem solid var(--area-accent); background: #fff; border-radius: .35rem .35rem 1rem 1rem; box-shadow: var(--shadow-sm); }
.tokyo-note:nth-child(2n) { border-top-color: var(--area-accent-2); }
.tokyo-note small { color: var(--area-accent); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.tokyo-note h3 { margin: .35rem 0 .45rem; font-size: 1.05rem; }
.tokyo-note p { margin: 0; color: var(--muted); font-size: .78rem; }

/* Kyoto guide system: paper, lacquer, bamboo and contemporary geometry. */
body[data-city="kyoto"] {
  --area-accent: #a93625;
  --area-accent-2: #657443;
  --area-soft: #fbf5e9;
  --area-dark: #251b18;
}
body[data-area="gion-pontocho"] { --area-accent: #e5834b; --area-accent-2: #6671a5; --area-soft: #f7f2ec; --area-dark: #17172a; }
body[data-area="kiyomizudera-higashiyama"] { --area-accent: #bb3f2b; --area-accent-2: #d69b4d; --area-soft: #fff3e6; --area-dark: #3b2119; }
body[data-area="arashiyama-sagano"] { --area-accent: #537d4d; --area-accent-2: #a68b53; --area-soft: #eef5e9; --area-dark: #18372a; }
body[data-area="fushimi-inari-sake-district"] { --area-accent: #d9472f; --area-accent-2: #243d5a; --area-soft: #fff1e8; --area-dark: #351512; }
body[data-area="central-kyoto-nishiki"] { --area-accent: #c54638; --area-accent-2: #de9d28; --area-soft: #fff8df; --area-dark: #2d241f; }
body[data-area="kyoto-station-south"] { --area-accent: #1978a3; --area-accent-2: #e2583e; --area-soft: #ecf8fc; --area-dark: #0b2637; }
body[data-area="kinkakuji-northwest"] { --area-accent: #b88b2d; --area-accent-2: #71815b; --area-soft: #faf5df; --area-dark: #15140f; }
body[data-area="philosophers-path-okazaki"] { --area-accent: #4f8784; --area-accent-2: #9c6980; --area-soft: #edf6f2; --area-dark: #183636; }
body[data-city="kyoto"] .section-kicker,
body[data-city="kyoto"] .fact-card small { color: var(--area-accent); }
body[data-city="kyoto"] .zone-card::before { background: var(--area-soft); }
body[data-city="kyoto"] .zone-card:nth-child(2n)::before { background: color-mix(in srgb, var(--area-accent-2) 15%, white); }
body[data-city="kyoto"] .zone-card small { color: var(--area-accent); }
body[data-city="kyoto"] .zone-card .zone-meta { color: var(--area-dark); background: var(--area-soft); }
body[data-city="kyoto"] .decision-card { border-color: color-mix(in srgb, var(--area-accent) 25%, white); background: linear-gradient(145deg, var(--area-soft), #fff); }
body[data-city="kyoto"] .decision-card.caution { border-color: color-mix(in srgb, var(--area-accent-2) 28%, white); background: linear-gradient(145deg, color-mix(in srgb, var(--area-accent-2) 10%, white), #fff); }
body[data-city="kyoto"] .route-board { background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--area-accent) 30%, transparent), transparent 24rem), var(--area-dark); border-color: color-mix(in srgb, var(--area-accent) 26%, #1f2937); }
body[data-city="kyoto"] .route-stop::before { background: var(--area-accent); border-color: var(--area-dark); box-shadow: 0 0 0 2px var(--area-accent); }
body[data-city="kyoto"] .route-stop small,
body[data-city="kyoto"] .route-board-head span { color: color-mix(in srgb, var(--area-accent) 58%, white); }
body[data-city="kyoto"] .area-jump-nav a:hover { color: var(--area-dark); background: var(--area-soft); }

.kyoto-city-hero {
  position: relative;
  min-height: 40rem;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(25rem, 1.12fr);
  overflow: hidden;
  color: #f9f1e5;
  background:
    radial-gradient(circle at 16% 18%, rgba(222, 89, 51, .2), transparent 22rem),
    linear-gradient(135deg, #2b1b18, #151c18 72%);
  border: 1px solid #4a352b;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.kyoto-city-hero::before { content: "京"; position: absolute; z-index: 0; top: -2.2rem; left: 1rem; color: rgba(255, 239, 214, .045); font-family: Georgia, serif; font-size: 22rem; line-height: 1; pointer-events: none; }
.kyoto-city-copy { position: relative; z-index: 2; align-self: center; padding: clamp(2rem, 5vw, 4.2rem); }
.kyoto-city-copy .eyebrow { color: #ffe2cb; background: rgba(198, 65, 43, .15); border-color: rgba(234, 148, 89, .35); }
.kyoto-city-copy h1 { margin: 0 0 1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem, 8vw, 7.2rem); font-weight: 500; line-height: .86; letter-spacing: -.075em; }
.kyoto-city-copy > p { max-width: 33rem; margin: 0; color: #d8cdc0; font-size: clamp(1rem, 1.6vw, 1.14rem); }
.kyoto-city-copy .page-hero-meta span { background: rgba(255, 255, 255, .07); }
.kyoto-city-collage { position: relative; min-height: 40rem; padding: 1.2rem; }
.kyoto-city-collage::before { content: "OLD CAPITAL / LIVING CITY"; position: absolute; z-index: 3; top: 1.7rem; right: 1.8rem; padding: .42rem .55rem; color: #39211b; background: #f4ddae; font-size: .57rem; font-weight: 900; letter-spacing: .16em; transform: rotate(2deg); }
.kyoto-city-collage .kyoto-collage-main { position: absolute; inset: 1.2rem 4.8rem 7.2rem 1.2rem; width: calc(100% - 6rem); height: calc(100% - 8.4rem); object-fit: cover; border-radius: .9rem 6rem .9rem .9rem; box-shadow: 0 26px 65px rgba(0, 0, 0, .38); }
.kyoto-city-collage .kyoto-collage-small { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 52%; height: 12.2rem; object-fit: cover; border: 6px solid #1b211c; border-radius: .8rem; }
.kyoto-city-note { position: absolute; z-index: 3; left: 1.2rem; bottom: 1.35rem; width: 43%; padding: 1rem; color: #ddd1c2; background: rgba(38, 25, 21, .94); border: 1px solid #61483b; border-radius: .8rem; font-size: .72rem; }
.kyoto-city-note strong { display: block; color: #e8ad64; font-size: .86rem; }

.kyoto-area-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.kyoto-area-card { position: relative; min-height: 18rem; display: flex; align-items: end; grid-column: span 4; overflow: hidden; isolation: isolate; color: #fff; border: 1px solid rgba(46, 35, 28, .15); border-radius: .45rem 1.7rem .45rem 1.7rem; box-shadow: var(--shadow-sm); }
.kyoto-area-card.wide { grid-column: span 8; }
.kyoto-area-card.full { min-height: 16rem; grid-column: 1 / -1; }
.kyoto-area-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kyoto-area-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(30, 21, 17, .94)); }
.kyoto-area-card:hover > img { transform: scale(1.035); }
.kyoto-area-card-copy { width: 100%; padding: 1.35rem; }
.kyoto-area-card small { color: #f4c887; font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.kyoto-area-card h3 { margin: .25rem 0 .35rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.42rem; line-height: 1.08; }
.kyoto-area-card p { margin: 0; color: #e7ddd2; font-size: .77rem; }
.kyoto-area-card span { display: inline-block; margin-top: .75rem; color: #f0a96b; font-size: .73rem; font-weight: 850; }

.kyoto-base-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.kyoto-base-grid article { position: relative; min-height: 13rem; padding: 1.35rem; overflow: hidden; border: 1px solid #e2d8ca; background: #fffdf8; border-radius: .5rem 1.3rem .5rem 1.3rem; box-shadow: var(--shadow-sm); }
.kyoto-base-grid article::after { content: attr(data-mark); position: absolute; right: .6rem; bottom: -.8rem; color: rgba(155, 74, 50, .08); font-family: Georgia, serif; font-size: 5rem; }
.kyoto-base-grid small { color: #9f4b37; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.kyoto-base-grid h3 { margin: .35rem 0; font-size: 1.08rem; }
.kyoto-base-grid p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .77rem; }
.kyoto-base-tag { position: relative; z-index: 1; display: inline-flex; margin-top: .8rem; padding: .3rem .5rem; color: #684437; background: #f8ecdc; border-radius: 999px; font-size: .66rem; font-weight: 850; }

.kyoto-area-hero { position: relative; min-height: 36rem; display: grid; overflow: hidden; border: 1px solid #ded6c8; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); isolation: isolate; }
.kyoto-area-copy { position: relative; z-index: 3; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.kyoto-area-copy h1 { margin: 0 0 1rem; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .91; letter-spacing: -.065em; }
.kyoto-area-copy > p { max-width: 37rem; margin: 0; color: inherit; opacity: .82; font-size: clamp(1rem, 1.5vw, 1.12rem); }
.kyoto-area-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.kyoto-area-meta span { padding: .42rem .62rem; color: inherit; background: rgba(255, 255, 255, .11); border: 1px solid currentColor; border-radius: 999px; font-size: .69rem; font-weight: 800; opacity: .9; }
.kyoto-area-media { position: relative; min-height: 36rem; }
.kyoto-area-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kyoto-area-caption { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; max-width: 15rem; padding: .85rem 1rem; color: #f4eee6; background: rgba(28, 24, 23, .86); border: 1px solid rgba(255, 255, 255, .2); border-radius: .7rem; font-size: .7rem; backdrop-filter: blur(10px); }
.kyoto-area-caption strong { display: block; margin-bottom: .18rem; color: color-mix(in srgb, var(--area-accent) 60%, white); font-size: .84rem; }

.kyoto-hero-lantern { grid-template-columns: minmax(21rem, .9fr) minmax(0, 1.1fr); color: #f8efe5; background: linear-gradient(135deg, #17172a, #28243d); border-color: #3b3955; }
.kyoto-hero-lantern::before, .kyoto-hero-lantern::after { content: ""; position: absolute; z-index: 1; top: -1rem; width: 4.5rem; height: 6rem; background: radial-gradient(circle at 50% 42%, #ffd7a0, #d86136 72%); border-radius: 2.2rem; box-shadow: 0 0 45px rgba(226, 112, 59, .35); opacity: .72; }
.kyoto-hero-lantern::before { left: 4%; }
.kyoto-hero-lantern::after { left: 15%; transform: scale(.72); opacity: .38; }
.kyoto-hero-lantern .kyoto-area-media { margin: 1rem; overflow: hidden; border-radius: 8rem .8rem .8rem; }
.kyoto-hero-lantern .kyoto-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.kyoto-hero-lantern .eyebrow { color: #ffe3cc; background: rgba(229, 131, 75, .12); border-color: rgba(229, 131, 75, .35); }

.kyoto-hero-terrace { display: flex; align-items: end; min-height: 41rem; color: #fff9ed; border-color: #8c4b34; }
.kyoto-hero-terrace .kyoto-area-media { position: absolute; z-index: -2; inset: 0; }
.kyoto-hero-terrace .kyoto-area-media > img { object-position: center 35%; }
.kyoto-hero-terrace::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(44, 21, 15, .94), rgba(60, 28, 18, .58) 52%, rgba(60, 28, 18, .04)); }
.kyoto-hero-terrace .kyoto-area-copy { width: min(100%, 48rem); border-left: .5rem solid #d6984f; }
.kyoto-hero-terrace .kyoto-area-copy h1 { max-width: 10ch; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.kyoto-hero-terrace .kyoto-area-caption { top: 1rem; bottom: auto; }

.kyoto-hero-bamboo { grid-template-columns: minmax(0, 1.18fr) minmax(21rem, .82fr); color: #173726; background: linear-gradient(145deg, #e8f2df, #faf7ed 72%); border-color: #a9bea0; }
.kyoto-hero-bamboo::before { content: "嵯峨野"; position: absolute; z-index: 3; top: 1.2rem; right: 1.2rem; color: rgba(45, 88, 57, .13); font-family: Georgia, serif; font-size: clamp(2.4rem, 6vw, 5.8rem); writing-mode: vertical-rl; letter-spacing: .12em; }
.kyoto-hero-bamboo .kyoto-area-media { order: -1; margin: 1rem; min-height: 34rem; overflow: hidden; border-radius: 11rem 11rem .7rem .7rem; }
.kyoto-hero-bamboo .kyoto-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.kyoto-hero-bamboo .kyoto-area-meta span { color: #2d5639; background: rgba(255, 255, 255, .56); }

.kyoto-hero-torii { grid-template-columns: minmax(0, .95fr) minmax(22rem, 1.05fr); color: #fff7ec; background: repeating-linear-gradient(90deg, #b92d20 0 2.2rem, #c73c27 2.2rem 5rem); border-color: #7d2119; }
.kyoto-hero-torii::before { content: "伏見"; position: absolute; z-index: 1; left: 1.5rem; bottom: -1.5rem; color: rgba(255, 236, 204, .1); font-family: Georgia, serif; font-size: 12rem; line-height: 1; }
.kyoto-hero-torii .kyoto-area-copy { background: linear-gradient(90deg, rgba(70, 17, 13, .84), rgba(118, 28, 20, .25)); }
.kyoto-hero-torii .kyoto-area-media { margin: 1rem; min-height: 34rem; overflow: hidden; border: .45rem solid #2a1a17; clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 8%); }
.kyoto-hero-torii .kyoto-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

.kyoto-hero-market { grid-template-columns: minmax(20rem, .78fr) minmax(0, 1.22fr); color: #2e261d; background: #fff5cf; border-color: #ddc269; }
.kyoto-hero-market::before { content: "MARKET / GRID / KYOTO"; position: absolute; z-index: 4; top: 1rem; left: 1rem; padding: .45rem .6rem; color: #fff; background: #c54638; font-size: .58rem; font-weight: 900; letter-spacing: .16em; transform: rotate(-2deg); }
.kyoto-hero-market .kyoto-area-copy { background-image: linear-gradient(rgba(197, 70, 56, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(197, 70, 56, .08) 1px, transparent 1px); background-size: 28px 28px; }
.kyoto-hero-market .kyoto-area-copy h1 { font-weight: 900; text-transform: uppercase; }
.kyoto-hero-market .kyoto-area-media { margin: 1rem; min-height: 34rem; overflow: hidden; border: .55rem solid #fff; box-shadow: 0 20px 45px rgba(91, 60, 27, .22); transform: rotate(1.4deg); }
.kyoto-hero-market .kyoto-area-meta span { color: #544024; background: rgba(255, 255, 255, .7); }

.kyoto-hero-station { display: flex; align-items: center; min-height: 40rem; color: #eefaff; border-color: #5da2bd; }
.kyoto-hero-station .kyoto-area-media { position: absolute; z-index: -2; inset: 0; }
.kyoto-hero-station .kyoto-area-media > img { object-position: center 43%; }
.kyoto-hero-station::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(6, 31, 46, .93), rgba(10, 47, 66, .46) 62%, rgba(9, 44, 62, .06)); }
.kyoto-hero-station .kyoto-area-copy { width: min(46rem, 66%); margin: 1.4rem; background: rgba(8, 42, 59, .72); border: 1px solid rgba(184, 228, 243, .36); clip-path: polygon(0 0, 94% 0, 100% 12%, 100% 100%, 0 100%); backdrop-filter: blur(14px); }
.kyoto-hero-station .kyoto-area-copy h1 { font-weight: 800; }
.kyoto-hero-station .eyebrow { color: #d5f4ff; background: rgba(28, 129, 169, .16); border-color: rgba(155, 221, 245, .4); }

.kyoto-hero-gold { grid-template-columns: minmax(21rem, .86fr) minmax(0, 1.14fr); color: #f6efda; background: #15140f; border-color: #6d5723; }
.kyoto-hero-gold::before { content: "金"; position: absolute; z-index: 1; left: 1rem; bottom: -2rem; color: rgba(208, 167, 67, .11); font-family: Georgia, serif; font-size: 15rem; line-height: 1; }
.kyoto-hero-gold .kyoto-area-copy { border-top: .3rem solid #c7a244; }
.kyoto-hero-gold .kyoto-area-copy h1 { color: #f2d886; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.kyoto-hero-gold .kyoto-area-media { margin: 1.1rem; min-height: 33.8rem; overflow: hidden; border: 1px solid #9c7c31; border-radius: .25rem; }
.kyoto-hero-gold .kyoto-area-media::before { content: ""; position: absolute; z-index: 2; inset: .65rem; border: 1px solid rgba(245, 218, 142, .6); pointer-events: none; }

.kyoto-hero-waterway { grid-template-columns: minmax(0, 1.13fr) minmax(21rem, .87fr); color: #24403e; background: linear-gradient(145deg, #e8f2ed, #faf7ef); border-color: #a5bfba; }
.kyoto-hero-waterway::after { content: ""; position: absolute; z-index: 1; right: -7rem; bottom: -9rem; width: 28rem; height: 24rem; border: 1.6rem solid rgba(82, 139, 134, .09); border-radius: 50%; }
.kyoto-hero-waterway .kyoto-area-media { order: -1; margin: 1rem; min-height: 34rem; overflow: hidden; border-radius: .6rem 10rem .6rem 10rem; }
.kyoto-hero-waterway .kyoto-area-media > img { filter: saturate(.82) contrast(.98); }
.kyoto-hero-waterway .kyoto-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.kyoto-hero-waterway .kyoto-area-meta span { color: #315c58; background: rgba(255, 255, 255, .58); }

.kyoto-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kyoto-note { position: relative; min-height: 11rem; padding: 1.35rem; border-left: .35rem solid var(--area-accent); background: #fff; border-radius: .3rem 1rem 1rem .3rem; box-shadow: var(--shadow-sm); }
.kyoto-note:nth-child(2n) { border-left-color: var(--area-accent-2); }
.kyoto-note small { color: var(--area-accent); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.kyoto-note h3 { margin: .35rem 0 .45rem; font-size: 1.05rem; }
.kyoto-note p { margin: 0; color: var(--muted); font-size: .78rem; }
.kyoto-duo-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: 1rem; }
.kyoto-duo-feature > img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; border-radius: .5rem 2rem .5rem 2rem; box-shadow: var(--shadow-sm); }
.kyoto-duo-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.8rem); color: #eee7dc; background: var(--area-dark); border-radius: 2rem .5rem 2rem .5rem; }
.kyoto-duo-copy h2 { margin: .3rem 0 .7rem; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.08; }
.kyoto-duo-copy p { color: #c9beb1; }
.kyoto-duo-copy .section-kicker { color: color-mix(in srgb, var(--area-accent) 55%, white); }

@media (min-width: 821px) {
  .kyoto-hero-bamboo .kyoto-area-copy h1 { font-size: clamp(2.8rem, 4.7vw, 4.75rem); }
  .kyoto-hero-waterway .kyoto-area-copy h1 { font-size: clamp(2.8rem, 4vw, 4rem); }
}

@media (max-width: 820px) {
  .kyoto-city-hero { grid-template-columns: 1fr; }
  .kyoto-city-collage { min-height: 32rem; }
  .kyoto-base-grid { grid-template-columns: 1fr 1fr; }
  .kyoto-area-card, .kyoto-area-card.wide { grid-column: span 6; }
  .kyoto-area-card.full { grid-column: 1 / -1; }
  .kyoto-area-hero, .kyoto-hero-lantern, .kyoto-hero-bamboo, .kyoto-hero-torii, .kyoto-hero-market, .kyoto-hero-gold, .kyoto-hero-waterway { grid-template-columns: 1fr; }
  .kyoto-hero-lantern .kyoto-area-media, .kyoto-hero-bamboo .kyoto-area-media, .kyoto-hero-torii .kyoto-area-media, .kyoto-hero-market .kyoto-area-media, .kyoto-hero-gold .kyoto-area-media, .kyoto-hero-waterway .kyoto-area-media { order: 2; min-height: 25rem; }
  .kyoto-hero-bamboo::before { display: none; }
  .kyoto-hero-station .kyoto-area-copy { width: auto; }
  .kyoto-note-grid { grid-template-columns: 1fr 1fr; }
  .kyoto-duo-feature { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kyoto-city-hero { min-height: 0; border-radius: 1.35rem; }
  .kyoto-city-copy { padding: 1.5rem; }
  .kyoto-city-copy h1 { font-size: clamp(3.7rem, 21vw, 5rem); }
  .kyoto-city-collage { min-height: 27rem; padding: .8rem; }
  .kyoto-city-collage .kyoto-collage-main { inset: .8rem 2.5rem 7rem .8rem; width: calc(100% - 3.3rem); height: calc(100% - 7.8rem); border-radius: .8rem 4rem .8rem .8rem; }
  .kyoto-city-collage .kyoto-collage-small { right: .8rem; bottom: .8rem; height: 8.6rem; border-width: 3px; }
  .kyoto-city-note { left: .8rem; bottom: 1rem; width: 46%; padding: .7rem; }
  .kyoto-base-grid { grid-template-columns: 1fr; }
  .kyoto-area-grid { grid-template-columns: 1fr; }
  .kyoto-area-card, .kyoto-area-card.wide, .kyoto-area-card.full { grid-column: auto; min-height: 20rem; }
  .kyoto-area-hero { min-height: 0; border-radius: 1.35rem; }
  .kyoto-area-copy { padding: 1.45rem; }
  .kyoto-area-copy h1 { font-size: clamp(2.65rem, 13.5vw, 4rem); }
  .kyoto-hero-lantern .kyoto-area-media, .kyoto-hero-bamboo .kyoto-area-media, .kyoto-hero-torii .kyoto-area-media, .kyoto-hero-market .kyoto-area-media, .kyoto-hero-gold .kyoto-area-media, .kyoto-hero-waterway .kyoto-area-media { min-height: 22rem; margin: .7rem; }
  .kyoto-hero-lantern .kyoto-area-media { border-radius: 5rem .7rem .7rem; }
  .kyoto-hero-bamboo .kyoto-area-media { border-radius: 7rem 7rem .7rem .7rem; }
  .kyoto-hero-market .kyoto-area-media { transform: none; }
  .kyoto-hero-terrace { min-height: 35rem; }
  .kyoto-hero-terrace .kyoto-area-copy { border-left-width: .3rem; }
  .kyoto-hero-terrace .kyoto-area-caption { display: none; }
  .kyoto-hero-station { min-height: 36rem; align-items: end; }
  .kyoto-hero-station .kyoto-area-copy { margin: .7rem; padding: 1.3rem; }
  .kyoto-hero-gold::before, .kyoto-hero-torii::before { font-size: 8rem; }
  .kyoto-note-grid { grid-template-columns: 1fr; }
}

/* Hokkaido guide system: snow fields, long-distance routes and nine distinct regional compositions. */
body[data-city="hokkaido"] {
  --area-accent: #287a9a;
  --area-accent-2: #d68b36;
  --area-soft: #eaf6fa;
  --area-dark: #102d3d;
}
body[data-area="sapporo"] { --area-accent: #d54c3e; --area-accent-2: #55b9d0; --area-soft: #fff1ef; --area-dark: #182634; }
body[data-area="otaru-shakotan"] { --area-accent: #247da1; --area-accent-2: #d3a154; --area-soft: #e9f7fb; --area-dark: #0b2638; }
body[data-area="hakodate-onuma"] { --area-accent: #dc8645; --area-accent-2: #477f91; --area-soft: #fff3e8; --area-dark: #152435; }
body[data-area="furano-biei"] { --area-accent: #7657a8; --area-accent-2: #d6a72f; --area-soft: #f5f0ff; --area-dark: #29343c; }
body[data-area="asahikawa-daisetsuzan"] { --area-accent: #587e58; --area-accent-2: #b87543; --area-soft: #edf5ea; --area-dark: #26362e; }
body[data-area="niseko-yoichi"] { --area-accent: #2c85a7; --area-accent-2: #86c9d9; --area-soft: #eaf8fc; --area-dark: #102d42; }
body[data-area="noboribetsu-lake-toya"] { --area-accent: #b95936; --area-accent-2: #2c92a6; --area-soft: #fff0e8; --area-dark: #38261f; }
body[data-area="kushiro-lake-akan"] { --area-accent: #4d7c78; --area-accent-2: #9a6b53; --area-soft: #edf5f2; --area-dark: #263833; }
body[data-area="abashiri-shiretoko"] { --area-accent: #2d86b2; --area-accent-2: #8ad3df; --area-soft: #eaf7fb; --area-dark: #092a40; }
body[data-city="hokkaido"] .section-kicker,
body[data-city="hokkaido"] .fact-card small { color: var(--area-accent); }
body[data-city="hokkaido"] .zone-card::before { background: var(--area-soft); }
body[data-city="hokkaido"] .zone-card:nth-child(2n)::before { background: color-mix(in srgb, var(--area-accent-2) 16%, white); }
body[data-city="hokkaido"] .zone-card small { color: var(--area-accent); }
body[data-city="hokkaido"] .zone-card .zone-meta { color: var(--area-dark); background: var(--area-soft); }
body[data-city="hokkaido"] .decision-card { border-color: color-mix(in srgb, var(--area-accent) 25%, white); background: linear-gradient(145deg, var(--area-soft), #fff); }
body[data-city="hokkaido"] .decision-card.caution { border-color: color-mix(in srgb, var(--area-accent-2) 30%, white); background: linear-gradient(145deg, color-mix(in srgb, var(--area-accent-2) 11%, white), #fff); }
body[data-city="hokkaido"] .route-board { background: radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--area-accent) 31%, transparent), transparent 24rem), var(--area-dark); border-color: color-mix(in srgb, var(--area-accent) 27%, #1f2937); }
body[data-city="hokkaido"] .route-stop::before { background: var(--area-accent); border-color: var(--area-dark); box-shadow: 0 0 0 2px var(--area-accent); }
body[data-city="hokkaido"] .route-stop small,
body[data-city="hokkaido"] .route-board-head span { color: color-mix(in srgb, var(--area-accent) 55%, white); }
body[data-city="hokkaido"] .area-jump-nav a:hover { color: var(--area-dark); background: var(--area-soft); }

.hokkaido-city-hero {
  position: relative;
  min-height: 40rem;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(25rem, 1.14fr);
  overflow: hidden;
  color: #f7fbfd;
  background:
    radial-gradient(circle at 16% 18%, rgba(112, 196, 220, .2), transparent 22rem),
    linear-gradient(145deg, #0b2638, #173d50 72%, #285e72);
  border: 1px solid #31596a;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hokkaido-city-hero::before { content: "43°N"; position: absolute; z-index: 0; left: 1.4rem; bottom: -2.5rem; color: rgba(218, 243, 250, .065); font-family: Georgia, serif; font-size: 12rem; line-height: 1; pointer-events: none; }
.hokkaido-city-copy { position: relative; z-index: 2; align-self: center; padding: clamp(2rem, 5vw, 4.2rem); }
.hokkaido-city-copy .eyebrow { color: #d9f6ff; background: rgba(100, 194, 220, .13); border-color: rgba(157, 223, 239, .35); }
.hokkaido-city-copy h1 { margin: 0 0 1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.4rem, 7.8vw, 7rem); font-weight: 500; line-height: .86; letter-spacing: -.075em; }
.hokkaido-city-copy > p { max-width: 34rem; margin: 0; color: #c8dbe2; font-size: clamp(1rem, 1.6vw, 1.14rem); }
.hokkaido-city-copy .page-hero-meta span { background: rgba(255, 255, 255, .08); }
.hokkaido-city-atlas { position: relative; min-height: 40rem; padding: 1rem; }
.hokkaido-city-atlas::before { content: "NORTH / EAST / SOUTH / WEST"; position: absolute; z-index: 4; top: 1.6rem; right: 1.6rem; padding: .45rem .6rem; color: #153345; background: #dff4f8; font-size: .57rem; font-weight: 900; letter-spacing: .16em; transform: rotate(1.5deg); }
.hokkaido-city-atlas .hokkaido-atlas-main { position: absolute; inset: 1rem 4.8rem 7.5rem 1rem; width: calc(100% - 5.8rem); height: calc(100% - 8.5rem); object-fit: cover; border-radius: 8rem .9rem .9rem .9rem; box-shadow: 0 28px 70px rgba(0, 0, 0, .38); }
.hokkaido-city-atlas .hokkaido-atlas-small { position: absolute; right: 1rem; bottom: 1rem; width: 54%; height: 12.4rem; object-fit: cover; border: 6px solid #143245; border-radius: .8rem; }
.hokkaido-atlas-note { position: absolute; z-index: 3; left: 1rem; bottom: 1.25rem; width: 43%; padding: 1rem; color: #c9dce4; background: rgba(9, 38, 57, .94); border: 1px solid #3c6272; border-radius: .8rem; font-size: .72rem; }
.hokkaido-atlas-note strong { display: block; color: #90d8e8; font-size: .86rem; }

.hokkaido-corridor-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.hokkaido-corridor-card { position: relative; min-height: 18rem; display: flex; align-items: end; grid-column: span 4; overflow: hidden; isolation: isolate; color: #fff; border-radius: .5rem 2.2rem .5rem 1.3rem; box-shadow: var(--shadow-sm); }
.hokkaido-corridor-card.wide { grid-column: span 8; }
.hokkaido-corridor-card.full { min-height: 16rem; grid-column: 1 / -1; }
.hokkaido-corridor-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .48s ease; }
.hokkaido-corridor-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(5, 28, 42, .94)); }
.hokkaido-corridor-card:hover > img { transform: scale(1.04); }
.hokkaido-corridor-copy { width: 100%; padding: 1.35rem; }
.hokkaido-corridor-copy small { color: #a9e4ef; font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hokkaido-corridor-copy h3 { margin: .25rem 0 .35rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; line-height: 1.08; }
.hokkaido-corridor-copy p { margin: 0; color: #dbe9ed; font-size: .77rem; }
.hokkaido-corridor-copy span { display: inline-block; margin-top: .75rem; color: #f6bd72; font-size: .73rem; font-weight: 850; }
.hokkaido-base-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.hokkaido-base-grid article { position: relative; min-height: 14rem; padding: 1.35rem; overflow: hidden; border: 1px solid #d2e2e6; background: linear-gradient(155deg, #fff, #f3fafb); border-radius: 1.6rem .45rem 1.6rem .45rem; box-shadow: var(--shadow-sm); }
.hokkaido-base-grid article::after { content: attr(data-code); position: absolute; right: .55rem; bottom: -.9rem; color: rgba(31, 101, 128, .08); font-family: Georgia, serif; font-size: 4.8rem; line-height: 1; }
.hokkaido-base-grid small { color: #287a9a; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hokkaido-base-grid h3 { margin: .35rem 0; font-size: 1.08rem; }
.hokkaido-base-grid p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .77rem; }
.hokkaido-distance-strip { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid #cee0e5; background: #fff; border-radius: 1.15rem; box-shadow: var(--shadow-sm); }
.hokkaido-distance-strip article { padding: 1.2rem; border-right: 1px solid #e0eaed; }
.hokkaido-distance-strip article:last-child { border-right: 0; }
.hokkaido-distance-strip small { color: #6f8490; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hokkaido-distance-strip strong { display: block; margin: .25rem 0; color: #163647; font-size: 1rem; }
.hokkaido-distance-strip span { display: block; color: var(--muted); font-size: .72rem; }

.hokkaido-area-hero { position: relative; min-height: 36rem; display: grid; overflow: hidden; border: 1px solid #d3e1e5; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); isolation: isolate; }
.hokkaido-area-copy { position: relative; z-index: 3; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.hokkaido-area-copy h1 { margin: 0 0 1rem; font-size: clamp(2.8rem, 6vw, 5.35rem); line-height: .91; letter-spacing: -.065em; }
.hokkaido-area-copy > p { max-width: 38rem; margin: 0; color: inherit; opacity: .82; font-size: clamp(1rem, 1.5vw, 1.12rem); }
.hokkaido-area-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.hokkaido-area-meta span { padding: .42rem .62rem; color: inherit; background: rgba(255, 255, 255, .11); border: 1px solid currentColor; border-radius: 999px; font-size: .69rem; font-weight: 800; opacity: .9; }
.hokkaido-area-media { position: relative; min-height: 36rem; }
.hokkaido-area-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hokkaido-area-caption { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; max-width: 15rem; padding: .85rem 1rem; color: #eaf3f6; background: rgba(8, 35, 51, .86); border: 1px solid rgba(255, 255, 255, .2); border-radius: .75rem; font-size: .7rem; backdrop-filter: blur(10px); }
.hokkaido-area-caption strong { display: block; margin-bottom: .18rem; color: color-mix(in srgb, var(--area-accent) 50%, white); font-size: .84rem; }

.hokkaido-hero-metropolis { grid-template-columns: minmax(20rem, .78fr) minmax(0, 1.22fr); color: #f4f8fa; background-color: #182634; background-image: linear-gradient(rgba(85, 185, 208, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(213, 76, 62, .07) 1px, transparent 1px); background-size: 32px 32px; border-color: #324757; }
.hokkaido-hero-metropolis::before { content: "SAPPORO / 01"; position: absolute; z-index: 4; top: 1rem; right: 1rem; padding: .45rem .6rem; color: #182634; background: #eef9fb; font-size: .58rem; font-weight: 900; letter-spacing: .16em; }
.hokkaido-hero-metropolis .hokkaido-area-media { margin: 1rem; min-height: 34rem; overflow: hidden; border-radius: .5rem 7rem .5rem .5rem; }
.hokkaido-hero-metropolis .eyebrow { color: #ffe7e2; background: rgba(213, 76, 62, .14); border-color: rgba(239, 145, 131, .35); }

.hokkaido-hero-canal { display: flex; align-items: end; min-height: 40rem; color: #f2f8fa; border-color: #37647b; }
.hokkaido-hero-canal .hokkaido-area-media { position: absolute; z-index: -2; inset: 0; }
.hokkaido-hero-canal::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5, 27, 43, .96), rgba(5, 31, 48, .54) 56%, rgba(5, 31, 48, .07)); }
.hokkaido-hero-canal .hokkaido-area-copy { width: min(47rem, 72%); border-left: .45rem solid #d3a154; }
.hokkaido-hero-canal .hokkaido-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

.hokkaido-hero-port { display: block; min-height: 40rem; color: #fff8ee; background: #152435; border-color: #485769; }
.hokkaido-hero-port .hokkaido-area-media { position: absolute; z-index: -2; inset: 0; }
.hokkaido-hero-port .hokkaido-area-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 23, 34, .08), rgba(10, 23, 34, .96)); }
.hokkaido-hero-port .hokkaido-area-copy { position: absolute; right: 0; bottom: 0; left: 0; padding-top: 10rem; border-bottom: .55rem solid #dc8645; }
.hokkaido-hero-port .hokkaido-area-copy h1 { max-width: 11ch; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; }
.hokkaido-hero-port .hokkaido-area-caption { top: 1rem; bottom: auto; }

.hokkaido-hero-fields { grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); color: #3b2d50; background: repeating-linear-gradient(180deg, #f5efff 0 5rem, #fff8d7 5rem 10rem, #edf7e3 10rem 15rem); border-color: #cabade; }
.hokkaido-hero-fields .hokkaido-area-media { order: -1; margin: 1rem; min-height: 34rem; overflow: hidden; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 92%); }
.hokkaido-hero-fields .hokkaido-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hokkaido-hero-fields .hokkaido-area-meta span { color: #533d68; background: rgba(255, 255, 255, .65); }

.hokkaido-hero-topographic { grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.2fr); color: #eef6ea; background-color: #26362e; background-image: radial-gradient(ellipse at 70% 10%, transparent 0 18%, rgba(148, 186, 143, .09) 18.2% 18.7%, transparent 19% 25%, rgba(148, 186, 143, .08) 25.2% 25.7%, transparent 26%); border-color: #53685c; }
.hokkaido-hero-topographic::before { content: "2291 M"; position: absolute; z-index: 4; top: 1.2rem; left: 1.2rem; color: rgba(235, 247, 232, .14); font-family: Georgia, serif; font-size: 4.4rem; line-height: 1; }
.hokkaido-hero-topographic .hokkaido-area-media { margin: 1rem; min-height: 34rem; overflow: hidden; border-radius: 10rem 10rem .6rem .6rem; }
.hokkaido-hero-topographic .hokkaido-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

.hokkaido-hero-powder { display: flex; justify-content: end; align-items: center; min-height: 39rem; color: #effbff; border-color: #8dccde; }
.hokkaido-hero-powder .hokkaido-area-media { position: absolute; z-index: -2; inset: 0; }
.hokkaido-hero-powder::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(7, 34, 51, .05), rgba(8, 42, 62, .5)); }
.hokkaido-hero-powder .hokkaido-area-copy { width: min(47rem, 62%); margin: 2rem; padding: clamp(1.6rem, 4vw, 3rem); background: rgba(8, 42, 62, .72); border: 1px solid rgba(255, 255, 255, .35); border-radius: 1.2rem; box-shadow: 0 25px 60px rgba(5, 35, 53, .25); backdrop-filter: blur(16px); }
.hokkaido-hero-powder .eyebrow { color: #dff8ff; background: rgba(100, 202, 225, .13); border-color: rgba(188, 236, 247, .42); }

.hokkaido-hero-volcanic { grid-template-columns: minmax(20rem, .88fr) minmax(0, 1.12fr); color: #fff2e8; background: linear-gradient(120deg, #38261f 0 50%, #183e4a 50%); border-color: #795240; }
.hokkaido-hero-volcanic::before { content: "FIRE / WATER"; position: absolute; z-index: 4; right: 1.2rem; top: 1.2rem; color: rgba(255, 255, 255, .2); font-size: .67rem; font-weight: 900; letter-spacing: .22em; }
.hokkaido-hero-volcanic .hokkaido-area-media { order: -1; margin: 1rem; min-height: 34rem; overflow: hidden; border-radius: .5rem 8rem .5rem 8rem; }
.hokkaido-hero-volcanic .hokkaido-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

.hokkaido-hero-wetland { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr); color: #243b37; background: #edf5f2; border-color: #b7cbc4; }
.hokkaido-hero-wetland .hokkaido-area-media { order: -1; margin: 1rem; min-height: 34rem; overflow: hidden; border-radius: .35rem; }
.hokkaido-hero-wetland .hokkaido-area-media > img { filter: saturate(.74) contrast(.96); }
.hokkaido-hero-wetland .hokkaido-area-copy { border-top: .3rem solid #4d7c78; }
.hokkaido-hero-wetland .hokkaido-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.hokkaido-hero-wetland .hokkaido-area-meta span { color: #315b56; background: rgba(255, 255, 255, .6); }

.hokkaido-hero-expedition { grid-template-columns: minmax(20rem, .85fr) minmax(0, 1.15fr); color: #eaf8fc; background-color: #092a40; background-image: linear-gradient(rgba(138, 211, 223, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 211, 223, .07) 1px, transparent 1px); background-size: 36px 36px; border-color: #2e6783; }
.hokkaido-hero-expedition::before { content: "44.0° N / 144.3° E"; position: absolute; z-index: 4; right: 1.3rem; bottom: 1.1rem; color: rgba(195, 235, 244, .24); font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 800; letter-spacing: .15em; }
.hokkaido-hero-expedition .hokkaido-area-media { margin: 1rem; min-height: 34rem; overflow: hidden; border: 1px solid rgba(138, 211, 223, .45); clip-path: polygon(0 0, 94% 0, 100% 9%, 100% 100%, 0 100%); }
.hokkaido-hero-expedition .hokkaido-area-copy h1 { font-weight: 850; text-transform: uppercase; }
.hokkaido-hero-expedition .eyebrow { color: #d9f8ff; background: rgba(45, 134, 178, .15); border-color: rgba(138, 211, 223, .4); }

.hokkaido-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hokkaido-note { position: relative; min-height: 11rem; padding: 1.35rem; border: 1px solid color-mix(in srgb, var(--area-accent) 23%, white); background: #fff; border-radius: 1.4rem .35rem 1.4rem .35rem; box-shadow: var(--shadow-sm); }
.hokkaido-note::before { content: ""; position: absolute; top: 0; right: 1rem; left: 1rem; height: .26rem; background: var(--area-accent); border-radius: 0 0 999px 999px; }
.hokkaido-note:nth-child(2n)::before { background: var(--area-accent-2); }
.hokkaido-note small { color: var(--area-accent); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.hokkaido-note h3 { margin: .4rem 0 .45rem; font-size: 1.05rem; }
.hokkaido-note p { margin: 0; color: var(--muted); font-size: .78rem; }
.hokkaido-duo-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); gap: 1rem; }
.hokkaido-duo-feature > img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; border-radius: 2rem .5rem 2rem .5rem; box-shadow: var(--shadow-sm); }
.hokkaido-duo-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.8rem); color: #e7f0f2; background: var(--area-dark); border-radius: .5rem 2rem .5rem 2rem; }
.hokkaido-duo-copy h2 { margin: .3rem 0 .7rem; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.08; }
.hokkaido-duo-copy p { color: #c1d0d4; }
.hokkaido-duo-copy .section-kicker { color: color-mix(in srgb, var(--area-accent) 55%, white); }

@media (max-width: 820px) {
  .hokkaido-city-hero { grid-template-columns: 1fr; }
  .hokkaido-city-atlas { min-height: 32rem; }
  .hokkaido-corridor-card, .hokkaido-corridor-card.wide { grid-column: span 6; }
  .hokkaido-corridor-card.full { grid-column: 1 / -1; }
  .hokkaido-base-grid { grid-template-columns: 1fr 1fr; }
  .hokkaido-distance-strip { grid-template-columns: 1fr 1fr; }
  .hokkaido-distance-strip article:nth-child(2) { border-right: 0; }
  .hokkaido-distance-strip article:nth-child(-n+2) { border-bottom: 1px solid #e0eaed; }
  .hokkaido-area-hero, .hokkaido-hero-metropolis, .hokkaido-hero-fields, .hokkaido-hero-topographic, .hokkaido-hero-volcanic, .hokkaido-hero-wetland, .hokkaido-hero-expedition { grid-template-columns: 1fr; }
  .hokkaido-hero-metropolis .hokkaido-area-media, .hokkaido-hero-fields .hokkaido-area-media, .hokkaido-hero-topographic .hokkaido-area-media, .hokkaido-hero-volcanic .hokkaido-area-media, .hokkaido-hero-wetland .hokkaido-area-media, .hokkaido-hero-expedition .hokkaido-area-media { order: 2; min-height: 25rem; }
  .hokkaido-hero-powder .hokkaido-area-copy { width: auto; }
  .hokkaido-note-grid { grid-template-columns: 1fr 1fr; }
  .hokkaido-duo-feature { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hokkaido-city-hero { min-height: 0; border-radius: 1.35rem; }
  .hokkaido-city-copy { padding: 1.5rem; }
  .hokkaido-city-copy h1 { font-size: clamp(3.4rem, 18vw, 4.7rem); }
  .hokkaido-city-atlas { min-height: 27rem; padding: .8rem; }
  .hokkaido-city-atlas .hokkaido-atlas-main { inset: .8rem 2.6rem 7.1rem .8rem; width: calc(100% - 3.4rem); height: calc(100% - 7.9rem); border-radius: 5rem .8rem .8rem; }
  .hokkaido-city-atlas .hokkaido-atlas-small { right: .8rem; bottom: .8rem; height: 8.8rem; border-width: 3px; }
  .hokkaido-atlas-note { left: .8rem; bottom: 1rem; width: 47%; padding: .7rem; }
  .hokkaido-base-grid, .hokkaido-distance-strip { grid-template-columns: 1fr; }
  .hokkaido-distance-strip article, .hokkaido-distance-strip article:nth-child(2) { border-right: 0; border-bottom: 1px solid #e0eaed; }
  .hokkaido-distance-strip article:last-child { border-bottom: 0; }
  .hokkaido-corridor-grid { grid-template-columns: 1fr; }
  .hokkaido-corridor-card, .hokkaido-corridor-card.wide, .hokkaido-corridor-card.full { grid-column: auto; min-height: 20rem; }
  .hokkaido-area-hero { min-height: 0; border-radius: 1.35rem; }
  .hokkaido-area-copy { padding: 1.45rem; }
  .hokkaido-area-copy h1 { font-size: clamp(2.55rem, 13vw, 3.9rem); }
  .hokkaido-hero-metropolis .hokkaido-area-media, .hokkaido-hero-fields .hokkaido-area-media, .hokkaido-hero-topographic .hokkaido-area-media, .hokkaido-hero-volcanic .hokkaido-area-media, .hokkaido-hero-wetland .hokkaido-area-media, .hokkaido-hero-expedition .hokkaido-area-media { min-height: 22rem; margin: .7rem; }
  .hokkaido-hero-metropolis .hokkaido-area-media { border-radius: .5rem 5rem .5rem .5rem; }
  .hokkaido-hero-topographic .hokkaido-area-media { border-radius: 7rem 7rem .5rem .5rem; }
  .hokkaido-hero-canal { min-height: 35rem; }
  .hokkaido-hero-canal .hokkaido-area-copy { width: auto; border-left-width: .3rem; }
  .hokkaido-hero-port { min-height: 35rem; }
  .hokkaido-hero-port .hokkaido-area-copy { padding-top: 8rem; }
  .hokkaido-hero-port .hokkaido-area-caption, .hokkaido-hero-canal .hokkaido-area-caption { display: none; }
  .hokkaido-hero-powder { min-height: 35rem; align-items: end; }
  .hokkaido-hero-powder .hokkaido-area-copy { margin: .75rem; padding: 1.25rem; }
  .hokkaido-note-grid { grid-template-columns: 1fr; }
}

.related-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related-card { min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--line); background: #fff; border-radius: 1rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, border-color .18s ease; }
.related-card:hover { transform: translateY(-3px); border-color: #9ecbc7; }
.related-card small { color: var(--orange-dark); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.related-card h3 { margin: .35rem 0; font-size: 1.05rem; line-height: 1.25; }
.related-card p { margin: 0; color: var(--muted); font-size: .77rem; }
.related-card span { margin-top: 1rem; color: var(--teal); font-size: .75rem; font-weight: 850; }

.section { padding: clamp(3.7rem, 7vw, 6.2rem) 0 0; scroll-margin-top: 5.5rem; }
.section.compact { padding-top: 2rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.section-heading > div { max-width: 47rem; }
.section-kicker { display: block; margin-bottom: .4rem; color: var(--orange-dark); font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.section-heading h2 { margin: 0; color: var(--navy); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.045em; }
.section-heading p { margin: .65rem 0 0; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; color: var(--teal); font-size: .82rem; font-weight: 850; }
.text-link:hover { color: var(--orange-dark); }

.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1rem; }
.fact-card { padding: 1.15rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .9); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.fact-card small { display: block; margin-bottom: .25rem; color: #8795a6; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.fact-card strong { display: block; color: var(--ink); font-size: .92rem; line-height: 1.35; }
.fact-card span { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; }

.destination-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.destination-card {
  position: relative;
  min-height: 22rem;
  grid-column: span 6;
  display: flex;
  align-items: end;
  overflow: hidden;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.destination-card.featured { grid-column: span 8; min-height: 28rem; }
.destination-card.small { grid-column: span 4; min-height: 28rem; }
.destination-card.third { grid-column: span 4; min-height: 23rem; }
.destination-card.panorama { grid-column: span 12; min-height: 25rem; }
.destination-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.destination-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(7, 21, 31, .9) 100%); }
.destination-card:hover > img { transform: scale(1.035); }
.destination-copy { width: 100%; padding: 1.5rem; color: #fff; }
.destination-copy small { color: #b9e7e2; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.destination-copy h3 { margin: .2rem 0 .35rem; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.1; }
.destination-copy p { margin: 0; color: #dae5e9; font-size: .82rem; }
.destination-copy .card-arrow { display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem; color: #ffb277; font-size: .78rem; font-weight: 850; }
.destination-card[aria-disabled="true"] { filter: saturate(.7); }
.destination-card[aria-disabled="true"] .card-arrow { color: #cdd8dc; }
.related-guides.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .related-guides.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destination-card.panorama { grid-column: span 12; }
}

@media (max-width: 760px) {
  .related-guides.four-up { grid-template-columns: 1fr; }
  .destination-card.panorama { grid-column: auto; min-height: 22rem; }
}

.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.info-card { padding: 1.35rem; border: 1px solid var(--line); background: #fff; border-radius: 1.15rem; box-shadow: var(--shadow-sm); }
.info-card-icon { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; margin-bottom: 1rem; color: var(--teal); background: var(--teal-soft); border-radius: .85rem; }
.info-card-icon.orange { color: var(--orange-dark); background: var(--orange-soft); }
.info-card-icon svg { width: 1.25rem; height: 1.25rem; }
.info-card h3 { margin: 0 0 .45rem; font-size: 1.03rem; line-height: 1.25; }
.info-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.info-card ul { margin: .8rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .82rem; }

.feature-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1rem; align-items: stretch; }
.feature-image { min-height: 29rem; width: 100%; height: 100%; object-fit: cover; border-radius: 1.4rem; box-shadow: var(--shadow-sm); }
.feature-panel { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #cfe2e0; background: linear-gradient(145deg, #eef9f7, #fff); border-radius: 1.4rem; }
.feature-panel h2 { margin: 0 0 .8rem; color: var(--navy); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.04em; }
.feature-panel > p { color: var(--muted); }
.check-list { display: grid; gap: .75rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; min-height: 1.5rem; padding-left: 2.2rem; color: #47596d; font-size: .86rem; }
.check-list li::before { content: "✓"; position: absolute; top: -.05rem; left: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50%; font-size: .7rem; font-weight: 900; }

.compare-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; border-radius: 1.15rem; box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; min-width: 43rem; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td { padding: 1rem; border-bottom: 1px solid #e6edef; vertical-align: top; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table th { color: #718095; background: #f3f7f7; font-size: .67rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.compare-table td { color: #526377; font-size: .82rem; }
.compare-table td:first-child { color: var(--ink); font-weight: 850; }
.tag { display: inline-flex; padding: .28rem .5rem; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: .66rem; font-weight: 850; }

.timeline { display: grid; gap: .8rem; counter-reset: day; }
.timeline-item { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line); background: #fff; border-radius: 1rem; box-shadow: var(--shadow-sm); }
.timeline-day { color: var(--orange-dark); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.timeline-content h3 { margin: 0 0 .25rem; font-size: 1rem; }
.timeline-content p { margin: 0; color: var(--muted); font-size: .82rem; }

.callout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.25rem; border: 1px solid #f6c79f; background: linear-gradient(145deg, #fff6ed, #fff); border-radius: 1rem; }
.callout-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--orange-dark); background: #ffe4cd; border-radius: .8rem; }
.callout-icon svg { width: 1.15rem; height: 1.15rem; }
.callout h3 { margin: 0 0 .3rem; font-size: .95rem; }
.callout p { margin: 0; color: #695d55; font-size: .82rem; }

.faq-list { display: grid; gap: .6rem; }
.faq-list details { border: 1px solid var(--line); background: #fff; border-radius: .95rem; box-shadow: 0 5px 18px rgba(15, 46, 55, .04); }
.faq-list summary { position: relative; padding: 1rem 3.2rem 1rem 1.1rem; cursor: pointer; font-weight: 850; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 1.1rem; color: var(--teal); font-size: 1.4rem; font-weight: 400; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "–"; }
.faq-answer { padding: 0 1.1rem 1.1rem; color: var(--muted); font-size: .86rem; }
.faq-answer p { margin: 0; }

.ad-slot {
  min-height: 7.5rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #82909f;
  border: 1px dashed #b9c8cc;
  background: repeating-linear-gradient(135deg, #f7f9f9 0 8px, #f1f5f5 8px 16px);
  border-radius: 1rem;
  text-align: center;
}
.ad-slot strong { display: block; color: #71808d; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.ad-slot span { display: block; margin-top: .2rem; font-size: .68rem; }
.ad-slot.footer-ad { max-width: 55rem; min-height: 8.5rem; margin: 0 auto 3rem; color: #9cabb6; border-color: #385064; background: repeating-linear-gradient(135deg, #152a3b 0 8px, #122536 8px 16px); }

.sources { padding: 1.25rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .75); border-radius: 1rem; }
.sources h2 { margin: 0 0 .65rem; font-size: .95rem; }
.sources p { margin: 0 0 .7rem; color: var(--muted); font-size: .76rem; }
.sources ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; }
.sources li { margin: 0 0 .45rem; break-inside: avoid; color: var(--muted); font-size: .73rem; }
.sources a { color: var(--teal-dark); text-decoration: underline; text-decoration-color: #9acdc8; text-underline-offset: 2px; }
.review-note { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; color: #7d8b9a; font-size: .7rem; }

.site-footer { margin-top: auto; padding: 3.5rem 0 1.6rem; color: #b6c2cc; background: var(--navy); border-top: 1px solid #1d3448; }
.footer-inner { width: min(var(--max-width), calc(100% - 2rem)); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand .brand { color: #fff; }
.footer-brand p { max-width: 23rem; margin: .8rem 0 0; color: #92a3b1; font-size: .8rem; }
.footer-column h2 { margin: .2rem 0 .8rem; color: #fff; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; }
.footer-links { display: grid; gap: .45rem; }
.footer-links a { color: #9fb0bd; font-size: .78rem; }
.footer-links a:hover { color: #70dacd; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #233b4f; color: #7f919f; font-size: .68rem; }
.footer-languages { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem .7rem; }
.footer-languages a { color: #70dacd; font-weight: 850; white-space: nowrap; }
.footer-languages a:hover, .footer-languages a:focus { color: #fff; }
.footer-languages a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: .2rem; }

.language-dialog-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8,22,32,.66);
  backdrop-filter: blur(8px);
}
.language-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1.3rem;
  width: min(35rem,100%);
  padding: clamp(1.4rem,4vw,2.2rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: 0 2rem 6rem rgba(0,0,0,.35);
}
.language-dialog::before { content: ""; position: absolute; inset: 0 0 auto; height: .35rem; background: linear-gradient(90deg,var(--teal),#70dacd,#e4ad55); }
.language-dialog-mark { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; color: #fff; border-radius: 1.2rem; background: var(--navy); font: 900 1rem/1 sans-serif; letter-spacing: .08em; }
.language-dialog-kicker { margin: 0 0 .4rem; color: var(--teal); font-size: .66rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.language-dialog h2 { margin: 0 0 .65rem; color: var(--navy); font-size: clamp(1.55rem,4vw,2.25rem); line-height: 1; letter-spacing: -.035em; }
.language-dialog p { margin: 0; color: var(--muted); }
.language-dialog-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; padding-top: .25rem; }
.language-dialog-actions .button { min-height: 2.8rem; cursor: pointer; }

.legal-page { max-width: 52rem; }
.legal-page h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.legal-page h2 { margin: 2rem 0 .5rem; font-size: 1.25rem; }
.legal-page p, .legal-page li { color: var(--muted); }
.legal-page a { color: var(--teal); text-decoration: underline; }
.status-card { padding: 1.5rem; border: 1px solid var(--line); background: #fff; border-radius: 1rem; box-shadow: var(--shadow-sm); }

@media (min-width: 1361px) {
  .desktop-nav { gap: 0; margin-left: .5rem; }
  .nav-link { padding-right: .6rem; padding-left: .6rem; }
}

@media (max-width: 1360px) {
  .desktop-nav { display: none; }
  .icon-button.menu-toggle { display: grid; }
  .site-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 110;
    top: 0;
    left: 0;
    width: min(20rem, 86vw);
    height: 100dvh;
    padding: 0 1rem 2rem;
    background: #fff;
    box-shadow: 20px 0 50px rgba(13, 30, 46, .2);
    transform: translateX(-105%);
    transition: transform .25s ease;
  }
  body.menu-open .sidebar { transform: translateX(0); }
  .sidebar-mobile-head { min-height: 4.8rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .sidebar-mobile-head .icon-button { display: grid; }
  .mobile-overlay { position: fixed; z-index: 100; inset: 0; display: block; visibility: hidden; background: rgba(8, 22, 32, .5); opacity: 0; backdrop-filter: blur(4px); transition: opacity .25s ease, visibility .25s ease; }
  body.menu-open .mobile-overlay { visibility: visible; opacity: 1; }
  .page-content { padding-top: 1.5rem; }
}

@media (max-width: 820px) {
  .home-hero { grid-template-columns: 1fr; min-height: 0; padding: 2rem; }
  .hero-copy h1 { max-width: 12ch; }
  .hero-visual { min-height: 23rem; }
  .hero-image-main { left: 0; width: 100%; }
  .trust-strip { grid-template-columns: 1fr; }
  .quick-facts { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-image { min-height: 22rem; }
  .destination-card, .destination-card.featured, .destination-card.small { grid-column: span 6; min-height: 22rem; }
  .destination-card.third { grid-column: span 6; min-height: 22rem; }
  .area-hero, .area-hero--reverse, .area-hero--poster { grid-template-columns: 1fr; }
  .area-hero-media, .area-hero--poster .area-hero-media { order: 0; min-height: 24rem; }
  .area-hero--reverse .area-hero-media { order: 0; }
  .route-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-stop:nth-child(2) { border-right: 0; }
  .route-stop:nth-child(-n+2) { border-bottom: 1px solid #284156; }
  .related-guides { grid-template-columns: 1fr 1fr; }
  .tokyo-city-hero { grid-template-columns: 1fr; }
  .tokyo-city-mosaic { min-height: 32rem; }
  .tokyo-base-meter { grid-template-columns: 1fr 1fr; }
  .tokyo-base-meter article:nth-child(2) { border-right: 0; }
  .tokyo-base-meter article:nth-child(-n+2) { border-bottom: 1px solid #e2e8f0; }
  .tokyo-area-card, .tokyo-area-card.wide { grid-column: span 6; }
  .tokyo-area-card.full { grid-column: 1 / -1; }
  .tokyo-area-hero, .tokyo-hero-split, .tokyo-hero-paper, .tokyo-hero-signal, .tokyo-hero-gallery { grid-template-columns: 1fr; }
  .tokyo-area-media, .tokyo-hero-signal .tokyo-area-media, .tokyo-hero-gallery .tokyo-area-media, .tokyo-hero-paper .tokyo-area-media { order: 2; min-height: 25rem; }
  .tokyo-hero-paper::before { display: none; }
  .tokyo-hero-glass .tokyo-area-copy { width: auto; }
  .tokyo-hero-stack { grid-template-rows: auto 24rem; }
  .tokyo-hero-stack .tokyo-area-copy { grid-template-columns: 1fr; }
  .tokyo-hero-stack .tokyo-area-meta { grid-column: auto; }
  .tokyo-duo-feature { grid-template-columns: 1fr; }
  .tokyo-note-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .header-inner { width: min(100% - 1rem, var(--max-width)); min-height: 4.25rem; gap: .45rem; }
  .brand { font-size: 1.08rem; }
  .brand-mark { width: 2rem; height: 2rem; }
  .header-search { position: static; width: auto; }
  .header-search > svg { display: none; }
  .header-search input {
    position: absolute;
    top: calc(100% + .5rem);
    left: .5rem;
    width: calc(100% - 1rem);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.4rem);
    box-shadow: var(--shadow-lg);
  }
  body.search-open .header-search input { visibility: visible; opacity: 1; transform: translateY(0); }
  .icon-button.search-toggle { display: grid; }
  .icon-button { width: 2.45rem; height: 2.45rem; }
  .language-menu-toggle { min-width: 2.75rem; height: 2.35rem; padding: 0 .58rem; font-size: .68rem; }
  .language-menu-panel { position: fixed; top: 4.65rem; right: .5rem; left: .5rem; width: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .language-menu-panel[hidden] { display: none; }
  .search-results { position: fixed; top: 7.4rem; right: .5rem; left: .5rem; width: auto; }
  .site-shell { width: min(100% - 1rem, var(--max-width)); }
  .page-content { padding-bottom: 3.5rem; }
  .home-hero { padding: 1.35rem; border-radius: 1.35rem; }
  .hero-copy h1 { font-size: clamp(2.55rem, 13vw, 3.6rem); }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-visual { min-height: 20rem; }
  .hero-image-main { inset: 0 0 .75rem 0; width: 100%; height: calc(100% - .75rem); border-radius: 1.15rem; }
  .hero-chip { top: .7rem; left: -.2rem; }
  .hero-stamp { right: -.2rem; width: 8.5rem; }
  .page-hero { min-height: 28rem; border-radius: 1.35rem; }
  .page-hero-content { padding: 1.4rem; }
  .area-hero { min-height: 0; border-radius: 1.35rem; }
  .area-hero-copy { padding: 1.4rem; }
  .area-hero-copy h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .area-hero-media, .area-hero--poster .area-hero-media { min-height: 23rem; }
  .area-hero-stamp { right: .8rem; bottom: .8rem; }
  .area-jump-nav { margin-top: .75rem; }
  .tokyo-city-hero { min-height: 0; border-radius: 1.35rem; }
  .tokyo-city-copy { padding: 1.5rem; }
  .tokyo-city-copy h1 { font-size: clamp(3.5rem, 21vw, 5rem); }
  .tokyo-city-mosaic { min-height: 27rem; padding: .8rem; }
  .tokyo-city-mosaic .tokyo-mosaic-main { inset: .8rem .8rem 7.2rem 2.5rem; width: calc(100% - 3.3rem); height: calc(100% - 8rem); border-radius: 4rem 1rem 1rem; }
  .tokyo-city-mosaic .tokyo-mosaic-small { right: .8rem; bottom: .8rem; height: 8.5rem; border-width: 3px; }
  .tokyo-mosaic-note { left: .8rem; bottom: 1rem; width: 47%; padding: .7rem; }
  .tokyo-base-meter { grid-template-columns: 1fr; }
  .tokyo-base-meter article, .tokyo-base-meter article:nth-child(2) { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .tokyo-base-meter article:last-child { border-bottom: 0; }
  .tokyo-area-grid { grid-template-columns: 1fr; }
  .tokyo-area-card, .tokyo-area-card.wide, .tokyo-area-card.full { grid-column: auto; min-height: 20rem; }
  .tokyo-area-hero { min-height: 0; border-radius: 1.35rem; }
  .tokyo-area-copy { padding: 1.45rem; }
  .tokyo-area-copy h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .tokyo-area-media, .tokyo-hero-signal .tokyo-area-media, .tokyo-hero-gallery .tokyo-area-media, .tokyo-hero-paper .tokyo-area-media { min-height: 22rem; margin: 0; }
  .tokyo-hero-paper .tokyo-area-media > img { border-radius: 0; }
  .tokyo-hero-editorial { min-height: 33rem; }
  .tokyo-hero-editorial .tokyo-area-copy { padding-top: 8rem; }
  .tokyo-hero-neon .tokyo-area-caption, .tokyo-hero-editorial .tokyo-area-caption { display: none; }
  .tokyo-hero-glass { min-height: 33rem; align-items: end; }
  .tokyo-hero-glass .tokyo-area-copy { margin: .8rem; padding: 1.25rem; }
  .tokyo-hero-stack { grid-template-rows: auto 19rem; }
  .tokyo-hero-stack .tokyo-area-copy { padding: 1.4rem; }
  .tokyo-hero-stack .tokyo-area-media { min-height: 19rem; margin: 0 .7rem .7rem; }
  .tokyo-note-grid { grid-template-columns: 1fr; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .fact-card { padding: .9rem; }
  .section-heading { align-items: start; flex-direction: column; }
  .info-grid { grid-template-columns: 1fr; }
  .destination-grid { grid-template-columns: 1fr; }
  .destination-card, .destination-card.featured, .destination-card.small, .destination-card.third { grid-column: auto; min-height: 22rem; }
  .zone-grid, .decision-grid, .related-guides { grid-template-columns: 1fr; }
  .route-board-head { align-items: start; flex-direction: column; }
  .route-stops { grid-template-columns: 1fr; }
  .route-stop, .route-stop:nth-child(2) { border-right: 0; border-bottom: 1px solid #284156; }
  .route-stop:last-child { border-bottom: 0; }
  .timeline-item { grid-template-columns: 1fr; gap: .25rem; }
  .sources ul { columns: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .footer-languages { justify-content: flex-start; }
  .language-dialog { grid-template-columns: 1fr; gap: 1rem; }
  .language-dialog-mark { width: 4rem; height: 4rem; }
  .language-dialog-actions { grid-column: auto; flex-direction: column; }
  .language-dialog-actions .button { width: 100%; }
}

@media (max-width: 390px) {
  .brand-word { display: none; }
  .quick-facts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .sidebar, .mobile-overlay, .site-footer, .ad-slot, .hero-actions { display: none !important; }
  .site-shell { width: 100%; display: block; }
  .page-content { padding: 0; }
  body { background: #fff; }
  .page-hero { min-height: 18rem; box-shadow: none; }
}

/* South Korea and Seoul */
body[data-country="south-korea"] {
  --korea-red: #c83b45;
  --korea-blue: #245b91;
  --korea-ink: #172232;
  --korea-cream: #f7f1e7;
  --area-accent: #c83b45;
  --area-accent-2: #245b91;
  --area-dark: #172232;
  --area-soft: #f8e9e7;
}

body[data-country="south-korea"] .section-kicker,
body[data-country="south-korea"] .fact-card small { color: var(--area-accent); }
body[data-country="south-korea"] .route-board {
  background: radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--area-accent) 27%, transparent), transparent 23rem), var(--area-dark);
  border-color: color-mix(in srgb, var(--area-accent) 24%, #172232);
}
body[data-country="south-korea"] .route-stop::before { background: var(--area-accent); border-color: var(--area-dark); box-shadow: 0 0 0 2px var(--area-accent); }
body[data-country="south-korea"] .route-stop small,
body[data-country="south-korea"] .route-board-head span { color: color-mix(in srgb, var(--area-accent) 52%, white); }

.korea-country-hero {
  position: relative;
  min-height: 39rem;
  display: grid;
  grid-template-columns: minmax(21rem, .86fr) minmax(0, 1.14fr);
  overflow: hidden;
  color: #fff8ee;
  background: #172232;
  border: 1px solid #3c4757;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.korea-country-hero::before,
.korea-country-hero::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.korea-country-hero::before { width: 22rem; height: 22rem; top: -9rem; left: -7rem; background: rgba(200, 59, 69, .28); }
.korea-country-hero::after { width: 25rem; height: 25rem; right: -11rem; bottom: -12rem; background: rgba(36, 91, 145, .33); }
.korea-country-copy { position: relative; z-index: 3; align-self: center; padding: clamp(2rem, 5vw, 4.4rem); }
.korea-country-copy .eyebrow { color: #ffd9d5; background: rgba(200, 59, 69, .14); border-color: rgba(255, 191, 185, .34); }
.korea-country-copy h1 { margin: .15rem 0 1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem, 8vw, 7rem); font-weight: 500; line-height: .86; letter-spacing: -.075em; }
.korea-country-copy > p { max-width: 34rem; margin: 0; color: #ced7e0; font-size: clamp(1rem, 1.55vw, 1.14rem); }
.korea-country-copy .page-hero-meta span { background: rgba(255, 255, 255, .08); }
.korea-country-media { position: relative; min-height: 39rem; padding: 1rem; }
.korea-country-media::before { content: "한국 / KOREA"; position: absolute; z-index: 5; top: 1.6rem; right: 1.6rem; padding: .45rem .7rem; color: #172232; background: #fff6e9; font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.korea-country-media > img { width: 100%; height: 100%; object-fit: cover; border-radius: 11rem .7rem .7rem 11rem; filter: saturate(.88) contrast(1.03); }
.korea-country-note { position: absolute; z-index: 4; right: 2rem; bottom: 2rem; width: min(17rem, 54%); padding: 1rem; color: #e8eef4; background: rgba(20, 34, 50, .9); border: 1px solid rgba(255, 255, 255, .2); border-radius: 1rem; backdrop-filter: blur(12px); font-size: .75rem; }
.korea-country-note strong { display: block; margin-bottom: .2rem; color: #ffb2ad; font-size: .9rem; }

.korea-route-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.korea-route-card { position: relative; min-height: 20rem; display: flex; align-items: end; grid-column: span 4; overflow: hidden; isolation: isolate; color: #fff; border-radius: 2.4rem .55rem .55rem .55rem; box-shadow: var(--shadow-sm); }
.korea-route-card.wide { grid-column: span 8; }
.korea-route-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.korea-route-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 18%, rgba(16, 28, 42, .94)); }
.korea-route-card:hover > img { transform: scale(1.035); }
.korea-route-copy { width: 100%; padding: 1.35rem; }
.korea-route-copy small { color: #ffb7b1; font-size: .63rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.korea-route-copy h3 { margin: .25rem 0 .4rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; line-height: 1.04; }
.korea-route-copy p { margin: 0; color: #dbe3ea; font-size: .78rem; }
.korea-route-copy span { display: inline-block; margin-top: .8rem; color: #ffd49b; font-size: .72rem; font-weight: 850; }

.korea-mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.korea-mode-grid article { position: relative; min-height: 13rem; padding: 1.35rem; overflow: hidden; background: #fff; border: 1px solid #e1ded8; border-radius: .5rem 1.8rem .5rem 1.8rem; box-shadow: var(--shadow-sm); }
.korea-mode-grid article::after { content: attr(data-label); position: absolute; right: .6rem; bottom: -.7rem; color: rgba(36, 91, 145, .07); font-family: Georgia, serif; font-size: 4.4rem; line-height: 1; }
.korea-mode-grid small { color: var(--korea-red); font-size: .63rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.korea-mode-grid h3 { margin: .35rem 0; font-size: 1.08rem; }
.korea-mode-grid p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .77rem; }

.seoul-city-hero {
  position: relative;
  min-height: 41rem;
  display: grid;
  grid-template-columns: minmax(22rem, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  color: #f8fbff;
  background-color: #10263a;
  background-image: linear-gradient(rgba(141, 194, 221, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 194, 221, .07) 1px, transparent 1px);
  background-size: 36px 36px;
  border: 1px solid #345268;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.seoul-city-hero::before { content: "서울"; position: absolute; z-index: 0; left: .8rem; bottom: -3.7rem; color: rgba(212, 236, 247, .055); font-family: Georgia, serif; font-size: 15rem; line-height: 1; }
.seoul-city-copy { position: relative; z-index: 3; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.seoul-city-copy .eyebrow { color: #ffd9d5; background: rgba(200, 59, 69, .14); border-color: rgba(255, 191, 185, .32); }
.seoul-city-copy h1 { margin: .2rem 0 1rem; font-size: clamp(4rem, 9vw, 7.5rem); line-height: .82; letter-spacing: -.08em; }
.seoul-city-copy > p { margin: 0; color: #c7d7e3; font-size: clamp(1rem, 1.55vw, 1.14rem); }
.seoul-city-mosaic { position: relative; min-height: 41rem; padding: 1rem; }
.seoul-city-mosaic .seoul-mosaic-main { position: absolute; inset: 1rem 1rem 9rem 4.5rem; width: calc(100% - 5.5rem); height: calc(100% - 10rem); object-fit: cover; border-radius: .6rem 8rem .6rem .6rem; box-shadow: 0 28px 70px rgba(0, 0, 0, .38); }
.seoul-city-mosaic .seoul-mosaic-small { position: absolute; right: 1rem; bottom: 1rem; width: 56%; height: 13rem; object-fit: cover; border: 6px solid #10263a; border-radius: .6rem; }
.seoul-mosaic-note { position: absolute; z-index: 4; left: 1rem; bottom: 1.2rem; width: 42%; padding: 1rem; color: #d9e5ec; background: rgba(10, 35, 54, .94); border: 1px solid #466a80; border-radius: .8rem; font-size: .72rem; }
.seoul-mosaic-note strong { display: block; color: #ffaaa3; font-size: .88rem; }

.seoul-district-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.seoul-district-card { position: relative; min-height: 19rem; display: flex; align-items: end; grid-column: span 4; overflow: hidden; isolation: isolate; color: #fff; border-radius: .55rem; box-shadow: var(--shadow-sm); }
.seoul-district-card.wide { grid-column: span 8; border-radius: 2.8rem .55rem .55rem .55rem; }
.seoul-district-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.seoul-district-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(9, 22, 33, .04), rgba(9, 22, 33, .94)); }
.seoul-district-card:hover > img { transform: scale(1.04); }
.seoul-district-copy { width: 100%; padding: 1.25rem; }
.seoul-district-copy small { color: #ffbbb5; font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.seoul-district-copy h3 { margin: .22rem 0 .35rem; font-size: 1.35rem; line-height: 1.08; }
.seoul-district-copy p { margin: 0; color: #dbe5ec; font-size: .76rem; }
.seoul-district-copy span { display: inline-block; margin-top: .7rem; color: #ffd398; font-size: .72rem; font-weight: 850; }

.seoul-area-hero { position: relative; min-height: 37rem; display: grid; overflow: hidden; isolation: isolate; border: 1px solid #d9dee3; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.seoul-area-copy { position: relative; z-index: 3; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.seoul-area-copy h1 { max-width: 10ch; margin: 0 0 1rem; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.065em; }
.seoul-area-copy > p { max-width: 38rem; margin: 0; color: inherit; opacity: .84; font-size: clamp(1rem, 1.5vw, 1.12rem); }
.seoul-area-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.seoul-area-meta span { padding: .42rem .62rem; color: inherit; background: rgba(255, 255, 255, .1); border: 1px solid currentColor; border-radius: 999px; font-size: .69rem; font-weight: 800; opacity: .92; }
.seoul-area-media { position: relative; min-height: 37rem; }
.seoul-area-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seoul-area-caption { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; max-width: 15.5rem; padding: .9rem 1rem; color: #eef4f7; background: rgba(13, 31, 44, .87); border: 1px solid rgba(255, 255, 255, .2); border-radius: .8rem; font-size: .71rem; backdrop-filter: blur(10px); }
.seoul-area-caption strong { display: block; margin-bottom: .18rem; color: color-mix(in srgb, var(--area-accent) 48%, white); font-size: .84rem; }

body[data-area="jongno-gwanghwamun"] { --area-accent: #c94743; --area-accent-2: #d5a64a; --area-dark: #332421; --area-soft: #f9e9e3; }
body[data-area="bukchon-seochon"] { --area-accent: #86663f; --area-accent-2: #60775f; --area-dark: #2d3029; --area-soft: #f2eadc; }
body[data-area="myeongdong-namsan"] { --area-accent: #ed4d8b; --area-accent-2: #43c8d0; --area-dark: #21142d; --area-soft: #fde7f0; }
body[data-area="hongdae-yeonnam"] { --area-accent: #7758d9; --area-accent-2: #26b8a6; --area-dark: #26213d; --area-soft: #eee9ff; }
body[data-area="gangnam-jamsil"] { --area-accent: #f16c42; --area-accent-2: #2667b0; --area-dark: #172941; --area-soft: #fff0e8; }
body[data-area="itaewon-hannam"] { --area-accent: #b87a52; --area-accent-2: #576774; --area-dark: #292723; --area-soft: #f4eadf; }
body[data-area="seongsu-seoul-forest"] { --area-accent: #df6f3e; --area-accent-2: #52816b; --area-dark: #24342f; --area-soft: #f5ece4; }
body[data-area="yeouido-hangang"] { --area-accent: #2c8ab1; --area-accent-2: #f1a04f; --area-dark: #12344a; --area-soft: #e4f3f7; }

.seoul-hero-palace { grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.2fr); color: #fff5ec; background: #332421; border-color: #79534a; }
.seoul-hero-palace::before { content: "宮"; position: absolute; z-index: 0; top: -3.2rem; left: 1rem; color: rgba(255, 238, 217, .055); font-family: Georgia, serif; font-size: 17rem; line-height: 1; }
.seoul-hero-palace .seoul-area-media { margin: 1rem; min-height: 35rem; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 91%, 91% 100%, 0 100%); }
.seoul-hero-palace .seoul-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

.seoul-hero-hanok { grid-template-columns: minmax(0, 1.16fr) minmax(20rem, .84fr); color: #2d3029; background: repeating-linear-gradient(135deg, #f4eddf 0 2px, #f8f3e9 2px 12px); border-color: #cabda8; }
.seoul-hero-hanok .seoul-area-media { order: -1; margin: 1rem; min-height: 35rem; overflow: hidden; border-radius: 8rem .5rem 8rem .5rem; }
.seoul-hero-hanok .seoul-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.seoul-hero-hanok .seoul-area-meta span { color: #4b493d; background: rgba(255, 255, 255, .52); }

.seoul-hero-neon { display: flex; align-items: end; min-height: 40rem; color: #fff4fb; border-color: #e55b96; }
.seoul-hero-neon .seoul-area-media { position: absolute; z-index: -2; inset: 0; }
.seoul-hero-neon::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(27, 12, 39, .97), rgba(27, 12, 39, .52) 58%, rgba(27, 12, 39, .1)); }
.seoul-hero-neon .seoul-area-copy { width: min(49rem, 74%); border-left: .42rem solid #43c8d0; }
.seoul-hero-neon .seoul-area-copy h1 { text-transform: uppercase; }

.seoul-hero-campus { grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.1fr); color: #f6f3ff; background: linear-gradient(140deg, #292341 0 52%, #1c6d70 52%); border-color: #65599a; }
.seoul-hero-campus::before { content: "PLAY / REST / REPEAT"; position: absolute; z-index: 4; top: 1.2rem; right: 1.2rem; color: rgba(255, 255, 255, .35); font-size: .64rem; font-weight: 900; letter-spacing: .18em; }
.seoul-hero-campus .seoul-area-media { margin: 1rem; min-height: 35rem; overflow: hidden; transform: rotate(-1.2deg); border-radius: .6rem 7rem .6rem .6rem; }

.seoul-hero-grid { grid-template-columns: minmax(20rem, .82fr) minmax(0, 1.18fr); color: #f2f7fb; background-color: #172941; background-image: linear-gradient(rgba(103, 155, 206, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 155, 206, .09) 1px, transparent 1px); background-size: 28px 28px; border-color: #426387; }
.seoul-hero-grid .seoul-area-media { margin: 1rem; min-height: 35rem; overflow: hidden; clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 7%); }
.seoul-hero-grid .seoul-area-copy h1 { font-weight: 850; text-transform: uppercase; }

.seoul-hero-gallery { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr); color: #292723; background: #f2e9dd; border-color: #c7b6a4; }
.seoul-hero-gallery::before { content: "ART / HILLS / TABLES"; position: absolute; z-index: 4; top: 1rem; left: 1rem; color: #8f745e; font-size: .61rem; font-weight: 900; letter-spacing: .18em; }
.seoul-hero-gallery .seoul-area-media { order: -1; margin: 1rem; min-height: 35rem; overflow: hidden; border-radius: .4rem; }
.seoul-hero-gallery .seoul-area-copy { border-bottom: .35rem solid #b87a52; }
.seoul-hero-gallery .seoul-area-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.seoul-hero-gallery .seoul-area-meta span { color: #4e443b; background: rgba(255, 255, 255, .46); }

.seoul-hero-industrial { grid-template-columns: minmax(20rem, .88fr) minmax(0, 1.12fr); color: #edf5f1; background-color: #24342f; background-image: repeating-linear-gradient(90deg, rgba(232, 244, 238, .045) 0 1px, transparent 1px 42px); border-color: #557064; }
.seoul-hero-industrial::before { content: "FACTORY → FOREST"; position: absolute; z-index: 4; right: 1.2rem; bottom: 1.1rem; color: rgba(255, 255, 255, .25); font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.seoul-hero-industrial .seoul-area-media { margin: 1rem; min-height: 35rem; overflow: hidden; border-radius: 8rem 8rem .45rem .45rem; }

.seoul-hero-river { display: flex; justify-content: end; align-items: center; min-height: 40rem; color: #eefaff; border-color: #57a4c2; }
.seoul-hero-river .seoul-area-media { position: absolute; z-index: -2; inset: 0; }
.seoul-hero-river::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8, 44, 65, .12), rgba(8, 44, 65, .72)); }
.seoul-hero-river .seoul-area-copy { width: min(47rem, 62%); margin: 2rem; padding: clamp(1.6rem, 4vw, 3rem); background: rgba(10, 47, 69, .76); border: 1px solid rgba(255, 255, 255, .32); border-radius: 1.2rem; backdrop-filter: blur(15px); }

.seoul-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.seoul-note { position: relative; min-height: 11rem; padding: 1.35rem; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, var(--area-accent) 23%, white); border-radius: .45rem 1.5rem .45rem 1.5rem; box-shadow: var(--shadow-sm); }
.seoul-note::before { content: ""; position: absolute; top: 0; right: 1rem; left: 1rem; height: .25rem; background: var(--area-accent); }
.seoul-note:nth-child(2n)::before { background: var(--area-accent-2); }
.seoul-note small { color: var(--area-accent); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.seoul-note h3 { margin: .38rem 0 .45rem; font-size: 1.05rem; }
.seoul-note p { margin: 0; color: var(--muted); font-size: .78rem; }

.seoul-duo-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); gap: 1rem; }
.seoul-duo-feature > img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; border-radius: .45rem 2rem .45rem 2rem; box-shadow: var(--shadow-sm); }
.seoul-duo-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.8rem); color: #eaf0f3; background: var(--area-dark); border-radius: 2rem .45rem 2rem .45rem; }
.seoul-duo-copy h2 { margin: .3rem 0 .7rem; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.08; }
.seoul-duo-copy p { color: #c9d4d8; }
.seoul-duo-copy .section-kicker { color: color-mix(in srgb, var(--area-accent) 52%, white); }

@media (max-width: 900px) {
  .korea-country-hero, .seoul-city-hero { grid-template-columns: 1fr; }
  .korea-country-media, .seoul-city-mosaic { min-height: 32rem; }
  .korea-route-card, .korea-route-card.wide, .seoul-district-card, .seoul-district-card.wide { grid-column: span 6; }
  .korea-mode-grid { grid-template-columns: 1fr 1fr; }
  .seoul-area-hero, .seoul-hero-palace, .seoul-hero-hanok, .seoul-hero-campus, .seoul-hero-grid, .seoul-hero-gallery, .seoul-hero-industrial { grid-template-columns: 1fr; }
  .seoul-hero-palace .seoul-area-media, .seoul-hero-hanok .seoul-area-media, .seoul-hero-campus .seoul-area-media, .seoul-hero-grid .seoul-area-media, .seoul-hero-gallery .seoul-area-media, .seoul-hero-industrial .seoul-area-media { order: 2; min-height: 25rem; }
  .seoul-hero-river .seoul-area-copy { width: auto; }
  .seoul-note-grid { grid-template-columns: 1fr 1fr; }
  .seoul-duo-feature { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .korea-country-hero, .seoul-city-hero, .seoul-area-hero { min-height: 0; border-radius: 1.35rem; }
  .korea-country-copy, .seoul-city-copy, .seoul-area-copy { padding: 1.45rem; }
  .korea-country-copy h1 { font-size: clamp(3.2rem, 17vw, 4.7rem); }
  .korea-country-media { min-height: 27rem; padding: .75rem; }
  .korea-country-media > img { border-radius: 6rem .6rem .6rem 6rem; }
  .korea-country-note { right: 1.2rem; bottom: 1.2rem; width: 58%; padding: .75rem; }
  .korea-route-grid, .seoul-district-grid { grid-template-columns: 1fr; }
  .korea-route-card, .korea-route-card.wide, .seoul-district-card, .seoul-district-card.wide { grid-column: auto; min-height: 20rem; }
  .korea-mode-grid { grid-template-columns: 1fr; }
  .seoul-city-copy h1 { font-size: clamp(4rem, 23vw, 5.5rem); }
  .seoul-city-mosaic { min-height: 27rem; padding: .75rem; }
  .seoul-city-mosaic .seoul-mosaic-main { inset: .75rem .75rem 7.2rem 2.5rem; width: calc(100% - 3.25rem); height: calc(100% - 7.95rem); border-radius: .5rem 5rem .5rem .5rem; }
  .seoul-city-mosaic .seoul-mosaic-small { right: .75rem; bottom: .75rem; height: 8.5rem; border-width: 3px; }
  .seoul-mosaic-note { left: .75rem; bottom: 1rem; width: 47%; padding: .7rem; }
  .seoul-area-copy h1 { font-size: clamp(2.55rem, 13vw, 3.9rem); }
  .seoul-hero-palace .seoul-area-media, .seoul-hero-hanok .seoul-area-media, .seoul-hero-campus .seoul-area-media, .seoul-hero-grid .seoul-area-media, .seoul-hero-gallery .seoul-area-media, .seoul-hero-industrial .seoul-area-media { min-height: 22rem; margin: .7rem; }
  .seoul-hero-neon { min-height: 35rem; }
  .seoul-hero-neon .seoul-area-copy { width: auto; border-left-width: .3rem; }
  .seoul-hero-neon .seoul-area-copy h1 { font-size: clamp(2.05rem, 10.4vw, 3.25rem); letter-spacing: -.045em; }
  .seoul-hero-neon .seoul-area-caption { display: none; }
  .seoul-hero-river { min-height: 35rem; align-items: end; }
  .seoul-hero-river .seoul-area-copy { margin: .75rem; padding: 1.25rem; }
  .seoul-hero-river .seoul-area-caption { display: none; }
  .seoul-hero-industrial .seoul-area-copy h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); letter-spacing: -.04em; word-spacing: .08em; }
  .seoul-note-grid { grid-template-columns: 1fr; }
}

/* Busan: one city, nine deliberately different editorial systems */
body[data-city="busan"] { --busan-ink: #092f3b; --busan-sea: #0d7c86; --busan-coral: #ef6f51; --busan-sand: #f4e9d5; }
body[data-city="busan"] .section-kicker { color: var(--area-accent, var(--busan-sea)); }

.busan-city-hero {
  position: relative; min-height: 42rem; display: grid; grid-template-columns: minmax(21rem, .82fr) minmax(0, 1.18fr);
  overflow: hidden; color: #f7fbfa; background: #082f3d; border: 1px solid #315b65; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); isolation: isolate;
}
.busan-city-hero::before { content: "BUSAN / PORT ATLAS"; position: absolute; z-index: 3; left: 1.2rem; bottom: 1rem; color: rgba(255,255,255,.2); font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .18em; writing-mode: vertical-rl; }
.busan-city-hero::after { content: "부산"; position: absolute; z-index: 0; left: .2rem; top: -3rem; color: rgba(181,231,226,.055); font-family: Georgia, serif; font-size: 17rem; line-height: 1; }
.busan-port-copy { position: relative; z-index: 2; align-self: center; padding: clamp(2rem, 5vw, 4rem); }
.busan-port-copy .eyebrow { color: #ffe2c2; background: rgba(239,111,81,.13); border-color: rgba(255,190,160,.35); }
.busan-port-copy h1 { margin: .35rem 0 1rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.55rem, 7vw, 6.7rem); font-weight: 500; line-height: .82; letter-spacing: -.07em; }
.busan-port-copy h1 em { color: #71cbd0; font-size: .62em; font-weight: 500; }
.busan-port-copy > p { max-width: 35rem; margin: 0; color: #c9dce0; font-size: clamp(1rem, 1.55vw, 1.13rem); }
.busan-port-copy .page-hero-meta span { background: rgba(255,255,255,.08); }
.busan-port-collage { position: relative; min-height: 42rem; padding: 1rem; }
.busan-collage-main { position: absolute; inset: 1rem 1rem 9rem 4.5rem; width: calc(100% - 5.5rem); height: calc(100% - 10rem); object-fit: cover; border-radius: 10rem .6rem .6rem .6rem; box-shadow: 0 30px 72px rgba(0,0,0,.38); }
.busan-collage-small { position: absolute; right: 1rem; bottom: 1rem; width: 57%; height: 13rem; object-fit: cover; border: 6px solid #082f3d; border-radius: .55rem; }
.busan-coordinate { position: absolute; z-index: 4; left: 1rem; bottom: 1.25rem; width: 42%; padding: .95rem; color: #dcebed; background: rgba(6,41,52,.94); border: 1px solid #3f7078; border-radius: .75rem; font-size: .7rem; }
.busan-coordinate strong { display: block; margin-bottom: .2rem; color: #f5b28d; font: 800 .78rem/1.2 ui-monospace, monospace; }

.busan-atlas { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .85rem; }
.busan-atlas-card { position: relative; min-height: 17rem; display: flex; flex-direction: column; justify-content: end; grid-column: span 4; overflow: hidden; padding: 1.35rem; color: #f8fbfa; background: #144655; border: 1px solid rgba(255,255,255,.16); border-radius: .45rem; box-shadow: var(--shadow-sm); isolation: isolate; }
.busan-atlas-card::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .7; }
.busan-atlas-card::after { content: ""; position: absolute; z-index: -1; right: -3rem; top: -3rem; width: 9rem; height: 9rem; border: 1.2rem solid rgba(255,255,255,.06); border-radius: 50%; }
.busan-atlas-card.wide { grid-column: span 8; }
.busan-atlas-card.port { background: #712c2c; border-radius: .4rem 2.7rem .4rem .4rem; }
.busan-atlas-card.port::before { background: repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,211,129,.08) 24px); }
.busan-atlas-card.hillside { color: #233d38; background: #dfe8ca; transform: translateY(1.1rem); }
.busan-atlas-card.hillside::before { background: linear-gradient(140deg,transparent 50%,rgba(26,107,103,.14) 50%); }
.busan-atlas-card.beach { color: #123c50; background: #d9eff5; border-radius: 5rem 5rem .45rem .45rem; }
.busan-atlas-card.night { background: linear-gradient(135deg,#211648,#3d2a75); border-radius: .4rem .4rem 3rem .4rem; }
.busan-atlas-card.night::before { background: radial-gradient(circle at 75% 20%,rgba(77,232,255,.25),transparent 2px); background-size: 23px 23px; }
.busan-atlas-card.zine { color: #351925; background: #ffe0bd; transform: rotate(-.55deg); }
.busan-atlas-card.island { background-color: #27443d; background-image: radial-gradient(ellipse at 80% 10%,transparent 0 19%,rgba(186,222,201,.13) 19.5% 20%,transparent 20.5% 28%,rgba(186,222,201,.12) 28.5% 29%,transparent 29.5%); }
.busan-atlas-card.sunrise { color: #502f1b; background: linear-gradient(135deg,#fff1cf,#f6b783); border-radius: 5rem .45rem .45rem 5rem; }
.busan-atlas-card.sunset { color: #4b2d28; background: linear-gradient(#f7d8b8,#e5a18b); border-radius: .4rem 4rem .4rem .4rem; }
.busan-atlas-card .atlas-code { color: inherit; opacity: .65; font: 850 .62rem/1 ui-monospace,monospace; letter-spacing: .14em; }
.busan-atlas-card h3 { margin: .45rem 0 .35rem; font-family: Georgia,"Times New Roman",serif; font-size: clamp(1.35rem,2vw,1.85rem); line-height: 1.04; }
.busan-atlas-card p { max-width: 31rem; margin: 0; color: inherit; opacity: .8; font-size: .78rem; }
.busan-atlas-card strong { margin-top: .9rem; color: inherit; font-size: .73rem; }
.busan-atlas-card:hover { transform: translateY(-3px); }
.busan-atlas-card.hillside:hover { transform: translateY(calc(1.1rem - 3px)); }
.busan-atlas-card.has-photo { isolation:isolate; color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.42); }
.busan-atlas-card.has-photo > img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s ease,filter .55s ease; }
.busan-atlas-card.has-photo::before { z-index:1; opacity:1; background:linear-gradient(180deg,rgba(8,20,25,.05) 5%,rgba(8,20,25,.2) 40%,rgba(8,20,25,.9) 100%); }
.busan-atlas-card.has-photo > :not(img) { z-index:2; }
.busan-atlas-card.port.has-photo::before { background:linear-gradient(180deg,rgba(74,19,20,.08),rgba(74,19,20,.28) 40%,rgba(55,15,17,.94)); }
.busan-atlas-card.hillside.has-photo::before { background:linear-gradient(180deg,rgba(16,54,48,.03),rgba(20,55,49,.18) 35%,rgba(20,52,47,.92)); }
.busan-atlas-card.beach.has-photo::before { background:linear-gradient(180deg,rgba(4,57,83,.02),rgba(9,63,87,.18) 40%,rgba(6,45,65,.92)); }
.busan-atlas-card.night.has-photo::before { background:linear-gradient(180deg,rgba(23,12,67,.03),rgba(28,15,70,.26) 38%,rgba(22,12,61,.95)); }
.busan-atlas-card.zine.has-photo::before { background:linear-gradient(180deg,rgba(80,35,18,.03),rgba(80,35,18,.2) 38%,rgba(61,26,26,.93)); }
.busan-atlas-card.island.has-photo::before { background:linear-gradient(180deg,rgba(18,52,43,.02),rgba(21,53,46,.2) 40%,rgba(18,47,41,.94)); }
.busan-atlas-card.sunrise.has-photo::before { background:linear-gradient(180deg,rgba(101,47,22,.02),rgba(101,47,22,.2) 38%,rgba(72,32,20,.92)); }
.busan-atlas-card.sunset.has-photo::before { background:linear-gradient(180deg,rgba(75,34,31,.02),rgba(75,34,31,.16) 35%,rgba(68,32,31,.92)); }
.busan-atlas-card.has-photo:hover > img { transform:scale(1.045); filter:saturate(1.08); }
.busan-atlas-card.has-photo .atlas-code { color:#fff; opacity:.82; }
.busan-atlas-card.has-photo strong { color:#ffd39d; }
.busan-atlas-card.hillside.has-photo,.busan-atlas-card.beach.has-photo,.busan-atlas-card.zine.has-photo,.busan-atlas-card.sunrise.has-photo,.busan-atlas-card.sunset.has-photo { color:#fff; }

.busan-base-compass { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: .8rem; align-items: stretch; }
.busan-base-compass article { position: relative; min-height: 16rem; padding: 1.5rem; overflow: hidden; color: #173740; background: #fffdf8; border: 1px solid #d7dedb; border-radius: 6rem 6rem .6rem .6rem; text-align: center; box-shadow: var(--shadow-sm); }
.busan-base-compass article:nth-child(2) { min-height: 18rem; color: #f1f8f7; background: #0c4c59; border-color: #0c4c59; }
.busan-base-compass article::before { content:""; display:block; width: .75rem; height: .75rem; margin: 0 auto 1rem; background: #ed7758; border: .25rem solid #fde1cf; border-radius: 50%; }
.busan-base-compass small { color: inherit; opacity: .65; font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.busan-base-compass h3 { margin: .45rem 0; font-family: Georgia,serif; font-size: 1.55rem; }
.busan-base-compass p { color: inherit; opacity: .77; font-size: .78rem; }
.busan-base-compass span { display:block; margin-top: 1rem; color: #c54f38; font-size:.7rem; font-weight:850; }
.busan-base-compass article:nth-child(2) span { color:#ffbc91; }

.busan-transit-deck { display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.9fr); overflow:hidden; color:#e8f3f2; background:#0d3945; border:1px solid #345f67; border-radius: .5rem 2.6rem .5rem 2.6rem; }
.busan-transit-copy { padding:clamp(1.6rem,4vw,3rem); }
.busan-transit-copy .section-kicker { color:#ffb48d; }
.busan-transit-copy h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.9rem,3vw,2.65rem); font-weight:500; line-height:1.05; }
.busan-transit-copy p { color:#c8d9db; }
.busan-transit-map { display:flex; flex-direction:column; justify-content:center; gap:.45rem; margin:1rem; padding:1.4rem; color:#173940; background:#f5ead6; border-radius:4rem .5rem .5rem .5rem; }
.busan-transit-map > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; background:#fffaf0; border:1px solid #ddccb4; border-radius:999px; }
.busan-transit-map > i { align-self:center; color:#d25f42; font-style:normal; font-weight:900; }
.busan-transit-map span { color:#647277; font-size:.69rem; }
.busan-transit-map .split { border-radius:.55rem; }
.busan-dayline { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; counter-reset:days; }
.busan-dayline article { position:relative; min-height:19rem; padding:1.5rem; overflow:hidden; color:#f4faf9; background:#154b58; border-radius:.5rem; box-shadow:var(--shadow-sm); }
.busan-dayline article:nth-child(2) { color:#24404b; background:#dceff1; border-radius:5rem 5rem .5rem .5rem; }
.busan-dayline article:nth-child(3) { color:#4c3028; background:#f4cfb9; border-radius:.5rem 5rem .5rem .5rem; }
.busan-dayline time { font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.13em; }
.busan-dayline h3 { margin:4.5rem 0 .5rem; font-family:Georgia,serif; font-size:1.5rem; }
.busan-dayline p { color:inherit; opacity:.8; font-size:.78rem; }
.busan-dayline span { position:absolute; bottom:1.2rem; color:inherit; font-size:.7rem; font-weight:850; }
.busan-weather-board { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #cfdedc; border-radius:1rem; box-shadow:var(--shadow-sm); }
.busan-weather-board article { min-height:11rem; padding:1.25rem; background:#fff; border-right:1px solid #dbe5e3; }
.busan-weather-board article:last-child { border-right:0; }
.busan-weather-board strong { color:#0b6570; }
.busan-weather-board p { margin:.5rem 0 0; color:var(--muted); font-size:.76rem; }

/* Busan area color systems */
body[data-area="nampo-jagalchi"] { --area-accent:#b64336; --area-accent-2:#efb848; --area-dark:#351f1b; --area-soft:#f8e7d7; }
body[data-area="gamcheon-songdo"] { --area-accent:#137c74; --area-accent-2:#d46e4d; --area-dark:#183d3b; --area-soft:#e4f2ed; }
body[data-area="haeundae-dongbaek"] { --area-accent:#137ca1; --area-accent-2:#e1a73d; --area-dark:#0b3549; --area-soft:#e4f3f8; }
body[data-area="gwangalli-millak"] { --area-accent:#6d5bd0; --area-accent-2:#2bd5e8; --area-dark:#211746; --area-soft:#eeeafd; }
body[data-area="seomyeon-jeonpo"] { --area-accent:#b4235a; --area-accent-2:#ef7b45; --area-dark:#301729; --area-soft:#fde7ef; }
body[data-area="yeongdo-taejongdae"] { --area-accent:#3d7567; --area-accent-2:#c79051; --area-dark:#203b35; --area-soft:#e8f0e9; }
body[data-area="haedong-yonggungsa-gijang"] { --area-accent:#b4522f; --area-accent-2:#d5a44f; --area-dark:#40291f; --area-soft:#fff0db; }
body[data-area="dadaepo-amisan"] { --area-accent:#a85039; --area-accent-2:#d99a58; --area-dark:#45302b; --area-soft:#f8e9dc; }

.busan-area-hero { position:relative; min-height:38rem; display:grid; overflow:hidden; isolation:isolate; border:1px solid #d5dddc; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.busan-area-copy { position:relative; z-index:4; align-self:center; padding:clamp(2rem,5vw,4rem); }
.busan-area-copy h1 { max-width:11ch; margin:.25rem 0 1rem; font-size:clamp(2.9rem,6vw,5.5rem); line-height:.88; letter-spacing:-.065em; }
.busan-area-copy h1 i { font-family:Georgia,serif; font-weight:500; }
.busan-area-copy > p { max-width:38rem; margin:0; color:inherit; opacity:.84; font-size:clamp(1rem,1.5vw,1.12rem); }
.busan-area-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.busan-area-meta span { padding:.42rem .63rem; color:inherit; background:rgba(255,255,255,.1); border:1px solid currentColor; border-radius:999px; font-size:.69rem; font-weight:800; opacity:.9; }
.busan-area-media { position:relative; min-height:38rem; }
.busan-area-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.busan-area-caption { position:absolute; z-index:5; right:1rem; bottom:1rem; max-width:15.5rem; padding:.9rem 1rem; color:#edf6f5; background:rgba(10,35,40,.88); border:1px solid rgba(255,255,255,.22); border-radius:.75rem; font-size:.7rem; backdrop-filter:blur(10px); }
.busan-area-caption strong { display:block; margin-bottom:.18rem; color:color-mix(in srgb,var(--area-accent) 48%,white); font-size:.84rem; }

/* Nampo market ledger */
.busan-hero-market { grid-template-columns:minmax(20rem,.82fr) minmax(0,1.18fr); color:#fff4e7; background:#351f1b; border-color:#754b3d; }
.busan-hero-market::before { content:""; position:absolute; z-index:0; inset:0 50% 0 0; background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(239,184,72,.08) 32px); }
.busan-hero-market .busan-area-media { margin:1rem; min-height:36rem; overflow:hidden; border-radius:.35rem 4rem .35rem .35rem; }
.busan-market-sign { position:absolute; z-index:7; top:1rem; right:1rem; padding:.65rem .8rem; color:#402019; background:#f3bd45; box-shadow:6px 6px 0 #a3392e; transform:rotate(1.5deg); }
.busan-market-sign span { display:block; font-size:1rem; font-weight:900; }
.busan-market-sign small { display:block; margin-top:.1rem; font:800 .52rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.market-ledger { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #d9c9bb; background:#fffaf1; box-shadow:var(--shadow-sm); }
.market-ledger article { position:relative; min-height:15rem; padding:1.25rem; border-right:1px dashed #cdbba8; }
.market-ledger article:last-child { border-right:0; }
.market-ledger b { position:absolute; right:.7rem; top:.5rem; color:rgba(160,62,49,.11); font-family:Georgia,serif; font-size:4.2rem; }
.market-ledger small { color:#a13f33; font:900 .63rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.market-ledger h3 { position:relative; margin:2.8rem 0 .5rem; font-family:Georgia,serif; font-size:1.18rem; }
.market-ledger p { margin:0; color:var(--muted); font-size:.76rem; }
.market-status-board { overflow:hidden; color:#f8ebda; background:#3c2620; border:1px solid #765247; border-radius:.35rem; box-shadow:var(--shadow-sm); }
.market-status-board > div { display:grid; grid-template-columns:1.1fr .8fr 1.1fr 1fr; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.12); }
.market-status-board > div:last-child { border-bottom:0; }
.market-status-board .status-head { color:#ffd46f; background:#211512; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.13em; }
.market-status-board span,.market-status-board em { color:#d8c7bc; font-size:.73rem; font-style:normal; }
.nampo-route-editorial { display:grid; grid-template-columns:minmax(0,.9fr) minmax(22rem,1.1fr); gap:1rem; }
.nampo-route-photo { position:relative; min-height:35rem; overflow:hidden; border-radius:.35rem; }
.nampo-route-photo img { width:100%; height:100%; object-fit:cover; }
.nampo-route-photo span { position:absolute; left:1rem; bottom:1rem; padding:.7rem; color:#3d241d; background:#f4c34d; font:900 .66rem/1.35 ui-monospace,monospace; letter-spacing:.1em; transform:rotate(-2deg); }
.nampo-route-copy { padding:clamp(1.5rem,4vw,2.8rem); background:#fff9ee; border:1px solid #ddc8b7; border-radius:.35rem 3rem .35rem .35rem; }
.nampo-route-copy h2 { margin:.35rem 0 1rem; font-family:Georgia,serif; font-size:clamp(1.9rem,3.2vw,2.8rem); font-weight:500; line-height:1.04; }
.nampo-route-copy ol { padding-left:1.2rem; }
.nampo-route-copy li { margin:.85rem 0; color:var(--muted); }
.editor-note { padding:1rem; color:#f7eadb!important; background:#3b241f; font-size:.75rem!important; }
.busan-ticket-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.busan-ticket-grid article { position:relative; min-height:13rem; padding:1.3rem; background:#fff; border:1px solid #ded3c9; border-radius:.4rem; box-shadow:var(--shadow-sm); }
.busan-ticket-grid article::after { content:""; position:absolute; top:50%; right:-.42rem; width:.8rem; height:.8rem; background:var(--surface); border:1px solid #ded3c9; border-radius:50%; transform:translateY(-50%); }
.busan-ticket-grid article:last-child::after { display:none; }
.busan-ticket-grid span { color:#a13f33; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.busan-ticket-grid h3 { margin:.65rem 0 .45rem; }
.busan-ticket-grid p { margin:0; color:var(--muted); font-size:.76rem; }

/* Gamcheon elevation study */
.busan-hero-elevation { grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr); color:#24403b; background-color:#e8f2e7; background-image:radial-gradient(ellipse at 15% 10%,transparent 0 17%,rgba(19,124,116,.12) 17.4% 17.9%,transparent 18.3% 26%,rgba(19,124,116,.1) 26.4% 26.9%,transparent 27.3%); border-color:#a9c6bb; }
.busan-elevation-image { position:relative; min-height:38rem; margin:1rem; overflow:hidden; order:-1; clip-path:polygon(0 0,100% 0,91% 100%,0 91%); }
.busan-elevation-image img { width:100%; height:100%; object-fit:cover; }
.contour-label { position:absolute; left:1rem; top:1rem; padding:.7rem .8rem; color:#e9f7f3; background:rgba(22,66,62,.88); }
.contour-label b,.contour-label span { display:block; }
.contour-label b { font:900 .65rem/1 ui-monospace,monospace; letter-spacing:.14em; }
.contour-label span { margin-top:.25rem; font-size:.67rem; }
.sea-level-mark { position:absolute; z-index:5; right:1rem; bottom:1rem; color:#146c69; font:900 .65rem/1 ui-monospace,monospace; letter-spacing:.16em; }
.elevation-transect { position:relative; padding:2rem 1.2rem 1.5rem 5.5rem; background:linear-gradient(165deg,#f5f2dd,#e1f1eb); border:1px solid #b9cec5; border-radius:2rem .45rem 2rem .45rem; box-shadow:var(--shadow-sm); }
.elevation-transect::before { content:""; position:absolute; left:5.2rem; right:1rem; bottom:3rem; height:75%; background:linear-gradient(156deg,transparent 0 46%,rgba(25,110,102,.17) 46.3% 47%,transparent 47.3%); pointer-events:none; }
.elevation-axis { position:absolute; left:1rem; top:1.5rem; bottom:1.5rem; display:flex; flex-direction:column; justify-content:space-between; color:#51736c; font:900 .56rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.elevation-transect article { position:relative; z-index:2; width:calc(48% + var(--level)*3%); display:grid; grid-template-columns:3rem 1fr; gap:.8rem; margin:.65rem 0; margin-left:calc((8 - var(--level))*3.5%); padding:.9rem 1rem; background:rgba(255,255,255,.87); border:1px solid #c9d9d2; border-left:.3rem solid #167b73; box-shadow:0 6px 18px rgba(26,71,63,.07); }
.elevation-transect article b { color:#d46648; font-family:Georgia,serif; font-size:1.8rem; }
.elevation-transect small { color:#16766f; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.elevation-transect h3 { margin:.2rem 0; font-size:1rem; }
.elevation-transect p { margin:0; color:var(--muted); font-size:.73rem; }
.slope-rule-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.slope-rule-grid article { min-height:12rem; padding:1.35rem; background:#fff; border:1px solid #c7d8d2; clip-path:polygon(0 0,94% 0,100% 16%,100% 100%,0 100%); }
.slope-rule-grid article:nth-child(2n) { background:#eff3de; transform:translateY(1rem); }
.slope-rule-grid span { color:#17766f; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.slope-rule-grid h3 { margin:1.4rem 0 .4rem; }
.slope-rule-grid p { margin:0; color:var(--muted); font-size:.77rem; }
.songdo-horizon { display:grid; grid-template-columns:minmax(20rem,.8fr) minmax(0,1.2fr); overflow:hidden; color:#e9f8f7; background:#153e42; border-radius:.5rem 5rem .5rem .5rem; }
.songdo-copy { align-self:center; padding:clamp(1.5rem,4vw,2.8rem); }
.songdo-copy .section-kicker { color:#efad8f; }
.songdo-copy h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.9rem,3vw,2.6rem); font-weight:500; line-height:1.05; }
.songdo-copy p { color:#c7dbda; }
.songdo-horizon img { width:100%; height:100%; min-height:29rem; object-fit:cover; }
.horizon-options { display:flex; flex-direction:column; gap:.5rem; margin-top:1.2rem; }
.horizon-options span { padding:.7rem .8rem; background:rgba(255,255,255,.07); border-left:.2rem solid #ef8b69; font-size:.73rem; }
.horizon-options b { color:#f6bc9f; }
.busan-mobility-meter { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; align-items:end; }
.busan-mobility-meter article { min-height:9rem; padding:1.15rem; color:#315049; background:#edf5f1; border:1px solid #bfd2ca; }
.busan-mobility-meter article:nth-child(2) { min-height:12rem; background:#dbece5; }
.busan-mobility-meter article:nth-child(3) { min-height:15rem; color:#f1f7f4; background:#28564f; }
.busan-mobility-meter p { margin:.45rem 0 0; color:inherit; opacity:.77; font-size:.75rem; }
.busan-step-route { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.busan-step-route article { min-height:14rem; padding:1.25rem; background:#fff; border-top:.35rem solid #16796f; box-shadow:var(--shadow-sm); }
.busan-step-route article:nth-child(2n) { transform:translateY(1.4rem); border-top-color:#d56d4e; }
.busan-step-route time { color:#16796f; font:900 .65rem/1 ui-monospace,monospace; }
.busan-step-route h3 { margin:2rem 0 .45rem; }
.busan-step-route p { margin:0; color:var(--muted); font-size:.76rem; }

/* Haeundae coastal clock */
.busan-hero-dayclock { grid-template-columns:minmax(20rem,.8fr) minmax(0,1.2fr); color:#ecf9ff; background:#0b3549; border-color:#37748d; }
.busan-hero-dayclock .busan-area-media { margin:1rem; min-height:36rem; overflow:hidden; border-radius:10rem 10rem .6rem .6rem; }
.busan-sun-arc { position:absolute; z-index:6; top:1rem; left:1.2rem; width:14rem; height:7rem; display:flex; justify-content:space-between; align-items:end; padding:0 .4rem .7rem; color:rgba(255,255,255,.55); border:1px solid rgba(255,199,96,.5); border-bottom:0; border-radius:8rem 8rem 0 0; font:800 .55rem/1 ui-monospace,monospace; }
.busan-sun-arc::before { content:""; position:absolute; left:50%; top:.65rem; width:1.3rem; height:1.3rem; background:#ffc35f; border-radius:50%; box-shadow:0 0 2.5rem #ffc35f; transform:translateX(-50%); }
.coast-clock { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #b8d2dc; border-radius:7rem 7rem .55rem .55rem; box-shadow:var(--shadow-sm); }
.coast-clock article { min-height:20rem; padding:1.4rem; color:#203e4a; background:#dcecf1; border-right:1px solid rgba(30,74,91,.15); }
.coast-clock article.day { background:#f7e5b5; }
.coast-clock article.gold { background:#e7ad6a; }
.coast-clock article.night { color:#eff8fb; background:#17354e; border-right:0; }
.coast-clock time { display:block; color:inherit; font:900 1.2rem/1 ui-monospace,monospace; }
.coast-clock span { display:block; margin-top:.35rem; opacity:.6; font:800 .58rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.coast-clock h3 { margin:5rem 0 .55rem; font-family:Georgia,serif; font-size:1.25rem; }
.coast-clock p { margin:0; color:inherit; opacity:.76; font-size:.76rem; }
.dongbaek-window { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr); gap:0; overflow:hidden; border-radius:.5rem 5rem .5rem .5rem; box-shadow:var(--shadow-sm); }
.dongbaek-window img { width:100%; height:100%; min-height:29rem; object-fit:cover; }
.dongbaek-window > div { padding:clamp(1.5rem,4vw,2.8rem); color:#e9f5f8; background:#12384a; }
.dongbaek-window h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; line-height:1.06; }
.dongbaek-window p { color:#c7dce3; }
.haeundae-choice-ribbon { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.haeundae-choice-ribbon article { min-height:14rem; padding:1.25rem; background:#fff; border:1px solid #c9dce3; border-radius:6rem 6rem .4rem .4rem; text-align:center; }
.haeundae-choice-ribbon small { color:#147b9e; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.haeundae-choice-ribbon h3 { margin:2.5rem 0 .45rem; font-family:Georgia,serif; }
.haeundae-choice-ribbon p { margin:0; color:var(--muted); font-size:.75rem; }
.sea-condition-board { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; padding:.7rem; background:#dceef3; border-radius:.6rem 3rem .6rem .6rem; }
.sea-condition-board div { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; background:#fff; border-left:.3rem solid #1780a3; }
.sea-condition-board b { color:#15536a; font:900 .65rem/1.3 ui-monospace,monospace; }
.sea-condition-board span { color:var(--muted); font-size:.74rem; text-align:right; }

/* Gwangalli night poster */
.busan-hero-nightposter { display:flex; align-items:end; min-height:42rem; color:#f7f5ff; background:#171033; border-color:#695bb6; }
.busan-hero-nightposter .busan-area-media { position:absolute; z-index:-2; inset:0; }
.busan-hero-nightposter .busan-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,11,45,.96),rgba(20,14,50,.55) 58%,rgba(15,10,39,.2)); }
.busan-hero-nightposter .busan-area-copy { width:min(49rem,72%); border-left:.45rem solid #37dff0; }
.busan-hero-nightposter .busan-area-copy h1 { font-size:clamp(3.3rem,7vw,6.7rem); font-weight:900; text-transform:uppercase; }
.nightposter-word { position:absolute; z-index:1; right:-.25rem; top:.5rem; color:rgba(255,255,255,.07); font-size:clamp(4rem,11vw,10rem); font-weight:950; letter-spacing:-.08em; writing-mode:vertical-rl; }
.nightposter-ticket { position:absolute; z-index:6; right:1rem; bottom:1rem; padding:.85rem 1rem; color:#1b1238; background:#58e6f2; box-shadow:7px 7px 0 #e9559b; transform:rotate(-1.5deg); }
.nightposter-ticket span,.nightposter-ticket b,.nightposter-ticket small { display:block; }
.nightposter-ticket span,.nightposter-ticket small { font:900 .55rem/1.2 ui-monospace,monospace; letter-spacing:.12em; }
.nightposter-ticket b { margin:.15rem 0; font-size:1.1rem; }
.show-status-panel { overflow:hidden; color:#edeaff; background:#201744; border:1px solid #5c4c9d; box-shadow:var(--shadow-sm); }
.show-status-head { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 1rem; color:#201744; background:#50e0ed; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }
.show-checks { display:grid; grid-template-columns:repeat(4,1fr); }
.show-checks article { min-height:14rem; padding:1.2rem; border-right:1px solid rgba(255,255,255,.15); }
.show-checks article:last-child { border-right:0; }
.show-checks span { color:#f05ca3; font-size:2.4rem; font-weight:950; }
.show-checks h3 { margin:2.2rem 0 .4rem; color:#fff; }
.show-checks p { margin:0; color:#cbc4e8; font-size:.75rem; }
.show-fallback { margin:0; padding:1rem; color:#f9d3e5; background:#15102d; font-size:.76rem; }
.gwangalli-setlist { border-top:.35rem solid #2bd5e8; background:#f2effb; }
.gwangalli-setlist article { display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:1.1rem; border-bottom:1px solid #cec7e3; }
.gwangalli-setlist time { color:#6a55c8; font:900 1rem/1.2 ui-monospace,monospace; }
.gwangalli-setlist small { color:#b33279; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.gwangalli-setlist h3 { margin:.25rem 0; }
.gwangalli-setlist p { margin:0; color:var(--muted); font-size:.76rem; }
.millak-stage { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr); overflow:hidden; background:#140f2d; border-radius:.5rem; box-shadow:var(--shadow-sm); }
.millak-stage img { width:100%; height:100%; min-height:31rem; object-fit:cover; filter:saturate(.8) contrast(1.05); }
.millak-stage-copy { padding:clamp(1.5rem,4vw,2.8rem); color:#eeeaff; background:linear-gradient(160deg,#271c50,#17112f); }
.millak-stage-copy h2 { margin:.35rem 0 .8rem; color:#fff; font-size:clamp(1.8rem,3vw,2.6rem); }
.millak-stage-copy p { color:#c9c3df; }
.stage-notes p { padding:.65rem 0; margin:0; border-top:1px solid rgba(255,255,255,.13); font-size:.73rem; }
.viewfinder-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.viewfinder-grid article { min-height:14rem; padding:1.3rem; color:#261d4b; background:#f3f0ff; border:1px solid #d0c9eb; clip-path:polygon(7% 0,100% 0,100% 93%,93% 100%,0 100%,0 7%); }
.viewfinder-grid span { color:#a62f73; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.viewfinder-grid h3 { margin:2.7rem 0 .45rem; }
.viewfinder-grid p { margin:0; color:var(--muted); font-size:.76rem; }
.busan-night-exit { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.busan-night-exit > div { min-height:12rem; padding:1.3rem; color:#eeeaff; background:#211744; border-top:.3rem solid #35d5e5; }
.busan-night-exit b { float:right; color:rgba(255,255,255,.12); font-size:4rem; line-height:.75; }
.busan-night-exit span { color:#65e3ec; font-weight:850; }
.busan-night-exit p { clear:both; margin:2.8rem 0 0; color:#c7c0df; font-size:.75rem; }

/* Seomyeon city zine */
.busan-hero-zine { min-height:42rem; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(10,1fr); color:#351727; background:#f7dcbf; border-color:#d8aa87; }
.busan-hero-zine::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(124,50,74,.06) 40px); }
.busan-hero-zine .busan-area-copy { grid-column:1 / 8; grid-row:3 / 11; align-self:end; padding-bottom:2.5rem; }
.busan-hero-zine .busan-area-copy h1 { font-family:Georgia,serif; font-weight:500; }
.busan-hero-zine .busan-area-meta span { color:#5b2d3d; background:rgba(255,255,255,.5); }
.zine-masthead { position:relative; z-index:5; grid-column:1 / 5; grid-row:1 / 4; padding:1.2rem; color:#f9ecdf; background:#3a1728; transform:rotate(-1deg); }
.zine-masthead small,.zine-masthead span { display:block; font:900 .55rem/1.2 ui-monospace,monospace; letter-spacing:.12em; }
.zine-masthead strong { display:block; margin:.35rem 0; font-size:2.5rem; line-height:.77; letter-spacing:-.05em; }
.zine-photo { position:relative; z-index:3; overflow:hidden; border:.45rem solid #fff5e9; box-shadow:0 18px 40px rgba(70,35,45,.2); }
.zine-photo img { width:100%; height:100%; object-fit:cover; }
.zine-photo b { position:absolute; left:.5rem; bottom:.5rem; padding:.35rem .5rem; color:#fff; background:#b4235a; font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.zine-photo-a { grid-column:8 / 13; grid-row:1 / 7; transform:rotate(1.2deg); }
.zine-photo-b { grid-column:7 / 11; grid-row:6 / 11; transform:rotate(-2.2deg); }
.zine-section-head { display:grid; grid-template-columns:8rem 1fr; gap:1.2rem; align-items:start; margin-bottom:1rem; }
.zine-section-head > span { padding-top:.4rem; color:#a72559; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; border-top:.25rem solid #b4235a; }
.zine-section-head h2 { margin:0; font-family:Georgia,serif; font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:500; line-height:1.04; }
.zine-section-head p { grid-column:2; margin:0; color:var(--muted); }
.metro-spread { padding:1rem; color:#35212a; background:#fff5e8; border:1px solid #dfc3ae; box-shadow:var(--shadow-sm); }
.metro-spread > div { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding:.9rem; margin:.5rem 0; background:#fff; border-radius:999px; font-size:.73rem; }
.metro-spread .line-one { border-left:.7rem solid #ef6a4a; }
.metro-spread .line-two { border-left:.7rem solid #32a68c; }
.metro-spread b { font:900 .61rem/1 ui-monospace,monospace; }
.metro-spread strong { padding:.35rem .6rem; color:#fff; background:#b4235a; border-radius:999px; }
.metro-spread p { margin:.8rem .4rem .2rem; color:var(--muted); font-size:.71rem; }
.cafe-filter { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.cafe-filter article { min-height:17rem; padding:1.2rem; background:#fff; border:1px solid #e3c9d1; box-shadow:var(--shadow-sm); }
.cafe-filter article:nth-child(2n) { background:#ffe3c7; transform:rotate(.7deg); }
.cafe-filter span { display:inline-block; padding:.35rem .5rem; color:#fff; background:#b4235a; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.cafe-filter h3 { margin:2.5rem 0 .6rem; font-family:Georgia,serif; }
.cafe-filter ul { padding-left:1rem; color:var(--muted); font-size:.72rem; }
.jeonpo-dispatch { border-left:.35rem solid #b4235a; }
.jeonpo-dispatch article { display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid #ead1d8; }
.jeonpo-dispatch time { color:#b4235a; font:900 .85rem/1.2 ui-monospace,monospace; }
.jeonpo-dispatch h3 { margin:0 0 .35rem; }
.jeonpo-dispatch p { margin:0; color:var(--muted); font-size:.77rem; }
.rainy-edition { padding:clamp(1.5rem,4vw,2.8rem); color:#f8edf2; background:#31172a; border-radius:.4rem; }
.rainy-edition > span { color:#ff9a70; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.15em; }
.rainy-edition h2 { margin:.4rem 0 .7rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.9rem,3vw,2.6rem); font-weight:500; }
.rainy-edition > div > p { color:#d9c2cd; }
.rainy-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1.2rem; background:#674258; }
.rainy-columns article { padding:1rem; background:#3a2032; }
.rainy-columns h3 { color:#ffaf86; }
.rainy-columns p { color:#d7c4cd; font-size:.73rem; }

/* Yeongdo topographic field guide */
.busan-hero-fieldguide { grid-template-columns:minmax(20rem,.82fr) minmax(0,1.18fr); color:#ecf5ef; background-color:#203b35; background-image:radial-gradient(ellipse at 15% 20%,transparent 0 18%,rgba(172,206,187,.1) 18.4% 18.9%,transparent 19.3% 27%,rgba(172,206,187,.09) 27.4% 27.9%,transparent 28.3%); border-color:#526f66; }
.busan-hero-fieldguide .busan-area-media { margin:1rem; min-height:36rem; overflow:hidden; clip-path:polygon(0 0,93% 0,100% 10%,100% 100%,0 100%); }
.busan-hero-fieldguide .busan-area-copy h1 { font-family:Georgia,serif; font-weight:500; }
.field-grid { position:absolute; z-index:6; top:1.2rem; left:1.2rem; display:grid; gap:.2rem; color:rgba(226,242,233,.45); font:800 .57rem/1.2 ui-monospace,monospace; letter-spacing:.13em; }
.field-card-deck { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.field-card-deck article { position:relative; min-height:18rem; padding:1.35rem; overflow:hidden; color:#274038; background:#edf3ed; border:1px solid #c2d0c7; clip-path:polygon(0 0,92% 0,100% 10%,100% 100%,0 100%); }
.field-card-deck article::before { content:attr(data-field); position:absolute; right:.4rem; bottom:-1rem; color:rgba(55,103,87,.08); font-family:Georgia,serif; font-size:7rem; }
.field-card-deck small { color:#427868; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.13em; }
.field-card-deck h3 { margin:4rem 0 .5rem; font-family:Georgia,serif; font-size:1.45rem; }
.field-card-deck p { color:var(--muted); font-size:.77rem; }
.field-card-deck strong { position:absolute; bottom:1.2rem; color:#8b6238; font-size:.7rem; }
.field-decision-table { overflow:hidden; color:#eaf2ed; background:#263f38; border:1px solid #567369; box-shadow:var(--shadow-sm); }
.field-decision-table > div { display:grid; grid-template-columns:.8fr 1.25fr 1fr; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.12); }
.field-decision-table > div:last-child { border-bottom:0; }
.field-decision-table .field-table-head { color:#263f38; background:#c6d5c3; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.11em; }
.field-decision-table span { color:#cbd9d2; font-size:.73rem; }
.huinnyeoul-fold { display:grid; grid-template-columns:minmax(20rem,.85fr) minmax(0,1.15fr); overflow:hidden; color:#e9f2ed; background:#253f38; border-radius:4rem .45rem 4rem .45rem; }
.huinnyeoul-copy { align-self:center; padding:clamp(1.5rem,4vw,2.8rem); }
.huinnyeoul-copy h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }
.huinnyeoul-copy p { color:#c5d5ce; }
.huinnyeoul-fold img { width:100%; height:100%; min-height:31rem; object-fit:cover; }
.island-logbook { display:grid; grid-template-columns:5rem repeat(2,1fr); border:1px solid #bdcbc3; background:#f3f1e7; box-shadow:var(--shadow-sm); }
.log-spine { grid-row:span 2; padding:1rem; color:#e6eee8; background:#2d4d43; font:900 .68rem/1.6 ui-monospace,monospace; letter-spacing:.12em; writing-mode:vertical-rl; }
.island-logbook article { min-height:14rem; padding:1.25rem; border-right:1px dashed #b8c6bd; border-bottom:1px dashed #b8c6bd; }
.island-logbook time { color:#407665; font:900 .65rem/1 ui-monospace,monospace; }
.island-logbook h3 { margin:2.6rem 0 .4rem; font-family:Georgia,serif; }
.island-logbook p { margin:0; color:var(--muted); font-size:.76rem; }
.topographic-notes { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.topographic-notes article { min-height:12rem; padding:1.2rem; color:#eaf2ed; background:#2c4c42; border-radius:50% 50% .35rem .35rem; text-align:center; }
.topographic-notes span { color:#dbac72; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.topographic-notes p { margin:3rem 0 0; color:#cad8d1; font-size:.74rem; }

/* Gijang sunrise field notes */
.busan-hero-sunrise { min-height:43rem; display:flex; align-items:end; color:#fff8ec; border-color:#c77d50; }
.busan-hero-sunrise .busan-area-media { position:absolute; z-index:-2; inset:0; }
.busan-hero-sunrise .busan-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(62,34,20,.05),rgba(54,31,22,.92)); }
.busan-hero-sunrise .busan-area-copy { width:min(52rem,72%); padding-top:10rem; }
.busan-hero-sunrise .busan-area-copy h1 { max-width:14ch; font-family:Georgia,serif; font-weight:500; }
.sunrise-orbit { position:absolute; z-index:4; top:1.3rem; right:1.3rem; width:11rem; height:11rem; display:grid; place-items:center; color:#fff1d5; border:1px solid rgba(255,232,187,.55); border-radius:50%; }
.sunrise-orbit i { width:3rem; height:3rem; background:#f6b95b; border-radius:50%; box-shadow:0 0 3rem #f6b95b; }
.sunrise-orbit span { position:absolute; bottom:1.5rem; font:900 .52rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.sunrise-note { position:absolute; z-index:6; right:1rem; bottom:1rem; padding:.8rem 1rem; color:#4d291b; background:#f4c87b; border-radius:999px; }
.sunrise-note b,.sunrise-note span { display:block; }
.sunrise-note b { font:900 .57rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.sunrise-note span { margin-top:.15rem; font-size:.67rem; }
.sunrise-route-chain { padding:1rem; color:#4b2f22; background:#fff3dc; border:1px solid #e3c59f; border-radius:5rem .5rem .5rem 5rem; }
.sunrise-route-chain > div { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.9rem 1rem; margin:.5rem; background:#fffaf0; border:1px solid #ead6bb; border-radius:999px; font-size:.72rem; }
.sunrise-route-chain small { color:#a64b2e; font:900 .57rem/1 ui-monospace,monospace; }
.sunrise-route-chain b { color:#7c402c; }
.sunrise-route-chain strong { color:#fff; background:#a44b2f; padding:.35rem .6rem; border-radius:999px; }
.sunrise-route-chain > p { margin:.9rem 2rem; color:var(--muted); font-size:.72rem; }
.temple-conduct { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.temple-conduct article { min-height:16rem; padding:1.25rem; color:#493024; background:#fff8e9; border:1px solid #dfc9a8; border-radius:6rem 6rem .4rem .4rem; text-align:center; }
.temple-conduct span { color:#a64e31; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.temple-conduct h3 { margin:3.6rem 0 .45rem; font-family:Georgia,serif; }
.temple-conduct p { margin:0; color:var(--muted); font-size:.74rem; }
.temple-section-fold { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr); overflow:hidden; background:#412b21; border-radius:.5rem 5rem .5rem 5rem; box-shadow:var(--shadow-sm); }
.temple-section-fold img { width:100%; height:100%; min-height:31rem; object-fit:cover; }
.temple-section-fold > div { padding:clamp(1.5rem,4vw,2.8rem); color:#f8ead9; }
.temple-section-fold h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }
.temple-section-fold p { color:#d9c6b5; }
.stair-count { display:flex; align-items:end; gap:.75rem; margin:1rem 0; }
.stair-count b { color:#f0bd6a; font-family:Georgia,serif; font-size:4.5rem; line-height:.8; }
.stair-count span { max-width:9rem; color:#d9c7b7; font-size:.68rem; }
.sunrise-test { display:grid; grid-template-columns:repeat(4,1fr); border-top:.3rem solid #c7663f; border-bottom:.3rem solid #d7a84f; }
.sunrise-test article { min-height:14rem; padding:1.2rem; background:#fff9ed; border-right:1px solid #e5d4bb; }
.sunrise-test article:last-child { border-right:0; }
.sunrise-test b { color:#cb6540; font-family:Georgia,serif; font-size:2.6rem; }
.sunrise-test h3 { margin:2rem 0 .4rem; }
.sunrise-test p { margin:0; color:var(--muted); font-size:.75rem; }
.gijang-extension { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.gijang-extension article { min-height:14rem; padding:1.3rem; color:#4a3023; background:linear-gradient(145deg,#fff8e9,#f8e1bb); border:1px solid #dfc69c; clip-path:polygon(0 0,92% 0,100% 12%,100% 100%,0 100%); }
.gijang-extension small { color:#a64d30; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.11em; }
.gijang-extension h3 { margin:3.2rem 0 .45rem; font-family:Georgia,serif; }
.gijang-extension p { margin:0; color:var(--muted); font-size:.76rem; }

/* Dadaepo estuary notebook */
.busan-hero-tidenote { grid-template-columns:6.5rem minmax(20rem,.76fr) minmax(0,1.24fr); color:#493029; background:#f4e9d8; border-color:#cba994; }
.busan-hero-tidenote .busan-area-media { margin:1rem; min-height:36rem; overflow:hidden; border-radius:50% 50% .5rem .5rem; }
.busan-hero-tidenote .busan-area-copy h1 { font-family:Georgia,serif; font-weight:500; }
.busan-hero-tidenote .busan-area-meta span { color:#5b3c32; background:rgba(255,255,255,.55); }
.tidenote-margin { position:relative; z-index:5; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem .8rem; color:#f5eadf; background:#4b312b; }
.tidenote-margin span,.tidenote-margin small { font:900 .55rem/1.2 ui-monospace,monospace; letter-spacing:.1em; writing-mode:vertical-rl; }
.tidenote-margin b { font-family:Georgia,serif; font-size:1.05rem; line-height:.9; writing-mode:vertical-rl; }
.estuary-layers { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }
.estuary-layers article { min-height:16rem; padding:1.2rem; background:#fffaf1; border:1px solid #ddc9b7; }
.estuary-layers article:nth-child(2) { transform:translateY(1.1rem); background:#ead9bd; }
.estuary-layers article:nth-child(3) { color:#f2f7f5; background:#375d5d; }
.estuary-layers article:nth-child(4) { transform:translateY(-.6rem); background:#e9b69c; }
.estuary-layers span { color:inherit; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; opacity:.72; }
.estuary-layers h3 { margin:3.5rem 0 .45rem; font-family:Georgia,serif; }
.estuary-layers p { margin:0; color:inherit; opacity:.75; font-size:.75rem; }
.amisan-observer { overflow:hidden; color:#eaf3ef; background:#304e4e; border-radius:.4rem; box-shadow:var(--shadow-sm); }
.observer-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1rem; color:#443029; background:#e3bc83; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.11em; }
.observer-header b { font-family:Georgia,serif; font-size:1.2rem; }
.observer-body { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; padding:clamp(1.5rem,4vw,2.8rem); }
.observer-body h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }
.observer-body p { color:#cad9d5; }
.observer-body dl { margin:0; }
.observer-body dl div { display:grid; grid-template-columns:7rem 1fr; gap:.7rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.15); }
.observer-body dt { color:#eac48d; font:900 .6rem/1.4 ui-monospace,monospace; text-transform:uppercase; }
.observer-body dd { margin:0; color:#d2dfdb; font-size:.73rem; }
.birding-code { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.birding-code article { min-height:15rem; padding:1.2rem; background:#fffaf1; border:1px solid #dfcdbc; border-radius:50% 50% .4rem .4rem; text-align:center; }
.birding-code b { color:#a8553d; font-family:Georgia,serif; font-size:2.3rem; }
.birding-code h3 { margin:2.7rem 0 .4rem; }
.birding-code p { margin:0; color:var(--muted); font-size:.74rem; }
.sunset-notebook { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; padding:1px; background:#c9aa98; }
.sunset-notebook article { min-height:14rem; padding:1.3rem; background:#f8eee2; }
.sunset-notebook time { color:#9d4c38; font:900 .65rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.sunset-notebook h3 { margin:2.4rem 0 .45rem; font-family:Georgia,serif; }
.sunset-notebook p { margin:0; color:var(--muted); font-size:.76rem; }
.sunset-photo-note { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr); overflow:hidden; color:#f8eee9; background:#49312d; border-radius:4rem .5rem .5rem .5rem; }
.sunset-photo-note img { width:100%; height:100%; min-height:30rem; object-fit:cover; }
.sunset-photo-note > div { padding:clamp(1.5rem,4vw,2.8rem); }
.sunset-photo-note h2 { margin:.35rem 0 .8rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }
.sunset-photo-note p { color:#dcc9c2; }

@media (max-width: 980px) {
  .busan-city-hero { grid-template-columns:1fr; }
  .busan-port-collage { min-height:33rem; }
  .busan-atlas-card,.busan-atlas-card.wide { grid-column:span 6; }
  .busan-base-compass { grid-template-columns:1fr 1fr; }
  .busan-base-compass article:nth-child(3) { grid-column:1 / -1; }
  .busan-transit-deck { grid-template-columns:1fr; }
  .busan-dayline { grid-template-columns:1fr; }
  .busan-dayline article,.busan-dayline article:nth-child(2) { min-height:14rem; border-radius:.5rem; }
  .busan-dayline h3 { margin:2.6rem 0 .5rem; }
  .busan-weather-board { grid-template-columns:1fr 1fr; }
  .busan-weather-board article:nth-child(2) { border-right:0; }
  .busan-weather-board article:nth-child(-n+2) { border-bottom:1px solid #dbe5e3; }
  .busan-hero-market,.busan-hero-dayclock,.busan-hero-fieldguide { grid-template-columns:1fr; }
  .busan-hero-market .busan-area-media,.busan-hero-dayclock .busan-area-media,.busan-hero-fieldguide .busan-area-media { order:2; min-height:25rem; }
  .busan-hero-elevation { grid-template-columns:1fr; }
  .busan-elevation-image { order:2; min-height:26rem; }
  .market-ledger,.coast-clock,.show-checks,.cafe-filter,.temple-conduct,.sunrise-test,.estuary-layers,.birding-code { grid-template-columns:1fr 1fr; }
  .market-ledger article:nth-child(2),.coast-clock article:nth-child(2),.show-checks article:nth-child(2),.sunrise-test article:nth-child(2) { border-right:0; }
  .nampo-route-editorial,.dongbaek-window,.millak-stage,.huinnyeoul-fold,.temple-section-fold,.sunset-photo-note { grid-template-columns:1fr; }
  .busan-step-route,.haeundae-choice-ribbon,.topographic-notes { grid-template-columns:1fr 1fr; }
  .busan-step-route article:nth-child(2n) { transform:none; }
  .busan-hero-zine { min-height:51rem; }
  .busan-hero-zine .busan-area-copy { grid-column:1 / 9; grid-row:5 / 11; }
  .zine-masthead { grid-column:1 / 7; }
  .zine-photo-a { grid-column:7 / 13; grid-row:1 / 6; }
  .zine-photo-b { grid-column:8 / 13; grid-row:6 / 11; }
  .field-card-deck,.viewfinder-grid,.busan-ticket-grid,.gijang-extension { grid-template-columns:1fr 1fr; }
  .field-card-deck article:last-child,.viewfinder-grid article:last-child,.busan-ticket-grid article:last-child,.gijang-extension article:last-child { grid-column:1 / -1; }
  .busan-hero-sunrise .busan-area-copy { width:80%; }
  .busan-hero-tidenote { grid-template-columns:4.5rem 1fr; }
  .busan-hero-tidenote .busan-area-media { grid-column:1 / -1; min-height:26rem; margin:.8rem; }
}

@media (max-width: 640px) {
  .busan-city-hero,.busan-area-hero { min-height:0; border-radius:1.35rem; }
  .busan-port-copy,.busan-area-copy { padding:1.45rem; }
  .busan-port-copy h1 { font-size:clamp(3.3rem,17vw,4.7rem); }
  .busan-port-collage { min-height:27rem; padding:.75rem; }
  .busan-collage-main { inset:.75rem .75rem 7.3rem 2.5rem; width:calc(100% - 3.25rem); height:calc(100% - 8.05rem); border-radius:6rem .5rem .5rem .5rem; }
  .busan-collage-small { right:.75rem; bottom:.75rem; height:8.5rem; border-width:3px; }
  .busan-coordinate { left:.75rem; bottom:1rem; width:47%; padding:.7rem; }
  .busan-atlas { grid-template-columns:1fr; }
  .busan-atlas-card,.busan-atlas-card.wide { min-height:14rem; grid-column:auto; transform:none; border-radius:1.1rem; }
  .busan-atlas-card.hillside:hover { transform:translateY(-3px); }
  .busan-base-compass { grid-template-columns:1fr; }
  .busan-base-compass article,.busan-base-compass article:nth-child(2),.busan-base-compass article:nth-child(3) { min-height:13rem; grid-column:auto; border-radius:3rem 3rem .6rem .6rem; }
  .busan-weather-board { grid-template-columns:1fr; }
  .busan-weather-board article { min-height:8rem; border-right:0; border-bottom:1px solid #dbe5e3; }
  .busan-area-copy h1 { font-size:clamp(2.55rem,13vw,3.9rem); }
  .busan-hero-market .busan-area-media,.busan-hero-dayclock .busan-area-media,.busan-hero-fieldguide .busan-area-media,.busan-elevation-image { min-height:22rem; margin:.7rem; }
  .busan-market-sign,.nightposter-ticket,.sunrise-note { display:none; }
  .busan-hero-nightposter { min-height:38rem; }
  .busan-hero-nightposter .busan-area-copy { width:auto; border-left-width:.3rem; }
  .busan-hero-nightposter .busan-area-copy h1 { font-size:clamp(2.45rem,12vw,3.8rem); }
  .busan-hero-zine { min-height:52rem; display:block; padding-top:14rem; }
  .zine-masthead { position:absolute; top:.7rem; left:.7rem; width:52%; height:12rem; }
  .zine-photo-a { position:absolute; top:.7rem; right:.7rem; width:48%; height:13rem; }
  .zine-photo-b { display:none; }
  .busan-hero-zine .busan-area-copy { display:block; }
  .busan-hero-sunrise { min-height:39rem; }
  .busan-hero-sunrise .busan-area-copy { width:auto; padding-top:8rem; }
  .sunrise-orbit { width:7rem; height:7rem; }
  .busan-hero-tidenote { grid-template-columns:3rem 1fr; }
  .tidenote-margin { padding:.8rem .45rem; }
  .busan-hero-tidenote .busan-area-media { min-height:23rem; }
  .market-ledger,.coast-clock,.show-checks,.cafe-filter,.temple-conduct,.sunrise-test,.estuary-layers,.birding-code,.field-card-deck,.viewfinder-grid,.busan-ticket-grid,.gijang-extension,.busan-step-route,.haeundae-choice-ribbon,.topographic-notes { grid-template-columns:1fr; }
  .market-ledger article,.coast-clock article,.show-checks article,.sunrise-test article { min-height:11rem; border-right:0; border-bottom:1px solid rgba(70,70,70,.15); }
  .market-ledger h3,.coast-clock h3,.show-checks h3,.sunrise-test h3 { margin:1.6rem 0 .45rem; }
  .market-status-board > div,.field-decision-table > div { grid-template-columns:1fr; gap:.3rem; }
  .market-status-board .status-head,.field-decision-table .field-table-head { display:none; }
  .elevation-transect { padding:1rem; }
  .elevation-axis { display:none; }
  .elevation-transect article { width:auto; grid-template-columns:2.3rem 1fr; margin:.6rem 0; }
  .slope-rule-grid,.sea-condition-board,.rainy-columns,.observer-body,.sunset-notebook { grid-template-columns:1fr; }
  .slope-rule-grid article:nth-child(2n),.estuary-layers article:nth-child(2),.estuary-layers article:nth-child(4) { transform:none; }
  .songdo-horizon { grid-template-columns:1fr; border-radius:1rem; }
  .songdo-horizon img { min-height:22rem; }
  .busan-mobility-meter { grid-template-columns:1fr; align-items:stretch; }
  .busan-mobility-meter article,.busan-mobility-meter article:nth-child(2),.busan-mobility-meter article:nth-child(3) { min-height:9rem; }
  .dongbaek-window img,.millak-stage img,.huinnyeoul-fold img,.temple-section-fold img,.sunset-photo-note img { min-height:22rem; }
  .gwangalli-setlist article,.jeonpo-dispatch article { grid-template-columns:5rem 1fr; }
  .busan-night-exit { grid-template-columns:1fr; }
  .zine-section-head { grid-template-columns:1fr; }
  .zine-section-head p { grid-column:1; }
  .metro-spread > div { align-items:flex-start; border-radius:.75rem; }
  .island-logbook { grid-template-columns:3rem 1fr; }
  .log-spine { grid-row:span 4; }
  .island-logbook article { min-height:11rem; }
  .observer-header { flex-wrap:wrap; }
  .observer-body dl div { grid-template-columns:1fr; }
}

/* Place-specific editorial signatures for earlier guides */
.legacy-signature { position:relative; }
.palace-calendar-head { display:grid; grid-template-columns:9rem 1fr; gap:1rem; align-items:start; margin-bottom:1rem; }
.palace-calendar-head > span { padding-top:.45rem; color:#a9443e; border-top:.3rem solid #c94743; font:900 .58rem/1.2 ui-monospace,monospace; letter-spacing:.12em; }
.palace-calendar-head h2 { margin:0; font-family:Georgia,serif; font-size:clamp(1.85rem,3vw,2.6rem); font-weight:500; line-height:1.05; }
.palace-calendar-head p { grid-column:2; margin:0; color:var(--muted); }
.palace-calendar { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; color:#f9eee4; background:#332421; border-top:.35rem solid #d5a64a; box-shadow:var(--shadow-sm); }
.palace-calendar article { position:relative; min-height:16rem; padding:1.2rem; border-right:1px solid rgba(255,255,255,.14); }
.palace-calendar article:last-child { border-right:0; }
.palace-calendar b { position:absolute; right:.7rem; top:.35rem; color:rgba(255,255,255,.08); font-family:Georgia,serif; font-size:4.8rem; }
.palace-calendar small { color:#efbb61; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.palace-calendar h3 { position:relative; margin:4.2rem 0 .45rem; font-family:Georgia,serif; }
.palace-calendar p { margin:0; color:#d7c4b7; font-size:.74rem; }

.resident-window { display:grid; grid-template-columns:minmax(16rem,.65fr) minmax(0,1.35fr); overflow:hidden; color:#2d3029; background:#f4eddf; border:1px solid #c9bba7; border-radius:8rem .5rem .5rem 8rem; box-shadow:var(--shadow-sm); }
.resident-clock { position:relative; min-height:21rem; display:flex; justify-content:space-around; align-items:center; padding:1.5rem; color:#f5ede0; background:#384239; }
.resident-clock::before { content:""; position:absolute; width:10rem; height:10rem; border:1px solid rgba(255,255,255,.3); border-radius:50%; }
.resident-clock span { position:relative; z-index:2; font-family:Georgia,serif; font-size:2.4rem; }
.resident-clock i { position:relative; z-index:2; width:3.5rem; height:.25rem; background:#d4a35d; }
.resident-clock small { position:absolute; bottom:1.2rem; font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.11em; }
.resident-window > div:last-child { align-self:center; padding:clamp(1.5rem,4vw,2.8rem); }
.resident-window h2 { margin:.35rem 0 .7rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; }
.resident-window p { color:var(--muted); }
.resident-rules { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.resident-rules b { padding:.45rem .6rem; color:#4e5c4f; background:#fffaf0; border:1px solid #d3c5ae; font:900 .58rem/1 ui-monospace,monospace; }

.hongdae-energy-dial { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border-radius:8rem 8rem .5rem .5rem; box-shadow:var(--shadow-sm); }
.hongdae-energy-dial article { min-height:18rem; padding:1.3rem; color:#302846; background:#eee9ff; border-right:1px solid #cfc4ee; }
.hongdae-energy-dial article:nth-child(2) { background:#d7eee9; }
.hongdae-energy-dial article:nth-child(3) { color:#f7f2ff; background:#664cb8; }
.hongdae-energy-dial article:nth-child(4) { color:#f7f2ff; background:#28203e; border-right:0; }
.hongdae-energy-dial time { display:block; font:900 1.5rem/1 ui-monospace,monospace; }
.hongdae-energy-dial span { display:block; margin-top:.35rem; opacity:.66; font:900 .57rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.hongdae-energy-dial h3 { margin:4rem 0 .4rem; font-family:Georgia,serif; }
.hongdae-energy-dial p { margin:0; color:inherit; opacity:.76; font-size:.74rem; }

.river-switchboard { overflow:hidden; color:#eaf8fc; background:#12344a; border:1px solid #3c7189; border-radius:.5rem 4rem .5rem .5rem; box-shadow:var(--shadow-sm); }
.river-switchboard > div:first-child { padding:clamp(1.4rem,3vw,2.2rem); background:radial-gradient(circle at 90% 10%,rgba(77,189,223,.22),transparent 15rem); }
.river-switchboard > div:first-child > span { color:#f6b567; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.13em; }
.river-switchboard h2 { margin:.35rem 0 .5rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.85rem,3vw,2.55rem); font-weight:500; }
.river-switchboard > div:first-child p { color:#c9dce5; }
.river-switches { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.16); }
.river-switches article { min-height:10rem; padding:1rem; border-right:1px solid rgba(255,255,255,.14); }
.river-switches article:last-child { border-right:0; }
.river-switches b { color:#6ed4e9; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.river-switches p { margin:2rem 0 0; color:#d2e1e7; font-size:.73rem; }

.namba-order-slip { overflow:hidden; color:#3a291f; background:#fff9e9; border:1px dashed #c7ad91; box-shadow:var(--shadow-sm); }
.order-slip-head { display:flex; justify-content:space-between; gap:1rem; padding:.75rem 1rem; color:#fff7e7; background:#2d2520; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.11em; }
.order-slip-copy { padding:1.3rem 1.5rem; }
.order-slip-copy h2 { margin:.35rem 0 .5rem; font-family:Georgia,serif; font-size:clamp(1.85rem,3vw,2.6rem); font-weight:500; }
.order-slip-copy p { color:var(--muted); }
.namba-order-slip ol { margin:0; padding:0 1.5rem; list-style:none; counter-reset:order; }
.namba-order-slip li { display:grid; grid-template-columns:5rem 1fr; gap:1rem; padding:1rem 0; border-top:1px dashed #cbb59e; }
.namba-order-slip li b { color:#b35234; font:900 .62rem/1.3 ui-monospace,monospace; letter-spacing:.1em; }
.namba-order-slip li span { color:var(--muted); font-size:.76rem; }
.order-total { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; color:#fff6e8; background:#b14e31; }
.order-total span { font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.order-total strong { font-family:Georgia,serif; font-weight:500; }

.gion-lane-code { display:grid; grid-template-columns:minmax(15rem,.55fr) minmax(0,1.45fr); overflow:hidden; color:#3e2f2b; background:#f4eadc; border:1px solid #cbb9a6; border-radius:.4rem 3.5rem .4rem .4rem; box-shadow:var(--shadow-sm); }
.lane-code-title { padding:clamp(1.4rem,3vw,2.2rem); color:#f8eee1; background:#4b2925; }
.lane-code-title span { color:#e7b47b; font:900 .57rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.lane-code-title h2 { margin:3rem 0 0; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; line-height:1.04; }
.lane-lines { display:grid; grid-template-columns:repeat(3,1fr); }
.lane-lines article { min-height:20rem; padding:1.25rem; border-right:1px solid #d5c5b4; }
.lane-lines article:last-child { border-right:0; }
.lane-lines small { color:#995142; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.lane-lines h3 { margin:5.2rem 0 .45rem; font-family:Georgia,serif; }
.lane-lines p { margin:0; color:var(--muted); font-size:.75rem; }

.expedition-gate { overflow:hidden; color:#e8f7fb; background:#092a40; border:1px solid #2e6b86; clip-path:polygon(0 0,96% 0,100% 10%,100% 100%,0 100%); box-shadow:var(--shadow-sm); }
.expedition-gate-head { padding:clamp(1.4rem,3vw,2.2rem); background-image:linear-gradient(rgba(138,211,223,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(138,211,223,.07) 1px,transparent 1px); background-size:28px 28px; }
.expedition-gate-head span { color:#8fd4e2; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.13em; }
.expedition-gate-head h2 { margin:.35rem 0 .55rem; color:#fff; font-size:clamp(1.85rem,3vw,2.6rem); text-transform:uppercase; line-height:1; }
.expedition-gate-head p { color:#c6dce4; }
.expedition-signals { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.14); }
.expedition-signals article { min-height:13rem; padding:1.2rem; border-right:1px solid rgba(255,255,255,.14); }
.expedition-signals article:last-child { border-right:0; }
.expedition-signals b { display:inline-block; padding:.35rem .5rem; color:#08293d; background:#82d5df; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.expedition-signals article:nth-child(2) b { background:#efc677; }
.expedition-signals article:nth-child(3) b { color:#fff; background:#bd5447; }
.expedition-signals p { margin:3rem 0 0; color:#c9dce4; font-size:.74rem; }

.shibuya-mood-rail { display:grid; grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr); overflow:hidden; color:#f8f4ff; background:#211932; border:1px solid #594a75; border-radius:.4rem; box-shadow:var(--shadow-sm); }
.mood-rail-copy { padding:clamp(1.4rem,3vw,2.2rem); }
.mood-rail-copy > span { color:#dc8cf2; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.mood-rail-copy h2 { margin:.4rem 0 .65rem; color:#fff; font-size:clamp(1.85rem,3vw,2.55rem); line-height:1; text-transform:uppercase; }
.mood-rail-copy p { color:#cfc6dd; }
.mood-stations { display:flex; align-items:stretch; background:linear-gradient(135deg,#e9f2dd,#efd9f2 45%,#302344); }
.mood-stations article { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; color:#2f2635; }
.mood-stations article:last-child { color:#fff; }
.mood-stations i { align-self:center; color:#934aa4; font-style:normal; font-weight:900; }
.mood-stations b { font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.1em; }
.mood-stations span { margin-top:.35rem; font-family:Georgia,serif; font-size:.85rem; }

@media (max-width: 820px) {
  .palace-calendar,.hongdae-energy-dial,.river-switches { grid-template-columns:1fr 1fr; }
  .resident-window,.gion-lane-code,.shibuya-mood-rail { grid-template-columns:1fr; border-radius:1rem; }
  .resident-clock { min-height:14rem; }
  .lane-code-title h2 { margin-top:1.5rem; }
  .lane-lines { grid-template-columns:repeat(3,1fr); }
  .expedition-signals { grid-template-columns:1fr; }
  .expedition-signals article { min-height:9rem; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .expedition-signals p { margin:1.5rem 0 0; }
  .mood-stations { min-height:15rem; }
}

@media (max-width: 560px) {
  .palace-calendar-head { grid-template-columns:1fr; }
  .palace-calendar-head p { grid-column:1; }
  .palace-calendar,.hongdae-energy-dial,.river-switches { grid-template-columns:1fr; }
  .palace-calendar article,.hongdae-energy-dial article { min-height:11rem; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); }
  .palace-calendar h3,.hongdae-energy-dial h3 { margin:1.8rem 0 .4rem; }
  .resident-clock { min-height:12rem; }
  .resident-clock::before { width:8rem; height:8rem; }
  .namba-order-slip li { grid-template-columns:1fr; gap:.35rem; }
  .order-total { flex-direction:column; }
  .lane-lines { grid-template-columns:1fr; }
  .lane-lines article { min-height:10rem; border-right:0; border-bottom:1px solid #d5c5b4; }
  .lane-lines h3 { margin:1.8rem 0 .4rem; }
  .mood-stations { display:grid; grid-template-columns:1fr; }
  .mood-stations article { min-height:6rem; }
  .mood-stations i { transform:rotate(90deg); }
}

/* Jeju island atlas — eight intentionally different editorial systems */
.jeju-island-hero,.jeju-area-hero { position:relative; min-height:36rem; overflow:hidden; border:1px solid #cadcda; border-radius:2.2rem; box-shadow:var(--shadow-lg); isolation:isolate; }
.jeju-island-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(25rem,1.1fr); color:#edf9f7; background:#102e31; }
.jeju-island-copy,.jeju-area-copy { position:relative; z-index:4; align-self:center; padding:clamp(2rem,5vw,4rem); }
.jeju-island-copy .eyebrow,.jeju-area-copy .eyebrow { margin-bottom:1.2rem; }
.jeju-island-copy h1,.jeju-area-copy h1 { margin:0 0 1rem; font-size:clamp(3.1rem,6.5vw,6.2rem); line-height:.85; letter-spacing:-.065em; }
.jeju-island-copy h1 { color:#fff; text-transform:uppercase; }
.jeju-island-copy h1 em { color:#7adccd; font-family:Georgia,serif; font-weight:400; text-transform:none; }
.jeju-island-copy > p,.jeju-area-copy > p { max-width:39rem; margin:0; font-size:clamp(.95rem,1.4vw,1.12rem); }
.jeju-island-copy > p { color:#bdd4d0; }
.jeju-island-copy .page-hero-meta span { color:#e8fbf7; background:rgba(4,23,25,.55); }
.jeju-island-visual { position:relative; min-height:36rem; overflow:hidden; background:#173f40; }
.jeju-island-visual > img { position:absolute; inset:4% 5% 4% 9%; width:86%; height:92%; object-fit:cover; border-radius:48% 52% 44% 56% / 53% 43% 57% 47%; filter:saturate(.88) contrast(1.03); }
.jeju-island-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#102e31 0,transparent 22%),linear-gradient(0deg,rgba(4,25,28,.48),transparent 45%); }
.jeju-orbit { position:absolute; z-index:3; inset:7%; border:1px solid rgba(178,240,231,.35); border-radius:50%; transform:rotate(-12deg); }
.jeju-orbit::before,.jeju-orbit::after { content:""; position:absolute; width:.85rem; height:.85rem; background:#f5a65b; border:4px solid #153638; border-radius:50%; }
.jeju-orbit::before { top:8%; left:18%; }.jeju-orbit::after { right:4%; bottom:25%; }
.jeju-map-note { position:absolute; z-index:4; right:1.2rem; bottom:1.2rem; width:12rem; padding:.95rem; color:#153432; background:#eef8e7; border:1px solid #c4dfce; border-radius:.25rem; box-shadow:0 14px 34px rgba(0,0,0,.25); transform:rotate(-2deg); }
.jeju-map-note b,.jeju-map-note span { display:block; }.jeju-map-note b { font:900 .68rem/1 ui-monospace,monospace; letter-spacing:.12em; }.jeju-map-note span { margin-top:.35rem; font-family:Georgia,serif; font-size:.76rem; line-height:1.35; }

.jeju-atlas-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:.85rem; }
.jeju-atlas-card { position:relative; min-height:16rem; grid-column:span 4; display:flex; flex-direction:column; justify-content:flex-end; padding:1.35rem; overflow:hidden; color:#eef9f8; background:#194b4a; border:1px solid rgba(255,255,255,.08); border-radius:1.2rem; box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease; }
.jeju-atlas-card::before { content:""; position:absolute; inset:0; opacity:.58; background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.23),transparent 32%); }
.jeju-atlas-card:hover { transform:translateY(-4px) rotate(-.3deg); box-shadow:var(--shadow-lg); }
.jeju-atlas-card.wide { grid-column:span 8; }
.jeju-atlas-card > * { position:relative; }.jeju-atlas-card > span { margin-bottom:auto; color:#bcebe4; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.13em; }.jeju-atlas-card h3 { margin:2.7rem 0 .4rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:500; line-height:1; }.jeju-atlas-card p { margin:0 0 1rem; max-width:34rem; color:#d0e2df; font-size:.79rem; }.jeju-atlas-card strong { color:#ffc48a; font-size:.72rem; }
.jeju-atlas-card.gateway { color:#182d34; background:#c7e7df; }.jeju-atlas-card.gateway h3,.jeju-atlas-card.gateway p { color:#183238; }.jeju-atlas-card.gateway > span { color:#27675f; }
.jeju-atlas-card.west { background:#277f9b; border-radius:4rem .7rem .7rem .7rem; }.jeju-atlas-card.summit { background:#253b32; clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%); padding-top:2.2rem; }.jeju-atlas-card.falls { background:#a6493d; }.jeju-atlas-card.geology { color:#2d2722; background:#d6bb91; }.jeju-atlas-card.geology h3,.jeju-atlas-card.geology p { color:#302820; }.jeju-atlas-card.geology > span { color:#714b2f; }.jeju-atlas-card.ferry { color:#24362a; background:#c8d789; border-radius:50% 50% .8rem .8rem; }.jeju-atlas-card.ferry h3,.jeju-atlas-card.ferry p { color:#293829; }.jeju-atlas-card.ferry > span { color:#53652c; }.jeju-atlas-card.sunrise { background:linear-gradient(105deg,#452d68,#d86f53); }.jeju-atlas-card.lava { color:#2a3838; background:linear-gradient(145deg,#d2efeb,#fbf3de); }.jeju-atlas-card.lava h3,.jeju-atlas-card.lava p { color:#26393a; }.jeju-atlas-card.lava > span { color:#3a7775; }
.jeju-base-wheel { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #b9cfca; background:#dce8e4; border-radius:50% 50% 1rem 1rem; box-shadow:var(--shadow-sm); }
.jeju-base-wheel article { min-height:19rem; padding:1.3rem; background:#f4f8f4; border-right:1px solid #c4d5d0; }.jeju-base-wheel article:nth-child(2) { background:#dcebe6; transform:translateY(1rem); }.jeju-base-wheel article:nth-child(3) { color:#edf7f5; background:#245956; }.jeju-base-wheel article:nth-child(4) { background:#ece3cf; border-right:0; transform:translateY(-.5rem); }
.jeju-base-wheel small { color:#b45c37; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; }.jeju-base-wheel h3 { margin:4.6rem 0 .45rem; font-family:Georgia,serif; font-size:1.3rem; }.jeju-base-wheel p { margin:0; color:inherit; opacity:.75; font-size:.78rem; }.jeju-base-wheel span { display:block; margin-top:1rem; font:800 .65rem/1.4 ui-monospace,monospace; opacity:.72; }
.jeju-mobility-rings { position:relative; min-height:37rem; overflow:hidden; color:#e8f8f4; background:#123a3c; border-radius:50%; box-shadow:var(--shadow-lg); }
.jeju-mobility-core { position:absolute; z-index:5; top:50%; left:50%; width:33%; text-align:center; transform:translate(-50%,-50%); }.jeju-mobility-core > span { color:#efb36b; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.13em; }.jeju-mobility-core h2 { margin:.55rem 0 .7rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.65rem,3vw,2.5rem); font-weight:500; line-height:1.05; }.jeju-mobility-core p { margin:0; color:#bcd4d0; font-size:.76rem; }
.jeju-ring { position:absolute; display:flex; flex-direction:column; justify-content:center; padding:1rem; border:1px solid rgba(183,236,227,.35); border-radius:50%; }.jeju-ring b { color:#79dcca; font:900 .68rem/1 ui-monospace,monospace; }.jeju-ring span { margin-top:.35rem; max-width:10rem; color:#c9ddda; font-size:.68rem; line-height:1.35; }.ring-air { inset:5% 5% 5% 52%; align-items:flex-end; text-align:right; }.ring-bus { inset:13% 46% 48% 8%; }.ring-car { inset:48% 48% 8% 11%; align-items:flex-end; text-align:right; }.ring-ferry { inset:51% 8% 10% 55%; }
.jeju-route-deck { display:grid; grid-template-columns:repeat(12,1fr); gap:.7rem; }.jeju-route-deck article { min-height:17rem; grid-column:span 3; display:flex; flex-direction:column; padding:1.2rem; color:#eaf5f2; background:#244b49; border-radius:.8rem; }.jeju-route-deck article:nth-child(2) { background:#46706b; transform:translateY(1.3rem); }.jeju-route-deck article:nth-child(3) { color:#332c25; background:#e7d9bd; }.jeju-route-deck article:nth-child(4) { background:#37526b; transform:translateY(-.65rem); }.jeju-route-deck article.weather-card { grid-column:span 12; min-height:10rem; display:grid; grid-template-columns:8rem 1fr; align-items:center; color:#3d2a27; background:#edb092; }.jeju-route-deck time { color:#f3bd7f; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.1em; }.jeju-route-deck article:nth-child(3) time,.jeju-route-deck .weather-card time { color:#9e4e37; }.jeju-route-deck h3 { margin:3.7rem 0 .45rem; font-family:Georgia,serif; }.jeju-route-deck p { margin:0; color:inherit; opacity:.77; font-size:.76rem; }.jeju-route-deck span { margin-top:auto; padding-top:1rem; font:800 .63rem/1.35 ui-monospace,monospace; opacity:.75; }.jeju-route-deck .weather-card h3 { margin:.2rem 0; }.jeju-route-deck .weather-card p,.jeju-route-deck .weather-card span { grid-column:2; }
.jeju-weather-compass { position:relative; min-height:38rem; display:grid; grid-template:1fr 1fr / 1fr 1fr; gap:1px; overflow:hidden; background:#b6ceca; border:1px solid #b6ceca; border-radius:50%; box-shadow:var(--shadow-sm); }.jeju-weather-compass article { display:flex; flex-direction:column; justify-content:flex-end; padding:2rem; background:#edf6f3; }.jeju-weather-compass article:nth-child(2) { text-align:right; background:#d9edf0; }.jeju-weather-compass article:nth-child(3) { background:#ecd6c4; }.jeju-weather-compass article:nth-child(4) { text-align:right; background:#e3e1cb; }.jeju-weather-compass b { font:900 2rem/1 ui-monospace,monospace; }.jeju-weather-compass h3 { margin:.5rem 0 .3rem; }.jeju-weather-compass p { margin:0; color:#566868; font-size:.74rem; }.compass-center { position:absolute; top:50%; left:50%; width:13rem; height:13rem; display:grid; place-content:center; padding:1.2rem; color:#e9f6f3; background:#163e3e; border:8px solid #fff; border-radius:50%; text-align:center; transform:translate(-50%,-50%); }.compass-center strong { font-family:Georgia,serif; font-size:1.45rem; }.compass-center span { margin-top:.35rem; color:#bcd5d0; font-size:.66rem; }

.jeju-area-hero { display:grid; grid-template-columns:minmax(0,.88fr) minmax(23rem,1.12fr); min-height:35rem; background:#fff; }
.jeju-area-copy h1 { color:#162c38; }.jeju-area-copy h1 em { font-family:Georgia,serif; font-weight:400; }.jeju-area-copy > p { color:#5c6e78; }.jeju-area-copy .page-hero-meta span { color:#204b4b; background:rgba(255,255,255,.72); border-color:rgba(29,83,82,.2); }
.jeju-area-media { position:relative; min-height:35rem; overflow:hidden; }.jeju-area-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* 01 — Jeju City airport arrival board */
.jeju-hero-arrival { grid-template-columns:7rem minmax(0,.78fr) minmax(24rem,1.22fr); color:#13363d; background:#d8eeec; border-color:#9fc9c4; border-radius:.6rem 2.5rem .6rem .6rem; }
.arrival-code { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:1.3rem .7rem; color:#dff5f1; background:#174e50; }.arrival-code b { font:900 1.4rem/1 ui-monospace,monospace; writing-mode:vertical-rl; letter-spacing:.18em; }.arrival-code span { font:900 .56rem/1 ui-monospace,monospace; writing-mode:vertical-rl; letter-spacing:.12em; }
.jeju-hero-arrival .jeju-area-copy h1 { font-family:ui-monospace,monospace; font-size:clamp(2.8rem,5vw,5rem); text-transform:uppercase; }.jeju-hero-arrival .jeju-area-media { margin:.85rem; border-radius:0 1.7rem 0 0; }.jeju-hero-arrival .jeju-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,41,46,.55),transparent 55%); }
.arrival-sticker { position:absolute; z-index:3; right:1rem; bottom:1rem; width:13rem; padding:.8rem; color:#113436; background:#f5e5a9; border:1px dashed #785f32; box-shadow:0 9px 28px rgba(0,0,0,.2); transform:rotate(-2deg); }.arrival-sticker strong,.arrival-sticker span { display:block; }.arrival-sticker strong { font:900 .65rem/1 ui-monospace,monospace; }.arrival-sticker span { margin-top:.35rem; font-size:.69rem; }
.arrival-board { overflow:hidden; color:#dff7f1; background:#16383b; border:1px solid #3b6967; border-radius:.45rem; box-shadow:var(--shadow-sm); }.arrival-board-head { display:grid; grid-template-columns:5rem 1fr 1fr; padding:.8rem 1rem; color:#173c3d; background:#acd8d1; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.1em; }.arrival-board article { display:grid; grid-template-columns:5rem 1fr 1fr; gap:1rem; align-items:center; padding:1rem; border-top:1px solid rgba(255,255,255,.13); }.arrival-board article b { color:#f2b76d; font:900 .7rem/1 ui-monospace,monospace; }.arrival-board article h3 { margin:0; font-family:ui-monospace,monospace; font-size:.95rem; }.arrival-board article p { margin:0; color:#b9d3ce; font-size:.74rem; }
.first-night-tags { display:flex; flex-wrap:wrap; gap:.55rem; }.first-night-tags article { flex:1 1 13rem; min-height:12rem; display:flex; flex-direction:column; padding:1rem; color:#153a3d; background:#deeeea; border:1px solid #b6d2cc; border-radius:.5rem 2.5rem .5rem .5rem; }.first-night-tags b { font:900 .63rem/1 ui-monospace,monospace; letter-spacing:.1em; }.first-night-tags h3 { margin:2rem 0 .35rem; }.first-night-tags p { margin:0; color:#58706f; font-size:.75rem; }
.arrival-photo-fold { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr); overflow:hidden; background:#f6f1e6; border:1px solid #d7c9ae; border-radius:.5rem; }.arrival-photo-fold img { width:100%; height:100%; min-height:28rem; object-fit:cover; filter:saturate(.78); }.coast-window { align-self:center; padding:clamp(1.5rem,4vw,3rem); }.coast-window > span { color:#a45535; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }.coast-window h2 { margin:.45rem 0 .7rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.7rem); font-weight:500; }.coast-window p { color:#6c665d; }
.city-loop-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; background:#a9c3c0; border:1px solid #a9c3c0; border-radius:1rem; }.city-loop-strip article { min-height:14rem; padding:1.2rem; background:#eef6f3; }.city-loop-strip article:nth-child(2) { background:#dfece8; }.city-loop-strip article:nth-child(3) { color:#f0f8f6; background:#2e6463; }.city-loop-strip article:nth-child(4) { background:#f0dfc5; }.city-loop-strip b { font:900 .65rem/1 ui-monospace,monospace; color:#b05939; }.city-loop-strip h3 { margin:3rem 0 .4rem; }.city-loop-strip p { margin:0; color:inherit; opacity:.73; font-size:.75rem; }
.rental-check-card { display:grid; grid-template-columns:minmax(16rem,.55fr) minmax(0,1.45fr); overflow:hidden; color:#e7f7f3; background:#153c3e; border-radius:.5rem 4rem .5rem .5rem; }.rental-check-card > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px); }.rental-check-card h2 { margin:.45rem 0 .7rem; color:#fff; font-family:ui-monospace,monospace; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.05; }.rental-check-card p { color:#bad0cc; }.rental-check-card > div:last-child { display:grid; grid-template-columns:1fr 1fr; }.rental-check-card article { padding:1.2rem; border-left:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); }.rental-check-card b { color:#f0b46c; font:900 .62rem/1 ui-monospace,monospace; }.rental-check-card article p { margin:1.8rem 0 0; font-size:.74rem; }
.arrival-fallbacks { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }.arrival-fallbacks article { min-height:12rem; padding:1.2rem; background:#fff; border:1px solid #c9dcda; border-radius:2.5rem .5rem .5rem .5rem; }.arrival-fallbacks b { color:#19706d; font:900 .63rem/1 ui-monospace,monospace; }.arrival-fallbacks h3 { margin:2rem 0 .4rem; }.arrival-fallbacks p { margin:0; color:var(--muted); font-size:.75rem; }

/* 02 — Aewol / Hyeopjae tidal stop budget */
.jeju-hero-westcoast { display:grid; grid-template-columns:minmax(0,.82fr) minmax(24rem,1.18fr); color:#173a4d; background:#d9eff5; border-color:#9bc9d6; border-radius:5rem .6rem .6rem .6rem; }
.jeju-hero-westcoast .jeju-area-copy h1 { font-family:Georgia,serif; font-weight:500; }.jeju-hero-westcoast .jeju-area-copy h1 em { color:#45859c; font-size:.55em; }.westcoast-copy { position:relative; z-index:4; align-self:center; padding:clamp(2rem,5vw,4rem); }.westcoast-copy > p { color:#4f7180; }
.westcoast-image { position:relative; min-height:35rem; margin:1rem 1rem 1rem 0; overflow:hidden; border-radius:7rem .4rem .4rem .4rem; }.westcoast-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.westcoast-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,52,68,.5),transparent 50%); }
.tide-label { position:absolute; z-index:3; right:1rem; bottom:1rem; padding:.8rem 1rem; color:#eaf8fb; background:rgba(15,65,82,.88); border:1px solid rgba(255,255,255,.25); border-radius:999px; }.tide-label b,.tide-label span { display:block; }.tide-label b { font:900 .62rem/1 ui-monospace,monospace; }.tide-label span { margin-top:.25rem; font-size:.68rem; }
.westcoast-wave { position:absolute; z-index:3; left:0; right:0; bottom:-1px; height:2rem; background:radial-gradient(2rem 1.2rem at 2rem 0,transparent 95%,#fff 100%) 0 0/4rem 2rem repeat-x; opacity:.9; }
.coast-stop-budget { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }.coast-stop-budget article { position:relative; min-height:17rem; padding:1.2rem; color:#14384b; background:#e4f3f5; border:1px solid #b2d7df; border-radius:1rem 3.5rem 1rem 1rem; }.coast-stop-budget article:nth-child(2) { background:#c9e6ec; transform:translateY(1rem); }.coast-stop-budget article:nth-child(3) { color:#f2fbfc; background:#32778e; }.coast-stop-budget article.token-zero { color:#795f53; background:transparent; border:1px dashed #cbb9a9; }.coast-stop-budget b { font:900 1.8rem/1 ui-monospace,monospace; }.coast-stop-budget h3 { margin:4rem 0 .4rem; }.coast-stop-budget p { margin:0; color:inherit; opacity:.75; font-size:.75rem; }
.wind-ribbon { overflow:hidden; color:#eaf8fa; background:#17485c; border-radius:7rem .7rem .7rem 7rem; box-shadow:var(--shadow-sm); }.wind-ribbon > div:first-child { padding:2rem 3rem; }.wind-ribbon h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; }.wind-ribbon p { color:#c5dce3; }.wind-cells { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.15); }.wind-cells article { min-height:10rem; padding:1rem; border-right:1px solid rgba(255,255,255,.14); }.wind-cells b { color:#86d9e8; font:900 .62rem/1 ui-monospace,monospace; }.wind-cells p { margin:2rem 0 0; color:#c7dfe4; font-size:.73rem; }
.beach-operation-card { overflow:hidden; color:#28363b; background:#fff; border:1px solid #bed4d9; box-shadow:var(--shadow-sm); }.beach-op-number { padding:.75rem 1rem; color:#effbfc; background:#2d7b91; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }.beach-operation-card > div:nth-child(2) { padding:clamp(1.4rem,3vw,2.3rem); }.beach-operation-card h2 { margin:.35rem 0 .5rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; }.beach-op-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #c8dcdf; }.beach-op-grid article { min-height:11rem; padding:1.1rem; background:#f4faf9; border-right:1px solid #c8dcdf; }.beach-op-grid b { color:#287389; font:900 .62rem/1 ui-monospace,monospace; }.beach-op-grid p { margin:2rem 0 0; color:#61757b; font-size:.73rem; }
.aewol-line { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); overflow:hidden; color:#254554; background:#dbeef0; border-radius:.5rem 5rem .5rem .5rem; }.aewol-line > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.aewol-line h2 { margin:.4rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; }.aewol-line > div:last-child { display:grid; grid-template-columns:repeat(3,1fr); }.aewol-line article { padding:1.2rem; background:rgba(255,255,255,.45); border-left:1px solid #bfd6d8; }.aewol-line b { color:#b25b3f; font:900 .62rem/1 ui-monospace,monospace; }.aewol-line article p { margin:3.5rem 0 0; color:#5c727a; font-size:.74rem; }
.west-route-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:1px; background:#b8d0d3; }.west-route-strip article { min-height:13rem; padding:1.1rem; background:#f0f7f6; }.west-route-strip article:nth-child(2) { background:#d8eaeb; }.west-route-strip article:nth-child(3) { background:#bee0e5; }.west-route-strip article:nth-child(4) { color:#eef8f9; background:#246579; }.west-route-strip time { color:#ad573d; font:900 .61rem/1 ui-monospace,monospace; }.west-route-strip h3 { margin:2.7rem 0 .4rem; }.west-route-strip p { margin:0; color:inherit; opacity:.75; font-size:.73rem; }
.carfree-west { display:grid; grid-template-columns:1fr 2.1fr; overflow:hidden; color:#edf8f7; background:#244c51; border-radius:4rem .5rem .5rem 4rem; }.carfree-west > div:first-child { display:grid; place-content:center; min-height:16rem; padding:1.5rem; text-align:center; background:#d9b875; color:#3d3529; border-radius:50%; }.carfree-west > div:first-child b { font:900 2rem/1 ui-monospace,monospace; }.carfree-west > div:last-child { align-self:center; padding:clamp(1.5rem,4vw,2.8rem); }.carfree-west h2 { margin:.35rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.carfree-west p { color:#c7dcda; }

/* 04 — Seogwipo water newspaper */
.jeju-hero-waterfall { grid-template-columns:6rem minmax(0,.82fr) minmax(24rem,1.18fr); color:#442d2b; background:#f0e5d4; border-color:#ccb9a3; border-radius:.3rem; }
.waterfall-edition { position:relative; z-index:5; display:flex; flex-direction:column; justify-content:space-between; padding:1rem .7rem; color:#f8eee5; background:#8d3f37; }.waterfall-edition span { font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.13em; writing-mode:vertical-rl; }.waterfall-edition b { font-family:Georgia,serif; font-size:2rem; writing-mode:vertical-rl; }
.jeju-hero-waterfall .jeju-area-copy h1 { color:#432d29; font-family:Georgia,serif; font-weight:500; line-height:.9; }.jeju-hero-waterfall .jeju-area-copy > p { color:#6b5b53; }.jeju-hero-waterfall .jeju-area-media { margin:1rem; border-radius:50% 50% .35rem .35rem; }.jeju-hero-waterfall .jeju-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(50,29,25,.6),transparent 50%); }
.waterfall-caption { position:absolute; right:1rem; bottom:1rem; width:13rem; padding:.9rem; color:#f5ece3; background:rgba(68,42,37,.88); }.waterfall-caption strong,.waterfall-caption span { display:block; }.waterfall-caption strong { font:900 .61rem/1 ui-monospace,monospace; }.waterfall-caption span { margin-top:.35rem; font-family:Georgia,serif; font-size:.7rem; }
.waterfall-catchment { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }.waterfall-catchment article { min-height:17rem; padding:1.2rem; background:#f5eee2; border:1px solid #d9cabb; }.waterfall-catchment article:nth-child(2) { background:#e6d7c4; transform:translateY(1rem); }.waterfall-catchment article:nth-child(3) { color:#f8efea; background:#8f463d; }.waterfall-catchment article:nth-child(4) { color:#e8f3f2; background:#355e61; transform:translateY(-.5rem); }.waterfall-catchment span { color:#a54d3f; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.1em; }.waterfall-catchment b { float:right; color:rgba(70,50,40,.18); font-family:Georgia,serif; font-size:2.5rem; }.waterfall-catchment h3 { clear:both; margin:4rem 0 .4rem; font-family:Georgia,serif; }.waterfall-catchment p { margin:0; color:inherit; opacity:.73; font-size:.74rem; }
.stairs-ledger { display:grid; grid-template-columns:minmax(18rem,.65fr) minmax(0,1.35fr); overflow:hidden; color:#3e2e29; background:#f8f0e4; border:1px solid #d4c2ae; box-shadow:var(--shadow-sm); }.stairs-ledger > div:first-child { padding:clamp(1.5rem,4vw,2.8rem); border-right:1px solid #d4c2ae; }.stairs-ledger > div:first-child > span { color:#a0493b; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.12em; }.stairs-ledger h2 { margin:.4rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; }.stairs-ledger p { color:#6c5d54; }.stairs-rows article { display:grid; grid-template-columns:5rem 1fr; gap:.8rem; padding:1rem 1.2rem; border-bottom:1px dashed #cdb9a6; }.stairs-rows article:last-child { border-bottom:0; }.stairs-rows b { color:#a14b3d; font:900 .62rem/1.3 ui-monospace,monospace; }.stairs-rows h3 { margin:0; font-family:Georgia,serif; }.stairs-rows p { grid-column:2; margin:0; font-size:.73rem; }
.seogwipo-daypress { overflow:hidden; color:#392c28; background:#f8f1e6; border:1px solid #cab8a4; box-shadow:var(--shadow-sm); }.daypress-head { display:flex; justify-content:space-between; padding:.8rem 1rem; color:#f8efe7; background:#382a26; border-bottom:.3rem double #b05948; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.11em; }.seogwipo-daypress article { display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:1.2rem; border-bottom:1px solid #cfbeac; }.seogwipo-daypress article:last-child { border-bottom:0; }.seogwipo-daypress time { color:#a34c3f; font:900 1.3rem/1 ui-monospace,monospace; }.seogwipo-daypress small { color:#8b6d5f; font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.11em; }.seogwipo-daypress h3 { margin:.35rem 0 .35rem; font-family:Georgia,serif; font-size:1.2rem; }.seogwipo-daypress p { margin:0; color:#6d5d54; font-size:.75rem; }
.market-brief { display:grid; grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr); overflow:hidden; color:#f7eee4; background:#71362f; border-radius:.4rem 3rem .4rem .4rem; }.market-brief > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.market-brief > div:first-child > span { color:#efbd7e; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.12em; }.market-brief h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:500; }.market-brief > div:first-child p { color:#e2c9bd; }.market-brief > div:last-child { display:grid; grid-template-columns:1fr 1fr; }.market-brief article { padding:1.1rem; background:rgba(255,255,255,.06); border-left:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); }.market-brief b { color:#f3c786; font:900 .62rem/1 ui-monospace,monospace; }.market-brief article p { margin:1.7rem 0 0; color:#e2cdc3; font-size:.73rem; }
.seogwipo-memory { display:grid; grid-template-columns:14rem 1fr; overflow:hidden; color:#e9efec; background:#293a35; border:1px solid #596660; }.memory-mark { min-height:22rem; display:grid; place-items:center; color:#e6b57c; background:#1d2b27; font-family:Georgia,serif; font-size:4rem; }.seogwipo-memory > div:last-child { padding:clamp(1.5rem,4vw,2.8rem); }.seogwipo-memory h2 { margin:.35rem 0 .65rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.seogwipo-memory p,.seogwipo-memory .check-list li { color:#c4cfca; }.seogwipo-memory .check-list li::before { background:#a85042; }
.rain-edition { display:grid; grid-template-columns:minmax(18rem,.8fr) minmax(0,1.2fr); color:#eaf4f3; background:#244d54; border-radius:5rem .5rem .5rem 5rem; overflow:hidden; }.rain-edition > div:first-child { padding:clamp(1.5rem,4vw,2.8rem); background:radial-gradient(circle at 15% 30%,rgba(169,222,225,.22),transparent 13rem); }.rain-edition > div:first-child > span { color:#f3bd7d; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.12em; }.rain-edition h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.rain-edition p { color:#c2d8d8; }.rain-choices { display:grid; grid-template-columns:repeat(3,1fr); }.rain-choices article { padding:1.2rem; border-left:1px solid rgba(255,255,255,.14); }.rain-choices b { color:#8ed9dc; font:900 .62rem/1 ui-monospace,monospace; }.rain-choices h3 { margin:3rem 0 .35rem; }.rain-choices p { margin:0; font-size:.72rem; }

/* 05 — Jungmun / Andeok geological field section */
.jeju-hero-geology { grid-template-columns:7rem minmax(0,.82fr) minmax(24rem,1.18fr); color:#302b24; background:#e9ddc8; border-color:#bfad91; border-radius:.3rem; }
.geo-index { position:relative; z-index:5; display:flex; flex-direction:column; justify-content:space-between; padding:1rem .7rem; color:#eee6d9; background:#3b3830; }.geo-index span,.geo-index i { font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.11em; writing-mode:vertical-rl; font-style:normal; }.geo-index b { font:900 2rem/1 ui-monospace,monospace; writing-mode:vertical-rl; }.jeju-hero-geology .jeju-area-copy h1 { font-family:ui-monospace,monospace; font-size:clamp(2.7rem,5vw,4.8rem); text-transform:uppercase; }.jeju-hero-geology .jeju-area-copy > p { color:#6a6255; }.jeju-hero-geology .jeju-area-media { margin:1rem; clip-path:polygon(7% 0,100% 0,100% 100%,0 100%,0 8%); }.jeju-hero-geology .jeju-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(40,38,31,.55),transparent 52%); }
.geo-caption { position:absolute; right:1rem; bottom:1rem; padding:.85rem 1rem; color:#f5eee2; background:rgba(47,44,36,.9); border-left:.35rem solid #dba85e; }.geo-caption strong,.geo-caption span { display:block; }.geo-caption strong { font:900 .62rem/1 ui-monospace,monospace; }.geo-caption span { max-width:13rem; margin-top:.35rem; font-size:.68rem; }
.geo-core-samples { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }.geo-core-samples article { min-height:18rem; padding:1.2rem; color:#342f27; background:#e4d8c3; border:1px solid #c6b395; clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%); }.geo-core-samples article:nth-child(2) { color:#f0e9df; background:#625443; transform:translateY(1rem); }.geo-core-samples article:nth-child(3) { background:#caa778; }.geo-core-samples article:nth-child(4) { color:#eaf4f0; background:#3d625b; }.geo-core-samples b { float:right; color:rgba(255,255,255,.27); font:900 2rem/1 ui-monospace,monospace; }.geo-core-samples span { color:#9d5c36; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.1em; }.geo-core-samples h3 { clear:both; margin:3.7rem 0 .4rem; font-family:Georgia,serif; }.geo-core-samples p { margin:0; color:inherit; opacity:.73; font-size:.73rem; }.geo-core-samples strong { display:block; margin-top:1rem; font:800 .61rem/1.35 ui-monospace,monospace; opacity:.75; }
.geo-access-report { overflow:hidden; color:#332f28; background:#f1e7d5; border:1px solid #bba88b; box-shadow:var(--shadow-sm); }.geo-report-head { display:flex; justify-content:space-between; padding:.8rem 1rem; color:#f4eddf; background:#3c3931; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.1em; }.geo-report-row { display:grid; grid-template-columns:9rem 8rem 1fr; gap:1rem; padding:1rem; border-top:1px solid #cdbb9f; }.geo-report-row strong { color:#80512e; font:900 .65rem/1.4 ui-monospace,monospace; }.geo-report-row > span { font-size:.75rem; font-weight:850; }.geo-report-row p { margin:0; color:#675f53; font-size:.74rem; }.geo-report-row i { grid-column:2 / -1; color:#34706a; font:800 .63rem/1.35 ui-monospace,monospace; }.geo-report-row.variable { color:#f2ecdf; background:#765740; }.geo-report-row.variable strong,.geo-report-row.variable i { color:#f0bc74; }.geo-report-row.variable p { color:#ddcec0; }
.resort-landscape-split { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid #b8aa94; box-shadow:var(--shadow-sm); }.resort-side,.landscape-side { min-height:27rem; padding:clamp(1.5rem,4vw,2.8rem); }.resort-side { color:#2d3432; background:#e2ebe5; border-radius:0 0 8rem 0; }.landscape-side { color:#eee9df; background:#4f493e; }.resort-landscape-split span { color:#a06034; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.resort-landscape-split h2 { margin:.5rem 0 .7rem; font-family:Georgia,serif; font-size:clamp(1.75rem,2.8vw,2.45rem); font-weight:500; }.resort-landscape-split p,.resort-landscape-split li { color:inherit; opacity:.76; }.resort-landscape-split ul { padding-left:1.1rem; font-size:.77rem; }
.geology-day { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:1px; background:#bfae92; }.geology-day article { min-height:16rem; padding:1.2rem; background:#f4ebdc; }.geology-day article:nth-child(2) { background:#ddcfb6; }.geology-day article:nth-child(3) { color:#f0e9df; background:#67513e; }.geology-day article:nth-child(4) { color:#edf5f0; background:#436057; }.geology-day time { font:900 1.1rem/1 ui-monospace,monospace; }.geology-day span { display:block; margin-top:.4rem; color:#9a5a34; font:900 .56rem/1 ui-monospace,monospace; letter-spacing:.09em; }.geology-day h3 { margin:3rem 0 .4rem; }.geology-day p { margin:0; color:inherit; opacity:.73; font-size:.73rem; }
.geo-conduct { display:grid; grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr); overflow:hidden; color:#eee9df; background:#3d3a32; clip-path:polygon(0 0,97% 0,100% 12%,100% 100%,0 100%); }.geo-conduct > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.geo-conduct > div:first-child > span { color:#e7b66e; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.geo-conduct h2 { margin:.4rem 0 .6rem; color:#fff; font-family:ui-monospace,monospace; font-size:clamp(1.8rem,3vw,2.5rem); text-transform:uppercase; line-height:1; }.geo-conduct > div:first-child p { color:#c9c1b4; }.geo-conduct > div:last-child { display:grid; grid-template-columns:1fr 1fr; }.geo-conduct article { padding:1.1rem; border-left:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); }.geo-conduct b { color:#e5b56c; font:900 .62rem/1 ui-monospace,monospace; }.geo-conduct article p { margin:1.8rem 0 0; color:#cbc3b7; font-size:.73rem; }

/* 06 — Moseulpo / Gapado passenger manifest */
.jeju-hero-ferry { grid-template-columns:7rem minmax(0,.82fr) minmax(24rem,1.18fr); color:#253a2e; background:#e4e8c5; border-color:#aab779; border-radius:.3rem 4rem .3rem .3rem; }
.ferry-stub { position:relative; z-index:5; display:flex; flex-direction:column; justify-content:space-between; padding:1rem .7rem; color:#f2f4dc; background:#3d583f; }.ferry-stub span,.ferry-stub i { font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.11em; writing-mode:vertical-rl; font-style:normal; }.ferry-stub b { font:900 1.4rem/1 ui-monospace,monospace; writing-mode:vertical-rl; letter-spacing:.14em; }.jeju-hero-ferry .jeju-area-copy h1 { font-family:Georgia,serif; font-weight:500; }.jeju-hero-ferry .jeju-area-copy > p { color:#5a6a50; }.jeju-hero-ferry .jeju-area-media { margin:1rem; border-radius:50% 50% .4rem .4rem; }.jeju-hero-ferry .jeju-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(33,59,36,.54),transparent 52%); }
.manifest-stamp { position:absolute; right:1rem; bottom:1rem; padding:.85rem 1rem; color:#f5efd9; background:rgba(49,72,49,.9); border:2px solid #e1c77a; border-radius:50%; text-align:center; transform:rotate(-7deg); }.manifest-stamp strong,.manifest-stamp span { display:block; }.manifest-stamp strong { font:900 .63rem/1 ui-monospace,monospace; }.manifest-stamp span { max-width:8rem; margin-top:.3rem; font-size:.65rem; }
.ferry-manifest { overflow:hidden; color:#26382e; background:#f5f1db; border:1px solid #aeb982; box-shadow:var(--shadow-sm); }.manifest-head,.ferry-manifest article { display:grid; grid-template-columns:9rem 1fr 1fr; gap:1rem; }.manifest-head { padding:.8rem 1rem; color:#eff4dc; background:#3b583f; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.11em; }.ferry-manifest article { padding:1rem; border-top:1px dashed #aeb58a; }.ferry-manifest b { color:#687433; font:900 .64rem/1.4 ui-monospace,monospace; }.ferry-manifest p,.ferry-manifest span { margin:0; font-size:.74rem; }.ferry-manifest span { color:#8a4e36; }
.gapado-wind-gate { display:grid; grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr); overflow:hidden; color:#eef3dc; background:#38543b; border-radius:5rem .5rem .5rem 5rem; }.gapado-wind-gate > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.gapado-wind-gate > div:first-child > span { color:#e4c775; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.gapado-wind-gate h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.gapado-wind-gate > div:first-child p { color:#cad9bd; }.gapado-wind-gate > div:last-child { display:grid; grid-template-columns:repeat(3,1fr); }.gapado-wind-gate article { padding:1.1rem; border-left:1px solid rgba(255,255,255,.15); }.gapado-wind-gate article b { display:inline-block; padding:.35rem .5rem; color:#26382b; background:#b9d579; font:900 .61rem/1 ui-monospace,monospace; }.gapado-wind-gate article.hold b { background:#e4c26e; }.gapado-wind-gate article.no b { color:#fff; background:#a84e3f; }.gapado-wind-gate h3 { margin:3rem 0 .35rem; }.gapado-wind-gate article p { margin:0; color:#cad8c1; font-size:.72rem; }
.gapado-loop { position:relative; min-height:36rem; overflow:hidden; background:#edf0d3; border:1px solid #b7c084; border-radius:50%; }.gapado-loop::before { content:""; position:absolute; inset:8%; border:2px dashed #6c8050; border-radius:50%; }.loop-center { position:absolute; z-index:3; top:50%; left:50%; width:10rem; height:10rem; display:grid; place-content:center; color:#eef3dc; background:#405942; border:7px solid #fff; border-radius:50%; text-align:center; transform:translate(-50%,-50%); }.loop-center b { font:900 1.4rem/1 ui-monospace,monospace; }.loop-center span { margin-top:.3rem; font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.1em; }.gapado-loop article { position:absolute; z-index:2; width:15rem; min-height:9rem; padding:1rem; color:#2e3c2e; background:#fbfae9; border:1px solid #a9b477; border-radius:1rem; }.loop-port { top:5%; left:36%; }.loop-wall { top:31%; right:5%; }.loop-field { bottom:7%; left:38%; }.loop-village { top:34%; left:4%; }.gapado-loop small { color:#77823e; font:900 .59rem/1 ui-monospace,monospace; }.gapado-loop h3 { margin:.5rem 0 .25rem; }.gapado-loop p { margin:0; color:#65705a; font-size:.69rem; }
.island-resident-code { display:grid; grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr); overflow:hidden; color:#eaf2db; background:#344c38; border:1px solid #5f785a; }.island-resident-code > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.island-resident-code > div:first-child > span { color:#dfc16d; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.island-resident-code h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.island-resident-code > div:first-child p { color:#cad7c1; }.island-resident-code > div:last-child { display:grid; grid-template-columns:1fr 1fr; }.island-resident-code article { padding:1.1rem; border-left:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); }.island-resident-code b { color:#d8c36f; font:900 .62rem/1 ui-monospace,monospace; }.island-resident-code h3 { margin:1.7rem 0 .35rem; }.island-resident-code article p { margin:0; color:#c8d5bf; font-size:.72rem; }
.port-day-card { display:grid; grid-template-columns:12rem 1fr; overflow:hidden; color:#30382f; background:#f1efdb; border:1px solid #b5b985; border-radius:50% .5rem .5rem 50%; }.port-day-mark { min-height:22rem; display:grid; place-items:center; color:#eff3dc; background:#7e863f; border-radius:50%; font:900 5rem/1 ui-monospace,monospace; }.port-day-card > div:last-child { align-self:center; padding:clamp(1.5rem,4vw,2.7rem); }.port-day-card h2 { margin:.35rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.port-day-card p { color:#626958; }.port-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }.port-options article { padding:.8rem; background:rgba(255,255,255,.5); border:1px solid #c3c49a; }.port-options b { color:#737d35; font:900 .6rem/1 ui-monospace,monospace; }.port-options article p { margin:.8rem 0 0; font-size:.7rem; }
.return-ticket { display:grid; grid-template-columns:12rem 1fr; overflow:hidden; color:#29362b; background:#f7f2d9; border:1px dashed #969e5e; box-shadow:var(--shadow-sm); }.return-ticket > div { display:flex; flex-direction:column; justify-content:space-between; padding:1rem; color:#f1f2dc; background:#3e5940; }.return-ticket > div span,.return-ticket > div b { font:900 .62rem/1.2 ui-monospace,monospace; letter-spacing:.1em; writing-mode:vertical-rl; }.return-ticket ol { margin:0; padding:0; list-style:none; }.return-ticket li { display:grid; grid-template-columns:6rem 1fr; gap:1rem; padding:1rem 1.2rem; border-bottom:1px dashed #aaa97d; }.return-ticket li:last-child { border-bottom:0; }.return-ticket li strong { color:#73803b; font:900 .67rem/1 ui-monospace,monospace; }.return-ticket li span { color:#626955; font-size:.74rem; }

/* 07 — Seongsan / Udo two-clock control room */
.jeju-hero-two-clocks { grid-template-columns:minmax(0,.78fr) minmax(27rem,1.22fr); color:#f3edff; background:linear-gradient(135deg,#39254f 0 48%,#bb5d4a 48% 50%,#244e64 50%); border-color:#6f597e; border-radius:3rem .4rem 3rem .4rem; }
.jeju-hero-two-clocks .jeju-area-copy h1 { color:#fff; font-family:Georgia,serif; font-weight:500; }.jeju-hero-two-clocks .jeju-area-copy h1 em { color:#f2a977; }.jeju-hero-two-clocks .jeju-area-copy > p { color:#d6cce0; }.jeju-hero-two-clocks .jeju-area-copy .page-hero-meta span { color:#f6efff; background:rgba(22,12,33,.35); border-color:rgba(255,255,255,.2); }
.dual-clock-visual { position:relative; min-height:35rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; padding:1rem; }.dual-clock-visual figure { position:relative; min-width:0; margin:0; overflow:hidden; box-shadow:0 20px 40px rgba(16,13,31,.3); }.dual-clock-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.sunrise-face { border-radius:50% 50% .4rem .4rem; transform:translateY(-.7rem); }.ferry-face { border-radius:.4rem .4rem 50% 50%; transform:translateY(.7rem); }.dual-clock-visual figure::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,22,40,.72),transparent 55%); }.dual-clock-visual figcaption { position:absolute; z-index:3; left:1rem; right:1rem; bottom:1rem; color:#fff; }.dual-clock-visual figcaption b,.dual-clock-visual figcaption span { display:block; }.dual-clock-visual figcaption b { font:900 .7rem/1 ui-monospace,monospace; letter-spacing:.12em; }.dual-clock-visual figcaption span { margin-top:.35rem; color:#dfd8ea; font-family:Georgia,serif; font-size:.75rem; }.clock-hinge { position:absolute; z-index:5; top:50%; left:50%; width:4rem; height:4rem; display:grid; place-items:center; color:#422d52; background:#f4b06f; border:7px solid #fff; border-radius:50%; font:900 1.5rem/1 ui-monospace,monospace; transform:translate(-50%,-50%); }
.two-clock-board { display:grid; grid-template-columns:1fr 6rem 1fr; overflow:hidden; color:#f3eff9; background:#281c39; border:1px solid #705b85; border-radius:7rem .5rem 7rem .5rem; box-shadow:var(--shadow-sm); }.two-clock-board article { min-height:25rem; display:flex; flex-direction:column; padding:1.5rem; }.two-clock-board article.sea-clock { color:#eaf7fb; background:#234d63; }.two-clock-board header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid rgba(255,255,255,.18); }.two-clock-board header span { font:900 .58rem/1 ui-monospace,monospace; letter-spacing:.1em; }.two-clock-board header b { font:900 1.35rem/1 ui-monospace,monospace; color:#f3a96c; }.two-clock-board h3 { margin:3rem 0 .5rem; color:#fff; font-family:Georgia,serif; font-size:1.6rem; font-weight:500; }.two-clock-board ul { margin:0; padding-left:1rem; color:#cfc6dd; font-size:.76rem; }.two-clock-board footer { margin-top:auto; padding-top:1rem; color:#f1ad78; font:800 .61rem/1.3 ui-monospace,monospace; }.clock-operator { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#432d53; background:#f2ad70; }.clock-operator span { font:900 .55rem/1 ui-monospace,monospace; letter-spacing:.1em; writing-mode:vertical-rl; }.clock-operator b { margin:1rem 0; font-size:1.8rem; }
.seongsan-gate { display:grid; grid-template-columns:7rem minmax(17rem,.75fr) minmax(0,1.25fr); overflow:hidden; color:#3d2b39; background:#f2e5db; border:1px solid #c7adad; clip-path:polygon(0 0,97% 0,100% 10%,100% 100%,0 100%); }.gate-number { display:grid; place-items:center; color:#f8efff; background:#523760; font:900 2.8rem/1 ui-monospace,monospace; writing-mode:vertical-rl; }.seongsan-gate > div:nth-child(2) { align-self:center; padding:clamp(1.5rem,4vw,2.6rem); }.seongsan-gate h2 { margin:.35rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.seongsan-gate p { color:#6c5966; }.gate-tests { display:grid; grid-template-columns:repeat(3,1fr); }.gate-tests article { padding:1.1rem; border-left:1px solid #d1bfc0; background:rgba(255,255,255,.35); }.gate-tests b { color:#b35446; font:900 .63rem/1 ui-monospace,monospace; }.gate-tests span { display:block; margin-top:3rem; color:#6a5b63; font-size:.74rem; }
.udo-boarding-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }.udo-boarding-grid article { min-height:15rem; padding:1.2rem; color:#263b48; background:#dcebf0; border:1px solid #b3cdd5; border-radius:.4rem 3rem .4rem .4rem; }.udo-boarding-grid article:nth-child(2),.udo-boarding-grid article:nth-child(5) { color:#f2f8fa; background:#315a6d; }.udo-boarding-grid article:nth-child(3),.udo-boarding-grid article:nth-child(6) { color:#3c2d42; background:#eadce9; }.udo-boarding-grid span { float:right; color:rgba(40,70,80,.23); font:900 2.1rem/1 ui-monospace,monospace; }.udo-boarding-grid h3 { clear:both; margin:3.2rem 0 .4rem; }.udo-boarding-grid p { margin:0; color:inherit; opacity:.73; font-size:.74rem; }
.udo-mobility-deck { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; color:#edf7fa; background:#21495d; border-radius:.5rem 5rem .5rem .5rem; }.mobility-deck-title { grid-column:1 / -1; padding:clamp(1.5rem,4vw,2.7rem); border-bottom:1px solid rgba(255,255,255,.16); background:linear-gradient(110deg,#2d1e3f,#21495d); }.mobility-deck-title > span { color:#efaa72; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.udo-mobility-deck h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.mobility-deck-title p { color:#c8dbe2; }.udo-mobility-deck article { min-height:17rem; display:flex; flex-direction:column; padding:1.2rem; border-right:1px solid rgba(255,255,255,.15); }.udo-mobility-deck article:nth-child(3) { background:rgba(255,255,255,.06); }.udo-mobility-deck b { color:#79d1df; font:900 .64rem/1 ui-monospace,monospace; }.udo-mobility-deck h3 { margin:3.4rem 0 .4rem; }.udo-mobility-deck article p { margin:0; color:#c5d9df; font-size:.74rem; }.udo-mobility-deck article span { margin-top:auto; padding-top:1rem; color:#f0ae78; font:800 .61rem/1.35 ui-monospace,monospace; }
.east-day-timeline { display:flex; overflow:hidden; color:#3c2d44; background:#e8dbea; border:1px solid #c7b2cb; border-radius:6rem .5rem .5rem 6rem; }.east-day-timeline article { position:relative; flex:1; min-width:0; min-height:18rem; padding:1.2rem; border-right:1px solid #cbb9cd; }.east-day-timeline article:nth-child(3) { color:#f2f7fa; background:#315a6c; }.east-day-timeline article:nth-child(4) { color:#f8efe9; background:#a75249; }.east-day-timeline time { color:#a95748; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.08em; }.east-day-timeline article:nth-child(3) time,.east-day-timeline article:nth-child(4) time { color:#f3bd84; }.east-day-timeline h3 { margin:4rem 0 .4rem; font-family:Georgia,serif; }.east-day-timeline p { margin:0; color:inherit; opacity:.74; font-size:.72rem; }
.ferry-fallback-panel { display:grid; grid-template-columns:minmax(17rem,.75fr) minmax(0,1.25fr); overflow:hidden; color:#eef7fa; background:#244d62; clip-path:polygon(0 0,97% 0,100% 12%,100% 100%,0 100%); }.ferry-fallback-panel > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.ferry-fallback-panel > div:first-child > span { color:#efa878; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.ferry-fallback-panel h2 { margin:.4rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.ferry-fallback-panel > div:first-child p { color:#c5d9e1; }.ferry-fallback-panel > div:last-child { display:grid; grid-template-columns:repeat(3,1fr); }.ferry-fallback-panel article { padding:1.1rem; border-left:1px solid rgba(255,255,255,.14); }.ferry-fallback-panel b { color:#82d0df; font:900 .61rem/1 ui-monospace,monospace; }.ferry-fallback-panel h3 { margin:3rem 0 .35rem; }.ferry-fallback-panel article p { margin:0; color:#c6d9df; font-size:.72rem; }
.udo-resident-code { display:grid; grid-template-columns:10rem minmax(17rem,.75fr) minmax(0,1.25fr); overflow:hidden; color:#3c2d42; background:#eee3ee; border:1px solid #c9b6ca; border-radius:50% .5rem .5rem 50%; }.udo-code-seal { min-height:23rem; display:grid; place-content:center; color:#f4eff8; background:#4c365d; border-radius:50%; text-align:center; font-family:Georgia,serif; font-size:2rem; line-height:1; }.udo-code-seal span { margin-top:.4rem; font:900 .65rem/1 ui-monospace,monospace; }.udo-resident-code > div:nth-child(2) { align-self:center; padding:clamp(1.5rem,4vw,2.5rem); }.udo-resident-code h2 { margin:.35rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; }.udo-resident-code p { color:#6b5c6d; }.udo-resident-code ul { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:0; list-style:none; }.udo-resident-code li { display:flex; flex-direction:column; justify-content:center; padding:1rem; border-left:1px solid #cdbdce; border-bottom:1px solid #cdbdce; }.udo-resident-code li b { color:#a75349; font:900 .61rem/1 ui-monospace,monospace; }.udo-resident-code li span { margin-top:.7rem; color:#675b69; font-size:.72rem; }

/* 08 — Woljeongri / Gimnyeong material library */
.jeju-hero-material { grid-template-columns:4.5rem minmax(0,.78fr) minmax(24rem,1.22fr); color:#243d3e; background:#dcf1ee; border-color:#a8cfca; border-radius:.35rem 5rem .35rem .35rem; }
.material-swatches { position:relative; z-index:5; display:grid; grid-template-rows:repeat(4,1fr); }.material-swatches i { display:block; }.material-swatches .basalt { background:#303a3b; }.material-swatches .foam { background:#d7f2ee; }.material-swatches .sand { background:#e8d5aa; }.material-swatches .wind { background:repeating-linear-gradient(135deg,#6db2b0 0 8px,#9bcfca 8px 16px); }
.jeju-hero-material .jeju-area-copy h1 { color:#263e3e; font-family:ui-monospace,monospace; font-size:clamp(2.5rem,4.8vw,4.7rem); text-transform:uppercase; }.jeju-hero-material .jeju-area-copy h1 em { color:#b86645; }.jeju-hero-material .jeju-area-copy > p { color:#587372; }.jeju-hero-material .jeju-area-media { margin:1rem; border-radius:0 4rem 0 4rem; }.jeju-hero-material .jeju-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(25,57,58,.58),transparent 50%); }
.material-hero-label { position:absolute; right:1rem; bottom:1rem; max-width:14rem; padding:.9rem; color:#eaf8f5; background:rgba(31,67,67,.9); border-left:.35rem solid #e2c17f; }.material-hero-label b,.material-hero-label span { display:block; }.material-hero-label b { font:900 .61rem/1 ui-monospace,monospace; }.material-hero-label span { margin-top:.35rem; font-size:.68rem; }
.material-library { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }.material-library article { min-height:20rem; display:flex; flex-direction:column; padding:1rem; color:#2c4342; background:#edf7f4; border:1px solid #b8d5d1; }.material-library article > span { font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.1em; }.sample-chip { height:5.5rem; margin:1rem 0; border:1px solid rgba(30,60,60,.16); }.sample-sand .sample-chip { background:radial-gradient(circle,#e3c990 0 2px,#f1e2bd 3px 100%); background-size:8px 8px; }.sample-basalt .sample-chip { background:radial-gradient(circle at 25% 25%,#596162 0 8%,transparent 9%),radial-gradient(circle at 70% 65%,#1e2829 0 15%,transparent 16%),#364243; }.sample-wall .sample-chip { background:linear-gradient(30deg,transparent 42%,#5e6865 43% 57%,transparent 58%),linear-gradient(-30deg,transparent 42%,#79837e 43% 57%,transparent 58%),#3d4947; background-size:35px 24px; }.sample-air .sample-chip { background:repeating-linear-gradient(170deg,#d8f0ed 0 8px,#7fc0ba 9px 11px,#d8f0ed 12px 20px); }.material-library h3 { margin:.3rem 0 .4rem; font-family:Georgia,serif; }.material-library p { margin:0; color:#5b7472; font-size:.74rem; }.material-library small { margin-top:auto; padding-top:1rem; color:#ae5d40; font:800 .59rem/1.3 ui-monospace,monospace; }
.village-street-section { display:grid; grid-template-columns:minmax(18rem,.8fr) minmax(0,1.2fr); overflow:hidden; color:#274342; background:#e5f1ec; border:1px solid #b5ccc6; border-radius:.4rem 5rem .4rem .4rem; }.village-street-section > div:first-child { padding:clamp(1.5rem,4vw,2.8rem); }.village-street-section h2 { margin:.35rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.village-street-section p { color:#5d7470; }.street-rules article { display:grid; grid-template-columns:5rem 1fr; gap:.7rem; padding:.75rem 0; border-top:1px solid #bed0cb; }.street-rules b { color:#a85b42; font:900 .61rem/1.4 ui-monospace,monospace; }.street-rules span { color:#5e716f; font-size:.72rem; }.village-street-map { position:relative; min-height:32rem; overflow:hidden; color:#eaf7f4; background:#2c5554; }.street-sea { position:absolute; top:1.2rem; right:1.2rem; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.12em; }.street-spine { position:absolute; top:10%; bottom:10%; left:50%; width:1rem; background:#e5d39f; border:3px solid #fff; transform:translateX(-50%) rotate(9deg); }.street-node { position:absolute; z-index:2; width:4.5rem; height:4.5rem; display:grid; place-items:center; color:#254443; background:#f0e6c4; border:4px solid #fff; border-radius:50%; font:900 .56rem/1 ui-monospace,monospace; }.node-bus { top:9%; left:38%; }.node-cafe { top:30%; right:20%; }.node-beach { bottom:27%; left:23%; }.node-home { right:30%; bottom:8%; background:#da9575; }.village-street-map em { position:absolute; left:1rem; bottom:1rem; font:800 .57rem/1 ui-monospace,monospace; letter-spacing:.08em; }
.water-condition-matrix { overflow:hidden; color:#264342; background:#eff8f5; border:1px solid #accbc6; box-shadow:var(--shadow-sm); }.matrix-head,.water-condition-matrix article { display:grid; grid-template-columns:8rem 1fr 1fr; gap:1rem; }.matrix-head { padding:.8rem 1rem; color:#eaf7f5; background:#2b6260; font:900 .6rem/1 ui-monospace,monospace; letter-spacing:.1em; }.water-condition-matrix article { padding:1rem; border-top:1px solid #bfd4d0; }.water-condition-matrix article:nth-child(3) { background:#dceeea; }.water-condition-matrix b { color:#ad5d40; font:900 .65rem/1.4 ui-monospace,monospace; }.water-condition-matrix p,.water-condition-matrix span { margin:0; font-size:.74rem; }.water-condition-matrix span { color:#31736e; font-weight:800; }
.coast-direction-strip { overflow:hidden; color:#284241; background:#eaf5ef; border:1px solid #b7ccc5; border-radius:5rem .5rem .5rem .5rem; }.direction-arrow { padding:.9rem 1.3rem; color:#eaf7f4; background:#2d5c59; font:900 .67rem/1 ui-monospace,monospace; letter-spacing:.1em; }.direction-arrow span { padding:0 1rem; color:#e9bf7d; }.coast-direction-strip > div:nth-child(2) { padding:clamp(1.5rem,4vw,2.7rem); }.coast-direction-strip h2 { margin:.35rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.coast-direction-strip > div:nth-child(2) p { color:#5c716d; }.coast-direction-strip ol { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:0; list-style:none; border-top:1px solid #b9cec8; }.coast-direction-strip li { min-height:17rem; display:flex; flex-direction:column; padding:1.2rem; border-right:1px solid #b9cec8; }.coast-direction-strip li:nth-child(2) { background:#d8eae5; }.coast-direction-strip li:nth-child(3) { color:#edf7f4; background:#3d6965; }.coast-direction-strip li b { color:#aa5a40; font:900 .61rem/1 ui-monospace,monospace; }.coast-direction-strip li h3 { margin:3rem 0 .4rem; }.coast-direction-strip li p { margin:0; color:inherit; opacity:.74; font-size:.73rem; }.coast-direction-strip li > span { margin-top:auto; padding-top:1rem; font:800 .61rem/1.35 ui-monospace,monospace; opacity:.78; }
.lava-status-card { display:grid; grid-template-columns:6rem minmax(17rem,.75fr) minmax(0,1.25fr); overflow:hidden; color:#eaf6f3; background:#294b49; clip-path:polygon(0 0,97% 0,100% 10%,100% 100%,0 100%); }.status-tab { display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:1rem .6rem; color:#2b403d; background:#e3c787; }.status-tab b,.status-tab span { font:900 .59rem/1 ui-monospace,monospace; letter-spacing:.1em; writing-mode:vertical-rl; }.lava-status-card > div:nth-child(2) { align-self:center; padding:clamp(1.5rem,4vw,2.7rem); }.lava-status-card h2 { margin:.35rem 0 .6rem; color:#fff; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.lava-status-card p { color:#c7d9d5; }.status-checks { display:grid; grid-template-columns:1fr 1fr; }.status-checks article { display:grid; grid-template-columns:2rem 1fr; gap:.7rem; align-items:start; padding:1rem; border-left:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }.status-checks b { width:1.7rem; height:1.7rem; display:grid; place-items:center; color:#294b49; background:#80c8be; border-radius:50%; font:900 .65rem/1 ui-monospace,monospace; }.status-checks span { color:#c6d8d4; font-size:.72rem; }
.carfree-notation { overflow:hidden; color:#2c413f; background:#f1f4e7; border:1px dashed #a7b892; box-shadow:var(--shadow-sm); }.carfree-notation > div:first-child { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:1.3rem; border-bottom:1px dashed #a7b892; }.carfree-notation > div:first-child > span { color:#a35a3f; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.11em; }.carfree-notation h2 { max-width:38rem; margin:0; font-family:ui-monospace,monospace; font-size:clamp(1.6rem,2.8vw,2.3rem); text-transform:uppercase; line-height:1; text-align:right; }.notation-line { display:flex; align-items:stretch; }.notation-line article { flex:1; min-width:0; min-height:12rem; padding:1rem; }.notation-line i { align-self:center; color:#5b8b82; font-style:normal; font-size:1.5rem; }.notation-line b { color:#39756f; font:900 .61rem/1 ui-monospace,monospace; }.notation-line p { margin:2.2rem 0 0; color:#65716a; font-size:.71rem; }.notation-note { margin:0; padding:1rem 1.3rem; color:#eff7f3; background:#315f5b; font:800 .65rem/1.4 ui-monospace,monospace; }
.village-code { display:grid; grid-template-columns:12rem minmax(17rem,.75fr) minmax(0,1.25fr); overflow:hidden; color:#2d4240; background:#e4efe9; border:1px solid #b6cac3; border-radius:.4rem 4rem .4rem .4rem; }.village-code > div:first-child { display:flex; flex-direction:column; justify-content:space-between; padding:1rem; color:#eaf7f3; background:#2e5854; }.village-code > div:first-child span,.village-code > div:first-child b { font:900 .61rem/1.2 ui-monospace,monospace; letter-spacing:.09em; writing-mode:vertical-rl; }.village-code > div:nth-child(2) { align-self:center; padding:clamp(1.5rem,4vw,2.5rem); }.village-code h2 { margin:0 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; }.village-code p { color:#5e736f; }.village-code ul { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:0; list-style:none; }.village-code li { display:grid; grid-template-columns:2rem 1fr; gap:.7rem; align-items:start; padding:1rem; border-left:1px solid #bdcfca; border-bottom:1px solid #bdcfca; }.village-code li strong { color:#ad5b40; font:900 .62rem/1 ui-monospace,monospace; }.village-code li span { color:#60736f; font-size:.72rem; }

/* 03 — Hallasan expedition control */
.jeju-hero-hallasan { color:#eaf4ef; background:#172d26; border-color:#3f5b4d; clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,0 100%); border-radius:.35rem; }
.hallasan-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(168,213,190,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(168,213,190,.14) 1px,transparent 1px); background-size:32px 32px; }
.jeju-hero-hallasan .jeju-area-copy h1 { color:#fff; font-family:ui-monospace,monospace; text-transform:uppercase; }.jeju-hero-hallasan .jeju-area-copy h1 em { color:#ebbd72; }.jeju-hero-hallasan .jeju-area-copy > p { color:#bed1c7; }.jeju-hero-hallasan .jeju-area-copy .page-hero-meta span { color:#dcece4; background:rgba(0,0,0,.2); border-color:#607a6d; }.jeju-hero-hallasan .jeju-area-media { margin:1rem; clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 12%); }.jeju-hero-hallasan .jeju-area-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,37,29,.62),transparent 50%); }
.peak-coordinate { position:absolute; right:1rem; bottom:1rem; width:13rem; padding:1rem; color:#e8f5ee; background:rgba(20,48,37,.9); border:1px solid #7f9a8a; }.peak-coordinate b,.peak-coordinate span { display:block; }.peak-coordinate b { color:#f0bd6c; font:900 1.5rem/1 ui-monospace,monospace; }.peak-coordinate span { margin-top:.4rem; font-size:.68rem; }
.summit-gate { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:1px; color:#e9f5ee; background:#597062; border:1px solid #597062; clip-path:polygon(0 0,98% 0,100% 5%,100% 100%,0 100%); }.summit-gate article { min-height:16rem; padding:1.2rem; background:#203c30; }.summit-gate article:nth-child(2),.summit-gate article:nth-child(5) { background:#2e5041; }.summit-gate article:nth-child(3),.summit-gate article:nth-child(6) { color:#2d352f; background:#d7d9c0; }.summit-gate b { float:right; color:rgba(255,255,255,.22); font:900 2.2rem/1 ui-monospace,monospace; }.summit-gate span { color:#eaba70; font:900 .62rem/1 ui-monospace,monospace; letter-spacing:.11em; }.summit-gate h3 { clear:both; margin:3.4rem 0 .4rem; }.summit-gate p { margin:0; color:inherit; opacity:.74; font-size:.74rem; }
.trail-command { overflow:hidden; color:#e8f5ef; background:#152f27; border:1px solid #4e6b5c; box-shadow:var(--shadow-sm); }.trail-command > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); background:linear-gradient(120deg,rgba(212,176,101,.13),transparent 55%); }.trail-command > div:first-child > span { color:#e6b866; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.12em; }.trail-command h2 { margin:.45rem 0 .65rem; color:#fff; font-family:ui-monospace,monospace; font-size:clamp(1.8rem,3vw,2.6rem); text-transform:uppercase; line-height:1; }.trail-command > div:first-child p { color:#bdd1c7; }.trail-rows article { display:grid; grid-template-columns:9rem 1fr 1.25fr; gap:1rem; padding:1rem 1.3rem; border-top:1px solid rgba(255,255,255,.14); }.trail-rows b { color:#f0be6b; font:900 .7rem/1.4 ui-monospace,monospace; }.trail-rows span { color:#e4eee9; font-size:.76rem; }.trail-rows p { margin:0; color:#b7ccc2; font-size:.73rem; }.trail-rows strong { grid-column:2 / -1; color:#8ed3b3; font:800 .62rem/1.3 ui-monospace,monospace; }
.mountain-layers { display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:.55rem; }.mountain-layers article { min-height:13rem; padding:1.2rem; color:#304136; background:#dce5d9; clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%); }.mountain-layers .forest { min-height:16rem; color:#edf7f1; background:#315b45; }.mountain-layers .alpine { min-height:20rem; color:#eef4ef; background:#40564a; }.mountain-layers .descent { min-height:15rem; color:#3b352d; background:#ddc394; }.mountain-layers small { font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.09em; }.mountain-layers h3 { margin:3rem 0 .4rem; }.mountain-layers p { margin:0; color:inherit; opacity:.73; font-size:.73rem; }
.turnaround-rule { display:grid; grid-template-columns:minmax(16rem,.55fr) minmax(0,1.45fr); overflow:hidden; color:#203c31; background:#e8eee3; border:1px solid #bdcbbd; border-radius:50% .5rem .5rem 50%; }.turnaround-dial { position:relative; min-height:24rem; display:grid; place-content:center; padding:2rem; color:#fff; background:#a64d3d; border-radius:50%; text-align:center; }.turnaround-dial::after { content:""; position:absolute; inset:1rem; border:1px dashed rgba(255,255,255,.55); border-radius:50%; }.turnaround-dial b,.turnaround-dial span { position:relative; z-index:2; display:block; }.turnaround-dial b { font:900 2.5rem/1 ui-monospace,monospace; }.turnaround-dial span { max-width:8rem; margin:.5rem auto 0; font-family:Georgia,serif; font-size:.75rem; }.turnaround-rule > div:last-child { align-self:center; padding:clamp(1.5rem,4vw,2.7rem); }.turnaround-rule h2 { margin:.35rem 0 .6rem; font-family:Georgia,serif; font-size:clamp(1.8rem,3vw,2.55rem); font-weight:500; }.turnaround-rule p,.turnaround-rule li { color:#5b6c61; }.turnaround-rule ul { padding-left:1.1rem; font-size:.78rem; }
.trail-transfer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }.trail-transfer-grid article { min-height:15rem; padding:1.2rem; color:#eaf5ef; background:#28473a; border-top:.35rem solid #d8ae68; }.trail-transfer-grid article:nth-child(2) { background:#3c594b; transform:translateY(1rem); }.trail-transfer-grid article:nth-child(3) { color:#394038; background:#dedec9; }.trail-transfer-grid span { font:900 .62rem/1 ui-monospace,monospace; color:#e7b767; }.trail-transfer-grid h3 { margin:3.8rem 0 .4rem; }.trail-transfer-grid p { margin:0; color:inherit; opacity:.73; font-size:.75rem; }
.halla-fallback { display:grid; grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr); overflow:hidden; color:#eaf5ef; background:#1b392e; clip-path:polygon(0 0,97% 0,100% 11%,100% 100%,0 100%); }.halla-fallback > div:first-child { padding:clamp(1.5rem,4vw,2.7rem); }.halla-fallback > div:first-child > span { color:#e9b86b; font:900 .61rem/1 ui-monospace,monospace; letter-spacing:.12em; }.halla-fallback h2 { margin:.4rem 0 .6rem; color:#fff; font-family:ui-monospace,monospace; font-size:clamp(1.8rem,3vw,2.55rem); text-transform:uppercase; line-height:1; }.halla-fallback p { color:#bfd1c8; }.halla-fallback > div:last-child { display:grid; grid-template-columns:repeat(3,1fr); }.halla-fallback article { padding:1.2rem; border-left:1px solid rgba(255,255,255,.14); }.halla-fallback article b { color:#93d0b3; font:900 .62rem/1 ui-monospace,monospace; }.halla-fallback article p { margin:3rem 0 0; font-size:.73rem; }