/* Travel Tailor public site. One stylesheet for every page.
   Built phone-first: the plain rules are the phone layout, and the
   @media blocks widen it for tablets (720px) and desktops (980px). */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600-italic-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Body text: Instrument Sans, one file that covers every weight from 400 to 700. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-600-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #FAF7F2;
  --white: #FFFFFF;
  --ink: #1E1B16;
  --ink-soft: #2E2A23;
  --body: #4A443B;
  --muted: #6B6255;
  --line: #E8E0D2;
  --sand: #F1EADD;
  /* Two brand colours work together. Terracotta carries buttons and text, where white
     or cream must stay readable on it. Coral, the logo colour, is the bright accent
     for small details: stars, dots, underlines, arrows. */
  --coral: #FF664B;
  --accent: #A84B22;
  --accent-dark: #8F3F1B;
  --accent-deep: #7E3A19;
  --green: #2F4B44;
  --dark: #1E1B16;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pad: 20px;
  --head-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: #FFD3C9; color: var(--ink); }
a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.wrap { width: 100%; max-width: calc(1280px + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: 44px; }
.section-tight { padding-bottom: 44px; }
.section-tight + .section { padding-top: 6px; }
.band { background: var(--white); border-block: 1px solid var(--line); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; color: var(--bg); }

/* ───────── Type ───────── */
h1, h2, .logo { font-family: var(--serif); font-weight: 600; }
h1 { font-size: clamp(35px, 8.8vw, 56px); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; }
h2 { font-size: clamp(25px, 5.8vw, 32px); line-height: 1.18; letter-spacing: -0.012em; text-wrap: balance; }
/* Words marked with *stars* in the dashboard: italic, in terracotta. */
h1 em, h2 em { font-style: italic; color: var(--accent); }
.closing h2 em { color: var(--coral); }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
.lead { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 520px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.4; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }
.note { font-size: 14px; color: var(--muted); }
.stars { font-size: 14px; letter-spacing: 0.12em; color: var(--coral); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; padding-block: 6px; }
.link-arrow:hover { color: var(--accent-deep); }
.link-arrow span { color: var(--coral); transition: transform 0.15s ease; }
.link-arrow:hover span { transform: translateX(3px); }

/* ───────── Buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border: 1px solid transparent; border-radius: 8px; font: 600 15px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); color: var(--white); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: #243B35; color: var(--white); }
.btn-outline { background: transparent; color: var(--ink); border-color: #CFC4B0; }
.btn-outline:hover { background: var(--sand); color: var(--ink); border-color: #B9AC94; }
.btn-ghost-dark { background: transparent; color: var(--bg); border-color: #55503F; }
.btn-ghost-dark:hover { background: #2E2A23; color: var(--bg); }
.btn-lg { min-height: 52px; padding: 15px 26px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 9px 14px; font-size: 14px; }

/* ───────── Menu ───────── */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 242, 0.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: transform 0.28s ease, box-shadow 0.28s ease; }
.scrolled .site-head { box-shadow: 0 6px 22px rgba(30, 27, 22, 0.07); }
.head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; min-height: var(--head-h); }
.logo { font-size: 21px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo:hover { color: var(--ink); }
.logo img { display: block; height: 40px; width: auto; }
.logo-foot { margin-bottom: 8px; }
.logo-foot img { height: 84px; }
.head-inspire { display: none; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.js .menu-btn { display: inline-flex; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, background 0.2s ease; }
.bars { position: relative; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
.menu-btn[aria-expanded='true'] .bars { background: transparent; }
.menu-btn[aria-expanded='true'] .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded='true'] .bars::after { transform: translateY(-7px) rotate(-45deg); }
/* On phones the links sit in a panel under the bar. Without JavaScript they simply stay open. */
.nav { order: 3; flex-basis: 100%; display: flex; flex-direction: column; padding: 4px 0 14px; border-top: 1px solid var(--line); }
.js .nav { display: none; }
.js .nav.open { display: flex; }
.nav a { padding: 13px 2px; font-size: 17px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.nav a:last-child { border-bottom: 0; }
.nav a[aria-current='page'] { color: var(--accent); font-weight: 600; }
.label-head { margin-bottom: 20px; font: 600 13px/1.5 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 349px) { .head-cta { display: none; } }
/* Phones: the bar at the top slides away while scrolling down and returns on the way up,
   and its Start Planning button steps aside whenever the action bar at the bottom is showing. */
@media (max-width: 719px) {
  .head-hide .site-head { transform: translateY(-101%); }
  .bar-on .head-cta { display: none; }
}

/* ───────── Photos and placeholders ───────── */
.photo { display: block; width: 100%; object-fit: cover; background: #E4D7C3; }
/* Blur-up: a photo's frame (.pic) keeps its shape and shows a soft blurred copy of the photo
   (--lq, written in by the server) until the sharp photo has arrived and fades in over it.
   Without the script the photo simply shows. See src/site/previews.js. */
.pic { position: relative; overflow: hidden; aspect-ratio: var(--ar); }
/* Frames that set the shape themselves: the photo just fills them, as a plain photo would. */
.hero-frame > .pic, .post-frame > .pic { aspect-ratio: auto; }
.pic::before { content: ''; position: absolute; inset: 0; background: var(--lq, none) center / cover no-repeat; filter: blur(12px); transform: scale(1.15); }
.pic > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: inherit; object-position: inherit; }
.js .pic > img { opacity: 0; transition: opacity 0.7s ease; }
.js .pic.is-in > img { opacity: 1; }
.pic.is-now > img, .pic.is-now::before { transition: none; }
.pic.is-in::before { visibility: hidden; transition: visibility 0s 0.8s; }
@media (prefers-reduced-motion: reduce) { .js .pic > img { transition: none; } }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; }
.ph span { font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; }
.ph-1 { background: #E4D7C3; color: #6F6553; }
.ph-2 { background: #DCE3D9; color: #5C6A58; }
.ph-3 { background: #E9DCC9; color: #6F6553; }
.ph-4 { background: #D8E2E0; color: #53655F; }

/* ───────── Hero ───────── */
.hero { display: grid; gap: 28px; padding-block: 30px 44px; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 4px; }
.hero-actions .link-arrow { justify-content: center; min-height: 44px; }
.hero-media { position: relative; margin-top: 18px; }
.hero-frame { aspect-ratio: 5 / 4; border-radius: 16px; border: 1px solid #D8C9AF; overflow: hidden; background: #E4D7C3; }
.hero-photo { height: 100%; }
.hero-photo.ph span { font-size: 13px; max-width: 240px; }
/* The two cards over the photo sit on their own layers: .depth shifts with the pointer
   (desktop) or the scroll (phone), and .float keeps them drifting gently. */
.depth { transform: translate3d(calc(var(--mx, 0) * var(--d, 0) * 1px), calc((var(--my, 0) * var(--d, 0) + var(--sy, 0) * var(--s, 0)) * 1px), 0); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.float { animation: drift-a 7s ease-in-out infinite; will-change: transform; }
.float-b { animation: drift-b 8.5s ease-in-out infinite; animation-delay: -3s; }
@keyframes drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(3px, -9px, 0) rotate(-0.7deg); } }
@keyframes drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-4px, -11px, 0) rotate(0.6deg); } }
.hero-badge { position: absolute; z-index: 2; top: -18px; left: 12px; max-width: calc(100% - 24px); --d: 12; --s: -10; }
.hero-badge .float { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--white); border-radius: 12px; box-shadow: 0 14px 30px rgba(30, 27, 22, 0.16); }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--serif); object-fit: cover; }
figcaption { display: flex; align-items: center; gap: 10px; }
figcaption .avatar { width: 32px; height: 32px; }
.hero-badge-text { display: flex; flex-direction: column; gap: 1px; }
.hero-badge-text strong { font-size: 13px; line-height: 1.3; font-weight: 600; }
.hero-badge-text span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.hero-quote { position: relative; z-index: 2; margin: -44px 12px 0; --d: -18; --s: 10; }
.hero-quote .float { padding: 16px 18px; background: var(--white); border-radius: 14px; box-shadow: 0 18px 36px rgba(30, 27, 22, 0.18); display: flex; flex-direction: column; gap: 8px; }
.hero-quote blockquote { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.hero-quote figcaption { font-size: 12.5px; color: var(--muted); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.stats dd { font: 600 24px/1.2 var(--serif); }
.stats dt { font-size: 13px; line-height: 1.35; color: var(--muted); }

/* ───────── Section headings ───────── */
.section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; }
.section-title { margin-bottom: 24px; }

/* ───────── How it works ───────── */
.steps { display: grid; gap: 24px; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.steps div { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.steps p { font-size: 15px; line-height: 1.55; color: var(--body); }

/* ───────── Card rows: destinations and trips ───────── */
/* On phones a row is swiped sideways; it runs to the screen edge so the next card peeks in. */
/* overflow-y: hidden keeps a row from wobbling up and down while it is swiped. */
.swipe-row { display: flex; gap: 14px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.swipe-row::-webkit-scrollbar { display: none; }
.swipe-row li { scroll-snap-align: start; }
.dest-row li { flex: 0 0 min(70%, 270px); }
.trip-row li { flex: 0 0 min(78%, 300px); }
.area-row li { flex: 0 0 min(84%, 340px); }
.trip-photo { position: relative; display: block; overflow: hidden; border-radius: 14px; margin-bottom: 4px; }
.trip-photo .photo, .dest-card .photo { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.dest-card:hover .photo, a.trip-card:hover .photo { transform: scale(1.06); }
.dest-card { position: relative; display: block; overflow: hidden; border-radius: 16px; color: var(--white); text-decoration: none; isolation: isolate; }
.dest-card .photo { aspect-ratio: 3 / 4; }
.dest-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 27, 22, 0.82) 0%, rgba(30, 27, 22, 0.34) 36%, rgba(30, 27, 22, 0) 62%); transition: opacity 0.3s ease; }
.dest-card:hover { color: var(--white); }
.dest-text { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 5px; }
.dest-text strong { font: 600 23px/1.12 var(--serif); letter-spacing: -0.01em; }
.dest-text span { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.dest-text strong::after { content: ''; display: block; width: 26px; height: 2px; margin-top: 9px; border-radius: 2px; background: var(--coral); transition: width 0.3s ease; }
.dest-card:hover .dest-text strong::after { width: 48px; }
.sub-head { font: 600 20px/1.3 var(--serif); margin-bottom: 16px; }
.trip-card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.trip-photo .photo { aspect-ratio: 16 / 10; }
.tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
.trip-kind { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.trip-name { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.trip-meta { font-size: 13px; color: var(--muted); }
a.trip-card:hover .trip-name { color: var(--accent-deep); }

/* ───────── Trailsmith on the homepage ───────── */
/* A full-width forest-green band: Trailsmith reads as its own world inside the site.
   Phones: heading, the photo with its two floating cards, the points and button, then the trips. */
.ts { --ts-bg: #233A33; --ts-ink: #F4EFE6; --ts-soft: #C9D3CF; position: relative; overflow: hidden; isolation: isolate; padding-block: 52px 56px; background: var(--ts-bg); color: var(--ts-ink); }
.ts::before { content: ''; position: absolute; z-index: -1; inset: -20% -30% auto auto; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 102, 75, 0.16), rgba(255, 102, 75, 0)); pointer-events: none; }
.ts-top { display: grid; gap: 28px; }
/* The Trailsmith name, set large as a wordmark: the first thing seen in the band. */
.ts-brand { display: flex; flex-direction: column; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ts-logo img { display: block; width: auto; height: 60px; }
.ts-tagline { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-soft); }
.ts-tagline::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--coral); }
.ts-head { display: flex; flex-direction: column; gap: 14px; }
.ts h2 { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; color: var(--ts-ink); }
.ts h2 em { color: var(--coral); }
.ts-media { position: relative; margin: 18px 0 26px; }
.ts-frame { overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45); }
.ts-photo { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; }
.ts-photo.ph { background: #3A5249; color: #B9C7C1; }
.ts-smiths { position: absolute; z-index: 2; top: -20px; left: 12px; max-width: calc(100% - 24px); --d: 12; }
.ts-smiths .float, .ts-next .float { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--white); color: var(--ink); border-radius: 12px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); }
.ts-faces { display: flex; flex: none; }
.ts-faces .avatar { width: 34px; height: 34px; border: 2px solid var(--white); font-size: 13px; }
.ts-faces .avatar + .avatar { margin-left: -10px; }
.ts-faces .avatar:nth-child(2) { background: var(--accent); }
.ts-faces .avatar:nth-child(3) { background: #6B5A3E; }
.ts-smiths-text, .ts-next .float { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ts-smiths-text strong { font-size: 13px; line-height: 1.3; }
.ts-smiths-text span { font-size: 12px; line-height: 1.35; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-next { position: absolute; z-index: 2; right: 12px; bottom: -24px; --d: -16; }
.ts-next .float { align-items: flex-start; gap: 2px; padding: 12px 16px; }
.ts-next-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.ts-next-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 102, 75, 0.6); animation: ts-pulse 2.2s ease-out infinite; }
.ts-next a.float { text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ts-next a.float:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34); }
.ts-next strong { font: 600 18px/1.2 var(--serif); }
.ts-next span:last-child { font-size: 12.5px; color: var(--muted); }
@keyframes ts-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 102, 75, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 102, 75, 0); } }
.ts-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ts-lead { font-size: 16.5px; line-height: 1.6; color: var(--ts-soft); max-width: 520px; }
.ts-points { list-style: none; display: grid; gap: 12px; width: 100%; }
.ts-points li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; font-weight: 600; line-height: 1.4; }
.ts-tick { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); }
.ts-tick::after { content: ''; position: absolute; left: 8.5px; top: 5px; width: 5px; height: 10px; border: solid var(--dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ts-copy .btn { width: 100%; }
.ts-copy .btn span { transition: transform 0.15s ease; }
.ts-copy .btn:hover span { transform: translateX(3px); }
.ts-trips { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ts-trips-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ts-trips-head h3 { font: 600 22px/1.25 var(--serif); }
.ts .link-arrow { color: var(--ts-ink); font-size: 14.5px; white-space: nowrap; }
.ts .link-arrow:hover { color: var(--white); }
.ts .trip-card { width: 100%; height: 100%; padding: 8px 8px 16px; border-radius: 16px; background: var(--bg); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.5); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ts .trip-card > span:not(.trip-photo) { padding-inline: 8px; }
.ts a.trip-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.6); }
.ts .trip-photo { border-radius: 11px; }
.trip-smith { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--body); }
.trip-smith .avatar { width: 26px; height: 26px; font-size: 11px; }
.ts .trip-row li { display: flex; }
/* Upcoming trips: one fills the row, two share it, three sit side by side, more scroll. */
.ts-trip-row:not(.swipe-row) { list-style: none; display: grid; gap: 16px; }
.ts-n4 .trip-row li { flex: 0 0 min(80%, 300px); }
.ts-trips-nav { display: flex; align-items: center; gap: 8px; }
.ts .ts-arrow { display: none; background: transparent; color: var(--ts-ink); border-color: rgba(255, 255, 255, 0.28); }
.ts .ts-arrow:hover { border-color: var(--ts-ink); }
.ts-n1 .trip-name, .ts-n2 .trip-name { font: 600 21px/1.25 var(--serif); }

/* ───────── Reviews ───────── */
.reviews { display: grid; gap: 14px; }
.review { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.6s ease; }
.review:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30, 27, 22, 0.08); }
.review blockquote { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.review figcaption { margin-top: auto; font-size: 12.5px; color: var(--muted); }

/* "Rated on Google" badge: the rating typed on the Company screen, linking to the Google listing. */
.gbadge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.gbadge strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.gbadge .stars { font-size: 13px; letter-spacing: 0.06em; }
a.gbadge:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(30, 27, 22, 0.08); }
.gbadge-g { flex: none; }
.foot-brand .gbadge { margin-top: 10px; }

/* ───────── Closing block ───────── */
.closing { display: flex; flex-direction: column; gap: 22px; padding: 30px 22px; border-radius: 18px; background: var(--dark); }
.closing-text { display: flex; flex-direction: column; gap: 8px; }
.closing h2 { font-size: clamp(23px, 5.6vw, 28px); color: var(--bg); }
.closing p { font-size: 15px; color: #C9C1B2; }
.closing-actions { display: flex; flex-direction: column; gap: 10px; }

/* ───────── Footer ───────── */
.site-foot { border-top: 1px solid var(--line); padding-block: 34px 28px; font-size: 14px; }
.foot-row { display: grid; gap: 30px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--muted); }
.foot-brand a:not(.logo) { color: var(--muted); text-decoration: none; padding-block: 3px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.foot-cols div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foot-h { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.foot-cols a { color: var(--muted); text-decoration: none; padding-block: 5px; }
.site-foot a:hover { color: var(--accent-deep); }
.foot-base { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: var(--muted); text-decoration: none; padding-block: 4px; }

/* ───────── Phone action bar ───────── */
/* Slides up once the main button has scrolled out of view, so there is always one tap to enquire. */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 247, 242, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform 0.25s ease; }
.mbar .btn { flex: 1; }
.mbar-main { display: flex; gap: 10px; flex: 1; }
/* A longer label ("Hear about the next one" on a past trip) takes more of the bar so it stays on one line. */
.mbar .mbar-wide { flex: 1.6; padding-inline: 12px; white-space: nowrap; }
/* Once the visitor has picked things to do, the bar swaps to their list and one button. */
.mbar-list { display: none; align-items: center; justify-content: space-between; gap: 12px; flex: 1; }
.mbar-count { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mbar-list .btn { flex: 0 0 auto; padding-inline: 20px; }
.has-list .mbar-main { display: none; }
.has-list .mbar-list { display: flex; animation: bar-swap 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.has-list .mbar { transform: none !important; border-top-color: var(--accent); }
@keyframes bar-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body { padding-bottom: 72px; }

/* ───────── Message pages and the site index ───────── */
.message { padding-block: 72px 80px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; margin-inline: 0; }
.message h1 { font-size: clamp(30px, 7vw, 44px); }
.message p { font-size: 17px; color: var(--body); max-width: 520px; }
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.index h1 { font-size: clamp(30px, 7vw, 44px); margin-bottom: 12px; }
.index-group { margin-top: 34px; }
.index-group h2 { font-size: 22px; margin-bottom: 10px; }
.index-group li { display: flex; flex-direction: column; gap: 2px; padding-block: 12px; border-top: 1px solid var(--line); }
.index-group a { font-weight: 600; color: var(--ink); text-decoration: none; }
.index-group a:hover { color: var(--accent-deep); }
.index-group span { font-size: 14px; color: var(--muted); max-width: 720px; }

/* ───────── Destination page ───────── */
.destination-page { overflow-wrap: break-word; }
.destination-back { padding-block: 14px 6px; }
.destination-back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: 14px; text-decoration: none; }
.destination-back a:hover { color: var(--accent-deep); }
.destination-hero { padding-bottom: 30px; }
.destination-stage { position: relative; }
.destination-frame { overflow: hidden; border-radius: 16px; background: #E9DCC9; }
.destination-hero-photo { height: 300px; }
.destination-caption { position: relative; margin: -44px 12px 0; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 34px rgba(30, 27, 22, 0.14); }
.destination-caption h1 { font-size: clamp(30px, 7.4vw, 40px); line-height: 1.1; }
.destination-caption p { margin-top: 8px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.destination-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.destination-facts dt { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.destination-facts dd { font-size: 16px; font-weight: 600; line-height: 1.4; }
.destination-intro { padding-block: 34px 10px; }
.destination-intro h2 { font-size: clamp(24px, 5.6vw, 28px); margin-bottom: 14px; }
.destination-prose { max-width: 820px; font-size: 16px; line-height: 1.7; color: var(--body); }
.destination-prose p + p { margin-top: 14px; }
.destination-section { padding-block: 32px; }
.destination-page h3 { font-size: 15.5px; line-height: 1.35; }
.area-row li { display: flex; flex-direction: column; gap: 8px; }
.area-row .photo { aspect-ratio: 4 / 3; border-radius: 14px; margin-bottom: 4px; }
.area-row h3 { font-size: 17px; }
.area-row p, .destination-tips p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.area-row p { font-size: 15px; }
.destination-tips { display: grid; gap: 14px; }
.destination-tips li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 14px; background: var(--sand); }
.destination-page + .section-tight { padding-top: 12px; }

/* ───────── Destinations listing ───────── */
/* Hero: words on the left, a fan of three destination photos on the right. */
.dl-hero { display: grid; gap: 22px; padding-block: 14px 40px; }
/* Phones and tablets: the photo fan comes first, so its opening plays without scrolling,
   and the headline and button follow right under it. "Browse all" is left to desktop. */
.dl-hero .dl-fan { order: -1; }
.dl-browse { display: none; }
.dl-hero-copy { display: flex; flex-direction: column; gap: 18px; }
.dl-hero h1 { font-size: clamp(35px, 8.8vw, 56px); }
.dl-fan { position: relative; height: 250px; margin-top: 0; }
.dl-fan .dl-fan-card { width: 42%; }
.dl-fan-card { position: absolute; top: 50%; left: 50%; width: 48%; max-width: 280px; transform: var(--open); }
.dl-fan-card .float { position: relative; border-radius: 16px; overflow: hidden; border: 5px solid var(--white); box-shadow: 0 22px 44px rgba(30, 27, 22, 0.18); background: var(--white); }
.dl-fan-card .photo { aspect-ratio: 3 / 4; }
.dl-fan-1 { --open: translate(-106%, -50%) rotate(-7deg); }
.dl-fan-1 .depth { --d: 10; --s: -6; }
.dl-fan-2 { z-index: 2; --open: translate(-50%, -54%) rotate(2deg); }
.dl-fan-2 .depth { --d: -16; --s: 8; }
.dl-fan-3 { --open: translate(6%, -44%) rotate(8deg); }
.dl-fan-3 .depth { --d: 20; --s: -12; }
/* On arrival the three cards sit as one stack behind the front card, then the side cards
   fan out to the left and right, like a hand of cards being opened. */
.dl-fan-1, .dl-fan-3 { animation: fan-open 1.15s cubic-bezier(0.22, 0.9, 0.24, 1) 0.45s both; }
.dl-fan-3 { animation-delay: 0.55s; }
.dl-fan-2 { animation: fan-front 0.7s cubic-bezier(0.22, 0.9, 0.24, 1) 0.1s both; }
@keyframes fan-open { from { transform: translate(-50%, -54%) rotate(2deg) scale(0.97); } }
@keyframes fan-front { from { opacity: 0; transform: translate(-50%, -46%) rotate(0deg) scale(0.96); } }
.dl-fan-name { position: absolute; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 99px; background: var(--white); color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 4px 12px rgba(30, 27, 22, 0.12); }
.dl-fan-3 .dl-fan-name { left: auto; right: 10px; }

/* Spotlight: one large card per featured destination; several scroll as a slideshow. */
.dl-spot-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.dl-spot-track::-webkit-scrollbar { display: none; }
.dl-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; overflow: hidden; border-radius: 18px; background: var(--dark); color: var(--bg); isolation: isolate; }
.dl-slide-photo .photo { aspect-ratio: 4 / 3; }
.dl-slide-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px 26px; }
.dl-slide-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: #E9E1D3; }
.dl-slide-name { font: 600 clamp(32px, 8vw, 44px)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--bg); }
.dl-slide-line { font-size: 16px; line-height: 1.6; color: #D9D1C2; max-width: 460px; }
.dl-slide-facts { display: flex; flex-wrap: wrap; gap: 14px 28px; align-self: stretch; padding-block: 14px; border-block: 1px solid rgba(250, 247, 242, 0.16); }
.dl-slide-facts dt { font-size: 12px; color: #B5AC9C; }
.dl-slide-facts dd { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--bg); }
.dl-slide-areas { font-size: 14px; line-height: 1.5; color: #D9D1C2; }
.dl-slide-areas span { color: #B5AC9C; }
.dl-slide .btn { margin-top: 4px; }
.dl-slide .btn span { color: inherit; }
.dl-spot-nav { display: flex; flex: none; align-items: center; gap: 8px; }
.dl-spot-count { white-space: nowrap; margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-spot-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 18px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.dl-spot-btn:hover { border-color: var(--ink); }
.dl-spot-btn:disabled { opacity: 0.35; cursor: default; }
.dl-spot-band .section-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }

/* Every destination: chips with counts over a grid of tall cards. */
.chips { display: none; gap: 10px; margin: 0 calc(var(--pad) * -1) 22px; padding: 2px var(--pad); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.js .chips { display: flex; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--body); font: 500 14px/1.2 var(--sans); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.chip span { min-width: 22px; padding: 2px 6px; border-radius: 99px; background: var(--sand); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.chip[aria-pressed='true'] span { background: rgba(250, 247, 242, 0.16); color: var(--bg); }
.dest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.dest-grid li[hidden] { display: none; }
.dest-grid .dest-text { left: 12px; right: 12px; bottom: 12px; gap: 4px; }
.dest-grid .dest-text strong { font-size: 19px; }
.dest-grid .dest-text strong::after { margin-top: 7px; }
.dest-grid .dest-text span { font-size: 12.5px; }
.dest-tag { position: absolute; z-index: 1; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.dest-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.dest-more { display: none; align-items: center; gap: 6px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--white); }
.dest-more span { color: var(--coral); }

/* One traveller review before the closing block. */
.dl-quote { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 22px; border-radius: 18px; background: var(--sand); text-align: center; }
.dl-quote blockquote { max-width: 820px; font: 600 clamp(21px, 5vw, 26px)/1.35 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.dl-quote figcaption { justify-content: center; font-size: 13.5px; color: var(--muted); }

@media (min-width: 560px) {
  .destination-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── Area map ───────── */
/* A picture of the destination with numbered pins, and the area cards. On phones the
   cards are swiped and the map follows; on desktop the map sits beside the list. */
.amap-frame { display: grid; gap: 16px; }
.amap-map { min-width: 0; }
.amap-stage { position: relative; overflow: hidden; border-radius: 16px; background: #DCE6E3; --amap-zoom: 1.14; --amap-pull: 0.5; }
.amap-note { display: block; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.amap-canvas { position: relative; width: 100%; transform-origin: 0 0; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--zoom, 1)); transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.amap-img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.amap-pin { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.amap-pin span { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 5px 12px rgba(30, 27, 22, 0.22); display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--sans); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.amap-pin.is-on { z-index: 2; }
.amap-pin.is-on span { background: var(--accent); color: var(--white); border-color: var(--white); transform: scale(1.3); }
/* The ring that pulses out from the place in view. */
.amap-pin.is-on span::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--coral); animation: amap-pulse 1.8s ease-out infinite; }
/* The name of the place in view, beside its pin (to the left when the pin sits near the right edge). */
.amap-pin em { position: absolute; left: calc(50% + 26px); top: 50%; padding: 5px 10px; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 12.5px/1.2 var(--sans); white-space: nowrap; opacity: 0; transform: translateY(-50%); transition: opacity 0.3s ease; pointer-events: none; }
.amap-pin[data-tag='left'] em { left: auto; right: calc(50% + 26px); }
.amap-pin[data-tag='top'] em { left: 50%; top: auto; bottom: calc(50% + 26px); transform: translateX(-50%); }
.amap-pin[data-tag='bottom'] em { left: 50%; top: calc(50% + 26px); transform: translateX(-50%); }
.amap-pin.is-on em { opacity: 1; }
@keyframes amap-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.3); opacity: 0; } }
.amap-side { min-width: 0; }
.amap-list { display: flex; gap: 14px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.amap-list::-webkit-scrollbar { display: none; }
.amap-card { flex: 0 0 min(84%, 340px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.amap-body, .amap-body > div { display: contents; }
.amap-photo { order: 1; }
.amap-photo .photo { aspect-ratio: 4 / 3; border-radius: 14px; }
.amap-name { order: 2; margin-top: 4px; }
.amap-card p { order: 3; font-size: 15px; line-height: 1.55; color: var(--muted); }
.amap-name button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: 600 19px/1.3 var(--sans); text-align: left; cursor: pointer; }
.amap-num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12.5px; line-height: 1; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.amap-card.is-on .amap-num { background: var(--accent); border-color: var(--accent); color: var(--white); }
.js .amap-card { opacity: 0.55; transition: opacity 0.35s ease; }
.js .amap-card.is-on { opacity: 1; }
.amap-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.amap-dots span { width: 7px; height: 7px; border-radius: 7px; background: #D3C8B5; transition: width 0.3s ease, background 0.3s ease; }
.amap-dots span.is-on { width: 22px; background: var(--coral); }

/* ───────── Things worth doing: a shortlist the visitor builds ───────── */
.todo-head { font: 600 clamp(24px, 5.6vw, 30px)/1.2 var(--serif); letter-spacing: -0.012em; margin-bottom: 6px; }
.todo-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.todo ul { display: grid; gap: 10px; }
.todo-pick { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.todo-pick:hover { border-color: #CFC4B0; }
.todo-pick:active { transform: scale(0.99); }
.todo-pick[aria-pressed='true'] { border-color: var(--accent); background: #FBF1EA; }
.todo-text { display: flex; flex-direction: column; gap: 3px; }
.todo-text strong { font-size: 16px; line-height: 1.35; font-weight: 600; }
.todo-text span { font-size: 14px; line-height: 1.5; color: var(--muted); }
/* The round mark on each row: a plus that turns into a tick. */
.todo-tick { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background 0.2s ease, border-color 0.2s ease; }
.todo-tick::before, .todo-tick::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.25s ease, width 0.25s ease, background 0.2s ease; }
.todo-tick::after { transform: translate(-50%, -50%) rotate(90deg); }
.todo-pick[aria-pressed='true'] .todo-tick { background: var(--accent); border-color: var(--accent); }
.todo-pick[aria-pressed='true'] .todo-tick::before { background: var(--white); width: 7px; transform: translate(-95%, 55%) rotate(45deg); }
.todo-pick[aria-pressed='true'] .todo-tick::after { background: var(--white); width: 13px; transform: translate(-28%, -30%) rotate(-48deg); }
html:not(.js) .todo-tick { display: none; }
.todo-bar { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--sand); }
.todo-bar p { font-size: 15px; line-height: 1.5; color: var(--body); }
.todo-bar p strong { color: var(--ink); }
/* On phones the button lives in the bar at the bottom of the screen instead (see .mbar-list). */
.js .todo-bar .btn { display: none; }
.icon { flex: none; }

/* ───────── Contact page ───────── */
/* Phones: words, the two quick buttons, then the form, then the details.
   Desktop: words and details on the left, the form card on the right. */
.no-bar { padding-bottom: 0; }
.head-phone { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; padding-block: 10px; }
.head-phone:hover { color: var(--accent-deep); }
.contact { position: relative; display: grid; grid-template-areas: 'form' 'details'; gap: 28px; padding-block: 8px 56px; }
/* A soft warm glow behind the form, so the page has some depth before any photo is uploaded. */
.contact::before { content: ''; position: absolute; z-index: -1; inset: 30% 0 auto 10%; height: 70%; background: radial-gradient(closest-side, rgba(255, 102, 75, 0.13), rgba(255, 102, 75, 0) 70%); pointer-events: none; }
/* The top of the page follows the homepage hero: words beside the photo with its floating cards. */
.contact-hero { padding-bottom: 36px; }
.contact-hero .lead { max-width: 460px; }
.contact-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.contact-quick .btn { padding-inline: 12px; white-space: nowrap; }
.contact-details { grid-area: details; display: flex; flex-direction: column; gap: 22px; }
.detail-list { display: flex; flex-direction: column; gap: 10px; }
.detail-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; transition: border-color 0.2s ease, transform 0.2s ease; }
.detail-list li:hover { border-color: #D8C9AF; transform: translateY(-1px); }
.detail-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sand); color: var(--accent); }
.detail-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.detail-label { font-size: 12.5px; color: var(--muted); }
.detail-value { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.detail-value a { color: var(--ink); text-decoration: none; white-space: nowrap; }
a.detail-value:hover, .detail-value a:hover { color: var(--accent-deep); }
.detail-value .sep { color: var(--muted); }
.socials { display: flex; align-items: center; gap: 10px; }
.socials span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.socials a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.contact-form-box { grid-area: form; scroll-margin-top: calc(var(--head-h) + 12px); }
.enquiry, .enquiry-thanks { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(30, 27, 22, 0.28); }
/* A thin coral rule across the top of the card, the logo colour as a detail. */
.enquiry::before, .enquiry-thanks::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--coral); }
.enquiry[hidden], .enquiry-thanks[hidden], .form-errors[hidden] { display: none; }
.enquiry-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.enquiry-head h2 { font-size: clamp(23px, 5.6vw, 28px); }
.reply-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3E9B6A; }
.live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3E9B6A; opacity: 0; animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.field-grid { display: grid; gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--body); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #FDFBF8; color: var(--ink); font: 16px/1.45 var(--sans); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9A9081; }
.field input:hover, .field textarea:hover { border-color: #D8C9AF; }
.field input:focus, .field textarea:focus { outline: none; background: var(--white); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 75, 34, 0.14); }
.optional { font-weight: 400; color: var(--muted); }
/* "Where to": suggestions drop down under the box as the visitor types. */
.where { position: relative; }
.where-list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(30, 27, 22, 0.25); }
.where-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.where-list li:hover, .where-list li[aria-selected='true'] { background: var(--sand); }
.where-list strong { font-size: 15px; font-weight: 600; }
.where-list span { font-size: 13px; color: var(--muted); }
.where-list em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); }
/* Things to do: tick as many as you like. */
.things { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #FDFBF8; animation: things-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.things[hidden] { display: none; }
@keyframes things-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.things legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; padding: 0; font: 600 17px/1.3 var(--serif); }
.things-hint { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.things-list { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.thing { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; line-height: 1.3; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.thing:hover { border-color: #CFC4B0; }
.thing:active { transform: scale(0.98); }
.thing input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.thing-tick { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #B9AC94; transition: background 0.15s ease, border-color 0.15s ease; }
.thing-tick::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.15s ease; }
.thing:has(input:checked) { border-color: var(--accent); background: #FBF1EA; }
.thing input:checked + .thing-tick { background: var(--accent); border-color: var(--accent); }
.thing input:checked + .thing-tick::after { transform: rotate(45deg) scale(1); }
.thing input:focus-visible + .thing-tick { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { display: none; } /* not rendered, so browser autofill leaves it alone */
.enquiry-foot { display: flex; flex-direction: column; gap: 12px; }
.enquiry .btn { width: 100%; }
.enquiry .btn span { color: #FFC4B8; transition: transform 0.15s ease; }
.enquiry .btn:hover span { transform: translateX(3px); }
.enquiry .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.form-note { font-size: 13.5px; color: var(--muted); text-align: center; }
.form-errors { padding: 14px 16px; border-radius: 10px; background: #FBEDE7; border: 1px solid #F0CDBF; color: #7E3A19; font-size: 14.5px; }
.form-errors p { font-weight: 600; }
.form-errors ul { margin-top: 4px; padding-left: 18px; list-style: disc; }
.enquiry-thanks { align-items: flex-start; padding-block: 36px; }
.enquiry-thanks:focus { outline: none; }
.enquiry-thanks h2 { font-size: clamp(24px, 5.6vw, 30px); }
.enquiry-thanks p { color: var(--body); }
.thanks-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 21px; font-weight: 700; animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after, .thanks-mark, .things { animation: none; } }

/* ───────── Tracking test page (preview only) ───────── */
.tracktest { display: grid; gap: 24px; padding-block: 30px 10px; }
.tracktest-intro { display: flex; flex-direction: column; gap: 14px; }
.tracktest h1 { font-size: clamp(30px, 7vw, 42px); }
.tracktest-steps { display: grid; gap: 8px; padding-left: 20px; list-style: decimal; color: var(--body); font-size: 15px; }
.tracktest-note { padding: 12px 14px; border-radius: 10px; background: var(--sand); font-size: 14px; color: var(--body); }
.tracktest-side { display: grid; gap: 16px; align-content: start; }
.tracktest-check { display: grid; gap: 6px; }
.tracktest-check li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 13.5px; color: var(--muted); transition: border-color 0.2s ease, background 0.2s ease; }
.tracktest-check strong { display: block; font: 600 13.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.tracktest-check .tick { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #B9AC94; }
.tracktest-check li.done { border-color: #9CC9AE; background: #F1F8F3; }
.tracktest-check li.done .tick { background: #3E9B6A; border-color: #3E9B6A; box-shadow: inset 0 0 0 3px #F1F8F3; }
/* The event list floats in the corner so it stays in view while the form is used. */
.tracktest-log { position: fixed; z-index: 70; right: 12px; bottom: 12px; width: min(400px, calc(100% - 24px)); border-radius: 12px; background: rgba(30, 27, 22, 0.96); color: #E9E2D4; padding: 12px 14px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.45); }
.tracktest-log-head { display: block; width: 100%; margin: 0 0 8px; padding: 4px 0; border: 0; background: none; text-align: left; font: 600 12.5px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #A79F8F; cursor: pointer; }
.tracktest-log-head span { text-transform: none; letter-spacing: 0; color: #FFB3A3; }
.tracktest-log.folded .tracktest-log-head { margin-bottom: 0; }
.tracktest-log.folded ol { display: none; }
.tracktest-log ol { display: grid; gap: 8px; max-height: 22vh; overflow-y: auto; }
@media (min-width: 980px) { .tracktest-log ol { max-height: 46vh; } .tracktest-log { right: 20px; bottom: 20px; } }
.tracktest-log li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: 8px; background: #2B2720; animation: things-in 0.3s ease; }
.tracktest-log li strong { font: 600 13.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #FFB3A3; }
.tracktest-log time { font-size: 12px; color: #A79F8F; }
.tracktest-log code { grid-column: 1 / -1; white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #D8D0C0; }
.tracktest-log .tracktest-empty { display: block; background: none; padding: 4px 0; font-size: 13.5px; color: #A79F8F; animation: none; }
.tracktest-log .tracktest-empty[hidden] { display: none; }
.saved-link { margin-top: 12px; }
.saved-link[hidden] { display: none; }

/* ───────── Tablet ───────── */
@media (min-width: 720px) {
  :root { --pad: 40px; }
  .section { padding-block: 52px; }
  .section-tight { padding-bottom: 52px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 24px; }
  .hero-frame { aspect-ratio: 16 / 10; }
  .hero-badge { left: 20px; --s: 0; }
  .hero-badge .float { padding: 14px 18px; gap: 12px; }
  .avatar { width: 40px; height: 40px; font-size: 16px; }
  .hero-quote { position: absolute; left: 20px; bottom: 20px; width: 320px; margin: 0; --s: 0; }
  .hero-quote .float { padding: 20px 22px; gap: 10px; }
  .trip-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .trip-row li { flex: none; }
  .ts { padding-block: 72px 76px; }
  .ts-photo { aspect-ratio: 16 / 10; }
  .ts-smiths { left: 20px; }
  .ts-smiths .float { padding: 12px 16px; }
  .ts-next { right: 20px; }
  .ts-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-points li { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ts-copy .btn { width: auto; }
  .ts-logo img { height: 72px; }
  .ts-brand { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .ts-tagline { padding-bottom: 4px; }
  .ts .ts-arrow { display: inline-flex; }
  .ts-n2 .ts-trip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ts-n2 .trip-photo .photo { aspect-ratio: 16 / 9; }
  .ts-n1 .ts-trip-row { grid-template-columns: minmax(0, 1fr); }
  .ts-n1 .trip-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 32px; padding: 10px; }
  .ts-n1 .trip-photo { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .ts-n1 .trip-photo .photo { height: 100%; min-height: 320px; aspect-ratio: auto; object-fit: cover; }
  .ts-n1 .trip-card > span:not(.trip-photo) { grid-column: 2; padding-inline: 0 16px; }
  .ts-n1 .trip-kind { grid-row: 2; }
  .ts-n1 .trip-name { grid-row: 3; font-size: 28px; margin-block: 6px; }
  .ts-n1 .trip-meta { grid-row: 4; font-size: 14.5px; }
  .ts-n1 .trip-smith { grid-row: 5; margin-top: 14px; }
  .ts-n4 .ts-trip-row { display: flex; gap: 20px; margin-inline: 0; padding-inline: 0; overflow-x: auto; overflow-y: hidden; scroll-padding-inline: 0; }
  .ts-n4 .trip-row li { flex: 0 0 calc((100% - 20px) / 2.3); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .stats div { padding-inline: 20px; border-left: 1px solid var(--line); }
  .stats div:first-child { padding-left: 0; border-left: 0; }
  .stats dd { font-size: 26px; }
  .section-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .steps li { grid-template-columns: 1fr; gap: 12px; align-content: start; }
  .steps div { padding-top: 0; }
  .dest-row li { flex-basis: 240px; }
  .area-row li { flex-basis: 300px; }
  .sub-head { font-size: 22px; margin-bottom: 20px; }
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .closing { padding: 40px 40px; border-radius: 20px; }
  .closing-actions { flex-direction: row; }
  .foot-row { grid-template-columns: 1fr auto; }
  .foot-cols { display: flex; gap: 56px; }
  .foot-base { flex-direction: row; justify-content: space-between; align-items: center; }
  .mbar { display: none; }
  body { padding-bottom: 0; }
  .amap-card { flex-basis: 320px; }
  .todo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .todo-bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 24px; }
  .js .todo-bar .btn { display: inline-flex; }
  .destination-hero { padding-bottom: 36px; }
  .destination-hero-photo { height: 420px; }
  .destination-caption { position: absolute; left: 24px; bottom: 24px; margin: 0; max-width: calc(100% - 48px); padding: 20px 26px; }
  .destination-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-bottom: 36px; }
  .destination-facts > div { padding-inline: 28px; border-left: 1px solid var(--line); }
  .destination-facts > div:first-child { padding-left: 0; border-left: 0; }
  .destination-intro { padding-top: 40px; }
  .dl-hero { gap: 40px; padding-block: 48px 52px; }
  .dl-fan { height: 380px; }
        /* From tablets up the spotlight text sits over the photo, on a dark fade from the left. */
  .dl-slide { min-height: 480px; align-items: end; }
  .dl-slide-photo { position: absolute; inset: 0; z-index: -1; }
  .dl-slide-photo .photo { aspect-ratio: auto; height: 100%; }
  .dl-slide-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 27, 22, 0.9) 0%, rgba(30, 27, 22, 0.66) 42%, rgba(30, 27, 22, 0.05) 78%), linear-gradient(0deg, rgba(30, 27, 22, 0.5) 0%, rgba(30, 27, 22, 0) 40%); }
  .dl-slide-text { max-width: 560px; padding: 40px 40px; }
  .chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
  .dest-grid .dest-text { left: 16px; right: 16px; bottom: 16px; gap: 5px; }
  .dest-grid .dest-text strong { font-size: 23px; }
  .dest-grid .dest-text span { font-size: 13px; }
  .dl-quote { padding: 48px 56px; }
  .dl-quote blockquote { font-size: 28px; }
  .contact { padding-block: 48px 64px; }
  .contact-quick { display: flex; flex-wrap: wrap; }
  .enquiry, .enquiry-thanks { padding: 32px; border-radius: 20px; }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
  .enquiry-foot { flex-direction: row; align-items: center; gap: 20px; }
  .enquiry .btn { width: auto; flex: none; }
  .form-note { text-align: left; }
  .detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-list li:first-child { grid-column: 1 / -1; }
}

/* ───────── Desktop: the approved 1440px design ───────── */
@media (min-width: 980px) {
  :root { --pad: clamp(40px, 5.55vw, 80px); --head-h: 88px; }
  .section { padding-block: 56px; }
  .section-tight { padding-bottom: 56px; }
  .lead { font-size: 18px; }
  .ts { padding-block: 96px 96px; }
  .ts-top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: 'head media' 'copy media'; column-gap: clamp(48px, 6vw, 96px); row-gap: 28px; align-items: start; }
  .ts-head { grid-area: head; align-self: end; }
  .ts-copy { grid-area: copy; }
  .ts-media { grid-area: media; align-self: center; margin: 0; }
  .ts h2 { font-size: clamp(34px, 3.2vw, 44px); }
  .ts-photo { aspect-ratio: 1 / 1; }
  .ts-smiths { top: 28px; left: -40px; }
  .ts-next { right: -28px; bottom: 40px; }
  .ts-trips { margin-top: 72px; padding-top: 40px; }
  .ts-trips-head h3 { font-size: 26px; }
  .ts-logo img { height: 84px; }
  .ts-brand { grid-column: 1 / -1; padding-bottom: 28px; margin-bottom: 20px; }
  .ts-top { grid-template-areas: 'brand brand' 'head media' 'copy media'; }
  .ts-brand { grid-area: brand; }
  .ts-n4 .ts-trip-row { gap: 24px; }
  .ts-n4 .trip-row li { flex-basis: calc((100% - 48px) / 3); }

  .logo { font-size: 24px; }
  .logo img { height: 48px; }
  .logo-foot img { height: 96px; }
  .head-inspire { display: inline-flex; }
  .head-actions { gap: 12px; }
  .nav .nav-inspire { display: none; }
  .head-row { flex-wrap: nowrap; }
  .menu-btn, .js .menu-btn { display: none; }
  .nav, .js .nav { order: 0; flex-basis: auto; display: flex; flex-direction: row; align-items: center; gap: 36px; padding: 0; border: 0; }
  .nav a { padding: 8px 0; font-size: 15px; border: 0; }
  .nav a:hover { color: var(--accent-deep); }
  .btn-sm { min-height: 44px; padding: 12px 22px; font-size: 15px; }

  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'copy media' 'stats media'; column-gap: 32px; row-gap: 40px; padding-block: 64px 56px; }
  .hero-copy { grid-area: copy; align-self: end; gap: 22px; }
  .stats { grid-area: stats; align-self: start; }
  .hero-media { grid-area: media; margin-top: 0; }
  .hero-frame { aspect-ratio: auto; height: 100%; min-height: 520px; max-height: 620px; border-radius: 20px; }
  /* The photo sits slightly oversized so it can drift a little against the cards. */
  .hero-photo { transform: scale(1.05) translate3d(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -7px), 0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .hero-badge { top: -22px; left: 24px; }
  .hero-quote { left: 24px; bottom: 28px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .stats div, .stats div:first-child { padding-inline: 0; border-left: 0; }

  .steps { gap: 40px; }
  .steps p { font-size: 14.5px; }
  .dest-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .dest-row li { flex: none; }
  .trip-row { gap: 24px; }
  .trip-photo .photo { aspect-ratio: auto; height: 170px; }
  .dest-text { left: 18px; right: 18px; bottom: 18px; }
  /* Area map on desktop: the map on the left, a compact list on the right with one place
     open at a time. The pair holds still while the page scrolls, and each stretch of
     scrolling (--amap-step) opens the next place. The ::after block is that scrolling room. */
  .amap { --amap-step: 38vh; }
  .amap::after { content: ''; display: block; height: calc((var(--n, 1) - 1) * var(--amap-step)); }
  /* While held, the pair takes the whole window under the menu and sits centred in it, so
     there is never an empty band below the map: the next section arrives as the map lets go. */
  .amap-frame { position: sticky; top: calc(var(--head-h) + 20px); min-height: calc(100vh - var(--head-h) - 40px); align-content: center; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  /* When the list is too tall for the window (many places, small screen) nothing is pinned:
     it becomes a plain list that opens on click. */
  .amap-free .amap-frame { position: static; min-height: 0; }
  .amap-free::after { display: none; }
  .amap-stage { border-radius: 20px; --amap-zoom: 1.08; --amap-pull: 0.35; }
  .amap-pin span { width: 32px; height: 32px; font-size: 14px; }
  .amap-list { flex-direction: column; gap: 0; margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; border-top: 1px solid var(--line); }
  .amap-card { flex: none; gap: 0; border-bottom: 1px solid var(--line); }
  .js .amap-card { opacity: 1; }
  .amap-name { order: 0; margin: 0; }
  .amap-name button { min-height: 54px; padding: 10px 4px; font-size: 17px; }
  .amap-name button:hover { color: var(--accent-deep); }
  .amap-body { order: 1; display: grid; grid-template-rows: 1fr; }
  .js .amap-body { grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .amap-card.is-on .amap-body { grid-template-rows: 1fr; }
  .amap-body > div { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
  .amap-photo .photo { aspect-ratio: auto; height: min(240px, 26vh); border-radius: 12px; }
  .amap-card p { padding: 0 4px 18px; min-height: 4.2em; }
  .amap-dots { display: none; }
  .destination-frame { border-radius: 20px; }
  .destination-hero-photo { height: 460px; }
  .destination-caption { left: 32px; bottom: 32px; }
  .area-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .area-row li { flex: none; }
  .area-row .photo { aspect-ratio: auto; height: 140px; border-radius: 12px; }
  .area-row h3 { font-size: 15.5px; }
  .area-row p { font-size: 14px; }
  .destination-tips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .destination-tips { gap: 24px; }
  .dl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 48px; padding-block: 64px 64px; }
  .dl-hero .hero-media { grid-area: auto; }
  .dl-hero .dl-fan { order: 0; }
  .dl-browse { display: inline-flex; }
  .dl-hero-copy { gap: 22px; }
  .dl-fan { height: 520px; }
  .dl-fan .dl-fan-card { width: 46%; }
      .dl-slide { min-height: 560px; border-radius: 20px; }
  .dl-slide-text { padding: 56px 60px; gap: 16px; }
  .dl-slide-name { font-size: 56px; }
  .dl-all .chips { position: sticky; top: calc(var(--head-h) + 10px); z-index: 5; margin-bottom: 28px; padding: 10px 0; background: rgba(250, 247, 242, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .dest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
  .dest-grid .dest-text { left: 18px; right: 18px; bottom: 18px; }
  .dest-more { display: inline-flex; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease; }
  a.dest-card:hover .dest-more, a.dest-card:focus-visible .dest-more { max-height: 24px; opacity: 1; margin-top: 4px; }
  .dl-quote blockquote { font-size: 32px; }
  .reviews { gap: 24px; }
  .review { padding: 24px; }
  .review blockquote { font-size: 14.5px; }
  .closing { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 56px; }
  .closing-actions { flex: none; gap: 16px; }
  .site-foot { padding-block: 40px 32px; }
  .foot-cols { gap: 64px; }
  .contact-hero { grid-template-areas: 'copy media'; padding-block: 56px 64px; }
  .contact-hero .hero-copy { align-self: center; }
  .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'form details'; column-gap: 56px; padding-block: 0 88px; }
  .contact::before { inset: 0 38% auto 0; height: 100%; }
  .contact-details { align-self: start; padding-top: 8px; }
  .detail-list { grid-template-columns: 1fr; }
  .enquiry, .enquiry-thanks { padding: 40px 44px; gap: 22px; }
  .field input, .field textarea { font-size: 15px; }
  .tracktest { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; padding-top: 48px; }
}

/* ───────── Wide desktop: the review card hangs over the photo's edge, as designed ───────── */
@media (min-width: 1240px) {
  .hero-quote { left: -36px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-right: 20px; }
  .stats div { padding-inline: 20px; border-left: 1px solid var(--line); }
  .stats div:first-child { padding-left: 0; border-left: 0; }
}

/* ───────── Trip page (Trailsmith) ───────── */
/* Each trip takes a look from its theme: colours, patterns and icons. Buttons stay terracotta.
   --t-tint  soft fills (chips, icon circles)      --t-soft  panel backgrounds
   --t-ink   coloured text and icons on light      --t-dark  the Smith card
   --t-line  borders                               --t-motif the decoration behind the hero photo */
.trip { overflow-x: clip; overflow-wrap: break-word; --t-tint: #F1EADD; --t-soft: #F7F2EA; --t-ink: var(--accent); --t-dark: var(--dark); --t-line: #E2D6C2; --t-motif: #E7B9A4; --t-pattern: none; }
.trip-wellness { --t-tint: #E2EAE0; --t-soft: #F0F4EE; --t-ink: #2F4B44; --t-dark: #263F39; --t-line: #CCD9C8; --t-motif: #A9C1AF;
  /* Ripples spreading from the top corner, like rings on still water. */
  --t-pattern: radial-gradient(circle at 100% 0%, transparent 0 70px, rgba(47, 75, 68, 0.08) 70px 71px, transparent 71px 104px, rgba(47, 75, 68, 0.065) 104px 105px, transparent 105px 140px, rgba(47, 75, 68, 0.05) 140px 141px, transparent 141px 178px, rgba(47, 75, 68, 0.035) 178px 179px, transparent 179px); }
.trip-culinary { --t-tint: #F5E4C8; --t-soft: #FBF3E5; --t-ink: #8A4B12; --t-dark: #43260E; --t-line: #EBD5B0; --t-motif: #E2AC5E;
  /* A scatter of peppercorns. */
  --t-pattern: radial-gradient(rgba(138, 75, 18, 0.11) 1.3px, transparent 1.8px) 0 0 / 17px 17px, radial-gradient(rgba(168, 75, 34, 0.08) 1px, transparent 1.5px) 8px 9px / 17px 17px; }
.trip h2 em { color: var(--accent); }
.preview-ribbon { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #FFF4D6; border: 1px solid #EED9A0; color: #5E4A12; font-size: 13.5px; line-height: 1.45; }

/* Hero. Phones: the photo with its two cards comes first, so it shows without scrolling. */
.trip-hero { display: grid; gap: 26px; padding-block: 18px 34px; }
.trip-hero-copy { display: flex; flex-direction: column; gap: 16px; }
.trip-hero h1 { font-size: clamp(33px, 8.4vw, 56px); }
.trip-hero .lead { max-width: 540px; }
.trip-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 99px; background: var(--t-tint); color: var(--t-ink); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; }
.trip-chip .icon { width: 18px; height: 18px; }
.trip-meta-row { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; color: var(--body); }
.trip-meta-row li { display: inline-flex; align-items: center; gap: 7px; }
.trip-meta-row .icon { width: 17px; height: 17px; color: var(--t-ink); }
.trip-meta-row a { color: inherit; text-decoration-color: var(--t-line); text-underline-offset: 3px; }
.avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.trip-past-note { display: flex; align-items: baseline; gap: 9px; font-size: 14px; color: var(--muted); }
.dot-muted { background: #B9AC94; transform: translateY(-1px); }
.trip-hero-media { order: -1; margin-top: 14px; isolation: isolate; }
.trip-hero .hero-frame { aspect-ratio: 6 / 5; }
.trip-hero .hero-frame { position: relative; z-index: 1; border-color: var(--t-line); }
.trip-motif { position: absolute; z-index: 0; top: -16%; right: -18%; width: 64%; max-width: 360px; fill: none; stroke: var(--t-motif); stroke-width: 1.4; pointer-events: none; }
.trip-hero .hero-badge, .trip-card-float { z-index: 3; }
.trip-hero .hero-badge .hero-badge-text span { order: -1; }
.trip-card-float { position: relative; margin: -34px 12px 0 auto; max-width: 250px; --d: -18; --s: 10; }
.trip-card-float .float { display: flex; flex-direction: column; gap: 3px; padding: 11px 15px; background: var(--white); border-radius: 14px; box-shadow: 0 18px 36px rgba(30, 27, 22, 0.18); }
.trip-float-kicker { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-ink); }
.trip-card-float strong { font: 600 16px/1.25 var(--serif); }
.trip-hero .hero-badge .float { gap: 8px; padding: 8px 12px; }
.trip-hero .hero-badge-text strong { font-size: 12.5px; }
.trip-hero .hero-badge-text span { font-size: 11.5px; }
.trip-float-seats { font-size: 12.5px; font-weight: 600; color: var(--accent); }
/* Wellness: the rings breathe, four seconds in and four out. Culinary: steam rises. */
.trip-wellness .trip-motif circle { transform-origin: 120px 120px; animation: breathe 8s ease-in-out infinite; }
.trip-wellness .trip-motif circle:nth-child(2) { animation-delay: -0.4s; opacity: 0.8; }
.trip-wellness .trip-motif circle:nth-child(3) { animation-delay: -0.8s; opacity: 0.6; }
.trip-wellness .trip-motif circle:nth-child(4) { animation-delay: -1.2s; opacity: 0.4; }
@keyframes breathe { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.04); } }
.trip-culinary .trip-motif { stroke-width: 5; stroke-linecap: round; animation: turn 90s linear infinite; }
.trip-culinary .trip-motif circle:nth-child(1) { stroke-dasharray: 0.1 13; }
.trip-culinary .trip-motif circle:nth-child(2) { stroke-dasharray: 0.1 15; opacity: 0.75; }
.trip-culinary .trip-motif circle:nth-child(3) { stroke-dasharray: 0.1 17; opacity: 0.5; }
@keyframes turn { to { transform: rotate(360deg); } }
.trip-culinary .trip-chip .icon path + path { stroke-dasharray: 3 14; animation: steam 2.8s linear infinite; }
@keyframes steam { to { stroke-dashoffset: -17; } }
.trip-classic .trip-motif circle:last-child { opacity: 0.5; }

/* Quick facts under the hero, each with its icon. */
.trip-facts dt { display: flex; align-items: center; gap: 6px; }
.trip-facts dt .icon { width: 15px; height: 15px; color: var(--t-ink); }
.trip-facts dd span { font-weight: 400; color: var(--muted); }

/* The bar under the menu: the trip, a link to each part of the page, and the button. */
.trip-bar { position: sticky; top: var(--head-h); z-index: 40; margin-top: 8px; background: rgba(250, 247, 242, 0.95); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: top 0.28s ease; }
.trip-bar-row { display: flex; align-items: center; gap: 18px; min-height: 50px; }
.trip-bar-name { display: none; }
.trip-bar-links { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); flex: 1; }
.trip-bar-links::-webkit-scrollbar { display: none; }
.trip-bar-links a { flex: none; padding: 14px 0 12px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease; }
.trip-bar-links a:hover { color: var(--ink); }
.trip-bar-links a[aria-current] { color: var(--ink); border-bottom-color: var(--coral); }
.trip-bar-end { display: none; }
.trip-status { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--sand); color: var(--muted); }
.trip-status-open { background: #E1EFE5; color: #24543B; }
.trip-status-sold-out { background: #FBEDE7; color: var(--accent-deep); }
.trip-status-coming-soon { background: #F6EBD3; color: #6E4C0E; }
@media (max-width: 719px) {
  .head-hide .trip-bar { top: 0; }
  .jstage .journey-days { transition: top 0.28s ease; }
  .head-hide .jstage .journey-days { top: calc(var(--jtop, 130px) - var(--head-h)); }
}

/* Body: the story on the left, the pricing card held beside it on desktop. */
.trip-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.trip-section { padding-block: 40px 4px; scroll-margin-top: calc(var(--head-h) + 64px); }
.trip-section > h2, .trip-section .journey-head h2 { margin-top: 10px; font-size: clamp(25px, 5.8vw, 32px); }
.trip-prose { max-width: 720px; margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--body); }
.trip-prose p + p { margin-top: 14px; }
.trip-panel { position: relative; margin-top: 28px; padding: 24px 20px; border-radius: 18px; background: var(--t-pattern), var(--t-soft); border: 1px solid var(--t-line); }
.trip-panel .label-head { color: var(--t-ink); margin-bottom: 18px; }

/* Programme at a glance: an icon for each highlight. */
.hl-grid { display: grid; gap: 18px; }
.hl-grid li { display: flex; align-items: flex-start; gap: 14px; }
.hl-icon { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--white); color: var(--t-ink); box-shadow: 0 6px 16px -8px rgba(30, 27, 22, 0.3); }
.hl-icon em { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--t-ink); color: var(--white); font: 600 11px/20px var(--sans); font-style: normal; text-align: center; }
.hl-text { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.hl-text strong { font-size: 15.5px; line-height: 1.35; }
.hl-text span { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Meet your Smith: a dark card in the theme's deepest colour. */
.smith { display: grid; overflow: hidden; border-radius: 20px; background: var(--t-dark); color: var(--bg); }
.smith-photo { position: relative; }
.smith-photo .photo { aspect-ratio: 4 / 3.4; }
.smith-handle { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.smith-handle span { color: var(--coral); }
.smith-text { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 28px; }
.smith .eyebrow { color: #B9B1A1; }
.smith h2 { color: var(--bg); font-size: clamp(27px, 6.4vw, 34px); }
.smith-role { font-size: 14px; font-weight: 600; color: #E3DACB; }
.smith-quote { position: relative; margin: 4px 0; padding-left: 22px; font: italic 600 19px/1.45 var(--serif); color: var(--bg); }
.smith-quote::before { content: '“'; position: absolute; left: -2px; top: -10px; font: 600 46px/1 var(--serif); color: var(--coral); }
.smith-bio { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.65; color: #D2CABB; }
.smith-featured { font-size: 13px; color: #D2CABB; }
.smith-featured span { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #B9B1A1; margin-right: 6px; }

/* The journey: one day under another. With the script, the day crossing the middle of the
   window opens and the others close, smoothly (.jauto, .on). Without it, each opens with a tap. */
.journey-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
.journey-days { position: relative; display: flex; flex-direction: column; gap: 10px; overflow-anchor: none; }
.jday { border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.jday-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.jday-head::-webkit-details-marker { display: none; }
.jday-head:hover .jday-title strong { color: var(--accent-deep); }
.jday-num { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--t-tint); color: var(--t-ink); font: 600 21px/1 var(--serif); transition: background 0.2s ease, color 0.2s ease; }
.jday.on .jday-num, html:not(.js) .jday[open] .jday-num { background: var(--t-ink); color: var(--white); }
.jday-num small { font: 600 9.5px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1px; }
.jday-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.jday-title span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.jday-title strong { font: 600 19px/1.25 var(--serif); transition: color 0.15s ease; }
.jday { position: relative; }
.jday-draft { position: absolute; top: -9px; right: 16px; flex: none; padding: 2px 8px; border-radius: 99px; background: #FFF4D6; color: #6E5512; font-size: 11px; font-weight: 600; }
.jday .faq-mark { flex: none; }
.jday.on .faq-mark, html:not(.js) .jday[open] .faq-mark { transform: rotate(45deg); background: var(--t-tint); border-color: var(--t-tint); }
.jbody { display: grid; grid-template-rows: 1fr; }
.jbody > div { min-height: 0; overflow: hidden; }
.jauto .jbody { grid-template-rows: 0fr; transition: grid-template-rows 0.8s cubic-bezier(0.45, 0, 0.2, 1); }
.jauto .jday.on .jbody { grid-template-rows: 1fr; }
.jauto .jslots { opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.6s ease; }
.jauto .jday.on .jslots { opacity: 1; transform: none; transition-delay: 0.25s; }
/* The list is held still under the menu while the page scrolls, and each stretch of
   scrolling (--jstep) opens the next day (.jstage, set by site.js). The ::after block is that
   scrolling room. When the list is taller than the window (.jclip), it shows through a window
   that slides along so the open day is always in view, with the edges faded. */
.journey { --jstep: 34vh; }
.jstage .journey-days { position: sticky; top: var(--jtop, 130px); }
.jstage::after { content: ''; display: block; height: calc((var(--n, 1) - 1) * var(--jstep)); }
.jclip .journey-days { height: var(--jwin); overflow: hidden; margin-inline: -10px; padding: 0 10px; }
.jclip .journey-days > li > .jday { transform: translateY(calc(var(--jshift, 0) * -1px)); transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1); }
.jclip.jfade-top .journey-days { -webkit-mask-image: linear-gradient(transparent, #000 44px); mask-image: linear-gradient(transparent, #000 44px); }
.jclip.jfade-bottom .journey-days { -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.jclip.jfade-top.jfade-bottom .journey-days { -webkit-mask-image: linear-gradient(transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.jday { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.jauto .jday.on { border-color: var(--t-line); box-shadow: 0 14px 30px -20px rgba(30, 27, 22, 0.28); }
.jslots { display: flex; flex-direction: column; gap: 12px; padding: 2px 18px 20px; }
.jslot { display: grid; grid-template-columns: 26px 1fr; align-content: start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
.jslot b { display: block; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.jslot-icon { color: var(--t-ink); padding-top: 3px; }
.jslot-icon .icon { width: 21px; height: 21px; }

/* The venue: a wide photo with its name on a card. */
.venue-stage { position: relative; margin-top: 4px; }
.venue-photo { aspect-ratio: 16 / 11; border-radius: 18px; }
.venue-caption { position: relative; z-index: 1; margin: -38px 12px 0; padding: 16px 20px; border-radius: 14px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 16px 34px rgba(30, 27, 22, 0.14); }
.venue-caption h2 { margin-top: 4px; font-size: clamp(24px, 5.6vw, 30px); }
.venue-prose { margin-top: 20px; }

/* Who it is for, and travel notes. */
.who { margin-top: 40px; padding-block: 26px; scroll-margin-top: auto; }
.trip-panel-body { margin-top: 12px; max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--body); }
.who-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.who-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 99px; background: var(--white); border: 1px solid var(--t-line); font-size: 14px; font-weight: 600; line-height: 1.3; }
.who-tags .icon { width: 17px; height: 17px; color: var(--t-ink); }
.travel-grid { display: grid; gap: 20px; }
.travel-box { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.travel-box h3 { margin-bottom: 12px; }
.travel-box ul, .incl-card ul { display: flex; flex-direction: column; gap: 10px; }
.travel-box li, .incl-card li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--body); }
.travel-box .icon, .incl-card .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--t-ink); }

/* The pricing card. On desktop it is held beside the story while it scrolls. */
.trip-aside { padding-top: 40px; scroll-margin-top: calc(var(--head-h) + 64px); }
.price-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(30, 27, 22, 0.3); }
.price-card::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--coral); }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price strong { font: 600 38px/1.05 var(--serif); letter-spacing: -0.02em; }
.price .price-tbc { font-size: 28px; }
.price span { font-size: 14.5px; color: var(--muted); }
.price-seats { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--accent); }
.price-facts > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.price-facts > div:last-child { border-bottom: 1px solid var(--line); }
.price-facts dt { color: var(--muted); }
.price-facts dd { font-weight: 600; text-align: right; }
.price-notes { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.price-actions { display: flex; flex-direction: column; gap: 10px; }
.price-actions .btn { width: 100%; }
.price-note { font-size: 13.5px; text-align: center; color: var(--muted); }
.price-host { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.price-host b { color: var(--ink); }

/* Included and not included, the gallery, the FAQ and other trips. */
.trip-wide { padding-block: 44px 0; }
.trip-wide + .trip-wide { padding-top: 48px; }
.trip + .section-tight { padding-top: 56px; }
.incl { display: grid; gap: 14px; }
.incl-card { padding: 24px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--white); }
.incl-card h3 { font: 600 21px/1.3 var(--serif); margin-bottom: 16px; }
.incl-yes { background: var(--t-pattern), var(--t-soft); border-color: var(--t-line); }
.incl-no .icon { color: var(--muted); }
.gallery li { flex: 0 0 min(76%, 320px); }
.gallery .photo { aspect-ratio: 4 / 5; border-radius: 16px; height: 100%; }
.faq-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.faq-head h2 { font-size: clamp(25px, 5.8vw, 32px); }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 16px; font-size: 16.5px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-mark { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease; }
.faq-mark::before, .faq-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); }
.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-mark { transform: rotate(45deg); background: var(--t-tint); border-color: var(--t-tint); }
.faq-answer { display: flex; flex-direction: column; gap: 10px; padding: 0 44px 20px 0; font-size: 15.5px; line-height: 1.65; color: var(--body); }

@media (min-width: 720px) {
  .trip-hero { padding-block: 26px 44px; }
  .trip-card-float { position: absolute; right: 18px; bottom: 18px; margin: 0; width: 240px; --s: 0; }
  .trip-hero .hero-frame { aspect-ratio: 16 / 10; }
  .trip-facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); row-gap: 18px; }
  .trip-bar-name { display: flex; flex-direction: column; flex: none; padding-right: 18px; border-right: 1px solid var(--line); line-height: 1.25; }
  .trip-bar-name strong { font: 600 17px/1.2 var(--serif); }
  .trip-bar-name span { font-size: 12px; color: var(--muted); }
  .trip-bar-links { margin-inline: 0; padding-inline: 0; }
  .trip-bar-end { display: flex; align-items: center; gap: 12px; flex: none; }
  .trip-panel { padding: 30px 30px; }
  .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
  .smith { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .smith-photo .photo { aspect-ratio: auto; min-height: 100%; }
  .smith-text { padding: 36px 34px; }
  .venue-caption { position: absolute; left: 22px; bottom: 22px; margin: 0; max-width: calc(100% - 44px); }
  .travel-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .price-card { padding: 28px 28px; }
  .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .incl-card { padding: 30px 32px; }
  /* Gallery: a mosaic, the first photo large. */
  .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 14px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .gallery li { min-width: 0; }
  .gallery li:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery-1 li:first-child { grid-column: 1 / -1; }
  .gallery-2 li, .gallery-3 li:not(:first-child) { grid-column: span 2; }
  .gallery-2 li { grid-row: span 2; }
  .gallery-4 li:last-child { grid-column: span 2; }
  .gallery .photo { aspect-ratio: auto; }
  .faq-answer { max-width: 760px; }
}

@media (min-width: 980px) {
  .trip-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 52px; padding-block: 36px 56px; }
  .trip-hero-media, .trip-hero-copy { grid-area: auto; }
  .trip-hero-media { order: 0; margin-top: 0; }
  .trip-hero-copy { gap: 20px; }
  .trip-hero .hero-frame { aspect-ratio: 1 / 0.96; height: auto; min-height: 0; max-height: none; }
  .trip-hero .hero-quote, .trip-card-float { right: -22px; bottom: 32px; }
  .trip-motif { top: -12%; right: -16%; width: 58%; }
  .trip-bar-row { min-height: 60px; gap: 28px; }
  .trip-bar-links { gap: 28px; }
  .trip-bar-links a { padding-block: 19px 17px; font-size: 14.5px; }
  .trip-layout { grid-template-columns: minmax(0, 1fr) 372px; column-gap: 64px; align-items: start; }
  .trip-aside { position: sticky; top: calc(var(--head-h) + 84px); padding-top: 48px; }
  .trip-section { padding-top: 56px; }
  /* Desktop journey: a timeline, a line joining the day circles; each day opens below its title. */
  .journey-days { gap: 14px; }
  .journey-days::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(var(--t-line) 0 6px, transparent 6px 12px); }
  .jday-draft { position: static; }
  .jday, .jauto .jday.on { border: 0; border-radius: 0; background: none; box-shadow: none; }
  .jday-head { gap: 22px; padding: 0; }
  .jday-num { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg); }
  .jday .jslots { margin: 12px 0 6px 76px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
  .jday:hover .jslots { border-color: var(--t-line); box-shadow: 0 14px 30px -18px rgba(30, 27, 22, 0.25); }
  .jslots:has(.jslot + .jslot + .jslot) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .jslots:has(.jslot + .jslot):not(:has(.jslot + .jslot + .jslot)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .jslots:has(.jslot + .jslot) .jslot { grid-template-columns: 1fr; gap: 6px; }
  .venue-photo { aspect-ratio: 16 / 9; }
  .trip-wide { padding-top: 64px; }
  .gallery { grid-auto-rows: 230px; gap: 18px; }
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--head-h) + 84px); }
}

@media (prefers-reduced-motion: reduce) {
  .trip-motif, .trip-motif circle, .trip-chip .icon path { animation: none !important; }
}

/* ───────── Seat panel (trip pages) ─────────
   Tapping a trip button slides this up from the bottom on phones and in from the right on
   desktop: a short form for holding a seat or joining the list (site.js, "Seat panel"). */
.seat-sheet { position: fixed; inset: 0; z-index: 100; }
.seat-sheet[hidden] { display: none; }
.seat-backdrop { position: absolute; inset: 0; background: rgba(30, 27, 22, 0.45); opacity: 0; transition: opacity 0.3s ease; }
.seat-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px rgba(30, 27, 22, 0.25); transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
.seat-sheet.is-open .seat-backdrop { opacity: 1; }
.seat-sheet.is-open .seat-panel { transform: none; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.seat-head { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 40px 16px 0; }
.seat-grip { align-self: center; width: 40px; height: 4px; margin: 0 -40px 8px 0; border-radius: 4px; background: var(--line); }
.seat-head h2 { font-size: clamp(25px, 6.6vw, 32px); }
.seat-summary { font-size: 14px; color: var(--muted); }
.seat-close { position: absolute; top: 20px; right: 0; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.seat-close:hover { border-color: var(--ink); }
.seat-form { display: flex; flex-direction: column; gap: 14px; }
.seat-form[hidden], .seat-thanks[hidden] { display: none; }
.seat-form textarea { min-height: 76px; }
.seat-count { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.seat-count-label { font-size: 13px; font-weight: 600; color: var(--body); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; background: var(--white); }
.stepper button { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 20px; cursor: pointer; border-radius: 50%; }
.stepper button:hover { color: var(--accent); }
.stepper input { width: 44px; padding: 0; border: 0; background: none; text-align: center; font: 600 17px/1 var(--sans); color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; box-shadow: none; }
.seat-send { width: 100%; justify-content: center; margin-top: 4px; }
.seat-note { margin-top: -4px; text-align: center; font-size: 13px; color: var(--muted); }
.seat-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 0 8px; }
.seat-thanks:focus { outline: none; }
.seat-thanks h2 { font-size: clamp(24px, 6vw, 30px); }
.seat-thanks p { color: var(--body); }
.seat-done { padding: 0; border: 0; background: none; cursor: pointer; font: 600 15px/1.4 var(--sans); color: var(--accent); }
@media (min-width: 980px) {
  .seat-panel { left: auto; top: 0; width: 460px; max-height: none; padding: 28px 36px 36px; border-radius: 0; box-shadow: -24px 0 60px rgba(30, 27, 22, 0.22); transform: translateX(100%); }
  .seat-grip { display: none; }
  .seat-head { padding-top: 12px; }
  .seat-close { top: 10px; }
}

/* ───────── Blog (Inspire Me) ───────── */
/* Phones: the headline, then the lead story (so a photo shows without scrolling),
   then the intro and the search box. Desktop: words on the left, the story on the right. */
.blog-hero { display: grid; gap: 22px; padding-block: 26px 44px; }
.blog-hero-head { display: flex; flex-direction: column; gap: 14px; }
.blog-hero-tools { display: flex; flex-direction: column; gap: 18px; }
.blog-search { display: flex; flex-direction: column; gap: 9px; }
.blog-search label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.blog-search-box { position: relative; display: block; }
.blog-search-box svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.blog-search input { width: 100%; min-height: 54px; padding: 12px 18px 12px 48px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 16px/1.3 var(--sans); box-shadow: 0 12px 28px -14px rgba(30, 27, 22, 0.25); -webkit-appearance: none; appearance: none; }
.blog-search input::placeholder { color: #9A8F7E; }
.blog-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 75, 34, 0.14); }
.blog-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.blog-try > span { margin-right: 2px; }
.blog-try button { min-height: 34px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--ink-soft); font: 500 13.5px/1.2 var(--sans); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.blog-try button:hover { background: var(--white); border-color: var(--muted); }
.no-js .blog-try, html:not(.js) .blog-try { display: none; }

.blog-lead { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Phones: the lead story comes straight after the headline. */
.blog-hero-head { order: 1; }
.blog-lead { order: 2; }
.blog-hero-tools { order: 3; }
.blog-why { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; line-height: 1.45; color: var(--body); }
.blog-why[hidden] { display: none; }
.blog-why strong { color: var(--ink); }
.blog-why-clear { padding: 6px 0; border: 0; background: none; color: var(--accent); font: 600 13.5px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.blog-lead .post-photo .photo { aspect-ratio: 5 / 4; }
.blog-lead .post-photo { border-radius: 18px; }
.blog-lead .post-text { position: relative; z-index: 1; margin: -64px 12px 0; padding: 18px 20px 20px; border-radius: 14px; background: var(--white); box-shadow: 0 18px 38px rgba(30, 27, 22, 0.16); gap: 8px; }
.blog-lead .post-title { font-size: clamp(22px, 6vw, 30px); line-height: 1.16; }
.blog-lead .post-excerpt { -webkit-line-clamp: 3; }
.blog-lead .post-go { display: inline-flex; }
.blog-lead .post-flag { top: 14px; left: 14px; }
/* The author rides on the lead photo as a small floating card. */
.blog-lead .post-float { position: absolute; z-index: 1; top: 14px; right: 14px; display: flex; align-items: center; gap: 9px; max-width: 60%; padding: 7px 12px 7px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 24px rgba(30, 27, 22, 0.18); animation: drift-a 7s ease-in-out infinite; }
.blog-lead .post-float .avatar { width: 30px; height: 30px; font-size: 13px; }
.blog-lead .post-float > span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.blog-lead .post-float strong { color: var(--ink); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blog-lead .post-float > span:not(.avatar) > span { display: none; }

/* A post as a card: in the grid, in a sideways row, and as the lead story. */
.post-card { display: flex; flex-direction: column; gap: 13px; height: 100%; color: var(--ink); text-decoration: none; }
.post-card:hover { color: var(--ink); }
.post-photo { position: relative; display: block; overflow: hidden; border-radius: 14px; isolation: isolate; }
.post-photo .photo { aspect-ratio: 3 / 2; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.post-card:hover .post-photo .photo { transform: scale(1.05); }
.post-flag { position: absolute; z-index: 1; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--accent); color: var(--white); font-size: 12px; font-weight: 600; line-height: 1.3; }
.post-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.post-flag[hidden], .post-seen[hidden] { display: none; }
.post-seen { position: absolute; z-index: 1; bottom: 10px; right: 10px; padding: 4px 10px; border-radius: 99px; background: rgba(30, 27, 22, 0.72); color: var(--bg); font-size: 11.5px; font-weight: 600; }
.post-seen::before { content: '✓ '; color: var(--coral); }
.post-float { display: none; }
.post-text { display: flex; flex-direction: column; gap: 7px; }
.post-kicker { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.post-kicker .dot { width: 6px; height: 6px; }
.post-title { font: 600 20px/1.25 var(--serif); letter-spacing: -0.01em; text-wrap: balance; transition: color 0.15s ease; }
.post-title em { font-style: italic; color: var(--accent); }
a.post-card:hover .post-title { color: var(--accent-deep); }
.post-excerpt { font-size: 14.5px; line-height: 1.55; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { font-size: 13px; color: var(--muted); }
.post-go { display: none; align-items: center; gap: 6px; margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.post-go span { color: var(--coral); transition: transform 0.15s ease; }
a.post-card:hover .post-go span { transform: translateX(3px); }
.post-row li { flex: 0 0 min(80%, 320px); }
.post-row .post-title { font-size: 18.5px; }

.blog-foryou[hidden] { display: none; }
.blog-foryou .section-head .note::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.blog-all .chips { margin-bottom: 26px; }
.post-grid { display: grid; gap: 38px; }
.post-grid > li[hidden], .post-grid > .is-above { display: none; }
.filtering .post-grid > .is-above:not([hidden]) { display: block; }
.filtering .post-cta { display: none; }
/* The card in the middle of the list that asks to plan a trip. */
.post-cta > div { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 100%; min-height: 280px; padding: 30px 24px; border-radius: 16px; background: var(--green); color: var(--bg); isolation: isolate; }
.post-cta > div::before, .post-cta > div::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(250, 247, 242, 0.14); }
.post-cta > div::before { width: 300px; height: 300px; right: -120px; top: -120px; }
.post-cta > div::after { width: 200px; height: 200px; right: -70px; top: -70px; }
.post-cta .eyebrow { color: rgba(250, 247, 242, 0.72); }
.post-cta-h { font: 600 26px/1.18 var(--serif); letter-spacing: -0.01em; }
.post-cta-h em { color: #FFB7A6; }
.post-cta p:not(.eyebrow):not(.post-cta-h) { font-size: 15px; color: rgba(250, 247, 242, 0.82); }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.post-cta .btn-ghost-dark { border-color: rgba(250, 247, 242, 0.32); }
.blog-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 34px 22px; border: 1px dashed #CFC4B0; border-radius: 16px; text-align: center; }
.blog-empty[hidden] { display: none; }
.blog-empty p { font: 600 20px/1.3 var(--serif); max-width: 420px; }

/* ───────── One blog post ───────── */
.post { overflow-wrap: break-word; }
.post-progress { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.post-progress span { display: block; height: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left; }
.post-hero { display: grid; gap: 28px; padding-bottom: 40px; }
.post-hero-copy { display: flex; flex-direction: column; gap: 16px; }
.post-hero h1 { font-size: clamp(32px, 8.2vw, 54px); }
.post-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 14px; line-height: 1.35; }
.post-byline > span:not(.post-byline-meta) { display: flex; flex-direction: column; }
.post-byline > span span { font-size: 13px; color: var(--muted); }
.post-row > li[hidden] { display: none; }
.post-byline-meta { flex-basis: 100%; font-size: 13.5px; color: var(--muted); }
.post-hero-media { margin-top: 14px; }
.post-frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; border: 1px solid #D8C9AF; background: #E4D7C3; }
.post-frame .photo { height: 100%; }
.post-badge { position: absolute; z-index: 2; top: -18px; left: 12px; --d: 12; --s: -10; }
.post-badge .float { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; background: var(--white); box-shadow: 0 14px 30px rgba(30, 27, 22, 0.16); }
.post-badge-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--white); font: 600 17px/1 var(--serif); }
.post-badge .float > span:last-child { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: var(--muted); }
.post-badge strong { font-size: 13px; color: var(--ink); }
.post-place { position: relative; z-index: 2; width: fit-content; max-width: 250px; margin: -42px 12px 0 auto; --d: -18; --s: 10; }
.post-place .float { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 14px; background: var(--dark); color: var(--bg); text-decoration: none; box-shadow: 0 18px 36px rgba(30, 27, 22, 0.24); }
.post-place a.float:hover { color: var(--bg); }
.post-place-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #FFB7A6; }
.post-place strong { font: 600 21px/1.2 var(--serif); }
.post-place .float > span:last-child:not(.post-place-label) { font-size: 13px; color: #C9C1B2; }
.post-place .float > span span { color: var(--coral); }

.post-layout { display: grid; gap: 0; padding-bottom: 44px; }
.post-rail { display: none; }
.post-toc-phone { margin-bottom: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.post-toc-phone summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.post-toc-phone summary::-webkit-details-marker { display: none; }
.post-toc-phone summary::after { content: '+'; font: 400 22px/1 var(--sans); color: var(--accent); }
.post-toc-phone[open] summary::after { content: '−'; }
.post-toc-phone summary span { margin-left: auto; margin-right: 12px; padding: 2px 8px; border-radius: 99px; background: var(--sand); color: var(--muted); font-size: 12px; }
.post-toc-phone ol { padding: 0 18px 14px; counter-reset: toc; }
.post-toc-phone li { counter-increment: toc; border-top: 1px solid var(--line); }
.post-toc-phone a { display: flex; gap: 12px; padding: 11px 0; color: var(--ink-soft); text-decoration: none; font-size: 15px; line-height: 1.4; }
.post-toc-phone a::before { content: counter(toc, decimal-leading-zero); color: var(--coral); font-weight: 600; font-size: 13px; padding-top: 1px; }

.prose { font-size: 17.5px; line-height: 1.75; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.15em; }
.prose > h2 { margin-top: 1.9em; font-size: clamp(24px, 5.6vw, 30px); scroll-margin-top: calc(var(--head-h) + 20px); }
.prose > h3 { margin-top: 1.6em; font: 600 20px/1.3 var(--serif); }
.prose > p:first-child::first-letter { float: left; margin: 0.06em 0.12em 0 0; font: 600 3.7em/0.82 var(--serif); color: var(--accent); }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li + li { margin-top: 0.45em; }
.prose ul li::before { content: ''; position: absolute; left: 5px; top: 0.7em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.prose a:not(.btn):not(.link-arrow) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.post-quote { margin-block: 1.8em !important; padding: 4px 0 4px 22px; border-left: 3px solid var(--coral); }
.post-quote p { font: italic 600 clamp(22px, 5.4vw, 28px)/1.35 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.post-figure { margin-block: 1.8em !important; }
.post-figure .photo { border-radius: 14px; aspect-ratio: 3 / 2; }
.post-figure figcaption { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 2em; }
.post-gallery .post-figure { margin: 0 !important; }
.post-gallery .post-figure:first-child { grid-column: 1 / -1; }

/* Blocks the story editor can add: two photos side by side, a video, tip and facts boxes, steps, a divider. */
.post-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.post-pair .photo { aspect-ratio: 4 / 5; }
.post-video-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--dark); }
.post-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-videocard { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--dark); color: var(--bg); text-decoration: none; }
.post-videocard:hover { color: var(--bg); }
.post-videocard > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.4; color: #C9C1B2; overflow-wrap: anywhere; }
.post-videocard strong { color: var(--bg); font-size: 16px; }
.post-play { flex: none; position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); }
.post-play::after { content: ''; position: absolute; left: 19px; top: 15px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--white); }
.post-tip, .post-facts { margin-block: 1.8em !important; padding: 20px 22px; border-radius: 16px; font-size: 16px; line-height: 1.65; }
.post-tip { background: #FDEFE9; border: 1px solid #F6D2C4; }
.post-tip-h, .post-facts-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 600 17px/1.3 var(--serif); color: var(--ink); }
.post-tip-h svg { color: var(--accent); }
.post-tip p:not(.post-tip-h) { color: var(--ink-soft); }
.post-facts { background: var(--white); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(30, 27, 22, 0.3); }
.post-facts-h svg { color: var(--green); }
.post-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 12px; }
.post-facts dl div { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.post-facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.post-facts dd { font-weight: 600; color: var(--ink); }
.post-short { position: relative; margin: 0 0 2em !important; padding: 20px 22px 20px 26px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(30, 27, 22, 0.3); font-size: 17px; line-height: 1.65; color: var(--ink); }
.post-short::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--coral); }
.post-short-h { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.post-faq { margin-top: 48px; }
.post-faq h2 { margin-bottom: 18px; font: 500 clamp(26px, 4vw, 34px)/1.15 var(--serif); color: var(--ink); }
.post-faq details { border-top: 1px solid var(--line); }
.post-faq details:last-child { border-bottom: 1px solid var(--line); }
.post-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font: 600 17px/1.4 var(--sans); color: var(--ink); cursor: pointer; list-style: none; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: '+'; flex: none; font: 400 24px/1 var(--sans); color: var(--accent); }
.post-faq details[open] summary::after { content: '−'; }
.post-faq details p { padding: 0 0 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.prose .post-steps { counter-reset: step; }
.prose .post-steps li { position: relative; padding-left: 46px; min-height: 32px; counter-increment: step; }
.prose .post-steps li + li { margin-top: 0.7em; }
.prose .post-steps li::before { content: counter(step); position: absolute; left: 0; top: 0.1em; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--white); font: 600 14px/30px var(--sans); text-align: center; }
.post-rule { height: 8px; margin-block: 2.2em !important; border: 0; background: radial-gradient(circle, var(--coral) 3px, transparent 3.5px) center / 22px 8px repeat-x; width: 66px; margin-inline: auto; }

/* "Plan this trip": in the story on phones, held in the side column on desktop. */
.post-plan { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 16px; background: var(--sand); }
.prose > .post-plan { margin-block: 2em; }
.post-plan .eyebrow { font-size: 11.5px; }
.post-plan-photo { display: block; overflow: hidden; border-radius: 12px; }
.post-plan-photo .photo { aspect-ratio: 16 / 9; }
.post-plan-h { font: 600 23px/1.22 var(--serif); color: var(--ink); }
.post-plan-h em { color: var(--accent); }
.post-plan-line { font-size: 15px; line-height: 1.55; color: var(--body); }
.post-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.post-plan-actions .btn { flex: 1 1 auto; }
.post-plan .link-arrow { font-size: 14px; }

.post-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.post-topics a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); color: var(--ink-soft); font-size: 13.5px; text-decoration: none; }
.post-topics a:hover { border-color: var(--muted); color: var(--ink); }
.post-share { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; padding-block: 22px; border-block: 1px solid var(--line); }
.post-share p { font-weight: 600; }
.post-share > span { display: flex; flex-wrap: wrap; gap: 10px; }
.post-author { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.post-author .avatar.post-author-face { width: 32px; height: 32px; font-size: 13px; flex: none; }
.post-author strong { color: var(--ink); font-weight: 600; }

.post-trip-inner { display: grid; gap: 22px; padding: 26px 20px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.post-trip-copy { display: flex; flex-direction: column; gap: 12px; }
.post-trip-copy p:not(.ts-logo-sm) { font-size: 15.5px; color: var(--body); }
.ts-logo-sm img { width: auto; height: 38px; }

@media (min-width: 720px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
  .post-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .post-row li { flex: none; }
  .blog-lead .post-photo .photo { aspect-ratio: 16 / 10; }
  .blog-lead .post-text { margin: -96px 0 0 24px; max-width: 480px; padding: 22px 24px 24px; }
  .blog-lead .post-float > span:not(.avatar) > span { display: block; }
  .post-row[data-n='1'] { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .post-row[data-n='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-frame { aspect-ratio: 16 / 10; }
  .post-badge { left: 20px; --s: 0; }
  .post-place { position: absolute; right: 20px; bottom: 20px; margin: 0; --s: 0; }
  .post-share { flex-direction: row; align-items: center; justify-content: space-between; }
  .post-trip-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 34px; gap: 36px; }
  .post-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .blog-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: 'head lead' 'tools lead'; column-gap: clamp(48px, 6vw, 96px); row-gap: 26px; padding-block: 48px 72px; align-items: end; }
  .blog-hero-head { grid-area: head; }
  .blog-hero-tools { grid-area: tools; align-self: start; }
  .blog-lead { grid-area: lead; align-self: center; }
  .blog-hero h1 { font-size: clamp(44px, 4.4vw, 62px); }
  .blog-lead .post-photo .photo { aspect-ratio: 4 / 3; }
  .blog-lead .post-text { margin: -110px 0 0 -40px; max-width: 470px; }
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 32px; }
  .post-grid .post-title { font-size: 21px; }
  .post-cta-h { font-size: 28px; }
  .blog-all .chips { position: sticky; top: calc(var(--head-h) + 10px); z-index: 5; margin-bottom: 30px; padding: 10px 0; background: rgba(250, 247, 242, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

  .post-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; padding-block: 18px 72px; }
  .post-hero .post-hero-media { grid-area: auto; margin: 0; }
  .post-frame { aspect-ratio: 1 / 1; }
  .post-badge { top: 30px; left: -40px; }
  .post-place { right: -28px; bottom: 40px; }
  .post-byline-meta { flex-basis: auto; }
  .post-layout { grid-template-columns: minmax(0, 680px) 300px; justify-content: space-between; column-gap: clamp(48px, 6vw, 110px); padding-bottom: 64px; }
  .post-toc-phone, .post-plan-mid { display: none; }
  .post-rail { display: block; }
  .post-rail-inner { position: sticky; top: calc(var(--head-h) + 28px); display: flex; flex-direction: column; gap: 22px; }
  .post-toc .eyebrow { margin-bottom: 10px; font-size: 11.5px; }
  .post-toc li { border-top: 1px solid var(--line); }
  .post-toc a { position: relative; display: flex; gap: 12px; padding: 11px 0 11px 2px; color: var(--muted); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color 0.2s ease, padding 0.2s ease; }
  .post-toc a span { flex: none; font-size: 12px; font-weight: 600; padding-top: 2px; color: #B3A792; transition: color 0.2s ease; }
  .post-toc a:hover { color: var(--ink); }
  .post-toc a.on { padding-left: 14px; color: var(--ink); font-weight: 600; }
  .post-toc a.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--coral); }
  .post-toc a.on span { color: var(--coral); }
  .post-plan-rail .post-plan-actions { flex-direction: column; }
  .prose { font-size: 18.5px; }
  .post-figure.is-wide { margin-inline: -60px; }
  .post-trip-inner { padding: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-lead .post-float { animation: none; }
}

/* ───────── Motion ───────── */
/* Blocks ease up into place as they scroll into view. Only switched on by the script
   (the "anim" class), so without JavaScript everything is simply visible. */
.anim [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.anim [data-reveal].in { opacity: 1; transform: none; }
/* Cards in a sideways row only fade in: moving them down would make the row itself scroll. */
.anim .swipe-row > [data-reveal] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .float, .float-b { animation: none; }
  .amap-pin.is-on span::after { animation: none; }
  .depth, .hero-photo { transform: none !important; }
  .anim [data-reveal] { opacity: 1; transform: none; }
  .dl-fan-card { animation: none !important; }
}

/* ───────── About page ─────────
   Phones: the photo with its two cards first (so it shows without scrolling), then the
   words; a green strip of numbers that count up; the story as a route that draws itself
   down the page; the team; the four steps; two ways to travel; the registered details. */
.about-hero { padding-bottom: 40px; }
.about-hero .hero-media { order: -1; margin-top: 18px; }
.about-hero .hero-frame { aspect-ratio: 3 / 2; }
.about-faces { display: flex; flex: none; }
.about-faces .avatar { border: 2px solid var(--white); }
.about-faces .avatar + .avatar { margin-left: -8px; }
.about-faces .avatar:nth-child(2) { background: var(--accent); }
.about-faces .avatar:nth-child(3) { background: #6B5A3E; }

/* Numbers: a forest-green strip, the figures in cream. */
.about-numbers { background: #233A33; color: #F4EFE6; padding-block: 34px; }
.about-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
.about-nums div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding-left: 14px; border-left: 2px solid rgba(255, 102, 75, 0.7); }
.about-nums dd { font: 600 clamp(30px, 8vw, 40px)/1.05 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.about-nums dt { font-size: 13.5px; line-height: 1.4; color: #C9D3CF; }
.about-n3 div:last-child, .about-n5 div:last-child { grid-column: 1 / -1; }

/* Our story: stops on a route. The line fills as the page scrolls (--route, 0 to 1). */
.route { position: relative; display: grid; gap: 30px; padding-left: 34px; --route: 1; }
.route::before, .route::after { content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.route::before { background: repeating-linear-gradient(to bottom, #D8C9AF 0 6px, transparent 6px 12px); }
.route::after { background: var(--coral); transform-origin: top; transform: scaleY(var(--route)); transition: transform 0.25s linear; }
.route-stop { position: relative; display: flex; flex-direction: column; gap: 6px; }
.route-dot { position: absolute; left: -34px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--coral); z-index: 1; transition: background 0.4s ease, transform 0.4s ease; }
.route-stop.is-passed .route-dot { background: var(--coral); transform: scale(1.1); }
.route-next .route-dot, .route-next.is-passed .route-dot { background: var(--bg); }
.route-next .route-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--coral); opacity: 0; animation: live 2.4s ease-out infinite; }
.route-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); }
.route-stop h3 { font: 600 21px/1.25 var(--serif); }
.route-stop p { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 520px; }
.route-stop .link-arrow { align-self: flex-start; color: var(--accent); }

/* The team: one card per person, a tall portrait with the role on it. */
.team { display: grid; gap: 18px; }
.person { display: grid; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease; }
.person:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(30, 27, 22, 0.35); }
.person-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.person-photo .photo { height: 100%; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.person:hover .person-photo .photo { transform: scale(1.04); }
.person-initials { height: 100%; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%); }
.person-initials span { font: 600 clamp(64px, 20vw, 104px)/1 var(--serif); color: var(--green); opacity: 0.85; }
.person-role { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 8px 20px rgba(30, 27, 22, 0.12); }
.person-text { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; }
.person-text h3 { font: 600 24px/1.2 var(--serif); }
.person-text p { font-size: 15px; line-height: 1.65; color: var(--body); }

/* The four steps: icons on a line that draws itself in. */
.how-path { position: relative; display: grid; gap: 26px; }
.how-path::before { content: ''; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: var(--line); }
.how-path li { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 4px; align-items: start; }
.how-mark { grid-row: 1 / span 3; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: var(--accent); box-shadow: 0 10px 22px -14px rgba(30, 27, 22, 0.4); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.how-path li:hover .how-mark { background: var(--accent); color: var(--white); transform: rotate(-6deg) scale(1.05); }
.how-num { font: 600 13px/1 var(--sans); letter-spacing: 0.1em; color: var(--muted); padding-top: 6px; }
.how-path h3 { font: 600 21px/1.25 var(--serif); }
.how-path p { font-size: 15px; line-height: 1.55; color: var(--body); }
.anim .how-path[data-reveal] { transform: none; }
.anim .how-path[data-reveal] li { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 160ms + 120ms); }
.anim .how-path[data-reveal].in li { opacity: 1; transform: none; }
.anim .how-path[data-reveal]::before { transform: scaleY(0); transform-origin: top; transition: transform 0.9s ease; }
.anim .how-path[data-reveal].in::before { transform: none; }

/* Two ways to travel: bespoke trips on a photo, Trailsmith in its green. */
.ways { display: grid; gap: 16px; }
.way { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; overflow: hidden; border-radius: 20px; text-decoration: none; color: #F4EFE6; isolation: isolate; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease; }
.way:hover { color: #F4EFE6; transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(30, 27, 22, 0.55); }
.way-photo { position: absolute; inset: 0; z-index: -2; height: 100%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.way:hover .way-photo { transform: scale(1.05); }
.way-bespoke::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(22, 18, 14, 0.86), rgba(22, 18, 14, 0.25) 60%, rgba(22, 18, 14, 0.05)); }
.way-text { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; }
.way-text strong { font: 600 clamp(26px, 6.4vw, 32px)/1.15 var(--serif); }
.way-text > span { font-size: 15px; line-height: 1.55; color: #E3DCCF; max-width: 440px; }
.way-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 15px; }
.way-go span { transition: transform 0.25s ease; }
.way:hover .way-go span { transform: translateX(4px); }
.way-ts { background: #233A33; background-image: radial-gradient(circle at 85% 10%, rgba(255, 102, 75, 0.22), rgba(255, 102, 75, 0) 45%), radial-gradient(circle at 0% 100%, rgba(201, 211, 207, 0.12), rgba(201, 211, 207, 0) 50%); }
.way-ts-top { position: absolute; top: 24px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.way-ts-top img { height: 48px; width: auto; }
.way-ts .ts-faces .avatar { border-color: #233A33; }
.way-count { position: absolute; top: 22px; left: 22px; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: 0 10px 24px rgba(30, 27, 22, 0.18); }
.way-count strong { font: 600 18px/1 var(--serif); color: var(--accent); }
.way-trips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.way-trips span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(244, 239, 230, 0.3); font-size: 13px; color: #F4EFE6; }
.way-bespoke .way-trips span { background: rgba(22, 18, 14, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Registered details: a raised card with a coral rule along the top. */
.cred { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 26px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -30px rgba(30, 27, 22, 0.28); }
.cred::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--coral); }
.cred-head { display: flex; align-items: flex-start; gap: 14px; }
.cred-head h2 { font-size: clamp(23px, 5.6vw, 28px); }
.cred-head p { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.cred-seal { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: #F4EFE6; }
.cred-list { display: grid; gap: 10px; }
.cred-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #FDFBF8; }

@media (min-width: 720px) {
  .about-hero .hero-frame { aspect-ratio: 16 / 10; }
  .about-numbers { padding-block: 44px; }
  .about-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-n3 div:last-child, .about-n5 div:last-child { grid-column: auto; }
  .team-n2, .team-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-photo { aspect-ratio: 5 / 4; }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .way { min-height: 440px; }
  .cred-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .about-hero { grid-template-areas: 'copy media'; padding-block: 56px 72px; }
  .about-hero .hero-copy { align-self: center; }
  .about-hero .hero-media { order: 0; margin-top: 0; }
  .about-hero .hero-frame { aspect-ratio: auto; }
  .about-faces .avatar { width: 42px; height: 42px; }
  .about-numbers { padding-block: 52px; }
  .about-nums { display: flex; gap: 0; }
  .about-nums div { flex: 1 1 0; padding-inline: 28px; }
  .about-nums div:first-child { padding-left: 14px; }
  .about-nums dd { font-size: 46px; }

  /* The route runs left to right, one stop per column, the line along the dots. */
  .route { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 36px; padding: 40px 0 0; }
  .route::before, .route::after { left: 0; right: 0; top: 8px; bottom: auto; width: auto; height: 2px; }
  .route::before { background: repeating-linear-gradient(to right, #D8C9AF 0 6px, transparent 6px 12px); }
  .route::after { transform-origin: left; transform: scaleX(var(--route)); }
    .route-dot { left: 0; top: -40px; }
  .route-stop h3 { font-size: 23px; }

  .team-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .team-n2 .person { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .team-n2 .person-photo { aspect-ratio: auto; min-height: 380px; }
  .team-n2 .person-text { justify-content: center; padding: 32px 30px; }
  .team-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .person-text h3 { font-size: 28px; }

  /* The four steps sit side by side on one line. */
  .how-path { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; }
  .how-path::before { left: 30px; right: 30px; top: 30px; bottom: auto; width: auto; height: 2px; }
  .anim .how-path[data-reveal]::before { transform: scaleX(0); transform-origin: left; }
  .how-path li { grid-template-columns: 1fr; row-gap: 10px; }
  .how-mark { grid-row: auto; width: 60px; height: 60px; margin-bottom: 8px; }
  .how-path h3 { font-size: 23px; }

  .ways { gap: 28px; }
  .way { min-height: 500px; }
  .way-text { padding: 34px 34px 36px; }
  .way-ts-top { top: 34px; left: 34px; right: 34px; }
  .way-count { top: 34px; left: 34px; }
  .way-ts-top img { height: 64px; }

  .cred { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 44px; }
  .cred-head { flex: 0 1 380px; }
  .cred-list { flex: 1 1 auto; max-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .route::after { transform: none !important; }
  .route-next .route-dot::after { animation: none; }
  .anim .how-path[data-reveal] li, .anim .how-path[data-reveal]::before { opacity: 1; transform: none; }
}

/* ───────── Trailsmith page ───────── */
/* The hero is the forest-green Trailsmith world from the homepage band (.ts). Phones: the
   logo and headline, then the photo with its two cards, then the words, button and counts. */
.tsl-hero { padding-block: 22px 56px; }
.tsl-hero-grid { display: grid; gap: 22px; }
.tsl-head { display: flex; flex-direction: column; gap: 16px; }
.tsl-hero .ts-logo img { height: 44px; }
.tsl-hero h1 { color: var(--ts-ink); font-size: clamp(32px, 8.2vw, 62px); }
.tsl-hero h1 em { color: var(--coral); }
.tsl-media { position: relative; margin: 16px 0 24px; isolation: isolate; }
.tsl-media .ts-frame { position: relative; z-index: 1; }
.tsl-media .ts-photo { aspect-ratio: 5 / 4; }
/* Behind the photo: breathing rings (wellness) and a turning ring of peppercorns (culinary),
   the two themes most Trailsmith retreats take. */
.tsl-rings { position: absolute; z-index: 0; width: 64%; max-width: 400px; pointer-events: none; }
.tsl-rings .trip-motif { position: static; display: block; width: 100%; max-width: none; stroke-width: 1.3; }
.tsl-rings-a { top: -22%; right: -22%; }
.tsl-rings-a .trip-motif { stroke: rgba(169, 193, 175, 0.42); }
.tsl-rings-a circle { transform-origin: 120px 120px; animation: breathe 8s ease-in-out infinite; }
.tsl-rings-a circle:nth-child(2) { animation-delay: -0.4s; opacity: 0.8; }
.tsl-rings-a circle:nth-child(3) { animation-delay: -0.8s; opacity: 0.6; }
.tsl-rings-a circle:nth-child(4) { animation-delay: -1.2s; opacity: 0.4; }
.tsl-rings-b { bottom: -24%; left: -24%; width: 52%; }
.tsl-rings-b .trip-motif { stroke: rgba(226, 172, 94, 0.55); stroke-width: 5; stroke-linecap: round; animation: turn 90s linear infinite; }
.tsl-rings-b circle:nth-child(1) { stroke-dasharray: 0.1 13; }
.tsl-rings-b circle:nth-child(2) { stroke-dasharray: 0.1 15; opacity: 0.75; }
.tsl-rings-b circle:nth-child(3) { stroke-dasharray: 0.1 17; opacity: 0.5; }
.tsl-copy { display: flex; flex-direction: column; gap: 22px; }
.tsl-copy .ts-lead { font-size: 17px; }
.tsl-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tsl-counts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.tsl-counts dd { font: 600 32px/1 var(--serif); color: var(--ts-ink); }
.tsl-counts dt { font-size: 12.5px; line-height: 1.35; color: var(--ts-soft); }

.trail-smith { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); }
.trail-smith .avatar { width: 30px; height: 30px; font-size: 12px; background: var(--t-ink); }
.trail-smith strong { font-weight: 600; color: var(--ink); }
.past-body { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 14px 8px 0; }
.trail-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-ink); }
.trail-name { font: 600 21px/1.22 var(--serif); letter-spacing: -0.01em; }
.trail-meta { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.trail-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.trail-go span { color: var(--coral); transition: transform 0.15s ease; }
a.trail-go { text-decoration: none; }
a.trail-go:hover { color: var(--accent-deep); }
a.trail-go:hover span { transform: translateX(3px); }
.tsl-empty { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 22px; border-radius: 22px; background: #233A33; color: #F4EFE6; text-align: center; }
.tsl-empty-mark .trip-motif { top: -40%; right: -20%; width: 70%; max-width: 420px; stroke: rgba(169, 193, 175, 0.35); z-index: -1; }
.tsl-empty h3 { font: 600 clamp(26px, 6vw, 34px)/1.15 var(--serif); }
.tsl-empty h3 em { color: var(--coral); }
.tsl-empty p { max-width: 460px; color: #C9D3CF; }

/* While no Trailsmith trip is open (homepage block and Trailsmith page, interest.js): a trail
   sews itself across the card, a needle leading the stitch and pins dropping in behind it,
   then the stitch rests and the needle keeps a slow loop. The button opens the seat panel. */
.stitch { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 22px 36px; border-radius: 22px; background: #233A33; color: #F4EFE6; text-align: center; }
.ts .stitch { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.stitch::before { content: ''; position: absolute; inset: 9px; border: 1.5px dashed rgba(244, 239, 230, 0.16); border-radius: 15px; pointer-events: none; z-index: -1; }
.stitch h3 { max-width: 560px; font: 600 clamp(26px, 6.4vw, 36px)/1.15 var(--serif); }
.stitch h3 em { color: var(--coral); }
.stitch p { max-width: 460px; color: #C9D3CF; }
.stitch .btn { margin-top: 6px; }
.stitch-art { width: min(100%, 420px); height: auto; overflow: visible; margin-bottom: 4px; }
.stitch-hills { fill: none; stroke: rgba(169, 193, 175, 0.28); stroke-width: 1.4; stroke-linejoin: round; }
.stitch-mask { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: stitch-sew 3.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s forwards; }
.stitch-line { fill: none; stroke: var(--coral); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 6; }
.stitch-pin { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: stitch-pin 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) var(--d) forwards; }
.stitch-pin circle { fill: #F4EFE6; }
.stitch-pin .stitch-pin-dot { fill: var(--coral); }
.stitch-needle { offset-rotate: auto; offset-distance: 0%; fill: #F4EFE6; animation: stitch-needle 3.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s forwards, stitch-bob 2.6s ease-in-out 3.8s infinite; }
.stitch-needle circle { fill: #233A33; }
@keyframes stitch-sew { to { stroke-dashoffset: 0; } }
@keyframes stitch-pin { from { opacity: 0; transform: translateY(-10px) scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes stitch-needle { to { offset-distance: 100%; } }
@keyframes stitch-bob { 0%, 100% { offset-distance: 100%; } 50% { offset-distance: 94%; } }
@media (prefers-reduced-motion: reduce) {
  .stitch-mask { animation: none; stroke-dashoffset: 0; }
  .stitch-pin { animation: none; opacity: 1; }
  .stitch-needle { animation: none; offset-distance: 100%; }
}
@media (min-width: 900px) {
  .stitch { padding: 40px 48px 48px; }
}

/* Upcoming trails: each trip is a boarding pass in its own look (wellness, culinary, classic),
   listed one under another. Phones: photo, stub, details; desktop: photo beside them. */
.passes { display: grid; gap: 22px; }
.pass-item[hidden] { display: none; }
.pass { display: grid; overflow: hidden; border-radius: 24px; background: var(--t-dark); color: #F4EFE6; box-shadow: 0 26px 50px -30px rgba(30, 27, 22, 0.5); }
.pass.trip-classic { background: #3A2A1E; }
.pass-photo { position: relative; overflow: hidden; isolation: isolate; }
.pass-photo .photo { aspect-ratio: 2 / 1; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pass:hover .pass-photo .photo { transform: scale(1.04); }
.pass-photo .trip-motif { z-index: 1; top: -40%; right: -16%; width: 62%; max-width: 380px; stroke: rgba(255, 255, 255, 0.32); }
.pass-count { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 4px 11px; border-radius: 99px; background: rgba(30, 27, 22, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #F4EFE6; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.pass-body { display: flex; flex-direction: column; min-width: 0; }
.pass-stub { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: rgba(255, 255, 255, 0.06); }
.pass-date { display: flex; flex-direction: column; align-items: center; min-width: 52px; line-height: 1; }
.pass-date b { font: 600 36px/1 var(--serif); }
.pass-date span { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 239, 230, 0.75); }
.pass-where { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: rgba(244, 239, 230, 0.72); }
.pass-where strong { font-size: 14.5px; color: #F4EFE6; }
.pass-code { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: rgba(244, 239, 230, 0.4); white-space: nowrap; }
.pass-perf { position: relative; height: 0; margin-inline: 14px; border-top: 2px dashed rgba(244, 239, 230, 0.22); }
.pass-perf::before, .pass-perf::after { content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.pass-perf::before { left: -26px; }
.pass-perf::after { right: -26px; }
.pass-main { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 22px; }
.pass-kind { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(244, 239, 230, 0.75); }
.pass-kind .icon { width: 18px; height: 18px; color: var(--t-motif); }
.pass-name { font: 600 clamp(25px, 6.2vw, 40px)/1.08 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.pass-name a { color: inherit; text-decoration: none; }
.pass-name a:hover { color: #FFD3C9; }
.pass-line { font-size: 15px; line-height: 1.55; color: rgba(244, 239, 230, 0.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pass-host { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(244, 239, 230, 0.8); }
.pass-host strong { color: #F4EFE6; }
.pass-host .avatar { width: 30px; height: 30px; font-size: 12px; background: var(--coral); color: var(--ink); }
.pass-seats { display: grid; gap: 7px; }
.pass-seats-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
.pass-seats-top .is-hot { color: #FF9A85; }
.pass-bar { display: block; height: 7px; border-radius: 99px; background: rgba(244, 239, 230, 0.14); overflow: hidden; }
.pass-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), #FFB199); transform-origin: left; }
.js .pass-bar i { transform: scaleX(0); transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
.js .pass.seen .pass-bar i { transform: none; }
.pass-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(244, 239, 230, 0.85); }
.pass-urgent { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); font-size: 12.5px; font-weight: 600; }
.pass-urgent::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: ts-pulse 2.2s ease-out infinite; }
.pass-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 2px; }
.pass-actions .btn { padding-inline: 16px; white-space: nowrap; }
@media (max-width: 719px) {
  .btn-pass-wa { width: 52px; padding-inline: 0; }
  .pass-wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pass-actions .btn:only-child { grid-column: 1 / -1; }
.btn-pass-wa { background: transparent; color: #F4EFE6; border-color: rgba(244, 239, 230, 0.35); }
.btn-pass-wa:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn-pass-wa .icon { width: 18px; height: 18px; }
@media (min-width: 720px) {
  .pass { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 420px; }
  .pass-photo .photo { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .pass-perf::before { display: none; }
  .pass-stub { padding: 18px 28px; }
  .pass-main { flex: 1; justify-content: center; gap: 14px; padding: 22px 28px 28px; }
  .pass-actions { display: flex; flex-wrap: wrap; }
  .pass-actions .btn { padding-inline: 22px; }
}
@media (min-width: 980px) {
  .pass { min-height: 470px; }
  .pass-main { padding: 26px 40px 34px; }
  .pass-stub { padding: 20px 40px; }
  .pass-date b { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { .pass { transform: none; filter: none; } .js .pass-bar i { transform: none; transition: none; } }

/* Meet the Smiths: a card each with the portrait, two points and their links. Tapping a card
   opens it in place (height and fade), showing their practice, quote and trips. */
.tsl-smiths-band { background: var(--sand); border-block: 0; }
.tsl-smiths { align-items: flex-start; }
.tsl-smiths:not(.swipe-row) { display: grid; }
.tsl-smiths > li { display: flex; flex: 0 0 min(86%, 340px); }
.smith-card { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 20px; background: var(--white); box-shadow: 0 14px 30px -18px rgba(30, 27, 22, 0.25); transition: box-shadow 0.35s ease, transform 0.35s ease; }
.js .smith-card[data-has-more] { cursor: pointer; }
.smith-card:hover { box-shadow: 0 24px 44px -20px rgba(30, 27, 22, 0.32); }
.smith-portrait-wrap { position: relative; margin: 8px 8px 0; overflow: hidden; border-radius: 14px; }
.sc-photo { display: block; width: 100%; aspect-ratio: 8 / 7; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.smith-card:hover .sc-photo { transform: scale(1.04); }
.smith-monogram { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #233A33; color: #F4EFE6; font: italic 600 64px/1 var(--serif); }
.smith-monogram .trip-motif { top: auto; bottom: -38%; right: -30%; width: 90%; max-width: none; stroke: rgba(244, 239, 230, 0.16); }
.smith-monogram circle { transform-origin: 120px 120px; animation: breathe 8s ease-in-out infinite; }
.smith-monogram circle:nth-child(2) { animation-delay: -0.6s; }
.smith-monogram circle:nth-child(3) { animation-delay: -1.2s; }
.smith-tint-2 { background: #7E3A19; }
.smith-tint-3 { background: #5A4B33; }
.smith-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 600; color: var(--ink); box-shadow: 0 6px 16px rgba(30, 27, 22, 0.14); }
.smith-main { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.smith-card h3 { font: 600 22px/1.2 var(--serif); }
.sc-role { margin-top: -6px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.smith-points { display: grid; gap: 8px; }
.smith-points li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.smith-points li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--coral); }
.smith-links { display: flex; flex-wrap: wrap; gap: 8px; }
.smith-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.smith-links a:hover { background: #233A33; border-color: #233A33; color: #F4EFE6; transform: translateY(-2px); }
.smith-links .icon { width: 19px; height: 19px; }
.smith-more { display: grid; grid-template-rows: 1fr; }
.smith-more-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.smith-more-inner > :first-child { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.js .smith-more { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.45s ease; }
.js .smith-card.is-open .smith-more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.5s ease 0.12s; }
.smith-more-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.sc-bio { display: flex; flex-direction: column; gap: 10px; }
.sc-bio .smith-more-label { margin-bottom: 0; }
.sc-bio p:not(.smith-more-label) { font-size: 15px; line-height: 1.65; color: var(--body); }
.smith-card blockquote { padding-left: 14px; border-left: 2px solid var(--coral); font: italic 600 16.5px/1.45 var(--serif); color: var(--ink-soft); }
.sc-featured { font-size: 13.5px; color: var(--body); }
.sc-featured span { font-weight: 600; color: var(--muted); }
.smith-trips { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.smith-trips li { display: block; border-bottom: 1px solid var(--line); }
.smith-trips a, .smith-trips > li > span { display: flex; align-items: center; gap: 10px; padding-block: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; }
.smith-trips a > span[aria-hidden] { margin-left: auto; color: var(--coral); transition: transform 0.15s ease; }
.smith-trips a:hover { color: var(--accent-deep); }
.smith-trips a:hover > span[aria-hidden] { transform: translateX(3px); }
.smith-trip-name { display: flex; flex-direction: column; }
.smith-trip-name small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.smith-trip-state { flex: none; padding: 3px 9px; border-radius: 99px; background: #E2EAE0; color: #2F4B44; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.smith-trip-state.is-past { background: var(--sand); color: var(--muted); }
.smith-toggle { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; min-height: 44px; margin-top: 2px; padding: 0 16px 0 18px; border: 1px solid #CFC4B0; border-radius: 99px; background: transparent; color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.smith-toggle:hover { background: var(--sand); border-color: #B9AC94; }
.smith-chev { width: 9px; height: 9px; margin-top: -4px; border: solid var(--coral); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.4s ease, margin 0.4s ease; }
.is-open .smith-chev { margin-top: 4px; transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .smith-monogram circle { animation: none; } }

/* Past trails: an archive. The photo is faded until hovered, a "Ran" stamp replaces the
   status, and nothing that reads as on sale (price, seats, dates, booking button) shows. */
.tsl-past-row li { display: flex; flex: 0 0 min(80%, 310px); }
.tsl-past-row li[hidden] { display: none; }
.tsl-past-row:not(.swipe-row) { display: grid; }
.past { display: flex; flex-direction: column; width: 100%; color: var(--ink); text-decoration: none; }
a.past:hover { color: var(--ink); }
.past-photo { position: relative; display: block; overflow: hidden; border-radius: 16px; }
.past-photo .photo { aspect-ratio: 3 / 2; filter: grayscale(0.6) sepia(0.15); transition: filter 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.past:hover .past-photo .photo { filter: none; transform: scale(1.04); }
.past-stamp { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(250, 247, 242, 0.94); border: 2px dashed var(--coral); box-shadow: 0 0 0 4px rgba(250, 247, 242, 0.94); color: var(--accent); transform: rotate(-12deg); text-align: center; line-height: 1.1; }
.past-stamp span { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.past-stamp strong { font: 600 14px/1.15 var(--serif); }
.past-body { padding: 16px 2px 0; }
.past .trail-kind { color: var(--muted); }
.past-recap { display: flex; gap: 10px; font: italic 600 16px/1.45 var(--serif); color: var(--ink-soft); }
.past-recap::before { content: ''; flex: none; width: 2px; border-radius: 2px; background: var(--coral); }
.past .trail-smith .avatar { background: #8C8170; }
.past .trail-go { margin-top: 4px; }
.tsl-past-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }

@media (min-width: 720px) {
  .tsl-hero { padding-block: 40px 72px; }
  .tsl-hero .ts-logo img { height: 56px; }
  .tsl-media .ts-photo { aspect-ratio: 16 / 10; }
  .tsl-copy .hero-actions { flex-direction: row; align-items: center; gap: 24px; }
  .tsl-copy .btn { width: auto; }
  .tsl-smiths.swipe-row, .tsl-past-row.swipe-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .tsl-smiths-n1 > li { max-width: 440px; }
  .sc-photo { aspect-ratio: 4 / 3; }
  .tsl-smiths.swipe-row { align-items: start; }
  .tsl-past-n1 .past { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: center; }
  .tsl-past-n1 .past-body { padding: 0; }
  .tsl-past-n1 .past-photo .photo { aspect-ratio: 16 / 9; }
  .tsl-past-n1 .trail-name { font-size: 28px; }
}
@media (min-width: 980px) {
  .tsl-hero { padding-block: 48px 96px; }
  .tsl-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: 'head media' 'copy media'; column-gap: clamp(48px, 6vw, 104px); row-gap: 30px; align-items: start; }
  .tsl-head { grid-area: head; align-self: end; gap: 26px; }
  .tsl-copy { grid-area: copy; }
  .tsl-media { grid-area: media; align-self: center; margin: 0; }
  .tsl-media .ts-photo { aspect-ratio: 9 / 10; }
  .tsl-hero .ts-logo img { height: 66px; }
  .tsl-hero h1 { font-size: clamp(44px, 4.3vw, 64px); }
  .tsl-counts { max-width: 520px; }
  .tsl-counts dd { font-size: 38px; }
  .tsl-smiths.swipe-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .smith-main { padding: 20px 24px 24px; }
  .tsl-past-row.swipe-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .tsl-past-n2.swipe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tsl-rings circle, .tsl-rings .trip-motif { animation: none; }
}

/* ───────── Legal pages (privacy, terms) ───────── */
/* A thin reading line along the top of the window, filled by site.js ("Legal pages"). */
.legal-progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 3px; pointer-events: none; }
.legal-progress span { display: block; height: 100%; background: var(--coral); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; }
.legal-hero { padding-block: 26px 34px; background: linear-gradient(180deg, var(--bg) 0%, #F3ECE0 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.legal-hero-grid { display: grid; gap: 30px; align-items: center; }
.legal-hero-copy { display: flex; flex-direction: column; gap: 16px; }
.legal-hero h1 { font-size: clamp(36px, 9vw, 60px); }
.legal-hero-copy { position: relative; }
/* Phones: the seal sits beside the headline, so the page has its picture without scrolling. */
.legal-seal-sm { position: absolute; top: -6px; right: 0; width: 76px; height: 76px; border-radius: 50%; color: var(--accent); background: var(--bg); box-shadow: 0 8px 20px rgba(168, 75, 34, 0.16); }
.legal-seal-sm > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: legal-spin 40s linear infinite; }
.legal-seal-sm > svg circle:first-child { stroke: var(--coral); }
.legal-seal-sm .legal-seal-mark svg { width: 24px; height: 24px; }
.anim .legal-seal-sm { animation: legal-stamp 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.3s both; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-meta li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13.5px; color: var(--body); }
.legal-meta svg { color: var(--accent); flex: none; }
.legal-meta strong { color: var(--ink); font-weight: 600; }
.legal-switch { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sand); }
.legal-switch a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.legal-switch a:hover { color: var(--ink); }
.legal-switch a[aria-current='page'] { background: var(--white); color: var(--accent); box-shadow: 0 2px 8px rgba(30, 27, 22, 0.08); }

/* The stack of papers with the seal (tablet and desktop). */
.legal-papers { display: none; position: relative; height: 400px; }
.legal-paper { position: absolute; top: 24px; left: 50%; width: 300px; height: 352px; margin-left: -150px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 18px 40px rgba(30, 27, 22, 0.08); }
.legal-paper-3 { transform: rotate(8deg) translate(26px, 8px); background: #F6F0E6; }
.legal-paper-2 { transform: rotate(3.5deg) translate(12px, 2px); background: #FCF9F4; }
.legal-paper-1 { transform: rotate(-2.5deg); display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; }
.legal-paper-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.legal-paper-title { font: 600 25px/1.15 var(--serif); color: var(--ink); }
.legal-paper-lines { display: flex; flex-direction: column; gap: 9px; padding-block: 4px; }
.legal-paper-lines i { display: block; height: 6px; border-radius: 3px; background: var(--sand); }
.legal-paper-lines i:nth-child(3n) { width: 78%; }
.legal-paper-lines i:nth-child(4n + 2) { width: 92%; }
.legal-paper-lines i:last-child { width: 46%; }
.legal-paper-list { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--body); }
.legal-paper-list span { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal-paper-list b { color: var(--accent); font-weight: 700; }
.legal-seal { position: absolute; right: calc(50% - 205px); bottom: 2px; width: 120px; height: 120px; border-radius: 50%; background: var(--bg); color: var(--accent); box-shadow: 0 10px 26px rgba(168, 75, 34, 0.18); }
.legal-seal > svg { position: absolute; inset: 0; animation: legal-spin 40s linear infinite; }
.legal-seal > svg circle:first-child { stroke: var(--coral); }
.legal-seal-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.legal-seal-mark svg { width: 34px; height: 34px; animation: none; position: static; }
.legal-float { position: absolute; left: calc(50% - 262px); top: 150px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 14px 30px rgba(30, 27, 22, 0.1); font-size: 12.5px; color: var(--muted); animation: legal-bob 6s ease-in-out infinite; }
.legal-float strong { display: block; font-size: 13.5px; color: var(--ink); }
.legal-float-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #FBEDE6; color: var(--accent); }
.anim .legal-paper { animation: legal-deal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .legal-paper-2 { animation-delay: 0.08s; }
.anim .legal-paper-1 { animation-delay: 0.16s; }
.anim .legal-seal { animation: legal-stamp 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.75s both; }
@keyframes legal-deal { from { opacity: 0; transform: translateY(40px) rotate(0deg); } }
@keyframes legal-stamp { from { opacity: 0; transform: scale(1.6) rotate(-25deg); } }
@keyframes legal-spin { to { transform: rotate(360deg); } }
@keyframes legal-bob { 50% { transform: translateY(-8px); } }

/* Phones and tablets: a contents bar held under the menu, naming the section in view. */
.legal-bar { position: sticky; top: var(--head-h); z-index: 40; background: rgba(250, 247, 242, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: top 0.28s ease; }
.head-hide .legal-bar { top: 0; }
.legal-bar summary { display: flex; align-items: center; gap: 12px; min-height: 50px; cursor: pointer; list-style: none; }
.legal-bar summary::-webkit-details-marker { display: none; }
.legal-bar summary > svg { flex: none; color: var(--accent); transition: transform 0.2s ease; }
.legal-bar details[open] summary > svg, .legal-bar-in[open] summary > svg { transform: rotate(180deg); }
.legal-bar-label { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--sand); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legal-bar-now { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal-bar-in[open] { background: var(--bg); }
.legal-toc-drop { max-height: 58vh; overflow-y: auto; padding-bottom: 12px; overscroll-behavior: contain; }

.legal-toc { display: flex; flex-direction: column; gap: 2px; counter-reset: none; }
.legal-toc a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 8px 10px; border-radius: 8px; color: var(--body); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.legal-toc a:hover { background: var(--sand); color: var(--ink); }
.legal-toc-num { font-size: 12px; font-weight: 700; color: #A99E8C; font-variant-numeric: tabular-nums; padding-top: 1.5px; }
.legal-toc a.is-active { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--coral), 0 2px 8px rgba(30, 27, 22, 0.05); }
.legal-toc a.is-active .legal-toc-num, .legal-toc a.is-read .legal-toc-num { color: var(--accent); }

.legal-layout { display: grid; gap: 40px; padding-block: 26px 52px; }
.legal-aside { display: none; }
.legal-doc { min-width: 0; max-width: 740px; }
.legal-preface p, .legal-text p { margin-bottom: 14px; font-size: 16.5px; line-height: 1.75; color: var(--body); }
.legal-text strong, .legal-preface strong { color: var(--ink); font-weight: 600; }
.legal-text a, .legal-preface a { overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-sec { padding-top: 28px; margin-top: 14px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 62px); }
.legal-sec:first-child, .legal-preface + .legal-sec { border-top: 0; margin-top: 0; padding-top: 6px; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-size: clamp(21px, 5vw, 26px); }
.legal-num { flex: none; position: relative; top: -3px; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 24px; padding: 0 8px; border: 1px solid #EBCDBE; border-radius: 999px; background: #FBEDE6; font: 700 12px/1 var(--sans); color: var(--accent); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.legal-sec:target .legal-num { animation: legal-pulse 1.2s ease 2; }
@keyframes legal-pulse { 50% { background: var(--coral); border-color: var(--coral); color: var(--white); } }
.legal-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.legal-list li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.65; color: var(--body); }
.legal-list li::before { content: ''; position: absolute; left: 4px; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.legal-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.legal-top { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.legal-top .link-arrow svg { color: var(--coral); }

.legal-ask { display: flex; flex-direction: column; gap: 22px; padding: 30px 22px; border-radius: 18px; background: var(--green); background-image: radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.07) 0 120px, transparent 121px), radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.05) 0 190px, transparent 191px); }
.legal-ask-text { display: flex; flex-direction: column; gap: 8px; }
.legal-ask h2 { font-size: clamp(23px, 5.6vw, 30px); color: var(--bg); }
.legal-ask h2 em { color: #FFB7A6; }
.legal-ask p { font-size: 15px; color: #CFDCD6; }
.legal-ask-actions { display: flex; flex-direction: column; gap: 10px; }
.legal-ask .btn-ghost-dark { border-color: #6E8780; }
.legal-ask .btn-ghost-dark:hover { background: #243B35; }
.legal-ask .btn { overflow-wrap: anywhere; }
.legal-others { display: grid; gap: 12px; margin-top: 14px; }
.legal-other { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.legal-other:hover { color: var(--ink); transform: translateY(-2px); border-color: #D8C9AF; box-shadow: 0 10px 24px rgba(30, 27, 22, 0.07); }
.legal-other-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--accent); }
.legal-other-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.legal-other-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.legal-other strong { font: 600 19px/1.3 var(--serif); }
.legal-other-d { font-size: 13px; color: var(--muted); }
.legal-other > span[aria-hidden] { color: var(--coral); font-size: 20px; transition: transform 0.2s ease; }
.legal-other:hover > span[aria-hidden] { transform: translateX(4px); }

@media (min-width: 720px) {
  .legal-hero { padding-block: 40px 44px; }
  .legal-ask { padding: 40px; border-radius: 20px; }
  .legal-ask-actions { flex-direction: row; flex-wrap: wrap; }
  .legal-others { grid-template-columns: repeat(auto-fill, minmax(300px, 440px)); }
}
@media (min-width: 980px) {
  .legal-hero { padding-block: 48px 52px; }
  .legal-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; }
  .legal-papers { display: block; }
  .legal-seal-sm { display: none; }
  .legal-bar { display: none; }
  .legal-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 72px; padding-block: 48px 72px; }
  .legal-aside { display: block; }
  .legal-aside-in { position: sticky; top: calc(var(--head-h) + 24px); max-height: calc(100vh - var(--head-h) - 48px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
  .legal-aside-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
  .legal-aside-h > span { letter-spacing: 0.02em; text-transform: none; font-weight: 500; font-variant-numeric: tabular-nums; }
  .legal-aside-track { height: 3px; margin-bottom: 12px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .legal-aside-track span { display: block; height: 100%; background: var(--coral); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; }
  .legal-toc a { font-size: 14px; padding: 7px 10px; }
  .legal-sec { scroll-margin-top: calc(var(--head-h) + 24px); padding-top: 34px; margin-top: 18px; }
  .legal-ask { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 56px; }
  .legal-ask-actions { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-seal > svg, .legal-seal-sm > svg, .anim .legal-seal-sm, .legal-float, .anim .legal-paper, .anim .legal-seal, .legal-sec:target .legal-num { animation: none; }
}

/* ───────── Page loading placeholder ─────────
   Shown only when a link to another page is slow to answer (see "Page loading placeholder"
   in site.js). The menu stays in place; under it the page fades into the bones of the page
   on its way, with a coral line filling under the menu and a small "Heading to …" tag. */
.pl { --pl-bone: #EEE6D8; --pl-shine: #F8F3EA; --pl-bg: var(--bg); position: fixed; inset: 0; z-index: 45; overflow: hidden; background: var(--pl-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
.pl.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.22s ease; }
.pl[data-shape='trail'] { --pl-bone: rgba(244, 239, 230, 0.09); --pl-shine: rgba(244, 239, 230, 0.17); --pl-bg: #233A33; background-image: radial-gradient(circle at 88% 12%, rgba(255, 102, 75, 0.1), rgba(255, 102, 75, 0) 45%); }
.is-leaving .mbar { transform: translateY(110%); }
.is-leaving .site-head { transform: none; }

.pl-bar { position: absolute; top: var(--head-h); left: 0; right: 0; height: 3px; }
.pl-bar i { display: block; height: 100%; background: var(--coral); box-shadow: 0 0 10px rgba(255, 102, 75, 0.55); transform: scaleX(0); transform-origin: left; animation: pl-fill 12s linear forwards; }
@keyframes pl-fill { 0% { transform: scaleX(0); } 3% { transform: scaleX(0.18); } 12% { transform: scaleX(0.45); } 35% { transform: scaleX(0.72); } 100% { transform: scaleX(0.93); } }

.pl-page { padding-top: calc(var(--head-h) + 28px); }
.pl-b { display: block; border-radius: 8px; background: linear-gradient(100deg, var(--pl-bone) 35%, var(--pl-shine) 50%, var(--pl-bone) 65%) 0 0 / 300% 100%; animation: pl-shine 1.5s linear infinite; }
@keyframes pl-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.pl.show .pl-words, .pl.show .pl-stack { animation: pl-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pl.show .pl-media { animation: pl-rise 0.5s 0.06s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pl-rise { from { opacity: 0; transform: translateY(14px); } }

.pl-split { display: grid; gap: 34px; }
.pl-words, .pl-stack { display: flex; flex-direction: column; gap: 12px; }
.pl-kicker { width: 34%; max-width: 160px; height: 12px; margin-bottom: 4px; }
.pl-h { width: 94%; height: 34px; border-radius: 10px; }
.pl-h2 { width: 64%; }
.pl-line { width: 100%; height: 13px; }
.pl-short { width: 58%; }
.pl-btns { display: flex; gap: 10px; margin-top: 10px; }
.pl-btn { width: 150px; max-width: 48%; height: 48px; border-radius: 99px; --pl-bone: rgba(168, 75, 34, 0.2); --pl-shine: rgba(168, 75, 34, 0.08); }
.pl-btn-2 { width: 120px; --pl-bone: #EEE6D8; --pl-shine: #F8F3EA; }
.pl[data-shape='trail'] .pl-btn-2 { --pl-bone: rgba(244, 239, 230, 0.09); --pl-shine: rgba(244, 239, 230, 0.17); }

/* The photo: a soft range of hills and a sun, so the space reads as a picture on its way. */
.pl-media { position: relative; }
.pl-photo { position: relative; aspect-ratio: 5 / 4; border-radius: 16px; overflow: hidden; }
.pl-photo::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 320' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='292' cy='92' r='30' fill='%23FF664B' fill-opacity='.16'/%3E%3Cpath d='M0 250 L90 160 L150 210 L230 120 L320 205 L400 150 V320 H0Z' fill='%23A84B22' fill-opacity='.07'/%3E%3Cpath d='M0 285 L110 215 L200 262 L300 200 L400 255 V320 H0Z' fill='%23A84B22' fill-opacity='.08'/%3E%3C/svg%3E") center bottom / cover no-repeat; }
.pl[data-shape='trail'] .pl-photo::after { filter: brightness(2.4); opacity: 0.7; }
.pl-float { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 14px 30px rgba(30, 27, 22, 0.16); animation: drift-a 7s ease-in-out infinite; }
.pl-float::before { content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #EEE6D8; }
.pl-float::after { content: ''; flex: 1; height: 10px; border-radius: 6px; background: #EEE6D8; }
.pl-float-a { top: -18px; left: 12px; width: min(58%, 230px); }
.pl-float-b { right: 12px; bottom: -24px; width: min(62%, 260px); padding-block: 16px; animation-name: drift-b; animation-duration: 8.5s; animation-delay: -3s; }
.pl-float-b::before { border-radius: 8px; background: rgba(255, 102, 75, 0.22); width: 26px; height: 26px; }

/* A row of cards: the Destinations and Inspire Me lists. */
.pl-h-c { width: 72%; }
.pl-line-c { width: 86%; }
.pl-chips { display: flex; gap: 8px; margin-top: 18px; overflow: hidden; }
.pl-chip { flex: none; width: 82px; height: 36px; border-radius: 99px; }
.pl-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px; margin: 8px calc(-1 * var(--pad)) 0 0; overflow: hidden; }
.pl-card { aspect-ratio: 3 / 4; border-radius: 16px; }

/* A page of text: the legal pages. */
.pl-doc { max-width: 760px; }
.pl-para { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }

/* The tag at the bottom: a coral dot travelling along a dotted route. */
.pl-tag { position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 99px; background: var(--white); box-shadow: 0 16px 34px rgba(30, 27, 22, 0.18); color: var(--ink); font: 600 14px/1.3 var(--sans); }
.pl.show .pl-tag { animation: pl-rise 0.5s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pl-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-route { position: relative; flex: none; width: 46px; height: 10px; background: linear-gradient(90deg, #D9CDB9 55%, transparent 0) 0 50% / 6px 2px repeat-x; }
.pl-route i { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 102, 75, 0.2); animation: pl-go 1.1s ease-in-out infinite alternate; }
@keyframes pl-go { to { transform: translateX(36px); } }

@media (min-width: 720px) {
  .pl-cards { grid-auto-columns: 40%; }
  .pl-h { height: 44px; }
}
@media (min-width: 980px) {
  .pl-page { padding-top: calc(var(--head-h) + 56px); }
  .pl-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 72px; }
  .pl-h { height: 58px; border-radius: 12px; }
  .pl-line { height: 15px; }
  .pl-words { gap: 16px; }
  .pl-photo { aspect-ratio: 6 / 5; }
  .pl-cards { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-right: 0; }
  .pl-h-c { width: 52%; }
  .pl-line-c { width: 44%; }
  .pl-float-b { right: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-b, .pl-float, .pl-route i, .pl.show .pl-words, .pl.show .pl-stack, .pl.show .pl-media, .pl.show .pl-tag { animation: none; }
  .pl-bar i { animation: none; transform: scaleX(0.6); }
}

/* Moving between pages: in browsers that can, the old page dissolves into the new one
   while the menu holds still. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-head { view-transition-name: site-head; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
}

/* ───────── Cookie banner ───────── */
/* Phones: a card that rises from the bottom, over the action bar (which steps aside while
   it is open). Desktop: a card in the bottom-left corner. Never blocks the page. */
.foot-cookie { padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.foot-cookie:hover { color: var(--accent-deep); }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.cookie-card { position: relative; overflow: hidden; max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 24px 60px -18px rgba(30, 27, 22, 0.38), 0 2px 8px rgba(30, 27, 22, 0.06); pointer-events: auto; transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.1), opacity 0.3s ease; }
/* A warm glow in the corner behind the biscuit. */
.cookie-card::before { content: ''; position: absolute; top: -70px; left: -60px; width: 220px; height: 200px; background: radial-gradient(closest-side, rgba(255, 102, 75, 0.14), rgba(255, 102, 75, 0)); pointer-events: none; }
.cookie.open .cookie-card { transform: none; opacity: 1; }
.cookie-head { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cookie-head h2 { font-size: 21px; line-height: 1.2; }
.cookie-art { flex: none; width: 50px; height: 50px; }
.cookie-ring { stroke: var(--coral); transform-origin: 32px 32px; }
.cookie-biscuit { fill: #E7C793; stroke: #C99A5B; stroke-width: 1.2; }
.cookie-chip { fill: #6E4424; }
.cookie-crumb { fill: #E7C793; }
.cookie.open .cookie-ring { animation: cookie-turn 14s linear infinite; }
.cookie.open .cookie-crumb { animation: cookie-crumb 2.6s ease-in-out infinite; }
.cookie.open .cookie-crumb + .cookie-crumb { animation-delay: 0.4s; }
@keyframes cookie-turn { to { transform: rotate(360deg); } }
@keyframes cookie-crumb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, -2px); } }
.cookie-text { position: relative; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.cookie-text a { white-space: nowrap; font-weight: 600; }
.cookie [hidden] { display: none !important; }
.cookie-choices { display: grid; gap: 2px; margin-top: 14px; }
.cookie-choices:not([hidden]) { animation: cookie-open 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes cookie-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.cookie-row-text { display: flex; flex-direction: column; gap: 2px; }
.cookie-row strong { font-size: 14.5px; }
.cookie-row small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cookie-always { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--green); padding: 4px 10px; border-radius: 99px; background: #E6EEEA; }
.switch { position: relative; flex: none; width: 46px; height: 28px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #D8CFBF; transition: background 0.2s ease; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(30, 27, 22, 0.25); transition: transform 0.25s cubic-bezier(0.3, 0.8, 0.3, 1.2); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.cookie-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cookie-actions .btn { padding-inline: 10px; }
.cookie-actions [data-cookie-save] { grid-column: 1 / -1; }
.cookie-choose { grid-column: 1 / -1; justify-self: center; padding: 6px 10px; border: 0; background: none; font: 600 14px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; cursor: pointer; }
.cookie-choose:hover { color: var(--accent-deep); }
.cookie.choosing [data-cookie-accept], .cookie.choosing [data-cookie-reject], .cookie.choosing .cookie-choose { display: none; }
/* While it is open on a phone, the action bar steps aside so the two never stack. */
.cookie-on .mbar { transform: translateY(110%) !important; }
@media (min-width: 720px) {
  .cookie { left: 24px; right: auto; bottom: 24px; width: 420px; padding: 0; }
  .cookie-card { padding: 22px 22px 18px; }
  .cookie-head h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-card { transition: opacity 0.2s ease; transform: none; }
  .cookie.open .cookie-ring, .cookie.open .cookie-crumb { animation: none; }
}