/* Kay Travels — editorial travel journal. Photos lead; type and colour stay quiet around them.
   Sans follows kelvinkay.com (system Helvetica); Newsreader carries titles and the story. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/travel/assets/fonts/newsreader-latin.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: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/travel/assets/fonts/newsreader-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/travel/assets/fonts/newsreader-italic-latin.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: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/travel/assets/fonts/newsreader-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #ffffff;
  --paper-2: #f4f4f1;
  --ink: #161616;
  --ink-2: #4a4e54;
  --ink-3: #868a90;
  --rule: #e5e5e1;
  --accent: #1c4d6e;          /* route ink: a deep chart blue */
  --accent-2: #d7e3eb;
  --land: #ecebe6;
  --water: #fafaf8;
  --state: #cfccc4;
  --border: #a9a59b;
  --flag: #8a5a12;            /* inferred-caption marker */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --measure: 680px;
  --wide: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111213; --paper-2: #1a1b1d; --ink: #ecebe7; --ink-2: #b7b8b6; --ink-3: #85888b; --rule: #2a2c2f;
    --accent: #8fc1df; --accent-2: #1d3443; --land: #24262a; --water: #16171a; --state: #3a3d42; --border: #5c6066; --flag: #d9a753;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; margin: 0; }
p { margin: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--paper); padding: 8px 12px; }

.wrap { max-width: calc(var(--measure) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: calc(var(--wide) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.kicker, .section-label { font: 600 12px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

/* Site chrome */
.site-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; max-width: calc(var(--wide) + var(--gutter) * 2); margin-inline: auto; padding: 18px var(--gutter); }
.brand { font: 500 19px/1 var(--serif); text-decoration: none; letter-spacing: -.005em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.site-foot { max-width: calc(var(--wide) + var(--gutter) * 2); margin: 96px auto 0; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--ink-3); }
.site-foot a { color: var(--ink-2); }

/* Photos: placeholder colour, then a blur, then the image */
img[style*="--ph"] { background-color: var(--ph); background-image: var(--lqip, none); background-size: cover; }
.img-missing { display: grid; place-items: center; aspect-ratio: 3 / 2; background: repeating-linear-gradient(135deg, var(--paper-2) 0 10px, var(--paper) 10px 20px); color: var(--ink-3); font-size: 13px; }

/* Hero */
.hero { margin: 0; position: relative; }
.hero-img { width: 100%; height: min(78vh, 62vw); max-height: 860px; min-height: 280px; object-fit: cover; }
.hero figcaption { max-width: calc(var(--wide) + var(--gutter) * 2); margin: 8px auto 0; padding-inline: var(--gutter); font-size: 13px; color: var(--ink-3); text-align: right; }

/* Trip head */
.trip-head { padding-top: 56px; }
.trip-head .kicker { margin-bottom: 18px; }
.trip-head h1 { font: 400 clamp(42px, 7.2vw, 88px)/.98 var(--serif); letter-spacing: -.022em; font-optical-sizing: auto; }
.dek { font: italic 300 clamp(20px, 2.4vw, 26px)/1.35 var(--serif); color: var(--ink-2); margin-top: 20px; }
.facts { display: grid; grid-template-columns: 1fr 1.2fr 1.9fr .9fr; gap: 18px 24px; margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ink); }
.facts div { min-width: 0; }
.facts dt { font: 600 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 15px; line-height: 1.45; }
.facts a { text-decoration: none; border-bottom: 1px solid var(--rule); }

/* Narrative */
.intro { margin-top: 48px; }
.intro p, .prose p { font: 400 20px/1.62 var(--serif); font-optical-sizing: auto; }
.intro p + p, .prose p + p { margin-top: 1em; }
.intro p:first-child::first-line { font-variant-caps: all-small-caps; letter-spacing: .03em; }
.place-link { text-decoration-thickness: 1px; }

/* Trip film (HLS; see site.js) */
.film { margin-top: 64px; }
.film-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-bottom: 16px; }
.film-head .kicker { margin-bottom: 6px; }
.film-head h2 { font: 400 clamp(26px, 3.4vw, 34px)/1.15 var(--serif); }
.film-head > p { font-size: 15px; color: var(--ink-2); max-width: 46ch; }
.film-player { position: relative; aspect-ratio: 16 / 9; background: #0d0d0d; overflow: hidden; }
.film-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d0d0d; }
.film-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: clamp(10px, 3vw, 28px); border: 0; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.film-play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.fp-pill { display: inline-flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px; border-radius: 999px; background: rgb(0 0 0 / .6); border: 1px solid rgb(255 255 255 / .3); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.fp-icon { width: 54px; height: 54px; flex: none; border-radius: 50%; background: rgb(255 255 255 / .94); color: #161616; display: grid; place-items: center; }
.fp-icon svg { width: 26px; height: 26px; margin-left: 3px; }
.fp-label { font: 600 16px/1.2 var(--sans); text-align: left; }
.fp-label small { display: block; font-weight: 400; font-size: 13px; opacity: .85; }
.film-play:hover .fp-pill { background: rgb(0 0 0 / .78); transform: scale(1.03); }
.film-player.loading .fp-icon { animation: fp-pulse .8s ease-in-out infinite alternate; }
@keyframes fp-pulse { to { opacity: .55; } }
.film-player.started .film-play { display: none; }
.film-msg { position: absolute; inset: 0 0 auto 0; padding: 12px 16px; background: rgb(0 0 0 / .78); color: #fff; font-size: 15px; }
@media (max-width: 560px) { .fp-pill { padding: 4px; } .fp-label { display: none; } .fp-icon { width: 46px; height: 46px; } }
@media print { .film { display: none; } }
/* Films page: every trip film in a grid */
.films-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 40px 28px; margin-top: 36px; padding-bottom: 64px; }
.film-card h2 { margin: 14px 0 0; font: 400 24px/1.2 var(--serif); }
.film-card h2 a { color: inherit; text-decoration: none; }
.film-card h2 a:hover { text-decoration: underline; }
.film-card-meta { font: 600 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.film-card p:not(.film-card-meta):not(.film-msg) { color: var(--ink-2); font-size: 15px; margin-top: 8px; max-width: 52ch; }
.film-card .film-play { align-items: flex-start; padding: 12px; }   /* top right: the poster's title sits lower left */
.film-card .fp-pill { padding: 5px 16px 5px 5px; }
.film-card .fp-icon { width: 44px; height: 44px; }
.film-card .fp-icon svg { width: 22px; height: 22px; }
@media print { .films-grid { display: none; } }

/* Route */
.route { margin-top: 80px; }
.route .section-label { margin-bottom: 14px; }
.route-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.route-map { background: var(--water); border: 1px solid var(--rule); }
.map { display: block; width: 100%; height: auto; max-height: min(88vh, 960px); margin-inline: auto; }
.route-map .map { width: 100%; max-height: none; }
.map-water { fill: var(--water); }
.map-land { fill: var(--land); stroke: color-mix(in srgb, var(--border) 45%, transparent); stroke-width: .6; }
.map-state { fill: none; stroke: var(--state); stroke-width: .9; stroke-dasharray: 4 3; }
.map-border { fill: none; stroke: var(--border); stroke-width: 1.2; stroke-dasharray: 7 3 1.5 3; }
.map-label { font: italic 400 15px var(--serif); fill: var(--ink-3); letter-spacing: .02em; }
.map-label-water { fill: color-mix(in srgb, var(--accent) 55%, var(--ink-3)); font-size: 14px; letter-spacing: .12em; }
.map-label-region { font: 600 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; fill: color-mix(in srgb, var(--ink-3) 80%, transparent); font-style: normal; }
.leg { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.leg-walk { stroke-dasharray: 3 4; stroke-width: 2.2; }
.leg-ferry { stroke-dasharray: 2 6; stroke-width: 3; }
.leg-flight { stroke-dasharray: 9 7; stroke-width: 1.6; opacity: .75; }
.map-offmap { font: italic 13px var(--serif); fill: var(--ink-2); }
.stop { cursor: pointer; }
.stop-halo { fill: var(--accent-2); opacity: 0; transition: opacity .2s; }
.stop-dot { fill: var(--accent); stroke: var(--water); stroke-width: 2.5; }
.stop-n { font: 700 12px var(--sans); fill: var(--water); pointer-events: none; }
.stop-name { font: 500 15px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--water); stroke-width: 4px; stroke-linejoin: round; }
.stop:hover .stop-halo, .stop:focus-visible .stop-halo, .stop.is-active .stop-halo, .stop.is-hover .stop-halo { opacity: 1; }
.stop.is-active .stop-dot { fill: var(--ink); }
.map-scale path { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.map-scale text { font: 11px var(--sans); fill: var(--ink-2); }
.loc-frame { fill: var(--water); stroke: var(--border); stroke-width: .8; }
.loc-land { fill: var(--land); }
.loc-box { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.loc-home { fill: var(--ink); }
.loc-label { font: 10.5px var(--sans); fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.map-key { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); background: var(--paper); }
.k { display: inline-block; width: 26px; height: 0; border-top: 2.6px solid var(--accent); margin-right: 6px; vertical-align: middle; }
.k-walk { border-top-style: dashed; border-top-width: 2.2px; }
.k-ferry { border-top-style: dotted; border-top-width: 3px; }
.k-flight { border-top-style: dashed; border-top-width: 1.6px; }
.stop-list { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--ink); }
.stop-list li { border-bottom: 1px solid var(--rule); }
.stop-list a { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 2px; text-decoration: none; align-items: start; }
.stop-list .n, .stop-chip span, .day-index .dn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--paper); font: 700 11.5px var(--sans); font-variant-numeric: tabular-nums; }
.stop-text { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.35; }
.stop-text span { color: var(--ink-3); font-size: 13px; }
.stop-list a:hover strong, .stop-list a.is-active strong, .stop-list a.is-hover strong { color: var(--accent); }
.stop-list a.is-active .n { background: var(--ink); }

/* Body: days + sticky sidebar */
.trip-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 64px; margin-top: 88px; align-items: start; }
.days { min-width: 0; }
.day { padding-top: 12px; scroll-margin-top: 16px; }
.day + .day { margin-top: 88px; }
.day-head { max-width: var(--measure); margin-bottom: 26px; }
.day-head .kicker { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.day-n { color: var(--accent); }
.day-title { font: 400 clamp(30px, 3.6vw, 40px)/1.08 var(--serif); letter-spacing: -.012em; }
.day-where { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.stop-chip { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.stop-chip span { width: 19px; height: 19px; font-size: 10.5px; }
.prose { max-width: var(--measure); }

.gallery { display: flex; flex-direction: column; gap: 12px; margin: 34px 0 0; }
.gallery + .prose { margin-top: 34px; }
.day-head + .gallery { margin-top: 20px; }
.ph-row { display: flex; gap: 12px; align-items: flex-start; }
.ph { margin: 0; flex: var(--a) 1 0%; min-width: 0; }
.ph img { width: 100%; }
.ph-open { display: block; cursor: zoom-in; }
.ph figcaption, .video figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 8px; max-width: 62ch; }
.inferred { display: inline-block; font: 600 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--flag); border: 1px solid color-mix(in srgb, var(--flag) 40%, transparent); padding: 2px 4px 1px; border-radius: 3px; vertical-align: 1px; cursor: help; }

.video { margin: 28px 0 0; }
.video-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #0d0d0d; cursor: pointer; overflow: hidden; }
.video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.video-play:hover img { opacity: 1; }
.video-icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgb(255 255 255 / .92); }
.video-icon::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #161616; }
.video-dur { position: absolute; right: 10px; bottom: 10px; background: rgb(0 0 0 / .7); color: #fff; font: 600 12px var(--sans); padding: 3px 6px; border-radius: 3px; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.day-places { max-width: var(--measure); margin-top: 30px; border-top: 1px solid var(--ink); padding-top: 12px; }
.day-places h3 { font: 600 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.day-places ul { list-style: none; margin: 0; padding: 0; }
.day-places li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.pl-name { font-weight: 500; }
.pl-kind { color: var(--ink-3); font-size: 13.5px; }
.pl-note { grid-column: 1 / -1; color: var(--ink-2); font-size: 13.5px; }

.side { position: sticky; top: 20px; align-self: start; }
.side .section-label { margin-bottom: 10px; }
.numbers { margin: 0 0 36px; display: grid; gap: 14px; border-top: 1px solid var(--ink); padding-top: 14px; }
.numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.numbers dt { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.numbers dd { margin: 0; font: 400 32px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.numbers .note { display: block; font: 11.5px/1.35 var(--sans); color: var(--ink-3); opacity: .85; margin-top: 2px; }
.day-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.day-index a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 7px 0; text-decoration: none; color: var(--ink-2); align-items: start; line-height: 1.35; }
.day-index .dn { width: 20px; height: 20px; font-size: 10.5px; background: var(--paper-2); color: var(--ink-2); }
.day-index a.is-active { color: var(--ink); }
.day-index a.is-active .dn { background: var(--accent); color: var(--paper); }

.sources { margin-top: 96px; padding-top: 18px; border-top: 1px solid var(--ink); }
.sources .section-label { margin-bottom: 12px; }
.sources p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.sources p + p { margin-top: .8em; }

.trip-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; }
.trip-nav a { display: flex; flex-direction: column; text-decoration: none; font: 400 22px/1.2 var(--serif); max-width: 45%; }
.trip-nav a span { font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.trip-nav .next { text-align: right; margin-left: auto; }

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(12 12 12 / .96); color: #eee; }
.lightbox::backdrop { background: rgb(0 0 0 / .6); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 64px 20px; gap: 12px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { max-width: 70ch; font-size: 14px; line-height: 1.5; color: #cfcfcf; text-align: center; min-height: 2.8em; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font: 300 42px/1 var(--sans); cursor: pointer; padding: 12px 16px; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lb-close { top: 8px; right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }

/* Home (prototype) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Home: masthead ---------- */
.mast { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: end; padding-top: 40px; }
.mast-title { font: 300 clamp(50px, 7vw, 100px)/.92 var(--serif); letter-spacing: -.035em; margin-top: 18px; font-optical-sizing: auto; }
.mast-title em { font-style: italic; font-weight: 300; color: var(--accent); }
.mast-dek { font: italic 300 clamp(19px, 2vw, 23px)/1.42 var(--serif); color: var(--ink-2); margin-top: 26px; max-width: 30ch; }
.mast-stats { display: flex; flex-wrap: wrap; gap: 18px 30px; margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--ink); }
.mast-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.mast-stats dd { margin: 0; font: 300 clamp(28px, 2.8vw, 38px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.mast-stats dt { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(360px, 42vw, 540px); }
.mosaic a { position: relative; overflow: hidden; display: block; background: var(--paper-2); text-decoration: none; }
.mosaic a img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mosaic a:hover img { transform: scale(1.035); }
.mosaic-0 { grid-row: 1 / 3; }
.mosaic-3 { grid-column: 2 / 4; }
.mosaic span { position: absolute; inset: auto 0 0 0; padding: 40px 12px 10px; color: #fff; font: 400 16px/1.2 var(--serif); background: linear-gradient(transparent, rgb(0 0 0 / .62)); text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.mosaic span small { display: block; font: 12px var(--sans); opacity: .85; margin-top: 3px; }
.mosaic-0 span { font-size: 21px; padding: 48px 16px 14px; }
.mosaic a[hidden] { display: none; }

/* ---------- Home: the big trips ---------- */
.featured { margin-top: 88px; }
.featured-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 28px; }
.featured-head p { font: italic 300 18px/1.4 var(--serif); color: var(--ink-2); }
.feat-shuffle { margin-left: auto; font: 500 13px/1 var(--sans); color: var(--ink-2); background: none; border: 1px solid var(--rule, currentColor); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: color .2s, border-color .2s; }
.feat-shuffle:hover { color: var(--accent); border-color: var(--accent); }
.feat-shuffle span { display: inline-block; margin-left: 4px; transition: transform .4s; }
.feat-shuffle:hover span { transform: rotate(180deg); }
.featured-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.feat { grid-column: span 4; display: flex; flex-direction: column; text-decoration: none; }
.feat:nth-child(2), .feat:nth-child(3) { grid-column: span 6; }
.feat[hidden] { display: none; }
.feat:nth-child(n+4) .feat-dek { font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.feat-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.feat-media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.feat-lead .feat-media { aspect-ratio: 16 / 10; }
.feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.feat:hover .feat-media img { transform: scale(1.03); }
.feat-text { padding-top: 14px; }
.feat-lead .feat-text { padding: 0 0 6px; }
.feat-when { font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.feat-title { font: 400 28px/1.08 var(--serif); letter-spacing: -.015em; margin-top: 8px; transition: color .2s; }
.feat:nth-child(2) .feat-title, .feat:nth-child(3) .feat-title { font-size: 34px; }
.feat-lead .feat-title { font: 300 clamp(40px, 5vw, 64px)/.98 var(--serif); letter-spacing: -.028em; margin-top: 14px; }
.feat:hover .feat-title { color: var(--accent); }
.feat-dek { font: italic 300 18px/1.42 var(--serif); color: var(--ink-2); margin-top: 10px; }
.feat-lead .feat-dek { font-size: 21px; margin-top: 16px; }
.feat-where { margin-top: 10px; font-size: 14px; }
.feat-lead .feat-where { font-size: 15.5px; margin-top: 16px; }
.feat-facts { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; font-variant-numeric: tabular-nums; }
.chip-photos { margin-left: 6px; }
@media (max-width: 900px) {
  .feat, .feat:nth-child(2), .feat:nth-child(3) { grid-column: span 6; }
  .feat-lead { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 0; }
  .feat-lead .feat-text { padding-top: 16px; }
}
@media (max-width: 640px) {
  .featured { margin-top: 56px; }
  .feat, .feat:nth-child(2), .feat:nth-child(3) { grid-column: 1 / -1; }
  .feat:nth-child(2) .feat-title, .feat:nth-child(3) .feat-title { font-size: 28px; }
}

/* ---------- Home: filters ---------- */
.filters { position: sticky; top: 0; z-index: 20; margin-top: 64px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.filters-in { padding-block: 12px 0; }
.f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.f-who { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.chip { font: 500 13px/1 var(--sans); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chip span { color: var(--ink-3); font-weight: 400; margin-left: 2px; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] span { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.f-where select { font: 500 13px var(--sans); padding: 7px 30px 7px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23868a90' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 220px; }
.f-count { font-size: 13px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.f-count strong { font: 400 20px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.f-years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin-top: 12px; height: 54px; align-items: end; }
.yr { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3); }
.yr-bar { display: block; height: calc(4px + var(--h) * 28px); background: color-mix(in srgb, var(--accent) 38%, var(--paper)); border-radius: 2px 2px 0 0; transition: background .2s, height .3s; }
.yr-n { font: 10.5px/1 var(--sans); padding: 5px 0 7px; font-variant-numeric: tabular-nums; text-align: center; }
.yr:hover .yr-bar, .yr.is-current .yr-bar { background: var(--accent); }
.yr:hover .yr-n, .yr.is-current .yr-n { color: var(--ink); }
.yr[aria-pressed="true"] .yr-bar { background: var(--ink); }
.yr[aria-pressed="true"] .yr-n { color: var(--ink); font-weight: 700; }
.yr:disabled { cursor: default; opacity: .45; }
.yr.is-empty .yr-bar { background: var(--rule); }

/* ---------- Home: atlas + journal ---------- */
.year-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.tcard.trow > a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.tcard.trow .trow-thumb { width: 84px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.trow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trow.has-inset .trow-thumb { border: 1px solid var(--rule); }
.trow-title { font: 400 17px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; transition: color .2s; }
.trow-when { font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.trow-where { font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow > a:hover .trow-title, .trow.is-hover .trow-title { color: var(--accent); }
.year + .year { margin-top: 30px; }
.year-head { margin-bottom: 4px; padding-top: 8px; }
.year-n { font-size: clamp(34px, 3.2vw, 44px); }
.year .milestones { margin-top: 4px; }
.year .milestones li { font-size: 16px; }
.year:not(.is-open) .trow.is-more { display: none; }
.year-more { margin-top: 10px; border: 0; background: none; padding: 4px 0; font: 500 13px var(--sans); color: var(--accent); cursor: pointer; }
.year-more:hover { text-decoration: underline; }
.year.is-open .year-more { display: none; }

.journey { display: block; margin-top: 32px; }
.journey .atlas-col { margin-bottom: 48px; }
.atlas-col { align-self: stretch; }
.atlas-sticky { position: static; }
.atlas-fig { margin: 0; background: var(--water); border: 1px solid var(--rule); }
.atlas { display: block; width: 100%; height: auto; --k: 1; }
.atlas-grat { fill: none; stroke: color-mix(in srgb, var(--border) 22%, transparent); stroke-width: .5; vector-effect: non-scaling-stroke; }
.atlas-land { fill: var(--land); stroke: color-mix(in srgb, var(--border) 50%, transparent); stroke-width: .5; vector-effect: non-scaling-stroke; }
.atlas-border { fill: none; stroke: color-mix(in srgb, var(--border) 55%, transparent); stroke-width: .5; vector-effect: non-scaling-stroke; }
.atlas-state { fill: none; stroke: color-mix(in srgb, var(--border) 28%, transparent); stroke-width: .4; vector-effect: non-scaling-stroke; }
.atlas-stage { position: relative; overflow: hidden; }
.atlas.dots { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.atlas.dots.is-zoomed { touch-action: none; }
.atlas.dots.is-dragging { cursor: grabbing; }
.dot { r: calc(3px * var(--s, 1) * var(--k)); fill: var(--accent); fill-opacity: .62; stroke: var(--paper); stroke-width: .7; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill-opacity .3s, r .15s; }
.dot:hover, .dot.is-active { fill: var(--ink); fill-opacity: 1; r: calc((3px * var(--s, 1) + 2px) * var(--k)); }
.dot.is-off { fill-opacity: .08; stroke-opacity: .15; pointer-events: none; }
.atlas.has-hover .dot:not(.is-hover) { fill-opacity: .18; }
.dot.is-hover { fill: var(--ink); fill-opacity: 1; }
.atlas-home circle { r: calc(4px * var(--k)); fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--paper); }
.map-zoom button { width: 30px; height: 30px; border: 0; background: none; font: 400 18px/1 var(--sans); color: var(--ink); cursor: pointer; }
.map-zoom button + button { border-top: 1px solid var(--rule); }
.map-zoom button:hover { background: var(--water); }
.dot-pop { position: absolute; z-index: 3; width: min(280px, calc(100% - 16px)); max-height: 70%; overflow: auto; padding: 10px 12px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 6px 20px rgb(0 0 0 / .12); font-size: 13px; }
.dot-pop p { margin: 0; }
.pop-name { font: 400 18px/1.2 var(--serif); }
.pop-name a { color: var(--ink); text-decoration: none; }
.pop-name a:hover { text-decoration: underline; }
.pop-area, .pop-count { color: var(--ink-3); font-size: 12px; margin-top: 2px !important; }
.dot-pop ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.dot-pop li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.dot-pop li a { color: var(--ink); }
.dot-pop li span { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.pop-more { margin-top: 6px !important; font-size: 12px; }
.atlas-cap { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--rule); background: var(--paper); font-size: 13px; color: var(--ink-2); }
.atlas-cap [data-atlas-label] { font: 400 16px/1.25 var(--serif); color: var(--ink); }
.atlas-hint { color: var(--ink-3); font-size: 12px; align-self: center; }
.lenses { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; }
.lenses button { border: 0; background: none; padding: 2px 0; color: var(--ink-3); cursor: pointer; font: inherit; border-bottom: 1px solid transparent; }
.lenses button:hover { color: var(--ink); }
.lenses button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.year { padding-top: 8px; scroll-margin-top: calc(var(--fh, 140px) + 12px); }
.year + .year { margin-top: 72px; }
.year[hidden] { display: none; }
.year-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 18px; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 24px; }
.year-n { font: 300 clamp(56px, 6vw, 84px)/.9 var(--serif); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.year-meta { font-size: 13px; color: var(--ink-3); }
.milestones { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.milestones li { font: italic 400 18px/1.35 var(--serif); color: var(--ink-2); display: flex; gap: 12px; align-items: baseline; }
.milestones li span { font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); min-width: 72px; }
.milestones li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); order: -1; }

.year-trips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
.person-trips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 36px; }
.connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; margin: 24px 0 48px; }
.collection-index { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: auto; padding-inline: var(--gutter); }
.connection-card { display: block; color: var(--ink); text-decoration: none; }
.connection-card h2, .connection-card h3 { font: 400 26px/1.15 var(--serif); margin: 14px 0 8px; }
.connection-card p { font-size: 16px; color: var(--ink-2); margin: 6px 0; }
.connection-card:hover h2, .connection-card:hover h3 { text-decoration: underline; }
.connection-image { aspect-ratio: 3 / 2; background: var(--paper-2); overflow: hidden; display: grid; place-items: center; }
.connection-image img { width: 100%; height: 100%; object-fit: cover; }
.connection-no-photo { padding: 24px; text-align: center; color: var(--ink-3); font-size: 16px; }
.trip-connections, .trip-collections { margin-block: 48px; }
.trip-collections a, .collection-years a { display: inline-block; padding: 10px 14px; margin: 4px 8px 4px 0; border: 1px solid var(--rule); border-radius: 3px; }
.collection-year { scroll-margin-top: 100px; }
@media (max-width: 700px) { .connection-grid { grid-template-columns: 1fr; } }
.tcard[hidden] { display: none; }
.tcard.is-major { grid-column: 1 / -1; }
.tcard > a { display: block; text-decoration: none; height: 100%; }
.tcard-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.tcard.is-major .tcard-media { aspect-ratio: 16 / 9; }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.tcard > a:hover .tcard-media img { transform: scale(1.03); }
.inset { display: block; width: 100%; height: 100%; }
.inset-water { fill: var(--water); }
.inset use { fill: var(--land); stroke: color-mix(in srgb, var(--border) 55%, transparent); stroke-width: .6; vector-effect: non-scaling-stroke; }
.inset-route path { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.inset-stops circle { fill: var(--accent); stroke: var(--water); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.has-inset .tcard-media { border: 1px solid var(--rule); }
.has-inset .tcard-media::after { content: "Photos to come"; position: absolute; right: 8px; bottom: 7px; font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: color-mix(in srgb, var(--paper) 80%, transparent); padding: 4px 6px; }
.tcard-text { padding-top: 12px; }
.tcard-when { display: flex; justify-content: space-between; gap: 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tcard-when span { font-weight: 500; letter-spacing: .04em; }
.tcard-title { font: 400 25px/1.1 var(--serif); letter-spacing: -.012em; margin-top: 7px; transition: color .2s; }
.tcard.is-major .tcard-title { font-size: clamp(30px, 3vw, 38px); }
.tcard > a:hover .tcard-title, .tcard.is-hover .tcard-title { color: var(--accent); }
.tcard-dek { font: italic 300 18px/1.4 var(--serif); color: var(--ink-2); margin-top: 8px; max-width: 52ch; }
.tcard-where { font-size: 14px; margin-top: 6px; }

/* ---------- Destinations line: pin, then each stop joined by arrows ---------- */
.route-line { color: var(--ink); line-height: 1.45; }
.route-line > span { font-weight: 500; white-space: nowrap; }
.route-line i { font-style: normal; color: var(--accent); opacity: .7; margin-right: .38em; }
.route-line .route-more { font-weight: 400; color: var(--ink-3); }
.route-pin { display: inline-block; width: .72em; height: .96em; margin-right: .45em; vertical-align: -.1em; fill: var(--accent); }
.tcard-who { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.empty { font: italic 20px var(--serif); color: var(--ink-2); padding: 40px 0; }
.empty button { font: inherit; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }

@media (max-width: 1100px) {
  .journey { grid-template-columns: 1fr; gap: 28px; }
  .atlas-sticky { position: static; }
  .atlas-hint { display: none; }
}
@media (max-width: 900px) {
  .mast { grid-template-columns: 1fr; gap: 32px; }
  .mosaic { height: 64vw; }
}
@media (max-width: 640px) {
  .year-trips, .year-rows { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; gap: 6px; }
  .mosaic a.mosaic-0 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .mosaic a.mosaic-1, .mosaic a.mosaic-2 { grid-column: auto; grid-row: auto; aspect-ratio: 1; }
  .mosaic a.mosaic-3 { display: none; }
  .mosaic span { font-size: 14px; padding: 30px 10px 8px; }
  .mosaic span small { font-size: 11px; }
  .mosaic-0 span { font-size: 19px; padding: 40px 12px 10px; }
  .f-years { height: 46px; margin-top: 8px; }
  .filters-in { padding-block: 10px 0; }
  .f-row { gap: 8px 10px; }
  .f-who { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .f-who::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .yr-n { font-size: 9px; }
  .yr:nth-child(even) .yr-n { visibility: hidden; }
  .f-count { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mosaic a img, .tcard-media img { transition: none; } }

/* Place & people pages */
.simple-head { padding-top: 56px; }
.simple-head h1 { font: 400 clamp(38px, 5.5vw, 64px)/1.02 var(--serif); letter-spacing: -.02em; }
.simple-head p { color: var(--ink-2); margin-top: 12px; font-size: 16px; }
.place-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; margin-top: 36px; align-items: start; }
.visit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.visit-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.visit-list a { font: 400 22px/1.2 var(--serif); text-decoration: none; }
.visit-list span { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 4px; }
.map-place { border: 1px solid var(--rule); }

@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1020px) {
  .trip-body { grid-template-columns: 1fr; gap: 0; }
  .side { position: static; margin-top: 72px; }
  .side .day-index, .side .day-index + *, .side h2:nth-of-type(2) { display: none; }
  .numbers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 24px; margin-bottom: 0; }
  .route-grid { grid-template-columns: 1fr; }
  .stop-list { columns: 2; column-gap: 24px; border-top: 0; }
  .stop-list li { break-inside: avoid; }
}
@media (max-width: 640px) {
  .ph-row { flex-direction: column; }
  .ph { flex: none; width: 100%; }
  .stop-list { columns: 1; }
  .day-places li { grid-template-columns: 1fr; }
  .intro p, .prose p { font-size: 18.5px; }
  .map-locator { display: none; }
  .lightbox figure { padding: 48px 12px 16px; }
  .place-grid { grid-template-columns: 1fr; }
  .trip-nav { flex-direction: column; }
  .trip-nav a { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-head, .site-nav, .side, .trip-nav, .lightbox, .video-play { display: none !important; } }

/* ---------- Home: On this day ---------- */
.otd { margin-top: 48px; }
.otd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.otd-date { margin: 0; color: var(--ink-3); font-size: 13px; }
.otd-row { list-style: none; margin: 16px 0 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }
.otd-card { scroll-snap-align: start; max-width: 320px; }
.otd-card a { color: inherit; text-decoration: none; display: block; }
.otd-img { aspect-ratio: 3 / 2; background: var(--water); overflow: hidden; }
.otd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.otd-card a:hover .otd-img img { transform: scale(1.03); }
.otd-noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--rule) 60%, transparent) 10px 11px); }
.otd-when { margin: 10px 0 2px; font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.otd-card h3 { margin: 0; font: 400 19px/1.2 var(--serif); }
.otd-card a:hover h3 { text-decoration: underline; }
.otd-day { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }

/* ---------- By the numbers ---------- */
.bn { padding-bottom: 64px; }
.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0; margin: 8px 0 0; border-top: 1px solid var(--ink); }
.bn-stat { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); }
.bn-stat dd { margin: 0; font: 400 clamp(32px, 4vw, 46px)/1 var(--serif); order: -1; white-space: nowrap; }
.bn-stat { display: flex; flex-direction: column; }
.bn-stat dt { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.bn-stat p { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.bn-sec { margin-top: 56px; }
.bn-sec .section-label { border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 16px; }
.bn-records { list-style: none; margin: 0; padding: 0; }
.bn-records li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.bn-records li span { display: inline-block; min-width: 190px; color: var(--ink-3); font-size: 13px; }
.bn-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }
.bn-person h3 { margin: 0 0 10px; font: 400 24px var(--serif); }
.bn-person h3 a { color: inherit; }
.bn-person dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 0; }
.bn-person dl div { display: flex; flex-direction: column-reverse; }
.bn-person dd { margin: 0; font: 400 24px/1 var(--serif); }
.bn-person dt { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.bn-person p { font-size: 13.5px; color: var(--ink-2); margin: 12px 0 0; }
.bn-bars { list-style: none; margin: 0; padding: 0; }
.bn-bars li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.bn-bar { height: 10px; width: calc(var(--w) * 100%); background: var(--accent); opacity: .75; }
.bn-n { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.bn-years { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; align-items: flex-end; height: 180px; overflow-x: auto; }
.bn-years li { flex: 1 0 22px; height: 100%; }
.bn-years a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; color: inherit; text-decoration: none; }
.bn-col { display: flex; align-items: flex-start; justify-content: center; height: calc(var(--h) * 140px); min-height: 2px; background: var(--accent); opacity: .8; }
.bn-years a:hover .bn-col { opacity: 1; }
.bn-col b { font: 600 10.5px var(--sans); color: var(--paper); padding-top: 3px; }
.bn-yr { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 4px; }
.bn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bn-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14.5px; }
.bn-tags span { color: var(--ink-3); font-size: 12px; }
@media (max-width: 700px) { .bn-two { grid-template-columns: 1fr; } .bn-bars li { grid-template-columns: 1fr auto; } .bn-bar { grid-column: 1 / -1; order: 3; } .bn-records li span { display: block; } }

/* ---------- Videos ---------- */
.vids { padding-bottom: 64px; }
.vid-trip { margin-top: 40px; }
.vid-trip header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.vid-trip h2 { margin: 0; font: 400 26px/1.2 var(--serif); }
.vid-trip h2 a { color: inherit; }
.vid-trip header p { margin: 0; color: var(--ink-3); font-size: 13px; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.vid-grid .video { margin-top: 18px; }
.vid-grid figcaption { font-size: 14px; margin-top: 6px; }
.vid-day { display: block; font-size: 12px; color: var(--ink-3); }
.vid-day a { color: inherit; }

/* ---------- Collections (curated) ---------- */
.coll-head h1 em, .coll-hero h1 em { font-style: italic; }
.coll-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 28px; margin-top: 40px; padding-bottom: 72px; }
.coll-tile { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.coll-tile-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); margin-bottom: 8px; }
.coll-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.coll-tile:hover .coll-tile-img img { transform: scale(1.03); }
.coll-tile h2 { font: 400 28px/1.1 var(--serif); margin: 0; letter-spacing: -.01em; }
.coll-tile:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.coll-tile p:not(.kicker) { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.coll-tile.is-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: end; }
.coll-tile.is-feature .coll-tile-img { aspect-ratio: 16 / 9; margin: 0; }
.coll-tile.is-feature h2 { font-size: clamp(34px, 4vw, 52px); }
@media (max-width: 800px) { .coll-tile.is-feature { grid-template-columns: 1fr; } }

.coll-hero { padding-top: 56px; }
.coll-hero .kicker a { color: inherit; }
.coll-hero h1 { font: 400 clamp(44px, 7vw, 88px)/1 var(--serif); letter-spacing: -.025em; margin: 10px 0 0; text-wrap: balance; }
.coll-dek { font: italic 400 clamp(19px, 2vw, 23px)/1.4 var(--serif); color: var(--ink-2); margin: 16px 0 0; max-width: 40em; }
.coll-intro { margin-top: 28px; }
.coll-intro p { font: 400 19px/1.6 var(--serif); }
.coll-intro p + p { margin-top: .9em; }
.coll-map { margin: 40px auto 0; }
.coll-map svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.coll-map figcaption { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.cm-pin circle { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.cm-pin text { font: 700 11px var(--sans); fill: var(--paper); pointer-events: none; }
.cm-pin:hover circle { fill: var(--ink); }
.coll-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-size: 13.5px; position: sticky; top: 0; z-index: 4; background: var(--paper); }
.coll-jump a { color: var(--ink-2); text-decoration: none; }
.coll-jump a:hover { color: var(--ink); text-decoration: underline; }
.coll-body { padding-bottom: 40px; }
.cg { margin-top: 56px; scroll-margin-top: 60px; }
.cg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.cg-head h2 { font: 400 clamp(26px, 3vw, 36px)/1.1 var(--serif); margin: 0; }
.cg-head p { margin: 0; color: var(--ink-3); font-size: 13px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 36px 28px; margin-top: 24px; }
.cc { display: flex; flex-direction: column; scroll-margin-top: 70px; }
.cc-fig { margin: 0; }
.cc-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--paper-2); }
.cc-fig figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
.cc-nofig { aspect-ratio: 3 / 2; background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper) 12px 13px); }
.cc-body { margin-top: 12px; }
.cc-meta { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cc-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: var(--paper); font-size: 11px; letter-spacing: 0; padding: 0 5px; }
.cc h3 { font: 400 24px/1.15 var(--serif); margin: 6px 0 0; }
.cc h3 a { color: inherit; text-decoration: none; }
.cc h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-note { margin: 8px 0 0; font: 400 16px/1.55 var(--serif); color: var(--ink-2); }
.cc-who { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.cc-visits { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.cc-visits li a { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 14px; }
.cc-visits li a:hover { color: var(--accent); }
.cv-year { font-variant-numeric: tabular-nums; color: var(--ink-3); min-width: 2.6em; }
.coll-others { margin-top: 64px; padding-bottom: 72px; }
.coll-others ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.coll-others a { font: 400 20px var(--serif); color: var(--ink); }

/* City page (Chicago) */
.city-h { font: 400 clamp(28px, 3.4vw, 40px)/1.1 var(--serif); margin: 64px auto 0; letter-spacing: -.01em; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.city-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 36px auto 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.city-stats div { padding: 16px 12px 16px 0; display: flex; flex-direction: column-reverse; }
.city-stats dd { margin: 0; font: 400 clamp(32px, 4vw, 46px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.city-stats dt { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.city-timeline { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 28px; }
.ct { display: grid; grid-template-columns: minmax(160px, 300px) 1fr; gap: 24px; align-items: start; }
.ct-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.ct-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ct-img:hover img { transform: scale(1.03); }
.ct-noimg { display: grid; place-items: center; height: 100%; font-size: 12px; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper) 12px 13px); }
.ct-year { margin: 0; font: 400 44px/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.ct h3 { font: 400 26px/1.15 var(--serif); margin: 6px 0 0; }
.ct h3 a { color: inherit; text-decoration: none; }
.ct h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ct-when { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.ct-note { margin: 10px 0 0; font: 400 17px/1.55 var(--serif); color: var(--ink-2); max-width: 38em; }
@media (max-width: 640px) { .ct { grid-template-columns: 1fr; gap: 12px; } }
.cgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-flow: dense; gap: 14px; margin-top: 24px; }
.cgal-item { margin: 0; }
.cgal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper-2); }
.cgal-item.is-wide { grid-column: span 2; }
.cgal-item.is-wide img { aspect-ratio: 16 / 9; }
@media (max-width: 600px) { .cgal-item.is-wide { grid-column: auto; } }
.cgal-item figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
.cgal-item figcaption a { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* City page: the neighborhood map (scripts/lib/city-map.mjs, src/js/city-map.js) */
:root {
  --cm-out: #f7f6f2; --cm-nb: #e9e6df; --cm-line: #fdfcf9; --cm-lo: #f0e7cf; --cm-hi: #c99a44;
  --cm-lake: #d5e3ed; --cm-shore: #a8c2d3; --cm-river: #c2d6e4; --cm-water-ink: #6f8ea3; --cm-dot: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root { --cm-out: #141518; --cm-nb: #282b31; --cm-line: #131416; --cm-lo: #453c26; --cm-hi: #c29638; --cm-lake: #1b2e3c; --cm-shore: #3b6682; --cm-river: #2f5265; --cm-water-ink: #7398ae; }
}
.cmap-dek { max-width: 66ch; margin-top: 16px; color: var(--ink-2); }
.cmap-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 22px; }
.cmap-years { display: flex; flex-wrap: wrap; gap: 6px; }
.cmap-chip { font: 500 13px/1 var(--sans); padding: 8px 12px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper); color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, border-color .2s; }
.cmap-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.cmap-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cmap-ohc { border-style: dashed; }
.cmap-status { flex-basis: 100%; font-size: 13px; color: var(--ink-3); min-height: 1.3em; }
.cmap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; margin-top: 14px; border: 1px solid var(--rule); background: var(--paper); }
.cmap-fig { margin: 0; min-width: 0; border-right: 1px solid var(--rule); position: relative; }
.cmap-skip { position: absolute; left: -9999px; }
.cmap-skip:focus { left: 8px; top: 8px; z-index: 6; background: var(--paper); padding: 6px 10px; font-size: 13px; border: 1px solid var(--ink); }
.cmap-stage { position: relative; aspect-ratio: 1.2 / 1; min-height: 520px; overflow: hidden; background: color-mix(in srgb, var(--cm-nb) 55%, var(--cm-out)); }
.cmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; --k: 3; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cmap-svg.is-zoomed { touch-action: none; }
.cmap-svg.is-dragging { cursor: grabbing; }
.cm-out { fill: color-mix(in srgb, var(--cm-nb) 55%, var(--cm-out)); }
.cm-nb { fill: var(--cm-nb); stroke: var(--cm-line); stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cm-nb.is-seen { fill: color-mix(in srgb, var(--cm-hi) calc(var(--t) * 100%), var(--cm-lo)); cursor: pointer; transition: fill .3s; }
.cm-nb.is-seen:hover, .cm-nb.is-seen.is-hover { stroke: var(--ink-2); stroke-width: 1.3; }
.cm-nb.is-seen.is-hi { stroke: var(--ink); stroke-width: 2; }
.cm-lake { fill: var(--cm-lake); stroke: var(--cm-shore); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.cm-river { fill: none; stroke: var(--cm-river); stroke-linecap: round; stroke-linejoin: round; stroke-width: max(calc(1.3px * var(--k)), 3px); pointer-events: none; }
.cm-river.is-wide { stroke-width: max(calc(1.9px * var(--k)), 5px); }
.cm-water { font: italic 400 calc(15px * var(--k)) var(--serif); letter-spacing: calc(4px * var(--k)); fill: var(--cm-water-ink); opacity: .8; pointer-events: none; }
.cm-l { font: 600 calc(10.5px * var(--k)) var(--sans); font-variant-caps: all-small-caps; letter-spacing: calc(1.2px * var(--k)); fill: var(--ink-2); paint-order: stroke; stroke: var(--cm-out); stroke-opacity: .75; stroke-width: calc(3px * var(--k)); stroke-linejoin: round; pointer-events: none; transition: opacity .25s; }
.cm-l.is-out { font-style: italic; font-variant-caps: normal; letter-spacing: 0; font-family: var(--serif); font-weight: 400; font-size: calc(13px * var(--k)); fill: var(--ink-3); }
.cm-l.is-hidden { opacity: 0; }
.cm-dot { cursor: pointer; outline: none; transition: opacity .3s; }
.cm-pt { r: calc((var(--s) * 4.4px) * var(--k)); fill: var(--cm-dot); stroke: var(--paper); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: r .15s, fill .2s; }
.cm-halo { r: calc(max(var(--s) * 4.4px + 4px, 11px) * var(--k)); fill: var(--cm-dot); fill-opacity: 0; stroke: none; transition: fill-opacity .2s; }
.cm-dot:hover .cm-halo, .cm-dot.is-active .cm-halo { fill-opacity: .2; }
.cm-dot:hover .cm-pt { r: calc((var(--s) * 4.4px + 1.5px) * var(--k)); }
.cm-dot.is-active .cm-pt { fill: var(--ink); }
.cm-dot:focus-visible .cm-halo { fill-opacity: .16; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cm-dot.is-in { display: none; }
.cm-dot.is-off { opacity: .1; pointer-events: none; }
.cm-cl { cursor: pointer; outline: none; }
.cm-cl-halo { r: calc((var(--rr) + 5) * 1px * var(--k)); fill: var(--cm-dot); fill-opacity: .18; transition: fill-opacity .2s; }
.cm-cl-c { r: calc(var(--rr) * 1px * var(--k)); fill: var(--cm-dot); stroke: var(--paper); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cm-cl-n { font: 600 calc(12px * var(--k)) var(--sans); fill: var(--paper); text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.cm-cl:hover .cm-cl-halo, .cm-cl:focus-visible .cm-cl-halo { fill-opacity: .34; }
.cm-cl:focus-visible .cm-cl-c { stroke: var(--ink); stroke-width: 2.4; }
.cmap-zoom { top: 12px; right: 12px; z-index: 2; }
.cmap-zoom .cmap-reset { width: 30px; height: 26px; font: 600 10px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.cmap-scale { position: absolute; right: 12px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: var(--ink-2); pointer-events: none; text-shadow: 0 0 3px var(--cm-out), 0 0 3px var(--cm-out); }
.cmap-scale i { display: block; height: 6px; border: 1.5px solid var(--ink-2); border-top: 0; }
.cmap-edges { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cmap-edge { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper); color: var(--ink); font: 500 12px/1 var(--sans); white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.cmap-edge[hidden] { display: none; }
.cmap-edge:hover { border-color: var(--ink); }
.ce-a { display: inline-block; width: 0; height: 0; border-left: 7px solid var(--cm-dot); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ce-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cmap-tip { position: absolute; z-index: 3; transform: translateX(-50%); padding: 3px 8px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.cm-pop { position: absolute; z-index: 4; width: 300px; max-height: calc(100% - 16px); overflow: auto; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px rgb(0 0 0 / .18); font-size: 13px; }
.cm-pop[hidden], .cmap-tip[hidden] { display: none; }
.cm-pop-fig img, .cm-pop-fig .img-missing { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
.cm-pop-b { padding: 11px 14px 13px; }
.cm-pop-k { font: 600 10.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cm-pop-h { font: 400 20px/1.2 var(--serif); margin-top: 3px; }
.cm-pop-h a { text-decoration: none; }
.cm-pop-h a:hover { text-decoration: underline; }
.cm-pop-cap { margin-top: 6px; color: var(--ink-2); line-height: 1.45; }
.cm-pop-yrs { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--ink-3); font-size: 12px; }
.cm-pop-yrs a { padding: 2px 8px; border: 1px solid var(--rule); border-radius: 99px; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.cm-pop-yrs a:hover { border-color: var(--ink); }
.cm-pop-more { margin-top: 9px; font-size: 12px; }
.cm-x { position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: #161616; font: 400 20px/1 var(--sans); cursor: pointer; }
.cm-x:hover { background: #fff; }
.cmap-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 10px 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
.cmap-key { display: inline-flex; align-items: center; gap: 3px; }
.cmap-key i { display: inline-block; width: 14px; height: 10px; }
.cmap-key .k-lo { background: var(--cm-lo); } .cmap-key .k-mid { background: color-mix(in srgb, var(--cm-hi) 50%, var(--cm-lo)); } .cmap-key .k-hi { background: var(--cm-hi); margin-right: 5px; }
.cmap-key .k-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-dot); }
.cmap-key .k-dot.s2 { width: 9px; height: 9px; } .cmap-key .k-dot.s3 { width: 12px; height: 12px; margin-right: 5px; }
.cmap-credit { flex-basis: 100%; font-size: 11.5px; }
.cmap-side { contain: size; overflow: auto; padding: 14px 0 10px; min-width: 0; }
.cmap-side .section-label { padding: 0 16px 8px; }
.cmap-list { list-style: none; margin: 0; padding: 0; }
.cmap-list > li { border-top: 1px solid var(--rule); }
.cmap-list > li.is-hi { background: var(--paper-2); }
.cmap-list > li.is-empty { opacity: .4; }
.cmap-list summary { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; list-style: none; }
.cmap-list summary::-webkit-details-marker { display: none; }
.cmap-list summary:hover .cl-n { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.cl-sw { width: 14px; height: 14px; flex: none; background: color-mix(in srgb, var(--cm-hi) calc(var(--t) * 100%), var(--cm-lo)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.cl-n { flex: 1; font: 400 16px/1.2 var(--serif); }
.cl-c { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cmap-list details ul { list-style: none; margin: 0; padding: 0 16px 10px 40px; display: flex; flex-direction: column; align-items: flex-start; }
.cmap-list details button { padding: 3px 0; border: 0; background: none; font: 400 13px/1.3 var(--sans); color: var(--ink-2); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: .18em; }
.cmap-list details button:hover { color: var(--ink); text-decoration-color: currentColor; }
.cmap-list details button[hidden] { display: none; }
@media (max-width: 860px) {
  .cmap-grid { grid-template-columns: minmax(0, 1fr); }
  .cmap-fig { border-right: 0; }
  .cmap-stage { aspect-ratio: .82 / 1; min-height: 0; }
  .cmap-side { contain: none; max-height: 440px; border-top: 1px solid var(--rule); }
  .cmap-hint { display: none; }
  .cmap-edge { font-size: 11px; padding: 4px 8px 4px 6px; }
  .cmap-bar { display: block; }
  .cmap-years { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .cmap-years::-webkit-scrollbar { display: none; }
  .cmap-chip { flex: none; }
  .cmap-status { margin-top: 2px; }
  .cm-pop { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 56%; display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .cm-pop-fig img, .cm-pop-fig .img-missing { height: 100%; aspect-ratio: auto; min-height: 118px; }
  .cm-pop-b { padding: 9px 12px 11px; }
  .cm-pop-h { font-size: 18px; }
  .cm-pop-cap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 12.5px; line-height: 1.4; }
  .cm-pop-yrs { margin-top: 7px; }
  .cm-pop-yrs a { padding: 1px 7px; }
  .cm-pop-more { margin-top: 6px; }
  .cm-pop { max-height: 52%; }
  .cm-x { background: var(--paper); border: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) {
  .cm-dot, .cm-pt, .cm-halo, .cm-l, .cm-nb.is-seen, .cmap-chip, .cm-cl-halo { transition: none; }
}

/* "Correct this page" (editor only; src/js/corrections.js). Hidden until Kelvin signs in as editor. */
:root { --kt-ok: #1f6b3a; --kt-err: #9b2c2c; }
@media (prefers-color-scheme: dark) { :root { --kt-ok: #7fcf9b; --kt-err: #f19a9a; } }
.kt-editor-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink-3); cursor: pointer; text-decoration: underline dotted; text-underline-offset: .18em; }
.kt-editor-link:hover { color: var(--ink-2); }
.kt-fab { position: fixed; z-index: 40; right: 16px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px 8px 11px; border: 1px solid var(--border); border-radius: 99px; background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--ink-2); font: 500 13px/1 var(--sans); cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .9; transition: opacity .15s, box-shadow .15s; }
.kt-fab:hover, .kt-fab:focus-visible { opacity: 1; color: var(--ink); box-shadow: 0 3px 14px rgb(0 0 0 / .2); }
.kt-fab[hidden] { display: none; }
.kt-fab svg { flex: none; }
/* Phones: keep clear of the map's right-hand controls and scale, and of the sticky year filter at the top. */
@media (max-width: 700px) { .kt-fab { right: auto; left: 12px; } .kt-fab.is-alt { left: auto; right: 12px; } }
@media (min-width: 701px) { .kt-fab.is-alt { right: auto; left: 16px; } }
.kt-open { overflow: hidden; }
.kt-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgb(0 0 0 / .5); }
.kt-overlay[hidden] { display: none; }
.kt-dialog { width: min(520px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px 22px 18px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; box-shadow: 0 16px 48px rgb(0 0 0 / .3); font: 15px/1.45 var(--sans); }
.kt-dialog:focus { outline: none; }
.kt-title { font: 400 26px/1.1 var(--serif); letter-spacing: -.01em; }
.kt-sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.kt-form { display: block; }
.kt-label { display: block; margin: 16px 0 6px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kt-input { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--paper-2); color: var(--ink); font: 16px/1.4 var(--sans); }
textarea.kt-input { resize: vertical; min-height: 110px; }
.kt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kt-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.kt-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kt-about { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 8px 8px 10px; background: var(--accent-2); border-left: 3px solid var(--accent); font-size: 13.5px; line-height: 1.4; }
.kt-about[hidden], .kt-near[hidden], .kt-pending[hidden], .kt-copybox[hidden] { display: none; }
.kt-about q { flex: 1; min-width: 0; font-style: italic; overflow-wrap: anywhere; quotes: "\201C" "\201D"; }
.kt-about-l { color: var(--ink-2); font-weight: 600; }
.kt-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font: 400 20px/1 var(--sans); cursor: pointer; }
.kt-x:hover { background: var(--rule); color: var(--ink); }
.kt-near { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); }
.kt-status { min-height: 1.45em; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.kt-status.is-ok { color: var(--kt-ok); font-weight: 600; }
.kt-status.is-err { color: var(--kt-err); }
.kt-pending { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.kt-note-line { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.kt-copybox { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--border); background: var(--paper-2); color: var(--ink); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.kt-btn { min-height: 42px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 3px; font: 600 14px/1 var(--sans); cursor: pointer; }
.kt-btn:disabled { opacity: .55; cursor: default; }
.kt-btn-primary { background: var(--ink); color: var(--paper); }
.kt-btn-quiet { background: transparent; color: var(--ink); border-color: var(--border); }
.kt-btn-quiet:hover { border-color: var(--ink); }
.kt-fab:focus-visible, .kt-btn:focus-visible, .kt-x:focus-visible, .kt-editor-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .kt-dialog { padding: 18px 16px 14px; } .kt-actions .kt-btn { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .kt-fab { transition: none; } }
@media print { .kt-fab, .kt-overlay, .kt-editor-link { display: none !important; } }

/* ---------- About ---------- */
.about-head h1 { font: 400 clamp(44px, 7vw, 88px)/1 var(--serif); letter-spacing: -.025em; margin: 10px 0 0; }
.about-head h1 em { font-style: italic; }
.about-head .about-dek { font: italic 400 clamp(19px, 2vw, 23px)/1.4 var(--serif); color: var(--ink-2); margin: 16px 0 0; max-width: 40em; }
.about-sec { margin-top: 64px; scroll-margin-top: 60px; }
.about-h { font: 400 clamp(28px, 3.4vw, 40px)/1.1 var(--serif); letter-spacing: -.01em; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.about-prose { margin-top: 22px; }
.about-prose p { font: 400 20px/1.62 var(--serif); font-optical-sizing: auto; }
.about-prose p + p { margin-top: 1em; }
.about-prose a { text-decoration-thickness: 1px; }
.about-links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.about-links a { display: inline-block; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--ink-2); }
.about-links a:hover { color: var(--ink); border-color: var(--ink); }
.about-mem { list-style: none; margin: 24px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 32px; }
.about-mem li { border-left: 2px solid var(--accent); padding: 2px 0 2px 18px; }
.about-mem h3 { font: 400 24px/1.15 var(--serif); letter-spacing: -.005em; }
.about-mem h3 a { text-decoration: none; }
.about-mem h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.about-mem p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin-top: 8px; }
.about-mem .about-mem-links { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.about-mem .about-mem-links a { color: var(--ink-2); }
.about-sec .about-mem + .wrap { margin-top: 36px; }
.about-figs { margin-top: 36px; }
.about-figs-in { max-width: calc(var(--measure) + 2 * 60px); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-figs figure { margin: 0; }
.about-figs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.about-figs figcaption { font-size: 13px; line-height: 1.4; color: var(--ink-2); margin-top: 6px; }
.about-figs figcaption a { color: var(--ink-3); }
@media (max-width: 520px) { .about-figs-in { grid-template-columns: 1fr; } .about-prose p { font-size: 19px; } }
.about-tl { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.about-tl li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.about-tl-y { font: 400 22px/1.2 var(--serif); font-variant-numeric: tabular-nums; color: var(--accent); }
.about-tl b { font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.about-jump { width: calc(100% - 2 * var(--gutter)); max-width: var(--wide); margin-inline: auto; }
.about-mem { max-width: 800px; padding-inline: 0; width: calc(100% - 2 * var(--gutter)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .about-mem { grid-template-columns: 1fr; } }

/* Fallback link under each video if the embed can't play */
.video-yt { margin-left: .5em; font-size: 12.5px; white-space: nowrap; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.video-yt:hover, .video-yt:focus-visible { color: var(--accent); }

/* ---- Trip flair: a quiet, place-specific accent for the big trips. Set `flair: <name>` (and optionally `flairStamp:`) in the trip's YAML.
   Each flair only sets a few variables; the shared rules below turn them into a palette, title face, ornaments and a passport-style stamp. ---- */
.trip[data-flair] { background: var(--paper); }
.trip[data-flair] h1, .trip[data-flair] .day-title { font-family: var(--flair-face, var(--serif)); letter-spacing: var(--flair-track, -.012em); }
.trip[data-flair] .trip-head .kicker, .trip[data-flair] .day-n { color: var(--flair); }
.trip[data-flair] .dek { font-style: italic; }
.trip[data-flair] .route-map { position: relative; }
.trip[data-flair] .route-map::after { content: ""; position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; background: var(--flair); opacity: .5; pointer-events: none;
  -webkit-mask: var(--flair-compass) no-repeat center / contain; mask: var(--flair-compass) no-repeat center / contain; }
.trip[data-flair] .hero::after { content: ""; display: block; height: 16px; margin: 12px auto 0; max-width: var(--wide); background: var(--flair); opacity: .8;
  -webkit-mask: var(--flair-band) repeat-x left center / auto 100%; mask: var(--flair-band) repeat-x left center / auto 100%; }
.trip[data-flair] .day + .day::before { content: ""; display: block; width: 132px; height: 14px; margin-bottom: 38px; background: var(--flair); opacity: .85;
  -webkit-mask: var(--flair-divider) no-repeat left center / contain; mask: var(--flair-divider) no-repeat left center / contain; }
.trip[data-flair] .trip-head { position: relative; }
.trip[data-flair] .flair-stamp { position: absolute; left: calc(100% + 30px); top: 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 24px 12px;
  border: 2.5px solid var(--flair); border-radius: 50% / 46%; outline: 1.5px solid var(--flair); outline-offset: 4px; color: var(--flair); opacity: .9; transform: rotate(-7deg);
  font: 700 13px/1.2 var(--sans); letter-spacing: .18em; white-space: nowrap; text-transform: uppercase; text-align: center; pointer-events: none; }
@media (max-width: 1360px) { .trip[data-flair] .flair-stamp { display: none; } }
@media print { .trip[data-flair] .flair-stamp, .trip[data-flair] .route-map::after { display: none; } }

/* Bolder pass: framed photo mats, big faded day numerals, a drop cap, ornamented labels and a framed, titled map. */
.trip[data-flair] .ph img { border: 8px solid var(--mat, #fff); box-sizing: border-box; box-shadow: 0 0 0 1px color-mix(in srgb, var(--flair) 60%, transparent), 0 8px 22px rgb(0 0 0 / .09); }
.trip[data-flair] .days { counter-reset: flairday; }
.trip[data-flair] .day { counter-increment: flairday; }
.trip[data-flair] .day-head { position: relative; }
.trip[data-flair] .day-head::after { content: counter(flairday, decimal-leading-zero); position: absolute; right: 0; top: -30px; font: 400 clamp(72px, 9vw, 120px)/1 var(--flair-face, var(--serif));
  color: color-mix(in srgb, var(--flair) 17%, transparent); pointer-events: none; z-index: 0; }
.trip[data-flair] .day-head > * { position: relative; z-index: 1; }
.trip[data-flair] h1 { font-size: clamp(46px, 6.4vw, 78px); line-height: 1.02; }
.trip[data-flair] .intro p:first-child::first-line { font-variant-caps: normal; letter-spacing: 0; }
.trip[data-flair] .intro p:first-child::first-letter { float: left; font: 400 4.1em/.82 var(--flair-face, var(--serif)); padding: .05em .09em 0 0; color: var(--flair); }
.trip[data-flair] .section-label { color: var(--flair); display: flex; align-items: center; gap: 12px; }
.trip[data-flair] .section-label::after { content: ""; flex: 0 1 60px; height: 1px; background: color-mix(in srgb, var(--flair) 70%, transparent); }
.trip[data-flair] .route-map { border: 1px solid var(--flair); outline: 1px solid color-mix(in srgb, var(--flair) 55%, transparent); outline-offset: 5px; }
.trip[data-flair] .route-map::before { content: var(--flair-map-title, ""); position: absolute; left: 20px; top: 14px; z-index: 2; font: italic 400 22px/1 var(--flair-face, var(--serif)); color: var(--flair); letter-spacing: .02em; }
.trip[data-flair] .day-places { border-top-color: var(--flair); }
/* Europe: Seine slate, brass, a Didone title face, a wrought-iron divider and a compass rose. */
.trip[data-flair="europe"] {
  --paper: #fbf8f1; --paper-2: #f2eee4; --rule: #e3dccb; --accent: #2d4a6e; --accent-2: #dfe6ef; --land: #efe9da; --water: #f5f7fa; --state: #d8d0bd;
  --flair: #86651f; --mat: #fffdf8; --flair-map-title: "Itinéraire"; --flair-face: "Bodoni 72", "Bodoni MT", Didot, "Playfair Display", var(--serif); --flair-track: -.005em;
  --flair-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M0 7h52M80 7h52' stroke='black' stroke-width='1'/%3E%3Cpath d='M66 1l6 6-6 6-6-6z'/%3E%3Ccircle cx='55' cy='7' r='1.7'/%3E%3Ccircle cx='77' cy='7' r='1.7'/%3E%3C/svg%3E");
  --flair-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 8L6 2 12 8 6 14zM12 8L18 2 24 8 18 14z' fill='none' stroke='black' stroke-width='1.2'/%3E%3Ccircle cx='6' cy='8' r='1.5'/%3E%3Ccircle cx='18' cy='8' r='1.5'/%3E%3C/svg%3E");
  --flair-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M20 2l4 14 14 4-14 4-4 14-4-14-14-4 14-4z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .trip[data-flair="europe"] { --paper: #141519; --paper-2: #1b1c21; --rule: #2c2d33; --accent: #9db8d8; --accent-2: #1f2d40; --land: #26272c; --water: #17181c; --state: #3b3c42; --flair: #c9a55c; --mat: #23242a; }
}

/* ---- Flair ornaments (shared shapes) and the per-trip flairs ---- */
:root {
  --fs-div-waves: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%207q8.25-7%2016.5%200t16.5%200%2016.5%200%2016.5%200%2016.5%200%2016.5%200%2016.5%200%2016.5%200'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --fs-div-lattice: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%207h32M100%207h32'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20d='M39%207l7-6%207%206-7%206zM59%207l7-6%207%206-7%206zM79%207l7-6%207%206-7%206z'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --fs-div-peaks: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%2012L16%204%2026%2010%2042%201%2058%2012%2070%206%2084%2012%20100%203%20114%2010%20122%207%20132%2012'%20stroke='black'%20fill='none'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --fs-div-pines: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M8%2013l5-11%205%2011zM26%2013l5-11%205%2011zM44%2013l5-11%205%2011zM62%2013l5-11%205%2011zM80%2013l5-11%205%2011zM98%2013l5-11%205%2011zM116%2013l5-11%205%2011z'/%3E%3C/svg%3E");
  --fs-div-rings: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%207h44M88%207h44'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Ccircle%20cx='58'%20cy='7'%20r='5.5'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3Ccircle%20cx='74'%20cy='7'%20r='5.5'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --fs-div-strata: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%203h132M14%207h104M34%2011h64'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --fs-div-flags: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%201h132'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20d='M6%201h16l-8%2012zM28%201h16l-8%2012zM50%201h16l-8%2012zM72%201h16l-8%2012zM94%201h16l-8%2012zM116%201h16l-8%2012z'/%3E%3C/svg%3E");
  --fs-div-lotus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%207h50M82%207h50'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20d='M66%202C60%205%2060%2010%2066%2013%2072%2010%2072%205%2066%202z'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3Ccircle%20cx='55'%20cy='7'%20r='1.6'/%3E%3Ccircle%20cx='77'%20cy='7'%20r='1.6'/%3E%3C/svg%3E");
  --fs-div-diamond: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%2014'%3E%3Cpath%20d='M0%207h52M80%207h52'%20stroke='black'%20stroke-width='1'/%3E%3Cpath%20d='M66%201l6%206-6%206-6-6z'/%3E%3Ccircle%20cx='55'%20cy='7'%20r='1.7'/%3E%3Ccircle%20cx='77'%20cy='7'%20r='1.7'/%3E%3C/svg%3E");
  --fs-band-meander: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M1%2015V3h22v9H9V6h8'%20stroke='black'%20fill='none'%20stroke-width='1.4'/%3E%3C/svg%3E");
  --fs-band-seigaiha: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%2016a12%2012%200%200%201%2024%200M4.5%2016a7.5%207.5%200%200%201%2015%200M9%2016a3%203%200%200%201%206%200'%20stroke='black'%20fill='none'%20stroke-width='1.1'/%3E%3C/svg%3E");
  --fs-band-waves: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%209q6-8%2012%200t12%200'%20stroke='black'%20fill='none'%20stroke-width='1.4'/%3E%3C/svg%3E");
  --fs-band-peaks: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%2015L7%204%2012%2011%2017%202%2024%2015'%20stroke='black'%20fill='none'%20stroke-width='1.3'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --fs-band-pines: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M2%2015l4-12%204%2012zM12%2015l4-12%204%2012z'/%3E%3C/svg%3E");
  --fs-band-pennants: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%201h24'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20fill-rule='evenodd'%20d='M2%201h20l-10%2013zM12%205.5m-1.6%200a1.6%201.6%200%201%200%203.2%200a1.6%201.6%200%201%200-3.2%200z'/%3E%3C/svg%3E");
  --fs-band-mesa: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%2014V10H4V6H8V2H16V6H20V10H24V14'%20stroke='black'%20fill='none'%20stroke-width='1.3'/%3E%3C/svg%3E");
  --fs-band-rings: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Ccircle%20cx='8'%20cy='8'%20r='5'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3Ccircle%20cx='16'%20cy='8'%20r='5'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --fs-band-petals: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M12%2015C5%2012%205%205%2012%201%2019%205%2019%2012%2012%2015z'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --fs-band-lattice: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2016'%3E%3Cpath%20d='M0%208L6%202%2012%208%206%2014zM12%208L18%202%2024%208%2018%2014z'%20stroke='black'%20fill='none'%20stroke-width='1.2'/%3E%3Ccircle%20cx='6'%20cy='8'%20r='1.5'/%3E%3Ccircle%20cx='18'%20cy='8'%20r='1.5'/%3E%3C/svg%3E");
  --fs-comp-compass: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Ccircle%20cx='20'%20cy='20'%20r='17'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20d='M20%202l4%2014%2014%204-14%204-4%2014-4-14-14-4%2014-4z'/%3E%3C/svg%3E");
  --fs-comp-sun: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Ccircle%20cx='20'%20cy='20'%20r='7'/%3E%3Cpath%20d='M31.0%2020.0L38.0%2020.0M29.5%2025.5L33.0%2027.5M25.5%2029.5L29.0%2035.6M20.0%2031.0L20.0%2035.0M14.5%2029.5L11.0%2035.6M10.5%2025.5L7.0%2027.5M9.0%2020.0L2.0%2020.0M10.5%2014.5L7.0%2012.5M14.5%2010.5L11.0%204.4M20.0%209.0L20.0%205.0M25.5%2010.5L29.0%204.4M29.5%2014.5L33.0%2012.5'%20stroke='black'%20fill='none'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3C/svg%3E");
  --fs-comp-sakura: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Ccircle%20cx='20.0'%20cy='12.0'%20r='6.2'/%3E%3Ccircle%20cx='27.6'%20cy='17.5'%20r='6.2'/%3E%3Ccircle%20cx='24.7'%20cy='26.5'%20r='6.2'/%3E%3Ccircle%20cx='15.3'%20cy='26.5'%20r='6.2'/%3E%3Ccircle%20cx='12.4'%20cy='17.5'%20r='6.2'/%3E%3C/svg%3E");
  --fs-comp-medallion: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Ccircle%20cx='20'%20cy='20'%20r='17'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Ccircle%20cx='20'%20cy='20'%20r='11'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20d='M20%203v34M3%2020h34'%20stroke='black'%20fill='none'%20stroke-width='1'/%3E%3Cpath%20d='M20%2014l6%206-6%206-6-6z'/%3E%3C/svg%3E");
}
.trip[data-flair="alps"] {
  --paper: #fbf8f2; --paper-2: #f3eee3; --rule: #e4dccb; --accent: #2f5b52; --accent-2: #dde9e5; --land: #eee8d8; --water: #f3f7f7;
  --flair: #b4572f; --mat: #fffdf8; --flair-map-title: "Itinerario"; --flair-face: "Palatino", "Palatino Linotype", "Book Antiqua", var(--serif);
  --flair-divider: var(--fs-div-peaks); --flair-band: var(--fs-band-peaks); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="alps"] { --paper: #131615; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #8fc1b4; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #e0906a; --mat: #23242a; } }
.trip[data-flair="northwest"] {
  --paper: #f7f9f4; --paper-2: #edf1ea; --rule: #dce3d6; --accent: #27523f; --accent-2: #dbe7e0; --land: #e8eee1; --water: #f2f7f8;
  --flair: #7a6a24; --mat: #fdfefb; --flair-map-title: "Route"; --flair-face: "Optima", "Candara", "Gill Sans", var(--serif);
  --flair-divider: var(--fs-div-pines); --flair-band: var(--fs-band-pines); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="northwest"] { --paper: #131614; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #8fbfa6; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #c7b56a; --mat: #23242a; } }
.trip[data-flair="parks"] {
  --paper: #faf7f0; --paper-2: #f2eee2; --rule: #e6ddc9; --accent: #35502f; --accent-2: #dfe8d8; --land: #eee7d3; --water: #f3f7f6;
  --flair: #b5541f; --mat: #fffdf8; --flair-map-title: "Trail map"; --flair-face: "Rockwell", "Roboto Slab", "Courier New", var(--serif);
  --flair-divider: var(--fs-div-peaks); --flair-band: var(--fs-band-pines); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="parks"] { --paper: #16150f; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #a3c48a; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #e39a63; --mat: #23242a; } }
.trip[data-flair="china"] {
  --paper: #fbf7f0; --paper-2: #f3ece1; --rule: #e7ddcb; --accent: #8f2320; --accent-2: #efd9d5; --land: #f0e8d9; --water: #f6f4ef;
  --flair: #886819; --mat: #fffdf8; --flair-map-title: "行程"; --flair-face: "Songti SC", "STSong", "Noto Serif SC", var(--serif);
  --flair-divider: var(--fs-div-lattice); --flair-band: var(--fs-band-meander); --flair-compass: var(--fs-comp-medallion);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="china"] { --paper: #171314; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #e59a94; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #d4b062; --mat: #23242a; } }
.trip[data-flair="hkbkk"] {
  --paper: #fbf9f3; --paper-2: #f2efe6; --rule: #e5e0d1; --accent: #0f5f68; --accent-2: #d9eaec; --land: #eee9db; --water: #f2f8f8;
  --flair: #95600f; --mat: #fffdf9; --flair-map-title: "Route"; --flair-face: "Futura", "Avenir Next", "Trebuchet MS", var(--serif);
  --flair-divider: var(--fs-div-lotus); --flair-band: var(--fs-band-petals); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="hkbkk"] { --paper: #121617; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #7cc2cb; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #e0a95a; --mat: #23242a; } }
.trip[data-flair="japan"] {
  --paper: #fbf9f7; --paper-2: #f3f0ec; --rule: #e6e1dd; --accent: #263a6b; --accent-2: #e1e6f1; --land: #efece7; --water: #f4f6fa;
  --flair: #b04862; --mat: #fffdfb; --flair-map-title: "旅程"; --flair-face: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", var(--serif);
  --flair-divider: var(--fs-div-waves); --flair-band: var(--fs-band-seigaiha); --flair-compass: var(--fs-comp-sakura);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="japan"] { --paper: #131418; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #9db0e0; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #e795ab; --mat: #23242a; } }
.trip[data-flair="mexico"] {
  --paper: #fcf8f1; --paper-2: #f4ecdd; --rule: #eadfcb; --accent: #1f6a72; --accent-2: #d9ebec; --land: #f0e6d2; --water: #f3f8f7;
  --flair: #b4472a; --mat: #fffdf8; --flair-map-title: "Ruta"; --flair-face: "Hoefler Text", "Baskerville", var(--serif);
  --flair-divider: var(--fs-div-flags); --flair-band: var(--fs-band-pennants); --flair-compass: var(--fs-comp-sun);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="mexico"] { --paper: #171412; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #7ec6cd; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #e78a68; --mat: #23242a; } }
.trip[data-flair="wedding"] {
  --paper: #fcf8f6; --paper-2: #f5eeeb; --rule: #eadfdc; --accent: #7a2f45; --accent-2: #f0dde3; --land: #f3ece6; --water: #f5f8fa;
  --flair: #8f6b2a; --mat: #fffdfc; --flair-map-title: "The journey"; --flair-face: "Baskerville", "Palatino", var(--serif);
  --flair-divider: var(--fs-div-rings); --flair-band: var(--fs-band-rings); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="wedding"] { --paper: #171314; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #dea0b3; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #d3ae66; --mat: #23242a; } }
.trip[data-flair="huangshan"] {
  --paper: #f9f6ef; --paper-2: #f0ece2; --rule: #e4dfd2; --accent: #2f3a3f; --accent-2: #dfe3e2; --land: #ece8dd; --water: #f3f4f2;
  --flair: #a72f27; --mat: #fdfbf6; --flair-map-title: "山行"; --flair-face: "Songti SC", "STSong", "Noto Serif SC", var(--serif);
  --flair-divider: var(--fs-div-peaks); --flair-band: var(--fs-band-peaks); --flair-compass: var(--fs-comp-medallion);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="huangshan"] { --paper: #141515; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #b9c6ca; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #e3776d; --mat: #23242a; } }
.trip[data-flair="hawaii"] {
  --paper: #fbf9f3; --paper-2: #f3efe4; --rule: #e7e1d0; --accent: #0b6a82; --accent-2: #d8ebf1; --land: #f0eadb; --water: #f1f8fa;
  --flair: #b64632; --mat: #fffdf9; --flair-map-title: "Voyage"; --flair-face: "Optima", "Avenir Next", "Gill Sans", var(--serif);
  --flair-divider: var(--fs-div-waves); --flair-band: var(--fs-band-waves); --flair-compass: var(--fs-comp-sun);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="hawaii"] { --paper: #121618; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #78c3d8; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #f08d78; --mat: #23242a; } }
.trip[data-flair="southwest"] {
  --paper: #fbf6ee; --paper-2: #f3eadb; --rule: #e8dcc8; --accent: #8c3d1f; --accent-2: #f0dccf; --land: #f0e3cd; --water: #f4f6f4;
  --flair: #2c7482; --mat: #fffcf6; --flair-map-title: "Road map"; --flair-face: "American Typewriter", "Rockwell", "Courier New", var(--serif);
  --flair-divider: var(--fs-div-strata); --flair-band: var(--fs-band-mesa); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="southwest"] { --paper: #171412; --paper-2: #1b1c1f; --rule: #2c2d31; --accent: #e39a78; --accent-2: #1f2a33; --land: #25272a; --water: #16181b; --state: #3b3d41; --flair: #6fc0cf; --mat: #23242a; } }

/* ---- Highlights on big pages ---- */
.hl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: var(--measure); margin: 0 0 40px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.hl-bar p { margin: 0; }
.hl-bar button, .hl-day button { font: 600 13px/1 var(--sans); padding: 9px 14px; border: 1px solid var(--ink-3); border-radius: 99px; background: var(--paper); color: var(--ink); cursor: pointer; }
.hl-bar button:hover, .hl-day button:hover { border-color: var(--ink); }
.hl-day { display: none; max-width: var(--measure); margin: 26px 0 0; }
.trip.is-hl .hl-day { display: block; }
.trip.is-hl .day:not(.is-open) .ph-extra, .trip.is-hl .day:not(.is-open) .ph-row-extra { display: none; }

/* ---- Search ---- */
.search { max-width: 760px; margin-inline: auto; padding-bottom: 80px; }
.s-form input { width: 100%; font: 400 22px/1.3 var(--serif); padding: 16px 20px; border: 1.5px solid var(--ink-3); border-radius: 12px; background: var(--paper); color: var(--ink); }
.s-form input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.s-chips button, .s-try button { font: 500 13px/1 var(--sans); padding: 8px 13px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.s-chips button span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.s-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.s-chips button[aria-pressed="true"] span { color: inherit; opacity: .7; }
.search:not(.has-q) .s-chips { display: none; }
.s-try { margin: 18px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.s-try button { margin: 0 4px 4px 0; }
.search.has-q .s-try { display: none; }
.s-status { margin: 18px 0 0; font: 500 13px/1.3 var(--sans); color: var(--ink-3); min-height: 1.3em; }
.s-results { list-style: none; margin: 8px 0 0; padding: 0; }
.s-hit { padding: 18px 0; border-top: 1px solid var(--rule); }
.s-hit a { display: block; text-decoration: none; color: inherit; }
.s-hit strong { display: block; font: 400 21px/1.25 var(--serif); }
.s-hit a:hover strong { color: var(--accent); text-decoration: underline; }
.s-type { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.s-hit p { margin: 8px 0 0; font: 400 16px/1.55 var(--serif); color: var(--ink-2); }
.s-hit mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---- Places: sort and filter ---- */
.pl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; }
.pl-sort { display: inline-flex; border: 1px solid var(--rule); border-radius: 99px; overflow: hidden; }
.pl-sort button { font: 500 13px/1 var(--sans); padding: 9px 15px; border: 0; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.pl-sort button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pl-tools input { font: 400 15px/1.2 var(--sans); padding: 9px 14px; min-width: 220px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper); color: var(--ink); }
.pl-count { font: 500 13px var(--sans); color: var(--ink-3); }
.visit-list li[hidden] { display: none; }

/* ---- Day logistics kept out of the story ---- */
.practical { max-width: var(--measure); margin: 26px 0 0; padding: 10px 0 10px 16px; border-left: 2px solid var(--rule); font: 400 14.5px/1.55 var(--sans); color: var(--ink-2); }
.practical span { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }

/* ---------- Photos (browse, filter, view) ---------- */
.gx-head .kicker { margin-bottom: 14px; }
.gx-head p:last-child { max-width: 52ch; }
.gx { padding-bottom: 40px; }
.gx-loading { padding: 48px 0; color: var(--ink-3); }
.gx-panel { margin-top: 28px; border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 16px; }
.gx-lab { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.gx-lab small { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 8px; }
.gx-r1 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.gx-search input, .gx-where input, .gx-trip select { width: 100%; font: 400 15px/1.2 var(--sans); padding: 11px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); }
.gx-where input { padding-right: 38px; }
.gx-trip select { appearance: none; -webkit-appearance: none; padding-right: 34px; text-overflow: ellipsis; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23868a90' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center; cursor: pointer; }
.gx-search input:focus, .gx-where input:focus, .gx-trip select:focus { border-color: var(--ink-3); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.gx-where { position: relative; }
.gx-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); font: 400 17px/1 var(--sans); cursor: pointer; }
.gx-wl { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: min(60vh, 380px); overflow: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .28); }
.gx-wl[hidden] { display: none; }
.gx-wg { padding: 10px 10px 4px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.gx-wl [role=option] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; cursor: pointer; }
.gx-wl [role=option] small { margin-left: 8px; color: var(--ink-3); font-size: 12px; }
.gx-wl [role=option] em { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gx-wl [role=option]:hover, .gx-wl [role=option].is-on { background: var(--paper-2); }
.gx-r2 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 14px; }
.gx-r2 .gx-lab, .gx-r4 .gx-lab { margin: 0; }
.gx-named { font: 400 13px/1.2 var(--sans); color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; }
.gx-named input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; }
.gx-r3 .gx-lab { margin-bottom: 4px; }
.gx-years { margin-top: 6px; }
.gx-r4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.gx-r4 .gx-lab { margin-right: 8px; }
.gx-months { display: flex; flex-wrap: wrap; gap: 4px; margin-right: 14px; }
.gx-months .chip { padding: 7px 9px; }
.gx .chip:disabled, .gx .chip.is-dim { opacity: .42; }
.gx .chip:disabled { cursor: default; }

.gx-bar { position: sticky; top: 0; z-index: 30; margin-top: 22px; display: flex; align-items: center; gap: 10px 16px; padding: 10px 0; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gx-n { margin: 0; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.gx-n strong { font: 400 22px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.gx-pills { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.gx-pills::-webkit-scrollbar { display: none; }
.gx-pill { flex: none; font: 500 12.5px/1 var(--sans); padding: 7px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); background: var(--accent-2); color: var(--ink); cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-pill span { margin-left: 3px; color: var(--ink-3); }
.gx-pill:hover { border-color: var(--accent); }
.gx-pill-all { background: none; border-color: var(--rule); color: var(--ink-2); }
.gx-bar-r { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.gx-btn { font: 500 13px/1 var(--sans); padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink-2); cursor: pointer; list-style: none; white-space: nowrap; }
.gx-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.gx-view { position: relative; }
.gx-view summary::-webkit-details-marker { display: none; }
.gx-view[open] summary { border-color: var(--ink); color: var(--ink); }
.gx-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 320px; max-width: calc(100vw - 32px); padding: 14px; display: grid; gap: 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .28); }
.gx-seg-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); }
.gx-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 99px; overflow: hidden; }
.gx-seg button { flex: 1; font: 500 12.5px/1 var(--sans); padding: 8px 6px; border: 0; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.gx-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.gx-body { position: relative; }
.gx-year { display: flex; align-items: baseline; gap: 14px; margin: 52px 0 6px; padding-top: 10px; border-top: 1px solid var(--ink); scroll-margin-top: 76px; }
.gx-year:first-child { margin-top: 26px; }
.gx-year span { font: 400 clamp(36px, 4.6vw, 58px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.gx-year small { font: 400 13px var(--sans); color: var(--ink-3); }
.gx-group { margin-top: 22px; }
.gx-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 10px; }
.gx-gh h3 { font: 400 22px/1.2 var(--serif); letter-spacing: -.005em; }
.gx-gh h3 a { text-decoration: none; }
.gx-gh h3 a:hover { color: var(--accent); text-decoration: underline; }
.gx-gh p { font-size: 12.5px; color: var(--ink-3); }
.gx-rows { display: flex; flex-direction: column; gap: var(--gap, 5px); }
.gx-row { display: flex; gap: var(--gap, 5px); overflow: hidden; }
.gx-t { position: relative; flex: none; height: 100%; padding: 0; border: 0; background: var(--ph, var(--paper-2)); overflow: hidden; cursor: zoom-in; display: block; }
.gx-t img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.gx-t img.is-in { opacity: 1; }
.gx-t:hover img { transform: scale(1.035); }
.gx-t-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; font: 400 12.5px/1.35 var(--sans); color: #fff; text-align: left; background: linear-gradient(transparent, rgb(0 0 0 / .68)); opacity: 0; transition: opacity .2s; pointer-events: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-t:hover .gx-t-cap, .gx-t:focus-visible .gx-t-cap { opacity: 1; }
.gx-t.is-saved::after { content: "♥"; position: absolute; top: 6px; right: 8px; color: #fff; font-size: 15px; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.gx-t:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.gx-empty { padding: 72px 0; text-align: center; color: var(--ink-2); }
.gx-empty p + p { margin-top: 14px; }
.gx-rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 25; display: flex; flex-direction: column; gap: 1px; padding: 6px 4px; }
.gx-rail a { font: 500 11px/1.5 var(--sans); color: var(--ink-3); text-decoration: none; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; border-radius: 4px; }
.gx-rail a:hover, .gx-rail a.is-on { color: var(--ink); background: var(--paper-2); }
.gx-rail a.is-on { font-weight: 700; }
.gx-rail[hidden] { display: none; }
@media (max-width: 1240px) { .gx-rail { display: none; } }

.gx-viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 10 10 / .97); color: #eee; }
.gx-viewer::backdrop { background: #000; }
.gx-fig { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 72px 14px; gap: 12px; }
.gx-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.gx-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 8px 40px rgb(0 0 0 / .5); }
.gx-spin { position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border: 2px solid rgb(255 255 255 / .25); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: gx-spin .8s linear infinite; }
.gx-fig.is-loading .gx-spin { opacity: 1; }
@keyframes gx-spin { to { transform: rotate(360deg); } }
.gx-meta { flex: none; width: min(880px, 100%); text-align: center; }
.gx-cap { font: 400 19px/1.35 var(--serif); color: #f3f3f0; min-height: 1.35em; text-wrap: balance; }
.gx-info { margin-top: 6px; font: 400 13px/1.5 var(--sans); color: #b9b9b5; }
.gx-info a { color: #d8d8d3; }
.gx-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.gx-acts button, .gx-acts a { font: 500 12.5px/1 var(--sans); padding: 8px 12px; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: none; color: #ddd; cursor: pointer; text-decoration: none; }
.gx-acts button:hover, .gx-acts a:hover { border-color: #fff; color: #fff; }
.gx-acts [aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.gx-x { position: absolute; background: none; border: 0; color: #fff; font: 300 44px/1 var(--sans); cursor: pointer; padding: 10px 16px; opacity: .75; }
.gx-x:hover { opacity: 1; }
.gx-close { top: 4px; right: 10px; }
.gx-prev { left: 6px; top: 42%; transform: translateY(-50%); }
.gx-next { right: 6px; top: 42%; transform: translateY(-50%); }
.gx-count { position: absolute; left: 20px; top: 16px; margin: 0; font: 500 12px var(--sans); color: #a8a8a4; font-variant-numeric: tabular-nums; }
.gx-viewer.is-playing .gx-fig { cursor: none; }
.gx-fbtn { display: none; }
@media (max-width: 760px) {
  .gx-r1 { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .gx-r1 .gx-more-item { grid-column: 1 / -1; }
  .gx-fbtn { display: inline-block; padding: 12px 16px; }
  .gx-fbtn[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
  .gx-panel:not(.is-open) .gx-more-item { display: none; }
  .gx-panel { gap: 12px; }
  [data-show] { display: none; }
  .gx-r2 { grid-template-columns: 1fr; }
  .gx-r2 .f-who { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .gx-r2 .chip { flex: none; }
  .gx-months .chip { padding: 7px 8px; }
  .gx-bar { flex-wrap: wrap; }
  .gx-pills { order: 3; flex-basis: 100%; }
  .gx-years .yr:nth-child(even) .yr-n { visibility: hidden; }
  .gx-fig { padding: 40px 8px 10px; }
  .gx-x { font-size: 38px; padding: 8px 10px; }
  .gx-prev, .gx-next { top: 38%; }
  .gx-cap { font-size: 16.5px; }
  .gx-year { margin-top: 40px; }
}
@media (hover: none) { .gx-t-cap { display: none; } }
@media (prefers-reduced-motion: reduce) { .gx-t img { transition: none; } .gx-t:hover img { transform: none; } }
@media print { .gx-panel, .gx-bar, .gx-rail, .gx-viewer { display: none !important; } }

/* ---------- Ages on trip pages ---------- */
.age { color: var(--ink-3); font-size: .92em; white-space: nowrap; }
.day-bday { margin-left: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--flag) 55%, var(--rule)); color: var(--flag); font: 600 11px/1.2 var(--sans); letter-spacing: .04em; text-transform: none; white-space: nowrap; }

/* ---------- Home: Start here ---------- */
.start { margin-top: 72px; }
.start-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding-top: 12px; border-top: 1px solid var(--ink); }
.start-head p { font: italic 400 17px/1.4 var(--serif); color: var(--ink-2); }
.start-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; counter-reset: st; }
.start-card a { display: block; text-decoration: none; color: inherit; }
.start-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.start-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.start-card a:hover .start-media img { transform: scale(1.03); }
.start-n { position: absolute; left: 0; bottom: 0; padding: 4px 14px 2px 10px; background: var(--paper); font: 400 40px/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums; }
.start-when { margin-top: 12px; font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.start-title { margin-top: 4px; font: 400 25px/1.12 var(--serif); letter-spacing: -.01em; }
.start-card a:hover .start-title { color: var(--accent); }
.start-why { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.start-ages { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.start-more { margin-top: 24px; font-size: 14px; color: var(--ink-3); }
.start-more a { color: var(--accent); }
@media (max-width: 1000px) { .start-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .start { margin-top: 56px; } .start-list { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- More trip flairs: sea, eastern (cities of the East), iberia ---------- */
:root {
  --fs-div-anchor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M0 7h50M82 7h50' stroke='black' stroke-width='1' fill='none'/%3E%3Ccircle cx='66' cy='2.6' r='1.6' stroke='black' stroke-width='1' fill='none'/%3E%3Cpath d='M66 4.2V12M62.5 6.2h7M60 9c.4 2.6 2.8 3.8 6 3.8s5.6-1.2 6-3.8' stroke='black' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --fs-div-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M0 7h28M104 7h28' stroke='black' stroke-width='1' fill='none'/%3E%3Cpath d='M40.0 2.6L41.1 5.5L44.2 5.6L41.8 7.6L42.6 10.6L40.0 8.9L37.4 10.6L38.2 7.6L35.8 5.6L38.9 5.5zM53.0 2.6L54.1 5.5L57.2 5.6L54.8 7.6L55.6 10.6L53.0 8.9L50.4 10.6L51.2 7.6L48.8 5.6L51.9 5.5zM66.0 2.6L67.1 5.5L70.2 5.6L67.8 7.6L68.6 10.6L66.0 8.9L63.4 10.6L64.2 7.6L61.8 5.6L64.9 5.5zM79.0 2.6L80.1 5.5L83.2 5.6L80.8 7.6L81.6 10.6L79.0 8.9L76.4 10.6L77.2 7.6L74.8 5.6L77.9 5.5zM92.0 2.6L93.1 5.5L96.2 5.6L93.8 7.6L94.6 10.6L92.0 8.9L89.4 10.6L90.2 7.6L87.8 5.6L90.9 5.5z'/%3E%3C/svg%3E");
  --fs-div-arches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M20 13V8a4 4 0 0 1 8 0v5M36 13V8a4 4 0 0 1 8 0v5M52 13V8a4 4 0 0 1 8 0v5M68 13V8a4 4 0 0 1 8 0v5M84 13V8a4 4 0 0 1 8 0v5M100 13V8a4 4 0 0 1 8 0v5M14 13h104' stroke='black' stroke-width='1.1' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fs-band-sails: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M5 13V2l7 11zM14 13V5l6 8z'/%3E%3Cpath d='M2 15h20' stroke='black' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --fs-band-skyline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M0 15V10h3V5h4v4h2V7h4v5h3V3h4v6h2v6z'/%3E%3C/svg%3E");
  --fs-band-star8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M6 2h12v12H6zM12 0l8 8-8 8-8-8z' stroke='black' stroke-width='1.1' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fs-comp-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' stroke='black' fill='none' stroke-width='1'/%3E%3Cpath d='M20.0 9.0L22.9 17.0L31.4 17.3L24.8 22.5L27.1 30.7L20.0 26.0L12.9 30.7L15.2 22.5L8.6 17.3L17.1 17.0z'/%3E%3C/svg%3E");
}
.trip[data-flair="sea"] {
  --paper: #f7f9fa; --paper-2: #edf2f4; --rule: #dbe3e7; --accent: #14506e; --accent-2: #d5e4ec; --land: #ece9df; --water: #eaf3f7;
  --flair: #b04a2c; --mat: #fdfefe; --flair-map-title: "Charted course"; --flair-face: "Gill Sans", "Gill Sans MT", "Trebuchet MS", var(--serif);
  --flair-divider: var(--fs-div-anchor); --flair-band: var(--fs-band-sails); --flair-compass: var(--fs-comp-compass);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="sea"] { --paper: #10161a; --paper-2: #172026; --rule: #27343b; --accent: #7fb8d4; --accent-2: #1c3140; --land: #232a2e; --water: #14202a; --state: #3a4348; --flair: #e8896a; --mat: #202a30; } }
.trip[data-flair="eastern"] {
  --paper: #faf8f5; --paper-2: #f1ede6; --rule: #e3dccf; --accent: #2f4a63; --accent-2: #dde5ec; --land: #ece8df; --water: #f1f5f8;
  --flair: #9a3b2b; --mat: #fffdfa; --flair-map-title: "Itinerary"; --flair-face: "Big Caslon", "Baskerville", "Georgia", var(--serif);
  --flair-divider: var(--fs-div-stars); --flair-band: var(--fs-band-skyline); --flair-compass: var(--fs-comp-star);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="eastern"] { --paper: #14151a; --paper-2: #1b1c22; --rule: #2c2e35; --accent: #9db8d4; --accent-2: #1f2b3a; --land: #26272c; --water: #17181d; --state: #3b3d43; --flair: #e0836f; --mat: #22232a; } }
.trip[data-flair="iberia"] {
  --paper: #fcf7f0; --paper-2: #f4ebdc; --rule: #e8dcc7; --accent: #1d4f91; --accent-2: #dae5f2; --land: #f0e4cf; --water: #f2f6f8;
  --flair: #b0442a; --mat: #fffcf6; --flair-map-title: "Recorrido"; --flair-face: "Cochin", "Hoefler Text", "Goudy Old Style", var(--serif);
  --flair-divider: var(--fs-div-arches); --flair-band: var(--fs-band-star8); --flair-compass: var(--fs-comp-medallion);
}
@media (prefers-color-scheme: dark) { .trip[data-flair="iberia"] { --paper: #171412; --paper-2: #1e1a17; --rule: #302a25; --accent: #9cbcf0; --accent-2: #1e2a3d; --land: #29241f; --water: #181b1f; --state: #3d3833; --flair: #e79572; --mat: #26211d; } }

/* ---------- Pick your five ---------- */
.fv-head .kicker { margin-bottom: 14px; }
.fv-head p:last-child { max-width: 56ch; }
.fv { padding-bottom: 150px; }
.fv-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ink); }
.fv-who > span { font: 600 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.fv-who .chip { font-size: 15px; padding: 10px 18px; }
.fv-all { margin-left: auto; border: 0; background: none; font: 500 13px var(--sans); color: var(--accent); cursor: pointer; }
.fv-all:hover { text-decoration: underline; }
.fv-hint { margin-top: 12px; font: italic 400 17px/1.4 var(--serif); color: var(--ink-2); min-height: 1.4em; }
.fv-year { margin-top: 34px; }
.fv-year[hidden], .fv-grid li[hidden] { display: none; }
.fv-year h2 { font: 400 clamp(32px, 4vw, 46px)/1 var(--serif); letter-spacing: -.02em; padding-top: 8px; border-top: 1px solid var(--rule); }
.fv-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.fv-grid li { position: relative; }
.fv-card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fv-card:disabled { cursor: not-allowed; opacity: .5; }
.fv-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .15s; }
.fv-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s; }
.fv-card:not(:disabled):hover .fv-media img { transform: scale(1.03); }
.fv-card[aria-pressed="true"] .fv-media { outline-color: var(--accent); }
.fv-card[aria-pressed="true"] .fv-media img { filter: saturate(1.08); }
.fv-rank { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 var(--serif); background: var(--accent); color: var(--paper); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s; }
.fv-card[aria-pressed="true"] .fv-rank { opacity: 1; transform: none; }
.fv-title { display: block; margin-top: 10px; font: 400 20px/1.15 var(--serif); letter-spacing: -.005em; }
.fv-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.fv-ages { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.fv-read { position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--paper) 88%, transparent); font: 500 11.5px/1.2 var(--sans); text-decoration: none; opacity: 0; transition: opacity .15s; }
.fv-grid li:hover .fv-read, .fv-read:focus-visible { opacity: 1; }
@media (hover: none) { .fv-read { opacity: 1; } }
.fv-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--ink); display: none; }
.fv-tray.is-on { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.fv-tray .fv-count { order: 1; }
.fv-tray .fv-acts { order: 2; margin: 0; }
.fv-tray .fv-picks { order: 3; grid-column: 1 / -1; margin: 0; }
.fv-tray .fv-note { order: 4; grid-column: 1 / -1; margin: 0; }
.fv-count { font-size: 13px; color: var(--ink-3); }
.fv-count strong { font: 400 22px/1 var(--serif); color: var(--ink); }
.fv-picks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fv-picks li { flex: none; }
.fv-picks button { font: 500 12.5px/1 var(--sans); padding: 8px 11px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); background: var(--accent-2); color: var(--ink); cursor: pointer; white-space: nowrap; }
.fv-acts { display: flex; gap: 8px; margin-top: 10px; }
.fv-send, .fv-copy { font: 600 14px/1 var(--sans); padding: 12px 20px; border-radius: 99px; border: 1px solid var(--ink); cursor: pointer; }
.fv-send { background: var(--ink); color: var(--paper); }
.fv-copy { background: none; color: var(--ink); }
.fv-send:disabled, .fv-copy:disabled { opacity: .35; cursor: default; }
.fv-note { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); min-height: 1.2em; }
@media (min-width: 900px) { .fv-tray.is-on { display: flex; gap: 20px; } .fv-tray .fv-picks { flex: 1; order: 2; } .fv-tray .fv-acts { order: 3; } .fv-tray .fv-note { position: absolute; right: var(--gutter); bottom: 2px; } }
@media print { .fv-tray { display: none !important; } }

/* ---------- the public edition ---------- */
.site-nav .sign-in { margin-left: 8px; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); }
.site-nav .sign-in:hover { color: var(--accent); border-color: var(--accent); }
.pub-btn { display: inline-block; font: 600 14px/1 var(--sans); letter-spacing: .02em; text-decoration: none; color: var(--paper); background: var(--accent); padding: 13px 20px; border-radius: 2px; }
.pub-btn:hover { filter: brightness(1.12); }
.pub-note { margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--ink); }
.pub-note p { font: italic 300 19px/1.5 var(--serif); color: var(--ink-2); }
.pub-note p + p { margin-top: 16px; font: 14px/1 var(--sans); font-style: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pub-more { color: var(--ink-2); }
.pub-family { margin-top: 110px; padding-top: 26px; border-top: 1px solid var(--ink); }
.pub-family h2 { font: 300 clamp(32px, 4vw, 46px)/1.02 var(--serif); letter-spacing: -.02em; }
.pub-family p { font: italic 300 20px/1.5 var(--serif); color: var(--ink-2); margin-top: 14px; max-width: 34em; }
.pub-family p:last-child { margin-top: 26px; }
.journey-public { margin-top: 96px; }