/* Final type and spacing roles shared by the itinerary, albums and reading pages.
   Keep the existing photographic palette and orbital motion; one CJK family avoids
   switching faces halfway through a heading or when the serif subset lacks a glyph. */
:root {
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --serif: var(--sans);
  --space: max(clamp(24px, 4.5vw, 64px), calc((100vw - 1320px) / 2));
  --type-section: clamp(32px, 3.4vw, 48px);
  --type-card: clamp(22px, 2vw, 28px);
  --type-body: 16px;
  --type-meta: 12px;
  --section-gap: clamp(64px, 7vw, 104px);
  font-family: var(--sans);
  line-height: 1.75;
}
body, button, input, select, textarea { font-family: var(--sans); }
h1, h2, h3 { letter-spacing: -.025em; font-weight: 600; }
.serif, .hero-v3 h1 > span { font-family: var(--sans); font-weight: inherit; }
p { letter-spacing: .005em; }
.section, .preparation.section, .memories.section { padding: var(--section-gap) var(--space); }
.section-heading { gap: 32px; margin-bottom: 36px; }
.section-heading h2, .landscapes .gallery-heading h2,
.preparation .section-heading h2, .memories .section-heading h2, .story-copy h2 {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.025em;
  margin: 0;
}
.section-heading > p, .landscapes .gallery-heading > p,
.preparation .section-heading p, .memories .section-heading p {
  font-size: var(--type-body);
  line-height: 1.85;
  max-width: 28em;
  color: var(--muted);
}
.eyebrow, .journey-kicker, .paper-eyebrow { font-size: var(--type-meta); line-height: 1.6; letter-spacing: .06em; }
.journey-kicker { margin-bottom: 20px; }
.brand small { font-size: 8px; letter-spacing: .08em; }
.site-header .desktop-nav { gap: 24px; }
.desktop-nav a, .site-header .menu-button { font-size: 14px; }

/* Opening: the photograph has room, without oversized lines of mixed type. */
.hero-v3 h1 { font-size: clamp(48px, 6.3vw, 88px); line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.hero-v3 h1 > span { margin-left: 0; }
.hero-v3 .hero-cinema { height: clamp(520px, calc(100svh - 160px), 760px); }
.hero-v3 .hero-composition { padding: clamp(32px, 5vw, 72px); padding-bottom: 88px; }
.hero-v3 .hero-introduction > p { font-size: 17px; line-height: 1.85; }
.hero-bottom { margin-inline: calc(var(--space) - 16px); padding-block: 16px; }

/* A repeatable title / caption / control rhythm around the moving photographs. */
.landscapes .gallery-heading { margin-bottom: 24px; }
.landscapes .card-meta { font-size: 12px; letter-spacing: 0; margin-top: 12px; }
.landscapes .landscape-card h3 { font-size: 24px; line-height: 1.45; min-height: 2.9em; margin-top: 6px; align-items: start; }
.landscapes .landscape-card h3 > .arrow-icon { margin-top: .3em; }
.landscapes .card-index, .landscapes .image-kind { font-size: 11px; }
.landscapes .landscape-grid { height: 420px; }
.gallery-caption { min-height: 96px; max-width: 40em; margin-inline: auto; padding-bottom: 20px; }
.gallery-caption > p { font-size: 16px; line-height: 1.8; }
#gallery-gesture, .gallery-play, #gallery-position { font-size: 12px; letter-spacing: 0; }
.gallery-navigation, .album-navigation { padding-top: 16px; }
.album-heading h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.album-total, .album-caption > div, .album-orbit .album-hint { font-size: 12px; color: var(--muted); }
.album-caption { min-height: 96px; }
.album-caption > p { font-size: 17px; line-height: 1.75; }

.geographic-itinerary .preview-content h3 { font-size: var(--type-card); line-height: 1.45; }
.preview-content p { font-size: 16px; line-height: 1.85; }
.geo-coordinate, .geo-current-note, .geo-legend, .geo-point-source { font-size: 12px; line-height: 1.8; }
.geo-selection > div { flex-wrap: wrap; row-gap: 2px; }
.geo-jump, .geo-stop-select, .route-play { font-size: 14px; }

/* Stories share the same reading face and a bounded Chinese text measure. */
.story-interlude { padding: var(--section-gap) var(--space); gap: 8%; }
.story-copy p { max-width: 30em; margin: 24px 0; font-size: 16px; line-height: 1.9; }
.story-paper { max-width: 520px; justify-self: end; }
.paper-caption { font-family: var(--sans); font-size: 16px; }
.place-intro { padding-block: 36px; }
.place-intro h1 { max-width: 15em; font-size: clamp(36px, 4.6vw, 64px); font-weight: 600; line-height: 1.35; margin: 16px 0 24px; }
.place-intro-bottom { align-items: start; gap: 32px; }
.place-intro-bottom > p { font-size: 17px; max-width: 36em; line-height: 1.9; }
.place-tags { gap: 8px; flex-wrap: wrap; }
.place-cover .photo-open picture { height: clamp(280px, 36vw, 480px); }
.place-cover figcaption { font-size: 12px; line-height: 1.8; }
.place-reading { grid-template-columns: minmax(160px, .5fr) minmax(0, 760px); gap: clamp(32px, 5vw, 72px); padding-block: 64px; }
.reading-aside h2 { font-size: 28px; font-weight: 600; }
.reading-main { min-width: 0; }
.detail-tabs { gap: 24px; margin-bottom: 28px; }
.detail-tabs button { font-size: 15px; }
.book-toolbar, .book-kicker, .book-count, .book-hint { font-size: 12px; letter-spacing: .02em; }
.book-toolbar select { font-size: 14px; }
.book-page { padding: 28px 32px; gap: 20px; }
.tab-panel .book-page h3 { font-size: clamp(23px, 2.1vw, 28px); font-weight: 600; line-height: 1.5; margin-top: 10px; }
.tab-panel .book-page-body p { font-size: 17px; line-height: 1.95; text-align: start; letter-spacing: .01em; margin-bottom: 20px; }
.book-page-body .place-facts dd { font-size: 16px; }
.tab-panel p, .tab-panel li { font-size: 16px; line-height: 1.9; }
.tab-panel table { font-size: 14px; line-height: 1.8; }
.tab-panel .research-source, .source-links { font-size: 13px; line-height: 1.8; }
.book-footer { flex-wrap: wrap; row-gap: 8px; }
.book-footer > div { margin-left: auto; }
.observation-section h2 { font-family: var(--sans); font-size: 28px; }
.observation-section p { font-size: 16px; line-height: 1.85; }
.next-place h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.4; }

/* Preparation and memory forms are reading surfaces, too. */
.kit-copy h3 { font-size: 20px; line-height: 1.5; }
.kit-copy p, .kit-footnote, .memory-empty p { font-size: 14px; line-height: 1.85; }
.kit-copy > span, .kit-illustration small, .memory-bottom, .journey-text { font-size: 12px; line-height: 1.75; color: var(--muted); }
.memory-empty h3 { font-size: 24px; font-weight: 600; }
.memory-toolbar { font-size: 14px; flex-wrap: wrap; }
.journey-dialog label, .journey-dialog > p, .upload-help { font-size: 14px; line-height: 1.8; }
.journey-dialog input:not([type=checkbox],[type=file]), .journey-dialog select, .journey-dialog textarea { font-size: 16px; }
.member-info h3 { font-size: 18px; font-weight: 600; }
.member > p { font-size: 14px; line-height: 1.8; }
.travelers-signoff > p { font-family: var(--sans); font-size: 32px; font-weight: 500; }
.site-footer { padding-inline: var(--space); }
.site-footer > a { font-family: var(--sans); font-size: 32px; font-weight: 600; }
.site-footer > div { line-height: 1.8; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
}
@media (max-width: 720px) {
  :root { --space: 22px; --section-gap: 56px; --type-section: 32px; --type-card: 25px; }
  .section-heading, .preparation .section-heading, .memories .section-heading { margin-bottom: 28px; }
  .section-heading > p, .landscapes .gallery-heading > p,
  .preparation .section-heading p, .memories .section-heading p { margin-top: 14px; font-size: 15px; line-height: 1.85; }
  .hero-v3 .hero-cinema { height: clamp(490px, calc(100svh - 144px), 650px); }
  .hero-v3 .hero-composition { padding: 28px 22px 90px; }
  .hero-v3 h1 { font-size: clamp(38px, 10vw, 58px); line-height: 1.3; }
  .hero-v3 .hero-introduction > p { font-size: 16px; margin-bottom: 20px; }
  .hero-v3 .hero-caption { left: 22px; right: 22px; font-size: 11px; }
  .hero-bottom { margin-inline: 10px; font-size: 12px; padding-block: 10px; }
  .brand small { font-size: 7px; }
  .landscapes .gallery-toolbar { padding-block: 8px; }
  .landscapes .filters { justify-content: start; overflow-x: auto; gap: 4px; }
  .landscapes .filter { font-size: 13px; padding-inline: 11px; flex-shrink: 0; }
  .landscapes .landscape-grid { height: clamp(300px, 82vw, 370px); }
  .landscapes .landscape-card h3 { font-size: 20px; line-height: 1.45; }
  .landscapes .card-meta { font-size: 11px; margin-top: 10px; }
  .landscapes .card-image, .landscapes .landscape-card:nth-child(even) .card-image { aspect-ratio: 1.6; }
  .landscapes .card-index, .landscapes .image-kind { font-size: 10px; }
  .gallery-caption { min-height: 100px; padding: 2px 0 18px; }
  .gallery-caption > p { font-size: 15px; }
  #gallery-gesture { font-size: 12px; margin-top: 8px; }
  .gallery-navigation { gap: 8px; }
  .gallery-play { font-size: 12px; gap: 6px; }
  .gallery-paging { gap: 6px; }
  .gallery-arrow { width: 44px; height: 44px; }
  .geographic-itinerary .preview-image { aspect-ratio: 1.6; }
  .preview-content { padding-top: 18px; }
  .preview-content p { margin-bottom: 8px; }
  .geo-jump, .route-play { font-size: 13px; }
  .story-copy p { margin-block: 20px; }
  .story-paper { width: 96%; justify-self: center; }
  .place-intro { padding-block: 28px; }
  .place-intro h1 { font-size: 36px; line-height: 1.4; margin: 14px 0 20px; }
  .place-intro-bottom > p { font-size: 16px; }
  .place-tags { margin-top: 16px; }
  .place-cover .photo-open picture { height: clamp(230px, 66vw, 330px); }
  .place-reading { padding-block: 36px; }
  .detail-tabs { gap: 20px; margin-bottom: 22px; }
  .detail-tabs button { font-size: 14px; }
  .book-page { padding: 22px 20px; gap: 18px; }
  .tab-panel .book-page h3 { font-size: 23px; }
  .tab-panel .book-page-body p { font-size: 16px; line-height: 1.9; }
  .book-page-body .place-facts dd { font-size: 15px; }
  .album-heading h2 { font-size: 26px; }
  .album-orbit .album-heading { align-items: start; }
  .album-caption > p { font-size: 16px; }
  .album-caption > div, .album-orbit .album-hint { font-size: 12px; }
  .album-orbit .album-hint { line-height: 1.8; }
  .album-navigation .album-controls button { height: 44px; width: 44px; }
  .album-progress { display: none; }
  .album-navigation .album-controls { margin-left: auto; }
  .observation-section h2 { font-size: 25px; }
  .observation-section p { font-size: 15px; }
  .kit-copy { padding: 16px 14px; }
  .kit-copy h3 { font-size: 17px; }
  .kit-copy p { font-size: 13px; min-height: 0; }
  .kit-copy > span { font-size: 12px; }
  .kit-grid { gap: 14px; }
  .kit-footnote { font-size: 13px; }
  .memories .journey-primary { font-size: 14px; }
  .memory-toolbar, .memory-toolbar select { font-size: 13px; }
  .memory-empty h3 { font-size: 22px; }
  .memory-empty p { font-size: 14px; }
  .memory-bottom { flex-wrap: wrap; }
  .member-grid { gap: 28px 18px; }
  .member-info h3 { font-size: 17px; }
  .member > p { font-size: 13px; }
  .travelers-signoff > p { font-size: 28px; }
}
@media (max-width: 370px) {
  :root { --space: 18px; --type-section: 29px; }
  .brand small { font-size: 6px; }
  .hero-v3 h1 { font-size: 36px; }
  .hero-v3 .hero-composition { padding-inline: 18px; }
  .hero-v3 .hero-caption { left: 18px; right: 18px; flex-wrap: wrap; gap: 0; }
  .hero-v3 .hero-caption > a { min-height: 28px; }
  .place-intro h1 { font-size: 32px; }
  .landscapes .filter { padding-inline: 9px; font-size: 12px; }
  .landscapes .landscape-card h3 { font-size: 19px; }
  .gallery-play { gap: 5px; font-size: 11px; }
  .book-page { padding-inline: 18px; }
  .kit-grid { grid-template-columns: 1fr; }
  .kit-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
  .kit-illustration { height: 100%; aspect-ratio: auto; }
  .kit-illustration svg { width: 48px; }
  .kit-illustration small { font-size: 10px; }
}