/* TRIAL 2026-09-27: metric-matched fallbacks so the swap to the web fonts does not move the text (measured on the real headings: Fraunces 600 = Times New Roman x 1.115, Inter = Arial x 1.04) */
@font-face { font-family: 'Fraunces Fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Times'), local('Noto Serif'), local('Droid Serif'); size-adjust: 112%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'); size-adjust: 104%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0%; }
.updated { font-size: .85rem; color: #6b7b8c; margin: -.2rem 0 1rem; }
.updated a { color: inherit; }
:root { --gold:#c9a227; --gold-light:#e6c968; --dark:#0a1628; --card:#111f33; --text:#e8f0f7; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; max-width: 100%; scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text); font-family: 'Inter', 'Inter Fallback', sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--gold-light); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(201,162,39,0.18); background: rgba(10,22,40,0.95); position: sticky; top: 0; z-index: 5; }
.logo { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.3rem; color: #fff; text-decoration: none; white-space: nowrap; }
.logo img { width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.back { color: var(--gold-light); text-decoration: none; font-size: 0.9rem; }
.back:hover { text-decoration: underline; }
.crumbs { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 0; font-size: .82rem; color: rgba(255,255,255,.6); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.hero { text-align: center; padding: 2.6rem 1.5rem 1.8rem; background: linear-gradient(180deg, rgba(201,162,39,0.10), rgba(10,22,40,0)); }
.eyebrow { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; color: var(--gold-light); font-size: 1.05rem; margin-bottom: .8rem; }
h1 { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.14; color: #fff; max-width: 900px; margin: 0 auto 1rem; }
h1 em { color: var(--gold-light); }
.lede { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: rgba(255,255,255,.86); max-width: 760px; margin: 0 auto .9rem; }
.facts { font-size: .92rem; color: rgba(255,255,255,.62); max-width: 720px; margin: 0 auto; }
.story-link { margin: 1.1rem auto 0; }
.story-link a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--dark); background: linear-gradient(180deg, var(--gold-light), var(--gold)); padding: .55rem 1.1rem; border-radius: 999px; transition: transform .2s, box-shadow .2s; }
.story-link a:hover, .story-link a:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,162,39,.35); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.5rem 3.4rem; }
h2 { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; line-height: 1.25; margin: 2.4rem 0 1.1rem; }
h2 small { font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 500; font-size: .85rem; color: rgba(255,255,255,.55); margin-left: .5rem; }
.tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.tour { position: relative; display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: inherit; background: rgba(255,255,255,.03); border: 1px solid rgba(201,162,39,.22); border-radius: 16px; padding: 1.1rem 1.1rem 1rem; transition: transform .25s, border-color .25s, background .25s; }
.tour:hover, .tour:focus-visible { transform: translateY(-3px); border-color: rgba(201,162,39,.6); background: rgba(201,162,39,.05); }
.badge { align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: #0a1628; background: linear-gradient(90deg, var(--gold), #e6c968); border-radius: 999px; padding: .15rem .65rem; }
.tour-title { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: #fff; }
.tour-meta { display: flex; align-items: center; gap: .8rem; margin-top: auto; font-size: .85rem; color: rgba(255,255,255,.7); }
.stars { color: var(--gold-light); font-weight: 600; }
.go { margin-left: auto; color: var(--gold-light); }
.more { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.pill, .chip { text-decoration: none; color: #fff; font-size: .9rem; padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid rgba(201,162,39,.35); background: rgba(255,255,255,.04); transition: border-color .2s, background .2s, color .2s; }
.pill:hover, .chip:hover { border-color: var(--gold); background: rgba(201,162,39,.14); color: var(--gold-light); }
.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.plan-card { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "i t" "i d"; column-gap: .9rem; align-items: center; text-decoration: none; color: inherit; background: rgba(255,255,255,.03); border: 1px solid rgba(201,162,39,.18); border-radius: 14px; padding: .95rem 1.1rem; transition: transform .25s, border-color .25s, background .25s; }
.plan-card:hover { transform: translateY(-3px); border-color: rgba(201,162,39,.55); background: rgba(201,162,39,.05); }
.pi { grid-area: i; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(201,162,39,.12); border: 1px solid rgba(201,162,39,.3); }
.pt { grid-area: t; font-weight: 600; color: #fff; }
.pd { grid-area: d; font-size: .85rem; color: rgba(255,255,255,.66); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem .6rem; }
.chip.all { border-color: var(--gold); color: var(--gold-light); }
.cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.city { display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "e n" "e t"; column-gap: .7rem; align-items: center; text-decoration: none; color: inherit; background: rgba(255,255,255,.03); border: 1px solid rgba(201,162,39,.16); border-radius: 12px; padding: .65rem .9rem; transition: border-color .2s, background .2s; }
.city:hover { border-color: rgba(201,162,39,.55); background: rgba(201,162,39,.06); }
.ce { grid-area: e; font-size: 1.4rem; text-align: center; }
.cn { grid-area: n; font-weight: 600; color: #fff; line-height: 1.25; }
.ct { grid-area: t; font-size: .78rem; color: rgba(255,255,255,.55); }
.disclose { margin-top: 2.6rem; font-size: .84rem; color: rgba(255,255,255,.58); border-left: 3px solid rgba(201,162,39,.5); padding-left: .9rem; }
footer { border-top: 1px solid rgba(201,162,39,0.18); padding: 1.6rem 1.4rem 2.4rem; text-align: center; font-size: .86rem; color: rgba(255,255,255,.55); }
footer a { margin: 0 .6rem; text-decoration: none; }
footer a:hover { text-decoration: underline; }
@media (max-width: 600px) { .hero { padding: 2rem 1.2rem 1.4rem; } .wrap { padding: 1rem 1.2rem 2.6rem; } }

/* sunny theme (2026-09-21): bright travel look, matches the home page */
body { background: #f4fbff; color: #12304a; }
a { color: #0b6f95; }
.bar { background: rgba(255,255,255,.95); border-bottom: 1px solid rgba(18,48,74,.10); box-shadow: 0 4px 18px rgba(18,90,130,.08); }
.logo { color: #12304a; }
.back { color: #0b6f95; }
.crumbs { color: #4b6478; }
.hero { background: linear-gradient(180deg, #cdeefa 0%, #f4fbff 100%); }
.eyebrow { color: #0e86b0; }
h1 { color: #12304a; }
h1 em { color: #b86e00; }
.lede { color: #26445c; }
.facts { color: #4b6478; }
.story-link a { color: #12304a; }

h2 { color: #12304a; }
h2 small { color: #4b6478; }
.tour, .plan-card, .city { background: #ffffff; border: 1px solid rgba(18,48,74,.10); box-shadow: 0 8px 24px rgba(18,90,130,.10); }
.tour:hover, .tour:focus-visible, .plan-card:hover, .city:hover { background: #ffffff; border-color: #0e86b0; box-shadow: 0 16px 36px rgba(18,90,130,.18); }
.tour-title, .pt, .cn { color: #12304a; }
.tour-meta, .pd, .ct { color: #4b6478; }
.stars { color: #b86e00; }
.go { color: #0e86b0; }
.pill, .chip { background: #ffffff; color: #12304a; border-color: rgba(14,134,176,.35); }
.pill:hover, .chip:hover { background: #e3f4fb; border-color: #0e86b0; color: #12304a; }
.chip.all { color: #9a6b00; border-color: #c9a227; }
.pi { background: #e3f4fb; border-color: rgba(14,134,176,.3); }
.disclose { color: #4b6478; border-left-color: #0e86b0; }
footer { color: #4b6478; border-top: 1px solid rgba(18,48,74,.12); background: #ffffff; }
.live-btn { cursor: pointer; font: inherit; font-size: .9rem; }
.gyg-box { margin-top: 1rem; }
.consent-ph { background: #ffffff; border: 1px solid rgba(18,48,74,.12); border-radius: 14px; padding: 1rem 1.1rem; color: #26445c; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.consent-ph .pill { cursor: pointer; font: inherit; font-size: .9rem; }
.guide-content { max-width: 760px; }
.guide-content h3 { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.1rem; color: #12304a; margin: 1.4rem 0 .4rem; }
.guide-content h3:first-of-type { margin-top: .6rem; }
.guide-content p { color: #26445c; line-height: 1.65; margin: 0 0 .3rem; }

/* best time to visit + FAQ (2026-09-23) */
.besttime { max-width: 860px; }
.besttime p { color: #26445c; margin: 0 0 .9rem; }
.climate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; margin: .2rem 0 .6rem; }
.cm { background: #ffffff; border: 1px solid rgba(18,48,74,.10); border-radius: 10px; padding: .5rem .2rem; text-align: center; display: flex; flex-direction: column; gap: .08rem; box-shadow: 0 6px 16px rgba(18,90,130,.07); }
.cm.best { border-color: #c9a227; background: #fffaf0; }
.cmm { font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: #4b6478; text-transform: uppercase; }
.cmt { font-size: .95rem; font-weight: 700; color: #12304a; }
.cml { font-size: .78rem; color: #4b6478; }
.cmr { font-size: .68rem; color: #0b6f95; }
.climate-note { font-size: .78rem; color: #4b6478; }
.faq { max-width: 820px; }
.faq dl { margin: 0; }
.faq dt { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.05rem; color: #12304a; margin: 1.1rem 0 .35rem; }
.faq dd { margin: 0; color: #26445c; line-height: 1.65; }
.chip small { opacity: .7; font-size: .78em; }
@media (max-width: 760px) {
  .climate { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
}
@media (max-width: 420px) {
  .climate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}