/* shared structural base (layout only; theme comes from the guide block below) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Libre Franklin", system-ui, sans-serif; line-height: 1.65; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { color: var(--berry); }
button, input, select { font: inherit; }
h1, h2, h3 { font-family: "Newsreader", Georgia, serif; font-weight: 650; line-height: 1.12; margin: 0; }
p { margin: 0 0 1em; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--maple); z-index: 100; }
.section-kicker, .kicker, .about-cta-kicker, .browser-label { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }

/* Header */
article.day, .day[id] { scroll-margin-top: 96px; }
.site-header { position: sticky; top: 0; z-index: 30; color: var(--on-deep); box-shadow: 0 1px 0 color-mix(in srgb, var(--on-deep) 14%, transparent); }
.header-inner { max-width: var(--max); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-mark { display: inline-flex; align-items: center; gap: 13px; color: #fffaf0; text-decoration: none; }
.home-mark .brand-logo { width: 66px; flex: 0 0 auto; height: auto; border-radius: 50%; mix-blend-mode: screen; }
.brand-wordmark { display: grid; gap: 1px; color: #fffaf0; font-family: "Newsreader", serif; font-size: 1.06rem; font-weight: 650; line-height: 1.1; }
.brand-wordmark span:last-child { color: var(--sun, #efbe4c); }
.site-nav { display: flex; align-items: center; gap: 10px; }
.site-nav > a { color: inherit; text-decoration: none; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 9px 10px; }
.site-nav > a:hover { color: var(--gold-soft); }
.header-search, .header-share { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid color-mix(in srgb, var(--on-deep) 40%, transparent); background: none; color: inherit; cursor: pointer; }
.header-search svg, .header-share svg { width: 18px; height: 18px; }
.header-search-bar { display: none; padding: 0 24px 14px; }
.header-search-bar.open { display: block; }
.search-wrap { max-width: var(--max); margin: 0 auto; position: relative; }
.search-wrap input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font-size: 16px; }
.search-suggest[hidden] { display: none; }

/* Hero: full-bleed dark band in the guide's own palette (Dublin structure) */
main { display: block; }
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); min-height: 86svh; background: var(--hero-bg, var(--berry-deep)); color: var(--hero-ink, #fff8e9); }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(42px, 7vw, 108px) clamp(24px, 5vw, 72px) 54px max(24px, calc((100vw - var(--max)) / 2 + 24px)); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 28px; font-size: .78rem; font-weight: 700; color: var(--hero-soft, #e8dccf); }
.breadcrumb a { color: var(--hero-ink, #fff8e9); text-decoration: none; }
.breadcrumb span[aria-hidden="true"] { color: var(--hero-accent, #efbe4c); }
.category-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cat-badge { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--hero-ink, #fff8e9) 55%, transparent); color: var(--hero-ink, #fff8e9); background: transparent; }
.cat-badge.cat-primary { background: var(--hero-chip, rgba(255,255,255,.14)); border-color: transparent; color: var(--hero-ink, #fff8e9); }
.kicker { color: var(--hero-accent, #efbe4c); letter-spacing: .19em; margin-bottom: 18px; }
.hero h1 { max-width: 15ch; font-size: clamp(2.9rem, 6.6vw, 6.4rem); line-height: .94; letter-spacing: -.035em; margin-bottom: 18px; }
.hero h1 em { display: block; font-style: italic; font-weight: 500; color: var(--hero-accent, #efbe4c); }
.verified-date { font-size: .82rem; font-weight: 700; color: var(--hero-soft, #e8dccf); margin: 0 0 18px; }
.dek { max-width: 36em; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.18rem, 1.9vw, 1.6rem); line-height: 1.32; color: var(--hero-soft, #e8dccf); }
.guide-style-tags { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ts-tag { display: inline-block; font-size: .82rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; color: var(--hero-accent, #efbe4c); border: 1px solid color-mix(in srgb, var(--hero-accent, #efbe4c) 45%, transparent); background: color-mix(in srgb, var(--hero-accent, #efbe4c) 8%, transparent); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--hero-ink, #fff8e9) 24%, transparent); font-size: .86rem; font-weight: 700; }
.hero-art { position: relative; z-index: 1; align-self: center; margin: 0; }
.hero-art img { width: 100%; height: auto; }
.hero-art figcaption { position: absolute; left: 14px; top: 14px; padding: 6px 10px; font-size: .7rem; letter-spacing: .04em; color: #fff; background: rgba(12, 10, 8, .72); }

/* On this page */
.jump-wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px 28px; }
.toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.toc summary { cursor: pointer; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.jump a { font-size: .9rem; font-weight: 700; color: var(--ink); }

/* Hero photo */
.guide-hero { max-width: var(--max); margin: 0 auto 8px; padding: 0 24px; }
.guide-hero img { width: 100%; height: auto; object-fit: contain; }
.guide-hero figcaption, .day-photo figcaption, .route-map figcaption, .pack-photo figcaption, .plan-extra figcaption, .gallery figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); }

/* Overview */
.overview { max-width: var(--max); margin: 0 auto; padding: 48px 24px; }
.overview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.overview-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.share-control { position: relative; }
.share-trip-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--ink); background: none; color: var(--ink); font-weight: 800; cursor: pointer; }
.share-trip-button svg { width: 18px; height: 18px; }
.share-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: 0 16px 32px var(--shadow); z-index: 20; display: grid; }
.share-menu[hidden] { display: none; }
.share-menu button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.share-menu button svg { width: 18px; height: 18px; }
.share-copy-fallback { width: 100%; }
.share-copy-fallback[hidden] { display: none; }
.share-copy-fallback input { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); }
.overview-cards { margin-bottom: 32px; }
.trip-card { background: var(--paper-2); border: 1px solid var(--line); border-top: 5px solid var(--berry); padding: 26px 28px; }
.trip-card h3 { font-size: 1.4rem; margin-bottom: 14px; }
.trip-card dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.trip-card dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.trip-card dt { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.trip-card dd { margin: 4px 0 0; }
.overview-route { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 48px; align-items: start; }
.route-map { margin: 0; grid-row: span 2; }
.route-map img { width: 100%; height: auto; object-fit: contain; }
.intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.day-summary h3 { font-size: 1.3rem; margin-bottom: 12px; }
.day-summary-list { display: grid; gap: 10px; }
a.day-summary-button { text-decoration: none; color: inherit; box-sizing: border-box; }
.day-summary-button { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); text-align: left; cursor: pointer; }
.day-summary-button:hover { border-color: var(--berry); }
.day-summary-media img { width: 96px; height: 72px; object-fit: cover; }
.day-summary-caption { display: grid; gap: 2px; }
.day-summary-when { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.day-summary-place { font-family: "Newsreader", Georgia, serif; font-size: 1.15rem; font-weight: 650; }
.day-summary-text { font-size: .88rem; color: var(--muted); }
.day-summary-arrow { font-weight: 800; color: var(--accent-text); }

/* Route */
.route { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.route-head { margin-bottom: 26px; }
.route-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); margin-bottom: 10px; }
.route-sub { max-width: 44em; color: var(--muted); }
.day-accordion { display: grid; gap: 14px; }
.day { border: 1px solid var(--line); background: var(--paper-2); }
.day.is-even { background: var(--white); }
.accordion-heading { margin: 0; font-size: inherit; }
.accordion-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 22px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.accordion-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.accordion-place { font-family: "Newsreader", Georgia, serif; font-size: 1.35rem; font-weight: 650; }
.accordion-separator { color: var(--muted); }
.accordion-theme { font-size: .95rem; color: var(--muted); }
.accordion-icon { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); position: relative; }
.accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.day.is-open .accordion-icon::after { transform: translate(-50%, -50%) rotate(0); }
.accordion-panel { display: none; }
.day.is-open .accordion-panel { display: block; }
.accordion-panel-inner { padding: 0 22px 26px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 36px; align-items: start; overflow: hidden; min-height: 0; }
.day-image img { width: 100%; height: auto; object-fit: contain; }
.day-copy h4 { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin: 22px 0 8px; }
.day-copy ul { padding-left: 1.2em; }
.day-copy li { margin-bottom: 6px; }
.day-index { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.day-index b { font-family: "Newsreader", Georgia, serif; font-size: 2.2rem; color: var(--accent-text); }
.day-index span { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.route-note { margin-top: 18px; padding: 12px 14px; border-left: 4px solid var(--forest); background: var(--mist); font-size: .9rem; }
.tip { margin-top: 14px; padding: 14px 16px; background: var(--berry-deep); color: var(--on-deep); font-size: .94rem; }
.tip strong { color: var(--gold-soft); }
.day-photo { grid-column: 1 / -1; margin: 0; }
.day-photo img { width: 100%; height: auto; object-fit: contain; }
.day-accordion > blockquote { margin: 18px 0; padding: 28px 30px; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; color: var(--ink); border-left: 6px solid var(--maple); background: var(--mist); }
.day-accordion > blockquote span { display: block; color: var(--accent-text); }

/* About */
.about-cta { background: var(--berry-deep); color: var(--on-deep); }
.about-cta-inner { max-width: var(--max); margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.about-cta-copy { max-width: 46em; }
.about-cta .about-cta-kicker { color: var(--gold-soft); }
.about-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.about-cta-button { display: inline-block; padding: 12px 20px; border: 1px solid var(--on-deep); color: var(--on-deep); text-decoration: none; font-weight: 800; }
.about-cta-button:hover { background: var(--on-deep); color: var(--berry-deep); }

/* Planning */
.planning { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.planning-head { margin-bottom: 24px; }
.planning-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.plan-grid { display: grid; gap: 28px; }
.pack { background: var(--paper-2); border: 1px solid var(--line); padding: 26px 28px; }
.pack h3 { font-size: 1.35rem; margin-bottom: 12px; }
.pack ul { padding-left: 1.2em; margin: 0 0 18px; columns: 2; column-gap: 32px; }
.pack li { margin-bottom: 6px; break-inside: avoid; }
.pack-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pack-photo { margin: 0; }
.pack-photo img { width: 100%; height: auto; object-fit: contain; }
.plan-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; align-items: start; }
.plan-extra { margin: 0; }
.plan-extra img { width: 100%; height: auto; object-fit: contain; }
.plan-extra-copy h3 { font-size: 1.3rem; margin-bottom: 10px; }

/* Gallery */
.gallery { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.gallery-head { margin-bottom: 22px; }
.gallery-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; height: auto; object-fit: contain; }

/* FAQ */
.faq { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.faq h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 18px; }
.faq-list { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); background: var(--paper-2); padding: 0 18px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 800; }
.faq details p { margin: 0 0 16px; }

/* Checks */
.checks { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.checks h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 10px; }
.checks ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checks li { padding: 16px 20px; border: 1px solid; border-radius: 12px; }
/* Checks contrast: every color derived from this guide's theme tokens */
.checks { color: var(--ink); }
.checks h2 { color: var(--ink); }
.checks .section-kicker, .checks .checks-sub, .checks > p { color: var(--muted); }
.checks .checks-sub a { color: inherit; }
.checks li { background: var(--white); color: var(--ink); border-color: var(--line); }
.checks li a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Related */
.related { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.related-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.related-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.related-head > p { max-width: 30em; color: var(--muted); margin: 0; }
.browser-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.browser-card { background: var(--paper-2); border: 1px solid var(--line); }
.browser-card[hidden] { display: none; }
.browser-card a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.browser-card-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.browser-card-copy { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.browser-card-copy h3 { font-size: 1.15rem; }
.related .browser-card-copy h3 { color: var(--ink); }
.card-route { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.card-dek { margin: 0; font-size: .88rem; color: var(--muted); }
.card-meta { margin-top: auto; display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; }

/* Sources */
.official-links, .references { max-width: var(--max); margin: 0 auto; padding: 48px 24px; }
.sources-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 48px; }
.sources-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 8px; }
.section-sub { color: var(--muted); }
.source-list { display: grid; gap: 10px; }
.source-list > div { padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-2); }
.source-list a { font-weight: 800; color: var(--ink); }
.source-list small { display: block; color: var(--muted); font-size: .84rem; }
.photo-credits { grid-column: 1 / -1; font-size: .86rem; color: var(--muted); }
.photo-credits h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 8px; }
.photo-credits ul { padding-left: 1.2em; }
.photo-credits a { color: var(--ink); }

/* Trip browser */
.route-browser { background: var(--mist); padding: 64px 24px; }
.browser-inner { max-width: var(--max); margin: 0 auto; }
.browser-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.browser-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.browser-note { max-width: 32em; color: var(--muted); margin: 0; }
.filter-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; width: 100%; }
.reset { align-self: end; min-height: 44px; border: 1px solid var(--ink); background: none; color: var(--ink); font-weight: 800; cursor: pointer; }
.result-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .9rem; color: var(--muted); }
#filter-prompt, #active-note { display: flex; align-items: flex-start; gap: 12px; max-width: 100%; }
#filter-prompt[hidden], #active-note[hidden] { display: none; }
.filter-prompt { padding: 14px 0; color: var(--muted); }
.filter-prompt p { margin: 0; }
.prompt-arrow { font-weight: 800; color: var(--accent-text); }
.route-browser.is-dormant .browser-item { display: none; }
.browser-item[hidden] { display: none; }
.browser-featured { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 20px; }
.browser-featured-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.browser-featured-copy { padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.feature-dek { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 10px; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; }
.story-link { display: inline-flex; gap: 8px; font-weight: 800; color: var(--ink); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; }
.pagination[hidden] { display: none; }
.page-btn { min-height: 44px; padding: 8px 14px; border: 1px solid var(--ink); background: none; color: var(--ink); font-weight: 800; cursor: pointer; }
.page-btn:disabled { opacity: .45; cursor: default; }
.empty { display: none; padding: 24px 0; }
.empty.show { display: block; }

/* Divider, footer, viewer */
hr.greek-key { border: 0; height: 10px; margin: 0; background: repeating-linear-gradient(90deg, var(--berry-deep) 0 18px, var(--maple) 18px 22px); }
footer { background: var(--berry-deep); color: var(--on-deep); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 48px; }
.footer-brand { display: grid; gap: 14px; justify-items: start; }
.footer-logo { width: 72px; height: 72px; border-radius: 50%; }
.footer-tagline { margin: 0; }
.follow-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.follow-button { display: inline-block; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--on-deep) 50%, transparent); color: inherit; text-decoration: none; font-weight: 800; font-size: .84rem; }
.follow-button.primary { background: var(--on-deep); color: var(--berry-deep); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; align-content: start; }
.footer-nav a { color: inherit; text-decoration: none; font-size: .92rem; padding: 4px 0; }
.footer-nav a:hover { color: var(--gold-soft); }
.footer-lower { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--on-deep) 22%, transparent); font-size: .86rem; }
.footer-lower p { margin: 0 0 4px; }
.to-top { color: inherit; font-weight: 800; }
.image-viewer { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--berry-deep) 94%, black); display: flex; flex-direction: column; }
.image-viewer[hidden] { display: none; }
.image-viewer-bar { display: flex; justify-content: flex-end; padding: 10px; }
.image-viewer-close { width: 44px; height: 44px; border: 1px solid var(--on-deep); background: none; color: var(--on-deep); font-size: 1.6rem; cursor: pointer; }
.image-viewer-stage { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 12px; }
.image-viewer-stage img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }

@media (max-width: 1100px) {
  .home-mark { gap: 10px; }
  .home-mark .brand-logo { width: 54px; }
  .brand-wordmark { font-size: .9rem; }
}
@media (max-width: 860px) {
  .hero, .overview-route, .accordion-panel-inner, .sources-inner, .plan-extras, .browser-featured, .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; }
  .hero-copy { padding: 40px 24px 36px; }
  .hero-art { align-self: stretch; }
  .route-map { grid-row: auto; }
  .trip-card dl { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .header-inner { padding: 10px 16px; }
  .site-nav > a { display: none; }
  .overview, .route, .planning, .gallery, .faq, .checks, .related, .official-links, .references { padding: 40px 24px; }
  .route-browser { padding: 40px 24px; }
  .pack ul { columns: 1; }
  .pack-photos, .gallery-grid, .browser-grid { grid-template-columns: minmax(0, 1fr); }
  .accordion-toggle { padding: 16px; }
  .accordion-panel-inner { padding: 0 16px 20px; }
  .day-summary-button { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .day-summary-media img { width: 76px; height: 60px; }
  .footer-nav { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .home-mark { gap: 8px; }
  .home-mark .brand-logo { width: 48px; }
  .brand-wordmark { font-size: 1.05rem; }
}

/* Base v-next, day copy (SOP 5.10, Oct 8 2026): summary strip + Good to know. Theme tokens only; never restyled per guide. */
.day-copy .day-strip { margin: 20px 0 10px; padding: 10px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); color: var(--ink); font-size: .86rem; font-weight: 600; letter-spacing: .01em; line-height: 1.5; }
.day-copy .good-to-know { margin: 10px 0 0; padding: 12px 14px; border-left: 4px solid var(--maple); background: var(--paper-2); color: var(--ink); font-size: .92rem; }
.day-copy .good-to-know strong { color: var(--accent-text); }

/* Menu fix 20261008m: header + Trips menu use this page's own theme tokens */
.site-header { background: var(--berry-deep); }
.trip-menu-panel { background: var(--berry-deep); }
#destination-picker { background: var(--paper-2); color: var(--ink); }
#destination-picker option { background: var(--paper-2); color: var(--ink); }
.trip-menu .picker-wrap { color: var(--ink); }

/* salt-lake-city-tweens · "Salt Lake & Wasatch": the slate-teal of the Great Salt Lake, sandstone and sage of the Wasatch foothills,
   terracotta of the Rio Tinto Center, and the honey light of an Antelope Island evening. Written for this guide on 2026-10-16
   (palette taken from the finished illustrated cards: lake teal, sage, sandstone, terracotta, honey sky). Display face: Gilda Display. */
:root {
  color-scheme: light dark;
  --max: 1180px;
  --paper: #f4f0e6;
  --paper-2: #fbf8f1;
  --white: #fdfbf6;
  --ink: #1d2430;
  --muted: #535a63;
  --line: #ddd5c4;
  --mist: #ebe6d9;
  --berry: #b4532a;
  --berry-deep: #1e3b47;
  --maple: #d9a43c;
  --forest: #5b6b2f;
  --gold: #b8862e;
  --gold-soft: #f4e4bd;
  --shadow: rgba(30, 59, 71, .16);
  --on-deep: #f3eee2;
  --accent-text: #9a4320;
  --aegean: #2f7584;
  --olive: #6f7f4c;
  --display: "Gilda Display", "Didot", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10151c;
    --paper-2: #17202a;
    --white: #17202a;
    --ink: #ebe7de;
    --muted: #aab1b9;
    --line: #2a3542;
    --mist: #131a22;
    --berry: #e48a5f;
    --berry-deep: #0d1d23;
    --maple: #e8b960;
    --forest: #a9b979;
    --gold: #e0b563;
    --gold-soft: #f4e4bd;
    --shadow: rgba(0, 0, 0, .55);
    --on-deep: #f3eee2;
    --accent-text: #f0a27c;
    --aegean: #8cc7d1;
    --olive: #b8c486;
  }
}

/* type: a high-contrast classical display face, like carved inscriptions */
h1, h2, h3, .accordion-place, .day-summary-place, .kicker, .trip-card dt { font-family: var(--display); font-weight: 400; }
h1 { letter-spacing: -.005em; }
h2 { font-size: clamp(2rem, 4.1vw, 2.85rem); line-height: 1.1; }
.section-kicker { color: var(--accent-text); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }

/* hero: lake slate lifting to a sandstone dawn */
.hero { --hero-bg: #1e3b47; --hero-ink: #f3eee2; --hero-soft: #d6dde4; --hero-accent: #f4e4bd; --hero-chip: #28505c;
  background: radial-gradient(ellipse at 80% 0%, rgba(244, 228, 189, .18), transparent 48%), linear-gradient(180deg, #12282f 0%, #1e3b47 52%, #2a4a63 82%, #5a5a4a 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background: url("/salt-lake-city-tweens/assets/motif.svg") bottom center / 100% auto no-repeat; z-index: 0; pointer-events: none; }
.hero h1 { line-height: 1.06; }
.hero h1 em { font-style: italic; color: #f4e4bd; }
.kicker { letter-spacing: .15em; text-transform: uppercase; font-size: .84rem; }
.kicker::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: .6em; vertical-align: -.05em; background: #d9a43c; transform: rotate(45deg); }
.hero-meta span { padding: 4px 14px; border-radius: 999px; background: rgba(12, 26, 42, .5); border: 1px solid rgba(244, 228, 189, .4); }
.hero-art { padding: clamp(20px, 3vw, 40px); }
.hero-art img { border-radius: 4px; border: 10px solid #f7f2e6; box-shadow: 0 0 0 1px #7d8794, 0 26px 54px rgba(0, 0, 0, .5); }
.hero-art figcaption { left: calc(clamp(20px, 3vw, 40px) + 22px); top: calc(clamp(20px, 3vw, 40px) + 22px); border-radius: 3px; background: #1e3b47; color: #f4e4bd; border: 1px solid #d9a43c; letter-spacing: .08em; font-weight: 700; }

/* overview */
.guide-hero img { border-radius: 4px; box-shadow: 0 0 0 8px var(--paper-2), 0 0 0 9px var(--line), 0 22px 44px var(--shadow); }
.route-map img { border-radius: 4px; box-shadow: 0 18px 38px var(--shadow); }
.trip-card { border-radius: 6px; border: 1px solid var(--line); border-top: 6px solid var(--aegean); background: var(--paper-2); box-shadow: 0 12px 28px var(--shadow); }
.trip-card dt { color: var(--accent-text); letter-spacing: .07em; text-transform: uppercase; font-size: .9rem; }
.day-summary-button { border-radius: 6px; border: 1px solid var(--line); border-bottom: 4px solid var(--berry); }
.day-summary-media img { border-radius: 3px; }

/* route: a meander (Greek key) band as the divider */
.route::before { content: ""; display: block; height: 16px; margin-bottom: 30px;
  background: repeating-linear-gradient(90deg, var(--aegean) 0 4px, transparent 4px 16px, var(--aegean) 16px 20px, transparent 20px 24px) 0 0 / 100% 4px no-repeat,
              repeating-linear-gradient(90deg, var(--aegean) 0 20px, transparent 20px 24px) 0 12px / 100% 4px no-repeat,
              repeating-linear-gradient(90deg, transparent 0 8px, var(--aegean) 8px 12px, transparent 12px 24px) 0 4px / 100% 8px no-repeat; }
.day { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.day.is-even { background: color-mix(in srgb, var(--aegean) 5%, var(--paper-2)); }
.day-index b { display: inline-grid; place-items: center; width: 58px; height: 58px; color: #f4e4bd; background: #1e3b47; font-family: var(--display); font-size: 1.55rem; border-radius: 50%; box-shadow: inset 0 0 0 3px #d9a43c; }
.day-image img { border-radius: 4px; box-shadow: 0 16px 32px var(--shadow); }
.day-photo { margin-top: 28px; }
.tip { border-radius: 6px; border: 1px solid color-mix(in srgb, var(--aegean) 30%, transparent); border-left: 6px solid var(--berry); background: color-mix(in srgb, var(--gold-soft) 35%, var(--paper-2)); }
.route-note { border-left: 3px dashed var(--olive); padding-left: 12px; }

/* quote band: lake dusk under the Wasatch ridge line */
.day-accordion > blockquote { border: 0; border-radius: 8px; text-align: center; font-family: var(--display); font-style: italic; color: #f3eee2; padding-top: 48px; padding-bottom: 92px;
  background: url("/salt-lake-city-tweens/assets/motif.svg") bottom center / 100% auto no-repeat, radial-gradient(ellipse at 50% 0%, rgba(244, 228, 189, .2), transparent 62%), linear-gradient(180deg, #1e3b47 0%, #28505c 60%, #3f6068 100%); }
.day-accordion > blockquote span { color: #f4e4bd; font-style: normal; }

.about-cta { background: #1e3b47; }

/* planning: the packing pair as museum labels */
.pack { border-radius: 8px; border-top: 6px solid var(--olive); }
.pack-photos { align-items: start; gap: 24px; padding-top: 14px; }
.pack-photo { position: relative; margin: 0; padding: 10px 10px 14px; background: #fbf8f1; border: 1px solid #ddd5c4; border-radius: 3px; box-shadow: 0 12px 24px var(--shadow); }
.pack-photo img { display: block; border-radius: 2px; }
.pack-photo figcaption { color: #2a2f36; }

/* plan extras: mounted like gallery labels with a marble plinth edge */
.plan-extras { align-items: center; gap: 32px 46px; }
.plan-extra { position: relative; margin: 0; padding: 12px; background: #fbf8f1; border: 1px solid #ddd5c4; border-bottom: 6px solid #d8cfbd; border-radius: 3px; box-shadow: 0 20px 42px var(--shadow); }
.plan-extra figcaption { color: #2a2f36; padding: 6px 2px 0; }

/* photo stacks: three prints, a clipped ticket corner, a deckle edge, a rounded snapshot, with tape */
.photo-stack { margin: 28px 0 0; }
.stack-prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding: 16px 8px 18px; }
.stack-print { position: relative; display: block; padding: 8px 8px 20px; background: #fbf8f1; border: 1px solid #ddd5c4; box-shadow: 0 10px 20px rgba(22, 50, 79, .26); transform: rotate(-.9deg); }
.stack-print img { display: block; width: 100%; height: auto; }
.stack-print:nth-child(1) img { clip-path: polygon(7% 0, 100% 0, 100% 93%, 93% 100%, 0 100%, 0 7%); }
.stack-print:nth-child(1)::before { content: ""; position: absolute; top: -9px; left: 16px; width: 58px; height: 18px; background: rgba(47, 111, 163, .45); transform: rotate(-5deg); }
.stack-print:nth-child(2) { z-index: 2; margin: 0 -11%; transform: rotate(1.1deg) translateY(16px); }
.stack-print:nth-child(2) img { clip-path: polygon(0 2%, 7% 0, 16% 2%, 27% 0, 40% 2%, 54% 0, 67% 2%, 80% 0, 91% 2%, 100% 0, 100% 98%, 92% 100%, 79% 98%, 64% 100%, 50% 98%, 36% 100%, 22% 98%, 9% 100%, 0 98%); }
.stack-print:nth-child(2)::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(217, 164, 60, .55); transform: rotate(-2deg); }
.stack-print:nth-child(3) { transform: rotate(-.3deg) translateY(4px); }
.stack-print:nth-child(3) img { border-radius: 12px; }
.photo-stack-coast .stack-print:nth-child(1) { transform: rotate(.8deg); }
.photo-stack-coast .stack-print:nth-child(2) { transform: rotate(-1deg) translateY(16px); }
.photo-stack-coast .stack-print:nth-child(3) { transform: rotate(.5deg) translateY(4px); }

/* postcards: six prints with a lake-teal stamp and a terracotta postmark */
.gallery-grid { gap: 36px 30px; padding: 8px 4px; align-items: center; }
.gallery-grid figure { position: relative; margin: 0; padding: 12px 12px 18px; background: #fbf8f1; border: 1px solid #ddd5c4; border-radius: 3px; box-shadow: 0 14px 28px var(--shadow); transform: rotate(-1.1deg); }
.gallery-grid figure:nth-child(3n+2) { transform: rotate(1.2deg); }
.gallery-grid figure:nth-child(3n) { transform: rotate(-.5deg); }
.gallery-grid figure::before { content: ""; position: absolute; top: -10px; right: 16px; width: 36px; height: 42px; background: linear-gradient(200deg, #f4e4bd 0 38%, #2f6fa3 38%); border: 3px solid #fbf8f1; outline: 2px dashed #7d8794; outline-offset: -1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.gallery-grid figure::after { content: ""; position: absolute; top: 4px; right: 44px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(180, 83, 42, .55); pointer-events: none; }
.gallery-grid figure:nth-child(even)::before { background: linear-gradient(200deg, #f4e4bd 0 38%, #b4532a 38%); }

/* Oct 16 PILOT E.1: every photo caption in a readable serif at 16 px; prints keep light mats, so their ink stays dark in both modes */
.guide-hero figcaption, .day-photo figcaption, .route-map figcaption, .gallery figcaption, .photo-stack figcaption, .pack-photo figcaption, .plan-extra figcaption {
  font-family: "Newsreader", Georgia, serif; font-size: 1rem; line-height: 1.4; }
.gallery-grid figcaption, .pack-photo figcaption, .plan-extra figcaption { color: #2a2f36; }
.photo-stack figcaption { margin-top: 14px; color: var(--muted); }
.guide-hero figcaption, .day-photo figcaption, .route-map figcaption { color: var(--muted); }

/* FAQ + museum-ticket stubs */
.faq details { border-radius: 6px; margin-bottom: 10px; border-left: 5px solid var(--aegean); }
.faq summary { font-family: var(--display); }
.checks li { position: relative; padding: 18px 26px 18px 30px; border: 0; border-radius: 6px; color: #1d2430;
  background: radial-gradient(circle at 0 50%, transparent 9px, #f6f1e3 10px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #f6f1e3 10px) right / 51% 100% no-repeat;
  box-shadow: 0 4px 12px var(--shadow); }
.checks li::after { content: ""; position: absolute; top: 10px; bottom: 10px; right: 64px; border-left: 2px dashed rgba(47, 111, 163, .45); }
.checks li a { color: #9a4320; }
footer { background: linear-gradient(#b4532a, #b4532a) 0 0 / 100% 3px no-repeat, #0c1a2a; }

/* SOP v2.6 2.4a: Postcards from the trip (small prints high on the page; the six large postcards stay in the gallery below) */
.pc-snaps { --snap-mat: #fbf8f1; --snap-ink: #2a2f36; margin: 4px 0 0; }
.pc-snaps h3 { margin: 0 0 10px; font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.pc-snaps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding: 6px 6px 4px; }
.pc-snap { margin: 0; min-width: 0; padding: 7px 7px 9px; background: var(--snap-mat); border: 1px solid var(--line); box-shadow: 0 4px 12px var(--shadow); transform: rotate(-1.2deg); }
.pc-snap:nth-child(even) { transform: rotate(1.2deg); }
.pc-snap img { display: block; width: 100%; height: auto; object-fit: contain; }
.pc-snap figcaption { margin-top: 6px; font-family: "Newsreader", Georgia, serif; font-size: .95rem; line-height: 1.3; color: var(--snap-ink); }
.pc-snap figcaption b { font-weight: 700; }

/* Oct 16 PILOT E.3: Day 2 preview + custom line (text only; the sign-up gate itself stays launch-only) */
.day2-teaser { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--paper-2); color: var(--ink); }
.day2-teaser p { margin: 0; }
.d2t-line { font-family: "Newsreader", Georgia, serif; font-size: 1.05rem; line-height: 1.45; }
.day2-teaser .d2t-custom { margin-top: 6px; font-size: .95rem; color: var(--muted); }

/* Oct 16 PILOT E.4: ILLUSTRATION label above every art card (CSS only, never over the art) */
.day-image::before, .plan-extra::before, .route-map::before { content: "Illustration"; display: inline-block; margin: 0 0 8px; padding: 3px 7px; font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6B4F1D; background: #F4ECDD; }
.plan-extra::before { position: absolute; top: -12px; left: 12px; margin: 0; z-index: 1; }

@media (prefers-color-scheme: dark) {
  .day-accordion > blockquote { background: url("/salt-lake-city-tweens/assets/motif.svg") bottom center / 100% auto no-repeat, linear-gradient(180deg, #12282f 0%, #1c3a42 100%); }
  .day-image::before, .plan-extra::before, .route-map::before { color: #E9D3A0; background: #2B231F; }
}

@media (min-width: 861px) {
  .overview-route > .route-map { grid-column: 1; grid-row: 1 / span 2; }
  .overview-route > .pc-snaps { grid-column: 1; grid-row: 3; }
  .overview-route > .intro { grid-column: 2; grid-row: 1; }
  .overview-route > .day-summary { grid-column: 2; grid-row: 2 / span 2; }
  .plan-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-extra { width: min(100%, 390px); justify-self: center; }
  .plan-extra-b { grid-column: 2; grid-row: 2; }
  .plan-extra-copy-b { grid-column: 1; grid-row: 2; }
}
@media (max-width: 560px) {
  .hero-art { padding: 16px 20px 28px; }
  .hero-art figcaption { left: 40px; top: 36px; }
  .stack-prints { padding: 12px 2px 18px; }
  .stack-print { padding: 4px 4px 12px; }
  .stack-print:nth-child(2) { margin: 0 -8%; }
}