/* Hallmark · shape: travel journal · genre: editorial · theme: Loom (deal 3/3), brand adaptation · redesign: full
 * hero: Counter (finder), Stage (family), Banner (guides) · nav: masthead · footer: colophon
 * signature: large place names, local photographs and ruled travel plans · draw: 9e7433
 * axes: light/roman-serif/cool · imagery: existing credited local photographs · v2.0.0
 * critique: the previous yellow wash and condensed type made long practical content tiring to read.
 * Brand adaptation: Barlow body and cobalt logo retained; Caslon display, paper surfaces, charcoal text.
 * Draw swaps: a working finder replaces venue hours; editorial destination rows replace a bento and events.
 */
/* Hallmark · waive 24b · existing travel forms use compact spacing · The travel journal retains practical table and form spacing instead of forcing every legacy value onto the display scale. */
/* Hallmark · waive 44c · header and working finder together form the first screen · The travel journal has useful content directly after its masthead; stretching every guide header would bury the destination photograph. */
/* Hallmark · waive 49b · original source names and descriptive links retained · The travel journal keeps meaningful source names readable by allowing narrow-screen text links to wrap. */
/* Hallmark · waive 59 · long travel plans contain closely related sections · The travel journal groups related itinerary and transport details without adding promotional gaps between practical instructions. */
/* Hallmark · waive 71 · independent review confirmed aligned family headings · The travel journal family-case heading occupies the left column; the checker compares it with text in the neighbouring column. */
/* Hallmark · waive 72 · independent review confirmed contained time result · The travel journal time-result uses native closed details; hidden descendants distort the checker's bottom-space measurement. */
/* Hallmark · waive 77 · functional guide and feedback sections preserved · The travel journal retains a compact feedback form and does not invent promotional sections to fill a marketing template. */
/* Hallmark · waive 79 · photographs and controls follow the heading immediately · The travel journal first screen contains real destination photography or a working finder below the header detected by the checker. */
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/libre-caslon-display-400.ttf') format('truetype'); }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--muted) var(--paper); }
body { background: var(--paper); color: var(--text); font-size: 18px; line-height: 1.65; }
h1, h2 { font-weight: 400; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; min-width: 0; overflow-wrap: break-word; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-section); }
h3, h4 { line-height: 1.3; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--ink); }
.page-shell, .site-header-inner { width: min(var(--container), calc(100% - 64px)); }
.site-header { background: var(--paper); color: var(--ink); }
.site-header-inner { min-height: 100px; border-bottom: 1px solid var(--ink); }
.site-header .wordmark { width: 208px; }
.site-nav { gap: 32px; font-size: 16px; }
.site-nav>a { min-height: 48px; }
.site-nav>a[aria-current] { text-decoration: none; box-shadow: inset 0 -4px var(--yellow); }
.site-nav>a:hover { text-decoration: underline; }
.breadcrumbs { padding-block: 20px; color: var(--muted); font-size: 14px; }
.button { min-height: 48px; border-radius: 0; padding: var(--space-sm) 20px; background: var(--blue); border-color: var(--blue); color: var(--paper-raised); font-size: 16px; line-height: 1.4; }
.button:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.button:active { background: var(--ink); border-color: var(--ink); }
.button:disabled { background: var(--muted); border-color: var(--muted); cursor: not-allowed; opacity: .6; }
.button-secondary { background: transparent; border-color: var(--field-rule); color: var(--ink); }
.button-secondary:hover { background: var(--paper-well); border-color: var(--ink); color: var(--ink); }
.button-secondary:active { background: var(--rule); }
.text-link { color: var(--blue); font-size: 16px; }
select, .budget-field input, .time-form input { border: 1px solid var(--field-rule); border-radius: 0; background: var(--paper-raised); color: var(--ink); min-height: 48px; font-size: 18px; }
select:hover, .budget-field input:hover, .time-form input:hover { border-color: var(--ink); }
select:disabled, input:disabled { background: var(--paper-well); color: var(--muted); cursor: not-allowed; }
[aria-invalid=true] { border-color: var(--error); }
.small, .field-note, .output-note, .sources-inline, .destination-meta { font-size: 14px; line-height: 1.6; color: var(--muted); }
.checkbox-label { font-size: 16px; }
.lead, .destination-summary { font-size: var(--text-lead); line-height: 1.5; max-width: 58ch; }
.reading-page { max-width: var(--container); padding-block: var(--space-lg) 80px; }
.page-heading { padding-block: var(--space-md) var(--space-xl); margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.page-heading h1 { font-size: var(--text-display); max-width: 20ch; margin-bottom: var(--space-lg); }
.page-heading>p { max-width: 62ch; }
.prose { max-width: 66ch; margin-inline: auto; }
.prose p, .prose li { max-width: 66ch; }
.prose h2 { font-size: clamp(32px, 3vw, 40px); margin-top: 48px; margin-bottom: 20px; }
.prose h3 { margin-top: 32px; }
.paper-section { background: var(--paper-raised); padding-block: var(--space-2xl); }
.section-heading { align-items: start; gap: var(--gap-columns); margin-bottom: 32px; }
.section-heading h2 { max-width: 20ch; }
.section-heading>p { max-width: 44ch; font-size: 16px; }
.in-page-nav { border-block-color: var(--rule); font-size: 16px; gap: 4px var(--space-lg); padding-block: var(--space-sm); }
.in-page-nav>a { min-height: 44px; }
.travel-photo figcaption { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: var(--space-sm); }
.photo-caption { font-size: 15px; }
.photo-credit a { color: inherit; font-weight: 400; }
.home-heading { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; padding-block: 32px; }
.home-heading h1 { max-width: none; font-size: clamp(48px, 5vw, 68px); margin: 0; }
.home-heading .finder-intro { font-size: 24px; line-height: 1.45; margin: 0 0 4px; max-width: 28ch; }
.kiosk { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--gap-columns); padding-block: 0 var(--space-2xl); color: var(--text); align-items: start; }
.kiosk-request { padding: var(--space-lg) 32px 28px; background: var(--paper-well); border-top: 6px solid var(--yellow); }
.finder-form label:not(.checkbox-label) { margin-top: var(--space-sm); font-size: 16px; }
.finder-form select { background: var(--paper-raised); margin-top: var(--space-xs); }
.finder-time-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.finder-time-fields>label { min-width: 0; }
.finder-time-link { min-height: 36px; font-size: 14px; }
.finder-submit { min-height: 52px; margin-top: var(--space-sm); }
.kiosk-output { padding: 0; }
.output-heading { margin: 0 0 var(--space-md); border-bottom: 1px solid var(--rule); padding-bottom: var(--space-sm); }
.output-heading h2 { font-size: 16px; }
.ticket { background: transparent; border-radius: 0; box-shadow: none; }
.ticket-body, .ticket:has(.travel-photo) .ticket-body { padding: 0; display: flex; flex-direction: column; }
.ticket .travel-photo { order: -1; margin: 0 0 20px; }
.ticket .travel-photo img { aspect-ratio: 2; object-fit: cover; }
.ticket-destination, .ticket .ticket-name-long { text-transform: none; font-size: clamp(48px, 5vw, 72px); font-weight: 400; line-height: 1.04; letter-spacing: -.025em; }
.ticket-country { font-size: 14px; margin-top: var(--space-xs); }
.ticket:has(.travel-photo) .ticket-tagline { font: 600 20px/1.4 var(--font-body); margin-block: var(--space-md); max-width: none; }
.ticket-meta { gap: 32px; }
.ticket-meta dt { font-size: 14px; }
.ticket-meta dd { font-size: 17px; }
.ticket-reason { font-size: 17px; }
.ticket-reason h4 { font-size: 17px; }
.ticket-caveat { font-size: 16px; border-left: 4px solid var(--yellow); padding-left: var(--space-md); color: var(--text); }
.ticket-stub { padding: 20px 0 0; border-top: 0; }
.ticket-stub::before, .ticket-stub::after { content: none; }
.ticket-stub .button { width: auto; }
.empty-ticket { padding: 32px; background: var(--paper-well); }
.empty-ticket h3, .empty-ticket h2 { font-size: 40px; font-weight: 400; }
.next-steps { gap: var(--gap-columns); padding-block: var(--space-2xl) 80px; border-top: 1px solid var(--ink); }
.next-steps h2 { font-size: var(--text-section); }
.next-steps-photo { margin-top: 32px; }
.next-steps-photo img { aspect-ratio: 1.6; }
.link-list>a { padding-block: var(--space-lg); min-height: 120px; }
.link-list strong { font: 400 32px/1.2 var(--font-display); }
.link-list a>span>span { font-size: 17px; margin-top: var(--space-sm); }
.directory-list { border-top: 2px solid var(--ink); margin-block: var(--space-xl) var(--space-2xl); }
.directory-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--gap-columns); padding-block: var(--space-xl); border-color: var(--rule); }
.directory-item .travel-photo { max-width: none; margin-bottom: 20px; }
.directory-item .travel-photo img { aspect-ratio: 1.7; }
.directory-item h2, .directory-item h3 { font-size: 44px; }
.directory-item p { font-size: 18px; line-height: 1.6; }
.directory-item .small { font-size: 14px; }
.month-finder { background: var(--paper-well); padding: 32px; border: 0; border-left: 6px solid var(--yellow); }
.month-finder legend { font: 600 24px/1.3 var(--font-body); }
.month-finder label:not(.checkbox-label) { font-size: 16px; }
.destination-page { background: var(--paper); }
.destination-heading { padding-block: var(--space-lg) 32px; }
.destination-heading h1, .destination-heading h1.name-long { font-size: var(--text-display); font-weight: 400; }
.destination-tagline { font: 400 24px/1.45 var(--font-body); max-width: 40ch; }
.destination-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.destination-photo .travel-photo { max-width: none; margin-bottom: var(--space-xl); }
.destination-photo img { aspect-ratio: 2.5; object-fit: cover; }
.season-layout, .base-layout, .booking-section, .split-content, .fit-section, .base-options, .rain-plan { gap: var(--gap-columns); }
.season-layout h2 { font-size: var(--text-section); }
.season-copy, .base-option p, .itinerary p { font-size: 18px; line-height: 1.65; }
.season-copy p, .arrival-copy p, .mobility-copy>p, .itinerary p { max-width: 65ch; }
.dossier-section { padding-block: var(--space-2xl); }
.fit-section { padding-block: var(--space-xl); }
.base-summary { background: var(--yellow-soft); border-left: 5px solid var(--yellow); padding: 28px; }
.base-summary h3, .base-option h3 { text-wrap: balance; font: 600 24px/1.25 var(--font-body); }
.itinerary>li { grid-template-columns: 120px minmax(0, 1fr); gap: var(--gap-columns); padding-block: 32px; }
.day-number { font: 400 36px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.itinerary h3 { font-size: 24px; }
.honest-catch { border-left: 4px solid var(--yellow); padding: 0 0 0 20px; border-top: 0; }
.compare-table { font-size: 16px; line-height: 1.6; }
.compare-table th, .compare-table td { padding-block: var(--space-lg); }
.compare-table tbody th { font-size: 15px; }
.compare-table thead th { font-size: 36px; font-variant-numeric: tabular-nums; }
.compare-table tbody tr:nth-child(even) { background: var(--paper-well); }
.compare-table td, .compare-table th { padding-left: var(--space-md); }
.family-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap-columns); padding-block: 48px var(--space-2xl); align-items: center; }
.family-hero h1 { font-size: var(--text-display); }
.family-hero .lead { font-size: var(--text-lead); }
.family-hero-photo img { aspect-ratio: 1; }
.family-start { border-color: var(--rule); }
.family-start>p { font-size: 16px; }
.stay-filter { background: var(--paper-well); padding: var(--space-lg); border: 0; border-left: 6px solid var(--yellow); gap: var(--space-lg); }
.stay-filter label { font-size: 16px; }
.stay-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--gap-columns); padding-block: 48px; border-color: var(--rule); }
.stay-facts h3 { text-wrap: balance; font: 400 36px/1.15 var(--font-display); }
.stay-facts>p, .stay-copy>p { font-size: 18px; line-height: 1.65; }
.stay-facts .stay-capacity { font-size: 20px; }
.stay-actions { gap: 20px; }
.family-case, .family-next { gap: var(--gap-columns); padding-block: 32px; }
.family-case h3 { font: 600 24px/1.3 var(--font-body); }
.budget-heading { padding-block: 32px; }
.budget-heading h1 { font-size: var(--text-display); }
.budget-heading .lead { font-size: var(--text-lead); }
.budget-form { max-width: none; }
.budget-form fieldset { border-top: 1px solid var(--rule); padding-top: 28px; margin-bottom: 48px; }
.budget-form legend { font: 600 24px/1.3 var(--font-body); }
.budget-party-grid { gap: var(--space-lg); }
.budget-field { font-size: 16px; }
.budget-field input { padding: 10px var(--space-sm); height: 48px; line-height: 1.4; }
.budget-input-table th, .budget-input-table td { padding-block: 20px; }
.budget-input-table th>span { font-size: 14px; }
.budget-input-table tbody tr:nth-child(even) { background: var(--paper-well); }
.budget-result-grid { gap: var(--gap-columns); }
.budget-receipt { border-top: 4px solid var(--blue); padding: var(--space-lg); background: var(--paper-raised); }
.budget-receipt h3 { font: 600 24px/1.3 var(--font-body); }
.budget-sum { font: 400 clamp(40px, 5vw, 64px)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.budget-ledger, .budget-place p, .budget-ceiling p { font-size: 17px; }
.budget-balance { background: var(--yellow-soft); }
.time-balance { padding-block: 32px 48px; }
.time-form label { font-size: 16px; }
.time-result { background: var(--paper-well); border-top: 4px solid var(--blue); }
.time-summary dd { font-weight: 400; font-variant-numeric: tabular-nums; }
.checklist label, .source-list, .source-list h3 { font-size: 17px; }
.source-list p { max-width: 65ch; }
.feedback { padding-block: var(--space-xl); }
.feedback-options label { font-size: 16px; }
.site-footer { background: var(--ink); padding-top: 48px; color: var(--paper); }
.footer-top { gap: var(--gap-columns); padding-bottom: var(--space-xl); }
.footer-top .wordmark { width: 280px; }
.footer-top nav { font-size: 16px; }
.footer-top nav h2 { color: var(--yellow); font-size: 16px; }
.footer-bottom { font-size: 14px; padding-block: var(--space-lg); border-color: var(--footer-rule); }
.site-footer :focus-visible { outline-color: var(--yellow); }
@media (max-width: 1000px) {
    .home-heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: 32px; }
    .home-heading h1 { max-width: none; }
    .home-heading .finder-intro { max-width: 48ch; font-size: 21px; }
    .kiosk-request { padding: 20px; }
    .finder-time-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .directory-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .directory-item>.text-link { grid-column: 2; }
    .site-nav { gap: 20px; }
}
@media (max-width: 760px) {
    :root { --gap-columns: var(--space-lg); }
    .page-shell, .site-header-inner { width: calc(100% - 40px); }
    .site-header-inner { display: block; min-height: 0; padding-block: 20px var(--space-sm); }
    .site-header .wordmark { width: 184px; }
    .site-nav { gap: var(--space-lg); font-size: 15px; margin-top: var(--space-sm); }
    .site-nav>a { min-height: 44px; }
    .home-heading h1 { max-width: none; font-size: 48px; }
    .home-heading { padding-block: var(--space-lg); gap: var(--space-md); }
    .home-heading .finder-intro { font-size: 18px; }
    .kiosk-request { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .finder-form label:not(.checkbox-label) { font-size: 15px; }
    .kiosk { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-bottom: 48px; }
    .finder-time-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
    .finder-form select { font-size: 16px; padding-inline: var(--space-xs) var(--space-lg); }
    .ticket .travel-photo img { aspect-ratio: 1.5; }
    .ticket-destination, .ticket .ticket-name-long { font-size: 56px; }
    .next-steps, .family-hero, .stay-row, .family-case, .family-next, .season-layout, .base-layout, .booking-section, .split-content, .fit-section, .base-options, .rain-plan { grid-template-columns: minmax(0, 1fr); }
    .next-steps, .dossier-section, .paper-section { padding-block: var(--space-xl); }
    .page-heading { padding-bottom: var(--space-lg); }
    .page-heading h1, .family-hero h1, .budget-heading h1, .destination-heading h1, .destination-heading h1.name-long { font-size: clamp(44px, 9vw, 64px); }
    .section-heading { display: block; }
    .section-heading>p { max-width: 54ch; margin-top: var(--space-md); }
    .directory-item { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 32px; }
    .directory-item>div:first-child, .directory-item>p, .directory-item>.text-link { grid-column: auto; grid-row: auto; }
    .directory-item h2, .directory-item h3 { font-size: 40px; }
    .month-finder { padding: var(--space-lg) 20px; }
    .month-finder .form-grid { grid-template-columns: minmax(0, 1fr); }
    .destination-heading { display: block; }
    .destination-heading .button { margin-top: 20px; }
    .destination-photo img { aspect-ratio: 1.5; }
    .destination-summary { font-size: 20px; }
    .itinerary>li { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
    .family-hero { padding-block: 32px var(--space-xl); }
    .family-hero-photo img { aspect-ratio: 1.5; }
    .stay-filter { padding: 20px; }
    .budget-party-grid, .budget-result-grid { grid-template-columns: minmax(0, 1fr); }
    .budget-input-table th, .budget-input-table td { padding-left: var(--space-xs); }
    .budget-input-table .budget-row-label { width: 36%; }
    .budget-input-table input { padding-inline: var(--space-xs); font-size: 16px; }
    .budget-input-table th>span { font-size: 13px; }
    .budget-receipt { padding: 20px; }
    .footer-top, .footer-bottom { flex-direction: column; }
    .footer-links { gap: var(--space-lg); }
}
@media (max-width: 380px) {
    .site-nav { gap: var(--space-md); font-size: 14px; }
    .ticket-country { flex-direction: column; gap: 0; }
    .footer-links { grid-template-columns: minmax(0, 1fr); }
    .button { padding-inline: var(--space-sm); }
    .family-start .button .icon, .family-next .button .icon { display: none; }
}
.activity-link { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-left: 2px solid var(--rule); background: var(--paper-raised); }
.activity-link p:first-child { margin-top: 0; }
.activity-link p:last-child { margin-bottom: 0; }
.activity-link .small, .itinerary .activity-link .small { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
    /* Pro Standard limits print copies; visitor printouts are not counted. */
    .travel-photo-online-only, .activity-link { display: none !important; }
    body { background: var(--print-paper); color: var(--print-ink); font-size: 11pt; }
    .home-heading, .kiosk, .family-hero { display: block; }
    .page-shell { width: 100%; }
    .paper-section, .dossier-section { padding-block: 16pt; }
    .budget-form { display: none; }
    .budget-receipt, .time-result, .base-summary { background: none; padding: 0; }
    .destination-photo img { aspect-ratio: auto; max-height: 65mm; width: auto; }
}

/* Twelve months stay scan-friendly and usable without scripting. */
.month-navigation { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); margin-block: var(--space-lg); }
.month-navigation a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-xs); border-bottom: 1px solid var(--rule); font-size: 16px; }
.month-navigation a[aria-current="page"] { color: var(--ink); background: var(--yellow); font-weight: 600; text-decoration: none; }
.month-navigation a:hover { background: var(--paper-well); color: var(--ink); }
.month-navigation a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.month-destination-copy p:first-child { margin-top: 0; }
.month-suitability { padding-left: 1.1em; color: var(--muted); font-size: 16px; }
.footer-top .footer-month-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); }
.footer-month-navigation h2 { grid-column: 1 / -1; }
@media (max-width: 680px) { .month-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Compact mobile navigation keeps the first screen available for travel ideas. */
.navigation-toggle { display: none; }
@media (max-width: 760px) {
    .site-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); padding-block: var(--space-xs); }
    .site-header .wordmark { width: 140px; }
    .navigation-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--space-md); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 600 16px var(--font-body); cursor: pointer; }
    .navigation-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
    .site-header .site-nav { grid-column: 1 / -1; margin-top: 0; gap: var(--space-xs) var(--space-lg); }
    .navigation-toggle:not([hidden])[aria-expanded="false"] + .site-nav { display: none; }
    .home-heading { padding-block: var(--space-md); gap: var(--space-xs); }
    .home-heading h1 { font-size: 36px; line-height: 1.05; }
    .home-heading .finder-intro { font-size: 16px; line-height: 1.4; }
}

/* Occasion guides use the existing journal: dates as ruled rows, sources beside claims. */
.occasion-index { margin-block: var(--space-xl); border-top: 1px solid var(--rule); padding-top: var(--space-lg); }
.occasion-index .planning-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); }
.occasion-index .planning-links li { min-width: 0; margin: 0; }
.occasion-dates { margin-block: var(--space-lg); }
.occasion-dates > div { border-top: 1px solid var(--rule); padding-block: var(--space-md); }
.occasion-dates dt { font-weight: 600; }
.occasion-dates dd { margin: var(--space-xs) 0 0; }
@media (max-width: 680px) { .occasion-index .planning-links { grid-template-columns: minmax(0, 1fr); } }

/* Photographic openings keep the travel choice alongside the place. */
.occasion-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--gap-columns); align-items: center; margin-bottom: var(--space-lg); }
.occasion-hero .page-heading { border: 0; margin: 0; padding-block: var(--space-md); }
.occasion-hero .page-heading h1 { font-size: clamp(38px, 4.3vw, 62px); overflow-wrap: break-word; min-width: 0; }
.occasion-hero .travel-photo { margin: 0; min-width: 0; }
.occasion-hero .travel-photo img { width: 100%; height: 440px; object-fit: cover; }
.occasion-hero .photo-caption { font-size: 14px; }
.occasion-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); list-style: none; padding: 0; margin-top: var(--space-lg); }
.occasion-stories li { min-width: 0; position: relative; }
.occasion-stories .travel-photo { margin: 0 0 var(--space-sm); }
.occasion-stories .travel-photo img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; }
.occasion-story-link { display: inline-block; font-size: 22px; line-height: 1.25; font-weight: 600; text-decoration: none; }
.occasion-story-link::after { content: ""; position: absolute; inset: 0; }
.occasion-story-link:hover { text-decoration: underline; }
.occasion-story-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.occasion-story-link:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 5px; }
.occasion-stories .photo-credit a { position: relative; z-index: 1; }
.occasion-stories li > span { display: block; margin-top: var(--space-xs); color: var(--muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 1000px) { .occasion-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
    .occasion-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
    .occasion-hero .page-heading { padding-top: 0; }
    .occasion-hero .page-heading h1 { margin-bottom: var(--space-sm); }
    .occasion-hero .page-heading p { margin-block: var(--space-sm); }
    .occasion-hero .travel-photo img { height: 230px; }
    .occasion-hero .button { font-size: 14px; padding-inline: 12px; }
    .occasion-stories { grid-template-columns: minmax(0, 1fr); }
}

/* Activity browsing keeps the offer, its source and its next step together. */
.activities-page { padding-block: var(--space-lg) var(--space-2xl); }
.activities-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .48fr); align-items: center; gap: var(--gap-columns); margin-bottom: var(--space-lg); }
.activities-header h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; overflow-wrap: break-word; min-width: 0; margin: 0 0 var(--space-md); }
.activities-header p { margin: 0; }
.activities-place { min-width: 0; }
.activities-place .travel-photo { margin: 0; }
.activities-place .travel-photo img { display: block; width: 100%; height: 180px; object-fit: cover; }
.activities-place > p { color: var(--muted); font-size: 14px; margin-top: var(--space-xs); }
.activities-disclosure { padding-block: var(--space-md); border-top: 1px solid var(--rule); font-size: 16px; }
.activities-disclosure > p { margin: 0 0 var(--space-xs); }
.activities-disclosure details p { max-width: 65ch; }
.activities-disclosure summary, .activity-offer summary { width: fit-content; min-height: 44px; padding-block: var(--space-xs); color: var(--blue); cursor: pointer; }
.activities-disclosure summary:focus-visible, .activity-offer summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.activities-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; }
.activity-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--rule); }
.activity-offer-copy { min-width: 0; }
.activity-offer h2 { font: 600 24px/1.3 var(--font-body); margin: 0 0 var(--space-xs); text-wrap: balance; overflow-wrap: break-word; }
.activity-offer details p { max-width: 65ch; margin-block: var(--space-sm); }
.activity-offer .button { margin: 0; white-space: nowrap; }
.activity-offer-action > p { margin: var(--space-xs) 0 0; font-size: 14px; color: var(--muted); }
.activities-return { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
@media (max-width: 680px) {
    .activities-page { padding-top: var(--space-sm); }
    .activities-header { grid-template-columns: minmax(0, 1fr) 112px; gap: var(--space-md); align-items: start; margin-bottom: var(--space-md); }
    .activities-header h1 { font-size: 36px; margin-bottom: var(--space-sm); }
    .activities-header > div > p { font-size: 16px; line-height: 1.4; }
    .activities-place .travel-photo img { height: 112px; }
    .activities-place > p { font-size: 13px; line-height: 1.35; }
    .activity-offer { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-lg); }
    .activity-offer h2 { font-size: 22px; }
    .activity-offer .button { justify-self: start; }
}
@media (max-width: 380px) {
    .activities-header { grid-template-columns: minmax(0, 1fr) 88px; }
    .activities-header h1 { font-size: 32px; }
    .activities-place .travel-photo img { height: 104px; }
}