/* ---------- Tokens ---------- */
:root {
  --font-display: 'Erode', 'Noto Serif HK', Georgia, serif;
  --font-body: 'Satoshi', 'Noto Sans HK', system-ui, sans-serif;

  --bg: #f4efe6;
  --bg-elev: #fbf8f2;
  --bg-sunk: #ebe4d6;
  --ink: #1c1a17;
  --ink-2: #4a463f;
  --ink-3: #615a50;
  --line: #d9d1c2;
  --accent: #c8583a;
  --accent-ink: #9a3f26;
  --teal: #2f8f83;
  --gold: #d9a441;
  --shadow: 0 1px 2px rgba(28,26,23,.06), 0 12px 32px -12px rgba(28,26,23,.18);

  --text-xs: .78rem; --text-sm: .9rem; --text-base: 1.04rem; --text-lg: 1.25rem;
  --text-xl: 1.6rem; --text-2xl: 2.2rem; --text-3xl: 3rem; --text-hero: clamp(2.8rem, 6.5vw, 5.4rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s8: 3rem; --s10: 4.5rem; --s12: 6.5rem;
  --radius: 6px; --radius-lg: 12px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"] {
  --bg: #16151a;
  --bg-elev: #1f1d24;
  --bg-sunk: #111015;
  --ink: #ece6da;
  --ink-2: #bfb8aa;
  --ink-3: #a6a091;
  --line: #2f2c36;
  --accent: #e0724f;
  --accent-ink: #f0a288;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.7);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .35s var(--ease), color .35s var(--ease);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-hero); }
h2 { font-size: clamp(2rem, 4vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--s4); }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
em { font-style: italic; }
small { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.4; display: inline-block; }
.zh, .sub { font-family: 'Noto Serif HK', 'PingFang HK', 'Microsoft JhengHei', var(--font-body); color: var(--ink-3); font-weight: 400; }
.muted { color: var(--ink-3); font-size: var(--text-sm); }
.kicker { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: var(--s3); }
.kicker .zh, .kicker { text-transform: none; }
.kicker { text-transform: uppercase; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s6);
  padding: .7rem clamp(1rem, 4vw, 3rem); background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; }
.logo { display: block; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; }
.brand-text { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; }
.brand-sub { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: .2rem; }
.nav { display: flex; gap: var(--s5); margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding: .3rem 0; border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.nav a:hover, .nav a.active { border-bottom-color: var(--accent); color: var(--ink); }
.theme-toggle { border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--ease), background .25s; }
.theme-toggle:hover { transform: rotate(25deg); }
@media (max-width: 720px) { .nav { display: none; } .theme-toggle { margin-left: auto; } }

/* ---------- Layout ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
body { overflow-x: hidden; }
.hero-grid > *, .towers > *, .method-grid > * { min-width: 0; }
.chapter { padding: var(--s12) 0 var(--s10); border-top: 1px solid var(--line); }
.chapter-head { max-width: 760px; margin-bottom: var(--s8); }
.chapter-lede { font-size: var(--text-lg); color: var(--ink-2); margin-top: var(--s5); line-height: 1.55; }

/* ---------- Hero ---------- */
.hero { padding: var(--s10) 0 var(--s6); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.hero-copy { max-width: 780px; }
.hero h1 em { color: var(--accent); font-style: italic; }
.lede { font-size: var(--text-lg); color: var(--ink-2); margin-top: var(--s5); max-width: 62ch; }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.btn { display: inline-block; padding: .7rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: var(--text-sm); border: 1px solid transparent; transition: transform .2s var(--ease), background .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent-ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink); color: var(--bg); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg-elev); }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: var(--bg-elev); padding: var(--s5); display: flex; flex-direction: column; gap: .3rem; }
.stat-n { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-l { font-size: var(--text-xs); color: var(--ink-2); line-height: 1.35; }
.harbour-illustration { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #F4EFE6; box-shadow: var(--shadow); }
.harbour-illustration img { display: block; width: 100%; height: auto; }
.hero-skyline { --harbour-teal: #1B6C70; --harbour-coral: #A84935; margin: var(--s8) 0 0; min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 3px solid var(--harbour-coral); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--bg-elev), var(--bg-sunk)); box-shadow: var(--shadow); }
[data-theme="dark"] .hero-skyline { --harbour-teal: #8FCFC7; --harbour-coral: #F1A18A; }
.skyline-heading { margin-bottom: var(--s4); }
.skyline-heading .kicker { margin: 0 0 .35rem; color: var(--harbour-teal); }
.skyline-heading h3 { margin: 0; max-width: 34ch; font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.12; color: var(--ink); }
.skyline-axis-label { margin: 0 0 .35rem; color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; }
.skyline-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 58%, transparent); scrollbar-color: var(--ink-3) var(--bg-sunk); scrollbar-width: thin; }
.skyline-scroll:focus-visible { outline: 3px solid var(--harbour-teal); outline-offset: 3px; }
.skyline-scroll::-webkit-scrollbar { height: 9px; }
.skyline-scroll::-webkit-scrollbar-track { background: var(--bg-sunk); border-radius: 999px; }
.skyline-scroll::-webkit-scrollbar-thumb { background: var(--ink-3); border: 2px solid var(--bg-sunk); border-radius: 999px; }
.hero-skyline svg { display: block; max-width: none; color: var(--ink-2); }
.skyline-gridline { stroke: color-mix(in srgb, var(--ink) 17%, transparent); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.skyline-baseline { stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.skyline-tick-label { fill: var(--ink-2); font-family: var(--font-body); font-size: 11px; font-variant-numeric: tabular-nums; }
.skyline-shell { fill: color-mix(in srgb, var(--ink) 5%, var(--bg-elev)); stroke: color-mix(in srgb, var(--ink) 46%, var(--line)); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.skyline-facade { fill: color-mix(in srgb, var(--ink) 17%, var(--bg-sunk)); }
.skyline-site-tile { stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.skyline-hit { fill: transparent; pointer-events: all; }
.hero-skyline g[tabindex="0"] { cursor: pointer; }
.hero-skyline g[tabindex="0"]:focus-visible .skyline-hit { stroke: var(--harbour-teal); stroke-width: 3; vector-effect: non-scaling-stroke; }
.skyline-direction { display: flex; align-items: center; gap: .55rem; margin: .4rem .15rem 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; }
.skyline-direction-arrow { position: relative; flex: 1; height: 1px; background: var(--harbour-coral); }
.skyline-direction-arrow::after { position: absolute; top: -4px; right: 0; width: 8px; height: 8px; border-top: 2px solid var(--harbour-coral); border-right: 2px solid var(--harbour-coral); content: ""; transform: rotate(45deg); }
.skyline-legend { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .6rem 1rem; align-items: start; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.skyline-legend h3 { margin: .12rem 0 0; color: var(--ink-2); font-size: var(--text-xs); line-height: 1.35; }
.skyline-legend-items { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin: 0; padding: 0; list-style: none; }
.skyline-legend-item { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); font-size: var(--text-xs); line-height: 1.35; }
.skyline-legend-swatch { width: .8rem; height: .8rem; flex: 0 0 auto; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--swatch-color); box-shadow: 0 0 0 1px var(--bg-elev); }
.hero-skyline figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .65rem 1rem; margin-top: var(--s4); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .skyline-legend { grid-template-columns: 1fr; gap: .45rem; }
  .hero-skyline figcaption { display: block; }
}

/* ---------- Story routes ---------- */
.story-routes { padding: 0 0 var(--s10); scroll-margin-top: 84px; }
.story-routes-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: end; margin-bottom: var(--s5); }
.story-routes-head .kicker { margin-bottom: var(--s2); }
.story-routes-intro { max-width: 48ch; color: var(--ink-2); margin: 0 0 .25rem; }
.story-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.finding-controls { display: flex; justify-content: flex-end; margin: 0 0 var(--s4); }
.finding-controls[hidden] { display: none; }
.finding-select { width: min(100%, 28rem); min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink); font: inherit; }
.story-route-grid.is-enhanced { grid-template-columns: minmax(0, 1fr); }
.story-route-grid.is-enhanced .story-card { max-width: 900px; }
.story-card { --story-accent: var(--teal); min-width: 0; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-top: 4px solid var(--story-accent); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow); }
.story-card--altar { --story-accent: var(--accent); }
.story-card--shore { --story-accent: var(--gold); }
.story-step { color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.story-card h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: var(--s3); }
.story-summary { color: var(--ink-2); min-height: 3.2em; }
.story-stat { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; color: var(--ink); padding-top: var(--s3); border-top: 1px solid var(--line); }
.story-limit { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.45; }
.story-source { margin: auto 0 var(--s4); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.story-source a { color: var(--ink-2); }
.story-card-link { min-height: 44px; align-self: flex-start; display: inline-flex; align-items: center; color: var(--accent-ink); font-weight: 700; text-underline-offset: 4px; }
.story-card-link:focus-visible, .story-source a:focus-visible, .hero-actions .btn:focus-visible, .evidence-sources a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.evidence-note { margin: 0 0 var(--s6); padding: var(--s5); background: var(--bg-sunk); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.evidence-note h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.evidence-note p { max-width: 82ch; color: var(--ink-2); margin-bottom: var(--s3); }
.evidence-sources { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--text-xs); }
@media (max-width: 900px) { .story-routes-head { grid-template-columns: 1fr; gap: var(--s3); } .story-route-grid { grid-template-columns: 1fr; } .story-summary { min-height: 0; } }

/* ---------- Map ---------- */
.map-block { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow); }
.map { height: 560px; width: 100%; }
.map-tools { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); border-radius: 999px; padding: .28rem .7rem .28rem .5rem; font-size: var(--text-xs); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: all .15s; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
.chip[aria-pressed="false"] { opacity: .45; }
.chip:hover { border-color: var(--ink-3); }
.tool-row { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-2); }
.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.switch input { accent-color: var(--accent); width: 16px; height: 16px; }
.map-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: var(--text-xs); }
.legend { position: absolute; left: var(--s4); bottom: var(--s6); background: color-mix(in srgb, var(--bg-elev) 90%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .7rem; font-size: var(--text-xs); display: flex; flex-direction: column; gap: .25rem; backdrop-filter: blur(6px); max-width: 220px; }
.legend-row { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); }
.legend-row i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--c); }
.maplibregl-popup-content { font-family: var(--font-body); background: var(--bg-elev); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem .9rem; font-size: var(--text-sm); line-height: 1.4; max-width: 280px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg-elev); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg-elev); }
.maplibregl-popup-close-button { color: var(--ink-3); font-size: 1.2rem; padding: 0 .4rem; }
.pop-name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; margin-bottom: .2rem; }
.pop-tag { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; color: #fff; background: var(--c); font-weight: 600; margin-right: .3rem; }
.pop-h { color: var(--gold); font-weight: 600; }
.maplibregl-ctrl-attrib { font-size: 10px; }
@media (max-width: 720px) { .map { height: 420px; } .legend { display: none; } }
.persistent-map-legend { display: block; position: static; inset: auto; width: 100%; max-width: none; padding: var(--s4) var(--s5); background: var(--bg-elev); border: 0; border-top: 1px solid var(--line); border-radius: 0; backdrop-filter: none; font-size: var(--text-sm); }
.map-legend-title { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; letter-spacing: 0; margin: 0 0 var(--s3); }
.map-legend-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s5); align-items: start; }
.map-legend-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .35rem .75rem; min-width: 0; }
.map-legend-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
.map-legend-group { min-width: 0; }
.map-legend-group-title { margin: 0 0 var(--s2); color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; }
.map-legend-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .35rem .75rem; }
.persistent-map-legend .legend-row { min-width: 0; align-items: flex-start; gap: .45rem; font-size: var(--text-sm); line-height: 1.35; }
.persistent-map-legend .legend-row i { flex: 0 0 12px; width: 12px; height: 12px; margin-top: .18em; }
.persistent-map-legend .legend-row i.map-legend-outline { background: transparent !important; border: 2px solid var(--gold); }
.map-legend-line { display: inline-block; flex: 0 0 22px; width: 22px; height: 0; margin-top: .62em; border-top: 3px solid var(--c); }
.map-legend-hollow { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; margin-top: .18em; border: 2px solid #9a9a92; border-radius: 50%; background: transparent; }
.map-legend-halo { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; margin: .12em .05rem 0 0; border: 1px solid rgba(200,88,58,.65); border-radius: 50%; background: rgba(200,88,58,.18); box-shadow: 0 0 0 3px rgba(200,88,58,.12); }
.map-legend-note { margin: 0 0 var(--s2); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.map-legend-note:last-child { margin-bottom: 0; }
.map-legend-note a { text-underline-offset: 2px; }
.map-legend-note a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 720px) { .map-legend-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .persistent-map-legend { padding: var(--s4); } .map-legend-keys { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .map-legend-groups { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Viz ---------- */
.viz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.viz { margin: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow); min-width: 0; position: relative; }
.viz figcaption { margin-bottom: var(--s4); line-height: 1.35; }
.viz figcaption strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }
.viz svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.viz svg text { fill: var(--ink-2); font-size: 12.5px; }
.viz .axis path, .viz .axis line { stroke: var(--line); }
.eco-grid { grid-template-columns: 1.15fr 1fr; }
.viz-sunburst { display: flex; flex-direction: column; }
.sunburst-label { text-align: center; font-family: var(--font-display); font-size: var(--text-base); color: var(--ink-2); margin-top: var(--s2); min-height: 1.6em; }
@media (max-width: 900px) { .viz-grid, .eco-grid { grid-template-columns: 1fr; } }

.tooltip { position: fixed; z-index: 100; pointer-events: none; background: var(--ink); color: var(--bg); padding: .5rem .7rem; border-radius: var(--radius); font-size: var(--text-xs); line-height: 1.4; max-width: 260px; box-shadow: var(--shadow); }
.tooltip b { font-weight: 700; }
[data-theme="dark"] .tooltip { background: #f1ebe0; color: #1c1a17; }

.legend-inline { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--text-xs); color: var(--ink-2); margin-top: var(--s3); }
.legend-inline span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-inline i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.band-0 { fill: #c9bfa8; background: #c9bfa8; } .band-1 { fill: #9fb6a3; background: #9fb6a3; } .band-2 { fill: #5f9d9a; background: #5f9d9a; } .band-3 { fill: #3a6d8c; background: #3a6d8c; } .band-4 { fill: #2b3f6b; background: #2b3f6b; }
[data-theme="dark"] .band-0 { fill: #8f8570; background: #8f8570; } [data-theme="dark"] .band-1 { fill: #8fbf9f; background: #8fbf9f; } [data-theme="dark"] .band-2 { fill: #4fc1b5; background: #4fc1b5; } [data-theme="dark"] .band-3 { fill: #6aa6ee; background: #6aa6ee; } [data-theme="dark"] .band-4 { fill: #c1a5ff; background: #c1a5ff; }

/* ---------- Towers ---------- */
.towers { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s6); margin-top: var(--s8); align-items: start; }
.towers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.tower { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); cursor: pointer; text-align: left; color: var(--ink); font: inherit; transition: border-color .2s, transform .2s var(--ease); display: flex; flex-direction: column; gap: .4rem; }
.tower:hover { border-color: var(--accent); transform: translateY(-2px); }
.tower svg { width: 100%; height: 120px; display: block; }
.tower-name { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; }
.tower-sub { font-size: .7rem; color: var(--ink-3); }
@media (max-width: 900px) { .towers { grid-template-columns: 1fr; } }

/* ---------- Heritage panel ---------- */
.h-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.h-big { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.h-lbl { font-size: var(--text-xs); color: var(--ink-3); }
.h-bars { margin-top: var(--s4); display: flex; flex-direction: column; gap: .35rem; }
.h-bar { display: grid; grid-template-columns: 150px 1fr 40px; gap: .6rem; align-items: center; font-size: var(--text-xs); }
.h-bar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.denom-list { margin-top: var(--s4); }
.denom-list .h-bar { grid-template-columns: 200px 1fr 40px; }
.denom-list .h-bar > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; font-size: 12.5px; }
@media (max-width: 720px) { .denom-list .h-bar, .h-bar { grid-template-columns: 120px 1fr 36px; } }
.h-bar .bar { height: 10px; background: var(--bg-sunk); border-radius: 5px; overflow: hidden; }
.h-bar .bar i { display: block; height: 100%; background: var(--gold); }
.h-bar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.h-list { margin: var(--s4) 0 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; border-top: 1px solid var(--line); font-size: var(--text-xs); }
.h-list li { padding: .4rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .5rem; align-items: baseline; }
.h-list .g { flex: none; width: 118px; color: var(--gold); font-weight: 600; }
.h-list a { color: var(--ink); text-decoration: none; }
.h-list a:hover { color: var(--accent); }

/* ---------- Temples ---------- */
.h-row.three { grid-template-columns: 1fr 1fr 1fr; }
.pair-bars { display: flex; flex-direction: column; gap: .3rem; margin-top: var(--s3); }
.pair-row { display: grid; grid-template-columns: 150px 1fr; gap: .6rem; align-items: center; font-size: var(--text-xs); }
.pair-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-row .bars { display: flex; flex-direction: column; gap: 2px; }
.pair-row .bar { display: flex; align-items: center; gap: .4rem; height: 9px; }
.pair-row .bar i { display: block; height: 100%; border-radius: 4px; min-width: 1px; }
.pair-row .bar b { font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1; }
@media (max-width: 720px) { .h-row.three { grid-template-columns: 1fr 1fr; } .pair-row { grid-template-columns: 110px 1fr; } }

/* ---------- Trails ---------- */
.trail-tabs { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.trail-tab { border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-2); border-radius: var(--radius); padding: .7rem 1rem; cursor: pointer; font: inherit; text-align: left; display: flex; flex-direction: column; gap: .15rem; min-width: 220px; transition: all .2s; border-left: 4px solid var(--c); }
.trail-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.trail-tab .t { font-family: var(--font-display); font-size: var(--text-lg); color: inherit; }
.trail-tab .s { font-size: var(--text-xs); opacity: .75; }
.trail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.trail-layout > * { min-width: 0; }
.cite li, .stop figcaption { overflow-wrap: anywhere; }
.trail-map-wrap { position: sticky; top: 80px; }
.trail-map { height: min(72vh, 640px); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.trail-meta { margin-top: var(--s3); font-size: var(--text-sm); color: var(--ink-2); display: flex; gap: var(--s4); flex-wrap: wrap; }
.trail-meta b { color: var(--ink); }
.trail-intro { font-size: var(--text-lg); color: var(--ink-2); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.stop { padding: var(--s5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s3); opacity: .55; transition: opacity .35s var(--ease); scroll-margin-top: 90px; }
.stop.active { opacity: 1; }
.stop-head { display: flex; gap: var(--s3); align-items: baseline; }
.stop-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--text-xs); color: #fff; background: var(--c); font-variant-numeric: tabular-nums; }
.stop h3 { font-size: var(--text-xl); }
.stop-tags { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .72rem; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; color: var(--ink-2); }
.tag.h { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.stop figure { margin: 0; }
.stop img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius); display: block; background: var(--bg-sunk); }
.stop figcaption { font-size: .72rem; color: var(--ink-3); margin-top: .35rem; line-height: 1.4; }
.stop p { margin: 0; }
.correction { font-size: var(--text-xs); color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 3px solid var(--accent); padding: .5rem .7rem; border-radius: 0 var(--radius) var(--radius) 0; }
.cite { font-size: var(--text-xs); color: var(--ink-3); margin: 0; padding-left: 1rem; }
.cite li { margin-bottom: .2rem; }
.marker-num { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 700 11px var(--font-body); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; transition: transform .2s var(--ease); }
.marker-num.active { transform: scale(1.35); }
@media (max-width: 900px) {
  .trail-layout { grid-template-columns: 1fr; }
  .trail-map-wrap { position: sticky; top: 60px; z-index: 5; }
  .trail-map { height: 38vh; }
  .trail-meta { display: none; }
  .stop img { height: 220px; }
  .stop { scroll-margin-top: calc(38vh + 80px); }
}

/* ---------- Method ---------- */
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.method-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.method-card h3 { font-size: var(--text-lg); margin-bottom: var(--s3); }
.method-card p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; }
.sources { margin-top: var(--s8); max-width: 820px; }
.sources ul { padding-left: 1.1rem; font-size: var(--text-sm); color: var(--ink-2); }
.sources li { margin-bottom: .6rem; }
#method #sourceList a { overflow-wrap: anywhere; }
@media (max-width: 720px) { .method-grid { grid-template-columns: 1fr; } }

.footer { border-top: 1px solid var(--line); padding: var(--s6) clamp(1rem, 4vw, 3rem); font-size: var(--text-xs); color: var(--ink-3); max-width: var(--maxw); margin: 0 auto; }

/* reveal */
.reveal { opacity: 0; transition: opacity .8s var(--ease); }
.reveal.in { opacity: 1; }

/* ---------- chapters IV–IX additions ---------- */
.nav { gap: var(--s4); }
.nav a { font-size: var(--text-xs); white-space: nowrap; }
@media (max-width: 1180px) { .nav { gap: .7rem; } }
@media (max-width: 960px) { .nav { display: none; } .theme-toggle { margin-left: auto; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-search { position: relative; display: block; width: 100%; margin-top: var(--s2); }
.site-search input { width: 100%; max-width: 440px; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.site-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-results { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 100%; max-width: 440px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.search-results button { display: flex; gap: .6rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .55rem .8rem; cursor: pointer; color: var(--ink); font: inherit; font-size: var(--text-sm); }
.search-results button:last-child { border-bottom: 0; }
.search-results button:hover, .search-results button:focus { background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); }
.search-results i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.search-results span { display: flex; flex-direction: column; min-width: 0; }
.search-results small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-actions { flex-wrap: wrap; }
.fig-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-wrap: wrap; background: var(--bg); }
.seg-btn { border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--text-xs); font-weight: 600; padding: .3rem .75rem; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg-btn .zh { color: inherit; opacity: .7; }
.dl-btn { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); border-radius: 999px; font: inherit; font-size: var(--text-xs); font-weight: 600; padding: .3rem .7rem; cursor: pointer; margin-left: auto; }
.dl-btn::before { content: '↓ '; }
.dl-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.tool-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.viz-wide { grid-column: 1 / -1; }
.deity-grid, .deity-basic { grid-template-columns: 1fr 1fr; }
.net-wrap svg { max-height: 640px; }
.net-wrap .dn-l { pointer-events: none; }
.map-small { height: 420px; }
.map-lazy { background: var(--bg); }
.bld-list { display: flex; flex-direction: column; gap: .55rem; max-height: 420px; overflow: auto; padding-right: .3rem; }
.bld-row { display: grid; grid-template-columns: 170px 1fr; gap: .6rem; align-items: start; font-size: var(--text-sm); border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.bld-name { display: flex; flex-direction: column; } .bld-name small { color: var(--ink-3); }
.bld-dots { display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.bld-dot { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); color: var(--ink-2); }
.bld-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
@media (max-width: 720px) { .bld-row { grid-template-columns: 1fr; } }
.valley-label { font-family: var(--font-display); font-size: 13px; color: var(--ink); background: color-mix(in srgb, var(--bg-elev) 82%, transparent); padding: .1rem .4rem; border-radius: 4px; pointer-events: none; white-space: nowrap; letter-spacing: .02em; }
.stack-label { font-size: 11px; font-weight: 700; color: #fff; background: #c8583a; border-radius: 999px; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 .3rem; pointer-events: none; box-shadow: 0 0 0 2px var(--bg-elev); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--s6); }
.stat-row .stat-n { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--ink); }
.stat-row .stat-l { font-size: var(--text-sm); color: var(--ink-2); }
.stat-link { justify-content: center; align-items: flex-start; grid-column: 1 / -1; }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.muted { color: var(--ink-3); }

/* ===== language switch ===== */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-left: var(--s3); background: var(--bg); }
.lang-switch button { border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--text-xs); font-weight: 700; padding: .32rem .62rem; cursor: pointer; min-width: 2.2rem; }
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
:root[lang^="zh"] body, :root[lang="yue"] body { --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Satoshi", system-ui, sans-serif; }
.zh { display: none; } /* secondary-language names are never mixed into the reading surface */
:root[lang^="zh"] h1, :root[lang="yue"] h1, :root[lang^="zh"] h2, :root[lang="yue"] h2 { letter-spacing: 0; }
:root[lang^="zh"] em, :root[lang="yue"] em { font-style: normal; }

/* ===== 3D chapter ===== */
.map-3d { position: relative; background: #0b1420; min-height: 560px; }
.map-3d .cesium-viewer { position: absolute; inset: 0; }
.map-3d .cesium-widget-credits, .map-3d .cesium-viewer-bottom { font-size: 10px; }
.map-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); text-align: center; padding: var(--s6); color: #e8e2d6; background: radial-gradient(ellipse at 50% 60%, #1a2a3f, #0b1420 70%); z-index: 3; }
.map-gate p { max-width: 46ch; margin: 0; line-height: 1.5; }
.map-gate .muted { color: #9aa4b2; font-size: var(--text-xs); }
.map-gate.loading::after { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #d9a441; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-small { padding: .42rem .9rem; font-size: var(--text-xs); background: var(--ink); color: var(--bg); }
.btn-small:disabled { opacity: .45; cursor: default; }
.sel select { font: inherit; font-size: var(--text-xs); padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); max-width: 260px; }
.pop3d { position: absolute; z-index: 4; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; font-size: var(--text-xs); max-width: 280px; box-shadow: var(--shadow); pointer-events: auto; }
.pop3d button { position: absolute; top: 2px; right: 4px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 14px; }
.stat-row .stat-mini { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; background: var(--bg); font-size: var(--text-sm); }
.stat-row .stat-mini b { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--ink); }

/* ===== Gantt, matrix, glyphs ===== */
.gantt-wrap, .glyph-wrap, .section-wrap { width: 100%; overflow-x: auto; }
.gantt-wrap svg text, .glyph-wrap svg text { font-size: 11px; }
.jiao-access { margin-top: var(--s3); }
.jiao-access details > summary { min-height: 44px; padding: .35rem .2rem; color: var(--accent-ink); cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.jiao-access details > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.jiao-access table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: var(--s3); font-size: var(--text-xs); }
.jiao-access th, .jiao-access td { text-align: left; vertical-align: top; padding: .45rem .4rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.jiao-access th { width: 36%; color: var(--ink-2); font-weight: 700; }
.jiao-access td { color: var(--ink-2); }
.jiao-access-note { display: block; margin-top: .3rem; color: var(--ink-3); }
.year-input { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-xs); color: var(--ink-2); font-weight: 600; }
.year-input input { width: 5.2em; font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; }
.glyph-cell { cursor: pointer; }
.glyph-cell:hover rect.bgc { stroke: var(--ink-3); }
.matrix-cell { cursor: pointer; }

/* ===== street sections ===== */
.section-fig { margin-top: var(--s5); }
.section-wrap svg { min-width: 720px; }
.section-wrap .bld { stroke: var(--bg-elev); stroke-width: .6; }
.section-wrap .bld:hover { stroke: var(--ink); stroke-width: 1.2; }
.small { font-size: var(--text-xs); }

/* ===== objects ===== */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); margin-bottom: var(--s6); }
.obj-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.obj-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg); border-bottom: 1px solid var(--line); }
.obj-media img, .obj-media model-viewer, .obj-media .pnlm-container { width: 100%; height: 100%; display: block; object-fit: cover; }
.obj-media model-viewer { --poster-color: transparent; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 100%); }
.obj-media .media-tag { position: absolute; top: .5rem; left: .5rem; z-index: 2; background: rgba(20,20,20,.75); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; }
.obj-media .media-nav { position: absolute; bottom: .5rem; left: .5rem; z-index: 2; display: flex; gap: .3rem; }
.obj-media .media-nav button { border: 1px solid rgba(255,255,255,.4); background: rgba(20,20,20,.6); color: #fff; font: inherit; font-size: 10.5px; padding: .18rem .5rem; border-radius: 999px; cursor: pointer; }
.obj-media .media-nav button[aria-pressed="true"] { background: #fff; color: #111; }
.obj-body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: .55rem; font-size: var(--text-sm); }
.obj-body h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.25; }
.obj-body .obj-zh { color: var(--ink-2); font-size: var(--text-sm); }
.obj-kv { display: grid; grid-template-columns: 7.5em 1fr; gap: .2rem .6rem; font-size: var(--text-xs); color: var(--ink-2); }
.obj-kv dt { font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; padding-top: .15em; }
.obj-kv dd { margin: 0; }
.obj-moves { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: .3rem; font-size: var(--text-xs); }
.obj-moves li { position: relative; }
.obj-moves li::before { content: ""; position: absolute; left: -1.25rem; top: .35em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.obj-moves b { color: var(--ink); font-variant-numeric: tabular-nums; }
.obj-body .cite { font-size: 11px; }
.obj-body .status { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.schema-view table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-xs); }
.schema-view th, .schema-view td { text-align: left; vertical-align: top; padding: .35rem .4rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.schema-view th { color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.schema-view code { font-size: 11px; background: var(--bg); padding: 0 .3em; border-radius: 4px; overflow-wrap: anywhere; }
.schema-view .req { color: var(--accent); font-weight: 700; }
.obj-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; font-size: var(--text-xs); }
.obj-form label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.obj-form label.wide { grid-column: 1 / -1; }
.obj-form input, .obj-form select, .obj-form textarea { font: inherit; font-size: var(--text-sm); font-weight: 400; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); width: 100%; }
.obj-form textarea { min-height: 5.5em; resize: vertical; }
.obj-form input:invalid.touched, .obj-form textarea:invalid.touched { border-color: var(--accent); }
.obj-form .check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 500; }
.obj-form .check input { width: 16px; height: 16px; accent-color: var(--accent); }
.obj-form .form-actions { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.obj-form .form-msg { color: var(--accent-ink); font-weight: 600; }
.obj-form fieldset { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: var(--radius); padding: .6rem .8rem; display: grid; gap: .5rem; }
.obj-form legend { font-weight: 700; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 0 .3rem; }
.gen-out { margin-top: var(--s4); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); font-size: var(--text-sm); }
.gen-out .gen-trail { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; background: var(--bg); }
.gen-out .gen-trail b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }
.gen-out ol { margin: .4rem 0 0; padding-left: 1.2rem; font-size: var(--text-xs); }
@media (max-width: 720px) { .obj-form { grid-template-columns: 1fr; } .lang-switch { margin-left: auto; } .map-3d { min-height: 420px; } }

/* ===== third build: header density, media cards ===== */
.topbar { gap: var(--s4); }
.brand-text { white-space: nowrap; }
.nav { gap: .55rem; }
.nav a { font-size: 11.5px; letter-spacing: -.01em; }
@media (max-width: 1400px) { .nav a { font-size: 11px; } .nav { gap: .45rem; } }
@media (max-width: 1240px) { .nav a span.t { display: none; } }
.lang-switch { margin-left: 0; flex: none; }
.lang-switch button { font-size: 11px; padding: .3rem .5rem; min-width: 2rem; }
.theme-toggle { flex: none; }
.obj-media .media-nav { top: .5rem; right: .5rem; bottom: auto; left: auto; }
.obj-media figcaption { z-index: 2; }
.obj-media .pnlm-container { position: absolute !important; inset: 0; }

[hidden] { display: none !important; }

#legend3d { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: min(680px, 70%); }
#legend3d span { display: inline-flex; align-items: center; gap: 6px; }
.map-3d .cesium-credit-logoContainer { display: none !important; }
#legend3d i { display: inline-block; width: 10px; height: 10px; flex: none; }
#legend3d .muted { color: var(--ink-3); font-size: 12px; }

.gl { display: none !important; }

/* ---------- mobile chapter menu, grid fixes ---------- */
@media (max-width: 960px) {
  .theme-toggle { margin-left: 0; }
  .deity-grid, .deity-basic { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar { gap: .35rem; padding-inline: .6rem; }
  .brand-text { font-size: 1rem; }
  .brand-sub { display: none; }
  .lang-switch { margin-left: .1rem; flex: 0 0 auto; }
  .lang-switch button { padding: .25rem .32rem; min-width: 1.65rem; }
  .theme-toggle { width: 32px; height: 32px; flex: 0 0 32px; margin-left: 0; }
}
@media (max-width: 400px) {
  .topbar { gap: .3rem; padding-inline: .45rem; }
  .brand { gap: .3rem; min-width: 0; }
  .brand-text { font-size: .85rem; }
  .lang-switch button { padding: .25rem .25rem; min-width: 1.55rem; }
}
@media (max-width: 380px) {
}


/* ---------- Issue #16 visitor-first front door ---------- */
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.chapter-head > .kicker { display: none; }
.hero-data { min-width: 0; }
.hero-kicker { max-width: 46ch; font-size: var(--text-sm); letter-spacing: .025em; line-height: 1.45; text-transform: none; }
.hero-source-note { margin: var(--s3) 0 0; font-size: var(--text-sm); }
.hero-source-note a { font-weight: 600; }

.nav-more { position: relative; display: flex; align-items: center; }
.nav-more summary { cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; padding: .3rem 0; border-bottom: 1.5px solid transparent; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: '⌄'; margin-left: .35rem; font-size: .8em; }
.nav-more[open] summary, .nav-more summary:hover { border-bottom-color: var(--accent); color: var(--ink); }
.more-menu { position: absolute; z-index: 60; top: calc(100% + .6rem); right: 0; min-width: 11rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow); }
.more-menu a { display: block; padding: .55rem .7rem; border-radius: 4px; color: var(--ink); text-decoration: none; }
.more-menu a:hover { background: var(--bg-sunk); text-decoration: underline; }

.site-doors { padding: var(--s8) 0 var(--s4); border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.site-doors-head { max-width: 760px; margin-bottom: var(--s6); }
.site-doors-head h2 { margin-bottom: var(--s3); }
.door-lede { max-width: 68ch; margin: 0; color: var(--ink-2); font-size: var(--text-lg); }
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.door-card { display: flex; min-width: 0; min-height: 236px; flex-direction: column; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); }
.door-title-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.door-title-link:hover { color: var(--accent-ink); }
.door-content { scroll-margin-top: 84px; margin-top: var(--s8); }
.door-content-head { margin-bottom: var(--s3); }
.door-content-links { margin-top: var(--s4); }
.door-card h3 { margin-bottom: var(--s3); font-size: clamp(1.2rem, 1.55vw, 1.55rem); }
.door-card > p { margin-bottom: var(--s4); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.door-links { display: grid; gap: .2rem; margin-top: auto; }
.door-link { display: flex; min-height: 44px; align-items: center; gap: .3rem; font-size: var(--text-sm); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.door-link::after { content: '→'; flex: none; font-size: 1.05em; }
.door-link--secondary { min-height: 40px; padding-top: .35rem; border-top: 1px solid var(--line); font-size: var(--text-xs); font-weight: 600; }
.living-note { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: var(--s5); margin-top: var(--s6); padding: var(--s5); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-lg); background: var(--bg-sunk); }
.living-status { display: inline-flex; width: max-content; margin: .2rem 0 0; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700; }
.living-note h2 { margin-bottom: var(--s2); font-size: var(--text-xl); }
.living-note p:last-child { max-width: 82ch; margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.story-parent { margin: .25rem 0 var(--s2); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
.about-contact { max-width: 78ch; margin: calc(var(--s8) * -1) 0 var(--s8); color: var(--ink-2); }
.about-contact a { font-weight: 600; }

.home-evidence { margin-top: var(--s4); padding: var(--s6) 0 var(--s8); border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.home-evidence-title { margin: 0 0 var(--s4); font-size: var(--text-xl); }
.home-evidence .hero-data { max-width: 860px; }
.home-evidence .hero-stats { max-width: 820px; }
.home-evidence .hero-source-note { margin-top: var(--s3); }

@media (max-width: 1120px) {
  .nav { display: none; }
}
@media (max-width: 980px) { .door-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door-card { min-height: 210px; padding: var(--s4); }
  .living-note { grid-template-columns: 1fr; gap: var(--s3); }
  .about-contact { margin: calc(var(--s6) * -1) 0 var(--s6); }
}
@media (max-width: 520px) {
  .door-grid { grid-template-columns: 1fr; }
  .door-card { min-height: 0; }
  .site-doors { padding-top: var(--s6); }
  .living-note { padding: var(--s4); }
}
@media (max-width: 400px) {
  .topbar { gap: .25rem; padding-inline: .35rem; }
  .brand { gap: .25rem; }
  .logo { width: 30px; height: 30px; border-radius: 8px; }
  .brand-text { font-size: .8rem; }
  .lang-switch button { min-width: 1.45rem; padding-inline: .2rem; }
  .theme-toggle { width: 30px; height: 30px; flex-basis: 30px; }
}


.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow); font-weight: 700; text-decoration: none; transition: top .2s var(--ease); }
.skip-link:focus { top: .6rem; }


/* Keyboard and touch guidance for the interactive homepage skyline. */
.hero-skyline g[tabindex="0"] { cursor: pointer; }
.hero-skyline g[tabindex="0"]:focus-visible .skyline-hit { stroke: var(--harbour-teal); stroke-width: 3; vector-effect: non-scaling-stroke; }


/* owner revision #19: verified grouping semantics */
.hero { padding: var(--s6) 0 var(--s4); }
.hero-grid { display: block; }
.hero-copy { max-width: 900px; }
.hero .lede { max-width: 88ch; font-size: clamp(1.05rem, 1.5vw, var(--text-lg)); line-height: 1.62; }
.hero-skyline { margin-top: var(--s4); }
.hero-paths { margin-top: var(--s5); }
.harbour-illustration--secondary { width: min(100%, 940px); margin: var(--s6) auto var(--s8); }
.skyline-group-outline { fill: color-mix(in srgb, var(--ink) 5%, var(--bg-elev)); stroke: color-mix(in srgb, var(--ink) 46%, var(--line)); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.skyline-group-accent { fill: color-mix(in srgb, var(--ink) 17%, var(--bg-sunk)); }
.skyline-ambiguous-rowline { stroke: color-mix(in srgb, var(--ink) 44%, var(--line)); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.skyline-ambiguous-label { fill: var(--accent-ink); font-family: var(--font-body); font-size: 12px; font-weight: 800; }
.skyline-zero-mark { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1.5 1.2; vector-effect: non-scaling-stroke; }
.hero-skyline figcaption.skyline-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .65rem 1rem; }
.skyline-caption > span, .skyline-caption > p { grid-column: 1 / -1; }
.skyline-source-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem 1rem; min-width: 0; font-size: var(--text-xs); }
.skyline-source-links a { overflow-wrap: anywhere; }
.skyline-source { color: var(--ink-3); }
html[data-lang="zh"] .english-only, html[data-lang="yue"] .english-only { display: none !important; }
@media (max-width: 560px) {
  .hero-skyline figcaption.skyline-caption { display: grid; grid-template-columns: 1fr; }
  .harbour-illustration--secondary { margin-top: var(--s5); }
}


/* owner revision #19: group cards */
.profile-group-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); cursor: pointer; text-align: left; color: var(--ink); font: inherit; transition: border-color .2s, transform .2s var(--ease); display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.profile-group-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.profile-group-card:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.profile-group-card svg { width: 100%; height: 142px; display: block; }
.profile-group-name { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.profile-group-sub { font-size: .7rem; color: var(--ink-3); line-height: 1.45; }

/* ---------- Explore menu (narrow screens) ---------- */
.nav-explore { display: none; position: relative; margin-left: auto; }
@media (max-width: 1120px) { .nav-explore { display: block; } }
.nav-explore-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; min-height: 36px; }
.nav-explore-btn::after { content: '⌄'; font-size: .85em; line-height: 1; }
.nav-explore-btn[aria-expanded="true"] { border-color: var(--accent); }
.nav-explore-btn[aria-expanded="true"]::after { content: '⌃'; }
.nav-explore-menu { position: absolute; z-index: 80; top: calc(100% + .55rem); right: 0; min-width: 15rem; padding: .4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); box-shadow: 0 10px 30px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.nav-explore-menu[hidden] { display: none; }
.nav-explore-menu a { display: block; padding: .75rem .85rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: var(--text-base); }
.nav-explore-menu a:hover, .nav-explore-menu a:focus-visible { background: var(--bg-sunk); text-decoration: underline; }
@media (max-width: 720px) {
  .nav-explore { position: static; margin-left: 0; flex: 0 0 auto; }
  .nav-explore-menu { position: fixed; top: 60px; left: .6rem; right: .6rem; min-width: 0; max-height: calc(100vh - 80px); overflow-y: auto; }
}


/* Data portrait now sits in the Vertical City chapter */
#vertical > .hero-skyline { margin: var(--s4) 0 var(--s6); }

/* ============ top navigation: text links on wide screens, Explore menu only on small screens ============ */
.nav { display: flex; gap: .85rem; margin-left: auto; align-items: center; flex-wrap: nowrap; min-width: 0; }
.nav a { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.nav-explore { display: none; }
@media (max-width: 1240px) { .nav { gap: .6rem; } .nav a { font-size: 11.5px; } }
@media (max-width: 1060px) { .nav { gap: .5rem; } .nav a { font-size: 11px; } }
@media (max-width: 1200px) {
  .nav { display: none; }
  .nav-explore { display: block; margin-left: auto; position: relative; }
}
@media (min-width: 1201px) { .nav-explore { display: none !important; } .nav { display: flex !important; } }

/* ============ door cards with a picture ============ */
.door-media { display: block; margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; aspect-ratio: 8 / 5; background: var(--bg-sunk); border-bottom: 1px solid var(--line); }
.door-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.door-card:hover .door-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .door-card:hover .door-media img { transform: none; } }
@media (max-width: 720px) { .door-media { margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3); } }

/* ============ atlas controls ============ */
.map--tall { height: min(78vh, 720px); min-height: 480px; }
.atlas-tools { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); border-bottom: 1px solid var(--line); }
.atlas-row { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(130px, 1fr)); gap: var(--s3); align-items: end; }
.atlas-row--temples { grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, 1fr)); }
.atlas-field { display: flex; flex-direction: column; gap: .25rem; position: relative; min-width: 0; font-size: var(--text-xs); color: var(--ink-3); font-weight: 600; }
.atlas-field input, .atlas-field select { width: 100%; font: inherit; font-size: var(--text-sm); font-weight: 400; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; min-height: 38px; }
.atlas-field input:focus-visible, .atlas-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.atlas-field .search-results { top: calc(100% + 2px); max-width: none; }
.atlas-size { display: inline-flex; align-items: center; gap: .5rem; }
.atlas-size input { accent-color: var(--accent); width: 96px; }
.btn-mini { font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .38rem .85rem; cursor: pointer; }
.btn-mini:hover { border-color: var(--ink-3); }
.btn-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .atlas-row, .atlas-row--temples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-field--search { grid-column: 1 / -1; }
  .atlas-tools { padding: var(--s3); }
  .map--tall { min-height: 420px; height: 70vh; }
}

/* ============ Guanyin register plate ============ */
.gy { --gy-bg: #f3f0e7; --gy-ink: #1d3a31; --gy-text: #2b2f2b; --gy-mute: #67665c; --gy-rule: #c9c4b3; --gy-red: #a64b3a; --gy-teal: #3d7d71; --gy-coral: #b94a37;
  background: var(--gy-bg); color: var(--gy-text); border: 1px solid #d8d3c3; border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2.4rem); margin: 0 0 var(--s6); }
.gy a { color: var(--gy-ink); }
.gy p { margin: 0; }
.gy-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gy-mute); line-height: 1.5; }
.gy-mono--red { color: var(--gy-red); }
.gy-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; padding-bottom: var(--s5); border-bottom: 1px solid var(--gy-rule); }
.gy-title { font-family: 'Bodoni Moda', 'Noto Serif HK', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.01em; color: var(--gy-ink); margin: 0 0 var(--s3); max-width: 14ch; }
.gy-sub { font-size: var(--text-base); color: var(--gy-text); }
.gy-stats { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); }
.gy-stat { display: flex; flex-direction: column; gap: .35rem; }
.gy-stat--two { border-left: 1px solid var(--gy-rule); padding-left: var(--s5); justify-content: flex-end; }
.gy-big { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: clamp(3.6rem, 8vw, 6.4rem); line-height: .95; color: var(--gy-red); font-variant-numeric: lining-nums; }
.gy-mid { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; color: var(--gy-ink); }
.gy-statlabel { font-size: var(--text-sm); color: var(--gy-ink); }
.gy-fieldhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2) var(--s5); align-items: baseline; padding: var(--s4) 0 var(--s3); }
.gy-fieldnote { display: flex; flex-direction: column; gap: .1rem; font-size: var(--text-sm); }
.gy-legend { display: inline-flex; align-items: center; gap: .5rem; }
.gy-legend i { display: inline-block; width: 2.2rem; height: 3px; background: var(--gy-coral); border-radius: 2px; }
.gy-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 17vw, 260px) minmax(0, 1fr); column-gap: clamp(60px, 8vw, 130px); padding: var(--s3) 0 var(--s5); border-bottom: 1px solid var(--gy-rule); }
.gy .gy-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gy-thread { fill: none; stroke: var(--gy-teal); stroke-linecap: round; opacity: .8; }
.gy-thread--top { stroke: var(--gy-coral); opacity: .92; }
.gy-col, .gy-centre { position: relative; z-index: 1; }
.gy-colhead { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--gy-rule); font-weight: 400; }
.gy-list { list-style: none; margin: 0; padding: 0; }
.gy-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 1.9rem; font-size: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--gy-rule) 55%, transparent); }
.gy-rank { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; color: var(--gy-mute); }
.gy-name { color: var(--gy-text); overflow-wrap: anywhere; }
.gy-count { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gy-ink); }
.gy-row--top .gy-count { color: var(--gy-coral); font-weight: 700; }
.gy-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); align-self: stretch; }
.gy-portrait { display: block; width: auto; height: clamp(150px, 15vw, 235px); max-width: 100%; object-fit: contain; background: transparent; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }
.gy-hub { width: 100%; background: var(--gy-bg); border: 1px solid var(--gy-ink); padding: var(--s3) var(--s3); display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.gy-hub b { font-family: 'Bodoni Moda', 'Noto Serif HK', serif; font-weight: 400; font-size: 1.25rem; color: var(--gy-red); }
.gy-never { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--gy-rule); }
.gy-nevername { font-size: .85rem; }
.gy-base { padding: var(--s4) 0; border-bottom: 1px solid var(--gy-rule); }
.gy-basegrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.gy-basegrid b { display: block; font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; color: var(--gy-ink); font-variant-numeric: lining-nums; }
.gy-basegrid span { display: block; margin-top: .3rem; font-size: .78rem; color: var(--gy-mute); }
.gy-defs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--gy-rule); }
.gy-defs p:last-child { font-size: var(--text-sm); margin-top: .2rem; }
.gy-source { padding-top: var(--s4); text-transform: none; letter-spacing: 0; }
@media (max-width: 920px) {
  .gy-head { grid-template-columns: 1fr; }
  .gy-title { max-width: none; }
  .gy-fieldhead { grid-template-columns: 1fr; }
  .gy-field { grid-template-columns: 1fr; row-gap: var(--s5); }
  .gy .gy-threads { display: none; }
  .gy-centre { order: -1; flex-direction: row; justify-content: center; align-items: center; }
  .gy-portrait { height: 150px; }
  .gy-hub { width: 11rem; }
  .gy-never { grid-template-columns: 1fr; gap: .3rem; }
  .gy-basegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gy-defs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .gy-stats { grid-template-columns: 1fr; } .gy-stat--two { border-left: 0; padding-left: 0; } .gy-centre { flex-direction: column; } }

/* ---- skyline: harbour dusk, hills and towers (2026-10-06) ---- */
.hero-skyline { --sky-top: #cfe0da; --sky-hor: #f6d6b4; --sky-hill: #a9c4bb; --sky-sun: #e9825f; --sky-body: #2c4850; --sky-crown: #2c4850; --sky-win: rgba(255,255,255,.2); --sea-top: #9fc3c0; --sea-bot: #5e9aa0; --sky-ripple: rgba(255,255,255,.55); --sky-tile-stroke: rgba(255,250,240,.8); }
[data-theme="dark"] .hero-skyline { --sky-top: #0f1f26; --sky-hor: #44302d; --sky-hill: #1d3a40; --sky-sun: #b5573d; --sky-body: #5d7f88; --sky-crown: #5d7f88; --sky-win: rgba(8,20,26,.45); --sea-top: #1c3a42; --sea-bot: #0d1d23; --sky-ripple: rgba(255,255,255,.2); --sky-tile-stroke: rgba(10,22,28,.9); }
.sky-stop--top { stop-color: var(--sky-top); } .sky-stop--hor { stop-color: var(--sky-hor); }
.sea-stop--top { stop-color: var(--sea-top); } .sea-stop--bot { stop-color: var(--sea-bot); }
.skyline-hills { fill: var(--sky-hill); opacity: .85; }
.skyline-sun { fill: var(--sky-sun); opacity: .85; }
.skyline-ripple { stroke: var(--sky-ripple); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.skyline-facade-body { fill: var(--sky-body); }
.skyline-facade-win { pointer-events: none; }
.sky-window { fill: var(--sky-win); }
.skyline-crown { fill: var(--sky-crown); }
.skyline-mast { stroke: var(--sky-crown); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.skyline-beacon { fill: var(--harbour-coral); }
.skyline-group-accent { fill: rgba(255,255,255,.14); }
.hero-skyline .skyline-site-tile { stroke: var(--sky-tile-stroke); stroke-width: .9; }
.hero-skyline .skyline-gridline { stroke: color-mix(in srgb, var(--ink) 22%, transparent); }
.hero-skyline .skyline-baseline { stroke: var(--ink); }
.skyline-group:hover .skyline-facade-body, .skyline-group:focus-visible .skyline-facade-body { filter: brightness(1.18); }
@media (prefers-reduced-motion: no-preference) { .skyline-beacon { animation: skyBlink 3.4s ease-in-out infinite; } }
@keyframes skyBlink { 0%, 80%, 100% { opacity: 1; } 90% { opacity: .15; } }