:root {
  color-scheme: light;
  --paper: #e9ece8;
  --paper-deep: #dce2dd;
  --surface: #f7f7f2;
  --surface-strong: #ffffff;
  --ink: #202824;
  --muted: #68726d;
  --line: rgba(32, 40, 36, .15);
  --line-strong: rgba(32, 40, 36, .34);
  --accent: #c15d3b;
  --accent-soft: #ecd7c8;
  --gold: #a4833f;
  --forest: #23322d;
  --forest-soft: #31443d;
  --success: #47745d;
  --warning: #a76b2e;
  --danger: #a94d44;
  --header-bg: rgba(233, 236, 232, .92);
  --shadow: 0 24px 60px rgba(28, 39, 34, .14);
  --serif: Georgia, "Times New Roman", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171d1a;
  --paper-deep: #202923;
  --surface: #1e2622;
  --surface-strong: #252e29;
  --ink: #edf0eb;
  --muted: #a5aea8;
  --line: rgba(237, 240, 235, .14);
  --line-strong: rgba(237, 240, 235, .32);
  --accent: #df7955;
  --accent-soft: #4a3026;
  --gold: #ccb06c;
  --forest: #101713;
  --forest-soft: #26352f;
  --success: #75aa8c;
  --warning: #d59a53;
  --danger: #d8756c;
  --header-bg: rgba(23, 29, 26, .92);
  --shadow: 0 25px 65px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  transition: color .35s ease, background .35s ease;
}
body.menu-open,
body.overlay-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, select, input, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button { border: 0; }
input, textarea, select { border-radius: 0; }
textarea { resize: vertical; }
img { display: block; width: 100%; }
svg { display: block; width: 1em; height: 1em; stroke-width: 1.6; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.section-shell { width: min(1240px, calc(100% - 10vw)); margin: 0 auto; }
.kicker { margin: 0 0 20px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: 86px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 0 3.2vw;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: height .35s ease, color .35s ease, background .35s ease, border-color .35s ease;
}
.site-header.scrolled,
.overlay-open .site-header {
  height: 68px;
  color: var(--ink);
  background: var(--header-bg);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.header-actions { display: flex; align-items: center; justify-self: end; gap: 5px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand-cn { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.brand-en { font-size: 7px; font-weight: 500; letter-spacing: .2em; opacity: .62; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.desktop-nav a { position: relative; white-space: nowrap; font-size: 10px; font-weight: 400; letter-spacing: .06em; opacity: .74; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover { opacity: 1; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.global-search { position: absolute; top: calc(100% + 12px); right: 3.2vw; display: flex; width: min(620px, calc(100vw - 48px)); height: 52px; align-items: center; padding: 0 7px 0 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .22s ease, visibility .22s ease, transform .22s ease; }
.site-header.search-open .global-search { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.global-search > svg { width: 15px; height: 15px; opacity: .55; }
.global-search input { min-width: 0; flex: 1; padding: 0 10px; background: transparent; border: 0; outline: 0; font-size: 11px; }
.global-search button { display: grid; width: 32px; height: 32px; place-items: center; color: white; background: var(--forest); }
.global-search button svg { width: 14px; height: 14px; }
.global-search .global-search-close { width: 30px; margin-left: 4px; color: var(--muted); background: transparent; }
.global-search .global-search-close:hover { color: var(--ink); background: var(--paper-deep); }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: inherit; background: transparent; border-radius: 50%; transition: background .2s ease; }
.icon-button:hover { background: rgba(127, 127, 127, .15); }
.icon-button svg { width: 17px; height: 17px; }
.theme-toggle { position: relative; }
.theme-icon { position: absolute; transition: opacity .2s ease, transform .3s ease; }
.theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-icon-moon { opacity: 0; transform: rotate(-35deg) scale(.7); }
html[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: rotate(35deg) scale(.7); }
html[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
.account-button, .mobile-account {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: .06em;
}
.account-button svg { width: 16px; height: 16px; }
.menu-button { display: none; }

.hero { position: relative; min-height: 720px; height: 100vh; overflow: hidden; color: white; background: #26362f; }
.hero-media { position: absolute; inset: -3%; will-change: transform; transition: transform .15s linear; }
.hero-media img { height: 100%; object-fit: cover; object-position: center 54%; animation: heroIn 1.5s cubic-bezier(.2, .7, .2, 1) both; transition: opacity .45s ease; }
@keyframes heroIn { from { opacity: .45; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.hero-overlay { position: absolute; inset: 0; background: rgba(8, 15, 11, .42); }
.hero-grain { position: absolute; inset: 0; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; }
.hero-content { position: absolute; z-index: 2; top: 50%; left: 8vw; width: min(970px, 78vw); transform: translateY(-43%); }
.hero-kicker { color: rgba(255, 255, 255, .62); animation: riseIn .8s .15s ease both; }
.hero h1 { max-width: 950px; margin: 0; font-family: var(--serif); font-size: 82px; font-weight: 400; letter-spacing: 0; line-height: .95; text-wrap: balance; animation: riseIn 1s .25s cubic-bezier(.2, .7, .2, 1) both; }
.hero-foot { display: flex; width: min(680px, 82%); align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 42px; animation: riseIn .9s .45s ease both; }
.hero-foot p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 12px; letter-spacing: .04em; line-height: 2; }
.primary-light { display: inline-flex; height: 48px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 18px; color: #1f2824; background: white; font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.primary-light svg { width: 15px; height: 15px; }
.hero-side-note { position: absolute; z-index: 2; right: 4.5vw; bottom: 54px; display: grid; grid-template-columns: auto auto; gap: 7px 24px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .34); font-size: 8px; letter-spacing: .1em; }
.hero-side-note b { grid-column: 1 / -1; font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.hero-index { position: absolute; z-index: 2; top: 50%; right: 4.5vw; margin: 0; font-family: var(--serif); font-size: 30px; transform: rotate(90deg); transform-origin: right top; }
.hero-index span { margin-right: 8px; font-family: var(--sans); font-size: 7px; letter-spacing: .22em; opacity: .55; }
.hero-pagination { position: absolute; z-index: 3; bottom: 47px; left: 8vw; display: flex; align-items: center; gap: 13px; }
.hero-arrow { display: grid; width: 34px; height: 34px; place-items: center; color: white; background: transparent; border: 1px solid rgba(255, 255, 255, .38); border-radius: 50%; }
.hero-arrow svg { width: 14px; height: 14px; }
.hero-dots { display: flex; align-items: center; gap: 7px; }
.hero-dots button { width: 22px; height: 2px; padding: 0; background: rgba(255, 255, 255, .35); transition: width .25s ease, background .25s ease; }
.hero-dots button.active { width: 42px; background: white; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; padding-top: 150px; padding-bottom: 140px; }
.intro-title h2, .section-heading h2, .prepare-heading h2, .nearby h2, .ai-intro h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}
.intro-copy { max-width: 510px; padding-top: 40px; }
.intro-copy p { margin: 0 0 21px; color: var(--muted); font-size: 14px; line-height: 2; }
.intro-copy .dropcap { color: var(--ink); font-size: 16px; }
.dropcap::first-letter { float: left; margin: 7px 9px 0 0; font-family: var(--serif); font-size: 58px; line-height: .7; }
.text-link { display: inline-flex; align-items: center; gap: 13px; margin-top: 17px; padding-bottom: 7px; border-bottom: 1px solid var(--line-strong); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.text-link:hover svg { transform: translate(3px, 3px); }

.stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-deep); }
.stats-inner { display: grid; width: min(1440px, 100%); margin: 0 auto; grid-template-columns: repeat(4, 1fr); }
.stat { min-height: 170px; padding: 40px 4vw; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat strong { display: block; font-family: var(--serif); font-size: 48px; font-weight: 400; letter-spacing: 0; line-height: 1; }
.stat span { display: block; margin-top: 16px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }

.home-hub { padding-top: 50px; padding-bottom: 140px; }
.notice-strip { display: grid; min-height: 58px; grid-template-columns: 150px 1fr; align-items: center; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.notice-strip > div { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.notice-strip > div svg { width: 15px; height: 15px; color: var(--accent); }
.notice-marquee { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.notice-track { display: flex; width: max-content; transform: translate3d(-50%, 0, 0); animation: notice-marquee 34s linear infinite; will-change: transform; }
.notice-group { display: flex; flex: 0 0 auto; align-items: center; }
.notice-item { display: inline-flex; align-items: center; min-height: 32px; padding-right: 128px; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: nowrap; }
.notice-marquee:hover .notice-track, .notice-marquee:focus-within .notice-track { animation-play-state: paused; }
@keyframes notice-marquee { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.shortcut-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 44px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.shortcut { position: relative; min-height: 155px; padding: 24px; text-align: left; background: transparent; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .25s ease, background .25s ease; }
.shortcut::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.shortcut:hover { color: white; background: var(--forest); }
.shortcut:hover::before { transform: scaleX(1); }
.shortcut > svg { width: 21px; height: 21px; margin-bottom: 30px; color: var(--accent); }
.shortcut:hover > svg { color: #f0aa80; }
.shortcut span, .shortcut small { display: block; }
.shortcut span { font-family: var(--serif); font-size: 18px; }
.shortcut small { margin-top: 7px; color: var(--muted); font-size: 8px; letter-spacing: .07em; }
.shortcut:hover small { color: rgba(255, 255, 255, .55); }

.discover { padding-top: 40px; padding-bottom: 160px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.section-heading > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.9; text-align: right; }
.search-workspace { margin-top: 62px; padding: 30px 0 25px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.directory-search { display: grid; height: 58px; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding-left: 18px; background: var(--surface); border: 1px solid var(--line); }
.directory-search > svg { width: 18px; height: 18px; color: var(--muted); }
.directory-search input { min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font-size: 13px; }
.button-primary, .button-quiet, .load-more {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
}
.button-primary { color: white; background: var(--forest); border: 1px solid transparent; }
.button-primary:hover { background: var(--accent); }
.button-primary svg, .button-quiet svg, .load-more svg { width: 14px; height: 14px; }
.directory-search .button-primary { height: 100%; padding: 0 30px; }
.button-quiet { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.button-quiet:hover { border-color: var(--line-strong); }
.search-history-row { display: flex; min-height: 42px; align-items: center; gap: 10px; color: var(--muted); font-size: 9px; }
.search-history-row > span { margin-right: 4px; letter-spacing: .08em; }
.search-history-row > div { display: flex; flex-wrap: wrap; gap: 7px; }
.search-history-row > div button { padding: 3px 8px; color: var(--muted); background: var(--paper-deep); }
.search-history-row > button { margin-left: auto; padding: 0; color: var(--muted); background: transparent; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.filter-grid label, .nearby-toolbar label, .auth-dialog label { display: flex; flex-direction: column; gap: 8px; }
.filter-grid label span, .nearby-toolbar label span, .auth-dialog label span { color: var(--muted); font-size: 8px; font-weight: 500; letter-spacing: .1em; }
.filter-grid select, .nearby-toolbar select, .ranking-filters select, .admin-head select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  outline: 0;
  font-size: 10px;
  appearance: none;
}
.reset-filters { align-self: end; }
.result-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 25px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.result-toolbar > div { display: flex; min-width: 0; align-items: center; gap: 4px; }
.result-toolbar strong { font-family: var(--serif); font-size: 28px; font-weight: 400; }
.result-toolbar span { color: var(--muted); font-size: 10px; }
.active-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; margin-left: 12px; }
.active-filters button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; color: var(--accent); background: var(--accent-soft); font-size: 8px; }
.active-filters svg { width: 10px; height: 10px; }
.sort-control { display: flex; width: 180px; height: 44px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); }
.sort-control select { min-width: 0; flex: 1; padding: 0; background: transparent; border: 0; outline: 0; appearance: none; font-size: 10px; }
.sort-control svg { width: 14px; height: 14px; }

.attraction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px 22px; margin-top: 55px; }
.attraction-card { position: relative; min-width: 0; }
.attraction-card::before { position: absolute; z-index: 4; top: 0; right: 0; left: 0; height: 3px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.attraction-card:hover::before { transform: scaleX(1); }
.attraction-card-inner { height: 100%; background: var(--surface); border: 1px solid var(--line); transition: box-shadow .35s ease, transform .35s ease; }
.attraction-card:hover .attraction-card-inner { box-shadow: var(--shadow); transform: translateY(-7px); }
.attraction-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); cursor: pointer; }
.attraction-media::after { position: absolute; inset: -45%; background: transparent; content: ""; pointer-events: none; transform: translateX(-80%) rotate(7deg); transition: transform .8s ease; }
.attraction-card:hover .attraction-media::after { transform: translateX(80%) rotate(7deg); }
.attraction-media img { height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
html[data-theme="dark"] .attraction-media img { filter: brightness(.82) saturate(.85); }
.attraction-card:hover .attraction-media img { transform: scale(1.055); }
.level-badge, .status-badge { position: absolute; z-index: 2; top: 13px; padding: 6px 9px; color: white; background: rgba(24, 34, 29, .78); font-size: 8px; font-weight: 500; letter-spacing: .06em; backdrop-filter: blur(8px); }
.level-badge { left: 13px; }
.status-badge { right: 52px; }
.status-badge.open { background: rgba(54, 104, 78, .82); }
.favorite-button { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; width: 34px; height: 34px; place-items: center; color: white; background: rgba(24, 34, 29, .42); border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; backdrop-filter: blur(8px); }
.favorite-button.active { color: white; background: var(--accent); border-color: var(--accent); }
.favorite-button svg { width: 15px; height: 15px; }
.favorite-button.active svg { fill: currentColor; }
.attraction-body { padding: 22px 20px 20px; }
.attraction-region { margin: 0 0 8px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.attraction-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.attraction-title-row h3 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: 0; line-height: 1.16; }
.rating { display: flex; align-items: center; gap: 4px; color: var(--gold); font-family: var(--serif); font-size: 15px; }
.rating svg { width: 13px; height: 13px; fill: currentColor; }
.attraction-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.attraction-tags span { padding: 4px 7px; color: var(--muted); background: var(--paper-deep); font-size: 7px; letter-spacing: .05em; }
.attraction-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.attraction-meta div + div { padding-left: 10px; border-left: 1px solid var(--line); }
.attraction-meta small, .attraction-meta b { display: block; }
.attraction-meta small { margin-bottom: 5px; color: var(--muted); font-size: 7px; }
.attraction-meta b { font-family: var(--serif); font-size: 11px; font-weight: 400; }
.card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.card-actions button { padding: 0; background: transparent; font-size: 9px; font-weight: 500; letter-spacing: .07em; }
.card-actions button:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.card-actions button svg { width: 13px; height: 13px; }
.card-actions span { color: var(--muted); font-size: 8px; }
.load-more { margin: 48px auto 0; background: transparent; border: 1px solid var(--line-strong); }
.load-more:hover { color: white; background: var(--forest); }
.empty-state { padding: 90px 20px; text-align: center; border-bottom: 1px solid var(--line); }
.empty-state > svg { width: 32px; height: 32px; margin: 0 auto 20px; color: var(--muted); }
.empty-state h3 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.empty-state p { margin: 13px 0 25px; color: var(--muted); font-size: 11px; }

.rankings { padding: 145px 0 155px; color: #edf1ec; background: var(--forest); }
.rankings .kicker, .rankings .section-heading > p { color: rgba(237, 241, 236, .55); }
.ranking-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-top: 60px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.tabs { display: flex; align-items: center; gap: 3px; }
.tabs button { min-height: 38px; padding: 0 14px; color: inherit; background: transparent; border-bottom: 1px solid transparent; font-size: 9px; letter-spacing: .06em; opacity: .55; }
.tabs button.active { border-color: var(--accent); opacity: 1; }
.ranking-filters { display: flex; gap: 8px; }
.ranking-filters select { width: 145px; color: #edf1ec; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.ranking-filters option { color: #222b27; }
.ranking-list { margin-top: 8px; }
.ranking-row { display: grid; min-height: 100px; grid-template-columns: 70px minmax(210px, 1fr) 160px 140px 42px; align-items: center; gap: 22px; border-bottom: 1px solid rgba(255, 255, 255, .13); cursor: pointer; transition: padding .25s ease, background .25s ease; }
.ranking-row:hover { padding-right: 15px; padding-left: 15px; background: rgba(255, 255, 255, .045); }
.rank-number { font-family: var(--serif); font-size: 30px; color: rgba(255, 255, 255, .42); }
.ranking-row:nth-child(-n+3) .rank-number { color: #edb980; }
.rank-place { display: flex; align-items: center; gap: 18px; min-width: 0; }
.rank-place img { width: 76px; height: 58px; flex: 0 0 auto; object-fit: cover; }
.rank-place h3 { margin: 0 0 5px; font-family: var(--serif); font-size: 21px; font-weight: 400; }
.rank-place p { margin: 0; color: rgba(255, 255, 255, .48); font-size: 8px; letter-spacing: .08em; }
.rank-score strong, .rank-evidence strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.rank-score span, .rank-evidence span { display: block; margin-top: 5px; color: rgba(255, 255, 255, .45); font-size: 7px; letter-spacing: .08em; }
.ranking-row > svg { width: 17px; height: 17px; justify-self: end; }

.nearby { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8vw; padding-top: 155px; padding-bottom: 160px; }
.nearby-intro > p:not(.kicker) { max-width: 410px; margin: 30px 0 25px; color: var(--muted); font-size: 12px; line-height: 1.95; }
.nearby-panel { align-self: start; border-top: 1px solid var(--line-strong); }
.nearby-toolbar { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.nearby-status { display: flex; min-height: 70px; align-items: center; gap: 10px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; }
.nearby-status svg { width: 16px; height: 16px; color: var(--accent); }
.nearby-intro .button-primary:disabled { cursor: wait; opacity: .65; }
.nearby-item { display: grid; min-height: 96px; grid-template-columns: 62px 1fr auto; align-items: center; gap: 17px; border-bottom: 1px solid var(--line); cursor: pointer; }
.nearby-item img { width: 62px; height: 62px; object-fit: cover; }
.nearby-item h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.nearby-item p { margin: 0; color: var(--muted); font-size: 8px; }
.nearby-distance { text-align: right; }
.nearby-distance strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 400; }
.nearby-distance span { color: var(--muted); font-size: 7px; }

.ai-studio { padding: 145px 0 150px; background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ai-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
.ai-intro > p:not(.kicker) { max-width: 430px; margin: 30px 0; color: var(--muted); font-size: 12px; line-height: 1.95; }
.quick-prompts { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.quick-prompts button { padding: 9px 11px; color: var(--muted); background: transparent; border: 1px solid var(--line); text-align: left; font-size: 9px; }
.quick-prompts button:hover { color: var(--ink); border-color: var(--line-strong); }
.ai-console { min-width: 0; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px; box-shadow: 0 18px 46px rgba(51, 61, 47, .14); overflow: hidden; }
.ai-messages { display: flex; min-height: 330px; max-height: 520px; flex-direction: column; gap: 17px; overflow-y: auto; padding: 28px; background: #f4f0e7; }
.message { max-width: 90%; padding: 19px 20px; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 5px 14px rgba(51, 61, 47, .06); }
.message.assistant { align-self: flex-start; background: var(--paper); }
.message.user { align-self: flex-end; color: #111; background: #d9f3df; border-color: #a8dcb5; font-weight: 700; }
.message > span { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.message.user > span { color: #111; font-weight: 700; }
.message > span svg { width: 16px; height: 16px; }
.message p { margin: 0; font-size: 15px; line-height: 1.9; }
.thinking { display: inline-flex; gap: 4px; padding: 5px 0; }
.thinking i { width: 5px; height: 5px; background: var(--muted); border-radius: 50%; animation: think 1s infinite alternate; }
.thinking i:nth-child(2) { animation-delay: .2s; }
.thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes think { to { opacity: .2; transform: translateY(-3px); } }
.extracted-conditions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.extracted-conditions span { padding: 4px 7px; color: var(--accent); background: var(--accent-soft); font-size: 8px; }
.ai-results { display: grid; gap: 10px; margin-top: 14px; }
.ai-result { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-result img { width: 58px; height: 50px; object-fit: cover; }
.ai-result h4 { margin: 0 0 4px; font-family: var(--serif); font-size: 16px; font-weight: 400; }
.ai-result p { color: var(--muted); font-size: 8px; line-height: 1.55; }
.ai-result button { display: grid; width: 30px; height: 30px; place-items: center; background: transparent; border: 1px solid var(--line); }
.ai-result button svg { width: 13px; height: 13px; }
.ai-input { padding: 21px 24px; border-top: 1px solid var(--line-strong); background: var(--surface); }
.ai-input textarea { width: 100%; min-height: 92px; padding: 12px 14px; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; font-size: 15px; line-height: 1.8; }
.ai-input > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ai-input > div > span { color: var(--muted); font-size: 11px; }
.ai-input .button-primary { min-height: 38px; }
.ai-input .button-primary:hover { background: var(--forest); color: white; }
.ai-disclaimer { margin: 0; padding: 13px 24px; color: var(--muted); background: var(--paper-deep); border-top: 1px solid var(--line); font-size: 10px; line-height: 1.7; }

.prepare { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; padding-top: 160px; padding-bottom: 165px; }
.prepare-heading > p:last-child { max-width: 390px; margin: 32px 0 0; color: var(--muted); font-size: 12px; line-height: 2; }
.checklist-wrap { align-self: start; }
.checklist-progress { padding-bottom: 28px; border-bottom: 1px solid var(--line-strong); }
.checklist-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.checklist-progress span { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.checklist-progress strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.checklist-progress strong span { color: inherit; font-family: inherit; font-size: inherit; letter-spacing: 0; }
.progress-track { height: 2px; margin-top: 17px; overflow: hidden; background: var(--line); }
.progress-track i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .4s ease; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; }
.checklist label { position: relative; display: grid; min-height: 94px; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-content: center; padding: 19px 15px 19px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.checklist label:nth-child(odd) { margin-right: 20px; }
.checklist label:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.checklist input { position: absolute; opacity: 0; pointer-events: none; }
.fake-check { display: grid; width: 18px; height: 18px; grid-row: 1 / 3; align-self: center; place-items: center; border: 1px solid var(--line-strong); }
.fake-check svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.checklist b { align-self: end; font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.checklist small { align-self: start; margin-top: 5px; color: var(--muted); font-size: 8px; }
.checklist input:checked + .fake-check { color: white; background: var(--accent); border-color: var(--accent); }
.checklist input:checked + .fake-check svg { opacity: 1; transform: scale(1); }
.checklist input:checked ~ b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); }

.journal { padding-bottom: 155px; }
.journal-heading { padding-bottom: 45px; border-bottom: 1px solid var(--line-strong); }
.journal-entry { border-bottom: 1px solid var(--line); }
.journal-entry > button { display: grid; width: 100%; min-height: 175px; grid-template-columns: 55px 165px 1fr 32px; align-items: center; gap: 28px; padding: 0; text-align: left; background: transparent; transition: padding .3s ease, background .3s ease; }
.journal-entry > button:hover { padding-right: 20px; padding-left: 20px; background: var(--paper-deep); }
.journal-no { font-family: var(--serif); font-size: 13px; color: var(--muted); }
.journal-image { width: 165px; height: 108px; overflow: hidden; }
.journal-image img { height: 100%; object-fit: cover; filter: saturate(.75); transition: transform .5s ease, filter .3s ease; }
.journal-entry:hover img { filter: saturate(1); transform: scale(1.05); }
.journal-copy > p { margin: 0 0 10px; color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.journal-copy h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: 0; }
.journal-copy > span { color: var(--muted); font-family: var(--serif); font-size: 10px; }
.journal-entry > button > svg { width: 19px; height: 19px; }

.quote-band { position: relative; min-height: 650px; overflow: hidden; color: white; background: #1b2b24; }
.quote-landscape { position: absolute; inset: 0; background: url("images/valley.jpg") center / cover; filter: saturate(.65) brightness(.58); transform: scale(1.02); }
.quote-band::after { position: absolute; inset: 0; background: rgba(13, 23, 17, .3); content: ""; }
.quote-inner { position: relative; z-index: 2; display: flex; min-height: 650px; flex-direction: column; align-items: center; justify-content: center; padding: 80px 8vw; text-align: center; }
.quote-inner > span { font-size: 8px; font-weight: 500; letter-spacing: .3em; opacity: .55; }
.quote-inner blockquote { margin: 45px 0 42px; font-family: var(--serif); font-size: 68px; line-height: 1.18; letter-spacing: 0; }
.quote-inner p { margin: 0; font-size: 9px; letter-spacing: .16em; opacity: .55; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 25px; padding: 65px 5vw 28px; color: rgba(255, 255, 255, .7); background: #101713; }
.footer-brand { font-family: var(--serif); font-size: 32px; }
.site-footer > div:first-child p { margin: 14px 0 0; color: rgba(255, 255, 255, .38); font-size: 9px; letter-spacing: .07em; }
.footer-links { display: flex; align-items: flex-start; gap: 22px; }
.footer-links button, .footer-links a { padding: 0; color: rgba(255, 255, 255, .55); background: transparent; font-size: 9px; }
.footer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 42px; padding-top: 19px; color: rgba(255, 255, 255, .3); border-top: 1px solid rgba(255, 255, 255, .1); font-size: 7px; letter-spacing: .12em; }
.footer-meta a { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .58); }

.mobile-panel { position: fixed; z-index: 70; inset: 0; display: flex; visibility: hidden; flex-direction: column; justify-content: center; padding: 105px 8vw 42px; color: var(--ink); background: var(--paper); opacity: 0; transition: opacity .3s ease, visibility .3s ease; }
.mobile-panel nav { display: flex; flex-direction: column; }
.mobile-panel nav a { display: flex; align-items: baseline; gap: 17px; padding: 14px 0; font-family: var(--serif); font-size: 34px; border-bottom: 1px solid var(--line); }
.mobile-panel nav span { font-family: var(--sans); font-size: 8px; color: var(--muted); }
.mobile-account { margin-top: auto; justify-content: center; border-color: var(--line-strong); }
.menu-open .mobile-panel { visibility: visible; opacity: 1; }
.menu-open .site-header { color: var(--ink); border-color: var(--line); }

.overlay, .drawer-overlay { position: fixed; z-index: 140; inset: 0; display: grid; visibility: hidden; place-items: center; padding: 28px; background: rgba(9, 15, 12, .72); opacity: 0; transition: opacity .28s ease, visibility .28s ease; backdrop-filter: blur(9px); }
.drawer-overlay { justify-items: end; padding: 0; }
.overlay.open, .drawer-overlay.open { visibility: visible; opacity: 1; }
#confirmOverlay { z-index: 400; }
.detail-dialog, .auth-dialog, .admin-dialog, .profile-drawer, .profile-settings-dialog { position: relative; width: min(1120px, 100%); max-height: calc(100vh - 56px); overflow-y: auto; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.auth-dialog { width: min(470px, 100%); padding: 45px; }
.profile-settings-dialog { width: min(500px, 100%); padding: 42px; }
.profile-drawer { width: min(560px, 100%); height: 100vh; max-height: none; padding: 45px; transform: translateX(30px); transition: transform .3s ease; }
.drawer-overlay.open .profile-drawer { transform: translateX(0); }
.admin-dialog { width: min(1240px, 100%); padding: 42px; }
.dialog-close { position: absolute; z-index: 6; top: 16px; right: 16px; display: grid; width: 38px; height: 38px; place-items: center; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; }
.dialog-close svg { width: 16px; height: 16px; }

.detail-hero { position: relative; min-height: 410px; display: flex; align-items: flex-end; padding: 45px; color: white; overflow: hidden; }
.detail-gallery { position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.detail-gallery > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.92); transition: opacity .22s ease, filter .22s ease; }
.detail-gallery-controls { position: absolute; z-index: 3; right: 28px; bottom: 24px; left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.detail-gallery-controls > button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: #fff; background: rgba(14, 22, 18, .3); border: 1px solid rgba(255, 255, 255, .62); border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.detail-gallery-controls > button:hover { color: #233b32; background: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .94); transform: translateY(-2px); }
.detail-gallery-controls > button:active { transform: translateY(0) scale(.96); }
.detail-gallery-controls > button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.detail-gallery-controls svg { width: 17px; height: 17px; stroke-width: 1.7; }
.detail-gallery-dots { position: absolute; z-index: 3; right: 0; bottom: 10px; left: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.detail-gallery-dots button { width: 22px; height: 2px; padding: 0; background: rgba(255, 255, 255, .35); border: 0; border-radius: 0; transition: width .25s ease, background .25s ease; }
.detail-gallery-dots button.active { width: 42px; background: #fff; }
.detail-hero::after { position: absolute; z-index: 1; inset: 0; background: rgba(38, 43, 36, .48); content: ""; }
.detail-hero-copy { position: relative; z-index: 3; }
.detail-hero-copy > p { margin: 0 0 10px; font-size: 9px; letter-spacing: .12em; opacity: .68; }
.detail-hero-copy h2 { margin: 0; font-family: var(--serif); font-size: 58px; font-weight: 400; letter-spacing: 0; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.detail-badges span { padding: 6px 9px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); font-size: 8px; backdrop-filter: blur(8px); }
.detail-hero-copy { pointer-events: none; }
.detail-body { padding: 36px 45px 50px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.detail-actions button { display: inline-flex; height: 40px; align-items: center; gap: 8px; padding: 0 14px; background: transparent; border: 1px solid var(--line); font-size: 9px; }
.detail-actions button.primary { color: white; background: var(--forest); border-color: var(--forest); }
.detail-actions button.active { color: white; background: var(--accent); border-color: var(--accent); }
.detail-actions svg { width: 14px; height: 14px; }
.confirm-dialog { width: min(430px, 100%); padding: 34px 36px 30px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.confirm-dialog h2 { margin: 8px 0 12px; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.confirm-dialog > p:not(.kicker) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 26px; }
.confirm-dialog-actions button { min-height: 40px; }
.inline-reply-form { display: grid; gap: 9px; margin-top: 14px; padding: 14px; background: var(--paper-deep); border: 1px solid var(--line); }
.inline-reply-form textarea { width: 100%; min-height: 70px; padding: 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); outline: 0; font: inherit; font-size: 10px; line-height: 1.7; resize: vertical; }
.inline-reply-form textarea:focus { border-color: var(--accent); }
.inline-reply-actions { display: flex; justify-content: flex-end; gap: 8px; }
.inline-reply-actions button { min-height: 40px; padding: 0 18px; font-size: 10px; font-weight: 500; }
.review-replies { display: grid; gap: 7px; margin: 12px 0 8px 18px; padding: 11px 13px; background: var(--paper-deep); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 10px; }
.review-reply { margin: 0 !important; color: var(--muted); font-size: 10px !important; }
.review-reply strong { color: var(--ink); font-weight: 500; }
.review-reply small { margin-left: 6px; color: var(--muted); font-size: 9px; }
.review-reply-count { color: var(--accent); font-size: 10px; }
.detail-summary { display: grid; grid-template-columns: 1.2fr .8fr; gap: 45px; }
.detail-description h3, .reviews-section h3 { margin: 0 0 15px; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.detail-description p { margin: 0; color: var(--muted); font-size: 12px; line-height: 2; }
.detail-facts { border-top: 1px solid var(--line-strong); }
.detail-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 10px; line-height: 1.6; }
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; }
.detail-notice { margin: 25px 0 0; padding: 14px; color: var(--muted); background: var(--paper-deep); font-size: 8px; line-height: 1.7; }
.reviews-section { margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--line-strong); }
.review-composer { display: grid; grid-template-columns: 180px 1fr; gap: 24px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.star-input { display: flex; gap: 4px; }
.star-input button { padding: 0; color: var(--line-strong); background: transparent; }
.star-input button.active { color: var(--gold); }
.star-input svg { width: 22px; height: 22px; fill: currentColor; }
.review-composer textarea { width: 100%; min-height: 86px; padding: 12px; background: var(--paper); border: 1px solid var(--line); outline: 0; font-size: 10px; line-height: 1.7; }
.review-composer .button-primary { margin-top: 8px; }
.review-list { display: grid; gap: 18px; }
.review-item { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-head strong { font-size: 12px; font-weight: 500; }
.review-head span { color: var(--muted); font-size: 9px; }
.review-author-self { margin-left: 5px; color: var(--accent); font-size: .85em; font-style: normal; font-weight: 600; }
.review-item p { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.review-item > button { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; padding: 0; color: var(--muted); background: transparent; font-size: 11px; }
.review-item > button svg { width: 14px; height: 14px; }
.review-item > button[data-helpful].liked,
.review-item > button[data-helpful].liked svg { color: #d93025; }

.auth-dialog h2, .profile-drawer h2, .admin-head h2 { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 400; letter-spacing: 0; }
.auth-tabs { margin: 25px 0; border-bottom: 1px solid var(--line); }
.auth-dialog form { display: grid; gap: 17px; }
.auth-dialog input { height: 44px; padding: 0 12px; background: var(--paper); border: 1px solid var(--line); outline: 0; font-size: 11px; }
.auth-dialog .button-primary { margin-top: 5px; }
.form-error { min-height: 15px; margin: -3px 0 0; color: var(--danger); font-size: 9px; }
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 25px; border-bottom: 1px solid var(--line-strong); }
.profile-identity { display: flex; min-width: 0; align-items: center; gap: 16px; }
.profile-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; overflow: hidden; color: white; background: var(--forest); border-radius: 50%; font-family: var(--serif); font-size: 22px; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.profile-head-actions button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 14px; white-space: nowrap; }
.profile-head-actions svg { width: 14px; height: 14px; }
.profile-head-actions [data-logout], .profile-head-actions [data-logout]:hover { color: #fff !important; background: #315a4b !important; border-color: #315a4b !important; }
.profile-head h2 { font-size: 30px; }
.profile-head p { margin: 5px 0 0; color: var(--muted); font-size: 8px; }
.profile-tabs { margin: 24px 0 18px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.profile-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.profile-section-title span { color: var(--muted); font-size: 9px; }
.profile-section-title button { padding: 0; color: var(--muted); background: transparent; font-size: 8px; }
.profile-list { display: grid; }
.profile-item { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; min-height: 72px; border-bottom: 1px solid var(--line); }
.profile-item img { width: 50px; height: 46px; object-fit: cover; }
.profile-item h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 16px; font-weight: 400; }
.profile-item p { margin: 0; color: var(--muted); font-size: 8px; }
.profile-item button { display: grid; width: 28px; height: 28px; place-items: center; color: var(--muted); background: transparent; }
.profile-item svg { width: 13px; height: 13px; }
.profile-empty { padding: 50px 0; color: var(--muted); text-align: center; font-size: 10px; }
.profile-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.profile-settings-dialog h2 { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 400; }
.profile-settings-dialog form { display: grid; gap: 20px; margin-top: 28px; }
.profile-settings-dialog form > label { display: grid; gap: 9px; font-size: 12px; }
.profile-settings-dialog input[type="text"],
.profile-settings-dialog input:not([type]) { height: 50px; padding: 0 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); outline: 0; font-size: 14px; }
.profile-settings-dialog input:focus { border-color: var(--accent); }
.profile-avatar-editor { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--paper-deep); border: 1px solid var(--line); }
.profile-avatar-preview { width: 82px; height: 82px; flex-basis: 82px; font-size: 30px; }
.profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-avatar-actions label, .profile-avatar-actions button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 13px; cursor: pointer; }
.profile-avatar-actions svg { width: 14px; height: 14px; }
.profile-settings-dialog .button-primary { min-height: 48px; justify-self: start; }

@media (max-width: 760px) {
  .profile-head { align-items: flex-start; flex-direction: column; }
  .profile-head-actions { width: 100%; }
  .profile-head-actions button { flex: 1; justify-content: center; }
  .profile-settings-dialog { padding: 38px 24px 28px; }
  .profile-avatar-editor { align-items: flex-start; flex-direction: column; }
}

.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-right: 45px; }
.admin-head select { width: 130px; }
.admin-metrics { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 30px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.admin-metric { min-height: 100px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-metric strong, .admin-metric span { display: block; }
.admin-metric strong { font-family: var(--serif); font-size: 25px; font-weight: 400; }
.admin-metric span { margin-top: 8px; color: var(--muted); font-size: 8px; }
.admin-layout { display: grid; grid-template-columns: 175px 1fr; gap: 24px; margin-top: 28px; }
.admin-nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.admin-nav button { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 0 10px; text-align: left; background: transparent; border-bottom: 1px solid var(--line); font-size: 9px; }
.admin-nav button.active { color: white; background: var(--forest); }
.admin-nav svg { width: 14px; height: 14px; }
.admin-content { min-width: 0; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.admin-toolbar h3 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.admin-table th, .admin-table td { padding: 12px 9px; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table th { color: var(--muted); font-weight: 500; }
.admin-table button { padding: 4px 7px; background: var(--paper-deep); font-size: 8px; }
.state-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--success); border-radius: 50%; }
.state-dot.warning { background: var(--warning); }

.page-transition { position: fixed; z-index: 220; inset: 0; display: grid; visibility: hidden; place-items: center; color: #edf1ef; background: #17241f; opacity: 0; pointer-events: none; transition: opacity .24s ease, visibility .24s ease; }
.page-transition.active { visibility: visible; opacity: 1; pointer-events: auto; }
.page-transition > div { display: flex; flex-direction: column; align-items: center; }
.page-transition svg { width: 34px; height: 34px; }
.page-transition p { margin: 20px 0 17px; font-family: var(--serif); font-size: 30px; letter-spacing: .04em; }
.page-transition span { width: 90px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.page-transition span::after { display: block; width: 100%; height: 100%; background: var(--accent); content: ""; transform: translateX(-100%); }
.page-transition.active span::after { animation: transitionLine .62s .08s ease forwards; }
@keyframes transitionLine { to { transform: translateX(0); } }
.toast { position: fixed; z-index: 260; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 13px 16px; visibility: hidden; color: #111 !important; background: var(--forest); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: .25s ease; font-size: 10px; line-height: 1.6; }
.toast.show { visibility: visible; opacity: 1; transform: translateY(0); }
.reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: auto auto 1fr auto; }
  .desktop-nav { display: none; }
  .shortcut-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-metrics { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .attraction-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .nearby, .ai-layout, .prepare { grid-template-columns: 1fr; gap: 65px; }
  .ranking-row { grid-template-columns: 55px 1fr 120px 35px; }
  .rank-evidence { display: none; }
}

@media (max-width: 760px) {
  .section-shell { width: calc(100% - 12vw); }
  .site-header { height: 68px; grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 5vw; }
  .browser-actions, .account-button { display: none; }
  .global-search { top: calc(100% + 8px); right: 5vw; width: calc(100vw - 10vw); }
  .brand { justify-self: start; }
  .header-actions { justify-self: end; }
  .menu-button { display: grid; }
  .hero { min-height: 650px; height: 100svh; }
  .hero-media { inset: -2%; }
  .hero-media img { object-position: 60% center; }
  .hero-content { top: 47%; left: 7vw; width: 86vw; transform: translateY(-44%); }
  .hero h1 { font-size: 58px; }
  .hero-foot { width: 100%; align-items: flex-start; flex-direction: column; margin-top: 32px; }
  .hero-foot p { max-width: 280px; font-size: 10px; }
  .hero-side-note { right: 6vw; bottom: 26px; }
  .hero-index { display: none; }
  .hero-pagination { bottom: 28px; left: 6vw; }

  .intro { display: block; padding-top: 95px; padding-bottom: 95px; }
  .intro-copy { padding-top: 50px; }
  .intro-title h2, .section-heading h2, .prepare-heading h2, .nearby h2, .ai-intro h2 { font-size: 42px; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 140px; padding: 30px 7vw; }
  .stat:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .stat:nth-child(4) { border-top: 1px solid var(--line); }

  .home-hub { padding-top: 35px; padding-bottom: 100px; }
  .notice-strip { grid-template-columns: 110px 1fr; }
  .notice-marquee { mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .notice-item { padding-right: 84px; font-size: 12px; }
  .shortcut-grid { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .shortcut { min-height: 135px; padding: 19px; }
  .shortcut > svg { margin-bottom: 22px; }

  .discover { padding-bottom: 105px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 25px; text-align: left; }
  .search-workspace { margin-top: 45px; }
  .directory-search { grid-template-columns: 20px 1fr 54px; padding-left: 13px; }
  .directory-search .button-primary { overflow: hidden; padding: 0; color: transparent; font-size: 0; }
  .directory-search .button-primary::after { color: white; content: "搜索"; font-size: 9px; }
  .search-history-row { align-items: flex-start; flex-wrap: wrap; padding: 10px 0; }
  .search-history-row > button { margin-left: 0; }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: 14px 9px; }
  .result-toolbar { align-items: flex-start; flex-direction: column; }
  .result-toolbar > div { flex-wrap: wrap; }
  .active-filters { margin: 8px 0 0; flex-basis: 100%; }
  .sort-control { width: 100%; }
  .result-toolbar { grid-template-columns: 1fr; }
  .result-toolbar > .reset-filters { justify-self: start; }
  .attraction-grid { grid-template-columns: 1fr; gap: 42px; margin-top: 42px; }

  .rankings { padding: 100px 0 105px; }
  .ranking-controls { align-items: stretch; flex-direction: column; margin-top: 42px; }
  .tabs { overflow-x: auto; }
  .tabs button { flex: 0 0 auto; }
  .ranking-filters select { width: 50%; }
  .ranking-row { min-height: 92px; grid-template-columns: 34px 1fr 36px; gap: 10px; }
  .rank-place { gap: 11px; }
  .rank-place img { width: 54px; height: 50px; }
  .rank-place h3 { font-size: 17px; }
  .rank-score { display: none; }

  .nearby { padding-top: 105px; padding-bottom: 110px; }
  .nearby-toolbar { grid-template-columns: 1fr; }
  .ai-studio { padding: 100px 0 105px; }
  .ai-layout { gap: 50px; }
  .ai-messages { min-height: 300px; padding: 17px; }
  .message { max-width: 94%; }

  .prepare { padding-top: 105px; padding-bottom: 110px; }
  .checklist { display: block; }
  .checklist label:nth-child(odd) { margin-right: 0; }
  .checklist label:nth-child(even) { padding-left: 0; border-left: 0; }
  .journal { padding-bottom: 105px; }
  .journal-entry > button { min-height: 145px; grid-template-columns: 26px 72px 1fr 18px; gap: 12px; }
  .journal-image { width: 72px; height: 90px; }
  .journal-copy h3 { font-size: 19px; line-height: 1.35; }
  .quote-band, .quote-inner { min-height: 560px; }
  .quote-inner blockquote { font-size: 48px; }
  .site-footer { display: block; padding: 55px 7vw 25px; }
  .footer-links { margin-top: 25px; }

  .overlay { padding: 0; }
  .detail-dialog, .auth-dialog, .admin-dialog { width: 100%; height: 100vh; max-height: none; }
  .detail-hero { min-height: 340px; padding: 30px 22px; }
  .detail-gallery-controls { right: 18px; bottom: 22px; }
  .detail-gallery-controls > button { width: 42px; height: 42px; }
  .detail-body { padding: 28px 22px 40px; }
  .detail-summary { grid-template-columns: 1fr; gap: 28px; }
  .review-composer { grid-template-columns: 1fr; }
  .auth-dialog { padding: 65px 7vw 40px; }
  .profile-drawer { padding: 60px 6vw 35px; }
  .admin-dialog { padding: 58px 5vw 35px; }
  .admin-head { align-items: flex-start; flex-direction: column; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav { flex-direction: row; overflow-x: auto; }
  .admin-nav button { min-width: max-content; }
  .admin-content { overflow-x: auto; }
  .admin-table { min-width: 650px; }
}

@media (max-width: 430px) {
  .brand-en { display: none; }
  .filter-grid { grid-template-columns: 1fr; }
  .shortcut span { font-size: 16px; }
  .nearby-item { grid-template-columns: 50px 1fr auto; }
  .nearby-item img { width: 50px; height: 50px; }
  .journal-entry > button { grid-template-columns: 22px 1fr 16px; }
  .journal-image { display: none; }
  .footer-links { flex-wrap: wrap; }
}

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

/* Quiet field-notes visual layer */
:root {
  --paper: #f4efe5;
  --paper-deep: #e9e1d3;
  --surface: #fbf8f0;
  --surface-strong: #fffdf8;
  --ink: #3f433b;
  --muted: #7c7b70;
  --line: rgba(82, 81, 69, .16);
  --line-strong: rgba(82, 81, 69, .3);
  --accent: #a86859;
  --accent-soft: #ead6c9;
  --gold: #aa8b53;
  --forest: #677461;
  --forest-soft: #7e8a77;
  --success: #66806b;
  --header-bg: rgba(244, 239, 229, .94);
  --shadow: 0 20px 50px rgba(78, 72, 58, .12);
  --serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --sans: "Manrope", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  position: relative;
  background: var(--paper);
  font-family: var(--sans);
  letter-spacing: .01em;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.32'/%3E%3C/svg%3E");
  content: "";
  opacity: .055;
  pointer-events: none;
}
.section-shell { width: min(1180px, calc(100% - 9vw)); }
.kicker { color: var(--forest); font-size: 9px; letter-spacing: .24em; }

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  height: 78px;
  color: var(--ink);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.site-header.scrolled, .overlay-open .site-header { height: 70px; color: var(--ink); background: var(--header-bg); border-color: var(--line); }
.brand-cn { font-family: var(--serif); font-size: 23px; letter-spacing: .08em; }
.brand-en { color: var(--muted); font-size: 7px; letter-spacing: .24em; }
.desktop-nav { gap: 29px; }
.desktop-nav a { color: var(--muted); font-size: 10px; }
.desktop-nav a:hover { color: var(--ink); }
.desktop-nav a::after { background: var(--accent); }
.icon-button:hover { background: var(--paper-deep); }
.account-button { color: var(--forest); border-color: var(--line-strong); }
.account-button:hover { color: var(--accent); border-color: var(--accent); }
.global-search { background: var(--surface); border-color: var(--line); }
.global-search button { background: var(--forest); }

.hero {
  width: min(1180px, calc(100% - 9vw));
  min-height: 620px;
  height: min(720px, calc(100vh - 106px));
  margin: 28px auto 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.hero::before, .hero::after {
  position: absolute;
  z-index: 2;
  width: 320px;
  height: 230px;
  background-position: center;
  background-size: cover;
  content: "";
  mix-blend-mode: multiply;
  opacity: .54;
  filter: saturate(.62) sepia(.16);
  pointer-events: none;
}
.hero::before { top: -40px; left: -40px; background-image: url("images/floral.jpg"); border-radius: 20% 65% 35% 70%; transform: rotate(-14deg); }
.hero::after { right: -50px; bottom: -35px; background-image: url("images/botanical.jpg"); border-radius: 62% 24% 35% 44%; transform: rotate(15deg); }
.hero-media { inset: 16px; opacity: .2; transform: none !important; }
.hero-media img { filter: saturate(.55) sepia(.16); }
.hero-overlay { background: rgba(248, 244, 236, .79); }
.hero-grain { opacity: .08; mix-blend-mode: multiply; }
.hero-content { inset: 0 !important; top: 0 !important; left: 0 !important; display: flex !important; width: 100% !important; height: 100% !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; transform: none !important; }
.hero-content > * { position: static; width: auto; max-width: 100%; margin-right: auto; margin-left: auto; text-align: center; }
.hero-kicker { color: var(--forest); }
.hero h1 { color: var(--ink); font-size: 82px; font-weight: 500; letter-spacing: .07em; line-height: 1.22; }
.hero-foot { display: flex !important; width: min(580px, 90%) !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 24px !important; margin-top: 27px !important; }
.hero-foot p { color: var(--muted); font-family: var(--serif); font-size: 13px; line-height: 2; }
.primary-light { display: inline-flex; align-items: center; gap: 11px; padding: 12px 19px; color: var(--surface); background: var(--forest); border: 1px solid var(--forest); font-size: 10px; letter-spacing: .08em; }
.primary-light:hover { color: var(--forest); background: transparent; }
.hero-pagination { left: 38px; bottom: 28px; }
.hero-arrow { color: var(--forest); background: rgba(251, 248, 240, .75); border-color: var(--line-strong); }
.hero-arrow:hover { color: var(--surface); background: var(--forest); }
.hero-dots button { background: var(--line-strong); }
.hero-dots button.active { background: var(--accent); }
.hero-side-note { right: 38px; bottom: 29px; color: var(--muted); border-color: var(--line-strong); }
.hero-side-note b { color: var(--forest); }
.hero-index { top: 48%; right: 35px; color: var(--accent); }
.hero-index span { color: var(--muted); }

.intro { padding-top: 112px; padding-bottom: 104px; }
.intro-title h2, .section-heading h2, .prepare-heading h2, .nearby h2, .ai-intro h2 { color: var(--ink); font-family: var(--serif); font-weight: 500; letter-spacing: .06em; line-height: 1.45; }
.intro-title h2 { font-size: 44px; }
.intro-copy { padding-top: 28px; }
.intro-copy p { color: var(--muted); font-family: var(--serif); font-size: 13px; line-height: 2.1; }
.intro-copy .dropcap { color: var(--ink); }
.text-link { color: var(--forest); border-color: var(--forest); }
.stats-band { background: transparent; border-color: var(--line); }
.stats-inner { grid-template-columns: repeat(4, 1fr); }
.stat { padding: 28px 24px; border-color: var(--line); }
.stat strong { color: var(--forest); font-family: var(--serif); font-size: 32px; }
.stat span { color: var(--muted); font-size: 9px; }
.home-hub { padding-top: 38px; padding-bottom: 108px; }
.notice-strip { background: var(--surface); border-color: var(--line); }
.notice-strip > div { color: var(--forest); }
.notice-item { color: var(--muted); }
.shortcut-grid { gap: 10px; }
.shortcut { min-height: 115px; padding: 18px 15px; background: rgba(251,248,240,.6); border-color: var(--line); }
.shortcut:hover { background: var(--surface); border-color: var(--forest); }
.shortcut svg { color: var(--forest); }
.shortcut span { color: var(--ink); font-family: var(--serif); }
.shortcut small { color: var(--muted); }

.discover { padding-top: 33px; padding-bottom: 122px; }
.section-heading h2 { font-size: 42px; }
.section-heading > p { color: var(--muted); font-family: var(--serif); line-height: 2; }
.search-workspace { padding: 22px; background: rgba(251,248,240,.64); border: 1px solid var(--line); }
.directory-search { background: var(--surface); border-color: var(--line-strong); }
.directory-search > svg { color: var(--forest); }
.directory-search input::placeholder { color: #aaa49a; }
.button-primary { color: white; background: var(--forest); border-color: var(--forest); }
.button-primary:hover { color: var(--forest); background: transparent; }
.filter-grid label span, .search-history-row, .result-toolbar { color: var(--muted); }
.filter-grid label select, .sort-control select, .ranking-filters select, .nearby-toolbar select { background: var(--surface); border-color: var(--line); }
.filter-grid label select:focus, .sort-control select:focus, .ranking-filters select:focus, .nearby-toolbar select:focus { border-color: var(--forest); }
.result-toolbar { border-color: var(--line); }
.result-toolbar strong { color: var(--forest); font-family: var(--serif); }
.active-filter { color: var(--forest); background: var(--paper-deep); }
.attraction-grid { gap: 30px 18px; margin-top: 38px; }
.attraction-card::before { height: 2px; background: var(--accent); }
.attraction-card-inner { background: var(--surface); border-color: var(--line); }
.attraction-card:hover .attraction-card-inner { box-shadow: var(--shadow); }
.attraction-media::after { display: none; }
.attraction-media img { filter: saturate(.72) sepia(.08); }
.attraction-card:hover .attraction-media img { filter: saturate(.9) sepia(.04); }
.attraction-region { color: var(--muted); }
.attraction-title-row h3 { color: var(--ink); font-family: var(--serif); font-size: 26px; letter-spacing: .04em; }
.attraction-title-row button { color: var(--forest); background: var(--paper-deep); }
.attraction-title-row button:hover, .attraction-title-row button.active { color: var(--surface); background: var(--accent); }
.attraction-tags span { color: var(--muted); background: var(--paper-deep); }
.attraction-meta { border-color: var(--line); }
.attraction-meta div + div { border-color: var(--line); }
.attraction-meta small { color: var(--muted); }
.attraction-meta b { color: var(--ink); font-family: var(--serif); }
.load-more { color: var(--forest); border-color: var(--line-strong); }
.load-more:hover { color: var(--surface); background: var(--forest); }

.rankings { padding: 110px 0 122px; color: var(--ink); background: var(--paper-deep); }
.rankings .kicker, .rankings .section-heading > p { color: var(--muted); }
.ranking-controls { border-color: var(--line-strong); }
.tabs button { color: var(--muted); }
.tabs button.active, .tabs button:hover { color: var(--forest); border-color: var(--forest); }
.ranking-filters select { color: var(--forest); }
.ranking-list { border-color: var(--line); }
.ranking-row { border-color: var(--line); }
.ranking-row:hover { background: rgba(251,248,240,.46); }
.rankings .rank-number { color: #596557; font-family: var(--serif); font-weight: 500; }
.rankings .ranking-row:nth-child(-n+3) .rank-number { color: var(--accent); font-weight: 600; }
.ranking-row h3 { color: var(--ink); font-family: var(--serif); }
.ranking-row p, .ranking-score span { color: var(--muted); }
.ranking-score strong { color: var(--accent); font-family: var(--serif); }

.nearby { padding-top: 122px; padding-bottom: 128px; }
.nearby-intro > p:not(.kicker), .prepare-heading > p:last-child { color: var(--muted); font-family: var(--serif); line-height: 2; }
.nearby-panel { border-color: var(--line-strong); }
.nearby-toolbar { border-color: var(--line); }
.nearby-status, .nearby-item { border-color: var(--line); }
.nearby-status svg { color: var(--accent); }
.nearby-item:hover { background: var(--surface); }
.nearby-item h3 { color: var(--ink); font-family: var(--serif); }
.nearby-item p, .nearby-distance span { color: var(--muted); }
.nearby-distance strong { color: var(--forest); font-family: var(--serif); }

.ai-studio { padding: 116px 0 122px; background: #e8e5d9; border-color: var(--line); }
.ai-intro h2 { font-size: 52px; }

/* Restore comfortable component sizing as well as section spacing. */
.shortcut { min-height: 115px; padding: 18px; }
.shortcut > svg { margin-bottom: 22px; }
.search-workspace { margin-top: 62px; padding: 22px; }
.filter-grid { gap: 18px 14px; padding-top: 20px; }
.result-toolbar { margin-top: 25px; padding-top: 20px; }
.attraction-grid { gap: 30px 18px; margin-top: 38px; }
.attraction-body { padding: 22px 20px 20px; }
.attraction-title-row h3 { font-size: 26px; }
.attraction-tags { gap: 6px; margin-top: 15px; }
.attraction-meta { margin-top: 18px; padding-top: 15px; }
.card-actions { margin-top: 18px; }
.load-more { margin-top: 48px; }
.ranking-controls { margin-top: 60px; padding-bottom: 18px; }
.ranking-row { min-height: 100px; grid-template-columns: 70px minmax(210px, 1fr) 160px 140px 42px; gap: 22px; }
.rank-number { font-size: 30px; }
.rank-place { gap: 18px; }
.rank-place img { width: 76px; height: 58px; }
.rank-place h3 { font-size: 21px; }
.rank-score strong, .rank-evidence strong { font-size: 19px; }
.nearby-toolbar { padding: 24px 0; }
.nearby-status { min-height: 70px; }
.nearby-item { min-height: 96px; grid-template-columns: 62px 1fr auto; gap: 17px; }
.nearby-item img { width: 62px; height: 62px; }
.nearby-item h3 { margin-bottom: 6px; font-size: 19px; }
.nearby-distance strong { font-size: 17px; }
.ai-layout { gap: 8vw; }
.ai-intro > p:not(.kicker) { margin: 30px 0; line-height: 1.95; }
.ai-messages { min-height: 330px; padding: 28px; }
.message { padding: 19px 20px; }
.ai-input { padding: 21px 24px; }
.prepare-heading > p:last-child { margin-top: 32px; line-height: 2; }
.checklist-wrap { padding: 26px 28px 18px; }
.checklist-progress { padding-bottom: 22px; }
.checklist label { min-height: 94px; padding-top: 19px; padding-bottom: 19px; }
.checklist label:nth-child(odd) { margin-right: 20px; }
.checklist label:nth-child(even) { padding-left: 20px; }
.journal-heading { padding-bottom: 45px; }
.journal-entry > button { min-height: 175px; grid-template-columns: 55px 165px 1fr 32px; gap: 28px; }
.journal-image { width: 165px; height: 108px; }
.journal-copy h3 { font-size: 32px; }
.ai-intro > p:not(.kicker) { color: var(--muted); font-family: var(--serif); line-height: 2; }
.quick-prompts button { color: var(--forest); background: var(--surface); border-color: var(--line); }
.quick-prompts button:hover { color: var(--surface); background: var(--forest); }
.ai-console { background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px; box-shadow: 0 18px 46px rgba(51, 61, 47, .14); }
.ai-messages { background: #f4f0e7; border-color: var(--line-strong); }
.message.assistant { background: var(--surface); border-color: var(--line); }
.message span { color: var(--forest); }
.message p { color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.9; }
.ai-input textarea { background: var(--surface-strong); border-color: var(--line-strong); font-size: 15px; }
.ai-input textarea:focus { border-color: var(--forest); }
.ai-disclaimer { color: var(--muted); }

.prepare { padding-top: 128px; padding-bottom: 132px; }
.checklist-wrap { min-width: 0; padding: 26px 28px 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(78, 72, 58, .07); }
.checklist-progress { padding-bottom: 22px; border-color: var(--line); }
.checklist-progress > div:first-child { min-height: 30px; align-items: center; }
.checklist-progress span, .checklist-progress strong { color: var(--muted); }
.progress-track { width: 100%; height: 3px; margin-top: 13px; background: var(--paper-deep); }
.progress-track i { background: var(--forest); }
.checklist { width: 100%; }
.checklist label { min-width: 0; border-color: var(--line); }
.checklist label:hover { background: var(--paper-deep); }
.checklist label b { color: var(--ink); font-family: var(--serif); }
.checklist label small { color: var(--muted); }
.fake-check { width: 20px; height: 20px; border-color: var(--line-strong); }
.checklist input:focus-visible + .fake-check { outline: 2px solid var(--accent); outline-offset: 3px; }
.checklist input:checked + .fake-check { color: var(--surface); background: var(--forest); border-color: var(--forest); }

.journal { padding-bottom: 122px; }
.journal-heading { border-color: var(--line-strong); }
.journal-entry { border-color: var(--line); }
.journal-entry > button:hover { background: var(--paper-deep); }
.journal-no, .journal-copy > p, .journal-copy > span { color: var(--muted); }
.journal-copy h3 { color: var(--ink); font-family: var(--serif); }
.quote-band { color: var(--ink); background: #dfd8c9; }
.quote-inner blockquote { color: var(--forest); font-family: var(--serif); }
.hero h1, .intro-title h2, .section-heading h2, .prepare-heading h2, .nearby h2, .ai-intro h2,
.stat strong, .attraction-title-row h3, .journal-copy h3, .quote-inner blockquote,
.detail-hero-copy h2, .auth-dialog h2, .profile-drawer h2, .admin-head h2 { letter-spacing: 0; }
.prepare-heading h2, .nearby h2 { font-size: 48px; }
.journal-copy h3 { font-size: 32px; }
.quote-inner blockquote { font-size: 68px; }
.detail-hero-copy h2 { font-size: 58px; }

.site-footer { color: var(--muted); background: transparent; border-top: 1px solid var(--line); }
.site-footer > div:first-child p { color: var(--muted); }
.footer-links button, .footer-links a { color: var(--ink); }
.footer-links a:hover { color: var(--accent); }
.footer-meta a { color: var(--ink); }
.overlay { background: rgba(60, 61, 53, .28); }

@media (max-width: 760px) {
  .site-header { position: sticky; height: auto; min-height: 72px; padding: 12px 5vw; }
  .hero { width: calc(100% - 7vw); min-height: 570px; height: calc(100vh - 100px); margin-top: 18px; }
  .hero-content { padding: 30px 22px; }
  .hero h1 { font-size: 58px; }
  .hero-side-note { right: 22px; bottom: 25px; }
  .hero-index { right: 20px; }
  .hero-pagination { left: 22px; }
  .hero::before { width: 230px; height: 180px; }
  .hero::after { width: 220px; height: 180px; }
  .intro { padding-top: 82px; padding-bottom: 78px; }
  .section-shell { width: calc(100% - 10vw); }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat { padding: 22px 16px; }
  .shortcut-grid { grid-template-columns: repeat(2, 1fr); }
  .search-workspace { padding: 14px; }
  .rankings { padding: 84px 0 92px; }
  .nearby { padding-top: 88px; padding-bottom: 92px; }
  .ai-studio { padding: 84px 0 92px; }
  .checklist-wrap { padding: 22px 22px 14px; }
  .checklist label { min-height: 84px; padding-right: 8px; }
}

@media (max-width: 430px) {
  .hero { min-height: 540px; }
  .hero-side-note { display: none; }
  .hero h1 { font-size: 48px; }
  .hero-foot p { font-size: 12px; }
  .shortcut { min-height: 102px; }
  .shortcut span { font-size: 15px; }
}

@media (max-width: 600px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto !important; }
  .brand { grid-column: 1; }
  .header-actions { grid-column: 2; display: flex; justify-self: end; }
  .theme-toggle { display: none; }
  .brand-en, .hero-side-note { display: none; }
  .hero-content { padding-right: 26px; padding-left: 26px; }
  .hero h1 { max-width: 100%; font-size: 54px; }
  .checklist-wrap { padding: 18px 18px 10px; }
  .checklist-progress { padding-bottom: 18px; }
  .checklist label { grid-template-columns: 28px minmax(0, 1fr); padding-top: 16px; padding-bottom: 16px; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: 48px; }
}

/* Global liquid-glass material layer. Keep this block last so every surface
   shares the same translucency, edge highlight, and motion-safe fallback. */
:root {
  --glass-bg: color-mix(in srgb, var(--surface) 68%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  --glass-line: color-mix(in srgb, white 48%, var(--line));
  --glass-line-dark: color-mix(in srgb, var(--ink) 18%, transparent);
  --glass-shadow: 0 18px 50px rgba(28, 39, 34, .12), 0 2px 8px rgba(28, 39, 34, .06);
  --glass-blur: 26px;
}

html[data-theme="dark"] {
  --glass-bg: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  --glass-line: color-mix(in srgb, white 25%, var(--line));
  --glass-line-dark: color-mix(in srgb, white 13%, transparent);
  --glass-shadow: 0 22px 58px rgba(0, 0, 0, .28), 0 2px 10px rgba(0, 0, 0, .18);
}

body {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--paper-deep) 72%, transparent), transparent 42%),
    var(--paper);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, .14), transparent 34%, rgba(255, 255, 255, .06) 68%, transparent);
  mix-blend-mode: soft-light;
}

.site-header,
.global-search,
.attraction-card,
.shortcut,
.notice-strip,
.ranking-row,
.nearby-item,
.journal-entry,
.ai-console,
.ai-result,
.prepare,
.quote-band,
.stats-band,
.site-footer,
.admin-layout,
.admin-dialog,
.auth-dialog,
.detail-dialog,
.profile-drawer,
.search-workspace,
.checklist-wrap,
.review-composer,
.review-item,
.toast {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
}

.site-header.scrolled,
.overlay-open .site-header { background: var(--glass-bg-strong); }
.site-header { border-top: 1px solid rgba(255, 255, 255, .2); }
.hero { border-radius: 0 0 28px 28px; box-shadow: 0 24px 70px rgba(28, 39, 34, .2); }
.hero::after {
  position: absolute;
  z-index: 1;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  content: "";
  pointer-events: none;
}
.hero-content,
.hero-pagination,
.hero-side-note,
.hero-index { z-index: 2; }

.attraction-card,
.shortcut,
.ranking-row,
.nearby-item,
.journal-entry,
.review-item { border-radius: 18px; overflow: hidden; }
.attraction-card:hover,
.shortcut:hover,
.ranking-row:hover,
.nearby-item:hover,
.journal-entry:hover { box-shadow: 0 22px 58px rgba(28, 39, 34, .18); transform: translateY(-3px); }
.attraction-card,
.shortcut,
.ranking-row,
.nearby-item,
.journal-entry { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }

.filter-grid,
.ranking-filters,
.active-filters,
.tabs,
.admin-toolbar,
.admin-metrics,
.profile-tabs,
.auth-tabs { border-color: var(--glass-line); }
.filter-grid,
.ranking-filters,
.admin-toolbar,
.admin-metrics { border-radius: 18px; }

input,
textarea,
select,
.directory-search,
.sort-control,
.button-primary,
.button-quiet,
.reset-filters,
.load-more,
.primary-light,
.account-button { 
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
input:focus,
textarea:focus,
select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: 0; }
.button-primary,
.primary-light,
.account-button { border-radius: 999px; }
.button-quiet,
.reset-filters,
.load-more,
.sort-control { border-radius: 12px; }

.overlay,
.drawer-overlay { background: rgba(19, 27, 23, .38); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
.detail-dialog,
.auth-dialog,
.admin-dialog,
.profile-drawer,
.search-workspace { border-radius: 24px; }
.dialog-close,
.icon-button,
.hero-arrow { border: 1px solid var(--glass-line); background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.stats-band { border-left: 0; border-right: 0; }
.site-footer { border-radius: 28px 28px 0 0; }

@supports not (backdrop-filter: blur(1px)) {
  .site-header,
  .global-search,
  .attraction-card,
  .shortcut,
  .notice-strip,
  .ranking-row,
  .nearby-item,
  .journal-entry,
  .ai-console,
  .ai-result,
  .prepare,
  .quote-band,
  .stats-band,
  .site-footer,
  .admin-layout,
  .admin-dialog,
  .auth-dialog,
  .detail-dialog,
  .profile-drawer,
  .search-workspace,
  .checklist-wrap,
  .review-composer,
  .review-item,
  .toast { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .attraction-card,
  .shortcut,
  .ranking-row,
  .nearby-item,
  .journal-entry { transition: box-shadow .2s ease; }
  .attraction-card:hover,
  .shortcut:hover,
  .ranking-row:hover,
  .nearby-item:hover,
  .journal-entry:hover { transform: none; }
}

/* Final route/header overrides. */
body.page-route > .site-footer { display: none; }
.desktop-nav a.active { opacity: 1; }
.desktop-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.desktop-nav a { font-size: clamp(11px, .9vw, 14px); font-weight: 500; }

@media (max-width: 760px) {
  body { padding-top: 108px; }
  body.page-route { padding-top: 0; }
  .site-header,
  .site-header.scrolled,
  .page-route .site-header,
  .page-route .site-header.scrolled {
    position: fixed !important;
    height: 108px;
    min-height: 108px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 52px 40px;
    gap: 0 12px;
    padding: 8px 5vw;
    color: var(--ink);
    background: var(--header-bg);
  }
  .brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .desktop-nav {
    display: flex !important;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
  }
  .menu-button { display: none !important; }
  .mobile-panel { display: none !important; }
  .hero { height: calc(100svh - 126px); min-height: 540px; }
  .page-view { padding-top: 108px; }
}

/* Persistent return-to-top controls. */
.back-to-top {
  position: fixed;
  z-index: 120;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: white; background: var(--accent); border-color: var(--accent); }
.back-to-top svg { width: 17px; height: 17px; }
.detail-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 10px 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  font-size: 10px;
}
.detail-back-to-top:hover { color: var(--ink); border-color: var(--line-strong); }
.detail-back-to-top svg { width: 14px; height: 14px; }

/* Final sizing for the requested compact-but-full-width page hero. */
.page-view-hero { height: 390px !important; min-height: 0 !important; padding-top: 72px !important; padding-bottom: 58px !important; }
@media (max-width: 760px) {
  .page-view-hero { height: 420px !important; min-height: 0 !important; padding: 72px 7vw 56px !important; }
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* Final full-bleed standalone hero treatment. */
.page-view-hero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - 68px) !important;
  margin: 0 !important;
  padding: 132px 8vw 106px !important;
  align-content: center !important;
  color: #fff !important;
  border-bottom: 0 !important;
  isolation: isolate;
}
.page-view-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 13, 10, .72), rgba(6, 13, 10, .45) 52%, rgba(6, 13, 10, .25));
  content: "";
  pointer-events: none;
}
.page-view-hero > :not(.page-carousel) { max-width: 680px !important; }
.page-view-hero .page-back,
.page-view-hero .kicker,
.page-view-hero h1,
.page-view-hero > p:last-child { color: #fff !important; }
.page-carousel { position: absolute !important; z-index: 0; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; }
.page-carousel-media { position: absolute; inset: 0; }
.page-carousel-media img { opacity: 1; }
.page-carousel-controls { z-index: 3; right: 5vw; bottom: 42px; left: 5vw; }

@media (max-width: 760px) {
  .page-view-hero { min-height: calc(100svh - 108px) !important; padding: 128px 7vw 104px !important; }
  .page-view-hero::after { background: linear-gradient(180deg, rgba(6, 13, 10, .56), rgba(6, 13, 10, .72)); }
  .page-view-hero > :not(.page-carousel) { max-width: 100% !important; }
  .page-carousel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0; }
  .page-carousel-controls { right: 7vw; bottom: 28px; left: 7vw; }
}

/* Compact page carousel: retain the home carousel interaction without a full-screen image. */
.page-view-hero {
  min-height: 574px !important;
  padding: 90px 8vw 72px !important;
  align-content: center !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  isolation: auto;
}
.page-view-hero::after { display: none; }
.page-view-hero > :not(.page-carousel) {
  max-width: 52% !important;
  color: var(--ink) !important;
}
.page-view-hero .page-back,
.page-view-hero .kicker,
.page-view-hero h1,
.page-view-hero > p:last-child { color: var(--ink) !important; }
.page-view-hero .page-back { opacity: .7; }
.page-view-hero .page-back:hover { opacity: 1; }
.page-carousel {
  position: absolute !important;
  z-index: 2;
  top: auto !important;
  right: clamp(4vw, 8vw, 120px) !important;
  bottom: 54px !important;
  left: auto !important;
  width: clamp(300px, 30vw, 430px) !important;
  height: clamp(190px, 18vw, 250px) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow);
}
.page-carousel-media { position: absolute; inset: 0; }
.page-carousel-media img { opacity: .92; }
.page-carousel-controls { right: 12px; bottom: 12px; left: 12px; }
.page-carousel-controls button { width: 38px; height: 38px; background: rgba(16, 23, 19, .48); }
.page-carousel-controls button svg { width: 16px; height: 16px; }
.page-carousel-controls > div button { width: 18px; height: 2px; }
.page-carousel-controls > div button.active { width: 34px; }

@media (max-width: 760px) {
  .page-view-hero {
    min-height: 610px !important;
    padding: 78px 7vw 38px !important;
    align-content: start !important;
  }
  .page-view-hero > :not(.page-carousel) { max-width: 100% !important; }
  .page-carousel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 220px !important;
    margin-top: 34px;
    border: 1px solid var(--line) !important;
  }
  .page-carousel-controls { right: 12px; bottom: 12px; left: 12px; }
}

/* Final full-bleed page hero override. */
.page-view-hero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - 68px) !important;
  margin: 0 !important;
  padding: 132px 8vw 106px !important;
  align-content: center !important;
  color: #fff !important;
  border-bottom: 0 !important;
  isolation: isolate;
}
.page-view-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 13, 10, .72), rgba(6, 13, 10, .45) 52%, rgba(6, 13, 10, .25));
  content: "";
  pointer-events: none;
}
.page-view-hero > :not(.page-carousel) { max-width: 680px !important; }
.page-view-hero .page-back,
.page-view-hero .kicker,
.page-view-hero h1,
.page-view-hero > p:last-child { color: #fff !important; }
.page-carousel { position: absolute !important; z-index: 0; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; }
.page-carousel-media { position: absolute; inset: 0; }
.page-carousel-media img { opacity: 1; }
.page-carousel-controls { z-index: 3; right: 5vw; bottom: 42px; left: 5vw; }

@media (max-width: 760px) {
  .page-view-hero { min-height: calc(100svh - 108px) !important; padding: 128px 7vw 104px !important; }
  .page-view-hero::after { background: linear-gradient(180deg, rgba(6, 13, 10, .56), rgba(6, 13, 10, .72)); }
  .page-view-hero > :not(.page-carousel) { max-width: 100% !important; }
  .page-carousel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0; }
  .page-carousel-controls { right: 7vw; bottom: 28px; left: 7vw; }
}

/* Standalone page heroes use the same full-bleed carousel treatment as the home hero. */
.page-view-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 68px);
  margin: 0;
  padding: 132px 8vw 106px;
  align-content: center;
  color: #fff;
  border-bottom: 0;
  isolation: isolate;
}
.page-view-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 13, 10, .72) 0%, rgba(6, 13, 10, .48) 46%, rgba(6, 13, 10, .28) 100%);
  content: "";
  pointer-events: none;
}
.page-view-hero > :not(.page-carousel) { max-width: 680px; }
.page-view-hero .page-back,
.page-view-hero .kicker,
.page-view-hero h1,
.page-view-hero > p:last-child { color: #fff; }
.page-view-hero .page-back { opacity: .82; }
.page-view-hero .page-back:hover { opacity: 1; }
.page-carousel {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.page-carousel-media { position: absolute; inset: 0; }
.page-carousel-media img { opacity: 1; }
.page-carousel-controls { z-index: 3; right: 5vw; bottom: 42px; left: 5vw; }
.page-carousel-controls button { width: 44px; height: 44px; background: rgba(8, 16, 12, .3); }
.page-carousel-controls > div button { width: 22px; height: 2px; }
.page-carousel-controls > div button.active { width: 42px; }

@media (max-width: 760px) {
  .page-view-hero {
    min-height: calc(100svh - 108px);
    padding: 128px 7vw 104px;
  }
  .page-view-hero::after { background: linear-gradient(180deg, rgba(6, 13, 10, .56), rgba(6, 13, 10, .7)); }
  .page-view-hero > :not(.page-carousel) { max-width: 100%; }
  .page-carousel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .page-carousel-controls { right: 7vw; bottom: 28px; left: 7vw; }
}

/* Page-specific visual anchors and compact carousels. */
.has-page-carousel { position: relative; overflow: hidden; }
.page-carousel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(52vw, 760px);
  height: 100%;
  overflow: hidden;
  background: var(--forest);
  border-left: 1px solid var(--line);
}
.page-carousel-media,
.page-carousel-media img { width: 100%; height: 100%; }
.page-carousel-media img { object-fit: cover; opacity: .88; transition: opacity .35s ease, transform .55s ease; }
.page-carousel-media img.is-entering { animation: pageCarouselIn .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pageCarouselIn { from { opacity: .25; transform: scale(1.08) translateX(20px); } to { opacity: .9; transform: scale(1) translateX(0); } }
.page-carousel-controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.page-carousel-controls button { display: grid; width: 42px; height: 42px; place-items: center; color: white; background: rgba(16, 23, 19, .62); border: 1px solid rgba(255,255,255,.45); }
.page-carousel-controls button:hover { background: var(--accent); }
.page-carousel-controls button svg { width: 17px; height: 17px; }
.page-carousel-controls > div { display: flex; align-items: center; gap: 5px; }
.page-carousel-controls > div button { width: 18px; height: 2px; padding: 0; background: rgba(255,255,255,.5); border: 0; }
.page-carousel-controls > div button.active { width: 30px; background: white; }
@media (max-width: 760px) {
  .page-carousel { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 220px; margin-top: 28px; border-left: 0; }
  .page-view-hero.has-page-carousel { align-content: start; }
  .page-view-hero > :not(.page-carousel) { max-width: 100%; }
  .page-view-hero.has-page-carousel .page-back { margin-bottom: 30px; }
}

/* Standalone navigation pages and an always-visible adaptive header. */
.home-rankings { display: none !important; }

.site-header {
  position: fixed !important;
  grid-template-columns: auto minmax(340px, 1fr) auto;
}

.desktop-nav {
  min-width: 0;
  gap: clamp(10px, 1.5vw, 24px);
}

.desktop-nav a { font-size: clamp(8px, .72vw, 10px); }

.page-route .site-header,
.page-route .site-header.scrolled {
  height: 68px;
  color: var(--ink);
  background: var(--header-bg);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.page-view {
  min-height: calc(100vh - 68px);
  padding-top: 68px;
  background: var(--paper);
}

.page-view-hero {
  display: grid;
  min-height: 360px;
  align-content: end;
  padding-top: 90px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--line-strong);
}

.page-view-hero .page-back {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 9px;
  margin-bottom: 54px;
  color: var(--muted);
  font-size: 10px;
}

.page-view-hero .page-back svg { width: 15px; height: 15px; }
.page-view-hero .kicker { margin-bottom: 15px; }
.page-view-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 68px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.page-view-hero > p:last-child {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.page-view-hero > :not(.page-carousel) { position: relative; z-index: 2; max-width: 46%; }

.rankings-page-content { padding-top: 86px; }
.page-view-body { min-height: 520px; padding-top: 76px; padding-bottom: 120px; }
.page-view-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}
.page-view-heading .kicker { margin-bottom: 10px; }
.page-view-heading h2 { margin: 0; font-family: var(--serif); font-size: 42px; font-weight: 400; letter-spacing: 0; }
.page-view-heading > span { color: var(--muted); font-size: 10px; }
.page-attraction-grid { margin-top: 46px; }
.page-empty { min-height: 330px; align-content: center; }

#profilePageContent { max-width: 920px; margin: 0 auto; }
#profilePageContent .profile-list { min-height: 0; align-content: start; grid-auto-rows: max-content; }
#profilePageContent .profile-footer { margin-top: 36px; }
.profile-page-login {
  display: grid;
  min-height: 420px;
  place-items: center;
  align-content: center;
  text-align: center;
}
.profile-page-login > svg { width: 44px; height: 44px; margin-bottom: 24px; color: var(--accent); }
.profile-page-login h2 { margin: 0; font-family: var(--serif); font-size: 36px; font-weight: 400; letter-spacing: 0; }
.profile-page-login p { max-width: 480px; margin: 15px auto 25px; color: var(--muted); font-size: 11px; line-height: 1.8; }

@media (max-width: 1120px) and (min-width: 761px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-inline: 2.2vw; }
  .desktop-nav { display: flex; gap: clamp(8px, 1vw, 14px); }
  .desktop-nav a { font-size: 11px; }
  .brand-en { display: none; }
  .account-button { padding-inline: 8px; }
}

@media (max-width: 760px) {
  body { padding-top: 108px; }
  body.page-route { padding-top: 0; }
  .site-header,
  .site-header.scrolled,
  .page-route .site-header,
  .page-route .site-header.scrolled {
    height: 108px;
    min-height: 108px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 52px 40px;
    gap: 0 12px;
    padding: 8px 5vw;
    color: var(--ink);
    background: var(--header-bg);
    border-color: var(--line);
  }
  .brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .desktop-nav {
    display: flex;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .desktop-nav::-webkit-scrollbar { display: none; }
  .desktop-nav a { flex: 0 0 auto; padding: 11px 0 10px; font-size: 12px; }
  .desktop-nav a::after { bottom: 5px; }
  .menu-button { display: none; }
  .mobile-panel { display: none; }
  .hero { height: calc(100svh - 126px); min-height: 540px; }
  .page-view { min-height: calc(100vh - 108px); padding-top: 108px; }
  .page-view-hero { min-height: 330px; padding-top: 52px; padding-bottom: 50px; }
  .page-view-hero .page-back { margin-bottom: 38px; }
  .page-view-hero h1 { font-size: 48px; }
  .rankings-page-content { padding-top: 64px; }
  .page-view-body { padding-top: 56px; padding-bottom: 84px; }
  .page-view-heading { align-items: flex-start; flex-direction: column; }
  .page-view-heading h2 { font-size: 34px; }
  .profile-page-login h2 { font-size: 30px; }
}

/* Keep the login interaction soft without changing its layout or palette. */
.account-button,
.mobile-account {
  transition: transform .22s ease, background-color .22s ease;
}

.account-button:active,
.mobile-account:active {
  transform: scale(.96);
}

.auth-dialog {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: center center;
  transition: opacity .62s cubic-bezier(.22, .8, .24, 1), transform .78s cubic-bezier(.22, .8, .24, 1);
  will-change: opacity, transform;
}

#authOverlay {
  transition-duration: .52s;
}

.overlay.open .auth-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.auth-dialog > *:not(.dialog-close) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .46s ease, transform .58s ease;
}

.overlay.open .auth-dialog > *:not(.dialog-close) {
  opacity: 1;
  transform: translateY(0);
}

.overlay.open .auth-dialog > *:nth-child(2) { transition-delay: .12s; }
.overlay.open .auth-dialog > *:nth-child(3) { transition-delay: .2s; }
.overlay.open .auth-dialog > *:nth-child(4) { transition-delay: .28s; }
.overlay.open .auth-dialog > *:nth-child(5) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .account-button,
  .mobile-account,
  .auth-dialog,
  .auth-dialog > *:not(.dialog-close) {
    transition: none;
    transform: none;
  }
}

/* The carousel is gesture-driven; keep its progress dots and autoplay, remove arrow chrome. */
.hero-arrow { display: none; }
.hero-pagination { left: 50%; transform: translateX(-50%); }

/* Shortcut tiles no longer show a hover progress bar. */
.shortcut::before,
.shortcut:hover::before { display: none; transform: none; }

@media (max-width: 760px) {
  .profile-drawer { padding: 60px 6vw 35px; }
}

/* Mouse hover is intentionally inert; click and keyboard interactions remain available. */
@media (hover: hover) {
  .desktop-nav a:hover { color: var(--muted); opacity: .74; }
  .desktop-nav a:hover::after { transform: scaleX(0); }
  .global-search .global-search-close:hover { color: var(--muted); background: transparent; }
  .icon-button:hover { background: transparent; }
  .account-button:hover { color: var(--forest); border-color: var(--line-strong); }
  .text-link:hover svg { transform: none; }

  .shortcut:hover,
  .shortcut:hover::before { color: inherit; background: rgba(251,248,240,.6); border-color: var(--line); transform: none; }
  .shortcut:hover > svg { color: var(--forest); }
  .shortcut:hover small { color: var(--muted); }

  .button-primary:hover { color: white; background: var(--forest); }
  .button-quiet:hover { border-color: var(--line); }
  .load-more:hover { color: var(--forest); background: transparent; }
  .primary-light:hover { color: var(--surface); background: var(--forest); }

  .attraction-card:hover::before { transform: scaleX(0); }
  .attraction-card:hover .attraction-card-inner { box-shadow: none; transform: none; }
  .attraction-card:hover .attraction-media img { transform: none; filter: saturate(.72) sepia(.08); }
  .attraction-title-row button:not(.active):hover { color: var(--forest); background: var(--paper-deep); }

  .ranking-row:hover {
    padding-right: 0;
    padding-left: 0;
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    transform: none;
  }
  .tabs button:not(.active):hover { color: var(--muted); border-color: transparent; }
  .nearby-item:hover { background: var(--glass-bg); box-shadow: var(--glass-shadow); transform: none; }
  .quick-prompts button:hover { color: var(--muted); border-color: var(--line); }
  .checklist label:hover { background: transparent; }
  .journal-entry > button:hover { padding-right: 0; padding-left: 0; background: transparent; }
  .journal-entry:hover img { filter: saturate(.75); transform: none; }
  .journal-entry:hover { box-shadow: var(--glass-shadow); transform: none; }
  .footer-links a:hover { color: rgba(255, 255, 255, .55); }
}

/* Global information-density pass: tighter rhythm, clearer hierarchy, less empty canvas. */
.section-shell { width: min(1280px, calc(100% - 8vw)); }
.intro { padding-top: 88px; padding-bottom: 86px; }
.home-hub { padding-top: 30px; padding-bottom: 86px; }
.discover { padding-top: 24px; padding-bottom: 104px; }
.rankings { padding-top: 82px; padding-bottom: 92px; }
.nearby { gap: 5vw; padding-top: 88px; padding-bottom: 98px; }
.ai-studio { padding-top: 88px; padding-bottom: 96px; }
.prepare { gap: 6vw; padding-top: 96px; padding-bottom: 106px; }
.journal { padding-bottom: 96px; }

.intro-title h2,
.section-heading h2,
.prepare-heading h2,
.nearby h2,
.ai-intro h2 { font-size: 40px; line-height: 1.28; }
.section-heading { gap: 28px; }
.section-heading > p { max-width: 360px; line-height: 1.7; }
.stats-band .stat { min-height: 132px; padding: 26px 3vw; }
.stats-band .stat strong { font-size: 30px; }
.stats-band .stat span { margin-top: 10px; }
.notice-strip { min-height: 50px; }
.shortcut-grid { margin-top: 28px; }
.shortcut { min-height: 100px; padding: 17px; }
.shortcut > svg { margin-bottom: 18px; }
.shortcut span { font-size: 16px; }

.search-workspace { margin-top: 42px; padding: 18px; }
.filter-grid { gap: 12px; padding-top: 16px; }
.result-toolbar { margin-top: 18px; padding-top: 15px; }
.attraction-grid { gap: 24px 16px; margin-top: 28px; }
.attraction-body { padding: 17px 16px 15px; }
.attraction-title-row h3 { font-size: 23px; }
.attraction-tags { gap: 5px; margin-top: 11px; }
.attraction-meta { margin-top: 13px; padding-top: 12px; }
.card-actions { margin-top: 13px; }
.load-more { margin-top: 32px; }

.ranking-controls { margin-top: 38px; padding-bottom: 12px; }
.ranking-row { min-height: 82px; grid-template-columns: 54px minmax(190px, 1fr) 120px 110px 28px; gap: 16px; }
.rank-number { font-size: 26px; }
.rank-place { gap: 13px; }
.rank-place img { width: 64px; height: 50px; }
.rank-place h3 { font-size: 18px; }
.rank-score strong, .rank-evidence strong { font-size: 17px; }
.rank-score span, .rank-evidence span { color: var(--muted); font-size: 8px; }
.ranking-row > svg { width: 15px; height: 15px; }

.nearby-toolbar { padding: 16px 0; }
.nearby-status { min-height: 54px; }
.nearby-item { min-height: 82px; grid-template-columns: 54px 1fr auto; gap: 13px; }
.nearby-item img { width: 54px; height: 54px; }
.nearby-item h3 { margin-bottom: 4px; font-size: 17px; }
.nearby-distance strong { font-size: 16px; }

.ai-layout { gap: 5vw; }
.ai-intro > p:not(.kicker) { margin: 22px 0; line-height: 1.75; }
.ai-messages { min-height: 270px; padding: 18px; gap: 13px; }
.message { max-width: 94%; padding: 15px 16px; }
.message > span { font-size: 10px; }
.message p { font-size: 14px; line-height: 1.85; }
.ai-input { padding: 16px; }
.ai-input textarea { min-height: 82px; padding: 10px 12px; font-size: 14px; }
.prepare-heading > p:last-child { margin-top: 22px; line-height: 1.75; }
.checklist-wrap { padding: 20px 22px 14px; }
.checklist-progress { padding-bottom: 16px; }
.checklist label { min-height: 78px; padding-top: 14px; padding-bottom: 14px; }
.checklist label:nth-child(odd) { margin-right: 12px; }
.checklist label:nth-child(even) { padding-left: 12px; }

.journal-heading { padding-bottom: 28px; }
.journal-entry > button { min-height: 142px; grid-template-columns: 44px 130px 1fr 26px; gap: 20px; }
.journal-image { width: 130px; height: 88px; }
.journal-copy h3 { font-size: 26px; }

@media (max-width: 900px) {
  .section-shell { width: calc(100% - 7vw); }
  .ranking-row { grid-template-columns: 44px minmax(160px, 1fr) 90px 26px; gap: 12px; }
  .rank-evidence { display: none; }
  .nearby { gap: 7vw; }
  .prepare, .ai-layout { gap: 5vw; }
}

@media (max-width: 760px) {
  .intro, .discover, .rankings, .nearby, .ai-studio, .prepare { padding-top: 68px; padding-bottom: 74px; }
  .intro-title h2, .section-heading h2, .prepare-heading h2, .nearby h2, .ai-intro h2 { font-size: 34px; }
  .stats-band .stat { min-height: 106px; padding: 20px 14px; }
  .shortcut { min-height: 96px; }
  .shortcut > svg { margin-bottom: 13px; }
  .search-workspace { margin-top: 30px; padding: 14px; }
  .ranking-controls { align-items: stretch; flex-direction: column; gap: 10px; }
  .ranking-row { min-height: 74px; grid-template-columns: 34px minmax(0, 1fr) 64px 20px; gap: 8px; }
  .rank-place img { width: 50px; height: 42px; }
  .rank-place h3 { font-size: 16px; }
  .rank-place p { font-size: 7px; }
  .rank-score strong { font-size: 15px; }
  .rank-score span { font-size: 7px; }
  .nearby { display: block; }
  .nearby-panel { margin-top: 34px; }
  .prepare { display: block; }
  .checklist-wrap { margin-top: 32px; }
  .journal-entry > button { min-height: 112px; grid-template-columns: 28px 92px 1fr 20px; gap: 12px; }
  .journal-image { width: 92px; height: 68px; }
  .journal-copy h3 { font-size: 20px; }
  .journal-copy > p { font-size: 7px; }
}

/* Restore the editorial breathing room after the density experiment. */
.intro { padding-top: 112px; padding-bottom: 104px; }
.home-hub { padding-top: 38px; padding-bottom: 108px; }
.discover { padding-top: 33px; padding-bottom: 122px; }
.rankings { padding-top: 110px; padding-bottom: 122px; }
.nearby { padding-top: 122px; padding-bottom: 128px; }
.ai-studio { padding-top: 116px; padding-bottom: 122px; }
.prepare { padding-top: 128px; padding-bottom: 132px; }
.journal { padding-bottom: 122px; }
.intro-title h2 { font-size: 44px; }
.section-heading h2 { font-size: 42px; }
.prepare-heading h2, .nearby h2 { font-size: 48px; }
.ai-intro h2 { font-size: 52px; }

/* Keep list surfaces full-width and prevent their grid contents from forcing overflow. */
body { overflow-x: hidden; }
.attraction-grid,
.ranking-list,
.ranking-row,
.nearby-panel,
.nearby-item,
.journal,
.journal-entry,
.search-workspace,
.checklist-wrap,
.ai-console { width: 100%; min-width: 0; }
.ranking-row,
.nearby-item,
.journal-entry { overflow: hidden; }

@media (max-width: 760px) {
  .intro, .discover, .rankings, .nearby, .ai-studio, .prepare { padding-top: 86px; padding-bottom: 92px; }
  .ranking-row { width: 100%; grid-template-columns: 36px minmax(0, 1fr) 64px 20px; }
  .rank-place { min-width: 0; }
  .rank-place h3,
  .nearby-item h3,
  .journal-copy h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nearby-item { width: 100%; }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
  .intro { padding-top: 82px; padding-bottom: 78px; }
  .discover { padding-top: 33px; padding-bottom: 105px; }
  .rankings { padding-top: 84px; padding-bottom: 92px; }
  .nearby { padding-top: 88px; padding-bottom: 92px; }
  .ai-studio { padding-top: 84px; padding-bottom: 92px; }
  .prepare { padding-top: 96px; padding-bottom: 104px; }
  .shortcut { min-height: 120px; padding: 19px; }
  .shortcut > svg { margin-bottom: 22px; }
  .ranking-row { min-height: 92px; grid-template-columns: 34px minmax(0, 1fr) 56px 20px; gap: 10px; }
  .nearby-item { min-height: 96px; grid-template-columns: 62px 1fr auto; gap: 13px; }
  .nearby-item img { width: 62px; height: 62px; }
  .journal-entry > button { min-height: 140px; grid-template-columns: 28px 100px 1fr 20px; gap: 12px; }
  .journal-image { width: 100px; height: 76px; }
}

/* Widen the overall reading canvas while keeping a controlled outer gutter. */
.section-shell { width: min(1480px, calc(100% - 4vw)); }
.rankings > .section-shell { width: min(1520px, calc(100% - 3vw)); }
.hero { width: min(1360px, calc(100% - 4vw)); }
.ranking-row { padding-inline: 20px; }
.prepare-heading { padding-inline: clamp(10px, 1.8vw, 24px); }
.prepare-heading h2,
.prepare-heading > p:last-child { padding-inline: 4px; }
.journal-no { padding-inline: 14px 8px; text-align: left; }
.detail-dialog .review-composer { padding: 20px 22px 24px; }
.detail-dialog .review-item { padding: 18px 20px; }
.detail-dialog .nearby-item { padding: 10px 14px; }
.shortcut-grid { border: 0; }
.shortcut { border: 0; }
.hero {
  width: 100%;
  max-width: none;
  min-height: 640px;
  height: 100svh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-media { inset: 0; opacity: .86; }
.hero-media { opacity: 1; }
.hero-media img { filter: none; }
.hero-overlay { background: transparent; }
.hero-grain { opacity: 0; }
.hero::before,
.hero::after { opacity: 0; }
.hero-index { display: none !important; }
.site-header,
.site-header.scrolled,
.overlay-open .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header { background: transparent; }
.site-header.scrolled,
.overlay-open .site-header { background: var(--glass-bg-strong); }
.hero-content {
  inset: 0 auto 0 0 !important;
  width: 27% !important;
  height: 100% !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(40px, 7vw, 100px) clamp(22px, 5vw, 88px);
  text-align: left !important;
  background: linear-gradient(90deg, rgba(248, 244, 236, .76) 0%, rgba(248, 244, 236, .64) 46%, rgba(248, 244, 236, .28) 72%, rgba(248, 244, 236, .08) 88%, rgba(248, 244, 236, 0) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(120%);
  backdrop-filter: blur(32px) saturate(120%);
}
.hero-content > * { margin-right: 0 !important; margin-left: 0 !important; text-align: left !important; }
.hero-foot { align-items: flex-start !important; justify-content: flex-start !important; }
.hero-content > * { position: relative !important; z-index: 1; }
.hero-content {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-content::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: -190px;
  bottom: 0;
  left: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(248, 244, 236, .74) 0%, rgba(248, 244, 236, .58) 48%, rgba(248, 244, 236, .22) 76%, rgba(248, 244, 236, 0) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(120%);
  backdrop-filter: blur(30px) saturate(120%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0, 0, 0, .82) 68%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0, 0, 0, .82) 68%, transparent 100%);
}
.hero h1 { font-size: clamp(42px, 3.5vw, 56px); line-height: 1.12; }
.hero-foot p { color: var(--ink); font-size: 13px; line-height: 1.85; }
.hero-kicker { color: var(--forest); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.hero-side-note { right: auto; left: clamp(24px, 5vw, 88px); text-align: left; }
.rankings .ranking-row,
.rankings .ranking-row:hover {
  padding-inline: 20px;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  transform: none;
  transition: none;
}

@media (max-width: 760px) {
  .section-shell { width: calc(100% - 4vw); }
  .rankings > .section-shell { width: calc(100% - 4vw); }
  .hero { width: calc(100% - 4vw); }
  .ranking-row { padding-inline: 14px; }
  .rankings .ranking-row,
  .rankings .ranking-row:hover { padding-inline: 14px; }
  .prepare-heading { padding-inline: 6px; }
  .journal-no { padding-inline: 8px 4px; }
  .detail-dialog .review-composer { padding: 16px 14px 18px; }
  .detail-dialog .review-item { padding: 15px 14px; }
  .detail-dialog .nearby-item { padding: 8px 10px; }
  .hero { width: 100%; min-height: 620px; height: 100svh; margin: 0; border-radius: 0; }
  .hero-content {
    width: 88% !important;
    padding: 34px 8vw;
    background: transparent;
  }
  .hero h1 { font-size: 36px; line-height: 1.16; }
  .hero-foot p { color: var(--ink); font-size: 12px; line-height: 1.8; }
  .hero-content::before { right: -120px; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
}

/* Dark-theme contrast pass for surfaces that previously used light-only overrides. */
html[data-theme="dark"] body {
  color: var(--ink);
  background: var(--paper);
}
html[data-theme="dark"] .hero-overlay { background: rgba(8, 14, 11, .16); }
html[data-theme="dark"] .hero-content::before {
  background: linear-gradient(90deg, rgba(23, 29, 26, .88) 0%, rgba(23, 29, 26, .7) 46%, rgba(23, 29, 26, .34) 76%, rgba(23, 29, 26, 0) 100%);
}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-foot p { color: var(--ink); }
html[data-theme="dark"] .hero-kicker { color: var(--gold); }
html[data-theme="dark"] .shortcut,
html[data-theme="dark"] .notice-strip,
html[data-theme="dark"] .search-workspace,
html[data-theme="dark"] .attraction-card-inner { background: var(--glass-bg); }
html[data-theme="dark"] .notice-strip > div { color: var(--ink); }
html[data-theme="dark"] .notice-strip > div svg { color: var(--accent); }
html[data-theme="dark"] .directory-search input::placeholder { color: var(--muted); }
html[data-theme="dark"] .ai-studio,
html[data-theme="dark"] .quote-band { background: var(--paper-deep); }
html[data-theme="dark"] .ai-messages,
html[data-theme="dark"] .message.assistant { background: var(--surface); }
html[data-theme="dark"] .message.user {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  font-weight: 400;
}
html[data-theme="dark"] .message.user > span { color: var(--forest); font-weight: 500; }
html[data-theme="dark"] .rankings { background: var(--paper-deep); }
html[data-theme="dark"] .ranking-row,
html[data-theme="dark"] .ranking-row:hover { background: var(--glass-bg); }
html[data-theme="dark"] .rankings .rank-number { color: var(--muted); }
html[data-theme="dark"] .rankings .ranking-row:nth-child(-n+3) .rank-number { color: var(--accent); }
html[data-theme="dark"] .ranking-row p,
html[data-theme="dark"] .ranking-score span,
html[data-theme="dark"] .rank-evidence span { color: var(--muted); }
html[data-theme="dark"] .detail-notice,
html[data-theme="dark"] .checklist label,
html[data-theme="dark"] .progress-track { background: var(--paper-deep); }
html[data-theme="dark"] .directory-search input,
html[data-theme="dark"] .filter-grid select,
html[data-theme="dark"] .sort-control select,
html[data-theme="dark"] .ranking-filters select,
html[data-theme="dark"] .nearby-toolbar select,
html[data-theme="dark"] .admin-head select,
html[data-theme="dark"] .review-composer textarea,
html[data-theme="dark"] .auth-dialog input,
html[data-theme="dark"] .ai-input textarea { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .ranking-filters option { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] .button-quiet,
html[data-theme="dark"] .load-more,
html[data-theme="dark"] .sort-control,
html[data-theme="dark"] .dialog-close { color: var(--ink); }
html[data-theme="dark"] .quick-prompts button,
html[data-theme="dark"] .search-history-row,
html[data-theme="dark"] .result-toolbar,
html[data-theme="dark"] .profile-section-title button { color: var(--muted); }
html[data-theme="dark"] .journal-copy h3,
html[data-theme="dark"] .detail-description h3,
html[data-theme="dark"] .reviews-section h3,
html[data-theme="dark"] .nearby-item h3 { color: var(--ink); }

html[data-theme="dark"] .intro-title h2,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .prepare-heading h2,
html[data-theme="dark"] .nearby h2,
html[data-theme="dark"] .ai-intro h2,
html[data-theme="dark"] .journal-copy h3,
html[data-theme="dark"] .detail-hero-copy h2,
html[data-theme="dark"] .auth-dialog h2,
html[data-theme="dark"] .profile-drawer h2,
html[data-theme="dark"] .admin-head h2 { color: var(--ink); }
html[data-theme="dark"] .intro-copy p,
html[data-theme="dark"] .section-heading > p,
html[data-theme="dark"] .prepare-heading > p:last-child,
html[data-theme="dark"] .ai-intro > p:not(.kicker),
html[data-theme="dark"] .journal-copy > p,
html[data-theme="dark"] .journal-copy > span,
html[data-theme="dark"] .detail-description p,
html[data-theme="dark"] .review-item p { color: var(--muted); }
html[data-theme="dark"] .shortcut span,
html[data-theme="dark"] .attraction-title-row h3,
html[data-theme="dark"] .attraction-meta b,
html[data-theme="dark"] .nearby-item h3,
html[data-theme="dark"] .checklist label b { color: var(--ink); }
html[data-theme="dark"] .shortcut small,
html[data-theme="dark"] .attraction-region,
html[data-theme="dark"] .attraction-meta small,
html[data-theme="dark"] .nearby-item p,
html[data-theme="dark"] .nearby-distance span,
html[data-theme="dark"] .checklist label small { color: var(--muted); }
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .footer-links button,
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-meta,
html[data-theme="dark"] .footer-meta a { color: var(--muted); }

/* Keep hero copy readable without letting it take over the landscape. */
.hero-content {
  width: 27% !important;
  max-width: none !important;
  padding-left: clamp(24px, 5vw, 72px) !important;
  padding-right: 18px !important;
  text-align: left !important;
}
.hero-content::before {
  right: -260px;
  background: linear-gradient(
    90deg,
    rgba(8, 14, 11, .72) 0%,
    rgba(8, 14, 11, .56) 42%,
    rgba(8, 14, 11, .28) 70%,
    rgba(8, 14, 11, 0) 100%
  ) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%) !important;
  backdrop-filter: blur(28px) saturate(135%) !important;
}
.hero-content #heroTitle {
  display: block;
  width: min(100%, 8ch) !important;
  max-width: 8ch !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(32px, 2.8vw, 48px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}
.hero-content .hero-kicker,
.hero-content .hero-foot p {
  color: rgba(255, 255, 255, .9) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

@media (max-width: 760px) {
  .hero-content {
    width: 88% !important;
    padding: 34px 8vw !important;
  }
  .hero-content::before { right: -140px; }
  .hero-content #heroTitle {
    max-width: 8ch !important;
    font-size: clamp(32px, 8vw, 42px) !important;
  }
}

/* Dark theme contrast lock: no dark text or icon remains on dark surfaces. */
html[data-theme="dark"] {
  --ink: #fff;
  --muted: #d5ddd7;
  --line: rgba(255, 255, 255, .2);
  --line-strong: rgba(255, 255, 255, .42);
  --glass-line: rgba(255, 255, 255, .34);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .desktop-nav a,
html[data-theme="dark"] .header-actions,
html[data-theme="dark"] .button-quiet,
html[data-theme="dark"] .load-more,
html[data-theme="dark"] .sort-control,
html[data-theme="dark"] .dialog-close,
html[data-theme="dark"] .account-button {
  color: #fff !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] option,
html[data-theme="dark"] label,
html[data-theme="dark"] .intro-copy p,
html[data-theme="dark"] .section-heading > p,
html[data-theme="dark"] .notice-item,
html[data-theme="dark"] .shortcut span,
html[data-theme="dark"] .attraction-title-row h3,
html[data-theme="dark"] .attraction-meta b,
html[data-theme="dark"] .ranking-row h3,
html[data-theme="dark"] .nearby-item h3,
html[data-theme="dark"] .ai-result p,
html[data-theme="dark"] .checklist label b,
html[data-theme="dark"] .journal-copy h3 {
  color: #fff !important;
}
html[data-theme="dark"] .kicker,
html[data-theme="dark"] small,
html[data-theme="dark"] .intro-copy p,
html[data-theme="dark"] .section-heading > p,
html[data-theme="dark"] .prepare-heading > p:last-child,
html[data-theme="dark"] .nearby-intro > p:not(.kicker),
html[data-theme="dark"] .ai-intro > p:not(.kicker),
html[data-theme="dark"] .journal-copy > p,
html[data-theme="dark"] .journal-copy > span,
html[data-theme="dark"] .detail-description p,
html[data-theme="dark"] .review-item p,
html[data-theme="dark"] .shortcut small,
html[data-theme="dark"] .attraction-region,
html[data-theme="dark"] .attraction-meta small,
html[data-theme="dark"] .nearby-item p,
html[data-theme="dark"] .nearby-distance span,
html[data-theme="dark"] .checklist label small,
html[data-theme="dark"] .rank-score span,
html[data-theme="dark"] .rank-evidence span,
html[data-theme="dark"] .journal-no {
  color: #d5ddd7 !important;
}
html[data-theme="dark"] svg,
html[data-theme="dark"] [data-lucide] {
  color: #fff !important;
  stroke: currentColor;
}
html[data-theme="dark"] .ranking-filters option,
html[data-theme="dark"] .directory-search input::placeholder {
  color: #fff !important;
}
html[data-theme="dark"] .primary-light {
  color: #fff !important;
  background: var(--forest-soft) !important;
  border-color: var(--glass-line) !important;
}

.quote-inner blockquote,
html[data-theme="dark"] .quote-inner blockquote {
  color: #fff !important;
}

html[data-theme="dark"] .stats-band .stat strong,
html[data-theme="dark"] .stats-band .stat span {
  color: #fff !important;
}

/* Location permission is a primary action and must stay legible over glass. */
#locateButton,
#locateButton:hover {
  min-height: 46px;
  padding-inline: 20px;
  color: #fff !important;
  background: #233b32 !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  box-shadow: 0 8px 24px rgba(20, 36, 30, .2);
}
#locateButton svg {
  color: #fff !important;
  stroke: currentColor;
}
html[data-theme="dark"] #locateButton,
html[data-theme="dark"] #locateButton:hover {
  background: #315a4b !important;
  border-color: rgba(255, 255, 255, .5) !important;
}

html[data-theme="dark"] .hero-side-note,
html[data-theme="dark"] .hero-side-note span,
html[data-theme="dark"] .hero-side-note b {
  color: #fff !important;
}
html[data-theme="dark"] .hero-side-note {
  border-top-color: rgba(255, 255, 255, .55) !important;
}
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .text-link span {
  color: #fff !important;
}
html[data-theme="dark"] .text-link {
  border-bottom-color: rgba(255, 255, 255, .62) !important;
}

.hero-side-note,
.hero-side-note span,
.hero-side-note b {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.hero-side-note {
  border-top-color: rgba(255, 255, 255, .58) !important;
}

/* Integrate the search action into the field instead of nesting a pill in a box. */
.directory-search {
  overflow: hidden;
  border-radius: 8px;
}
.directory-search .button-primary,
.directory-search .button-primary:hover,
html[data-theme="dark"] .directory-search .button-primary,
html[data-theme="dark"] .directory-search .button-primary:hover {
  align-self: stretch;
  min-width: 96px;
  height: 100%;
  margin: 0;
  padding-inline: 24px;
  color: #fff !important;
  background: #315a4b !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 600;
}
.directory-search .button-primary::after {
  content: none !important;
}

@media (max-width: 760px) {
  .directory-search .button-primary,
  .directory-search .button-primary:hover {
    min-width: 54px;
    padding-inline: 8px;
    font-size: 10px;
  }
}

.profile-footer [data-logout],
.profile-footer [data-logout]:hover {
  color: #fff !important;
  background: #315a4b !important;
  border-color: #315a4b !important;
  box-shadow: none !important;
}
.profile-footer [data-logout] svg {
  color: #fff !important;
  stroke: currentColor;
}

/* Keep profile actions at the bottom while the records area absorbs free space. */
.profile-drawer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#profileContent {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
#profileContent .profile-list {
  min-height: 0;
  flex: 1;
  align-content: start;
  overflow-y: auto;
}
#profileContent .profile-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 24px;
}

/* Crossfade the full page when the theme changes. */
html {
  view-transition-name: theme-page;
}

.theme-icon {
  transition-duration: 1s;
}

::view-transition-old(theme-page),
::view-transition-new(theme-page) {
  animation-duration: 1.7s;
  animation-timing-function: cubic-bezier(.22, .72, .24, 1);
}

::view-transition-old(theme-page) {
  animation-name: theme-page-curtain-out;
}

::view-transition-new(theme-page) {
  animation-name: theme-page-curtain-in;
}

@keyframes theme-page-curtain-out {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(50% 0 50% 0); }
}

@keyframes theme-page-curtain-in {
  from { clip-path: inset(50% 0 50% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(theme-page),
  ::view-transition-new(theme-page) {
    animation-duration: .01ms;
  }
}

/* Hero carousel navigation and directional slide transition. */
.hero { height: calc(100svh - 78px); }

.hero-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: none;
}

.hero-media {
  --hero-enter-x: 2.5%;
  --hero-exit-x: -1.5%;
}

.hero-media.hero-direction-prev {
  --hero-enter-x: -2.5%;
  --hero-exit-x: 1.5%;
}

.hero-image-outgoing {
  z-index: 1;
  pointer-events: none;
  animation: hero-slide-out .9s cubic-bezier(.22, .72, .24, 1) both !important;
}

#heroImage.hero-image-entering {
  z-index: 2;
  animation: hero-slide-in .9s cubic-bezier(.22, .72, .24, 1) both !important;
}

@keyframes hero-slide-in {
  from { opacity: 0; transform: translate3d(var(--hero-enter-x), 0, 0) scale(1.065); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hero-slide-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(var(--hero-exit-x), 0, 0) scale(1.025); }
}

.hero.is-slide-changing .hero-kicker,
.hero.is-slide-changing #heroTitle,
.hero.is-slide-changing .hero-foot,
.hero.is-slide-changing .hero-side-note {
  animation: hero-copy-in .65s cubic-bezier(.22, .72, .24, 1) both;
}

.hero.is-slide-changing #heroTitle { animation-delay: .07s; }
.hero.is-slide-changing .hero-foot { animation-delay: .13s; }
.hero.is-slide-changing .hero-side-note { animation-delay: .16s; }

.hero.slide-transition-complete .hero-kicker,
.hero.slide-transition-complete #heroTitle,
.hero.slide-transition-complete .hero-foot,
.hero.slide-transition-complete .hero-side-note {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: none;
}

@keyframes hero-copy-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero-controls {
  position: absolute;
  z-index: 5;
  right: clamp(22px, 4vw, 64px);
  bottom: 28px;
  display: flex;
  gap: 10px;
}

.hero-controls[hidden] { display: none; }

.hero-controls .hero-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: rgba(14, 22, 18, .3);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.hero-controls .hero-arrow:hover {
  color: #233b32;
  background: rgba(255, 255, 255, .94);
  border-color: rgba(255, 255, 255, .94);
  transform: translateY(-2px);
}

.hero-controls .hero-arrow:active { transform: translateY(0) scale(.96); }
.hero-controls .hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-controls .hero-arrow svg { width: 17px; height: 17px; stroke-width: 1.7; }

.hero-pagination {
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .hero { height: calc(100svh - 72px); }
  .hero-controls { right: 6vw; bottom: 25px; gap: 8px; }
  .hero-controls .hero-arrow { width: 42px; height: 42px; }
  .hero-pagination { left: 8vw; bottom: 45px; transform: none; }
  .hero-side-note { bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-outgoing,
  #heroImage.hero-image-entering,
  .hero.is-slide-changing .hero-kicker,
  .hero.is-slide-changing #heroTitle,
  .hero.is-slide-changing .hero-foot,
.hero.is-slide-changing .hero-side-note { animation: none !important; }
}

/* Route and header rules must remain last because the theme file contains legacy overrides. */
body.page-route > .site-footer { display: none; }
.site-header { position: fixed !important; }
.desktop-nav a.active { opacity: 1; }
.desktop-nav a.active::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 1120px) and (min-width: 761px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-inline: 2.2vw; }
  .desktop-nav { display: flex; gap: clamp(8px, 1vw, 14px); }
  .desktop-nav a { font-size: 8px; }
  .brand-en { display: none; }
}

@media (max-width: 760px) {
  body { padding-top: 108px; }
  body.page-route { padding-top: 0; }
  .site-header,
  .site-header.scrolled,
  .page-route .site-header,
  .page-route .site-header.scrolled {
    position: fixed !important;
    height: 108px;
    min-height: 108px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 52px 40px;
    gap: 0 12px;
    padding: 8px 5vw;
    color: var(--ink);
    background: var(--header-bg);
    border-color: var(--line);
  }
  .brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .desktop-nav {
    display: flex !important;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .desktop-nav::-webkit-scrollbar { display: none; }
  .desktop-nav a { flex: 0 0 auto; padding: 11px 0 10px; font-size: 10px; }
  .menu-button { display: none !important; }
  .mobile-panel { display: none !important; }
  .hero { height: calc(100svh - 126px); min-height: 540px; }
  .page-view { padding-top: 108px; }
}

/* Medium full-width standalone carousel, intentionally last. */
.page-view-hero {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 500px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 86px 8vw 80px !important;
  align-content: center !important;
  color: #fff !important;
  border-bottom: 0 !important;
  isolation: isolate;
}
.page-view-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, rgba(6, 13, 10, .72), rgba(6, 13, 10, .46) 54%, rgba(6, 13, 10, .28));
  content: "";
  pointer-events: none;
}
.page-view-hero > :not(.page-carousel) { max-width: 660px !important; color: #fff !important; }
.page-view-hero .page-back,
.page-view-hero .kicker,
.page-view-hero h1,
.page-view-hero > p:last-child { color: #fff !important; }
.page-view-hero .page-back { opacity: .82; }
.page-view-hero .page-back:hover { opacity: 1; }
.page-carousel { position: absolute !important; z-index: 0; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; box-shadow: none; }
.page-carousel-media { position: absolute; inset: 0; }
.page-carousel-media img { opacity: 1; }
.page-carousel-controls { z-index: 3; right: 5vw; bottom: 28px; left: 5vw; }
.page-carousel-controls button { width: 42px; height: 42px; background: rgba(8, 16, 12, .34); }
.page-carousel-controls button svg { width: 16px; height: 16px; }
.page-carousel-controls > div button { width: 20px; height: 2px; }
.page-carousel-controls > div button.active { width: 40px; }

@media (max-width: 760px) {
  .page-view-hero { height: 500px !important; min-height: 0 !important; padding: 90px 7vw 78px !important; align-content: center !important; }
  .page-view-hero > :not(.page-carousel) { max-width: 100% !important; }
  .page-carousel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0; }
  .page-view-hero::after { background: linear-gradient(180deg, rgba(6, 13, 10, .56), rgba(6, 13, 10, .72)); }
  .page-carousel-controls { right: 7vw; bottom: 24px; left: 7vw; }
}

/* Definitive final overrides. */
.desktop-nav a { font-size: 13px !important; font-weight: 500 !important; }
.page-view-hero { height: 390px !important; min-height: 0 !important; padding-top: 72px !important; padding-bottom: 58px !important; }
.back-to-top { position: fixed; z-index: 120; right: 24px; bottom: 24px; display: grid; width: 44px; height: 44px; place-items: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 12px 30px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: white; background: var(--accent); border-color: var(--accent); }
.back-to-top svg { width: 17px; height: 17px; }
.detail-back-to-top { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 10px 14px; color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: 10px; }
.detail-back-to-top:hover { color: var(--ink); border-color: var(--line-strong); }
.detail-back-to-top svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .desktop-nav a { font-size: 12px !important; }
  .page-view-hero { height: 420px !important; padding: 72px 7vw 56px !important; }
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* Pull standalone page content closer to the carousel's lower edge. */
#rankings-page .rankings-page-content,
#favorites-page .page-view-body,
#profile-page .page-view-body {
  padding-top: 24px !important;
}

@media (max-width: 760px) {
  #rankings-page .rankings-page-content,
  #favorites-page .page-view-body,
  #profile-page .page-view-body {
    padding-top: 20px !important;
  }
}

/* Keep the detail return control pinned to the card's lower-right corner. */
.detail-back-to-top {
  position: fixed !important;
  z-index: 155;
  right: max(42px, calc((100vw - 1120px) / 2 + 24px));
  bottom: 52px;
  display: grid !important;
  width: 44px;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.detail-back-to-top:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.detail-back-to-top svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .detail-back-to-top { right: 18px; bottom: 18px; width: 40px; height: 40px; }
}

/* Keep the detail card fixed while its content scrolls underneath the controls. */
.detail-dialog { display: flex !important; flex-direction: column; overflow: hidden !important; }
#detailContent { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.detail-back-to-top { position: absolute !important; z-index: 8; right: 24px; bottom: 24px; display: grid !important; width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; place-items: center; }
#detailOverlay { padding: 0; place-items: stretch; }
#detailOverlay .detail-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
.checklist .checklist-custom-input { position: static; z-index: 1; grid-column: 2; grid-row: 1; width: 100%; min-width: 0; padding: 4px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); outline: 0; opacity: 1; pointer-events: auto; font: inherit; font-size: 10px; }
.checklist .checklist-custom-input::placeholder { color: var(--muted); opacity: .8; }
.checklist .checklist-custom-input:focus { border-bottom-color: var(--accent); }
.checklist-custom-item small { grid-column: 2; grid-row: 2; }
@media (max-width: 760px) { .detail-back-to-top { right: 18px; bottom: 18px; width: 40px; height: 40px; } }

/* Checklist editing and standalone browsing history. */
.checklist-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.checklist-progress-head > div:first-child { display: flex; align-items: baseline; gap: 12px; }
.checklist-actions { display: flex; align-items: center; gap: 8px; }
.checklist-actions button { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 7px 11px; color: var(--ink); background: transparent; border: 1px solid var(--line); font-size: 9px; }
.checklist-actions button:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.checklist-actions svg { width: 14px; height: 14px; }
.checklist-custom-item:has(input[type="checkbox"]:checked) .checklist-custom-input { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); }
.history-home-entry { display: grid; min-height: 150px; grid-template-columns: 48px 1fr auto; align-items: center; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.history-home-entry > svg { width: 28px; height: 28px; color: var(--accent); }
.history-home-entry div { display: grid; gap: 7px; }
.history-home-entry strong { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.history-home-entry span { color: var(--muted); font-size: 10px; }

@media (max-width: 760px) {
  .checklist-progress-head { align-items: flex-start; }
  .checklist-progress-head > div:first-child { display: grid; gap: 4px; }
  .checklist-actions button span { display: none; }
  .checklist-actions button { width: 34px; padding: 0; justify-content: center; }
  .history-home-entry { grid-template-columns: 38px 1fr; gap: 16px; }
  .history-home-entry .button-primary { grid-column: 1 / -1; justify-self: start; }
  .history-home-entry strong { font-size: 22px; }
}

/* Standalone page headers overlay their carousels just like the home page. */
body.page-route .page-view {
  min-height: 100vh;
  padding-top: 0 !important;
}
body.page-route .site-header:not(.scrolled) {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.page-route .site-header:not(.scrolled) .brand,
body.page-route .site-header:not(.scrolled) .brand-en,
body.page-route .site-header:not(.scrolled) .desktop-nav a,
body.page-route .site-header:not(.scrolled) .header-actions,
body.page-route .site-header:not(.scrolled) .icon-button,
body.page-route .site-header:not(.scrolled) .account-button {
  color: #fff !important;
}
body.page-route .site-header:not(.scrolled) .icon-button,
body.page-route .site-header:not(.scrolled) .account-button {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .48) !important;
}
body.page-route .site-header:not(.scrolled) .desktop-nav a::after {
  background: #fff !important;
}

/* Refresh the active page from the fixed header without leaving the current route. */
.header-refresh-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}
.header-refresh-button:hover,
.header-refresh-button:focus-visible {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  outline: 0;
  transform: rotate(-24deg);
}
.header-refresh-button svg { width: 17px; height: 17px; }
body.page-route .site-header:not(.scrolled) .header-refresh-button,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .header-refresh-button {
  color: #fff !important;
  background: rgba(10, 18, 14, .24) !important;
  border-color: rgba(255, 255, 255, .62) !important;
}
@media (max-width: 760px) {
  .header-refresh-button { width: 36px; height: 36px; }
}

@media (max-width: 760px) {
  body.page-route .page-view { padding-top: 0 !important; }
  body.page-route .site-header:not(.scrolled) {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, .22) !important;
  }
}

/* Ranking page controls and evidence hierarchy. */
#rankingPageTabs {
  flex-wrap: wrap;
}
#rankingPageTabs button {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 13px;
  font-weight: 500;
}
#rankingPageFilters,
#rankings-page .ranking-filters {
  flex-wrap: wrap;
}
.rank-evidence {
  display: grid;
  gap: 5px;
  justify-items: start;
}
.rank-evidence strong {
  font-size: 19px;
  line-height: 1.1;
}
.rank-evidence span {
  font-size: 8px;
  line-height: 1.4;
}
.ranking-load-more {
  display: flex;
}
.ranking-load-more[hidden] {
  display: none;
}

@media (max-width: 760px) {
  #rankingPageTabs button {
    padding-inline: 12px;
    font-size: 12px;
  }
}

/* Keep primary actions legible after the light glass layer is applied. */
html:not([data-theme="dark"]) .button-primary,
html:not([data-theme="dark"]) .button-primary:hover,
html:not([data-theme="dark"]) .primary-light,
html:not([data-theme="dark"]) .primary-light:hover {
  color: #fff !important;
  background: var(--forest) !important;
  border-color: var(--forest) !important;
}
html:not([data-theme="dark"]) .button-primary:hover,
html:not([data-theme="dark"]) .primary-light:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Standalone routes are hidden during reveal initialization, so their
   primary content should become fully visible as soon as the route opens. */
body.page-route .page-view:not([hidden]) .reveal-item {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

/* Light theme contrast adapts the header to image and content backgrounds. */
html:not([data-theme="dark"]) {
  --muted: #545a53;
  --forest: #4e6154;
  --forest-soft: #607265;
  --line: rgba(63, 67, 59, .2);
  --line-strong: rgba(63, 67, 59, .38);
}
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(9, 15, 12, .48), rgba(9, 15, 12, .16)) !important;
  border-color: rgba(255, 255, 255, .36) !important;
  box-shadow: none !important;
}
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .brand,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .brand-en,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .desktop-nav a,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .header-actions,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .icon-button,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .account-button {
  color: #fff !important;
  opacity: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .72);
}
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .icon-button,
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .account-button {
  background: rgba(10, 18, 14, .24) !important;
  border-color: rgba(255, 255, 255, .62) !important;
}
html:not([data-theme="dark"]) body:not(.page-route):not(.overlay-open) .site-header:not(.scrolled) .desktop-nav a::after {
  background: #fff !important;
}
html:not([data-theme="dark"]) .site-header.scrolled,
html:not([data-theme="dark"]) .overlay-open .site-header {
  color: var(--ink) !important;
  background: rgba(244, 239, 229, .96) !important;
  border-color: var(--line) !important;
}
html:not([data-theme="dark"]) .site-header.scrolled .brand-en,
html:not([data-theme="dark"]) .site-header.scrolled .desktop-nav a,
html:not([data-theme="dark"]) .overlay-open .site-header .brand-en,
html:not([data-theme="dark"]) .overlay-open .site-header .desktop-nav a {
  color: var(--ink) !important;
  opacity: .88;
  text-shadow: none;
}

body.page-route .site-header:not(.scrolled) .brand,
body.page-route .site-header:not(.scrolled) .brand-en,
body.page-route .site-header:not(.scrolled) .desktop-nav a,
body.page-route .site-header:not(.scrolled) .header-actions,
body.page-route .site-header:not(.scrolled) .icon-button,
body.page-route .site-header:not(.scrolled) .account-button {
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .72);
}

/* Carousel copy stays readable throughout slide transitions. */
.hero .hero-kicker,
.hero #heroTitle,
.hero .hero-foot,
.hero .hero-side-note {
  opacity: 1 !important;
}

/* Larger, more legible authentication dialog typography. */
.auth-dialog {
  width: min(520px, 100%);
}
.auth-dialog > .kicker {
  font-size: 11px;
}
.auth-dialog h2 {
  font-size: 44px;
  line-height: 1.2;
}
.auth-tabs {
  margin-block: 28px;
}
.auth-tabs button {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 13px;
}
.auth-dialog form {
  gap: 20px;
}
.auth-dialog label {
  display: grid;
  gap: 9px;
  font-size: 12px;
}
.auth-dialog label > span {
  font-size: 12px;
  font-weight: 500;
}
.auth-dialog input {
  height: 52px;
  padding-inline: 15px;
  font-size: 14px;
}
.auth-password-field {
  position: relative;
}
.auth-password-field input {
  width: 100%;
  padding-right: 54px;
}
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  transform: translateY(-50%);
}
.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  color: var(--ink);
  background: var(--glass-bg-strong);
  border-color: var(--line);
  outline: 0;
}
.auth-password-toggle svg {
  width: 18px;
  height: 18px;
}
.auth-dialog .button-primary {
  min-height: 48px;
  font-size: 13px;
}
.auth-dialog .form-error {
  min-height: 18px;
  font-size: 11px;
}
@media (max-width: 760px) {
  .auth-dialog {
    padding: 38px 24px 28px;
  }
  .auth-dialog h2 {
    font-size: 38px;
  }
}

/* Keep secondary labels readable on the light surface. */
html:not([data-theme="dark"]) .attraction-tags span {
  color: #3f4a43;
  font-size: 10px;
  font-weight: 500;
}
html:not([data-theme="dark"]) .detail-notice {
  color: #4b564e;
  font-size: 12px;
  line-height: 1.8;
}
html:not([data-theme="dark"]) .profile-tabs button {
  color: #4b564e;
  font-size: 11px;
  opacity: 1;
}
html:not([data-theme="dark"]) .profile-tabs button.active,
html:not([data-theme="dark"]) .profile-tabs button:hover {
  color: #30443a;
}
html:not([data-theme="dark"]) .profile-section-title span,
html:not([data-theme="dark"]) .profile-section-title button {
  color: #4b564e;
  font-size: 10px;
  opacity: 1;
}

/* Home discovery previews. */
.home-featured {
  padding-top: 34px;
  padding-bottom: 126px;
}
.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}
.home-section-heading .kicker { margin-bottom: 12px; }
.home-section-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.2;
}
.home-section-link {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 500;
  transition: color .2s ease, border-color .2s ease;
}
.home-section-link:hover { color: var(--accent); border-color: var(--accent); }
.home-section-link svg { width: 15px; height: 15px; }
.home-popular-grid { margin-top: 38px; }

.home-ranking-preview {
  padding: 100px 0 110px;
  color: #f2f4f1;
  background: var(--forest);
}
.home-ranking-heading { border-color: rgba(255, 255, 255, .24); }
.home-ranking-heading .kicker { color: rgba(255, 255, 255, .68); }
.home-ranking-heading .home-section-link {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.home-ranking-heading .home-section-link:hover { color: #f0b091; border-color: #f0b091; }
.home-ranking-list { margin-top: 12px; }
.home-ranking-row {
  display: grid;
  min-height: 96px;
  grid-template-columns: 64px minmax(230px, 1fr) 110px 120px 28px;
  align-items: center;
  gap: 20px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: background .22s ease, padding .22s ease;
}
.home-ranking-row:hover { padding-right: 18px; padding-left: 18px; background: rgba(255, 255, 255, .055); }
.home-rank-number {
  color: rgba(255, 255, 255, .46);
  font-family: var(--serif);
  font-size: 28px;
}
.home-ranking-row:nth-child(-n+3) .home-rank-number { color: #f0b091; }
.home-rank-place { display: flex; min-width: 0; align-items: center; gap: 16px; }
.home-rank-place img { width: 68px; height: 54px; flex: 0 0 auto; object-fit: cover; }
.home-rank-place div { min-width: 0; }
.home-rank-place h3 {
  margin: 0 0 5px;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-rank-place p {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-rank-score strong,
.home-rank-index strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.home-rank-score span,
.home-rank-index span { display: block; margin-top: 4px; color: rgba(255, 255, 255, .58); font-size: 8px; }
.home-ranking-row > svg { width: 17px; height: 17px; justify-self: end; }

@media (max-width: 1120px) and (min-width: 761px) {
  .home-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-ranking-row { grid-template-columns: 52px minmax(200px, 1fr) 90px 100px 24px; gap: 14px; }
}

@media (max-width: 760px) {
  .home-featured { padding-top: 20px; padding-bottom: 88px; }
  .home-section-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .home-section-heading h2 { font-size: 34px; }
  .home-section-link { min-height: 34px; }
  .home-popular-grid { margin-top: 30px; }
  .home-ranking-preview { padding: 78px 0 86px; }
  .home-ranking-row {
    min-height: 86px;
    grid-template-columns: 34px minmax(0, 1fr) 58px 18px;
    gap: 10px;
    padding-inline: 4px;
  }
  .home-ranking-row:hover { padding-inline: 4px; }
  .home-rank-number { font-size: 22px; }
  .home-rank-place { gap: 10px; }
  .home-rank-place img { width: 50px; height: 48px; }
  .home-rank-place h3 { font-size: 17px; }
  .home-rank-score strong { font-size: 16px; }
  .home-rank-index { display: none; }
}

/* Give the standalone profile workspace a proper wide-screen reading scale. */
@media (min-width: 1200px) {
  #profile-page .profile-page-body {
    width: min(1320px, calc(100% - 10vw));
  }
  #profilePageContent {
    max-width: none;
  }
  #profilePageContent .profile-head {
    gap: 34px;
    padding-bottom: 32px;
  }
  #profilePageContent .profile-identity {
    gap: 20px;
  }
  #profilePageContent .profile-avatar {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    font-size: 28px;
  }
  #profilePageContent .profile-head h2 {
    font-size: 38px;
    line-height: 1.2;
  }
  #profilePageContent .profile-head p {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.7;
  }
  #profilePageContent .profile-head-actions {
    gap: 10px;
  }
  #profilePageContent .profile-head-actions button {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 12px;
  }
  #profilePageContent .profile-head-actions svg {
    width: 16px;
    height: 16px;
  }
  #profilePageContent .profile-tabs {
    margin: 30px 0 24px;
  }
  #profilePageContent .profile-tabs button {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 13px;
  }
  #profilePageContent .profile-section-title {
    margin-bottom: 14px;
  }
  #profilePageContent .profile-section-title span,
  #profilePageContent .profile-section-title button {
    font-size: 12px;
  }
  #profilePageContent .profile-item {
    min-height: 94px;
    grid-template-columns: 72px minmax(0, 1fr) 40px;
    gap: 18px;
  }
  #profilePageContent .profile-item > img {
    width: 72px;
    height: 62px;
  }
  #profilePageContent .profile-item h3 {
    margin-bottom: 7px;
    font-size: 21px;
  }
  #profilePageContent .profile-item p {
    font-size: 11px;
    line-height: 1.7;
  }
  #profilePageContent .profile-item > button:last-child {
    width: 40px;
    height: 40px;
  }
  #profilePageContent .profile-item svg {
    width: 16px;
    height: 16px;
  }
  #profilePageContent .profile-empty {
    font-size: 13px;
  }
}

/* The account drawer keeps its own, slightly denser desktop scale. */
@media (min-width: 761px) {
  .profile-drawer {
    width: min(640px, 100%);
    padding: 52px;
  }
  #profileContent .profile-head {
    gap: 22px;
    padding-bottom: 30px;
  }
  #profileContent .profile-avatar {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    font-size: 26px;
  }
  #profileContent .profile-head h2 {
    font-size: 34px;
  }
  #profileContent .profile-head p {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.65;
  }
  #profileContent .profile-head-actions button {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 11px;
  }
  #profileContent .profile-tabs {
    margin: 28px 0 22px;
  }
  #profileContent .profile-tabs button {
    min-height: 44px;
    padding-inline: 15px;
    font-size: 12px;
  }
  #profileContent .profile-section-title {
    margin-bottom: 13px;
  }
  #profileContent .profile-section-title span,
  #profileContent .profile-section-title button {
    font-size: 11px;
  }
  #profileContent .profile-item {
    min-height: 84px;
    grid-template-columns: 60px minmax(0, 1fr) 34px;
    gap: 16px;
  }
  #profileContent .profile-item > img {
    width: 60px;
    height: 52px;
  }
  #profileContent .profile-item h3 {
    margin-bottom: 6px;
    font-size: 18px;
  }
  #profileContent .profile-item p {
    font-size: 10px;
    line-height: 1.65;
  }
  #profileContent .profile-item > button:last-child {
    width: 34px;
    height: 34px;
  }
  #profileContent .profile-item svg {
    width: 15px;
    height: 15px;
  }
  #profileContent .profile-empty {
    font-size: 12px;
  }
}