/* ==========================================================================
   Round 139: Destinations and Experiences (explore.js).

   Founder, 27 Sep 2026, with his own two SVG panels, GetYourGuide's hero
   tabs and Intrepid's destinations menu as references, and "don't use any
   emojis". His panels are drawn in a generic blue; here every colour is a
   Seenary token (main.css), so the panel is the site's violet and follows
   a theme's tokens wherever they are ever switched on (round 136).

   The parts, in this order:
     0. the panel's two faces (round 143)
     1. the line icons (_experience_icons.html)
     2. the nav: two words on a wide screen, "Explore" on a tablet, the
        compass alone on a phone
     3. the panel: a mega panel under the nav; a full-screen sheet on a
        phone, where each row opens in place (an accordion)
     4. a place card (a destination's page; round 140 took the landing
        page's eleven tabs and their section out)
     5. a destination's own page (/destinations/<id>, theme_page.html)
     6. the photographs' credits (round 140): the panel's line, a
        destination page's header and foot, and /photo-credits
   ========================================================================== */

/* ---- 0. The panel's two faces (round 143) ------------------------------
   Founder, 28 Sep 2026, with an SVG of the panel as the reference: "use
   this code as inspiration and improve the font of this page" -- Plus
   Jakarta Sans for the panel's words, Playfair Display for the place a
   card is about. Self-hosted like every face here (round 122s), variable
   builds from @fontsource-variable 5.3.0 (OFL; frontend/static/fonts/
   README.md), NOT preloaded: the panel is hidden until it is opened, and
   a browser fetches a face only for text it draws, so the page's first
   screen pays nothing for them. The rest of the site keeps its own two. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/plus-jakarta-sans-vietnamese-wght-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/static/fonts/playfair-display-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/static/fonts/playfair-display-vietnamese-wght-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/static/fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/static/fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- 1. Icons ----------------------------------------------------------- */
.xi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.xi {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 2. The nav --------------------------------------------------------- */
.xp-nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
/* main.css gives the search box the free space (margin-right: auto) so the
   right-hand cluster stays hard right; here the explore buttons follow the
   search box and take that space instead. Scoped with :has() exactly as
   round 135 scoped the Region menu's -- the search box keeps its own
   margin wherever nothing follows it. */
.landing-nav.nav-has-search .nav-search:has(+ .xp-nav) { margin-right: 0; }
.landing-nav:has(.xp-nav) .nav-home-btn { margin-right: 0; }
.landing-nav .xp-nav { margin-right: auto; }

.xp-nav-btn,
.xp-nav-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--on-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-quick) ease, border-color var(--duration-quick) ease;
}
.xp-nav-btn:hover,
.xp-nav-icon:hover,
.xp-nav-btn[aria-expanded="true"],
.xp-nav-icon[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
}
.xp-caret { opacity: 0.8; transition: transform var(--duration-quick) var(--ease-warm); }
.xp-nav-btn[aria-expanded="true"] .xp-caret,
.xp-nav-icon[aria-expanded="true"] .xp-caret { transform: rotate(180deg); }
/* Round 142, founder: "i don't see the explore option on web, when explore
   is clicked, user can see destinations & experiences options, same like
   installed web version". ONE word in the nav at every width -- Explore,
   with the compass -- and the panel's own Destinations | Experiences
   switch does the choosing, as it always did on a phone. The two word
   buttons stay in the markup (explore.js and the tests drive them) but
   are never shown. */
.xp-nav-btn { display: none; }
.xp-nav-icon { display: inline-flex; }
.xp-nav-icon-label { display: inline; }
/* Round 148 (Taiga #13): the label is the chosen destination's name when
   there is one -- a long one ends in an ellipsis rather than pushing the
   nav's other buttons off a narrow screen. */
.xp-nav-icon-label { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The nav on a white page (scrolled, or a page with no dark hero). */
.landing-nav.landing-nav--scrolled .xp-nav-btn,
.landing-nav.landing-nav--scrolled .xp-nav-icon { color: var(--ink); }
.landing-nav.landing-nav--scrolled .xp-nav-btn:hover,
.landing-nav.landing-nav--scrolled .xp-nav-icon:hover,
.landing-nav.landing-nav--scrolled .xp-nav-btn[aria-expanded="true"],
.landing-nav.landing-nav--scrolled .xp-nav-icon[aria-expanded="true"] {
  background: var(--bg-soft);
  border-color: var(--border);
}

/* A phone has room for the compass alone, in the globe's circle. */
@media (max-width: 640px) {
  .xp-nav { margin-left: 2px; }
  .xp-nav-icon { width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; }
  .xp-nav-icon-label, .xp-nav-icon .xp-caret { display: none; }
}
/* Round 246: signed in (the bell and the avatar in the row) the compass is the compass alone below 900px --
   with its word it pushed the avatar past the edge (measured 640-880px). */
@media (max-width: 899px) {
  .landing-nav:has(#profile-dropdown:not([hidden])) .xp-nav-icon { width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; }
  .landing-nav:has(#profile-dropdown:not([hidden])) .xp-nav-icon-label,
  .landing-nav:has(#profile-dropdown:not([hidden])) .xp-nav-icon .xp-caret { display: none; }
}
/* A 360px phone has room for Home OR the compass beside search, the
   language globe and the call to action -- measured: with both, the
   account button ran 13px off the edge. Where the logo already goes home
   (every page but the landing page) Home steps aside; on the landing page,
   where Home scrolls back to the top once the page is scrolled, the
   compass does -- it is there again at the top of the page.
   Round 246: signed in, the call to action reads "Continue planning" and with Home, search, the compass and
   the globe the avatar ran 19px off a 390px screen (measured) -- so Home steps aside up to 429px. */
@media (max-width: 429px) {
  .landing-nav:not(.landing-nav--on-home):has(.xp-nav-icon) .nav-home-btn { display: none; }
  .landing-nav--on-home.landing-nav--deep .xp-nav-icon { display: none; }
}

/* ---- 3. The panel ------------------------------------------------------- */
.xp-panel {
  /* Centred on the viewport, as round 133's Region menu was: hung off a
     button, a 1040px panel runs off a 1280px screen. */
  position: fixed;
  top: calc(76px + var(--offline-banner-height, 0px));
  left: max(16px, calc(50vw - 520px));
  z-index: 90;
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 20px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(var(--shadow-ink), 0.22);
  font-family: var(--font-ui);
  text-align: left;
}
.xp-panel[hidden] { display: none; }
.xp-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.xp-seg {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: 12px;
  background: var(--bg-soft);
}
.xp-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.xp-seg-btn:hover { color: var(--ink); }
.xp-seg-btn[aria-selected="true"] {
  background: var(--bg);
  color: var(--accent-ink);
  box-shadow: 0 1px 3px rgba(var(--shadow-ink), 0.14);
}
.xp-panel-note { flex: 1 1 auto; margin: 0; text-align: right; font-size: 13px; color: var(--muted); }
.xp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink);
  cursor: pointer;
}
.xp-close:hover { background: var(--border); }
.xp-body:focus { outline: none; }

.xp-col-title {
  margin: 0 0 8px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.xp-col-title.is-accent { color: var(--accent-ink); }
.xp-group + .xp-group { margin-top: 14px; }
.xp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* A row: a region, a country, a place or an experience. */
.xp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.xp-row:hover { background: var(--bg-soft); }
.xp-row.is-active,
.xp-row[aria-expanded="true"] { background: var(--accent-bg-soft); color: var(--accent-ink); font-weight: 600; }
.xp-row-name { flex: 1 1 auto; min-width: 0; }
.xp-row-count { font-size: 12px; font-weight: 500; color: var(--muted); }
.xp-row .xi { color: var(--accent); }
.xp-row-chev { opacity: 0; color: var(--accent-ink); transition: opacity var(--duration-quick) ease; }
.xp-row:hover .xp-row-chev,
.xp-row.is-active .xp-row-chev,
.xp-row[aria-expanded="true"] .xp-row-chev { opacity: 1; }
/* The place the page is exploring by now: a dot, the founder's marker. */
.xp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.xp-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.xp-more:hover { background: var(--accent-bg-soft); }

/* Destinations: four columns -- a column of regions, the chosen region's
   countries (or places), the other regions, the in-season card. */
.xp-dest {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr) 214px 236px;
  grid-template-areas: "a sub b card";
  gap: 20px;
  min-height: 400px;
}
.xp-dest-a { grid-area: a; }
.xp-dest-b { grid-area: b; }
.xp-dest-sub { grid-area: sub; padding: 0 4px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.xp-dest-sub .xp-list { display: grid; grid-template-columns: 1fr; }
/* Europe has twenty countries: past eight they run in two columns, so the
   panel stays the height of the founder's drawing. */
.xp-dest-sub .xp-list.is-many { grid-template-columns: 1fr 1fr; column-gap: 6px; }
.xp-dest-sub .xp-list.is-many .xp-row { min-height: 34px; padding: 5px 8px; }
.xp-dest > .xp-dest-card { grid-area: card; }
.xp-dest-card, .xp-exp-card { align-self: start; }

/* Experiences: the eleven, four photo cards, the in-season card. */
.xp-exp {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 236px;
  gap: 20px;
  min-height: 400px;
}
.xp-exp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.xp-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.xp-mini-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--accent-bg-soft), var(--border));
}
.xp-mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-warm); }
.xp-mini:hover .xp-mini-photo img { transform: scale(1.05); }
.xp-mini-where { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.xp-mini-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.25; }
.xp-mini.is-frame .xp-mini-photo { animation: xp-shimmer 1.4s ease-in-out infinite; }
.xp-mini.is-frame .xp-mini-where,
.xp-mini.is-frame .xp-mini-name { display: block; height: 12px; width: 60%; border-radius: 6px; background: var(--bg-soft); }
.xp-exp-foot { grid-column: 2; margin-top: -6px; }

/* The in-season card: the tall card of the founder's panels. */
.xp-spot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 380px;
  padding: 18px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  isolation: isolate;
}
.xp-spot img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-warm);
}
.xp-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(var(--hero-scrim-rgb), 0.88) 100%);
}
.xp-spot:hover img { transform: scale(1.04); }
.xp-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.xp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.xp-spot-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.xp-spot-name {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xp-spot-best { font-size: 13px; opacity: 0.9; }
.xp-spot-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.xp-spot.is-frame { animation: xp-shimmer 1.4s ease-in-out infinite; background: var(--bg-soft); }
.xp-spot.is-empty { background: var(--bg-soft); color: var(--muted); justify-content: center; align-items: center; text-align: center; }

@keyframes xp-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* A tablet: the regions stack in one column, the in-season card stays. */
@media (max-width: 1040px) {
  .xp-dest {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 210px;
    grid-template-areas: "a sub card" "b sub card";
    grid-template-rows: auto 1fr;
  }
  .xp-exp { grid-template-columns: 236px minmax(0, 1fr); }
  .xp-exp .xp-exp-card { display: none; }
}

/* The page behind a phone's sheet stays where it was. */
html.xp-sheet-open { overflow: hidden; }

/* A phone: the whole screen, a row at a time. The panel is a modal sheet
   there (explore.js sets aria-modal and keeps the focus inside), and each
   row opens in place under itself. */
@media (max-width: 640px) {
  .xp-panel {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }
  .xp-panel[hidden] { display: none; }
  .xp-panel-head {
    flex: 0 0 auto;
    margin: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    gap: 10px;
  }
  .xp-seg { flex: 1 1 auto; }
  .xp-seg-btn { flex: 1 1 0; justify-content: center; padding: 6px 8px; }
  .xp-panel-note { display: none; }
  .xp-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px 24px; }
  .xp-row { min-height: 48px; font-size: 15px; }
  .xp-row-chev { opacity: 1; transition: transform var(--duration-quick) var(--ease-warm); }
  .xp-row[aria-expanded="true"] .xp-row-chev { transform: rotate(90deg); }
  .xp-open { padding: 6px 4px 14px 10px; }
  .xp-open .xp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .xp-open .xp-row { min-height: 44px; font-size: 14px; }
  .xp-open .xp-spot { height: 220px; margin-top: 10px; }
  .xp-open .xp-exp-cards { margin-top: 4px; }
  .xp-mini-name { font-size: 15px; }
}

/* ---- 3b. The panel's typography (round 143) --------------------------------
   The founder's SVG, in Seenary's tokens: small, widely tracked overlines;
   links a size smaller and a weight lighter than before, so the columns
   read as a list rather than a wall; counts in lining, tabular figures;
   the in-season card's place in a serif, as a magazine sets a headline.
   His drawing's lighter greys for counts and links fall below 4.5:1 on
   white, so those stay --muted (main.css's measured grey). */
.xp-panel {
  --xp-sans: "Plus Jakarta Sans", var(--font-ui);
  --xp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  font-family: var(--xp-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.xp-seg-btn { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; }
.xp-seg-btn[aria-selected="true"] { font-weight: 700; }
.xp-panel-note { font-size: 12.5px; font-weight: 500; letter-spacing: 0.005em; }
.xp-col-title {
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.xp-row {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
/* The chosen region's countries or places: the list the panel is for. */
.xp-dest-sub .xp-row { font-weight: 600; }
.xp-row.is-active,
.xp-row[aria-expanded="true"] { font-weight: 700; }
.xp-row-count {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
}
.xp-more { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
.xp-mini-where { font-size: 10.5px; letter-spacing: 0.12em; }
.xp-mini-name { font-family: var(--xp-serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.xp-badge { font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink); }
.xp-spot-eyebrow { font-size: 10.5px; letter-spacing: 0.14em; opacity: 1; color: rgba(255, 255, 255, 0.78); }
.xp-spot-name {
  margin: 6px 0 6px;
  font-family: var(--xp-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.xp-spot-best { font-size: 12.5px; font-weight: 400; opacity: 1; color: rgba(255, 255, 255, 0.86); }
.xp-spot-link { margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-bright); }
.xp-spot.is-empty .xp-spot-name { font-size: 22px; }
.xp-panel-credit { font-size: 11.5px; }
@media (max-width: 640px) {
  .xp-row { font-size: 15px; }
  .xp-open .xp-row { font-size: 14px; }
  .xp-open .xp-spot-name { font-size: 26px; }
  .xp-mini-name { font-size: 15.5px; }
}

/* ---- 3c. Stories (round 246; styled here since 21 Oct 2026) ----------------
   These rules lived in stories.css, which the landing page does not load, so
   there the share button was the browser's own grey button (the founder:
   "looks very static"). Every page with this panel loads explore.css.
   Four stories side by side on a wide screen, so the way to share one is in
   view without scrolling; two on a tablet or a phone. */
.xp-stories .xp-story-cards { min-height: 120px; }
@media (min-width: 900px) {
  .xp-stories .xp-story-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.xp-story-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 18px;
}
.xp-story-links .xp-more { margin-top: 0; }
/* The stories page's own primary button (stories.css .st-btn-primary), with a
   pen in a pink disc and an arrow that moves on when it is pointed at. White
   on the violet passes 4.5:1 end to end; the pink is behind the pen only. */
.xp-story-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-left: auto;
  padding: 0 18px 0 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), 0.7);
  transition: transform var(--duration-quick) var(--ease-warm), box-shadow var(--duration-quick) var(--ease-warm);
}
.xp-story-share-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pop);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}
.xp-story-share-ico .xi { stroke-width: 2; }
.xp-story-share-go { display: inline-flex; transition: transform var(--duration-quick) var(--ease-warm); }
.xp-story-share-go .xi { stroke-width: 2; }
.xp-story-share:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(var(--accent-rgb), 0.85);
}
.xp-story-share:hover .xp-story-share-go { transform: translateX(3px); }
.xp-story-share:active { transform: translateY(0) scale(0.98); }
.xp-story-share:focus-visible { outline: 3px solid var(--focus-ring, var(--accent)); outline-offset: 3px; }
@media (max-width: 640px) {
  .xp-story-links { margin-top: 16px; }
  .xp-story-share { flex: 1 1 100%; margin-left: 0; }
  .xp-story-share-label { flex: 1 1 auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-story-share, .xp-story-share-go { transition: none; }
  .xp-story-share:hover, .xp-story-share:active, .xp-story-share:hover .xp-story-share-go { transform: none; }
}

/* ---- 4. A place card ------------------------------------------------------ */
/* Round 139 put eleven experience tabs at the foot of the landing page's
   photograph, with a section of cards under them; round 140 took both out
   (founder: "the 9 tabs are not needed on the landing page"). The card
   stays: a destination's page is made of them. */
/* A place card: the spread's own card (landing.css .destination-card),
   with where it is, its best months and, in season, a badge. */
.xp-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(160deg, var(--accent-bg-soft), var(--border));
  isolation: isolate;
  transition: transform 0.25s var(--ease-warm), box-shadow 0.25s ease;
}
.xp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(var(--hero-scrim-rgb), 0.26); }
.xp-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-warm);
}
.xp-card:hover img { transform: scale(1.05); }
.xp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(var(--hero-scrim-rgb), 0.9) 0%, rgba(var(--hero-scrim-rgb), 0.25) 48%, transparent 70%);
}
.xp-card.no-photo { background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%); }
.xp-card-text { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.xp-card-where { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.88; }
.xp-card-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.xp-card-best { font-size: 12.5px; opacity: 0.86; }
.xp-card.is-frame { background: var(--bg-soft); animation: xp-shimmer 1.4s ease-in-out infinite; }
.xp-card.is-frame::after { display: none; }

/* ---- 5. A destination's own page (theme_page.html) ----------------------- */
.tp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  padding: calc(120px + env(safe-area-inset-top, 0px)) 32px 44px;
  color: #fff;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  overflow: hidden;
  isolation: isolate;
}
.tp-hero-photo { position: absolute; inset: 0; z-index: -2; }
.tp-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--hero-scrim-rgb), 0.6) 0%, rgba(var(--hero-scrim-rgb), 0.15) 40%, rgba(var(--hero-scrim-rgb), 0.82) 100%);
}
.tp-hero-inner { width: 100%; max-width: 1120px; margin: 0 auto; }
.tp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13px; font-weight: 600; }
.tp-crumbs a { color: #fff; opacity: 0.86; text-decoration: none; }
.tp-crumbs a:hover { opacity: 1; text-decoration: underline; }
.tp-crumbs .xi { opacity: 0.7; }
.tp-title { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 6vw, 60px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.tp-sub { margin: 10px 0 20px; max-width: 620px; font-size: 16px; line-height: 1.5; opacity: 0.92; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* width + min-width: the page shell is a column flexbox, where a child's
   automatic minimum is its widest content -- the phone's one-line filter
   row made the whole page 1,110px wide before this. */
.tp-main { width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto; padding: 32px 32px 80px; }
.tp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.tp-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tp-filter .xi { color: var(--accent); }
.tp-filter:hover { border-color: var(--accent); }
.tp-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-filter[aria-pressed="true"] .xi { color: #fff; }
.tp-group + .tp-group { margin-top: 40px; }
.tp-group[hidden] { display: none; }
.tp-group-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.tp-group-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.tp-group-title a { color: inherit; text-decoration: none; }
.tp-group-title a:hover { color: var(--accent-ink); }
.tp-group-count { font-size: 13px; color: var(--muted); }
.tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tp-grid .xp-card[hidden] { display: none; }
.tp-status { color: var(--muted); font-size: 15px; }
@media (max-width: 1040px) { .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 640px) {
  .tp-hero { min-height: 320px; padding: calc(96px + env(safe-area-inset-top, 0px)) 16px 28px; }
  .tp-main { padding: 24px 16px 64px; }
  .tp-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px 4px; scrollbar-width: none; }
  .tp-filters::-webkit-scrollbar { display: none; }
  .tp-filter { flex: 0 0 auto; }
  .xp-card-name { font-size: 16px; }
}

/* ---- 6. The photographs' credits (round 140) ------------------------------ */
/* Every place photograph is a Wikimedia Commons file under a free licence
   (app/data/place_photos.py), and most of those licences ask for the
   author, the licence and a link wherever the photograph is shown. */
.xp-panel-credit {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.xp-panel-credit a,
.tp-credits a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tp-hero-credit {
  position: absolute;
  right: 16px;
  bottom: 10px;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.tp-hero-credit:hover,
.tp-hero-credit:focus-visible { color: #fff; text-decoration: underline; }
.tp-credits { margin: 44px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* /photo-credits: every photograph beside its credit, by state and by
   country. The nav is solid here (no dark hero), so the page starts under it. */
.pc-main { width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto; padding: calc(var(--marketing-nav-h) + 36px) 32px 80px; }
.pc-title { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.pc-sub { margin: 12px 0 8px; max-width: 680px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.pc-part { margin-top: 40px; }
.pc-part-title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); }
.pc-group { margin: 26px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 24px; }
.pc-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-thumb { flex: 0 0 72px; width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--bg-soft); }
.pc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-place { font-size: 15px; font-weight: 600; color: var(--ink); }
.pc-credit { font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.pc-credit a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .xp-panel-credit { flex: 0 0 auto; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .tp-hero-credit { right: 12px; bottom: 6px; max-width: calc(100% - 24px); }
  .pc-main { padding: calc(var(--marketing-nav-h) + 20px) 16px 64px; }
  .pc-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .xp-card, .xp-card img, .xp-mini-photo img, .xp-spot img, .xp-caret, .xp-row-chev { transition: none; }
  .xp-card.is-frame, .xp-mini.is-frame .xp-mini-photo, .xp-spot.is-frame { animation: none; }
}

/* ---- 6. All destinations, A to Z (destinations_index.html, round 229) --- */
.dz-hero { min-height: 240px; padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
.dz-count { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 13px; font-weight: 600; }
.dz-h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.dz-hub-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.dz-hub-list a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--accent-bg-soft); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.dz-hub-list a:hover { background: var(--accent); color: #fff; }
.dz-letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; }
.dz-letters a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: 8px; color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.dz-letters a:hover { background: var(--accent-bg-soft); }
.dz-group { padding: 8px 0 20px; border-top: 1px solid rgba(var(--accent-rgb), 0.12); scroll-margin-top: calc(var(--marketing-nav-h, 84px) + 12px); } /* round 230: a letter jump clears the fixed nav */
.dz-letter { margin: 0 0 10px; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); }
.dz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.dz-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.dz-list a:hover { color: var(--accent); text-decoration: underline; }
.dz-where { color: var(--muted); font-size: 13px; }

/* Round 281 (the AI-visibility audit): prose pages -- the offline toolkit, the comparisons -- and the
   sample-itineraries list. One column of readable text under the same hero the A-Z index uses. */
.pg-prose { max-width: 820px; }
.pg-prose h2 { margin: 36px 0 10px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.pg-prose h3 { margin: 22px 0 6px; font-size: 17px; font-weight: 700; }
.pg-prose p, .pg-prose li { font-size: 16px; line-height: 1.6; color: var(--ink); }
.pg-prose ul { padding-left: 22px; }
.pg-lead { font-size: 18px; line-height: 1.6; margin: 0 0 8px; }
.pg-note { margin-top: 28px; font-size: 14px; color: var(--muted); }
.pg-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
.pg-link { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.pg-link:hover, .pg-link:focus-visible { text-decoration: underline; }
.pg-table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 15px; }
.pg-table th, .pg-table td { padding: 10px 12px; border-top: 1px solid var(--border, #e6e3ef); text-align: left; vertical-align: top; line-height: 1.5; }
.pg-table thead th { border-top: 0; font-size: 13px; text-transform: none; color: var(--muted); }
.pg-table tbody th { width: 22%; font-weight: 700; }
@media (max-width: 640px) {
  .pg-table, .pg-table thead, .pg-table tbody, .pg-table tr, .pg-table th, .pg-table td { display: block; }
  .pg-table thead { display: none; }
  .pg-table tr { padding: 10px 0; border-top: 1px solid var(--border, #e6e3ef); }
  .pg-table th, .pg-table td { border-top: 0; padding: 4px 0; width: auto; }
  .pg-table td::before { content: attr(data-col); display: block; font-size: 12px; color: var(--muted); }
}
.rt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 0 0 28px; padding: 0; list-style: none; }
.rt-card-link { display: block; height: 100%; border-radius: 16px; overflow: hidden; background: var(--bg-soft); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.rt-card-link:hover, .rt-card-link:focus-visible { box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.18); }
.rt-card-photo { display: block; width: 100%; height: 160px; object-fit: cover; }
.rt-card-body { display: block; padding: 14px 16px 18px; }
.rt-card-title { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; }
.rt-card-meta { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.rt-card-desc { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; }
.cr-plan-own { display: inline-block; margin-top: 10px; }