:root {
  --bg: #f6efdf;
  --surface: #fffcf3;
  --surface-raised: #ffffff;
  --ink: #211c15;
  --ink-soft: #6b5e4c;
  --ink-faint: #9a8c74;
  --line: rgba(33, 28, 21, 0.14);
  --blue: #12305c;
  --blue-soft: #eff2f8;
  --red: #a82a2e;
  --red-soft: #fbeae9;
  --gold: #a97c22;
  --gold-soft: #f4e7c9;
  --gold-strong: #8a6316;
  --shadow: 0 1px 2px rgba(33, 28, 21, 0.06), 0 8px 24px -12px rgba(33, 28, 21, 0.18);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1420;
    --surface: #161f30;
    --surface-raised: #1b2536;
    --ink: #f2ebda;
    --ink-soft: #b2a891;
    --ink-faint: #7c7562;
    --line: rgba(242, 235, 218, 0.13);
    --blue: #8fb0e3;
    --blue-soft: #1b2a40;
    --red: #e2696c;
    --red-soft: #3a1e20;
    --gold: #e7be68;
    --gold-soft: #34281a;
    --gold-strong: #f0c978;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg: #0d1420;
  --surface: #161f30;
  --surface-raised: #1b2536;
  --ink: #f2ebda;
  --ink-soft: #b2a891;
  --ink-faint: #7c7562;
  --line: rgba(242, 235, 218, 0.13);
  --blue: #8fb0e3;
  --blue-soft: #1b2a40;
  --red: #e2696c;
  --red-soft: #3a1e20;
  --gold: #e7be68;
  --gold-soft: #34281a;
  --gold-strong: #f0c978;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

section[id],
#top {
  scroll-margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display), sans-serif;
  text-wrap: balance;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin: 0;
}

.mono {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* Hero: profile panel blended into the cover photo, single band */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 34vw, 420px);
  margin-top: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface-raised);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg .banner {
  height: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.85) 62%, black 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.85) 62%, black 80%);
}
.banner {
  position: relative;
  background: var(--surface-raised);
  overflow: hidden;
}
.banner-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.banner-photo.is-active {
  opacity: 1;
}
.banner-dots {
  position: absolute;
  right: 24px;
  bottom: 76px;
  display: flex;
  gap: 7px;
  z-index: 2;
}
.banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 231, 201, 0.55);
  transition: background 0.3s ease, transform 0.3s ease;
}
.banner-dot.is-active {
  background: #f4e7c9;
  transform: scale(1.25);
}

.hero-text {
  position: relative;
  z-index: 1;
  padding: 28px 20px 28px 32px;
  max-width: 48%;
}
.hero-card-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}
.hero-avatar {
  flex: 0 0 auto;
  width: clamp(140px, 15vw, 200px);
  aspect-ratio: 800 / 1200;
  height: auto;
  margin-top: 0;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 3px solid var(--surface-raised);
  box-shadow: var(--shadow), 0 0 0 2px var(--gold-strong);
  object-fit: cover;
  object-position: center 22%;
}
.hero-verified-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2f7a3d;
  border: 3px solid var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-verified-icon {
  width: 12px;
  height: 12px;
  color: #fff;
}
.hero-card-text h1 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin: 0 0 6px;
}
.hero-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.hero-meta-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--gold-strong);
}
.hero-bio {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 10px 0 12px;
  text-align: justify;
  text-justify: inter-word;
}
@media (max-width: 760px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero-bg {
    position: static;
    height: 190px;
  }
  .hero-bg .banner {
    mask-image: linear-gradient(180deg, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%);
  }
  .banner-dots {
    right: 50%;
    bottom: 12px;
    transform: translateX(50%);
  }
  .hero-text {
    max-width: 100%;
    padding: 18px 20px 22px;
  }
  .hero-card-left {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .hero-card-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-meta-line {
    justify-content: center;
  }
  .hero-text .lang-pills,
  .hero-text .stat-pills {
    justify-content: center;
  }
}

/* Profile row (legacy — kept for reference, no longer rendered) */
.profile-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 42px 0 18px;
  flex-wrap: wrap;
}
.emblem {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  margin-top: 0;
  border-radius: 18%;
  background: var(--surface-raised);
  border: 4px solid var(--bg);
  box-shadow: var(--shadow), 0 0 0 2px var(--gold-strong);
  object-fit: cover;
  object-position: center 22%;
}
.profile-main {
  flex: 1 1 320px;
  min-width: 260px;
}
.profile-main h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 4px;
}
.profile-meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 10px;
  max-width: 62ch;
}
.lang-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.lang-pill {
  display: inline-flex;
  padding: 3px;
  border-radius: 6px;
  background: var(--gold-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  line-height: 0;
}
.lang-flag {
  width: 28px;
  height: 18px;
  border-radius: 3px;
  display: block;
}
.stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.stat-pills strong {
  color: var(--ink);
  font-weight: 600;
}
.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stat-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--gold-strong);
}
.btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}
.btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.btn-primary {
  background: var(--red);
  color: #fbeae9;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(168, 42, 46, 0.5);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink-faint);
}

/* Tabs */
.tabbar {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar {
  display: none;
}
.tab {
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink-soft);
  padding: 14px 2px 16px;
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  display: inline-block;
}
.tab:hover {
  color: var(--ink);
}
.tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--red);
}

.section-head {
  margin-bottom: 18px;
}
.section-head h2 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}
.section-head p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.95rem;
  max-width: 70ch;
}
.section-head-center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.section-head-center p {
  margin-left: auto;
  margin-right: auto;
}
.section-head-accent {
  display: block;
  width: 56px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-strong), var(--gold));
}

/* About */
.about-crest {
  text-align: center;
  margin-bottom: 4px;
}
.crest-title {
  font-family: var(--font-mono), monospace;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin: 0 0 4px;
}
.crest-motto {
  font-family: var(--font-mono), monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.crest-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.crest-flag {
  height: 52px;
  width: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}
.crest-flag-arms {
  height: 76px;
}
.about-welcome {
  text-align: center;
  font-family: var(--font-display), sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--ink);
  margin: 14px 0 26px;
}
.about-bio {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  box-shadow: var(--shadow);
  margin-bottom: 52px;
  overflow: hidden; /* contain the floated photo so the card's own height wraps it */
}
.about-intro {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 20px;
  text-align: justify;
  text-justify: inter-word;
}
.about-photo {
  float: left;
  width: 290px;
  margin: 0 28px 16px 0;
  padding: 0;
  border: none;
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.about-caption {
  margin: 14px 2px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.about-caption-item {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
}
.about-caption-item strong {
  display: block;
  font-family: var(--font-mono), monospace;
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin-bottom: 2px;
}
.about-caption-item span {
  color: var(--ink-soft);
}
.about-bio p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 15px;
  text-align: justify;
  text-justify: inter-word;
}
.about-bio p:last-child {
  margin-bottom: 0;
}
.about-cta {
  clear: both;
  margin-top: 6px;
  padding: 14px 20px;
  border-left: 3px solid var(--gold-strong);
  background: var(--gold-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display), sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink) !important;
  letter-spacing: 0.01em;
}
.quote {
  font-family: var(--font-display), sans-serif;
  font-size: 1.3rem;
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--ink);
}

/* Reviews */
.reviews {
  margin-top: 44px;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reviews-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.reviews-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 10px 22px -12px rgba(33, 28, 21, 0.35);
}
.reviews-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: var(--shadow);
}
.reviews-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.reviews-card-text strong {
  font-size: 1rem;
  color: var(--ink);
}
.reviews-card-text span {
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.reviews-card-arrow {
  font-size: 1.2rem;
  color: var(--red);
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .reviews-card {
    flex-wrap: wrap;
  }
  .reviews-card-arrow {
    display: none;
  }
}
.quote-attr {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin: 0;
}
.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fact-list li {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.fact-list strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 640px) {
  .about-bio {
    padding: 22px;
  }
  .about-photo {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 22px;
  }
  .crest-flag {
    height: 40px;
  }
  .crest-flag-arms {
    height: 58px;
  }
}

/* Tour cards */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 52px;
}
.tour-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tour-card:hover {
  border-color: var(--gold-strong);
  transform: translateY(-2px);
}
.tour-card-thumb {
  border-radius: 0;
  box-shadow: none;
}
.tour-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tour-card .tour-days {
  font-family: var(--font-mono), monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-strong);
  background: var(--gold-soft);
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.tour-card h3 {
  font-size: 1.08rem;
  margin: 0 0 8px;
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
.tour-card p {
  color: var(--ink-soft);
  font-size: 0.87rem;
  line-height: 1.55;
  margin: 0 0 12px;
  flex: 1;
}
.tour-card .tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.tour-foot-link-only {
  justify-content: flex-end;
}
.tour-price {
  font-family: var(--font-mono), monospace;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}
.tour-price small {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.72rem;
}
.tour-ask {
  font-family: var(--font-mono), monospace;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.tour-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.tour-link:hover {
  text-decoration: underline;
}

/* Tour detail page */
.tour-detail {
  max-width: 720px;
  margin: 0 auto 60px;
}
.tour-detail-back {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 24px;
}
.tour-detail-back:hover {
  color: var(--gold-strong);
}
.tour-detail-lede {
  margin: 0 0 28px;
}
.tour-detail-days {
  margin-bottom: 14px;
}
.tour-detail-lede h2 {
  margin: 0;
  font-size: 1.6rem;
}
.tour-detail-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
  text-align: justify;
  text-justify: inter-word;
  margin: 0 0 32px;
}
.tour-detail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 48px;
}
.tour-detail-price .tour-price {
  font-size: 1.1rem;
}
.tour-detail-price .tour-ask {
  font-size: 0.9rem;
}
.tour-detail-more .tour-grid {
  margin-bottom: 0;
}

/* Sightseeing explorer (the Sightseeing home page) — a picker list of
   every tour down the left, with the selected tour's full content beside
   it in a three-column layout (picker | main | side). A tour's own
   standalone page reuses the same main/side pieces in a simpler
   two-column layout (.tour-detail-layout below), without the picker. */
.explore-layout {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px) {
  .explore-layout {
    grid-template-columns: 1fr;
  }
}

.explore-picker-heading {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin: 0 0 14px;
}
.explore-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.explore-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body), sans-serif;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.explore-picker-item:hover {
  background: var(--surface);
}
.explore-picker-item-active {
  background: var(--surface);
  border-color: var(--line);
  border-left-color: var(--gold-strong);
}
.explore-picker-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.explore-picker-thumb img,
.explore-picker-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.explore-picker-text {
  flex: 1;
  min-width: 0;
}
.explore-picker-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}
.explore-picker-subtitle {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.explore-picker-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink-faint);
}
.explore-picker-item-active .explore-picker-chevron {
  color: var(--gold-strong);
}
@media (max-width: 980px) {
  .explore-picker-list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .explore-picker-item {
    flex-direction: column;
    text-align: center;
    width: 112px;
    flex-shrink: 0;
    border-left: none;
    border-top: 3px solid transparent;
  }
  .explore-picker-item-active {
    border-top-color: var(--gold-strong);
  }
  .explore-picker-subtitle,
  .explore-picker-chevron {
    display: none;
  }
}

.explore-simple-wrap {
  grid-column: 2 / span 2;
}
@media (max-width: 980px) {
  .explore-simple-wrap {
    grid-column: auto;
  }
}

.tour-explorer-empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 0;
}

.tour-section-title {
  font-size: 1.2rem;
  margin: 0 0 20px;
}
.tour-sr-only-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A tour's own standalone page — same TourMainContent/TourSideContent
   pieces as the explorer, just without the picker column. */
.tour-detail-page {
  max-width: 1000px;
  margin: 0 auto 60px;
}
.tour-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  margin-bottom: 44px;
}
@media (max-width: 860px) {
  .tour-detail-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.explore-main-header {
  text-align: left;
  margin-bottom: 32px;
}
.explore-main-header h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
}
.explore-main-description {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 56ch;
  text-align: justify;
  text-align-last: left;
  margin: 0 0 18px;
}
/* Feature badges and the two CTA buttons share one 2-column grid (see
   TourMainContent.tsx), so "Ask a Question" always sits in the same
   right-hand column as "1 Day Experience" / "Expert Guide" above it. */
.explore-header-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  column-gap: 28px;
  row-gap: 10px;
  margin-bottom: 4px;
  align-items: center;
}
.explore-feature {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
/* Only the bottom-most row of feature badges loses its divider. */
.explore-feature:nth-last-of-type(-n + 2) {
  border-bottom: none;
}
.explore-feature svg {
  width: 15px;
  height: 15px;
  color: var(--gold-strong);
}
/* Forces "Inquire about this tour" to start a fresh grid row at column 1
   no matter how many feature badges came before it, so it never lands in
   column 2 next to a badge when the badge count is odd. */
.explore-cta-start {
  grid-column-start: 1;
}
.explore-cta {
  justify-self: start;
  margin-top: 18px;
}
/* A slightly tighter, more tailored button size than the site-wide
   default — these two sit right under a compact header, so a full-size
   CTA pill reads as oversized next to it. Both are now outlined rather
   than filled, with a bigger icon, so they read as a matched pair. */
.explore-cta.btn {
  padding: 11px 24px;
  font-size: 0.86rem;
  letter-spacing: 0.015em;
  background: transparent;
}
.explore-cta.btn-primary {
  color: var(--red);
  border: 1.5px solid var(--red);
}
.explore-cta.btn-primary:hover {
  background: var(--red);
  color: #fbeae9;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(168, 42, 46, 0.5);
}
.explore-cta.btn-ghost {
  border-color: var(--line);
}
.explore-cta.btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--gold-strong);
}
.explore-cta .btn-icon {
  width: 22px;
  height: 22px;
}
@media (max-width: 640px) {
  .explore-header-grid {
    grid-template-columns: 1fr;
  }
  .explore-feature {
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .explore-feature:last-of-type {
    border-bottom: none;
  }
  .explore-cta-start {
    grid-column-start: auto;
  }
}

.tour-day-heading {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin: 24px 0 12px;
}
.tour-day-heading:first-child {
  margin-top: 0;
}
.tour-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.tour-day-tab {
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 18px;
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tour-day-tab:hover {
  border-color: var(--gold-strong);
  color: var(--ink);
}
.tour-day-tab-active,
.tour-day-tab-active:hover {
  background: var(--gold-strong);
  border-color: var(--gold-strong);
  color: var(--surface);
}

.tour-timeline {
  display: flex;
  flex-direction: column;
}
.tour-timeline-item {
  display: grid;
  grid-template-columns: 74px 24px 96px 1fr;
  gap: 16px;
  align-items: start;
}
.tour-timeline-time {
  padding-top: 10px;
  font-size: 0.78rem;
  color: var(--gold-strong);
  white-space: nowrap;
}
.tour-timeline-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
.tour-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-strong);
  margin-top: 12px;
  flex-shrink: 0;
}
.tour-timeline-dot-end {
  background: var(--ink-faint);
}
.tour-timeline-line {
  flex: 1;
  width: 2px;
  background: var(--line);
  margin-top: 4px;
}
.tour-timeline-thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.tour-timeline-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.tour-timeline-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tour-timeline-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tour-timeline-body {
  padding-bottom: 28px;
}
.tour-timeline-body h4 {
  margin: 8px 0 4px;
  font-size: 1rem;
}
.tour-timeline-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tour-timeline-end {
  display: grid;
  grid-template-columns: 74px 24px 1fr;
  gap: 16px;
  align-items: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-style: italic;
}
@media (max-width: 640px) {
  .tour-timeline-item {
    grid-template-columns: 56px 20px 72px 1fr;
    gap: 10px;
  }
  .tour-timeline-end {
    grid-template-columns: 56px 20px 1fr;
    gap: 10px;
  }
}

.explore-side {
  display: grid;
  gap: 32px;
}
.tour-guide-card {
  display: flex;
  gap: 18px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.tour-guide-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold-soft);
}
.tour-guide-body h4 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.tour-guide-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.tour-guide-body li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.tour-guide-body li svg {
  width: 15px;
  height: 15px;
  color: #4caf6d;
  flex-shrink: 0;
}
.tour-guide-tagline {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gold-strong);
}

.tour-inclusions {
  display: grid;
  gap: 20px;
}
.tour-inclusion-list h4 {
  font-size: 0.95rem;
  margin: 0 0 10px;
}
.tour-inclusion-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tour-inclusion-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.tour-inclusion-list li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tour-inclusion-list-yes li svg {
  color: #4caf6d;
}
.tour-inclusion-list-no li svg {
  color: var(--red);
}
.tour-inclusion-list-no li {
  color: var(--ink-faint);
}

.tour-gallery-section {
  margin-bottom: 44px;
}
.tour-gallery-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.tour-gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.tour-gallery-item svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tour-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tour-gallery-item-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.attraction-lightbox-media {
  cursor: default;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}
.attraction-lightbox-media img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.attraction-lightbox-media svg {
  /* Illustrations have no intrinsic size like a photo does, so give them a
     comfortable fixed display size (matching their own ~8:5 aspect) that
     still shrinks to fit small viewports. */
  width: 640px;
  height: 400px;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
@media (max-width: 760px) {
  .tour-gallery-strip {
    grid-auto-columns: minmax(140px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
  }
}

/* Attraction rows */
.row-nav {
  position: relative;
  margin-bottom: 44px;
}
.row-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 2px 34px 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.row-strip::-webkit-scrollbar {
  display: none;
}
.card {
  display: flex;
  flex-direction: column;
  flex: 0 0 250px;
  text-decoration: none;
  color: inherit;
}
.row-arrow {
  position: absolute;
  top: 78px;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.row-arrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.08);
}
.row-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.row-arrow-left {
  left: 0;
}
.row-arrow-right {
  right: 0;
}

.thumb {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow);
  background: var(--surface);
}
.thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card h3 {
  font-size: 1rem;
  margin: 12px 0 4px;
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
.card p {
  color: var(--ink-soft);
  font-size: 0.87rem;
  margin: 0;
  line-height: 1.5;
}

/* Inquiry form */
.inquiry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
  margin-bottom: 52px;
}
.inquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.field-label-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.field-label-icon svg {
  width: 14px;
  height: 14px;
  color: var(--gold-strong);
  flex-shrink: 0;
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body), sans-serif;
  font-size: 0.92rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: transparent;
}
.inquiry-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.inquiry-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  max-width: 44ch;
  margin: 0;
}
@media (max-width: 600px) {
  .inquiry-grid {
    grid-template-columns: 1fr;
  }
}

footer {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 20px;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
}
.footer-col h4 {
  font-family: var(--font-body), sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
  font-weight: 600;
}
.footer-col p,
.footer-col a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0 0 8px;
}
.footer-col a:hover {
  color: var(--ink);
}
@media (max-width: 620px) {
  .emblem {
    width: 120px;
    height: 120px;
    margin-top: 0;
  }
}

/* Admin dashboard */
.admin-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}
.admin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin-header h1 {
  font-size: 1.6rem;
}
.admin-login {
  max-width: 360px;
  margin: 80px auto;
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.admin-login h1 {
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-faint);
}
.error-text {
  color: var(--red);
  font-size: 0.85rem;
  margin: 0;
}
.success-text {
  color: #2f7a3d;
  font-size: 0.85rem;
  margin: 0;
}
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.admin-nav-link {
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-nav-link:hover {
  color: var(--ink);
  border-color: var(--line);
}
.admin-nav-link.is-active {
  background: var(--ink);
  color: var(--bg);
}
.admin-header-wau-slot {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
}
/* Web-Stat's script can re-apply its own fixed-position styling to its
   widget element after our code has already moved it and cleared that
   positioning — this backstops that with !important, which beats a
   plain (non-!important) inline style regardless of when it's set. */
.admin-header-wau-slot * {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.admin-section {
  margin-bottom: 48px;
}
.admin-section h2 {
  font-size: 1.2rem;
  margin: 0 0 4px;
}
.admin-section > .profile-meta {
  margin-bottom: 20px;
}
.btn-small {
  padding: 6px 14px;
  font-size: 0.82rem;
}
.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red-soft);
}
.btn-danger:hover {
  border-color: var(--red);
}
.admin-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  display: grid;
  gap: 16px;
}
.admin-form h3 {
  font-size: 1rem;
  margin: 0;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}
.admin-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.admin-photo-preview {
  width: 96px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  flex: 0 0 auto;
}
.admin-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-gallery-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.admin-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-gallery-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-checklist-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.admin-checklist-icon-picker {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 132px;
}
.admin-icon-option {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-icon-option svg {
  width: 15px;
  height: 15px;
}
.admin-icon-option:hover {
  color: var(--ink);
}
.admin-icon-option.is-selected {
  background: var(--gold-soft);
  border-color: var(--gold-strong);
  color: var(--ink);
}
.admin-icon-option-upload {
  position: relative;
  overflow: hidden;
}
.admin-icon-option-upload input {
  display: none;
}
.admin-icon-option-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.admin-icon-upload-spinner {
  font-size: 0.75rem;
}
.admin-checklist-clear-icon {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
}
.admin-checklist-clear-icon:hover {
  color: var(--red);
}
.admin-checklist-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-checklist-label-input,
.admin-checklist-text-input {
  width: 100%;
}
.admin-checklist-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink-faint);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-checklist-remove:hover {
  color: var(--red);
}
@media (max-width: 560px) {
  .admin-checklist-row {
    flex-wrap: wrap;
  }
  .admin-checklist-icon-picker {
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
  }
}
.admin-list {
  display: grid;
  gap: 14px;
}
.admin-list-item {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  flex-wrap: wrap;
}
.admin-list-thumb {
  width: 84px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  flex: 0 0 auto;
}
.admin-list-thumb img,
.admin-list-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-list-body {
  flex: 1 1 220px;
  min-width: 160px;
}
.admin-list-body h4 {
  font-size: 0.95rem;
  margin: 0 0 2px;
}
.admin-list-body p {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0;
}
.admin-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Sightseeing admin — hero/journey/gallery media picker, journey editor,
   feature-badge editor, and plain string-list editor (guide checklist,
   included/not included). */
.admin-form-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid;
  gap: 12px;
}
.admin-form-section h4 {
  margin: 0;
  font-size: 0.92rem;
}
.admin-form-section > .profile-meta {
  margin: -6px 0 0;
}
.admin-richmode-section {
  gap: 8px;
}
.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.admin-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  flex: 0 0 auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: transform 0.15s ease, background 0.15s ease;
}
.admin-toggle input:checked ~ .admin-toggle-track {
  background: var(--gold-strong);
  border-color: var(--gold-strong);
}
.admin-toggle input:checked ~ .admin-toggle-track .admin-toggle-thumb {
  transform: translateX(18px);
  background: var(--surface);
}
.admin-toggle input:focus-visible ~ .admin-toggle-track {
  box-shadow: 0 0 0 3px rgba(240, 201, 120, 0.35);
}
.admin-media-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.admin-media-preview {
  width: 96px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  flex: 0 0 auto;
}
.admin-media-preview img,
.admin-media-preview svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-media-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-media-hint {
  flex: 1 0 100%;
  color: var(--ink-faint);
  font-size: 0.8rem;
  margin: 0;
}
.admin-features-editor,
.admin-simple-list,
.admin-journey-editor,
.admin-gallery-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-features-row,
.admin-simple-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-features-row select {
  flex: 0 0 auto;
}
.admin-features-row input,
.admin-simple-list-input {
  flex: 1;
  min-width: 0;
}
.admin-journey-editor {
  gap: 16px;
}
.admin-journey-day-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.admin-journey-plain-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-journey-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-journey-day-label-input {
  flex: 1;
  min-width: 140px;
  font-weight: 700;
  color: var(--gold-strong);
  border-color: var(--gold-strong);
}
.admin-journey-day-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.admin-journey-day-stops {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-journey-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  flex-wrap: wrap;
}
.admin-journey-fields {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-journey-time-input {
  max-width: 140px;
}
.admin-journey-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.admin-journey-bottom-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-gallery-editor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.admin-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}
.admin-stat-card strong {
  display: block;
  font-family: var(--font-display), sans-serif;
  font-size: 1.8rem;
  color: var(--gold-strong);
}
.admin-stat-card span {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Floating contact buttons */
.floating-contact {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.floating-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow), 0 6px 20px -5px rgba(33, 28, 21, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.floating-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow), 0 10px 26px -6px rgba(33, 28, 21, 0.5);
}
.floating-icon {
  width: 38px;
  height: 38px;
}
.floating-icon-mail {
  width: 30px;
  height: 30px;
  color: var(--ink);
}
@media (max-width: 640px) {
  .floating-contact {
    right: 14px;
    bottom: 18px;
    top: auto;
    transform: none;
    gap: 12px;
  }
  .floating-btn {
    width: 56px;
    height: 56px;
  }
  .floating-icon {
    width: 30px;
    height: 30px;
  }
  .floating-icon-mail {
    width: 24px;
    height: 24px;
  }
}

/* Legal pages */
.legal-header {
  padding: 20px 0 0;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.legal-back:hover {
  color: var(--ink);
}
.legal-main {
  padding: 28px 0 64px;
}
.legal-doc {
  max-width: 74ch;
  margin: 0 auto;
}
.legal-doc h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 6px;
}
.legal-updated {
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin: 0 0 28px;
}
.legal-disclaimer {
  background: var(--gold-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0 0 32px;
}
.legal-doc h2 {
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 32px 0 10px;
  color: var(--ink);
}
.legal-doc h2:first-of-type {
  margin-top: 0;
}
.legal-doc p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0 0 14px;
}
.legal-doc ul {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal-doc li {
  margin-bottom: 6px;
}
.legal-doc strong {
  color: var(--ink);
}
.legal-doc a {
  color: var(--gold-strong);
  font-weight: 600;
}

/* Home page */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.pill-row::-webkit-scrollbar {
  display: none;
}
.pill {
  flex: 0 0 auto;
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.yt-section {
  margin-bottom: 40px;
}
.yt-section + .yt-section {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px 16px;
  margin-bottom: 16px;
}
.yt-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.yt-card-body {
  padding: 10px 2px 0;
}
.yt-card h3 {
  font-size: 0.95rem;
  margin: 0 0 4px;
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
.yt-card-meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0;
}
.yt-card-snippet {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-thumb-badged {
  overflow: hidden;
}
.yt-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: #f4e7c9;
  background: rgba(8, 11, 20, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.yt-badge-category {
  top: 10px;
  left: 10px;
  color: var(--gold-strong);
}
.yt-cta-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(155deg, var(--gold-soft) 0%, var(--gold) 140%);
  border: 1px solid var(--line);
}
.yt-cta-thumb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.yt-cta-thumb-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 11, 20, 0.15) 0%, rgba(8, 11, 20, 0.55) 100%);
}
.yt-cta-thumb-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display), sans-serif;
  font-size: 1.2rem;
  color: #f4e7c9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
.yt-cta-thumb:hover {
  filter: brightness(1.04);
}
.yt-cta-card-body {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 2px 0;
}
.yt-cta-card-body h3 {
  font-size: 0.95rem;
  margin: 0 0 4px;
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
.yt-cta-card-body:hover h3 {
  color: var(--red);
}
.home-more {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  margin-bottom: 52px;
}
.home-more:hover {
  text-decoration: underline;
}

/* Attraction detail page */
.back-link {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover {
  text-decoration: underline;
}
.attraction-detail {
  max-width: 980px;
  margin: 0 auto 60px;
}
.attraction-lede {
  max-width: 720px;
  margin: 0 0 36px;
}
.attraction-detail-category {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.attraction-detail h1 {
  margin: 0;
}
.attraction-lede-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-strong), var(--gold));
}
.attraction-overview-col {
  min-width: 0;
  margin-bottom: 32px;
}
.attraction-overview-flow::after {
  content: "";
  display: block;
  clear: both;
}
.attraction-media-col {
  float: right;
  width: 44%;
  margin: 0 0 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.attraction-media-col .attraction-detail-media {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .attraction-media-col {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }
}
.attraction-detail-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.attraction-detail-media img,
.attraction-detail-media svg {
  width: 100%;
  display: block;
}
.attraction-detail-media-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.attraction-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 7, 12, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.attraction-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.attraction-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.attraction-lightbox-close:hover {
  background: var(--surface);
}
.attraction-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(20, 26, 41, 0.85);
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attraction-lightbox-nav:hover {
  background: var(--surface-raised);
}
.attraction-lightbox-prev {
  left: 16px;
}
.attraction-lightbox-next {
  right: 16px;
}
.attraction-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: rgba(20, 26, 41, 0.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
}
@media (max-width: 560px) {
  .attraction-lightbox {
    padding: 20px;
  }
  .attraction-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}
.attraction-detail-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
  text-align: justify;
  text-justify: inter-word;
  margin: 0;
}
.attraction-section {
  margin-bottom: 32px;
}
.attraction-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.15rem;
  margin: 0 0 16px;
}
.attraction-section-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--gold-strong);
}
.attraction-section-icon-badge svg {
  width: 16px;
  height: 16px;
}
.attraction-checklist {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.attraction-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.attraction-checklist-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--gold-strong);
}
.attraction-checklist-icon svg {
  width: 18px;
  height: 18px;
}
.attraction-checklist-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.attraction-checklist-icon-number {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold-strong);
}
.attraction-checklist-body {
  min-width: 0;
}
.attraction-checklist-label {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.attraction-checklist-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.attraction-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}
.attraction-two-col .attraction-section {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .attraction-two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.attraction-video-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
}
.attraction-overview-continued {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .attraction-video-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.attraction-detail-video {
  /* A decorative card around the player, with enough padding that this
     box's own rounding/border never overlaps the video pixels — so
     YouTube's own title bar, logo, share and "Watch on YouTube" controls
     never get clipped by our corners. */
  padding: 10px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--surface);
  border: 1px solid var(--line);
}
.attraction-detail-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #000;
}
.attraction-detail-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.attraction-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
}
.attraction-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attraction-video-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(8, 11, 20, 0.65);
  border: 2px solid var(--gold-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.attraction-video-poster:hover .attraction-video-play-badge {
  background: rgba(8, 11, 20, 0.85);
}
.attraction-video-play-icon {
  width: 24px;
  height: 24px;
  color: #f4e7c9;
  margin-left: 3px;
}
.attraction-video-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 6px 4px;
}
.attraction-video-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.attraction-video-views svg {
  width: 16px;
  height: 16px;
}
.attraction-video-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-strong);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.attraction-video-share:hover {
  background: var(--surface);
}
.attraction-video-share svg {
  width: 14px;
  height: 14px;
}
.attraction-detail-video-link {
  display: inline-block;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.attraction-detail-video-link:hover {
  text-decoration: underline;
}
.attraction-most-watched h3 {
  font-size: 0.95rem;
  margin: 0 0 12px;
}
.attraction-most-watched-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attraction-most-watched-item {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.attraction-most-watched-thumb {
  position: relative;
  flex-shrink: 0;
  width: 108px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
}
.attraction-most-watched-thumb img,
.attraction-most-watched-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attraction-most-watched-body {
  min-width: 0;
}
.attraction-most-watched-body h4 {
  margin: 0 0 3px;
  font-size: 0.85rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.attraction-most-watched-body p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.attraction-info-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
}

/* =========================================================================
   WordPress port additions
   Everything above this line is the original site stylesheet, unchanged.
   Below are only the pieces the WordPress version needs: the font family
   variables (previously injected by Next.js), a handful of structural
   helpers for the ported markup, and the admin-bar offset.
   ====================================================================== */

:root {
  --font-display: "Bayon";
  --font-body: "Work Sans";
  --font-mono: "IBM Plex Mono";
}

/* Hidden elements must stay hidden even where a display rule is set. */
[hidden] {
  display: none !important;
}

/* The Sightseeing explorer swaps whole tours in and out. The panel wrapper
   must not become a grid item itself, so its columns land in the parent
   three-column grid exactly as they did before. */
.yk-explorer-panel {
  display: contents;
}
.yk-explorer-panel[hidden] {
  display: none !important;
}

/* Inquiry form honeypot — visible only to bots. */
.yk-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Generic pages added from the dashboard reuse the legal document styling. */
.yk-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.yk-page-content ul,
.yk-page-content ol {
  padding-left: 20px;
}

.yk-pagination {
  margin-top: 24px;
}
.yk-pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono), monospace;
  font-size: 0.85rem;
}
.yk-pagination .page-numbers {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
}
.yk-pagination .page-numbers.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Keep the fixed header clear of the WordPress admin bar. */
body.admin-bar .floating-contact {
  top: auto;
}

/* Screen-reader text, in case a WordPress core template part uses it. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   Cover stat band

   The three stat lines run as one centred line across the foot of the cover.

   There is no plate behind them — a flat panel over a photograph always
   reads as a grey slab. Instead the cover itself darkens (or lightens, in
   the light theme) into the text, the way a film title card does, so the
   band has no visible edge at all. The scrim colour follows the theme so it
   blends into the guide card on the left as well as the photo on the right,
   and thin gold rules separate the three readings.
   ---------------------------------------------------------------------- */

:root {
  --hero-scrim: rgba(252, 249, 240, 0) 0%, rgba(252, 249, 240, 0.62) 42%, rgba(250, 245, 233, 0.96) 100%;
  --hero-scrim-ink: #4a4034;
  --hero-scrim-rule: rgba(169, 124, 34, 0.38);
  --hero-scrim-icon: #a97c22;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-scrim: rgba(7, 11, 19, 0) 0%, rgba(7, 11, 19, 0.5) 40%, rgba(7, 11, 19, 0.92) 100%;
    --hero-scrim-ink: #e9e0cf;
    --hero-scrim-rule: rgba(231, 190, 104, 0.42);
    --hero-scrim-icon: #e2c185;
  }
}

:root[data-theme="dark"] {
  --hero-scrim: rgba(7, 11, 19, 0) 0%, rgba(7, 11, 19, 0.5) 40%, rgba(7, 11, 19, 0.92) 100%;
  --hero-scrim-ink: #e9e0cf;
  --hero-scrim-rule: rgba(231, 190, 104, 0.42);
  --hero-scrim-icon: #e2c185;
}

.hero-stats-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 54px 18px 16px;
  background: linear-gradient(180deg, var(--hero-scrim));
  color: var(--hero-scrim-ink);
  font-size: 0.79rem;
  letter-spacing: 0.015em;
  white-space: nowrap;
  pointer-events: none;
}

.hero-stats-band .stat-item {
  position: relative;
  gap: 9px;
  padding: 0 24px;
}

/* A hairline between readings, fading out at both ends. */
.hero-stats-band .stat-item + .stat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: linear-gradient(180deg, transparent, var(--hero-scrim-rule), transparent);
}

.hero-stats-band .stat-icon {
  width: 15px;
  height: 15px;
  color: var(--hero-scrim-icon);
}

/* Keeps the card's last row clear of the scrim. */
.hero {
  padding-bottom: 26px;
}

/* Narrower desktops: tighten before anything is forced to wrap. */
@media (max-width: 1080px) {
  .hero-stats-band {
    font-size: 0.75rem;
    padding: 48px 12px 14px;
  }
  .hero-stats-band .stat-item {
    padding: 0 16px;
    gap: 7px;
  }
}

@media (max-width: 900px) {
  .hero-stats-band {
    font-size: 0.71rem;
  }
  .hero-stats-band .stat-item {
    padding: 0 11px;
  }
  .hero-stats-band .stat-icon {
    width: 13px;
    height: 13px;
  }
}

/* Phones: the hero stacks, so the band joins the flow under the card and is
   allowed to wrap — one line at this width would be too small to read. */
@media (max-width: 760px) {
  .hero {
    padding-bottom: 0;
  }
  .hero-stats-band {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 7px 0;
    white-space: normal;
    padding: 2px 20px 20px;
    background: none;
    color: var(--ink-soft);
    font-size: 0.8rem;
  }
  .hero-stats-band .stat-item {
    padding: 0 14px;
  }
  .hero-stats-band .stat-item + .stat-item::before {
    display: none;
  }
  .hero-stats-band .stat-icon {
    width: 15px;
    height: 15px;
    color: var(--gold-strong);
  }
}

/* -------------------------------------------------------------------------
   Ornament divider

   A printer's ornament in place of the plain gold rule. It draws in
   currentColor, so setting the colour on the element is all that is needed
   for it to sit correctly in either theme.
   ---------------------------------------------------------------------- */

.yk-ornament {
  display: block;
  width: min(240px, 52%);
  height: auto;
  margin: 20px auto 0;
  color: var(--gold);
  opacity: 0.95;
}

/* Under the crest motto it sits a little tighter and narrower, so the
   Kingdom of Cambodia block still reads as one unit. A clear line of space
   follows it before the flags. */
.yk-ornament-crest {
  width: min(200px, 45%);
  margin: 12px auto 40px;
  opacity: 0.85;
}

@media (max-width: 560px) {
  .yk-ornament {
    width: min(210px, 72%);
  }
  .yk-ornament-crest {
    width: min(186px, 64%);
    margin-bottom: 32px;
  }
}

/* -------------------------------------------------------------------------
   Welcome line

   Two lines rather than one: the greeting, then the country's own byline
   set half again as large beneath it.
   ---------------------------------------------------------------------- */

.about-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  /* A clear line of space between the flags and the greeting. */
  margin-top: 42px;
}

@media (max-width: 560px) {
  .about-welcome {
    margin-top: 32px;
  }
}

.about-welcome-lead {
  font-size: 1em;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

.about-welcome-main {
  font-size: 1.5em;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--gold-strong);
}