/* Visit Peru: a gentle travel magazine. Soft grey-white paper, warm brown-grey ink and one muted
   terracotta red (from the Peruvian flag); an editorial serif for headings, a quiet humanist sans
   for text; rounded but not bubbly corners, pale hairlines, hardly any shadow. Photographs carry
   the colour. Light only. Mobile first (base = phone, `min-width` adds room). Every text and
   background pair was checked against WCAG AA (see docs/DECISIONS.md). Motion is progressive
   enhancement and is switched off for visitors who ask for reduced motion. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.014c5c931b53.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.819573e0af51.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.eb2486760f75.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-ext.540a2249fc2b.woff2") format("woff2"); font-weight: 700; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin.d50e0ebc6aa4.woff2") format("woff2"); font-weight: 700; font-display: swap; 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: "Source Sans 3"; src: url("../fonts/sourcesans.edab84a4f6f5.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --bg: #f1f0ed;           /* soft light grey instead of pure white */
  --bg-fade: linear-gradient(180deg, #f8f7f5 0, #e8e6e2 70rem);   /* page background: light at the top, soft grey from the third screen on */
  --bg-end: #e8e6e2;
  --surface: #f9f8f6;
  --soft: #e8e6e2;
  --ink: #2e2823;
  --ink-2: #6a625b;
  --line: #dfdbd5;
  --line-strong: #c3bdb5;
  --primary: #a80f20;       /* buttons */
  --on-primary: #ffffff;
  --accent: #b8392b;        /* the one colour: links, labels, small marks (muted flag red) */
  --accent-deep: #962d21;
  --gold: #e2a93b;          /* ochre: only as a background, with dark ink text */
  --night: #3b332e;
  --peru-red: #a80f20;      /* the red of the Peruvian flag, deepened: footer */
  --photo-shade: linear-gradient(to top, rgb(46 39 34 / .38) 0%, rgb(46 39 34 / .12) 38%, transparent 62%);   /* soft dark foot on photos: depth */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-brand: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 1rem;
  --radius-sm: .65rem;
  --gutter: 1.1rem;
  --header-h: 3.75rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-end) var(--bg-fade) no-repeat; color: var(--ink); font: 1.1875rem/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .85rem 1.1rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 1rem; }

/* ---- Type ---- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; color: inherit; margin: 0; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0 0 1.1em; }
.lead { font: 400 1.2rem/1.55 var(--font-sans); color: var(--ink-2); max-width: 38rem; }
.chip { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: 99px; background: var(--gold); color: var(--ink); font: 700 .72rem/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.chip--glass { background: rgb(255 255 255 / .92); color: var(--ink); }

/* ---- Header: a plain bar with a hairline, like a magazine's running head ---- */
.site-header {
  position: fixed; z-index: 60; inset: 0 0 auto; height: var(--header-h);
  display: flex; align-items: center; gap: .5rem; padding: 0 var(--gutter);
  background: var(--bg); border-bottom: 4px solid var(--peru-red);
}
/* The logo: a red tile with the sun over the peaks, VISIT small above a big PERU and .info beside it. */
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; padding: .4rem 0; }
.brand__tile { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: var(--peru-red); color: #fff; }
.brand__mark { width: 1.9rem; height: 1.9rem; }
.brand__name { display: grid; font-family: var(--font-brand); line-height: .92; }
.brand__kicker { font-size: .86rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.brand__word { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; color: var(--peru-red); }
.brand__word i { margin-left: .3rem; font: 600 .38em/1 var(--font-sans); font-style: normal; letter-spacing: .12em; color: var(--ink-2); }
.brand--light { color: #fff; padding: 0; }
.brand--light .brand__tile { background: #fff; color: var(--peru-red); }
.brand--light .brand__kicker, .brand--light .brand__word, .brand--light .brand__word i { color: #fff; }
.brand--light .brand__word { font-size: 2rem; }
/* Mobile first: the sections live in the menu; the inline row appears on wide screens. */
.main-nav { display: none; flex: 1; min-width: 0; margin-left: 1.5rem; }
.nav, .site-footer ul { display: flex; margin: 0; padding: 0; list-style: none; }
.nav { gap: .1rem; width: max-content; }
.nav:empty { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 99px; color: var(--ink); font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; }
.nav a:hover, .nav a:focus-visible { background: var(--peru-red); color: #fff; }

/* ---- Layout ---- */
main { display: block; padding-top: var(--header-h); }
body:not(.has-hero) main { padding-top: calc(var(--header-h) + 1rem); }
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; }

/* ---- Home hero: full screen, the photo does the talking ---- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(70svh - var(--header-h)), 30rem); color: #fff; overflow: hidden; background: var(--night); }
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.hero__image:not(:first-child) { opacity: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(46 39 34 / .78) 0%, rgb(46 39 34 / .3) 40%, transparent 70%); }
.hero__inner { width: 100%; max-width: 72rem; margin: 0 auto; padding: 6rem var(--gutter) 2.5rem; }
.hero h1 { font-size: clamp(2.3rem, 8vw, 4.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.hero h1::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 1.1rem; border-radius: 99px; background: var(--accent); }
.hero .lead { color: rgb(255 255 255 / .94); max-width: 36rem; margin: .9rem 0 0; font-size: 1.1rem; }

/* ---- Destinations: a photo mosaic with square corners ---- */
.destinations { max-width: 74rem; margin: 0 auto; padding: 2.5rem var(--gutter) 2.5rem; }
.destinations h2 { margin-bottom: 1.1rem; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 11rem; grid-auto-flow: dense; gap: .5rem; }
.tile { position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius); background: var(--night); color: #fff; }
.tile:first-child { grid-column: 1 / -1; grid-row: span 2; }
.tile:last-child:nth-child(even) { grid-column: 1 / -1; }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(46 39 34 / .8) 0%, rgb(46 39 34 / .15) 55%, transparent 80%); }
.tile__body { width: 100%; padding: .9rem 1rem; }
.tile h3 { font-size: 1.2rem; color: #fff; }
.tile:first-child h3 { font-size: 1.7rem; }
.tile h3 a { color: inherit; text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole tile is the link */
.tile p { display: none; margin: .35rem 0 0; font-size: .95rem; line-height: 1.4; color: rgb(255 255 255 / .92); }
.tile:first-child p { display: block; max-width: 28rem; }
.tile .chip { position: absolute; top: .7rem; left: .7rem; padding: .22rem .7rem; background: var(--bg); color: var(--ink); }
.tile__go { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.05rem; font-weight: 700; transition: background .3s; }
.tile:has(a):hover img { transform: scale(1.05); }
.tile:has(a):hover .tile__go { background: var(--accent-deep); }

/* ---- Inner pages: the photo on top, the headline under it, as in a magazine feature ---- */
.page-hero { color: var(--ink); }
.page-hero > img { display: block; width: 100%; height: min(46svh, 26rem); object-fit: cover; }
.page-intro { margin-bottom: 1.2rem; }
.page-intro h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem; }
.page-intro h1::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: 1rem; border-radius: 99px; background: var(--accent); }
.page-intro--hero .lead { margin: 1rem 0 0; }
.page-title h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.08; margin-bottom: 1rem; }
.page-title h1::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: 1rem; border-radius: 99px; background: var(--accent); }
.draft-note { margin: 0 0 1.5rem; padding: .7rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 20%, var(--surface)); color: var(--ink); font-weight: 600; }
.prose p, .prose li { max-width: 40rem; }
.prose li { margin-bottom: .3em; }

/* ---- Content blocks ---- */
.block { margin: 2rem 0; }
.block h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.5rem, 4.5vw, 1.9rem); }
.block h2::before { content: ""; display: block; width: 2.4rem; height: 4px; margin-bottom: .8rem; border-radius: 99px; background: var(--accent); }
.block-answer { padding: 1rem 1.2rem 1rem 1.2rem; background: #fff; border-left: 4px solid var(--accent); font: 500 1.2rem/1.55 var(--font-sans); }
.block-answer p { margin: 0 0 .8rem; } .block-answer p:last-child { margin: 0; }
.alert { padding: 1rem 1.2rem; border-radius: var(--radius); background: floralwhite; }
.alert p { margin: .3rem 0 0; }
.alert strong { font: 600 1.15rem/1.3 var(--font-display); }
.fact-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 2rem 0; padding: 0; }
.fact { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.fact dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fact dd { margin: .25rem 0; font: 600 1.7rem/1.1 var(--font-display); }
.fact small { color: var(--accent); font-weight: 600; font-size: .8rem; }
.faq details { margin: 0 0 .7rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgb(46 39 34 / .06); transition: border-color .2s, box-shadow .2s; }
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: var(--accent); box-shadow: 0 8px 22px -14px rgb(139 29 26 / .45); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .8rem 1.1rem; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #eceae6; color: var(--peru-red); font-size: 1.35rem; font-weight: 600; line-height: 1; transition: transform .25s var(--ease), background .2s, color .2s; }
.faq details[open] summary { color: var(--accent-deep); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--peru-red); color: #fff; }
.faq details p { margin: 0; max-width: none; padding: 0 1.1rem 1.2rem; font-size: 1.06rem; line-height: 1.65; color: var(--ink); }
.sources { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .95rem; }
.sources h2 { margin: 0 0 .5rem; padding: 0; border: 0; font: 700 .8rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sources ul { margin: 0; padding-left: 1.2rem; }
.sources span { color: var(--ink-2); }
.stamp { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin: 1.25rem 0 0; padding: .3rem .8rem; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; font-weight: 600; }

/* ---- Photo credits page ---- */
.credits { margin: 2rem 0 0; padding: 0; list-style: none; }
.credits li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.credits img { width: 100%; height: 4.5rem; border-radius: .6rem; object-fit: cover; }
.credits p { margin: 0; font-size: .95rem; line-height: 1.5; }
.credits strong { display: block; }

/* ---- Footer ---- */

/* ---- Motion: never for visitors who ask for reduced motion ---- */
.hero__foot { display: none; }
.hero__image:nth-child(1) { transform-origin: 55% 40%; }
.hero__image:nth-child(2) { transform-origin: 25% 65%; }
.hero__image:nth-child(3) { transform-origin: 75% 55%; }
@media (prefers-reduced-motion: no-preference) {
  /* The slideshow: each photo fades in for its slot of the cycle while it zooms in slowly; its
     caption and its progress bar follow the same clock (three slides share --cycle). */
  .hero__slides:has(.hero__image:nth-child(2)) .hero__image { animation: hero-fade var(--cycle) ease-in-out infinite, hero-zoom var(--cycle) linear infinite; animation-delay: calc(var(--slot) - var(--cycle)); opacity: 0; }
  .hero__slides:has(.hero__image:nth-child(2)) .hero__image:first-child { opacity: 1; }
  .hero:hover .hero__image, .hero:hover .hero__progress span::after { animation-play-state: paused; }
  @keyframes hero-fade { 0%, 30% { opacity: 1; } 37%, 93% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes hero-zoom { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 60%, 100% { transform: scale(1); } }
  .hero__foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) 1.4rem; }
  .hero__progress { display: flex; flex: none; gap: .55rem; }
  .hero__progress span { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: rgb(255 255 255 / .4); box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
  .hero__progress span::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: #fff; transform: scale(0); animation: hero-dot var(--cycle) linear infinite; animation-delay: calc(var(--slot) - var(--cycle)); }
  @keyframes hero-dot { 0% { transform: scale(0); } 3%, 31% { transform: scale(1.25); } 34%, 100% { transform: scale(0); } }
  /* The title and the line under it come in once, when the page opens. */
  .hero__inner > * { animation: hero-in .9s var(--ease) both; }
  .hero__inner > :nth-child(2) { animation-delay: .15s; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
/* Where the browser can tie animation to scrolling: tiles rise as they appear, the hero drifts. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .hero__slides { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    @keyframes drift { to { transform: scale(1.06) translateY(4%); } }
  }
}

/* ---- Bigger screens ---- */
@media (min-width: 40rem) {
  .fact-bar { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (min-width: 48rem) {
  :root { --gutter: 2rem; --header-h: 4.25rem; }
  body { font-size: 1.25rem; }
  .hero { min-height: min(calc(70svh - var(--header-h)), 34rem); }
  .hero__inner { padding-block: 6rem 3rem; }
  .hero .lead { font-size: 1.3rem; max-width: 40rem; }
  .destinations { padding-block: 4rem 3rem; }
  .tiles { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; gap: .75rem; }
  .tile:first-child { grid-column: span 2; grid-row: span 2; }
  .tile:last-child:nth-child(even) { grid-column: auto; }
  .tile:nth-child(6) { grid-column: span 2; }
  .tile p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile h3 { font-size: 1.45rem; }
  .tile:first-child h3 { font-size: 2.4rem; }
  .tile__body { padding: 1.3rem 1.4rem; }
  .page-hero > img { height: min(52svh, 34rem); }
  .page-intro--hero .lead { font-size: 1.5rem; }
  .wrap { padding-block: 2.5rem 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Lists of pages ("in this section", home index): text first, small photo when there is one. */
.children { margin: 1.5rem 0 2.5rem; }
.children h2 { margin-bottom: 0; }
/* Cards of "in this section": soft shadow, corners alternating big and small, larger text. */
.entries { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 1.2rem 0 0; padding: 0 0 .6rem; list-style: none; }
.entry { position: relative; overflow: hidden; border-radius: 1.8rem .5rem 1.8rem .5rem; background: var(--surface); box-shadow: 0 1px 2px rgb(46 39 34 / .08), 0 14px 28px -14px rgb(46 39 34 / .4); transition: transform .25s var(--ease), box-shadow .25s; }
.entry:nth-child(even) { border-radius: .5rem 1.8rem .5rem 1.8rem; }
.entry:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 22px 36px -16px rgb(46 39 34 / .5); }
.entry img { display: block; width: 100%; height: 10rem; object-fit: cover; }
.entry__body { padding: 1rem 1.2rem 1.3rem; }
.entry__kind { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.entry h3 { margin: .25rem 0 .45rem; font-size: 1.45rem; line-height: 1.2; }
.entry h3 a { color: inherit; text-decoration: none; }
.entry h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.entry p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; max-width: none; font-size: 1.075rem; line-height: 1.55; color: var(--ink-2); }
.destinations .entries { padding-inline: 0; }
@media (min-width: 700px) { .entries { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; } }
@media (min-width: 1100px) { .destinations .entries { grid-template-columns: repeat(3, 1fr); } }

/* Offers: tours and Booking areas. Always followed by the affiliate note.
   Two cards per row on every screen. */
.offers { margin: 2.5rem 0; }
.offer-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1rem 0; padding: 0; list-style: none; }
.offer { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 4px rgb(46 39 34 / .06), 0 8px 22px rgb(46 39 34 / .12); transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.offer:hover { border-color: var(--line-strong); box-shadow: 0 4px 8px rgb(46 39 34 / .08), 0 16px 34px rgb(46 39 34 / .2); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .offer:hover { transform: none; } }
.offer__photo { position: relative; background: var(--soft); }
.offer__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.offer__kind { position: absolute; top: .5rem; left: .5rem; padding: .18rem .6rem; border-radius: 99px; background: var(--bg); color: var(--ink); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.offer__price { position: absolute; right: .5rem; bottom: .5rem; padding: .3rem .7rem; border-radius: 99px; background: var(--night); color: #fff; font-size: .7rem; line-height: 1.1; }
.offer .offer__price strong { color: inherit; font: 600 1.15rem/1 var(--font-display); letter-spacing: -.01em; }
.offer__body { display: flex; flex: 1; flex-direction: column; gap: .25rem; padding: .7rem .8rem .85rem; }
.offer__place { margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.offer h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.offer h3 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); text-decoration: none; }
.offer h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the link */
.offer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; margin: 0 0 .5rem; font-size: .84rem; color: var(--ink-2); }
.offer__rating { font-weight: 700; color: var(--ink); }
.offer__rating::first-letter { color: var(--accent); }
.offer__free { font-size: .76rem; font-weight: 600; color: var(--accent); }
.offer__cta { margin-top: auto; width: 100%; min-height: 40px; padding: 0 .8rem; font-size: .84rem; }
.offer:hover .offer__cta { background: var(--accent-deep); }
.stay-list { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 1rem 0; padding: 0; list-style: none; }
.stay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.stay h3 { margin: 0; font-size: 1.12rem; }
.stay p { margin: .15rem 0 0; font-size: 1rem; color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem; border: 0; border-radius: 99px; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 700; font-size: .9rem; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: background .2s; }
.btn:hover { background: #7f0b18; color: #fff; }
.btn:disabled { opacity: .6; cursor: wait; }
.affiliate-note { margin: .4rem 0 0; font-size: .875rem; color: var(--ink-2); }
@media (min-width: 700px) { .offer-list { gap: .9rem; } .offer h3 { font-size: 1.1rem; } .offer__body { padding: .85rem 1rem 1rem; } }

/* Maps */
.map-block { margin: 2.5rem 0; }
.map__canvas { height: 26rem; overflow: hidden; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); }
.map__places { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .92rem; }
.map__places .is-focus { font-weight: 700; }
@media (min-width: 900px) { .map__canvas { height: 34rem; } }
.map-pin { width: 16px; height: 16px; border: 2.5px solid #fff; border-radius: 50%; background: var(--peru-red); box-shadow: 0 2px 6px rgb(0 0 0 / .45); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.map-pin:hover { transform: scale(1.35); box-shadow: 0 4px 12px rgb(0 0 0 / .5); }
.map-pin--focus { width: 24px; height: 24px; background: var(--accent); }
/* The card opened by a pin */
.map-popup .maplibregl-popup-content { width: 18rem; padding: 0; overflow: hidden; border-radius: 1.2rem; background: var(--surface); box-shadow: 0 18px 44px rgb(46 39 34 / .35); font-family: var(--font-sans); color: var(--ink); animation: map-card-in .22s var(--ease); }
@keyframes map-card-in { from { opacity: 0; transform: translateY(.5rem) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .map-popup .maplibregl-popup-content { animation: none; } }
@media (max-width: 560px) { .map-popup .maplibregl-popup-content { width: 15.5rem; } .map-card__photo { aspect-ratio: 2 / 1; } .map-card__name { font-size: 1.15rem; } .map-card__summary { -webkit-line-clamp: 2; } }
.map-popup .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }
.map-popup .maplibregl-popup-close-button { top: .5rem; right: .5rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 99px; background: rgb(255 255 255 / .92); color: var(--ink); font-size: 1.3rem; line-height: 1; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.map-popup .maplibregl-popup-close-button:hover { background: var(--peru-red); color: #fff; }
.map-card__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--soft); }
.map-card__body { display: grid; gap: .3rem; padding: .85rem 1rem 1rem; }
.map-card__kind { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deep); }
.map-card__name { font: 600 1.3rem/1.2 var(--font-display); }
.map-card__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.map-card__go { justify-self: start; display: inline-flex; align-items: center; min-height: 2.4rem; margin-top: .4rem; padding: 0 1.1rem; border-radius: 99px; background: var(--peru-red); color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .2s; }
.map-card__go:hover { background: var(--accent-deep); }
.maplibregl-popup-content { font-family: var(--font-sans); color: var(--ink); }

/* Burger menu: a <details>, so it opens without JavaScript */
.menu { flex: none; }
.menu summary { display: inline-flex; align-items: center; gap: .55rem; min-width: 44px; min-height: 44px; padding: 0 .8rem; border-radius: 99px; background: var(--peru-red); color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .04em; cursor: pointer; list-style: none; user-select: none; transition: background .2s; }
.menu summary:hover, .menu[open] summary { background: var(--accent-deep); }
.menu summary::-webkit-details-marker { display: none; }
.menu__label { display: none; }
.menu__icon { position: relative; flex: none; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: box-shadow .2s, transform .25s var(--ease); }
.menu__icon::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transition: transform .25s var(--ease); }
.menu[open] .menu__icon { box-shadow: none; transform: rotate(45deg); }
.menu[open] .menu__icon::after { transform: rotate(90deg); }
.menu__panel { position: fixed; z-index: 70; top: var(--header-h); left: 0; right: 0; max-height: calc(100svh - var(--header-h)); overflow-y: auto; padding: 1rem var(--gutter) 1.4rem; background: var(--peru-red); color: #fff; border-radius: 0 0 1.4rem 1.4rem; box-shadow: 0 18px 40px rgb(46 39 34 / .16); overscroll-behavior: contain; }
.menu__list, .menu__more { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.menu__list a:hover, .menu__more a:hover { color: #fff; background: rgb(255 255 255 / .14); }
.menu__more { grid-template-columns: 1fr 1fr; margin-top: 1rem; }
.menu__more a { display: flex; align-items: center; min-height: 44px; color: rgb(255 255 255 / .88); font-size: .95rem; text-decoration: none; }
@media (min-width: 1160px) {
  /* Wide screens: the grouped sections sit in the bar itself, so the Menu button is not needed. */
  .main-nav { display: block; }
  .nav { gap: .2rem; }
  .nav a, .nav-group__toggle { min-height: 2.9rem; padding: 0 .9rem; font-size: .95rem; }
  .menu { display: none; }
}
/* ---- Site search: the lens opens a card over a dimmed page, with photos and highlighted words ---- */
.site-search { flex: none; margin-left: auto; }
.search-toggle { position: relative; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: 44px; height: 44px; border-radius: 99px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .2s, color .2s, transform .25s var(--ease); }
.search-toggle:hover { background: var(--peru-red); color: #fff; box-shadow: none; }
.search-toggle__label { display: none; }
/* Wide enough for the menu, show the search as a labelled pill so it is easy to spot. */
@media (min-width: 1160px) {
  .search-toggle { padding: 0 1.1rem 0 .95rem; font-weight: 700; font-size: .95rem; }
  .search-toggle__label { display: inline; }
  .search-toggle[aria-expanded="true"] { padding: 0 .95rem; }
  .search-toggle[aria-expanded="true"] .search-toggle__label { display: none; }
}
.search-toggle__close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .2s, transform .25s var(--ease); }
.search-toggle__lens { transition: opacity .2s, transform .25s var(--ease); }
.search-toggle[aria-expanded="true"] { background: var(--peru-red); color: #fff; box-shadow: none; }
.search-toggle[aria-expanded="true"] .search-toggle__lens { opacity: 0; transform: rotate(90deg) scale(.6); }
.search-toggle[aria-expanded="true"] .search-toggle__close { opacity: 1; transform: none; }
html.search-open { overflow: hidden; }
.search-backdrop { position: fixed; z-index: 65; inset: var(--header-h) 0 0; background: rgb(46 39 34 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: search-fade .2s ease-out; }
.search-backdrop[hidden], .search-panel[hidden] { display: none; }
.search-panel { position: fixed; z-index: 70; top: calc(var(--header-h) + .7rem); left: 50%; width: min(44rem, calc(100% - 1.4rem)); max-height: calc(100svh - var(--header-h) - 1.4rem); overflow-y: auto; overscroll-behavior: contain; padding: .9rem; border-radius: 1.7rem; background: var(--surface); box-shadow: 0 30px 70px rgb(46 39 34 / .32), 0 0 0 1px rgb(46 39 34 / .06); transform: translateX(-50%); animation: search-in .25s var(--ease); }
@keyframes search-fade { from { opacity: 0; } }
@keyframes search-in { from { opacity: 0; transform: translate(-50%, -.8rem) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .search-backdrop, .search-panel { animation: none; } }
.search-form { position: relative; display: flex; align-items: center; gap: .5rem; }
.search-form input, .search-page__form input { flex: 1; min-width: 0; min-height: 3.5rem; padding: 0 2.9rem 0 1.4rem; border: 2px solid transparent; border-radius: 99px; background: var(--bg); color: var(--ink); font: 400 1.2rem/1 var(--font-sans); transition: border-color .2s, box-shadow .2s, background .2s; }
.search-form input::placeholder, .search-page__form input::placeholder { color: var(--ink-2); opacity: .8; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-form input:focus, .search-page__form input:focus { outline: 0; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.search-form__clear { position: absolute; right: 6.6rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 99px; background: var(--line); color: var(--ink); cursor: pointer; }
.search-form__clear:hover { background: var(--ink); color: var(--bg); }
.search-form__clear[hidden] { display: none; }
.search-form__go, .search-page__form button { flex: none; min-height: 3.5rem; padding: 0 1.5rem; border: 0; border-radius: 99px; background: var(--peru-red); color: #fff; font: 700 1rem/1 var(--font-sans); cursor: pointer; transition: background .2s, transform .2s; }
.search-form__go:hover, .search-page__form button:hover { background: var(--accent-deep); }
.search-panel ul { margin: 0; padding: 0; list-style: none; }
.search-panel [role="listbox"] { margin-top: .6rem; }
.search-panel [role="listbox"]:empty { display: none; }
.search-panel li a { display: flex; align-items: center; gap: .9rem; padding: .55rem .7rem; border-radius: 1.1rem; color: var(--ink); text-decoration: none; transition: background .15s; }
.search-panel li[aria-selected="true"] a, .search-panel li a:hover { background: var(--bg); }
.search-hit__photo { flex: none; width: 3rem; height: 3rem; border-radius: .9rem; object-fit: cover; background: var(--soft); box-shadow: 0 2px 8px rgb(46 39 34 / .15); }
.search-hit__photo--none { background: var(--peru-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' d='M2 42 17 18l8 12 6-8 15 20z'/%3E%3C/svg%3E") center / 62% no-repeat; box-shadow: none; }
.search-hit__text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.search-hit__title { font: 600 1.15rem/1.25 var(--font-display); }
.search-hit__summary { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: .9rem; line-height: 1.35; }
.search-hit__kind { flex: none; align-self: center; padding: .25rem .65rem; border-radius: 99px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-deep); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .search-hit__kind { display: none; } }
.search-panel mark, .search-results mark { padding: 0 .12em; margin: 0 -.12em; border-radius: .25em; background: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--ink); }  /* --ink, not inherited: the summary is grey, too pale on the gold */
.search-panel ul .search-hit--all { margin-top: .4rem; }
.search-hit--all a { justify-content: center; min-height: 3rem; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.search-hit--all a:hover, .search-hit--all[aria-selected="true"] a { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.search-hit__all { font-weight: 700; color: var(--accent-deep); }
.search-panel__empty { padding: 1.4rem 1rem; color: var(--ink-2); text-align: center; }
.search-panel.is-loading .search-form__go svg { animation: search-pulse .8s ease-in-out infinite; }
@keyframes search-pulse { 50% { opacity: .35; } }
/* Before anything is typed: the most searched pages, then shortcuts to the sections */
.search-start { padding: .9rem .3rem .3rem; }
.search-start[hidden] { display: none; }
.search-start__label { margin: .2rem 0 .6rem .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.search-start__label:not(:first-child) { margin-top: 1.1rem; }
.search-start:not(.has-popular) .search-start__label:first-child, .search-start:not(.has-popular) .search-popular { display: none; }
.search-popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.search-panel .search-popular a { display: grid; align-items: start; justify-content: stretch; gap: .5rem; height: 100%; padding: .5rem; border-radius: 1.1rem; background: var(--bg); color: var(--ink); text-decoration: none; transition: background .15s, transform .2s var(--ease), box-shadow .2s; }
.search-panel .search-popular a:hover { background: var(--surface); box-shadow: 0 8px 20px rgb(46 39 34 / .14); transform: translateY(-2px); }
.search-popular__photo { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; border-radius: .8rem; object-fit: cover; background: var(--soft); }
.search-popular__text { display: grid; gap: .05rem; padding: 0 .25rem .2rem; }
.search-popular__title { font: 600 1rem/1.25 var(--font-display); }
.search-popular__kind { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.search-start__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.search-start__chips a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.05rem; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .15s, color .15s; }
.search-start__chips a:hover { background: var(--peru-red); color: #fff; box-shadow: none; }
.search-panel__hint { display: none; margin: .9rem 0 .1rem; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .82rem; text-align: center; }
@media (min-width: 700px) and (hover: hover) { .search-panel__hint { display: block; } }
@media (max-width: 560px) {
  .search-form__go { display: none; }
  .search-form__clear { right: .8rem; }
  .search-form input { padding-right: 3.2rem; }
  .search-panel { top: calc(var(--header-h) + .5rem); border-radius: 1.4rem; padding: .7rem; }
  .search-popular { grid-template-columns: repeat(2, 1fr); }
  .search-popular li:nth-child(n+5) { display: none; }
}
/* The results page */
.search-page { width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; }
.search-page__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; justify-items: center; margin: 1rem 0 2rem; padding: 2.2rem 1.2rem; border-radius: 2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--peru-red) 92%, #000), var(--accent)); color: #fff; text-align: center; }
.search-page__head h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.1; text-wrap: balance; }
.search-page__form { position: relative; display: flex; gap: .5rem; width: 100%; max-width: 40rem; }
.search-page__form input { padding: 0 1.3rem 0 3.3rem; border-color: transparent; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.search-page__form button { background: #fff; color: var(--peru-red); box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.search-page__form button:hover { background: var(--bg); color: var(--accent-deep); }
.search-page__bar { display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.search-page__count { margin: 0; color: var(--ink-2); }
.search-page__count strong { color: var(--ink); }
.search-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.search-filters a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .15s, color .15s; }
.search-filters a small { padding: .1rem .5rem; border-radius: 99px; background: var(--soft); color: var(--ink-2); font-size: .78rem; font-weight: 700; }
.search-filters a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.search-filters a.is-active { background: var(--peru-red); box-shadow: none; color: #fff; }
.search-filters a.is-active small { background: rgb(255 255 255 / .22); color: #fff; }
.search-results { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.search-results a { display: flex; align-items: center; gap: 1.1rem; height: 100%; padding: .8rem 1.1rem .8rem .8rem; border-radius: 1.4rem; background: var(--surface); box-shadow: 0 2px 10px rgb(46 39 34 / .07); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s var(--ease); }
.search-results a:hover { box-shadow: 0 10px 26px rgb(46 39 34 / .15); transform: translateY(-2px); }
.search-results__photo { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 1.1rem; object-fit: cover; background: var(--soft); }
.search-results__photo--none { background: var(--peru-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' d='M2 42 17 18l8 12 6-8 15 20z'/%3E%3C/svg%3E") center / 60% no-repeat; }
.search-results__text { display: grid; gap: .2rem; min-width: 0; }
.search-results strong { font: 600 1.25rem/1.3 var(--font-display); }
.search-results__kind { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-deep); }
.search-results__summary { color: var(--ink-2); font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-empty { margin-bottom: 1.5rem; padding: 1.4rem 1.5rem; border-radius: 1.4rem; background: var(--surface); box-shadow: 0 2px 10px rgb(46 39 34 / .07); }
.search-empty p { margin: 0; color: var(--ink-2); }
.search-empty__title { margin-bottom: .3rem !important; color: var(--ink) !important; font: 600 1.35rem/1.3 var(--font-display); }
.search-page__sub { margin: 0 0 .9rem; font-size: 1.3rem; }
.search-popular--page { grid-template-columns: repeat(2, 1fr); }
.search-popular--page a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: .6rem; border-radius: 1.3rem; background: var(--surface); box-shadow: 0 2px 10px rgb(46 39 34 / .07); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s var(--ease); }
.search-popular--page a:hover { box-shadow: 0 10px 26px rgb(46 39 34 / .15); transform: translateY(-2px); }
.search-popular--page img, .search-popular--page .search-hit__photo { flex: none; width: 4rem; height: 4rem; border-radius: 1rem; object-fit: cover; }
.search-popular--page span { display: grid; gap: .1rem; }
.search-popular--page strong { font: 600 1.1rem/1.25 var(--font-display); }
.search-popular--page small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
@media (min-width: 900px) { .search-results { grid-template-columns: 1fr 1fr; } .search-popular--page { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .search-results__photo { width: 4.2rem; height: 4.2rem; } .search-page__form button { padding: 0 1.1rem; } .search-popular--page { grid-template-columns: 1fr; } .search-page__head { padding: 1.6rem 1rem; border-radius: 1.5rem; } }

/* A group of sections opens as a small panel under its name. */
.nav-group { position: relative; }
.nav-group__toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .85rem; border: 0; border-radius: 99px; background: none; color: var(--ink); font: 700 .78rem/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; cursor: pointer; user-select: none; transition: background .18s, color .18s; }
.nav-group__toggle::after { content: ""; width: .4rem; height: .4rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
/* The panel opens when the pointer is over the group (name or panel), by keyboard focus, or after a tap (.is-open). */
.nav-group:hover > .nav-group__toggle, .nav-group:has(:focus-visible) > .nav-group__toggle { background: var(--peru-red); color: #fff; }
.nav-group:hover > .nav-group__toggle::after, .nav-group.is-open > .nav-group__toggle::after, .nav-group:has(:focus-visible) > .nav-group__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav-group__panel { position: absolute; z-index: 80; top: calc(100% + .4rem); left: 0; display: none; gap: 0; min-width: 15rem; margin: 0; padding: .4rem; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 16px 36px rgb(46 39 34 / .2); }
.nav-group:hover > .nav-group__panel, .nav-group.is-open > .nav-group__panel, .nav-group:has(:focus-visible) > .nav-group__panel { display: grid; }
/* An invisible bridge over the gap under the name, so the pointer can reach the panel. */
.nav-group__panel::before { content: ""; position: absolute; inset: -.6rem 0 auto; height: .6rem; }
.nav-group__panel a { display: flex; align-items: center; min-height: 2.8rem; padding: 0 .9rem; border-radius: .6rem; border-bottom: 0; font: 600 1rem/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.nav-group__panel a:hover, .nav-group__panel a:focus-visible { background: var(--peru-red); color: #fff; }
.nav-group__panel--wide { grid-template-columns: repeat(3, max-content); gap: 0 1.2rem; min-width: 34rem; }
@media (min-width: 1160px) { .nav .nav-group__toggle { min-height: 2.9rem; padding: 0 .9rem; font-size: .95rem; } }

/* Language selector in the footer: flag + code, opens upwards and lists every language of the site;
   the ones still in preparation are dimmed and not clickable. */
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem; border: 1px solid rgb(255 255 255 / .7); border-radius: 99px; color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: .45rem; height: .45rem; margin-left: .2rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-135deg) translate(-2px, -2px); transition: transform .2s; }
.lang-menu[open] summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.lang-menu summary:hover { background: rgb(255 255 255 / .16); }
.lang-menu__flag { flex: none; width: 1.4rem; height: .95rem; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); }
.lang-menu ul { position: absolute; z-index: 5; bottom: calc(100% + .5rem); left: 0; min-width: 14rem; padding: .35rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 1rem; box-shadow: 0 14px 34px rgb(46 39 34 / .22); }
.lang-menu a, .lang-menu__soon { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .8rem; border-radius: .7rem; color: var(--ink); font-weight: 500; text-decoration: none; }
.lang-menu a:hover { background: var(--soft); text-decoration: none; }
.lang-menu a[aria-current] { font-weight: 700; }
.lang-menu__soon { opacity: .5; cursor: default; }
.lang-menu__soon small { margin-left: auto; font-size: .72rem; letter-spacing: .04em; }
.lang-menu__check { margin-left: auto; color: var(--accent); }

/* Photos inside an article and bold key terms */
.figure { margin: 2rem calc(var(--gutter) * -1); }
.figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.figure figcaption { padding: .55rem var(--gutter) 0; font-size: .85rem; color: var(--ink-2); }
.prose strong { font-weight: 700; color: var(--ink); }
@media (min-width: 700px) { .figure { margin-inline: 0; } .figure img { aspect-ratio: 16 / 9; border-radius: var(--radius); } .figure figcaption { padding-inline: 0; } }

/* ---- Footer: solid ink band with a red rule, brand, section links, info and language ---- */
.site-footer { position: relative; margin-top: 3rem; padding: 3.5rem var(--gutter) 1.6rem; background: linear-gradient(to bottom, var(--peru-red), color-mix(in srgb, var(--peru-red) 80%, #000)); color: rgb(255 255 255 / .94); }
.site-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer .brand--light { color: #fff; }
.site-footer .brand:hover { text-decoration: none; }
.site-footer ul { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.site-footer__inner { display: grid; gap: 1.2rem 2rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 62rem) { .site-footer__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.site-footer__brand p { margin: .8rem 0 0; max-width: none; line-height: 1.5; white-space: nowrap; }
@media (max-width: 30rem) { .site-footer__brand p { white-space: normal; } }
.site-footer__side nav a { display: inline-flex; white-space: nowrap; align-items: center; min-height: 44px; color: #fff; font-weight: 500; }
.site-footer__side { display: grid; gap: 1.2rem; align-content: start; justify-items: start; }
/* The menu sits in the top row, next to the logo and the name of the site */
.site-footer__nav { min-width: 0; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: .2rem .3rem; margin: 0; padding: 0; list-style: none; }
.site-footer__heading { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; border-radius: 99px; color: #fff; font-size: .9rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { background: rgb(255 255 255 / .16); }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; max-width: 72rem; margin: 2.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgb(255 255 255 / .35); font-size: .82rem; color: rgb(255 255 255 / .94); }
.site-footer__legal a { color: #fff; font-weight: 600; }
.site-footer .lang-menu a, .site-footer .lang-menu a:hover { color: var(--ink); }
@media (min-width: 62rem) {
  /* Menu in one row next to the brand: the tagline wraps to give it the room */
  .site-footer__nav ul { justify-content: center; }
  .site-footer__nav a { padding: 0 .45rem; letter-spacing: .04em; white-space: nowrap; }
  .site-footer__brand p { max-width: 17rem; white-space: normal; }
}
@media (min-width: 900px) {
  .site-footer { padding-top: 4rem; }
  .site-footer__side { justify-items: end; text-align: right; }
  .lang-menu ul { left: auto; right: 0; }
}

/* Tours in a sticky right column on wide screens: they stay in view while the article scrolls.
   Below that width the aside is hidden and the tours sit inside the article instead. */
.side-tours { display: none; }
@media (min-width: 74rem) {
  .mobile-only { display: none; }  /* the related articles are in the right column here */
  .wrap--side { max-width: 84rem; }
  .page-layout--side { display: grid; grid-template-columns: minmax(0, 46rem) minmax(27rem, 34rem); align-items: start; }
  .page-layout--side .offers--tours, .page-layout--side .offers--stays:not(.offers--detail) { display: none; }
  .page-layout--side .page-intro, .page-layout--side article { grid-column: 1; }
  .side-tours { display: block; padding-left: 3rem; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .side-tours__inner { padding: .7rem 2.2rem 2rem; margin: -.4rem -1.9rem 0; }  /* room for the card shadows, which the scroll box would cut */
  /* Pinned only when the whole column fits the screen: it never scrolls on its own, a low window lets it go with the page */
  @media (min-height: 44rem) { .side-tours__inner { position: sticky; top: calc(var(--header-h) + .75rem); } }
  .side-tours__inner { display: grid; gap: 1.1rem; }
  /* With two tour cards the photos give way on a low screen, so that the hotel banner under them is seen whole without scrolling the column */
  .side-tour-list:has(.side-tour + .side-tour) .side-tour__photo { min-height: clamp(8.5rem, calc((100svh - 25rem) / 2), 14rem); }
  .side-tours h2 { margin: 0 0 .8rem; font-size: 1.25rem; }
  .side-tour-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .side-tour { overflow: hidden; border-radius: 1.6rem; background: var(--night); box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 14px 30px -6px rgb(46 39 34 / .38), 0 28px 50px -18px rgb(46 39 34 / .4); transition: transform .25s var(--ease), box-shadow .25s; }
  .side-tour:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgb(46 39 34 / .12), 0 20px 38px -6px rgb(46 39 34 / .46), 0 34px 56px -18px rgb(46 39 34 / .45); }
  /* A compact card: the photo fills it, the price sits on top and the title on a dark fade at the bottom */
  .side-tour__link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
  .side-tour__photo { position: relative; display: flex; align-items: flex-end; min-height: 14rem; overflow: hidden; background: var(--night); color: #fff; }
  .side-tour__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 14 10 / .85), rgb(20 14 10 / .2) 62%, transparent); pointer-events: none; }
  .side-tour img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .side-tour:hover img { transform: scale(1.05); }
  .side-tour__price { position: absolute; z-index: 2; top: 0; left: 0; padding: .55rem 1rem .6rem; border-radius: 0 0 1rem 0; background: var(--peru-red); color: #fff; font: 700 1.35rem/1 var(--font-display); }
  .side-tour__price small { margin-right: .15rem; font-family: inherit; font-size: .72rem; font-weight: 600; opacity: .9; }
  .side-tour__rating { position: absolute; z-index: 2; top: 0; right: 0; padding: .7rem 1rem; border-radius: 0 0 0 1rem; background: rgb(20 14 10 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2; }
  .side-tour__rating::first-letter { color: #f2b84b; }
  .side-tour__count { font-weight: 400; opacity: .85; font-size: .82rem; }
  .side-tour__note { display: block; margin-top: .3rem; font-size: .85rem; opacity: .95; }
  .side-tour__text { position: relative; z-index: 1; display: block; width: 100%; padding: .8rem .95rem .7rem; }
  .side-tour__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; font: 600 1.55rem/1.15 var(--font-display); text-shadow: 0 1px 8px rgb(0 0 0 / .45); }
  .side-tours .affiliate-note { margin-top: .7rem; }
  .side-hotel-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
  .side-hotel a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .95rem 1rem .95rem .95rem; border-radius: 1.4rem; background: linear-gradient(135deg, #fff, #f4f2ef); box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(46 39 34 / .06), 0 14px 28px -10px rgb(139 29 26 / .3); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
  .side-hotel__cta::before { content: "→"; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; transition: transform .25s var(--ease); }
  .side-hotel a:hover .side-hotel__cta::before { transform: translateX(3px); }
  .side-hotel__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--peru-red); color: #fff; box-shadow: 0 6px 14px -4px rgb(139 29 26 / .6); }
  .side-hotel__text { display: grid; gap: .15rem; min-width: 0; }
  .side-hotel a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-strong), 0 4px 8px rgb(46 39 34 / .08), 0 16px 34px rgb(46 39 34 / .2); }
  .side-hotel__name { font: 600 1.2rem/1.2 var(--font-display); }
  .side-hotel__why { font-size: .84rem; color: var(--ink-2); }
  .side-hotel__cta { display: grid; justify-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; line-height: 1.1; text-align: center; color: var(--accent); }
}

/* ---- Photos get a soft dark foot, so they sit on the page with some depth ---- */
.page-hero { position: relative; }
.page-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: min(46svh, 26rem); background: var(--photo-shade); pointer-events: none; }
.figure { position: relative; }
.figure::after { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 3; background: var(--photo-shade); pointer-events: none; }
.entry::after { content: ""; position: absolute; inset: 0 0 auto; height: 10rem; background: var(--photo-shade); pointer-events: none; }
.offer__photo::after { content: ""; position: absolute; inset: 0; background: var(--photo-shade); pointer-events: none; }
.offer__kind, .offer__price { z-index: 1; }
@media (min-width: 48rem) { .page-hero::after { height: min(52svh, 34rem); } }
@media (min-width: 700px) { .figure::after { aspect-ratio: 16 / 9; border-radius: var(--radius); } }

/* ---- Ad spots: room is reserved so the page does not jump when an ad loads ---- */
.ad { margin: 2rem auto; max-width: 74rem; padding: 0 var(--gutter); text-align: center; }
.ad::before { content: attr(aria-label); display: block; margin-bottom: .3rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ad--preview { padding: 0; }
.ad--preview::before { content: none; }
.ad--preview span { display: grid; place-items: center; min-height: 6rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ad--article { max-width: none; padding: 0; }
.ad--side { margin: 0; padding: 0; }
.ad--side.ad--preview span { min-height: 15rem; }
.ad--article.ad--preview span { min-height: 9rem; }

/* The side ad spot, when it is the only thing in the column, can fill the screen's height
   (half-page units are up to 600 px tall); next to tours and hotels it stays small. */
.side-tours__inner > .ad--side:only-child.ad--preview span { min-height: calc(100svh - var(--header-h) - 3rem); }
.side-tours__inner > .ad--side:only-child ins { min-height: min(37.5rem, calc(100svh - var(--header-h) - 3rem)); }

/* The strip of tours above the footer: four across on wide screens, two per row on a phone. */
.footer-tours { max-width: 74rem; margin: 3rem auto 0; padding: 0 var(--gutter); }
.footer-tours h2 { margin-bottom: .2rem; font-size: clamp(1.5rem, 4.5vw, 1.9rem); }
.footer-tours h2::before { content: ""; display: block; width: 2.4rem; height: 4px; margin-bottom: .8rem; border-radius: 99px; background: var(--accent); }
@media (min-width: 62rem) { .footer-tours .offer-list { grid-template-columns: repeat(4, 1fr); } }

/* Home, under the hero: the destination cards on the left, the map of Peru on the right. */
.home-explore { display: grid; gap: 1.2rem; }
.home-explore__map .map, .home-explore__map .map__canvas { height: 34rem; }
.home-explore__map .map__canvas { border-radius: var(--radius); }
@media (min-width: 62rem) {
  .home-explore { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  .home-explore:not(:has(.home-explore__cards)) { grid-template-columns: 1fr; }
  .home-explore .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 12rem; }
  .home-explore .tile:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .home-explore .tile:nth-child(6) { grid-column: auto; }
  .home-explore .tile:first-child h3 { font-size: 2rem; }
  .home-explore__map { position: sticky; top: calc(var(--header-h) + 1rem); }
  .home-explore__map .map, .home-explore__map .map__canvas { height: calc(100svh - var(--header-h) - 2rem); min-height: 26rem; }
}

/* Related articles: the cards of "in this section" in a smaller size, with the kind and the title
   only. Soft shadow, corners alternating big and small, two columns on a phone, three from tablet up. */
.related-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin: 1.1rem 0 0; padding: 0 0 .5rem; list-style: none; }
.related-card { position: relative; overflow: hidden; border-radius: 1.2rem .4rem 1.2rem .4rem; background: var(--surface); box-shadow: 0 1px 2px rgb(46 39 34 / .08), 0 10px 22px -12px rgb(46 39 34 / .4); transition: transform .25s var(--ease), box-shadow .25s; }
.related-card:nth-child(even) { border-radius: .4rem 1.2rem .4rem 1.2rem; }
.related-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 16px 28px -14px rgb(46 39 34 / .5); }
.related-card__img { display: block; width: 100%; height: 6.5rem; object-fit: cover; background: var(--soft); }
.related-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 6.5rem; background: var(--photo-shade); pointer-events: none; }
.related-card__body { display: grid; gap: .15rem; padding: .7rem .9rem .9rem; }
.related-card__kind { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.related-card a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font: 600 1.15rem/1.22 var(--font-display); text-decoration: none; }
.related-card a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the link: the card is the positioned parent */
@media (min-width: 700px) { .related-cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

/* The consent notice for ads (and cookie-based statistics): a card at the foot of the screen. */
.consent { position: fixed; z-index: 90; left: var(--gutter); right: var(--gutter); bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; max-width: 46rem; margin-inline: auto; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 18px 44px rgb(46 39 34 / .35), 0 0 0 1px var(--line-strong); }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 18rem; margin: 0; font-size: .95rem; line-height: 1.45; }
.consent__buttons { display: flex; gap: .5rem; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: var(--soft); color: var(--ink); }
.linklike { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Share and back-to-top: round buttons at the bottom right; share moves up when "top" appears. */
.float-buttons { position: fixed; z-index: 40; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.float-btn { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 8px 22px rgb(46 39 34 / .22); transition: background .2s, color .2s, transform .2s var(--ease); }
.float-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.float-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.float-btn--top { background: var(--accent); border-color: var(--accent); color: #fff; animation: float-in .25s var(--ease); }
.float-btn--top:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
@keyframes float-in { from { opacity: 0; transform: scale(.6); } }
.float-toast { position: absolute; right: 3.6rem; bottom: .55rem; margin: 0; padding: .4rem .8rem; border-radius: 99px; background: var(--night); color: #fff; font-size: .85rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .float-btn--top { animation: none; } .float-btn:hover { transform: none; } }
@media print { .float-buttons { display: none; } }

/* GetYourGuide promotion: the "Top rated" badge. */
.offer__kind--top { background: var(--accent); color: #fff; }
.offers__lead { margin: -.3rem 0 .4rem; font-size: .92rem; color: var(--ink-2); }
/* "See all" links under the offers, and photos on the areas to sleep in. */
.offers__more { margin: 1rem 0 0; text-align: center; }
.offers__more .btn { text-decoration: none; }
.stay { box-shadow: 0 2px 4px rgb(46 39 34 / .06), 0 8px 22px rgb(46 39 34 / .12); flex-wrap: nowrap; }
.stay__text { flex: 1; min-width: 0; }
@media (max-width: 34rem) { .stay { flex-wrap: wrap; } .stay__text { flex-basis: 100%; } .stay .btn { width: 100%; } }

.float-buttons.is-scrolled .float-toast { bottom: 4.15rem; }  /* share sits above "top" once that shows */

/* The Tours and Hotels pages of the menu: jump links to the places, then one block per place. */
.place-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.place-chips a { padding: .35rem .9rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.place-chips a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-place { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* One offer pinned to the bottom on phones and tablets (the right column does it on wide screens). */
.sticky-offer { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 3px solid var(--peru-red); box-shadow: 0 -8px 26px rgb(46 39 34 / .3); }
.sticky-offer[hidden] { display: none; }
.sticky-offer__link { display: flex; flex: 1; align-items: center; gap: .7rem; min-width: 0; color: var(--ink); text-decoration: none; }
.sticky-offer__link[hidden] { display: none; }
.sticky-offer img { flex: none; width: 3.6rem; height: 2.8rem; border-radius: .4rem; object-fit: cover; }
.sticky-offer__icon { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .7rem; background: #eceae6; color: var(--peru-red); }
.sticky-offer__text { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.sticky-offer__title { overflow: hidden; font: 700 1rem/1.2 var(--font-display); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.sticky-offer__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.3; color: var(--ink); }
.sticky-offer__meta strong { color: var(--peru-red); }
.sticky-offer__cta { flex: none; min-height: 40px; padding: 0 1rem; font-size: .85rem; font-weight: 800; white-space: nowrap; }
/* room for the bar: under the footer, and the round buttons above it */
@media (max-width: 73.99rem) {
  body:has(.sticky-offer) { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
  body:has(.sticky-offer) .float-buttons { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px) + 1rem); }
}
@media (min-width: 74rem) { .sticky-offer { display: none; } }
@media print { .sticky-offer { display: none; } }
@media (max-width: 47.99rem) { .site-footer__legal { padding-right: 4.2rem; } }  /* room for the round buttons */

/* The Tours page is wider than an article: three cards across on a desktop. */
.wrap--wide { max-width: 74rem; }
/* A page without the right column uses the room on desktop */
@media (min-width: 62rem) {
  .wrap--full { max-width: 76rem; }
  .wrap--full .prose p, .wrap--full .prose li, .wrap--full p, .wrap--full li { max-width: 60rem; }
}
@media (min-width: 62rem) { .wrap--wide .offer-list { grid-template-columns: repeat(3, 1fr); } }

/* Route maps of the itineraries: numbered stops and the list of stops under the map. */
.map-pin--step { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 2px solid #fff; background: var(--accent); color: #fff; font: 700 .8rem/1 var(--font-sans); box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.map-card__days { display: block; margin-bottom: .1rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.map__route { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .95rem; }
.map__route li { display: inline-flex; align-items: baseline; gap: .35rem; }
.map__step { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; }
.map__route small { color: var(--ink-2); }

/* "See all tours" on the Tours page: a card of its own, the last of the row of a place, with the
   photo of the place behind the text. */
.offer-more { display: flex; min-height: 12rem; }
.offer-more a { position: relative; isolation: isolate; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.4rem; overflow: hidden; border-radius: var(--radius); background: var(--night); color: #fff; text-align: center; text-decoration: none; box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 8px 22px rgb(46 39 34 / .22); transition: transform .25s var(--ease), box-shadow .25s; }
.offer-more a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgb(20 16 14 / .72), rgb(20 16 14 / .38)); }  /* keeps the text readable on any photo */
.offer-more__bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.offer-more a:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgb(46 39 34 / .12), 0 16px 34px rgb(46 39 34 / .3); }
.offer-more a:hover .offer-more__bg { transform: scale(1.05); }
.offer-more a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.offer-more__place { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.offer-more a .offer-more__title { color: #fff; font: 600 1.45rem/1.15 var(--font-display); text-shadow: 0 1px 8px rgb(0 0 0 / .45); }
.offer-more__go { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.3rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .offer-more a:hover, .offer-more a:hover .offer-more__bg { transform: none; } }

/* Itinerary pages: text on the left, the route map fixed on the right half of the screen. On a
   phone the map comes first, then the text. */
body.route-page main { padding-top: var(--header-h); }
.route-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
/* On a phone the map is not the first thing: the photo, the title and the stops come first, then the map, then the text. The two wrappers dissolve so their children can be ordered together. */
.route-layout__text, .route-layout__body { display: contents; }
.route-layout__map { order: 1; height: min(62svh, 28rem); margin: 0 0 1.5rem; }
.route-layout__map .map, .route-layout__map .map__canvas { height: 100%; border-radius: 0; border: 0; }
.route-layout__hero img { display: block; width: 100%; height: min(34svh, 18rem); object-fit: cover; }
.route-layout__body > * { max-width: 40rem; padding-inline: var(--gutter); box-sizing: border-box; }
.route-layout__body > .draft-note, .route-layout__body > header { padding-top: 1.5rem; }
.route-layout__body > article { order: 2; padding-bottom: 4rem; }
.route-layout__body .map__route { margin: 0 0 1.5rem; }
@media (min-width: 74rem) {
  /* The text gets the larger share (11:9) and longer lines: it is what is read; the map beside it is for the overview */
  .route-layout { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: start; }
  .route-layout__text, .route-layout__body { display: block; }
  .route-layout__body { padding-block: 1.5rem 4rem; }
  .route-layout__body > * { padding-inline: 0; }
  .route-layout__body > .draft-note, .route-layout__body > header, .route-layout__body > article { padding-block: 0; }
  .route-layout__map { margin: 0; }
  /* The text is one column, centred in its half of the screen (not pushed to the left edge on a big screen) */
  .route-layout__body { max-width: calc(46rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .route-layout__body > * { max-width: none; }
  .route-layout__hero img { height: min(30svh, 16rem); }
  .route-layout__map { order: 0; position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); }
  /* The text sits on top of the map: a soft shadow falls from its edge onto the map. */
  .route-layout__text { position: relative; z-index: 2; }
  .route-layout__map::after { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 4rem; background: linear-gradient(to right, rgb(46 39 34 / .34), rgb(46 39 34 / .12) 50%, transparent); pointer-events: none; }
}

/* Destinations submenu: "All destinations", then one row per area with its places as pills. */
.nav-group__panel--wide { display: none; grid-template-columns: 1fr; gap: .2rem; min-width: 0; width: max-content; max-width: min(46rem, calc(100vw - 2rem)); }
.nav-group:hover > .nav-group__panel--wide, .nav-group.is-open > .nav-group__panel--wide, .nav-group:has(:focus-visible) > .nav-group__panel--wide { display: grid; }
.nav-group__panel--wide .nav-all { display: flex; gap: .3rem; margin-bottom: .3rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.nav-group__panel--wide .nav-all a { color: var(--accent-deep); font-weight: 700; }
.nav-group__panel--wide .nav-all a:hover, .nav-group__panel--wide .nav-all a:focus-visible { color: #fff; }
.nav-group__panel .nav-area { display: grid; grid-template-columns: 6.2rem 1fr; gap: .6rem; align-items: baseline; padding: .35rem .5rem; }
.nav-group__panel .nav-area > ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.nav-group__panel .nav-area li a { min-height: 0; padding: .28rem .8rem; border: 1px solid var(--line); border-radius: 99px; font-weight: 600; font-size: .95rem; }
.nav-group__panel .nav-area li a:hover, .nav-group__panel .nav-area li a:focus-visible { border-color: var(--peru-red); }
.nav-region { color: var(--ink-2); font: 700 .72rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }

/* The page of the itineraries: an overview of cards with a selector. */
body.route-page main, body.overview-page main { padding-top: var(--header-h); }
.itin-filter { display: grid; gap: .7rem; margin: 0 0 1.6rem; }
.itin-filter__group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { text-transform: none; letter-spacing: normal; padding: .4rem .95rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font: 600 .9rem/1.2 var(--font-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--line-strong); background: var(--soft); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.itin-filter__count { margin: 0; font-size: .9rem; color: var(--ink-2); }
.itin-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 34rem) { .itin-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .itin-cards { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
.itin-card[hidden] { display: none; }
.itin-card { display: flex; }
.itin-card > a { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 2px 4px rgb(46 39 34 / .06), 0 8px 22px rgb(46 39 34 / .12); transition: transform .25s var(--ease), box-shadow .25s; }
.itin-card > a:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgb(46 39 34 / .08), 0 16px 34px rgb(46 39 34 / .2); }
.itin-card > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.itin-card__photo { position: relative; display: block; background: var(--soft); }
.itin-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.itin-card__days { position: absolute; left: .7rem; top: .7rem; padding: .25rem .75rem; border-radius: 99px; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.itin-card__body { display: flex; flex: 1; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.2rem; }
.itin-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.itin-card__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.itin-card__go { margin-top: auto; padding-top: .4rem; font-size: .9rem; font-weight: 700; color: var(--accent); }
.itin-empty { margin: 1rem 0 0; color: var(--ink-2); }
.overview-top { padding-bottom: 0; }
.overview-article { padding-top: 2.5rem; }
.overview-article article > section { min-width: 0; }
.overview-article .prose p, .overview-article p, .overview-article li { max-width: none; }
@media (min-width: 62rem) {
  /* The text under the cards fills the page like the cards do: two columns, the quick answer, FAQ and related pages across both */
  .overview-article article { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; align-items: start; }
  .overview-article article > .block-answer, .overview-article article > .faq, .overview-article article > .related { grid-column: 1 / -1; }
}
.itin-others { margin: 1.4rem 0 0; font-size: .95rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .itin-card > a:hover { transform: none; } }

/* The sights of a destination on its map: a small dark pin with its name beside it. */
.map-pin--landmark { width: 13px; height: 13px; background: var(--night); }
.map-pin__label { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 .76rem/1 var(--font-sans); color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 4px #fff; pointer-events: none; }
/* The names sit on a small white tag, so they read over the base map's own labels. */
.map-pin__label { padding: .28rem .5rem; border-radius: .4rem; background: #fff; box-shadow: 0 1px 5px rgb(0 0 0 / .35); font-size: .88rem; font-weight: 700; color: var(--night); text-shadow: none; }
.map-pin--step .map-pin__label { left: calc(100% + 8px); font-size: .95rem; }
.map-pin--landmark .map-pin__label { left: 19px; }
/* The stop being read in the text */
.map-pin--step { transition: background-color .25s, box-shadow .25s; }
.map-pin--active { z-index: 3; background: var(--night); box-shadow: 0 0 0 6px rgb(184 57 43 / .4), 0 2px 8px rgb(0 0 0 / .45); }
.map-pin--active .map-pin__label { background: var(--accent); color: #fff; }
.map__route li.is-active { font-weight: 700; }

/* Title strip under the header. Desktop: a red tag on the left under the header, rounded at its bottom right corner. Mobile: the title takes the place of the name in the header. */
.title-strip { display: none; }
.site-header__title { display: none; }
@media (min-width: 62rem) {
  .title-strip:not([hidden]) { position: fixed; z-index: 55; top: var(--header-h); left: 0; display: block; max-width: 50vw; box-sizing: border-box; padding: .5rem 1.8rem .55rem var(--gutter); border-radius: 0 0 1.6rem 0; background: var(--peru-red); color: #fff; box-shadow: 0 4px 14px rgb(46 39 34 / .25); }
  .title-strip__text { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1.05rem/1.3 var(--font-display); color: #fff; }
}
@media (max-width: 61.99rem) {
  body.is-past-title .site-header__title { display: block; flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1.05rem/1.2 var(--font-display); color: var(--ink); }
  body.is-past-title .site-header .brand__name { display: none; }
  /* with the menu open the header shows the name of the site again, not the title of the page */
  body.is-past-title:has(.menu[open]) .site-header .brand__name { display: grid; }
  body.is-past-title:has(.menu[open]) .site-header__title { display: none; }
}

/* The means of travel between two stops of a route, on the map */
.map-leg { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: var(--accent); box-shadow: 0 1px 5px rgb(0 0 0 / .3); }
/* map.js (keepLabelsApart) marks the names and the leg icons that would cover a pin or another name: zooming in brings them back */
.map-pin__label.is-hidden, .map-leg.is-hidden { visibility: hidden; }

/* The weather of a destination, before the FAQ: a section like the others (same heading), plain figures in the colours of the text */
.weather.block { margin: 0; }
.weather__now { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .8rem; margin: 0 0 1.1rem; }
.weather__now .weather__icon { align-self: center; font-size: 1.7rem; line-height: 1; }
.weather__temp { font: 600 2.2rem/1 var(--font-display); color: var(--ink); }
.weather__wind { color: var(--ink-2); font-size: .95rem; }
.weather__days { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); margin: 0; padding: 0; list-style: none; border-block: 1px solid rgb(46 39 34 / .15); }
.weather__days li { display: grid; justify-items: center; gap: .2rem; padding: .7rem .4rem; border-left: 1px solid rgb(46 39 34 / .12); text-align: center; }
.weather__days li:first-child { border-left: 0; }
.weather__day { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.weather__days .weather__icon { font-size: 1.3rem; line-height: 1.2; filter: grayscale(.35); }
.weather__max { font: 600 1.15rem/1 var(--font-display); }
.weather__min { color: var(--ink-2); font-size: .9rem; line-height: 1; }
.weather__bar { display: none; }
.weather__rain { color: var(--ink-2); font-size: .8rem; }
.weather__credit { margin: .7rem 0 0; font-size: .75rem; color: var(--ink-2); }

/* Related articles in the right column: photo cards with the title over a dark fade */
.side-related-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.side-related__card { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; min-height: 8.5rem; padding: .9rem 1rem; overflow: hidden; border-radius: var(--radius); background: var(--peru-red); color: #fff; text-decoration: none; box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 8px 22px rgb(46 39 34 / .2); transition: transform .25s var(--ease), box-shadow .25s; }
.side-related__card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgb(20 14 10 / .82), rgb(20 14 10 / .25) 60%, transparent); }
.side-related__img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.side-related__title { font: 600 1.12rem/1.25 var(--font-display); text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.side-related__go { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgb(255 255 255 / .94); color: var(--peru-red); font-weight: 700; transition: transform .25s var(--ease); }
.side-related__card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgb(46 39 34 / .12), 0 14px 30px rgb(46 39 34 / .26); }
.side-related__card:hover .side-related__img { transform: scale(1.06); }
.side-related__card:hover .side-related__go { transform: translateX(3px); }
.site-footer .side-related__card:hover { text-decoration: none; }
.side-related__card:hover .side-related__title { text-decoration: none; }

/* Tours page: by place or by type */
.shop-views { display: inline-flex; gap: .2rem; margin: 0 0 1rem; padding: .25rem; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.shop-views a { padding: .4rem 1.1rem; border-radius: 99px; color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; }
.shop-views a[aria-current="page"] { background: var(--accent); color: #fff; }

/* Tailor-made support: the offer at the end of an itinerary and its form */
.tailor-cta-box { container-type: inline-size; margin: 2.5rem 0 3.2rem; }
.tailor-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "text text" "button button"; align-items: center; gap: .8rem 1rem; margin: 0; padding: 1.5rem 1.5rem 1.6rem; overflow: hidden; border-radius: 1.6rem; background: linear-gradient(135deg, var(--peru-red), #7d0b19); color: #fff; box-shadow: 0 8px 24px rgb(46 39 34 / .22), 0 24px 48px -20px rgb(139 29 26 / .55); }
.tailor-cta::before { content: ""; position: absolute; z-index: -1; right: -3rem; top: -3rem; width: 15rem; height: 15rem; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .16), transparent 68%); }
.tailor-cta__icon { grid-area: icon; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); color: #fff; }
.tailor-cta__text { display: contents; }
.tailor-cta h2 { grid-area: title; margin: 0; color: #fff; font-size: 1.5rem; }
.tailor-cta p { grid-area: text; margin: 0; max-width: none; color: rgb(255 255 255 / .94); }
.tailor-cta__button { grid-area: button; justify-self: end; text-align: center; justify-content: center; background: #fff; color: var(--peru-red); border-color: #fff; }
.tailor-cta__button:hover { background: #eceae6; color: var(--accent-deep); border-color: #eceae6; }
.tailor-link { margin: 0 0 1.4rem; }
.tailor-link .btn { gap: .5rem; color: var(--peru-red); box-shadow: inset 0 0 0 1.5px var(--peru-red); }
.tailor-link .btn:hover { background: var(--peru-red); color: #fff; }
.tailor-form { display: grid; gap: 1rem; max-width: 36rem; }
.tailor-form__field { display: grid; gap: .3rem; margin: 0; }
.tailor-form__field label { font-weight: 600; }
.tailor-form input[type="text"], .tailor-form input[type="email"], .tailor-form input[type="number"], .tailor-form textarea { width: 100%; box-sizing: border-box; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; font: inherit; }
.tailor-form__check label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.tailor-form__error { color: var(--accent-deep); font-size: .9rem; }
.tailor-form__summary { font-weight: 600; font-size: 1rem; margin-block: 0 1rem; }
.tailor-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tailor-for { margin: 0 0 1rem; }
.tailor-thanks { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: #fff; box-shadow: 0 2px 8px rgb(46 39 34 / .1); }
/* The card follows the width of its own column (an itinerary has half a page): stacked when narrow, on one row when wide */
@container (min-width: 48rem) { .tailor-cta { grid-template-columns: auto 1fr auto; grid-template-areas: "icon title button" "icon text button"; gap: .4rem 1.4rem; } .tailor-cta__icon { width: 4rem; height: 4rem; } .tailor-cta__button { justify-self: start; } }

/* The links inside the text of an article are bold (not those of the right column) */
article p a, article li a, article td a, article blockquote a { font-weight: 700; }

.weather__credit a { font-weight: 400; }

/* Tours page on phones: one card per row, so photo and title have room */
@media (max-width: 699px) { .shop-place .offer-list { grid-template-columns: 1fr; } }

/* Home: the sections below the photo. Each has a title row with a link to the whole section. */
.home-block { max-width: 74rem; margin: 0 auto; padding: 2.4rem var(--gutter) .4rem; }
.home-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; margin-bottom: 1.1rem; }
.home-block__title { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.1; }
.home-block__all { font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.home-block__all:hover { text-decoration: underline; }
.home-block > .home-block__title { margin-bottom: 1.1rem; }

.entry-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.entry-tile { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 12rem; overflow: hidden; border-radius: var(--radius); background: var(--night); color: #fff; text-decoration: none; box-shadow: 0 6px 18px -10px rgb(46 39 34 / .55); }
.entry-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.entry-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 14 10 / .85), rgb(20 14 10 / .2) 65%, transparent); }
.entry-tile:hover img { transform: scale(1.06); }
.entry-tile__text { display: grid; gap: .25rem; padding: .9rem 1rem 1rem; }
.entry-tile__text strong { font: 600 1.3rem/1.15 var(--font-display); }
.entry-tile__text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; line-height: 1.35; color: rgb(255 255 255 / .9); }
@media (min-width: 52rem) { .entry-tiles { grid-template-columns: repeat(3, 1fr); gap: .9rem; } .entry-tile { min-height: 15rem; } .entry-tile__text strong { font-size: 1.5rem; } }

.home-block.destinations { padding-top: 2.4rem; }
.home-wide .itin-cards { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .home-wide .itin-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .home-wide .itin-cards { grid-template-columns: repeat(4, 1fr); } .home-wide .offer-list { grid-template-columns: repeat(4, 1fr); } }

.home-band { margin: 2.6rem 0 0; padding: 2.6rem 0 2.8rem; background: var(--night); color: #fff; }
.home-band__inner { max-width: 74rem; margin: 0 auto; padding: 0 var(--gutter); }
.home-band .home-block__title { color: #fff; }
.home-band .home-block__all { color: #fff; }
.pick-cards { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.pick-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 14rem; overflow: hidden; border-radius: var(--radius); background: #2a231f; }
.pick-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pick-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(20 14 10 / .88), rgb(20 14 10 / .15) 70%, transparent); }
.pick-card:hover img { transform: scale(1.06); }
.pick-card__text { display: grid; gap: .3rem; padding: 1rem 1.05rem 1.1rem; }
.pick-card__text a { color: #fff; font: 600 1.25rem/1.2 var(--font-display); text-decoration: none; }
.pick-card__text a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pick-card__text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; line-height: 1.4; color: rgb(255 255 255 / .88); }
@media (min-width: 40rem) { .pick-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .pick-cards { grid-template-columns: repeat(4, 1fr); } .pick-card { min-height: 18rem; } }


.info-links { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.info-links a { display: grid; gap: .2rem; height: 100%; padding: .95rem 1.1rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.info-links a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-strong), 0 10px 22px -14px rgb(46 39 34 / .5); }
.info-links strong { font: 600 1.1rem/1.25 var(--font-display); color: var(--accent); }
.info-links span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.4; color: var(--ink-2); }
@media (min-width: 40rem) { .info-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .info-links { grid-template-columns: repeat(3, 1fr); } }

/* Hotels page: one card per area with what it is like, who it suits and the one drawback */
.stay-guide__intro { max-width: 46rem; margin: .2rem 0 1.1rem; font-size: 1.05rem; line-height: 1.6; }
.stay-areas { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.stay-area { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgb(46 39 34 / .5); }
.stay-area h3 { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.stay-area p { margin: 0; }
.stay-area__tag { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.stay-area__text { font-size: .95rem; line-height: 1.55; }
.stay-area__note { padding: .5rem .7rem; border-radius: .5rem; background: var(--soft); font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.stay-area__cta { margin-top: auto; }
.stay-area__text + .stay-area__note { margin-bottom: .35rem; }
@media (min-width: 44rem) { .stay-areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .stay-areas { grid-template-columns: repeat(3, 1fr); } }

/* The share button: the main floating action, with its label; "back to top" is the quiet one */
.float-buttons { align-items: flex-end; }
.float-btn--share { width: 3.2rem; height: 3.2rem; padding: 0; border-radius: 99px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .02em; box-shadow: 0 3px 6px rgb(46 39 34 / .2), 0 12px 28px -4px rgb(139 29 26 / .55); }
.float-btn--share:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.float-btn__label { line-height: 1; }
.float-btn--top { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.float-btn--top:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Hotels page: the finder, then one compact row per area with a link to its card in the guide */
.stay-finder { display: grid; gap: 1.1rem; margin: 0 0 2rem; padding: 1.4rem 1.5rem 1.5rem; border-radius: 1.6rem; background: linear-gradient(160deg, #fff 0%, #f6f4f1 100%); box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(46 39 34 / .06), 0 22px 44px -22px rgb(139 29 26 / .45); }
.stay-finder [hidden] { display: none !important; }
.stay-finder__title { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.stay-finder__title small { margin-left: .4rem; font-size: .85rem; font-weight: 400; color: var(--ink-2); }
.stay-finder__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.stay-finder__chips .chip { padding: .55rem 1.05rem; font-size: .95rem; }
.stay-finder__chips .chip[aria-pressed="true"]::before { content: "✓\00a0"; }
.stay-finder__step { padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.stay-finder__status { margin: 0; font-weight: 600; color: var(--ink-2); }
.stay-finder__status:empty { display: none; }
.stay-rows { display: grid; gap: .7rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.stay-row { display: grid; gap: .8rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgb(46 39 34 / .5); transition: opacity .2s; }
.stay-row.is-match { box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -14px rgb(139 29 26 / .5); }
.stay-row.is-dim { opacity: .45; }
.stay-row h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.stay-row p { margin: .2rem 0 0; }
.stay-row__why { color: var(--ink-2); font-size: .95rem; }
.stay-row__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.stay-row__tags span { padding: .15rem .6rem; border-radius: 99px; background: var(--soft); font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.stay-row__match { color: var(--accent); font-size: .85rem; font-weight: 700; }
.stay-row__match:not([hidden])::before { content: "✓ "; }
.stay-row__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (min-width: 44rem) { .stay-row { grid-template-columns: 1fr auto; align-items: center; } .stay-row__actions { justify-content: flex-end; } }
.stay-finder__chips .chip[aria-pressed="true"]::before { content: "✓\00a0"; }

/* The tailor-made page: the form beside a short, human account of what happens next */
.tailor-layout { display: grid; gap: 2rem; align-items: start; }
.tailor-layout .tailor-form { max-width: none; }
.tailor-steps { padding: 1.4rem 1.5rem 1.5rem; border-radius: 1.6rem; background: linear-gradient(160deg, #fff, #f4f2ef); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -20px rgb(139 29 26 / .45); }
.tailor-steps h2 { margin: 0 0 .9rem; font-size: 1.3rem; }
.tailor-steps ol { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.tailor-steps li { position: relative; display: grid; gap: .15rem; padding-left: 2.6rem; counter-increment: step; }
.tailor-steps li::before { content: counter(step); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--peru-red); color: #fff; font-weight: 700; font-size: .95rem; }
.tailor-steps li span { color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.tailor-steps__note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--ink-2); }
@media (min-width: 62rem) { .tailor-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .tailor-steps { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

/* "Tailor-made trip": the one highlighted entry of the menu, a button that leads to the form */
.nav .nav-cta { margin-left: .5rem; }
.nav .nav-cta a { gap: .45rem; padding: 0 1.05rem; background: var(--peru-red); color: #fff; box-shadow: 0 4px 12px -4px rgb(139 29 26 / .7); transition: background .2s, transform .2s var(--ease); }
.nav .nav-cta a:hover, .nav .nav-cta a:focus-visible { background: var(--night); transform: translateY(-1px); }
@media (max-width: 61.99rem) { .offer-list > .offer-more:last-child { grid-column: 1 / -1; min-height: 9rem; } }  /* always under the cards, never beside the last one */

/* The mobile menu: red drawer, one row per entry (icon, name, chevron for the groups), the group's
   entries in a white sheet that rises from the bottom, the tailor-made button pinned at the foot */
/* a drawer on the right, 70% of the screen, with the rest of the page dimmed behind it */
.menu__panel { display: flex; flex-direction: column; left: auto; width: 70vw; height: calc(100svh - var(--header-h)); padding: .4rem .9rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 0 1.4rem; }
.menu[open]::after { content: ""; position: fixed; z-index: 65; inset: var(--header-h) 0 0 0; background: rgb(20 14 10 / .5); }
.menu__panel nav { flex: 1; display: flex; flex-direction: column; }
.menu__list { flex: 1; display: flex; flex-direction: column; gap: 0; }
.menu__list > li > a, .menu__group summary { display: flex; align-items: center; gap: .8rem; min-height: 3.8rem; padding: .3rem .3rem; border: 0; border-bottom: 1px solid rgb(255 255 255 / .25); border-radius: 0; background: none; color: #fff; font: 700 1.1rem/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; list-style: none; }
.menu__list > li > a:hover, .menu__group summary:hover { background: rgb(255 255 255 / .1); }
.menu__group summary::-webkit-details-marker { display: none; }
/* the burger's own summary style (pill, darker when open) must not reach the rows inside it */
.menu .menu__group summary, .menu[open] .menu__group summary { border-radius: 0; background: none; letter-spacing: 0; }
.menu .menu__group summary:hover, .menu .menu__group details[open] > summary { background: rgb(255 255 255 / .1); }
.menu__tile { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: #fff; }
.menu__tile svg { width: 100%; height: 100%; }
.menu__name { flex: 1; }
.menu__group summary::after { content: ""; width: .55rem; height: .55rem; margin-right: .3rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.menu__group details[open] > summary::after { transform: rotate(225deg); }
/* a group opens as a second page of the drawer: same red, same rows, "back" on top */
.menu__group ul { position: fixed; z-index: 80; top: var(--header-h); right: 0; display: flex; flex-direction: column; width: 70vw; height: calc(100svh - var(--header-h)); overflow-y: auto; margin: 0; padding: .4rem .9rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 0 1.4rem; background: var(--peru-red); color: #fff; list-style: none; }
.menu__sheet-title { display: flex; align-items: center; gap: .6rem; min-height: 3.8rem; border-bottom: 1px solid rgb(255 255 255 / .25); font: 700 1.1rem/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.menu__sheet-title::before { content: ""; width: .6rem; height: .6rem; margin: 0 .5rem 0 .3rem; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.menu__group ul a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 3.6rem; padding: .3rem; border-bottom: 1px solid rgb(255 255 255 / .25); color: #fff; font: 700 1.05rem/1.2 var(--font-display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.menu__group ul a::after { content: ""; flex: none; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.menu__group ul a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.menu__search { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .3rem .3rem .3rem 1.1rem; border-radius: 99px; background: #fff; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .55); }
.menu__search input { flex: 1; min-width: 0; height: 2.8rem; padding: 0; border: 0; background: none; color: var(--ink); font: 500 1.05rem/1 var(--font-sans); outline: none; }
.menu__search input::placeholder { color: var(--ink-2); }
.menu__search button { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; border-radius: 50%; background: var(--peru-red); color: #fff; cursor: pointer; }

/* Page photo: taller, with a soft shade and a quick zoom out on opening */
.page-hero { overflow: hidden; }
.page-hero > img { height: min(54svh, 30rem); animation: page-hero-zoom 5s ease-out both; }
.page-hero::after { height: 100%; background: linear-gradient(to bottom, rgb(20 14 10 / .22), transparent 24%, transparent 66%, rgb(20 14 10 / .32)); }
@keyframes page-hero-zoom { from { transform: scale(1.09); } to { transform: scale(1); } }
@media (min-width: 48rem) { .page-hero > img { height: min(60svh, 38rem); } .page-hero::after { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .page-hero > img { animation: none; } }

/* The tailor-made page: what the service is, before the form */
.tailor-service { display: grid; gap: 1rem; margin: 0 0 2rem; }
.tailor-service__card { padding: 1.3rem 1.4rem 1.4rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 2px 14px -6px rgb(46 39 34 / .25); }
.tailor-service__card h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.tailor-service__card p { margin: 0 0 .7rem; max-width: none; }
.tailor-service__card ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tailor-service__card li { position: relative; padding-left: 1.5rem; line-height: 1.45; }
.tailor-service__card li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--peru-red); }
.tailor-service__card--assist { background: linear-gradient(135deg, #f3e3d8, #f9f1e9); }
@media (min-width: 48rem) { .tailor-service { grid-template-columns: 1fr 1fr; } }

/* The Hotels page: the list on the left and, on wide screens, Booking's map with the prices on the right half, from the header to the bottom of the screen (below the finder on phones) */
.hotels-split__text { min-width: 0; }
.hotels-map { --booking-bleed: 16px; overflow: hidden; background: var(--soft); }
.hotels-split--map .hotels-layout__side { margin: 0 var(--gutter) 2rem; }
.hotels-split--map .hotels-map { border-radius: 1.2rem; }
.offers--map .hotels-map { border-radius: 1.2rem; }
.hotels-map iframe { transition: opacity .4s ease; }
.hotels-map.is-settling iframe { opacity: 0; }  /* until the map has got to the place (booking-map.js) */
.hotels-map.is-settling { position: relative; }
.hotels-map.is-settling::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 3px solid var(--line-strong); border-top-color: var(--peru-red); border-radius: 50%; animation: map-loading .8s linear infinite; pointer-events: none; }
@keyframes map-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hotels-map.is-settling::after { animation: none; } }
.hotels-map:not([style]) { min-height: 20rem; }  /* until the map is drawn and the box takes its height */
body.hotels-page main { padding-top: var(--header-h); }
body.hotels-page .hotels-split__text { padding-top: 1.5rem; }
@media (min-width: 74rem) {
  .hotels-split--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .hotels-split--map .hotels-split__text { position: relative; z-index: 2; max-width: none; margin: 0; padding-right: 2.5rem; }
  .hotels-split--map .hotels-layout__side { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); margin: 0; }
  .hotels-split--map .hotels-map, .hotels-split--map .hotels-map:not([style]) { height: 100%; min-height: 0; border-radius: 0; }
  /* The frame is as tall as the box, plus the search form that the script hides above it */
  .hotels-split--map .hotels-map > div { height: 100% !important; }
  /* Booking draws its map with a margin of a few pixels all around: the frame is a little wider and taller than the box, so that the margin falls outside it and the map reaches the edges. */
  .hotels-split--map .hotels-map iframe { display: block; margin-left: calc(-1 * var(--booking-bleed)) !important; left: calc(-1 * var(--booking-bleed)) !important; width: calc(100% + 2 * var(--booking-bleed)) !important; height: calc(100% + var(--booking-mask) + var(--booking-bleed)) !important; }
}

/* The map of a trek: the figures of the walk under the map */
.map__trail-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .8rem 0 0; padding: 0; list-style: none; color: var(--ink-2); }
.map__trail-facts strong { color: var(--ink); }

/* Phones: larger text in the tour cards and in the title shown in the header */
@media (max-width: 699px) {
  .offer h3 { font-size: 1.12rem; }
  .shop-place .offer__body, .offer-list--single .offer__body { gap: .35rem; padding: .9rem 1rem 1.05rem; }
  .shop-place .offer__place { font-size: .76rem; }
  .shop-place .offer h3 { font-size: 1.3rem; line-height: 1.25; }
  .shop-place .offer h3 a { -webkit-line-clamp: 4; }
  .shop-place .offer__meta { gap: .15rem .5rem; margin-bottom: .7rem; font-size: 1rem; }
  .shop-place .offer__free { font-size: .9rem; }
  .shop-place .offer__price { padding: .4rem .85rem; font-size: .8rem; }
  .shop-place .offer .offer__price strong { font-size: 1.45rem; }
  .shop-place .offer__kind { font-size: .72rem; }
  .shop-place .offer__cta { min-height: 3.1rem; font-size: 1.05rem; }
}
@media (max-width: 61.99rem) {
  /* up to two lines, so a long title is not cut off */
  body.is-past-title .site-header__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 1.2rem; line-height: 1.15; }
}

/* The tailor-made page: short and direct. A headline, three reasons, a short form, one big button */
.tailor-perks { display: grid; gap: .6rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.tailor-perks li { display: flex; align-items: center; gap: .7rem; font-weight: 600; line-height: 1.3; }
.tailor-perks svg { flex: none; padding: .45rem; box-sizing: content-box; width: 22px; height: 22px; border-radius: 50%; background: var(--peru-red); color: #fff; }
@media (min-width: 48rem) { .tailor-perks { grid-template-columns: repeat(3, 1fr); gap: 1rem; } .tailor-perks li { flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 2px 12px -6px rgb(46 39 34 / .3); } }
.tailor-layout--single .tailor-form { max-width: 40rem; padding: 1.3rem 1.3rem 1.5rem; border-radius: 1.6rem; background: #fff; box-shadow: 0 10px 30px -14px rgb(46 39 34 / .35); }
.tailor-more { display: grid; gap: 1rem; }
.tailor-more > summary { cursor: pointer; font-weight: 700; color: var(--peru-red); list-style: none; }
.tailor-more > summary::-webkit-details-marker { display: none; }
.tailor-more > summary::before { content: "+"; display: inline-block; width: 1.2rem; font-weight: 800; }
.tailor-more[open] > summary::before { content: "–"; }
.tailor-more[open] > summary { margin-bottom: 1rem; }
.tailor-form__go { width: 100%; min-height: 3.4rem; font-size: 1.15rem; box-shadow: 0 10px 22px -10px rgb(139 29 26 / .8); }

/* The tailor-made page as an advertisement: a photo, a big promise, and the form already there */
/* The page "tailor-made trip": the photo fills the screen, copy on the left, the form on the right.
   Everything on the red is white (or gold); the dark text is only inside the white card. */
body.tailor-page main { padding-top: var(--header-h); }
body.tailor-page .wrap { padding-top: 2.5rem; }
.tailor-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: calc(100svh - var(--header-h)); background: var(--night) var(--photo, none) center / cover; color: #fff; }
.tailor-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, rgb(125 11 25 / .93), rgb(139 29 26 / .78) 45%, rgb(30 20 16 / .62)); }
.tailor-hero__inner { display: grid; gap: 2rem; width: 100%; max-width: 74rem; margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; box-sizing: border-box; }
.tailor-hero__kicker { margin: 0 0 .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.tailor-hero h1 { margin: 0; color: #fff; font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: 1.02; text-wrap: balance; }
.tailor-hero__lead { max-width: 34rem; margin: 1rem 0 0; font-size: 1.2rem; line-height: 1.45; color: #fff; }
.tailor-hero .tailor-perks { margin: 1.6rem 0 0; }
.tailor-hero .tailor-perks li { color: #fff; font-weight: 600; }
.tailor-hero .tailor-perks svg { background: #fff; color: var(--peru-red); }
.tailor-hero .tailor-for, .tailor-hero .tailor-for strong, .tailor-hero__copy a { margin: 1rem 0 0; color: #fff; }
.tailor-hero__card a { color: var(--peru-red); text-decoration: underline; }
.tailor-hero__card { padding: 1.5rem 1.3rem 1.6rem; border-radius: 1.6rem; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -22px rgb(0 0 0 / .65); }
.tailor-hero__cardtitle { margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); font: 700 1.35rem/1.2 var(--font-display); color: var(--ink); }
.tailor-hero__card .tailor-form { max-width: none; padding: 0; background: none; box-shadow: none; }
@media (min-width: 62rem) {
  .tailor-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(28rem, 32rem); align-items: center; gap: 4rem; padding-block: 3rem; }
  .tailor-hero .tailor-perks { grid-template-columns: 1fr; gap: .8rem; }
  .tailor-hero .tailor-perks li { flex-direction: row; align-items: center; padding: 0; background: none; box-shadow: none; }
}

/* The form: roomy fields, a clear focus, two columns where there is room */
.tailor-form { gap: 1.05rem; }
@media (min-width: 40rem) { .tailor-form, .tailor-more__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tailor-form > *, .tailor-more__fields > * { grid-column: 1 / -1; } .tailor-form .tailor-form__field--half, .tailor-more__fields .tailor-form__field--half { grid-column: auto; } }
.tailor-form__field label { font-size: .86rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.tailor-form input[type="text"], .tailor-form input[type="email"], .tailor-form input[type="number"], .tailor-form textarea { min-height: 3.1rem; padding: .75rem 1rem; border: 1.5px solid #e3ddd5; border-radius: .85rem; background: #fbf9f6; color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s, background .2s; }
.tailor-form textarea { min-height: 7.5rem; resize: vertical; }
.tailor-form input::placeholder, .tailor-form textarea::placeholder { color: #9a918a; }
.tailor-form input:hover, .tailor-form textarea:hover { border-color: #cfc7bd; }
.tailor-form input:focus, .tailor-form textarea:focus { outline: 0; border-color: var(--peru-red); background: #fff; box-shadow: 0 0 0 4px rgb(184 53 43 / .15); }
.tailor-form__field input[aria-invalid="true"], .tailor-form__field:has(.tailor-form__error) input, .tailor-form__field:has(.tailor-form__error) textarea { border-color: var(--accent-deep); }
.tailor-form__check input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .1rem; accent-color: var(--peru-red); }
.tailor-form__check label { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.tailor-more > summary { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; padding: .5rem .9rem .5rem .6rem; border-radius: 99px; background: #eceae6; color: var(--accent-deep); font-weight: 700; }
.tailor-more > summary::before { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--peru-red); color: #fff; font-weight: 700; line-height: 1; }
.tailor-more[open] > summary { margin-bottom: .2rem; }
.tailor-form__go { min-height: 3.5rem; font-size: 1.15rem; background: linear-gradient(135deg, var(--peru-red), #8b1d1a); }
.tailor-form__go:hover { background: linear-gradient(135deg, #a82e24, #7d0b19); }

/* The page of the destinations: photo hero, big photo cards, the map across the page */
body.dest-page main { padding-top: var(--header-h); }
.dest-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(calc(100svh - var(--header-h) - 2rem), 46rem); overflow: hidden; background: var(--night); color: #fff; }
.dest-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgb(20 14 10 / .92), rgb(20 14 10 / .6) 45%, rgb(20 14 10 / .38)); }
.dest-hero__inner { width: 100%; max-width: 74rem; margin: 0 auto; padding: 4rem var(--gutter) 5.5rem; box-sizing: border-box; }
.dest-hero__kicker { margin: 0 0 .6rem; text-shadow: 0 1px 8px rgb(0 0 0 / .6); font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.dest-hero h1 { margin: 0; color: #fff; font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: 1; text-wrap: balance; }
.dest-hero__lead { max-width: 38rem; margin: 1rem 0 0; font-size: 1.2rem; line-height: 1.45; color: rgb(255 255 255 / .94); }
.dest-hero__links { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
.btn--glass { background: rgb(255 255 255 / .16); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--glass:hover { background: #fff; color: var(--peru-red); }
.dest-body { padding-top: 0; padding-bottom: 1rem; }
.dest-answer { position: relative; display: flex; gap: 1.1rem; align-items: flex-start; margin: -3.2rem 0 3rem; padding: 1.4rem 1.5rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 20px 44px -22px rgb(46 39 34 / .55); font-size: 1.1rem; line-height: 1.55; }
.dest-answer p { margin: 0 0 .7rem; max-width: none; } .dest-answer p:last-child { margin: 0; }
.dest-answer__icon { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--peru-red); color: #fff; }
.dest-places h2, .dest-map h2 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dest-card { position: relative; min-height: 17rem; overflow: hidden; border-radius: 1.4rem; background: var(--night); box-shadow: 0 10px 26px -14px rgb(46 39 34 / .6); transition: transform .3s var(--ease), box-shadow .3s; }
.dest-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -14px rgb(46 39 34 / .65); }
.dest-card a { position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dest-card:hover img { transform: scale(1.07); }
.dest-card a::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top, rgb(20 14 10 / .88), rgb(20 14 10 / .5) 42%, rgb(20 14 10 / 0) 76%); }
.dest-card__body { position: relative; z-index: 2; display: grid; gap: .35rem; padding: 1.1rem 3.6rem 1.2rem 1.2rem; }
.dest-card__name { font: 700 1.45rem/1.15 var(--font-display); }
.dest-card__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.4; color: rgb(255 255 255 / .9); }
.dest-card__go { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff; color: var(--peru-red); font-weight: 800; transition: transform .3s var(--ease), background .2s, color .2s; }
.dest-card:hover .dest-card__go { transform: translateX(3px); background: var(--peru-red); color: #fff; }
@media (min-width: 48rem) {
  .dest-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; }
  .dest-card { min-height: 0; }
  /* The three places most trips start with are the big ones */
  .dest-card--top:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .dest-card--top:nth-child(2), .dest-card--top:nth-child(3) { grid-column: span 2; }
  /* The last row is never left half empty */
  .dest-card--w2 { grid-column: span 2; } .dest-card--w4 { grid-column: span 4; }
  .dest-card:nth-child(1) .dest-card__name { font-size: 2.2rem; }
  .dest-card:nth-child(1) .dest-card__summary { font-size: 1.05rem; -webkit-line-clamp: 3; }
}
.dest-map { margin: 3.5rem 0 0; }
.dest-map .wrap { padding-bottom: 0; }
.dest-map .map { width: 100%; height: min(70svh, 34rem); border-radius: 0; }
.dest-map .map__canvas { height: 100%; border: 0; border-radius: 0; }
.dest-map .map__places { display: none; }
.dest-text { padding-top: 2.5rem; }

/* The flight search card of the transport pages */
.flight-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center; padding: 1.3rem 1.4rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 10px 28px -16px rgb(46 39 34 / .5); }
.flight-card__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--peru-red); color: #fff; }
.flight-card h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.flight-card p { margin: 0; max-width: none; color: var(--ink-2); }
.flight-card .btn { grid-column: 1 / -1; }
@media (min-width: 48rem) { .flight-card { grid-template-columns: auto 1fr auto; } .flight-card .btn { grid-column: auto; } }

/* A hub of guides with no photo on top: a red title band with a ridge of peaks, then photo cards */
body.card-hub-page main { padding-top: var(--header-h); }
.card-hub-band { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 0%, #b8352b, transparent 60%), linear-gradient(135deg, #8b1d1a, #5e0c16); color: #fff; }
.card-hub-band__inner { position: relative; z-index: 1; max-width: 74rem; margin: 0 auto; padding: 3.5rem var(--gutter) 7rem; box-sizing: border-box; }
.card-hub-band__kicker { margin: 0 0 .7rem; font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.card-hub-band h1 { max-width: 46rem; margin: 0; color: #fff; font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: 1.02; text-wrap: balance; }
.card-hub-band__lead { max-width: 36rem; margin: 1rem 0 0; font-size: 1.2rem; line-height: 1.45; color: #fff; }
.card-hub-band__peaks { position: absolute; inset: auto 0 0; width: 100%; height: 6rem; fill: rgb(255 255 255 / .09); }
.card-hub-body { padding-top: 0; padding-bottom: 1rem; }
.card-hub-body .dest-answer { margin-top: -3.5rem; }
.card-hub-body__title { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.card-hub-text { padding-top: 2.5rem; }

/* The small "ask for support" buttons: compact, in capitals */
.tailor-cta__button, .tailor-link .btn { min-height: 38px; padding: 0 1.1rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

/* A small tailor-made banner at the top right of a page title */
.page-title--aside { display: grid; gap: 1.2rem; }
.tailor-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem .9rem; align-items: center; max-width: 34rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: linear-gradient(135deg, var(--peru-red), #7d0b19); color: #fff; box-shadow: 0 12px 28px -14px rgb(139 29 26 / .75); }
.tailor-mini__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgb(255 255 255 / .18); }
.tailor-mini__text { display: grid; gap: .15rem; line-height: 1.3; }
.tailor-mini__text strong { color: #fff; font: 700 1.1rem/1.2 var(--font-display); }
.tailor-mini__text span { font-size: .88rem; color: #fff; }
.tailor-mini__button { grid-column: 1 / -1; justify-self: end; min-height: 40px; padding: 0 1.3rem; border: 0; background: #fff; color: var(--peru-red); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .55); transition: transform .2s var(--ease), background .2s, color .2s; }
.tailor-mini__button:hover { background: #eceae6; color: var(--accent-deep); transform: translateY(-1px); }
.tailor-mini__button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 48rem) { .page-title--aside { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2rem; } .tailor-mini { margin-top: 1.2rem; width: 31rem; grid-template-columns: auto minmax(0, 1fr) auto; } .tailor-mini__button { grid-column: auto; justify-self: end; } }

/* "Add details": the fields sit in their own grid, not in the <details> itself */
.tailor-more { display: block; }
.tailor-more__fields { display: grid; gap: 1.05rem; }
body.tailor-page .site-footer { margin-top: 0; }
body.tailor-page main { padding-bottom: 0; }
.tailor-hero__card { background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / .55); }
.tailor-hero__card .tailor-form input[type="text"], .tailor-hero__card .tailor-form input[type="email"], .tailor-hero__card .tailor-form input[type="number"], .tailor-hero__card .tailor-form textarea { background: rgb(255 255 255 / .85); }
.page-title .tailor-mini { margin: 1.2rem 0 1.6rem; }
/* In "Add details" the number of travellers is a narrow box and the phone gets the rest of the row */
@media (min-width: 40rem) { .tailor-more__fields { grid-template-columns: 9.5rem minmax(0, 1fr); } }

/* The title of the form card: a warm headline with a reassuring line under it */
.tailor-hero__cardhead { margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid rgb(46 39 34 / .12); }
.tailor-hero__cardhead .tailor-hero__cardtitle { margin: 0; padding: 0; border: 0; font-size: 1.7rem; line-height: 1.15; color: var(--accent-deep); text-wrap: balance; }
.tailor-hero__cardsub { display: inline-flex; align-items: center; gap: .4rem; margin: .55rem 0 0; padding: .25rem .75rem; border-radius: 99px; background: #eceae6; color: var(--accent-deep); font-size: .85rem; font-weight: 700; }

/* The privacy link in the footer is written in capitals, like the menu */
.site-footer__legal a:not([href^="mailto"]) { text-transform: uppercase; letter-spacing: .06em; }

/* Footer menu in two narrow columns next to the logo; the language selector stays at the far right */
@media (min-width: 62rem) {
  .site-footer__nav { justify-self: end; }
  .site-footer__nav ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; gap: .1rem 2.6rem; justify-content: end; }
  .site-footer__nav a { min-height: 34px; padding: 0 .3rem; border-radius: .4rem; font-size: .82rem; letter-spacing: .07em; }
}

/* The banner pinned to the bottom of phones: the picture is flush with the left, top and bottom
   edges (no padding around it); the text and the button keep their own room. */
.sticky-offer { gap: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); overflow: hidden; }
.sticky-offer__link { align-self: stretch; gap: .8rem; padding-right: var(--gutter); }
.sticky-offer img { align-self: stretch; width: 5.6rem; height: auto; min-height: 4.2rem; border-radius: 0; }
.sticky-offer__icon { align-self: stretch; width: 5.6rem; height: auto; min-height: 4.2rem; border-radius: 0; }
.sticky-offer__text { padding-block: .6rem; }

/* Easier to read: the title may use two lines, the text is larger and darker, the button bigger */
.sticky-offer img, .sticky-offer__icon { width: 6.2rem; min-height: 5.4rem; }
.sticky-offer__text { gap: .2rem; padding-block: .7rem; }
.sticky-offer__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 1.05rem; line-height: 1.22; color: var(--ink); }
.sticky-offer__meta { font-size: .86rem; color: var(--ink); }
.sticky-offer__meta strong { font-size: 1rem; }
.sticky-offer__cta { min-height: 44px; padding: 0 1.15rem; font-size: .95rem; }
.sticky-offer__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.3; }

/* The form of the tailor-made page is glass: the photo shows through the card and the fields */
.tailor-hero__card { background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border-color: rgb(255 255 255 / .6); }
.tailor-hero__card .tailor-form input[type="text"], .tailor-hero__card .tailor-form input[type="email"], .tailor-hero__card .tailor-form input[type="number"], .tailor-hero__card .tailor-form textarea { background: rgb(255 255 255 / .6); border-color: rgb(255 255 255 / .8); }
.tailor-hero__card .tailor-form input:focus, .tailor-hero__card .tailor-form textarea:focus { background: rgb(255 255 255 / .92); }
.tailor-hero__card .tailor-form__field label, .tailor-hero__card .tailor-form__check label { color: var(--ink); }
.tailor-hero__card .tailor-more > summary, .tailor-hero__cardsub { background: rgb(255 255 255 / .65); }

/* In the narrow text column of the Hotels page the small banner stacks: text first, button under it */
@media (min-width: 74rem) {
  .hotels-split--map .tailor-mini { width: auto; max-width: 34rem; grid-template-columns: auto minmax(0, 1fr); }
  .hotels-split--map .tailor-mini__button { grid-column: 1 / -1; justify-self: end; }
}

/* The destinations hero: photos that follow one another (a slow zoom on each), a scroll cue */
.dest-hero__slides { position: absolute; z-index: -2; inset: 0; }
.dest-hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: dest-slide calc(var(--slides) * 6s) infinite; animation-delay: calc(var(--i) * 6s - 1s); }  /* the first photo starts already shown */
.dest-hero__slides img:first-child { opacity: 1; }
@keyframes dest-slide {
  0% { opacity: 0; transform: scale(1); }
  4%, 22% { opacity: 1; }
  26%, 100% { opacity: 0; transform: scale(1.08); }
}
@media (min-width: 0) { .dest-hero[style*="--slides: 1"] .dest-hero__slides img { animation: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dest-hero__slides img { animation: none; } .dest-hero__slides img:not(:first-child) { display: none; } }
.dest-hero h1 { font-size: clamp(2.8rem, 9vw, 5.6rem); text-shadow: 0 2px 24px rgb(0 0 0 / .45); }
.dest-hero__lead { font-size: 1.3rem; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.dest-hero__cue { position: absolute; bottom: 4.6rem; left: 50%; display: grid; place-items: center; width: 2.4rem; height: 3.6rem; margin-left: -1.2rem; border: 2px solid rgb(255 255 255 / .8); border-radius: 99px; }
.dest-hero__cue span { width: 5px; height: 9px; border-radius: 99px; background: #fff; animation: dest-cue 1.6s ease-in-out infinite; }
@keyframes dest-cue { 0% { transform: translateY(-8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@media (max-width: 47.99rem) { .dest-hero__cue { display: none; } }
.dest-invite { max-width: 74rem; margin: 3.5rem auto 0; padding: 0 var(--gutter); box-sizing: border-box; }
.dest-invite .tailor-cta-box { margin: 0; }

/* The tailor-made banner of the Hotels page: one slim line (icon, short text, button) */
.hotels-split .tailor-mini { padding: .55rem .6rem .55rem .8rem; gap: .6rem; border-radius: 1rem; max-width: none; }
.hotels-split .tailor-mini__icon { width: 2.2rem; height: 2.2rem; }
.hotels-split .tailor-mini__text strong { font-size: .95rem; }
.hotels-split .tailor-mini__text span { display: none; }
.hotels-split .tailor-mini__button { min-height: 34px; padding: 0 .9rem; font-size: .7rem; }
@media (min-width: 74rem) {
  .hotels-split--map .tailor-mini { grid-template-columns: auto minmax(0, 1fr) auto; width: auto; max-width: 30rem; }
  .hotels-split--map .tailor-mini__button { grid-column: auto; justify-self: end; }
}
@media (max-width: 73.99rem) { .hotels-split .tailor-mini { grid-template-columns: auto minmax(0, 1fr) auto; } .hotels-split .tailor-mini__button { grid-column: auto; } }

/* A lower footer: no line above the legal row, less room around everything */
.site-footer { margin-top: 2rem; padding: 1.8rem var(--gutter) 1rem; }
.site-footer__legal { margin: 1rem auto 0; padding-top: 0; border-top: 0; }
.site-footer__inner { gap: .8rem 2rem; }
.site-footer__brand p { margin-top: .4rem; }
@media (min-width: 900px) { .site-footer { padding-top: 2rem; } }
@media (min-width: 62rem) {
  .site-footer__nav ul { grid-template-rows: repeat(3, auto); gap: 0 2rem; }
  .site-footer__nav a { min-height: 30px; }
  .site-footer__brand p { max-width: 26rem; }
}

.site-footer__legal { justify-content: flex-start; gap: .3rem 1.4rem; }

/* The small banner has no icon: text, then the button */
.tailor-mini { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .tailor-mini { grid-template-columns: minmax(0, 1fr) auto; } }

/* The dates of the hotel finder */
.stay-finder__dates { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem; }
.stay-finder__dates .stay-finder__title { flex: 1 1 100%; max-width: none; margin: 0; }  /* .prose p caps a paragraph at 40rem: the title takes the whole row, so the dates go below it */
.stay-finder__dates label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 700; }
.stay-finder__dates input { min-height: 2.8rem; padding: 0 .8rem; border: 1.5px solid var(--line-strong); border-radius: .8rem; background: #fff; font: inherit; color: var(--ink); }
.stay-finder__dates input:focus { outline: 0; border-color: var(--peru-red); box-shadow: 0 0 0 4px rgb(184 53 43 / .15); }

/* The destinations page as a magazine: a contents strip, then one spread per region */
.dest-region { padding: 3rem 0 3.4rem; scroll-margin-top: var(--header-h); }
.dest-region--tint { background: #efe6dc; }
.dest-region__inner { padding-block: 0; }
.dest-region__head { display: flex; align-items: flex-end; gap: 1.1rem; margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.dest-region__no { color: var(--peru-red); font: 700 clamp(3.4rem, 9vw, 5.6rem)/.8 var(--font-display); opacity: .9; }
.dest-region__head h2 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.9rem); line-height: 1.05; text-wrap: balance; }
.dest-region__head p { max-width: 38rem; margin: .4rem 0 0; font-size: 1.1rem; color: var(--ink-2); }
.dest-mag { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dest-mag__item { position: relative; min-height: 15rem; overflow: hidden; border-radius: 1.2rem; background: var(--night); }
.dest-mag__item--lead { min-height: 24rem; }
.dest-mag__item a { position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.dest-mag__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dest-mag__item:hover img { transform: scale(1.06); }
.dest-mag__item a::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to top, rgb(20 14 10 / .86), rgb(20 14 10 / .35) 45%, rgb(20 14 10 / 0) 75%); }
.dest-mag__body { position: relative; z-index: 2; display: grid; gap: .3rem; padding: 1.1rem 1.2rem 1.2rem; }
.dest-mag__kicker { color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.dest-mag__name { font: 700 1.35rem/1.15 var(--font-display); }
.dest-mag__item--lead .dest-mag__name { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.05; }
.dest-mag__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; line-height: 1.4; color: rgb(255 255 255 / .92); }
.dest-mag__item--lead .dest-mag__summary { -webkit-line-clamp: 4; max-width: 34rem; font-size: 1.05rem; }
.dest-mag__go { display: none; margin-top: .3rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.dest-mag__item--lead .dest-mag__go { display: block; }
@media (min-width: 48rem) {
  .dest-mag { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13rem; grid-auto-flow: dense; }
  .dest-mag__item, .dest-mag__item--lead { min-height: 0; }
  .dest-mag__item--lead { grid-column: span 2; grid-row: span var(--rows, 2); }
  .dest-mag__item:not(.dest-mag__item--lead) { grid-column: span 1; }
  .dest-mag__item.dest-mag__item--wide { grid-column: span 2; }
  .dest-mag__item--solo { grid-column: 1 / -1; grid-row: span 2; }
  /* with only one other card it takes the whole right half */
  .dest-mag__item--lead + .dest-mag__item:last-child { grid-column: span 2; grid-row: span var(--rows, 2); }
}

/* The buttons of the tour cards and of the banner pinned to the bottom use the red of the footer */
.offer__cta, .sticky-offer__cta { background: var(--peru-red); }
.offer:hover .offer__cta, .offer__cta:hover, .sticky-offer__cta:hover { background: color-mix(in srgb, var(--peru-red) 82%, #000); }

/* Tailor-made form: a see-through dark glass card over the photo, so the title and labels are white */
.tailor-hero__card { background: rgb(60 10 20 / .58); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 30px 60px -22px rgb(0 0 0 / .6); color: #fff; }
.tailor-hero__cardtitle { color: #fff; border-bottom-color: rgb(255 255 255 / .3); }
.tailor-hero__cardsub, .tailor-hero__card .tailor-form__field label, .tailor-hero__card .tailor-form__check label, .tailor-hero__card .tailor-more > summary { color: #fff; }
.tailor-hero__card a { color: #fff; }
.tailor-hero__card .tailor-form__error { color: #ffd2cc; }
.tailor-hero__cardsub, .tailor-hero__card .tailor-more > summary { background: rgb(255 255 255 / .18); }
.tailor-hero__cardhead .tailor-hero__cardtitle { color: #fff; }
.tailor-hero__card .tailor-form input[type="text"], .tailor-hero__card .tailor-form input[type="email"], .tailor-hero__card .tailor-form input[type="number"], .tailor-hero__card .tailor-form textarea { background: rgb(255 255 255 / .9); border-color: transparent; }

/* The text under the cards of the itineraries and "Perù per…" pages: a red lead panel, then numbered cards */
.overview-article { padding-top: 3rem; }
.overview-article article { counter-reset: guide; display: grid; gap: 1.4rem; align-items: stretch; }
.overview-article .block-answer { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 .4rem; padding: 1.8rem 1.6rem 1.9rem; border: 0; border-radius: 1.6rem; background: radial-gradient(90% 140% at 100% 0%, rgb(255 255 255 / .16), transparent 60%), linear-gradient(135deg, var(--peru-red), #6f0a18); color: #fff; box-shadow: 0 24px 44px -24px rgb(139 29 26 / .7); font: 500 clamp(1.1rem, 2.6vw, 1.4rem)/1.5 var(--font-display); }
.overview-article .block-answer::before { content: "“"; position: absolute; z-index: -1; right: 1.2rem; top: -1.2rem; font: 700 9rem/1 var(--font-display); color: rgb(255 255 255 / .12); }
.overview-article .block-answer p { max-width: 62rem; color: #fff; }
.overview-article .block-answer a { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
.overview-article .block-text { counter-increment: guide; display: flex; flex-direction: column; margin: 0; padding: 1.6rem 1.6rem 1.7rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgb(46 39 34 / .45); }
.overview-article .block-text h2 { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font-size: clamp(1.3rem, 3.4vw, 1.65rem); line-height: 1.15; }
.overview-article .block-text h2::before { content: counter(guide); flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; border-radius: 50%; background: var(--peru-red); color: #fff; font: 700 1.1rem/1 var(--font-sans); }
.overview-article .block-text p:last-child { margin-bottom: 0; }
.overview-article .alert { padding: 1.4rem 1.5rem; border-radius: 1.4rem; background: linear-gradient(135deg, #fbe9c8, #fff6e4); box-shadow: 0 0 0 1px #ecd29a; }
.overview-article .alert strong { display: flex; align-items: center; gap: .6rem; }
.overview-article .alert strong::before { content: "▲"; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #b9770e; color: #fff; font-size: .8rem; }
@media (min-width: 62rem) {
  .overview-article article { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .overview-article article > .block-answer, .overview-article article > .faq, .overview-article article > .related { grid-column: 1 / -1; }
  .overview-article .block-text { padding: 2rem 2rem 2.1rem; }
}
@media (min-width: 62rem) {
  /* A last card left alone in its row takes the whole row */
  .card-hub-text .block-text:nth-child(odd):not(:has(~ .block-text)) { grid-column: 1 / -1; }
  .card-hub-text .block-text:nth-child(odd):not(:has(~ .block-text)) p { column-count: 2; column-gap: 3rem; }
}

/* Tailor-made page: the photo is shaded dark, not red; red stays on the button only */
.tailor-hero::before { background: linear-gradient(115deg, rgb(18 16 15 / .82), rgb(18 16 15 / .6) 50%, rgb(18 16 15 / .38)); }
.tailor-hero__card { background: rgb(24 20 18 / .55); }
.tailor-hero__kicker { color: #fff; }
.footer-tagline { font-style: italic; }

/* "Peru for…" guides: one row each, photo and text side by side, alternating left and right */
.guide-rows { display: grid; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.guide-row > a { display: grid; overflow: hidden; border-radius: 1.6rem; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 16px 34px -22px rgb(46 39 34 / .5); transition: transform .3s var(--ease), box-shadow .3s; }
.guide-row > a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 24px 44px -22px rgb(46 39 34 / .6); }
.guide-row > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.guide-row__photo { display: block; min-height: 13rem; background: var(--soft); }
.guide-row__photo img { display: block; width: 100%; height: 100%; max-height: 22rem; object-fit: cover; aspect-ratio: 3 / 2; }
.guide-row__text { display: grid; align-content: center; gap: .6rem; padding: 1.4rem 1.5rem 1.6rem; }
.guide-row__text strong { font: 700 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--font-display); text-wrap: balance; }
.guide-row__summary { line-height: 1.55; color: var(--ink-2); }
.guide-row__go { font-weight: 700; color: var(--accent); }
@media (min-width: 48rem) {
  .guide-rows { gap: 1.6rem; }
  .guide-row > a { grid-template-columns: 1fr 1fr; min-height: 17rem; }
  .guide-row__photo img { height: 100%; max-height: none; aspect-ratio: auto; }
  .guide-row:nth-child(even) .guide-row__photo { order: 2; }
  .guide-row__text { padding: 2rem 2.6rem; gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .guide-row > a:hover { transform: none; } }

/* Bigger menu in the header: a little larger from 1160px, larger still on wide screens (the English labels are longer, so the room is tighter there) */
@media (min-width: 1160px) {
  .nav a, .nav-group__toggle, .nav .nav-group__toggle { padding: 0 .62rem; font-size: 1rem; }
  .nav .nav-cta a { padding: 0 .9rem; }
}
@media (min-width: 1400px) {
  .nav a, .nav-group__toggle, .nav .nav-group__toggle { padding: 0 .85rem; font-size: 1.12rem; }
  .nav .nav-cta a { padding: 0 1.1rem; }
}
.tailor-hero__card { border: 0; box-shadow: 0 30px 60px -22px rgb(0 0 0 / .6); }

/* The destinations map: the name of each place beside its pin and the regions as tinted areas */
.map-pin--named .map-pin__label { left: calc(100% + 7px); padding: .2rem .45rem; font-size: .82rem; }
.map-area__name { padding: .18rem .65rem; border-radius: 99px; background: var(--area); color: #fff; font: 800 .74rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; box-shadow: 0 2px 8px rgb(0 0 0 / .3); }

/* "Where to go": the regions as tall photo cards that rise over the bottom of the hero. A row that
   scrolls sideways on a phone, five across on a wide screen. */
.dest-hero__cue { display: none; }
/* The hero buttons of the destinations page: the red of the other buttons */
.dest-hero__links .btn:not(.btn--glass) { background: var(--peru-red); color: #fff; }
.dest-hero__links .btn:not(.btn--glass):hover { background: #fff; color: var(--peru-red); }
/* The strip of tours above the footer sits closer to the end of the page (the page already ends with space) */
.footer-tours { margin-top: -2rem; }

/* ---- Search field in the home hero: opens the search card ---- */
.hero-search { display: flex; align-items: center; gap: .8rem; width: min(100%, 34rem); margin-top: 1.6rem; padding: 0 1.4rem; min-height: 3.6rem; border-radius: 99px; background: rgb(255 255 255 / .96); color: var(--ink-2); text-decoration: none; font-size: 1.1rem; box-shadow: 0 12px 34px rgb(0 0 0 / .28); transition: transform .2s var(--ease), box-shadow .2s; }
.hero-search svg { flex: none; color: var(--peru-red); }
.hero-search:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgb(0 0 0 / .34); color: var(--ink); }

/* Itineraries: the routes side by side in a table, under the cards. */
.itin-compare { margin-top: 2.5rem; }
.itin-compare h2 { margin: 0 0 1rem; }
.itin-compare__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.itin-compare table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.itin-compare th, .itin-compare td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.itin-compare thead th { font: 700 .72rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--line-strong); white-space: nowrap; }
.itin-compare tbody th { font-weight: 700; min-width: 13rem; }
.itin-compare tbody th a { color: var(--accent-deep); text-decoration: none; }
.itin-compare tbody th a:hover { text-decoration: underline; }
.itin-compare tbody tr:last-child > * { border-bottom: 0; }
.itin-compare tbody tr:hover { background: color-mix(in srgb, var(--peru-red) 5%, transparent); }
.itin-compare td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pace { display: inline-flex; gap: 3px; }
.pace i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--line-strong); }
.pace i.on { background: var(--peru-red); }

/* Machu Picchu, highlighted among the pills of its area in the Destinations submenu. */
.nav-group__panel .nav-area .is-featured a { border-color: var(--peru-red); background: var(--peru-red); color: #fff; font-weight: 700; }
.nav-group__panel .nav-area .is-featured a:hover, .nav-group__panel .nav-area .is-featured a:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }

/* The tailor-made banner in the right column: as wide as the column. */
.side-tours .tailor-mini { max-width: none; margin-top: 1rem; }

/* The sights marked on the map of a destination, as cards under the map. */
.map__sights-title { margin: 1.6rem 0 .8rem; font: 600 1.5rem/1.2 var(--font-display); }
.map__sights { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.sight__link { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
a.sight__link:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgb(46 39 34 / .45); }
.sight__photo { position: relative; display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #3a4720, #14705a); }
.sight__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sight__kind { position: absolute; left: .7rem; top: .7rem; padding: .2rem .6rem; border-radius: 99px; background: rgb(15 12 10 / .62); color: #fff; font: 700 .72rem/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.sight__body { display: grid; align-content: start; gap: .35rem; padding: .9rem 1rem 1rem; }
.sight__body strong { font: 700 1.15rem/1.2 var(--font-display); }
.sight__text { color: var(--ink-2); font-size: .94rem; line-height: 1.45; }
.sight__meta { color: var(--ink-2); font-size: .84rem; font-weight: 600; }
.sight__go { color: var(--accent-deep); font-weight: 700; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { a.sight__link { transition: none; } a.sight__link:hover { transform: none; } }

/* Under the title of an article: how long it takes to read and the button that reads it aloud. */
.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .9rem 0 0; color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.page-tools__time { display: inline-flex; align-items: center; gap: .35rem; }
.page-tools button { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--ink); font: 700 .82rem/1.2 var(--font-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.page-tools button[hidden] { display: none; }
.page-tools button:hover, .page-tools button:focus-visible { background: var(--peru-red); border-color: var(--peru-red); color: #fff; }
.page-tools__listen[aria-pressed="true"] { background: var(--peru-red); border-color: var(--peru-red); color: #fff; }

/* The Tours page ends with the tailor-made box: no wide empty band before the footer. */
.tours-page .tailor-cta-box { margin-bottom: 0; }
.tours-page .site-footer { margin-top: 1.2rem; }
.tours-page .wrap { padding-bottom: 1rem; }
/* On a phone the Tours page opens with the tours: the tailor-made box waits at the end. */
@media (max-width: 47.99rem) { .tours-page .page-title .tailor-mini { display: none; } }
/* The Ask button of the Tours page sits on the right, also when the box is narrow. */
.tours-page .tailor-cta__button { justify-self: end; }
/* On a phone and a tablet the footer menu is one wrapping line, its entries told apart by dots. */
@media (max-width: 61.99rem) {
  .site-footer__nav ul { align-items: center; gap: 0; }
  .site-footer__nav li { display: inline-flex; align-items: center; }
  .site-footer__nav li:not(:last-child)::after { content: "·"; color: rgb(255 255 255 / .7); font-size: 1.4rem; line-height: 1; }
  .site-footer__nav a { padding: 0 .55rem; }
}
/* The share button is the red of the footer, with a dark shadow so it stands out over the footer too. */
.float-btn--share { background: var(--peru-red); border-color: var(--peru-red); box-shadow: 0 2px 6px rgb(0 0 0 / .45), 0 10px 26px rgb(0 0 0 / .5); }
.float-btn--share:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* The guides hub (Peru for...): a plain title, the guides as a grid of cards, then the text as in any article. */
body.card-hub-page main { padding-top: calc(var(--header-h) + 2rem); }
.card-hub-head h1 { margin: 0 0 1.4rem; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.card-hub-head h1::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 1rem; border-radius: 99px; background: var(--accent); }
.card-hub-body__title { display: none; }
.card-hub-page .guide-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; }
.card-hub-page .guide-row > a { grid-template-columns: 1fr; min-height: 0; height: 100%; grid-template-rows: auto 1fr; border-radius: 1.3rem; }
.card-hub-page .guide-row__photo { min-height: 0; }
.card-hub-page .guide-row__photo img { height: auto; max-height: none; aspect-ratio: 3 / 2; }
.card-hub-page .guide-row:nth-child(even) .guide-row__photo { order: 0; }
.card-hub-page .guide-row__text { align-content: start; gap: .5rem; padding: 1.1rem 1.2rem 1.3rem; }
.card-hub-page .guide-row__text strong { font-size: 1.35rem; }
.card-hub-page .guide-row__summary { font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-hub-page .guide-row__go { margin-top: auto; padding-top: .3rem; }
.card-hub-article { padding-top: 3rem; }
/* The pinned offer on a phone: the title of the tour on up to two lines, larger and bolder. */
.sticky-offer__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font: 700 1.02rem/1.2 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
.sticky-offer__text { gap: .25rem; }
.sticky-offer img, .sticky-offer__icon { width: 4.4rem; }
.sticky-offer__link { gap: .7rem; }
.sticky-offer__title { font-size: .97rem; line-height: 1.2; }
.sticky-offer__meta { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.sticky-offer__cta { padding: 0 .9rem; }

/* The tailor-made offer just above the footer: no wide empty band under it. */
.before-footer .tailor-cta-box { margin-bottom: 0; }
.before-footer + .site-footer { margin-top: 1.5rem; }
/* The small tailor-made banner under the article on a phone (the right column has it on wide screens). */
.mobile-banner .tailor-mini { margin: 1.6rem 0; max-width: none; }
@media (min-width: 74rem) { .mobile-banner { display: none; } }
/* "Find hotels" buttons of the areas to sleep in: small, in the standard red, on the right also on a phone. */
.stay .btn, .stay-area__cta { width: auto; min-height: 2.5rem; padding: 0 1.1rem; background: var(--peru-red); border-color: var(--peru-red); color: #fff; font-size: .88rem; }
.stay .btn { margin-left: auto; }
.stay .btn:hover, .stay-area__cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
@media (max-width: 34rem) { .stay .btn { width: auto; } }

/* Areas to sleep in, written out in full: two cards across (three only where the page has the whole width), so the text has room. */
@media (min-width: 70rem) { .stay-areas { grid-template-columns: repeat(2, 1fr); } .wrap--full .stay-areas { grid-template-columns: repeat(3, 1fr); } }
.stay-area { padding: 1.2rem 1.4rem 1.3rem; }

/* Phones and tablets: the areas to sleep in on pages with a right column look like the cards of that column (red icon, name, reason, round arrow). */
@media (max-width: 73.99rem) {
  .page-layout--side .offers--stays .stay-list { gap: .5rem; }
  .page-layout--side .offers--stays .stay { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .95rem 1rem .95rem .95rem; border: 0; border-radius: 1.4rem; background: linear-gradient(135deg, #fff, #f4f2ef); box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(46 39 34 / .06), 0 14px 28px -10px rgb(139 29 26 / .3); }
  .page-layout--side .offers--stays .stay::before { content: ""; width: 3rem; height: 3rem; border-radius: 50%; background: var(--peru-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M12 4v6'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E") center / 1.5rem no-repeat; box-shadow: 0 6px 14px -4px rgb(139 29 26 / .6); }
  .page-layout--side .offers--stays .stay__text { flex-basis: auto; }
  .page-layout--side .offers--stays .stay h3 { font: 600 1.2rem/1.2 var(--font-display); }
  .page-layout--side .offers--stays .stay p { margin: .15rem 0 0; font-size: .84rem; }
  .page-layout--side .offers--stays .stay .btn { width: 2rem; min-height: 2rem; height: 2rem; padding: 0; margin: 0; border-radius: 50%; font-size: 0; }
  .page-layout--side .offers--stays .stay .btn::before { content: "→"; font-size: 1rem; font-weight: 700; line-height: 2rem; }
}

/* Phones: the tailor-made banner closes the page, so the page padding under it only adds a gap before the footer. */
@media (max-width: 73.99rem) {
  .wrap:has(> .mobile-banner:last-child) { padding-bottom: 0; }
  .wrap > .mobile-banner:last-child .tailor-mini { margin-bottom: 0; }
}

/* The search popup stays neutral: no salmon tints on the tags and on the "all results" row. */
.search-hit__kind { background: var(--soft); color: var(--ink-2); }
.search-hit--all a { background: var(--soft); }
.search-hit--all a:hover, .search-hit--all[aria-selected="true"] a { background: var(--line); }
.search-hit__all { color: var(--ink); }
.search-panel mark, .search-results mark { background: var(--line); }
@media (max-width: 73.99rem) {
  .wrap:has(.mobile-banner) { padding-bottom: 0; }
  .mobile-banner .tailor-mini { margin-bottom: 0; }
}

/* Detailed hotel areas (destination pages): the look of the hotel cards of the right column */
.stay-area { position: relative; padding: 1.2rem 1.3rem 1.3rem; border-radius: 1.4rem; background: linear-gradient(135deg, #fff, #f4f2ef); box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(46 39 34 / .06), 0 14px 28px -10px rgb(139 29 26 / .3); }
.stay-area::before { content: ""; width: 3rem; height: 3rem; border-radius: 50%; background: var(--peru-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M12 4v6'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E") center / 1.5rem no-repeat; box-shadow: 0 6px 14px -4px rgb(139 29 26 / .6); }
.stay-area h3 { font: 600 1.3rem/1.2 var(--font-display); }
.stay-area__note { background: rgb(255 255 255 / .7); }

/* The site name: a heavier PERU */
.brand__word { -webkit-text-stroke: .035em currentColor; paint-order: stroke fill; }

/* Booking's map under the hotel areas: phones and tablets only (the right column does the job on wide screens) */
.offers__phone-map { margin-top: 1rem; }
@media (min-width: 74rem) { .offers__phone-map { display: none; } }

/* FAQ: neutral grey and white, the red only on the open question */
.faq details[open] { box-shadow: 0 8px 22px -14px rgb(46 39 34 / .35); }
.faq summary::after { color: var(--ink); }

/* Home hero: taller, a bolder title on a deeper fade, and a search bar that reads as the main action */
.hero { min-height: min(calc(62svh - var(--header-h)), 30rem); }
.hero::after { background: linear-gradient(to top, rgb(20 14 10 / .86) 0%, rgb(20 14 10 / .45) 42%, rgb(20 14 10 / .1) 75%, rgb(20 14 10 / .25) 100%); }
.hero__inner { padding-bottom: clamp(2rem, 5svh, 3rem); }
.hero h1 { font-size: clamp(2.5rem, 9vw, 4.6rem); font-weight: 800; line-height: .98; letter-spacing: -.03em; text-shadow: 0 4px 28px rgb(0 0 0 / .45); text-wrap: balance; }
.hero h1::after { width: 5rem; height: 6px; background: var(--peru-red); }
.hero .lead { max-width: 34rem; font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.4; text-shadow: 0 2px 14px rgb(0 0 0 / .5); }
.hero-search { width: min(100%, 38rem); min-height: 4rem; margin-top: 2rem; padding-right: .5rem; font-size: 1.1rem; box-shadow: 0 18px 44px rgb(0 0 0 / .4); }
.hero-search::after { content: "→"; flex: none; margin-left: auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--peru-red); color: #fff; font-size: 1.3rem; font-weight: 700; transition: transform .25s var(--ease); }
.hero-search:hover::after { transform: translateX(4px); }

/* Phones, home: legible titles on busy photos, and the long lists of cards become swipeable rows */
@media (max-width: 43.99rem) {
  .tile::after, .entry-tile::after { background: linear-gradient(to top, rgb(20 14 10 / .9) 0%, rgb(20 14 10 / .55) 38%, rgb(20 14 10 / .08) 72%, transparent); }
  .tile h3 { font-size: 1.25rem; text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
  .tile:first-child h3 { font-size: 1.8rem; }
  .tile__go { top: auto; bottom: .8rem; right: .8rem; width: 2rem; height: 2rem; font-size: .9rem; background: rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .entry-tile__text strong { text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
  .home-wide .itin-cards { display: flex; gap: .8rem; margin-inline: calc(var(--gutter) * -1); padding: .4rem var(--gutter) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .home-wide .itin-cards::-webkit-scrollbar { display: none; }
  .home-wide .itin-card { flex: 0 0 82%; scroll-snap-align: start; }
  .home-wide .itin-card__photo img { aspect-ratio: 4 / 3; }
}

/* "Plan your trip": cards with the section name only, one per row on phones, with a deep soft shadow */
.entry-tile { min-height: 9rem; border-radius: 1.4rem; box-shadow: 0 2px 4px rgb(46 39 34 / .1), 0 14px 28px -8px rgb(46 39 34 / .45), 0 30px 50px -22px rgb(46 39 34 / .5); transition: transform .25s var(--ease), box-shadow .25s; }
.entry-tile:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgb(46 39 34 / .12), 0 20px 36px -8px rgb(46 39 34 / .5), 0 38px 60px -22px rgb(46 39 34 / .55); }
.entry-tile__text { padding: 1rem 1.2rem 1.1rem; }
.entry-tile__text strong { font-size: 1.5rem; font-weight: 700; }
@media (max-width: 43.99rem) {
  .entry-tiles { grid-template-columns: 1fr; gap: 1rem; padding-bottom: .6rem; }
  .entry-tile { min-height: 8.5rem; }
  .entry-tile__text strong { font-size: 1.6rem; }
}

@media (max-width: 43.99rem) {
  .hero__inner { text-align: center; }
  .hero h1::after { margin-inline: auto; }
  .hero .lead { margin-inline: auto; }
  .hero-search { margin-inline: auto; }
}

/* The tailor-made card closing a page on phones: no extra space under it before the footer */
.mobile-banner .tailor-cta-box { margin: 1.6rem 0 0; }

/* The other "Useful info" sections: smaller cards, two per row on phones */
.entry-subtitle { margin: 2rem 0 .9rem; font-size: 1.3rem; }
.entry-tiles--small { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.entry-tiles--small .entry-tile { min-height: 6.5rem; border-radius: 1.1rem; }
.entry-tiles--small .entry-tile__text { padding: .7rem .85rem .8rem; }
.entry-tiles--small .entry-tile__text strong { font-size: 1.1rem; }
@media (min-width: 52rem) { .entry-tiles--small { grid-template-columns: repeat(4, 1fr); } .entry-tiles--small .entry-tile { min-height: 8rem; } }
@media (max-width: 43.99rem) { .entry-tiles--small { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .entry-tiles--small .entry-tile { min-height: 6.5rem; } .entry-tiles--small .entry-tile__text strong { font-size: 1.1rem; } }

/* Search popup: a clearer panel, results as cards with a photo, a red accent on the selected one */
.search-panel { padding: 1.1rem; border-radius: 1.8rem; background: #fff; box-shadow: 0 40px 90px -20px rgb(20 14 10 / .55), 0 0 0 1px rgb(46 39 34 / .06); }
.search-form input { min-height: 3.8rem; border-radius: 1.2rem; border: 2px solid var(--line); background: #f6f4f1; font-size: 1.1rem; font-weight: 500; }
.search-form input:focus { background: #fff; border-color: var(--peru-red); box-shadow: 0 0 0 4px rgb(168 15 32 / .12); }
.search-form__go { min-height: 3.8rem; border-radius: 1.2rem; }
.search-panel [role="listbox"] { display: grid; gap: .4rem; margin-top: .9rem; }
.search-panel li a { gap: 1rem; padding: .6rem .8rem .6rem .6rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .15s var(--ease), box-shadow .15s, background .15s; }
.search-panel li[aria-selected="true"] a, .search-panel li a:hover { background: #fff; box-shadow: 0 0 0 2px var(--peru-red), 0 10px 22px -10px rgb(46 39 34 / .4); transform: translateX(2px); }
.search-hit__photo { width: 3.6rem; height: 3.6rem; border-radius: 1rem; }
.search-hit__title { font-size: 1.2rem; }
.search-hit__kind { background: #f1efec; color: var(--ink-2); }
.search-hit--all a { background: var(--peru-red); box-shadow: none; }
.search-hit--all a:hover, .search-hit--all[aria-selected="true"] a { background: #7f0b18; box-shadow: none; transform: none; }
.search-hit__all { color: #fff; }
.search-start__label { padding-left: .2rem; color: var(--ink); }
.search-panel .search-popular a { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgb(46 39 34 / .35); }
.search-panel .search-popular a:hover { box-shadow: 0 0 0 1px var(--line), 0 16px 30px -12px rgb(46 39 34 / .5); }
.search-start__chips a { background: #f6f4f1; }
.search-panel__hint { border-top-color: var(--line); }
/* Nine small cards: three per row on wide screens, and the odd last one spans the row on phones */
@media (min-width: 52rem) { .entry-tiles--small { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 43.99rem) { .entry-tiles--small > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Search popup, softer: shadows instead of outlines */
.search-panel { box-shadow: 0 50px 100px -24px rgb(20 14 10 / .6), 0 18px 40px -18px rgb(20 14 10 / .35); }
.search-form input { border: 0; background: #f3f1ee; box-shadow: inset 0 2px 6px rgb(46 39 34 / .08); }
.search-form input:focus { background: #fff; border: 0; box-shadow: 0 10px 26px -10px rgb(46 39 34 / .45), 0 0 0 3px rgb(168 15 32 / .1); }
.search-panel li a { background: #fff; box-shadow: 0 6px 16px -10px rgb(46 39 34 / .4); }
.search-panel li[aria-selected="true"] a, .search-panel li a:hover { background: #fff; box-shadow: 0 16px 32px -12px rgb(46 39 34 / .5), inset 4px 0 0 var(--peru-red); transform: translateY(-1px); }
.search-hit__photo { box-shadow: 0 6px 14px -6px rgb(46 39 34 / .45); }
.search-hit__kind { background: transparent; padding: 0; color: var(--ink-2); }
.search-panel .search-popular a { background: #fff; box-shadow: 0 10px 22px -12px rgb(46 39 34 / .5); }
.search-panel .search-popular a:hover { box-shadow: 0 20px 36px -14px rgb(46 39 34 / .6); }
.search-start__chips a { background: #fff; box-shadow: 0 6px 14px -8px rgb(46 39 34 / .5); }
.search-start__chips a:hover { box-shadow: 0 10px 20px -8px rgb(139 29 26 / .6); }
.search-panel__hint { border-top: 0; }

/* Home, "Trekking" band: a deep night panel with tall rounded cards, big shadows and a lift on hover */
.home-band { position: relative; overflow: hidden; padding: 3.2rem 0 3.6rem; background: radial-gradient(120% 90% at 85% 0%, #5a2a22 0%, transparent 55%), linear-gradient(160deg, #2c2420, #1a1411); }
.home-band::before { content: ""; position: absolute; inset: auto 0 0; height: 7rem; background: linear-gradient(to top, rgb(0 0 0 / .35), transparent); pointer-events: none; }
.home-band .home-block__title { font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; }
.home-band .home-block__title::after { content: ""; display: block; width: 3.4rem; height: 5px; margin-top: .6rem; border-radius: 99px; background: var(--peru-red); }
.home-band .home-block__all { padding: .5rem 1.1rem; border-radius: 99px; background: rgb(255 255 255 / .12); text-decoration: none; transition: background .2s; }
.home-band .home-block__all:hover { background: var(--peru-red); text-decoration: none; }
.pick-cards { gap: 1.1rem; padding-bottom: .4rem; }
.pick-card { min-height: 21rem; border-radius: 1.8rem; background: #2a231f; box-shadow: 0 2px 4px rgb(0 0 0 / .3), 0 18px 34px -10px rgb(0 0 0 / .65), 0 40px 60px -26px rgb(0 0 0 / .7); transition: transform .3s var(--ease), box-shadow .3s; }
.pick-card:hover { transform: translateY(-8px); box-shadow: 0 4px 8px rgb(0 0 0 / .35), 0 26px 44px -10px rgb(0 0 0 / .75), 0 56px 80px -28px rgb(168 15 32 / .45); }
.pick-card::after { background: linear-gradient(to top, rgb(14 9 6 / .94) 0%, rgb(14 9 6 / .55) 38%, rgb(14 9 6 / .05) 70%, rgb(14 9 6 / .25) 100%); }
.pick-card::before { content: "→"; position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--peru-red); color: #fff; font-weight: 700; box-shadow: 0 8px 18px -4px rgb(168 15 32 / .7); transition: transform .3s var(--ease); }
.pick-card:hover::before { transform: translateX(3px) rotate(-45deg); }
.pick-card__text { gap: .45rem; padding: 1.3rem 1.3rem 1.4rem; }
.pick-card__text a { font-size: 1.45rem; font-weight: 700; line-height: 1.15; text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
.pick-card__text span { font-size: .9rem; -webkit-line-clamp: 3; }
@media (min-width: 62rem) { .pick-card { min-height: 25rem; } }
@media (max-width: 43.99rem) { .home-band .pick-card { min-height: 17rem; } }

/* Search popup, richer cards: popular pages as photo cards with the title on the photo, bigger result rows */
.search-panel .search-popular { gap: .8rem; }
.search-panel .search-popular a { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 8.5rem; padding: 0; overflow: hidden; border-radius: 1.3rem; background: var(--night); color: #fff; box-shadow: 0 14px 26px -12px rgb(20 14 10 / .6); transition: transform .25s var(--ease), box-shadow .25s; }
.search-panel .search-popular a:hover { background: var(--night); transform: translateY(-4px); box-shadow: 0 22px 38px -14px rgb(20 14 10 / .7); }
.search-panel .search-popular a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 9 6 / .88), rgb(14 9 6 / .25) 60%, transparent); }
.search-panel .search-popular .search-popular__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transition: transform .6s var(--ease); }
.search-panel .search-popular a:hover .search-popular__photo { transform: scale(1.07); }
.search-panel .search-popular .search-popular__text { padding: .8rem .9rem .85rem; }
.search-panel .search-popular .search-popular__title { color: #fff; font-size: 1.1rem; text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
.search-panel .search-popular .search-popular__kind { color: rgb(255 255 255 / .85); }
.search-panel li a { padding: .7rem .9rem .7rem .7rem; border-radius: 1.3rem; background: linear-gradient(135deg, #fff, #f6f4f1); }
.search-hit__photo { width: 4.2rem; height: 4.2rem; border-radius: 1.1rem; }
.search-hit__title { font-size: 1.25rem; }
.search-hit__summary { -webkit-line-clamp: 2; }
.search-start__chips a { min-height: 2.7rem; padding: 0 1.2rem; font-size: 1rem; }
@media (max-width: 560px) { .search-panel .search-popular a { min-height: 7.5rem; } }

/* Search popup: the submit button is a magnifying glass, not a word */
.search-form__go { display: grid; place-items: center; width: 3.8rem; min-width: 3.8rem; padding: 0; box-shadow: 0 10px 20px -8px rgb(168 15 32 / .7); }
.search-form__clear { right: 4.9rem; }
@media (max-width: 560px) { .search-form__go { display: grid; width: 3.4rem; min-width: 3.4rem; min-height: 3.4rem; } .search-form__clear { right: 4.4rem; } .search-form input { min-height: 3.4rem; padding-right: 3.2rem; } }

/* A map with several treks: one line per trek, named under the map */
.map__trail-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.map__trail-legend li { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.map__trail-legend small { color: var(--ink-2); font-weight: 400; }
.map__trail-swatch { flex: none; width: 1.6rem; height: .35rem; border-radius: 99px; }

/* Tour cards inside the articles and in the footer strip: one per row on a phone. */
@media (max-width: 699px) { .offers--tours .offer-list, .footer-tours .offer-list { grid-template-columns: 1fr; } }

/* The Listen and Stop buttons are bigger on a phone, easier to tap. */
@media (max-width: 699px) {
  .page-tools button { gap: .5rem; min-height: 2.8rem; padding: .5rem 1.3rem; font-size: 1rem; }
  .page-tools button svg { width: 1.3rem; height: 1.3rem; }
}

/* Sticky banner on a phone: a smaller title in normal case, the subtitle on up to two lines. */
.sticky-offer__title { font-size: .9rem; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.sticky-offer__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: clip; overflow: hidden; }

/* A shadow lifts the sticky banner off the page, also over the white strip an iPhone adds below it. */
.sticky-offer { box-shadow: 0 -4px 6px rgb(46 39 34 / .1), 0 -10px 26px rgb(46 39 34 / .28), inset 0 -10px 10px -8px rgb(46 39 34 / .45); }  /* the last one darkens the bottom edge, over the white strip under the banner on an iPhone */

/* "Back to top" stays hidden until the page has been scrolled: display:grid of the round buttons would otherwise beat the hidden attribute. */
.float-btn[hidden] { display: none; }

/* Tailor-made page: on a phone the title is the short "Tailor-made trip" and the kicker above it is not repeated. */
.tailor-hero__title-short { display: none; }
@media (max-width: 47.99rem) {
  .tailor-hero__title-long, .tailor-hero__kicker { display: none; }
  .tailor-hero__title-short { display: inline; }
}

/* Home: the "Tailor-made trip" card has no photo, only the brand red and a compass. */
.entry-tile--tailor { background: linear-gradient(135deg, var(--peru-red), #5f1412); }
.entry-tile--tailor::after { display: none; }
.entry-tile--tailor > svg { position: absolute; top: 1rem; right: 1.1rem; opacity: .9; }

/* Home: the useful info as round icons with a short label. */
.info-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem .5rem; margin: 0; padding: 0; list-style: none; }
.info-icons a { display: grid; justify-items: center; gap: .5rem; color: var(--ink); text-decoration: none; text-align: center; }
.info-icons__icon { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #fff; color: var(--peru-red); box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgb(46 39 34 / .06), 0 12px 22px -10px rgb(139 29 26 / .35); transition: transform .25s var(--ease), background .2s, color .2s; }
.info-icons a:hover .info-icons__icon, .info-icons a:focus-visible .info-icons__icon { transform: translateY(-3px); background: var(--peru-red); color: #fff; }
.info-icons__label { font: 700 .88rem/1.2 var(--font-sans); text-wrap: balance; }
@media (min-width: 44rem) { .info-icons { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 62rem) { .info-icons { grid-template-columns: repeat(9, 1fr); } .info-icons__label { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .info-icons__icon { transition: none; } .info-icons a:hover .info-icons__icon { transform: none; } }

/* The cards of the destinations: only the name, in capitals. */
.dest-mag__name, .dest-mag__item--lead .dest-mag__name { font: 700 1.05rem/1.15 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 14px rgb(0 0 0 / .5); }
.dest-mag__item--lead .dest-mag__name { font-size: 1.35rem; }

/* Destinations page, polish: an opening with room to breathe, headings with a red bar, destination cards with the same shadows and alternate corners as the zone cards. */
.dest-body { padding-top: 2.4rem; }
.dest-title { position: relative; margin: 0 0 .7rem; padding-top: 1.1rem; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.04; }
.dest-title::before { content: ""; position: absolute; top: 0; left: 0; width: 3.2rem; height: 5px; border-radius: 99px; background: var(--peru-red); }
.dest-region { padding: 3.2rem 0 3.6rem; }
.dest-region__head { position: relative; margin: 0 0 1.8rem; padding: 0 0 0 1.1rem; border-bottom: 0; }
.dest-region__head::before { content: ""; position: absolute; top: .25rem; bottom: .25rem; left: 0; width: 5px; border-radius: 99px; background: var(--peru-red); }
.dest-region__head h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.dest-region__head p { font-size: 1.05rem; }
.dest-mag { gap: .9rem; }
.dest-mag__item:nth-child(odd) { border-radius: 1.8rem .6rem 1.8rem .6rem; }
.dest-mag__item:nth-child(even) { border-radius: .6rem 1.8rem .6rem 1.8rem; }
.dest-mag__item { box-shadow: 0 3px 6px rgb(15 12 10 / .14), 0 16px 26px -12px rgb(15 12 10 / .55); transition: transform .4s var(--ease), box-shadow .4s; }
.dest-mag__item:hover { transform: translateY(-4px); box-shadow: 0 5px 10px rgb(15 12 10 / .16), 0 24px 36px -14px rgb(139 29 26 / .55); }
.dest-mag__body { padding: 1.1rem 1.2rem 1.2rem; }
.dest-mag__name::before { content: ""; display: block; width: 1.6rem; height: 3px; margin-bottom: .5rem; border-radius: 99px; background: #fff; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .dest-mag__item, .dest-mag__item:hover { transition: none; transform: none; } }

/* Destination cards: never very tall. The first one is two rows high at most, the others one row; on a phone they are low strips. */
.dest-mag__item { min-height: 10rem; }
.dest-mag__item--lead { min-height: 14rem; }
@media (min-width: 48rem) {
  .dest-mag { grid-auto-rows: 11rem; }
  .dest-mag__item--lead { grid-row: span 2; }
  .dest-mag__item--lead + .dest-mag__item:last-child { grid-row: span 1; }
  .dest-mag__item--solo { grid-row: span 1; }
}

/* Destinations: one full-width section per area. The photo of the area fills the background and moves slower than the page; the destinations stand in front on glass cards. */
.dest-mapsection { padding-top: 0; scroll-margin-top: calc(var(--header-h) + 5.5rem); }  /* a link to #map stops just above the map, clear of the header and the strip */
.dest-mapsection .wrap { padding-block: 1.6rem 0; }
.dest-mapsection h2 { margin: 0 0 1.2rem; font: 700 clamp(1.7rem, 4vw, 2.4rem)/1.1 var(--font-display); }
.dest-mapsection .map { width: 100%; height: min(70svh, 40rem); border-radius: 0; }
.dest-mapsection .map__canvas { height: 100%; border: 0; border-radius: 0; }
.dest-mapsection .map:fullscreen { height: 100%; }

/* The description of an area: a box on the right of its photo; under it the destinations as photo cards. */
.dest-tile-wrap { padding-block: 1.6rem 3rem; }
.dest-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dest-tile a { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 1rem; background: var(--night); color: #fff; text-decoration: none; }
.dest-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dest-tile a:hover img { transform: scale(1.06); }
.dest-tile a::before { content: ""; position: absolute; z-index: 1; inset: 0; background: rgb(20 14 10 / .42); }
.dest-tile__name { position: relative; z-index: 2; padding: 1rem 1.2rem; text-align: center; text-transform: uppercase; font: 700 clamp(1.4rem, 2.2vw, 1.8rem)/1.05 var(--font-display); text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / .5); }
@media (prefers-reduced-motion: reduce) { .dest-tile img { transition: none; } }

/* Cards: rounded corners that alternate, each with its shadow. */
.dest-tile a { box-shadow: 0 3px 6px rgb(15 12 10 / .14), 0 16px 26px -12px rgb(15 12 10 / .55); transition: transform .4s var(--ease), box-shadow .4s; }
.dest-tile a:hover { transform: translateY(-4px); box-shadow: 0 5px 10px rgb(15 12 10 / .16), 0 24px 36px -14px rgb(15 12 10 / .6); }
.dest-tile a { border-radius: 1.8rem .6rem 1.8rem .6rem; }
@media (prefers-reduced-motion: reduce) { .dest-tile a, .dest-tile a:hover { transition: none; transform: none; } }
.dest-tile-title { margin: 0 0 1.2rem; font: 800 clamp(1.2rem, 2.4vw, 1.6rem)/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }


/* An area: its photo with the title on the left, its map on the right; under them the description and the destinations. */
/* A soft shadow at the top of each area separates it from the one above. */
.dest-area { position: relative; padding-top: 3.2rem; padding-bottom: 1rem; }
.dest-area::before { content: ""; position: absolute; inset: 0 0 auto; height: 3.2rem; background: linear-gradient(rgb(15 12 10 / 0), rgb(15 12 10 / .28)); pointer-events: none; }
.dest-area__top { display: grid; gap: 0; }
.dest-area__photo { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 22rem; overflow: hidden; background: var(--night); color: #fff; }
.dest-area__photo img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest-area__photo::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(15 12 10 / .7), rgb(15 12 10 / 0) 65%); }
.dest-area__head { padding: 1.6rem; }
.dest-area__head h2 { margin: 0; font: 700 clamp(2rem, 5vw, 3.4rem)/1.02 var(--font-display); text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .45); }
.dest-area__head p { max-width: 30rem; margin: .6rem 0 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.4; color: rgb(255 255 255 / .94); text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.dest-area__map, .dest-area__map .map { height: 100%; }
.dest-area__map .map { width: 100%; min-height: 20rem; border-radius: 0; overflow: hidden; }
.dest-area__map .map__canvas { height: 100%; min-height: 20rem; border: 0; border-radius: 0; }
.dest-area__about { display: grid; gap: 1rem; padding-block: 2rem 0.4rem; }
.dest-area__about p { margin: 0; max-width: 60rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.6; color: var(--ink); }
.dest-area__about a { font-weight: 800; color: var(--accent-deep); text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 52rem) {
  .dest-area__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dest-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dest-area__photo { min-height: 30rem; }
}

.map-card--link { cursor: pointer; }

/* The quick links: a red strip, darker at the bottom, under the header, sticky, a little taller than the words, with large white words, underlined when hovered; on a phone one row that slides sideways. */
.dest-filter { position: sticky; top: var(--header-h); z-index: 5; margin: 0; padding-block: .4rem; background: linear-gradient(180deg, var(--peru-red), #4a060f); }
.dest-filter__inner { display: flex; padding-block: 0; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.dest-filter__inner::-webkit-scrollbar { display: none; }
.dest-filter .chip { flex: none; white-space: nowrap; padding: .3rem clamp(.3rem, 1.8vw, .95rem) .25rem; border: 0; border-radius: 0; background: transparent; color: #fff; font: 800 clamp(.68rem, 2.9vw, 1.05rem)/1.05 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s; }
.dest-filter .chip:hover, .dest-filter .chip:focus-visible, .dest-filter .chip[aria-current="true"] { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 #fff; }
/* On a phone the five words always fit on one row, even the longest ones (Polish), by shrinking with the screen; the row still slides sideways as a last resort. */
@media (max-width: 51.99rem) { .dest-filter__inner { justify-content: space-between; gap: 0; } }
@media (min-width: 52rem) { .dest-filter__inner { flex-wrap: wrap; justify-content: center; gap: .2rem 1rem; } .dest-filter .chip { font-size: 1.15rem; letter-spacing: .08em; } }
/* No shadow band between the strip and the first area. */
.dest-area:first-of-type::before { display: none; }
.dest-area:first-of-type { padding-top: 0; }
.dest-area { scroll-margin-top: calc(var(--header-h) + 2rem); }
.dest-filter .chip { text-decoration: none; }

/* The destinations page shows the tours in its right column from this width on, so the strip at the foot stays for phones and tablets only. */
@media (min-width: 74rem) { .footer-tours--phones { display: none; } }

/* Icons in the destinations submenu of the mobile drawer: regions, map, and one identical pin for every destination */
.menu__group ul a .menu__sub-icon { flex: none; width: 1.3rem; height: 1.3rem; }

/* Home: the main cards are big and inviting (three above, two below on wide screens), and the tailor-made trip is a banner under them. */
.entry-tiles--main { grid-template-columns: 1fr; gap: 1.1rem; }
.entry-tiles--main .entry-tile { min-height: 13rem; border-radius: 1.8rem; box-shadow: 0 2px 4px rgb(46 39 34 / .12), 0 18px 34px -10px rgb(46 39 34 / .5), 0 40px 60px -26px rgb(46 39 34 / .55); }
.entry-tiles--main .entry-tile::after { background: linear-gradient(to top, rgb(14 9 6 / .9) 0%, rgb(14 9 6 / .45) 40%, rgb(14 9 6 / .05) 72%, rgb(14 9 6 / .2) 100%); }
.entry-tiles--main .entry-tile::before { content: "→"; position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--peru-red); color: #fff; font-size: 1.2rem; transition: transform .3s var(--ease); }
.entry-tiles--main .entry-tile:hover { transform: translateY(-6px); }
.entry-tiles--main .entry-tile:hover::before { transform: translateX(3px) rotate(-45deg); }
.entry-tiles--main .entry-tile__text { padding: 1.4rem 1.5rem 1.5rem; }
.entry-tiles--main .entry-tile__text strong { font-size: 1.9rem; font-weight: 700; line-height: 1.1; text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
@media (min-width: 52rem) {
  .entry-tiles--main { grid-template-columns: repeat(6, 1fr); gap: 1.3rem; }
  .entry-tiles--main > li { grid-column: span 2; }
  .entry-tiles--main > li:nth-child(n+4) { grid-column: span 3; }
  .entry-tiles--main .entry-tile { height: 100%; min-height: 20rem; }
  .entry-tiles--main > li:nth-child(n+4) .entry-tile { min-height: 17rem; }
  .entry-tiles--main .entry-tile__text strong { font-size: 2.3rem; }
}
.tailor-banner { display: flex; align-items: center; gap: 1rem; margin-top: 1.3rem; padding: 1.4rem 1.6rem; border-radius: 1.8rem; background: linear-gradient(135deg, var(--peru-red), #5f1412); color: #fff; text-decoration: none; box-shadow: 0 18px 34px -12px rgb(139 29 26 / .6); transition: transform .25s var(--ease); }
.tailor-banner:hover { transform: translateY(-3px); color: #fff; }
.tailor-banner svg { flex: none; }
.tailor-banner strong { flex: 1; font: 700 1.6rem/1.15 var(--font-display); }
.tailor-banner__go { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; color: var(--peru-red); font-size: 1.3rem; }
@media (min-width: 52rem) { .tailor-banner { padding: 1.9rem 2.2rem; } .tailor-banner strong { font-size: 2.2rem; } }

/* Home: the strip of traveller types (couples, families, solo...), photo cards that scroll sideways */
.traveller-strip { display: flex; gap: .9rem; margin: 0 calc(var(--gutter) * -1); padding: .4rem var(--gutter) 1rem; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: none; }
.traveller-strip::-webkit-scrollbar { display: none; }
.traveller { position: relative; isolation: isolate; display: flex; align-items: flex-end; flex: none; width: 9.5rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1.4rem; background: var(--night); color: #fff; text-decoration: none; scroll-snap-align: start; box-shadow: 0 14px 28px -10px rgb(46 39 34 / .5); transition: transform .25s var(--ease); }
.traveller img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.traveller::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 9 6 / .88), rgb(14 9 6 / .1) 65%); }
.traveller:hover { transform: translateY(-4px); color: #fff; }
.traveller__name { padding: .8rem .9rem; font: 700 1.05rem/1.15 var(--font-display); text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
@media (min-width: 62rem) { .traveller { width: 12.5rem; } .traveller__name { font-size: 1.2rem; } }

/* Home: the strip of tours keeps its distance from the featured cards above it */
body.home-page .footer-tours { margin-top: 2.5rem; }

/* Home, Featured: three cards per row on wide screens */
@media (min-width: 62rem) { .entries--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Home: popular-place cards with alternating rounded corners and shadows per card; all titles in capitals and centred. */
.home-explore .tile { border-radius: 1.8rem .6rem 1.8rem .6rem; box-shadow: 8px 10px 22px -8px rgb(15 12 10 / .55), 0 3px 6px rgb(15 12 10 / .14); transition: transform .4s var(--ease), box-shadow .4s; }
.home-explore .tile:nth-child(even) { border-radius: .6rem 1.8rem .6rem 1.8rem; box-shadow: -8px 10px 22px -8px rgb(15 12 10 / .55), 0 3px 6px rgb(15 12 10 / .14); }
.home-explore .tile:hover { transform: translateY(-4px); }
.tile__body, .tile p { text-align: center; }
.tile h3, .tile:first-child h3 { text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.tile p { margin-inline: auto; }
.entry-tiles--main .entry-tile { justify-content: center; align-items: center; }
.entry-tiles--main .entry-tile__text { text-align: center; }
.entry-tiles--main .entry-tile__text strong { text-transform: uppercase; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { .home-explore .tile, .home-explore .tile:hover { transition: none; transform: none; } }

/* Home: titles are back to normal case (still centred); the popular-place cards are all the same size, with a hover zoom, an arrow and a soft glow. */
.tile h3, .tile:first-child h3, .entry-tiles--main .entry-tile__text strong { text-transform: none; letter-spacing: 0; }
.home-explore .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 12.5rem; gap: 1rem; }
.home-explore .tile:first-child { grid-column: auto; grid-row: auto; }
.home-explore .tile:last-child:nth-child(even) { grid-column: auto; }
.home-explore .tile { align-items: center; }
.home-explore .tile h3, .home-explore .tile:first-child h3 { font: 700 1.5rem/1.15 var(--font-display); text-shadow: 0 2px 14px rgb(0 0 0 / .6); }
.home-explore .tile p, .home-explore .tile:first-child p { display: none; }
.home-explore .tile::after { background: linear-gradient(to top, rgb(14 9 6 / .78) 0%, rgb(14 9 6 / .3) 55%, rgb(14 9 6 / .12) 100%); }
.home-explore .tile:hover img { transform: scale(1.08); }
.home-explore .tile::before { content: "→"; position: absolute; z-index: 2; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--peru-red); color: #fff; transition: transform .3s var(--ease); }
.home-explore .tile:hover::before { transform: translateX(3px) rotate(-45deg); }
@media (min-width: 62rem) { .home-explore .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 14rem; } }

/* Home: the "Nearby" strip, shown by nearby.js for visitors who already shared their position */
.nearby[hidden] { display: none; }
.nearby__strip { display: flex; gap: .9rem; margin: 0 calc(var(--gutter) * -1); padding: .4rem var(--gutter) 1rem; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: none; }
.nearby__strip::-webkit-scrollbar { display: none; }
.nearby__card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; flex: none; width: 11rem; aspect-ratio: 4 / 5; overflow: hidden; padding: .9rem; border-radius: 1.4rem; background: var(--night); color: #fff; text-decoration: none; scroll-snap-align: start; box-shadow: 0 14px 28px -10px rgb(46 39 34 / .5); transition: transform .25s var(--ease); }
.nearby__card:hover { transform: translateY(-4px); color: #fff; }
.nearby__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.nearby__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 9 6 / .88), rgb(14 9 6 / .1) 65%); }
.nearby__card strong { font: 700 1.1rem/1.15 var(--font-display); text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
.nearby__card span { margin-top: .2rem; font-size: .85rem; color: rgb(255 255 255 / .9); }

.home-explore__map .map:fullscreen { height: 100%; }

/* Home map: the pin of the destination card under the mouse */
.map-pin--hover { z-index: 4; background: var(--night); box-shadow: 0 0 0 7px rgb(184 57 43 / .55), 0 0 0 14px rgb(184 57 43 / .22), 0 2px 8px rgb(0 0 0 / .45); }

/* The search card is frosted glass: a see-through surface that blurs what is behind it */
.search-panel { background: color-mix(in srgb, var(--surface) 58%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 30px 70px rgb(46 39 34 / .32), 0 0 0 1px rgb(255 255 255 / .45), inset 0 1px 0 rgb(255 255 255 / .55); }
.search-panel li[aria-selected="true"] a, .search-panel li a:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }

.search-page__form button { display: inline-flex; align-items: center; gap: .5rem; }

/* Home: the strip of regions, big modern photo cards with a frosted label; it scrolls sideways when it does not fit. */
.region-strip { display: flex; gap: 1.1rem; margin: 0 calc(var(--gutter) * -1); padding: .4rem var(--gutter) 1.4rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.region-strip::-webkit-scrollbar { display: none; }
.region-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; flex: none; width: 78vw; max-width: 21rem; aspect-ratio: 3 / 4; overflow: hidden; padding: .8rem; border-radius: 2rem; background: var(--night); color: #fff; text-decoration: none; scroll-snap-align: start; box-shadow: 0 24px 40px -18px rgb(46 39 34 / .65); transition: transform .35s var(--ease), box-shadow .35s; }
.region-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.region-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 9 6 / .55), transparent 45%); }
.region-card:hover { transform: translateY(-8px); color: #fff; box-shadow: 0 34px 50px -20px rgb(46 39 34 / .75); }
.region-card:hover img { transform: scale(1.08); }
.region-card__label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: .9rem 1rem .9rem 1.3rem; border-radius: 1.4rem; background: rgb(255 255 255 / .2); border: 1px solid rgb(255 255 255 / .35); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); font: 700 1.35rem/1.15 var(--font-display); text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.region-card__go { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--peru-red); font-size: 1.15rem; text-shadow: none; transition: transform .3s var(--ease); }
.region-card:hover .region-card__go { transform: translateX(3px) rotate(-45deg); }
@media (min-width: 62rem) { .region-card { width: 19.5rem; max-width: none; } .region-card__label { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .region-card, .region-card img, .region-card__go { transition: none; } }

/* Home map on the full screen: names beside the pins, bigger pins, no rounded frame. */
.map-pin__label--full { display: none; }
.map:fullscreen .map-pin__label--full { display: block; }
.home-explore__map .map:fullscreen { border-radius: 0; }
.home-explore__map .map:fullscreen .map-pin { width: 20px; height: 20px; }
/* A region link lands with the photo of the region just under the quick-links strip (the soft shade before it is hidden behind the strip). */

/* Home, regions: polaroid variant - a white frame, the photo, the name written underneath, each card tilted a little the other way. */
.region-strip { padding-top: 1.4rem; padding-bottom: 2rem; }
.region-card { flex-direction: column; align-items: stretch; aspect-ratio: auto; width: 17rem; max-width: none; padding: .85rem .85rem 0; border-radius: .5rem; background: #fbf8f3; color: var(--night); box-shadow: 0 22px 36px -14px rgb(0 0 0 / .7), 0 2px 4px rgb(0 0 0 / .3); transform: rotate(-2deg); }
.region-strip li:nth-child(even) .region-card { transform: rotate(1.8deg); }
.region-strip li:nth-child(3n) .region-card { transform: rotate(-1deg); }
.region-card::after { display: none; }
.region-card__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night); }
.region-card img { position: static; z-index: auto; display: block; }
.region-card__label { display: block; width: auto; padding: 1rem .5rem 1.2rem; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--night); text-align: center; text-shadow: none; font: 700 1.45rem/1.1 var(--font-display); }
.region-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); color: var(--night); z-index: 2; }
.region-strip li:nth-child(n) .region-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); }
@media (min-width: 62rem) { .region-card { width: 18rem; } .region-card__label { font-size: 1.6rem; } }
@media (max-width: 61.99rem) { .region-card { width: 72vw; max-width: 17rem; } }

/* Home: the main cards have no red arrow button. */
.entry-tiles--main .entry-tile::before { display: none; }

/* Home hero search: the lens sits in the red round button, not in the field. */
.hero-search::after { display: none; }
.hero-search svg { order: 2; width: 3rem; height: 3rem; margin-left: auto; padding: .8rem; box-sizing: border-box; border-radius: 50%; background: var(--peru-red); color: #fff; transition: transform .25s var(--ease); }
.hero-search:hover svg { color: #fff; transform: scale(1.08); }

/* Home, regions band: brand red fading into a dark red. */
.home-band--regions { background: linear-gradient(160deg, var(--peru-red) 0%, #6d0f1a 55%, #2a0509 100%); }

/* Home, popular places: the cards have no arrow buttons (neither the red one nor the grey one). */
.home-explore .tile::before, .home-explore .tile__go { display: none; }

/* Dots under a strip that scrolls sideways (phones only; the whole strip fits on a wide screen) */
.strip-dots { display: flex; justify-content: center; gap: .55rem; margin-top: -.6rem; }
.strip-dots button { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 99px; background: rgb(255 255 255 / .38); cursor: pointer; transition: width .25s var(--ease), background .25s; }
.strip-dots button.is-current { width: 1.6rem; background: #fff; }
@media (min-width: 62rem) { .strip-dots { display: none; } }

/* Sideways strips: a dark gradient with an arrow at each end that has more to scroll to */
.strip-frame { position: relative; }
.strip-edge { position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center; width: 4.2rem; padding: 0 .6rem; border: 0; color: #fff; font-size: 1.7rem; font-weight: 700; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s; }
.strip-edge.is-visible { opacity: 1; pointer-events: auto; }
.strip-edge--prev { left: calc(var(--gutter) * -1); justify-content: flex-start; background: linear-gradient(to right, rgb(32 4 8 / .9), transparent); }
.strip-edge--next { right: calc(var(--gutter) * -1); justify-content: flex-end; background: linear-gradient(to left, rgb(32 4 8 / .9), transparent); }
.strip-edge--prev::before { content: "‹"; }
.strip-edge--next::before { content: "›"; }
.strip-edge::before { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); line-height: 1; padding-bottom: .15rem; box-sizing: border-box; }
@media (max-width: 61.99rem) { .strip-edge { width: 3rem; } .strip-edge::before { width: 2rem; height: 2rem; font-size: 1.4rem; } }

/* Home, regions band: light grey instead of red; title, edges and dots follow it. */
.home-band--regions { background: #ece9e4; color: var(--ink); }
.home-band--regions .home-block__title, .home-band--regions .home-block__all { color: var(--ink); }
.home-band--regions .region-card { box-shadow: 0 18px 30px -14px rgb(46 39 34 / .45), 0 2px 4px rgb(46 39 34 / .2); }
.home-band--regions .strip-edge--prev { background: linear-gradient(to right, #ece9e4 15%, transparent); }
.home-band--regions .strip-edge--next { background: linear-gradient(to left, #ece9e4 15%, transparent); }
.home-band--regions .strip-edge { color: var(--ink); }
.home-band--regions .strip-edge::before { background: rgb(255 255 255 / .85); box-shadow: 0 2px 8px rgb(46 39 34 / .25); }
.home-band--regions .strip-dots button { background: rgb(46 39 34 / .25); }
.home-band--regions .strip-dots button.is-current { background: var(--peru-red); }

/* Home hero title: Cinzel, capitals */
.hero h1 { font-family: "Cinzel", var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; font-size: clamp(2.1rem, 7.2vw, 4rem); }

/* Home hero: title, subtitle, red bar and search field are centred. */
.hero__inner { text-align: center; }
.hero h1::after { margin-inline: auto; }
.hero .lead { margin-inline: auto; }
.hero-search { margin-inline: auto; text-align: left; }

/* Home hero title, trial: Fraunces (the Cinzel rule above is replaced) */
.hero h1 { font-family: "Fraunces", var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(2.4rem, 8.5vw, 4.6rem); }

/* A region link lands with the photo of the region as the first thing under the quick-links strip: the area starts at its photo, and the gap with its soft shade sits outside, before it. */
.dest-area { padding-top: 0; scroll-margin-top: calc(var(--header-h) + var(--dest-filter-h, 2.6rem)); }
.dest-area::before { inset: auto 0 100% 0; }
.dest-area + .dest-area { margin-top: 3.2rem; }
.dest-area:first-of-type { scroll-margin-top: calc(var(--header-h) + var(--dest-filter-h, 2.6rem)); }

/* Phones: bigger names on the popular-place cards of the home */
@media (max-width: 43.99rem) { .home-explore .tile h3, .home-explore .tile:first-child h3 { font-size: 1.95rem; line-height: 1.1; } }

/* Home, regions: red-pill variant - a tall rounded photo with the name in a red pill at the bottom (replaces the polaroid). */
.region-card, .region-strip li:nth-child(n) .region-card { transform: none; flex-direction: row; align-items: flex-end; width: 17rem; aspect-ratio: 3 / 4; padding: 0; border-radius: 1.8rem; background: var(--night); color: #fff; box-shadow: 0 22px 36px -16px rgb(46 39 34 / .6); }
.region-card::after { display: block; background: linear-gradient(to top, rgb(14 9 6 / .5), transparent 45%); }
.region-card__photo { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
.region-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.region-card:hover { transform: translateY(-8px); color: #fff; }
.region-strip li:nth-child(n) .region-card:hover { transform: translateY(-8px); }
.region-card:hover .region-card__photo img { transform: scale(1.08); }
.region-card__label { margin: 0 0 1rem 1rem; padding: .6rem 1.2rem; border-radius: 99px; background: var(--peru-red); color: #fff; font: 700 1.15rem/1.1 var(--font-display); text-align: left; box-shadow: 0 6px 16px -4px rgb(0 0 0 / .5); }
@media (min-width: 62rem) { .region-card { width: 18rem; } .region-card__label { font-size: 1.25rem; } }
@media (max-width: 61.99rem) { .region-card { width: 72vw; max-width: 17rem; } }

/* Destinations page: the title and subtitle of a region sit a little further left, still with some padding. */
.dest-area__head { padding-left: 1rem; }

/* Home, regions: no sideways scrolling - two cards per row on a phone, three on a wide screen, landscape cards on a wide screen. */
.region-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: .4rem 0 .6rem; overflow: visible; scroll-snap-type: none; }
.region-strip .region-card, .region-strip li:nth-child(n) .region-card { width: 100%; max-width: none; }
.region-strip .region-card__label { margin: 0 .6rem .7rem; padding: .5rem .9rem; font-size: 1rem; }
@media (min-width: 62rem) {
  .region-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
  .region-strip .region-card { aspect-ratio: 16 / 10; }
  .region-strip .region-card__label { margin: 0 1.1rem 1.1rem; padding: .65rem 1.4rem; font-size: 1.35rem; }
}

/* A map block on the full screen (real fullscreen, or stretched over the page on an iPhone): the canvas fills it, and the buttons fixed to the page are hidden. */
.map:fullscreen, .map.map--expanded { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg); }
.map.map--expanded { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
.map:fullscreen .map__canvas, .map.map--expanded .map__canvas { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
body.map-fullscreen .consent, body.map-fullscreen .float-buttons, body.map-fullscreen .sticky-offer { display: none !important; }
.map.map--expanded .map-pin__label--full { display: block; }
body.map-fullscreen { overflow: hidden; }

/* Home: every section title has the same look (size, weight, red bar underneath), in a band or not. */
.home-block__title, .home-band .home-block__title { font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-align: left; }
.home-block__title::after { content: ""; display: block; width: 3.4rem; height: 5px; margin-top: .6rem; border-radius: 99px; background: var(--peru-red); }

/* Home: the title of the tours strip at the bottom looks like the other section titles (red bar underneath, not above). */
body.home-page .footer-tours h2 { margin: 0 0 1.1rem; font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.7rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-align: left; }
body.home-page .footer-tours h2::before { display: none; }
body.home-page .footer-tours h2::after { content: ""; display: block; width: 3.4rem; height: 5px; margin-top: .6rem; border-radius: 99px; background: var(--peru-red); }

/* Home, popular places: the button to all the destinations under the cards */
.home-explore__all { margin-top: 1.3rem; }

/* Home, regions on a phone: one big card per row - wide photo, deep shade, the name in a large red pill with an arrow, corners rounded alternately. */
@media (max-width: 61.99rem) {
  .region-strip { grid-template-columns: 1fr; gap: 1.2rem; padding-bottom: 1rem; }
  .region-strip .region-card, .region-strip li:nth-child(n) .region-card { aspect-ratio: 4 / 3; border-radius: 2.2rem .8rem 2.2rem .8rem; box-shadow: 0 26px 40px -18px rgb(46 39 34 / .7), 0 4px 8px rgb(46 39 34 / .2); }
  .region-strip li:nth-child(even) .region-card { border-radius: .8rem 2.2rem .8rem 2.2rem; }
  .region-strip .region-card::after { background: linear-gradient(to top, rgb(14 9 6 / .72), rgb(14 9 6 / .1) 55%, rgb(14 9 6 / .18)); }
  .region-strip .region-card__label { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem 1.1rem; padding: .7rem .8rem .7rem 1.5rem; font-size: 1.6rem; box-shadow: 0 10px 22px -6px rgb(0 0 0 / .6); }
  .region-strip .region-card__label::after { content: "→"; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: var(--peru-red); font-size: 1.2rem; font-family: var(--font-sans); }
}

/* Home, regions: rectangular cards, twice as wide as they are tall (2:1). */
.region-strip .region-card, .region-strip li:nth-child(n) .region-card { aspect-ratio: 2 / 1; }

/* Home, regions: some room between the title and the cards. */
.home-band--regions .home-block__title { margin-bottom: 1.8rem; }

/* Home, regions: no arrow button on the cards; the name pill is balanced without it. */
.region-strip .region-card__label::after { display: none; }
@media (max-width: 61.99rem) { .region-strip .region-card__label { padding: .7rem 1.5rem; } }

/* Home, regions: a deep shadow behind every card, and only the top-left and bottom-right corners rounded. */
.region-strip li:nth-child(n) .region-card, .region-strip li:nth-child(even) .region-card { border-radius: 2.2rem 0 2.2rem 0; box-shadow: 0 28px 44px -14px rgb(0 0 0 / .62), 0 8px 14px rgb(0 0 0 / .26); }

/* Home, regions: the full title of the region, centred in the card. */
.region-strip .region-card, .region-strip li:nth-child(n) .region-card { align-items: center; justify-content: center; }
.region-strip .region-card__label { display: block; max-width: calc(100% - 2rem); margin: 0; padding: .7rem 1.4rem; text-align: center; text-wrap: balance; }

/* Home, regions: the name is plain white text on the photo - no red pill, and tighter. */
.region-strip .region-card__label, .region-strip .region-card__label:hover { padding: 0 1rem; background: none; box-shadow: none; font-size: 1.3rem; line-height: 1.15; text-shadow: 0 2px 14px rgb(0 0 0 / .75), 0 0 3px rgb(0 0 0 / .5); }
@media (min-width: 62rem) { .region-strip .region-card__label { font-size: 1.35rem; padding: 0 1.2rem; } }
.region-strip .region-card::after { background: linear-gradient(to top, rgb(14 9 6 / .35), rgb(14 9 6 / .35)); }

/* Several walks on one map: the name of each walk on its path, in the colour of its line */
.map-trail-label { padding: .25rem .6rem; border-radius: 99px; border: 2px solid var(--trail-color, var(--peru-red)); background: #fff; color: var(--night); font: 700 .8rem/1.1 var(--font-sans); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .35); pointer-events: none; }


/* Map preview: drawn by the server, shown until someone uses the map (app.js loads MapLibre then) */
.map { position: relative; }
.map-preview { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); transition: opacity .35s var(--ease); }
.map-preview.is-gone { opacity: 0; pointer-events: none; }
.map-preview-svg { display: block; width: 100%; height: 100%; }
.pv-land { fill: color-mix(in srgb, var(--line) 55%, var(--soft)); stroke: none; }
.pv-peru { fill: var(--surface); stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pv-point { fill: var(--peru-red); stroke: #fff; }
.map-start { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); padding: .55rem 1.1rem; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
.map-start:hover { background: var(--peru-red); }
.pv-route { fill: none; stroke: var(--peru-red); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0; opacity: .85; }

/* The tour pages: the way back, the small «Details» link of a card, the band of a place, the sort, the page of a tour */
.tour-crumbs { margin: 0 0 1rem; font-size: .9rem; color: var(--ink-2); }
.tour-crumbs a { color: inherit; }
.offer__details { position: relative; z-index: 2; align-self: flex-start; margin-top: .5rem; font-size: .8rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: .15em; }
.offer__details:hover { color: var(--accent); }
.tour-guide-link { margin: 1.5rem 0; }

/* The page of a place */
body.tour-place-page main { padding-top: var(--header-h); }   /* the band starts right under the header */
.place-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; margin-bottom: 1.2rem; padding: 2.2rem 0 1.8rem; background: var(--night); color: #fff; }
@media (min-width: 64rem) { .place-hero { min-height: 20rem; padding: 4rem 0 2.2rem; } }
.tour-place-page .offers { margin-top: 0; }
.place-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.place-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(26 21 18 / .45), rgb(26 21 18 / .78)); }
.place-hero__inner { width: 100%; }
.place-hero .tour-crumbs, .place-hero .tour-crumbs a { color: rgb(255 255 255 / .85); }
.place-hero h1 { margin: 0 0 .6rem; max-width: 24ch; color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.place-hero__lead { max-width: 46rem; margin: 0 0 1.2rem; color: rgb(255 255 255 / .92); font-size: 1.15rem; }
.place-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 0; }
.place-hero__count { padding: .35rem .9rem; border-radius: 99px; background: rgb(255 255 255 / .18); font-weight: 700; backdrop-filter: blur(4px); }
.place-hero .btn--ghost { border-color: #fff; color: #fff; }
.place-hero .btn--ghost:hover { background: #fff; color: var(--ink); }
.tour-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.2rem; }
.tour-sort__label { margin-right: .3rem; color: var(--ink-2); font-size: .9rem; }
.tour-sort button { padding: .45rem 1rem; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--ink); font: 600 .9rem/1 var(--font-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tour-sort button:hover { border-color: var(--accent); }
.tour-sort button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.tour-place-page .offer-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.4rem; }

/* The page of a tour */
.tour-layout { display: grid; gap: 1.5rem; }
.tour-head__place { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tour-head__place a { color: var(--accent); text-decoration: none; }
.tour-head h1 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; text-wrap: balance; }
.tour-gallery { display: grid; gap: .5rem; margin: 1.1rem 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tour-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.tour-gallery--5 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 6.5rem); }   /* fixed rows: the photos are links, whose height is not known to the images */
.tour-gallery--5 .tour-gallery__item img { height: 100%; aspect-ratio: auto; }
@media (min-width: 64rem) { .tour-gallery--5 { grid-template-rows: repeat(2, 10rem); } }
.tour-book { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin: 0 0 1.4rem; }
.tour-book__price { margin: 0; }
.tour-book__price strong { font-size: 1.8rem; }
.tour-lead { margin: 0 0 1.2rem; color: var(--ink-2); font-size: 1.2rem; line-height: 1.55; }
.tour-text { max-width: 46rem; }
.tour-text ul { padding-left: 1.2rem; }
.tour-text li { margin-bottom: .35rem; }
.tour-aside { display: none; }
@media (min-width: 64rem) {
  .tour-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; align-items: start; }
  .tour-book--inline { display: none; }   /* the card on the right books, and follows the page */
  .tour-aside { display: block; position: sticky; top: calc(var(--header-h) + 1.2rem); }
  .tour-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 4px rgb(46 39 34 / .06), 0 12px 32px rgb(46 39 34 / .14); }
  .tour-card__price { margin: 0 0 .3rem; }
  .tour-card__price strong { font-size: 2.6rem; line-height: 1; }
  .tour-card__meta { margin: 0 0 .8rem; color: var(--ink-2); }
  .tour-card__perks { margin: 0 0 1.1rem; padding: 0; list-style: none; color: var(--ink); font-weight: 600; }
  .tour-card__perks li { margin-bottom: .25rem; }
  .tour-card__go { display: block; box-sizing: border-box; width: 100%; padding: 1rem 1.2rem; text-align: center; font-size: 1.05rem; }
}

/* The gallery of the photos of a tour */
.tour-gallery__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.tour-gallery--5 .tour-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.tour-gallery__item img { transition: transform .35s var(--ease); }
.tour-gallery__item:hover img { transform: scale(1.04); }
.tour-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(26 21 18 / .55); color: #fff; font: 700 1.6rem/1 var(--font-display); }
.tour-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
.tour-lightbox[open] { display: grid; place-items: center; }
.tour-lightbox::backdrop { background: rgb(14 11 9 / .97); }
.tour-lightbox__photo { max-width: min(94vw, 90rem); max-height: 84dvh; width: auto; height: auto; border-radius: .5rem; object-fit: contain; }
.tour-lightbox__close, .tour-lightbox__nav { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font: 400 2rem/1 var(--font-sans); cursor: pointer; transition: background .2s; }
.tour-lightbox__close:hover, .tour-lightbox__nav:hover { background: rgb(255 255 255 / .32); }
.tour-lightbox__close { top: 1rem; right: 1rem; }
.tour-lightbox__nav { top: 50%; transform: translateY(-50%); }
.tour-lightbox__nav--prev { left: 1rem; }
.tour-lightbox__nav--next { right: 1rem; }
.tour-lightbox__count { position: absolute; bottom: 1rem; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none; font-size: .9rem; color: rgb(255 255 255 / .8); }
@media (max-width: 40rem) { .tour-lightbox__nav { top: auto; bottom: 1rem; transform: none; } .tour-lightbox__count { bottom: 1.9rem; } }