/* TourGuid home page. The layout and the photography are the owner's reference design (2026-09-27); the COLOURS are Destination Exploration's (the owner, 2026-10-04: "The color theme all across the website
   is that of tourguid.net/store"), the same tokens site.css uses for the header and footer that every page shares. The white, orange (#B8540F) and dark-green palette this file had before is gone.
   Corners are the Explore home's own: 6px controls, 8px cards, 12px for the few large panels. Photography is Wikimedia Commons, credited in assets/photos/CREDITS.tsv, self-hosted.
   Contrast, on what is drawn: white on --primary #075d61 7.6:1; --ink on --paper 12.7:1; --muted on --paper 5.0:1; --teal (kickers) on --paper 5.3:1; white on --dark 14:1; the hero's white
   text over its scrim, worst case a pure-white photo pixel under the scrim's 88% stop, 8.6:1. The header, the footer and the skip link are in site.css and the stamped partials, not here. */

:root {
  --paper: #fffdf8;
  --sand: #f7f1e7;
  --ink: #123642;
  --muted: #5c7278;
  --line: #d9e2de;
  --primary: #075d61;
  --primary-hover: #064c4f;
  --primary-active: #053b3d;
  --primary-tint: #eaf6ef;
  --deep: #075d61;
  --teal: #0c7778;
  --dark: #103944;
  --dark-2: #14584a;
  --amber: #ffae19;
  --focus: #f33b36;
  /* Destination Exploration's corners: 6px controls, 8px cards, 12px for the few large panel surfaces. True circles (avatars, icon badges) are a shape, not a "corner", and stay round. */
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --gutter: 16px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--deep); text-decoration: none; }
/* The ring is coral on the light page and amber on the dark bands and the photo, as in the shared header (Destination Exploration's own amber ring is 1.8:1 on paper). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark :focus-visible, .on-photo :focus-visible { outline-color: var(--amber); }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 760px; }

/* Buttons. Primary is white on Destination Exploration's deep teal; on the photo and on the dark bands the primary action is white with deep-teal text, as in the Explore hero. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; min-width: 44px; padding: 0 22px; border: 2px solid transparent; border-radius: var(--radius-s); font: 600 .9375rem/1.2 var(--font); text-align: center; cursor: pointer; white-space: nowrap; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .875rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn-light { background: #fff; border-color: #fff; color: var(--deep); }
.btn-light:hover { background: var(--primary-tint); border-color: var(--primary-tint); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--ink); }
.btn-outline:hover { background: rgba(18, 54, 66, .06); }
.btn-outline.on-photo, .on-photo .btn-outline { color: #fff; }
.btn-outline.on-photo:hover, .on-photo .btn-outline:hover { background: rgba(255, 255, 255, .16); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); padding-inline: 12px; }
.btn-ghost:hover { background: rgba(18, 54, 66, .06); }
.btn-dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn-dark:hover { background: var(--dark-2); border-color: var(--dark-2); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--deep); }
.link-arrow:hover { color: var(--dark); }
.link-arrow svg { width: 16px; height: 16px; }

/* Hero: a real photo, a dark scrim under the text, rounded geometry throughout. */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Dark enough across the text column (0-52%) that white text stays >=4.5:1 against ANY underlying pixel, including a bright cloud or whitewashed wall, measured against a worst-case
   near-white photo pixel and not assumed from the photo's average tone. The scrim is Destination Exploration's dark teal (#103944). It fades out toward the right so the rest of the photo shows through. */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16, 57, 68, .92) 0%, rgba(16, 57, 68, .88) 52%, rgba(16, 57, 68, .5) 70%, rgba(16, 57, 68, .12) 88%, rgba(16, 57, 68, 0) 100%); }
.hero-in { position: relative; padding-block: 48px 72px; }
@media (min-width: 768px) { .hero-in { padding-block: 52px 84px; } }
@media (min-width: 1024px) { .hero-in { padding-block: 56px 96px; } }
/* Left-aligned, not centered: the scrim is darkest over the 0-52% band specifically to sit under this copy. */
.hero-grid { display: grid; align-items: center; justify-items: start; }
.hero-copy { max-width: 640px; }
h1 { font-size: 2.25rem; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
@media (min-width: 768px) { h1 { font-size: 2.875rem; } }
@media (min-width: 1024px) { h1 { font-size: 3.375rem; } }
.hero-sub { margin-top: 14px; font-size: 1.1875rem; font-weight: 700; }
.hero-lead { margin-top: 12px; max-width: 34em; color: rgba(255, 255, 255, .92); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-caption { position: absolute; top: 22px; right: var(--gutter); z-index: 2; max-width: 160px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.0625rem; line-height: 1.25; color: #fff; text-align: right; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.hero-caption svg { display: block; margin: 4px 0 0 auto; width: 70px; height: 18px; color: var(--amber); }
@media (max-width: 640px) { .hero-caption { display: none; } }

/* The Travel Planner section's card: a drawn, honest representation of the real trip UI (not a photo, not invented functionality). */
.device-card { background: #fff; color: var(--ink); border-radius: var(--radius-m); box-shadow: 0 24px 60px -20px rgba(14, 48, 56, .45); overflow: hidden; }
.device-card .dm-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.device-card .dm-head b { font-size: .875rem; }
.device-card .dm-head .dm-flag { width: 16px; height: 16px; color: var(--deep); flex: none; }
.device-card .dm-body { display: grid; grid-template-columns: max-content 1fr; }
.dm-rail { border-right: 1px solid var(--line); padding: 10px 0; font-size: .6875rem; color: var(--muted); }
.dm-rail li { padding: 7px 10px; }
.dm-rail li.cur { color: var(--ink); font-weight: 700; background: var(--sand); border-radius: var(--radius-s); margin: 0 4px; }
.dm-main { padding: 12px 14px; }
.dm-row { display: flex; align-items: baseline; justify-content: space-between; font-size: .8125rem; margin-bottom: 8px; }
.dm-row b { font-size: .875rem; }
.dm-timeline { display: grid; gap: 8px; font-size: .75rem; }
.dm-timeline li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; }
.dm-timeline time { color: var(--muted); }
.dm-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.dm-photos img { width: 100%; height: 44px; object-fit: cover; border-radius: 6px; }
/* Three crops of one illustrative photo, without inline style (z1's CSP has no unsafe-inline for style-src). */
.dm-photos img.op-a { object-position: 15% 60%; }
.dm-photos img.op-b { object-position: 55% 75%; }
.dm-photos img.op-c { object-position: 85% 40%; }

/* Search panel: overlaps the hero photo's bottom edge, tabs select the Explore category it targets. */
.search-wrap { position: relative; margin-top: -56px; z-index: 2; }
@media (min-width: 768px) { .search-wrap { margin-top: -64px; } }
.search-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 14px 40px rgba(14, 48, 56, .09); padding: 22px; }
.search-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.search-head h2 { font-size: 1.375rem; font-weight: 800; }
.search-head p { color: var(--muted); font-size: .9375rem; }
/* A bare 1fr row starting at 720px let the destination field get squeezed to a few pixels between roughly 720-1000px (found by TG-Web-1A). The row only starts where it was proven to fit
   (1024px), the stacked single-column layout below that is the one verified at 768/390/320, and minmax floors stop it happening again at any width. */
.search-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* Each column floors at what its field needs (seen clipped 2026-10-04 at 1024-1100px): the destination 225px for its placeholder, the dates 180px for mm/dd/yyyy and the picker, the travellers 160px
   for "2 travelers" and its arrow. The floors, the gaps and the button fit the panel at 1024px, the narrowest this row is used at. */
@media (min-width: 1024px) { .search-fields { grid-template-columns: minmax(225px, 1.3fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 1fr) auto; align-items: stretch; } }
/* The field edge is the same 3:1 line the app's fields have (#7a948e, 3.25:1 on white), not Destination Exploration's faint #bfcfcb (1.7:1), which fails WCAG 1.4.11. */
.field-box { display: flex; align-items: center; gap: 10px; border: 1px solid #7a948e; border-radius: 4px; background: #fff; padding: 0 14px; min-height: 50px; }
.field-box svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.field-box input, .field-box select { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); width: 100%; min-width: 0; }
.field-box:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-box input::placeholder { color: #6a8186; }
.search-fields .btn { min-height: 50px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--muted); font: 600 .875rem var(--font); cursor: pointer; }
.tabs button svg { width: 16px; height: 16px; }
.tabs button:hover { background: var(--sand); }
.tabs button[aria-pressed="true"] { background: var(--primary-tint); color: var(--primary-active); }

/* Visually hidden but readable by assistive tech: icon-only controls and field labels that repeat a visible icon's meaning in words. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Every icon sized by its container by default; a handful of contexts above already set a more specific size. */
.btn svg { width: 18px; height: 18px; flex: none; }
.device-card .dm-head .dm-flag svg { width: 14px; height: 14px; }

/* Sections */
.section { padding-block: 44px; }
@media (min-width: 768px) { .section { padding-block: 56px; } }
.section.soft { background: var(--sand); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 20px; }
h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 768px) { h2 { font-size: 1.75rem; } }
.kicker { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.section-lead { color: var(--muted); max-width: 46em; }
.section-lead.mt { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.device-card.builder { max-width: 520px; }

/* Destinations */
.dest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .dest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .dest-grid { grid-template-columns: repeat(6, 1fr); } }
/* Square tiles. They were 4:5, taller than the photos, so the landmarks looked stretched upward and the owner said so (2026-10-04: "out of proportion - stretched height"). The photo files are not
   distorted (480x558 crops of the Wikimedia originals); the tall tile around them was the problem. Square keeps every landmark whole. Destination Exploration's 4:3 tile cut the top off the Eiffel Tower and the
   Sagrada Familia, because those two originals are portrait photographs. */
.dest-card { position: relative; display: block; border-radius: var(--radius-m); overflow: hidden; aspect-ratio: 1 / 1; }
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
/* Which part of the photo stays when the tile trims it: the top of each landmark. */
.dest-paris img { object-position: 50% 0; }
.dest-barcelona img { object-position: 50% 10%; }
.dest-newyork img { object-position: 50% 30%; }
.dest-bangkok img { object-position: 50% 25%; }
.dest-card:hover img { transform: scale(1.05); }
.dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 57, 68, 0) 55%, rgba(16, 57, 68, .82) 100%); }
.dest-card span { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .dest-card img { transition: none; } }

/* Cross-sell: a sample activity card beside a sample itinerary. The card carries no price and no rating: neither is a fact about a real offer. */
.cross-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .cross-grid { grid-template-columns: 1fr 1fr; } }
.cross-sample { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
@media (max-width: 640px) { .cross-sample { grid-template-columns: 1fr; } .cross-sample .journey-arrow { transform: rotate(90deg); margin: -4px auto; } }
.activity-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 14px 36px -22px rgba(14, 48, 56, .35); }
.activity-card .ac-photo { position: relative; aspect-ratio: 16/10; }
.activity-card .ac-photo img { width: 100%; height: 100%; object-fit: cover; }
.activity-card .fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); border-radius: 50%; color: var(--ink); }
.activity-card .fav svg { width: 17px; height: 17px; }
.activity-card .ac-body { padding: 14px 16px 16px; }
.activity-card h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.activity-card .ac-meta { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--muted); margin-bottom: 2px; }
.activity-card .ac-meta svg { width: 14px; height: 14px; }
.activity-card .ac-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px; }
.journey-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; }
.journey-card h3 { font-size: 1rem; }
.journey-card .jc-sub { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.journey-list { display: grid; gap: 12px; margin-top: 12px; }
.journey-list li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; font-size: .875rem; }
.journey-list time { color: var(--muted); font-weight: 600; }
.journey-arrow { display: flex; justify-content: center; color: var(--deep); }
.journey-arrow svg { width: 26px; height: 26px; }
@media (max-width: 859px) { .journey-arrow { transform: rotate(90deg); margin: -4px 0; } }

/* Travel Planner */
.builder-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .builder-grid { grid-template-columns: 1fr 1.1fr; } }
.builder-note { margin-top: 14px; font-size: .875rem; color: var(--muted); }

/* Share */
.share-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .share-grid { grid-template-columns: repeat(3, 1fr); } }
.share-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.share-card .sc-photo { aspect-ratio: 4/3; }
.share-card .sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-card .sc-body { padding: 14px 16px; }
.share-card h3 { font-size: 1rem; margin-bottom: 2px; }
.share-card .sc-meta { font-size: .8125rem; color: var(--muted); }
.share-card .link-arrow { margin-top: 10px; font-size: .875rem; }

/* The membership band: Destination Exploration's header gradient and amber for the small marks */
.promo-band { background: linear-gradient(105deg, #103944 0%, #103b43 58%, #14584a 100%); color: #fff; padding-block: 40px; }
.promo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .18); margin-bottom: 24px; }
.promo-top h2 { font-size: 1.375rem; }
.promo-price { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.promo-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 720px) { .promo-features { grid-template-columns: repeat(5, 1fr); } }
.promo-features li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: .8125rem; font-weight: 600; }
.promo-features svg { width: 24px; height: 24px; color: var(--amber); }

/* Photo credits: this page's own part of the shared footer. A native disclosure, closed by default, so licence text never competes with the page while it stays one tap away. */
.photo-credits { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); }
.photo-credits summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: #c5ddda; }
.photo-credits summary:hover { color: #fff; }
.photo-credits p { margin: 10px 0; font-size: .75rem; color: #c5ddda; max-width: 60em; }
.photo-credits ul { display: grid; gap: 4px; font-size: .75rem; color: #c5ddda; }
.photo-credits a { color: #fff; text-decoration: underline; }

/* Consent banner */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--dark); color: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 14px; }
.consent-in p { max-width: 60em; min-width: 0; margin: 0; font-size: .9375rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .btn { min-height: 44px; padding: 0 18px; }
.consent-actions .btn-outline { color: #fff; }
@media (max-width: 600px) { .consent-in { flex-direction: column; align-items: stretch; } .consent-actions .btn { flex: 1; } }

/* The one "under construction" page */
.stub { min-height: 60vh; padding-block: 56px; }
.stub h1 { font-size: 2rem; margin-bottom: 16px; }
.stub p + p { margin-top: 12px; }
.stub-punch { margin-top: 16px; font-size: 1.375rem; font-weight: 800; }
.stub-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .btn, .dest-card, .activity-card, .journey-card, .share-card, .search-panel { border: 1px solid CanvasText; } }