/* Earth Camino: one page - the opening with her story, the route map, how to join, the six days,
   the march and a closing invitation, each section opened by a hand-drawn line. */
/* Fonts, served from the site itself (all SIL Open Font License), Latin characters only */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/outfit-variable.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: "GFS Didot"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gfs-didot-400.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: "Gaegu"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gaegu-400.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; }
:root {
  --bg: #ffffff;
  --fg: #141814;
  --muted: #646b65;
  --soft: #eef0eb;
  --rule: #e1e3de;
  --earth: #2f5d46;
  --cream: #f8f4ee;                 /* day cards and the closing invitation */
  --pin: #d9622b;
  --ink: #2f3542;                   /* headings */
  --radius: clamp(12px, 2.5vw, 22px);
  --sans: "Outfit", "Sofia Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4.5vw, 40px);
  --col: 860px;                     /* the one page column: text, map and day cards all share it */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111411; --fg: #e8ebe6; --muted: #9aa29a; --soft: #1b201c; --rule: #2a302b;
    --earth: #8cc4a4; --pin: #f0844f; --ink: #e8ebe6; --cream: #1c211d; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: clamp(17px, 1rem + .3vw, 19px); line-height: 1.7;
}
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
/* text links get a hand-drawn underline from rough.js instead of the browser's straight one */
main a, footer a { text-decoration: none; }
a.sketched { position: relative; }
svg.link-sketch { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; opacity: .5; transition: opacity .15s; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--pin); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--sans); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; margin: 0; }

/* Opening: the logo, the dates, and the title in the logo's GFS Didot, as on the logo itself */
.site-header { display: flex; align-items: center; justify-content: center; padding: 18px var(--gutter); max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; }
.brand { display: block; text-decoration: none; }
.brand img { display: block; height: clamp(68px, 9vw, 92px); width: auto; max-width: 100%; }
.band.story { padding-top: clamp(16px, 4vw, 48px); }
.story .wrap { container-type: inline-size; }
.post-meta { position: relative; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 500; color: var(--muted); }   /* positioned: the date's underline is drawn inside it */
.post-date { position: relative; display: inline-block; padding-bottom: 4px; }   /* Rough Notation draws an underline under it */
/* "Come walk the Earth Camino!" is 13.64em wide in GFS Didot, so 100cqi / 13.8 fills the column on one line */
.story h1 { font-family: "GFS Didot", "Didot", "Bodoni MT", Georgia, serif; font-size: calc(100cqi / 13.8); font-weight: 400; line-height: 1.1; letter-spacing: 0; color: var(--earth); margin: 10px 0 32px; white-space: nowrap; }
.br-phone { display: none; }
/* phones: two lines, "Come walk the" (6.71em) over "Earth Camino!", about twice the size */
@media (max-width: 599px) { .story h1 { font-size: calc(100cqi / 6.85); line-height: 1.05; } .br-phone { display: inline; } }

/* Bands: full-width backgrounds, content centred inside */
.band { padding: clamp(32px, 4vw, 48px) 0; }   /* room between sections, so each one reads as its own pause */
.wrap { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* a hand-drawn line (rough.js) opens each section, in place of coloured bands */
.section-rule { position: relative; height: 6px; margin-bottom: clamp(28px, 4vw, 40px); }
.band-head { max-width: var(--col); margin: 0 0 clamp(22px, 3vw, 32px); }
/* small handwritten line above a heading, with its ink icon on a peach blob */
.kicker { display: flex; align-items: center; gap: 12px; font-family: "Gaegu", "Segoe Print", cursive; font-size: 1.5rem; line-height: 1; color: var(--muted); margin-bottom: 14px; }
.kicker[data-ic]::before { content: ""; flex: none; width: 72px; height: 46px; background: url(../img/icons/disc.png) center / auto 40px no-repeat, url(../img/decor/yellow-science-blob-small.png) center / 100% 100% no-repeat; }
.kicker[data-ic="map"]::before { background-image: url(../img/icons/corridor-map.svg), url(../img/icons/disc.png), url(../img/decor/yellow-science-blob-small.png); background-size: auto 40px, auto 40px, 100% 100%; background-position: center; background-repeat: no-repeat; }
.kicker[data-ic="days"]::before { background-image: url(../img/icons/days.svg), url(../img/icons/disc.png), url(../img/decor/yellow-science-blob-small.png); background-size: auto 30px, auto 40px, 100% 100%; background-position: center; background-repeat: no-repeat; }
.kicker[data-ic="finish"]::before { background-image: url(../img/icons/finish.svg), url(../img/icons/disc.png), url(../img/decor/yellow-science-blob-small.png); background-size: auto 44px, auto 40px, 100% 100%; background-position: center; background-repeat: no-repeat; }
.kicker[data-ic="stages"]::before { background-image: url(../img/icons/stages.svg), url(../img/icons/disc.png), url(../img/decor/yellow-science-blob-small.png); background-size: auto 30px, auto 40px, 100% 100%; background-position: center; background-repeat: no-repeat; }
.band h2 { position: relative; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }   /* positioned: Rough Notation draws its orange underline inside the heading, so it moves with it */
.lede { margin-top: 18px; font-size: 1.05em; color: var(--muted); max-width: 38em; }

/* About the Walk: her photo on the left, the text wrapping around it */
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--soft); }
figcaption { font-size: .8rem; color: var(--muted); margin-top: .6rem; line-height: 1.45; }
figcaption .by { opacity: .75; }
/* the photo sits to the left and the text wraps around it, so the paragraphs also fill the space under it */
.intro { display: flow-root; }
.intro figure { float: left; width: min(320px, 42%); margin: 6px clamp(24px, 4vw, 40px) 14px 0; }
.intro-text > * + * { margin-top: 1.1rem; }
.story .who { font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: var(--ink); }   /* the "About the Walk" heading */
.intro-body { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 1.1rem; max-width: 70ch; }
.join { font-weight: 600; color: var(--earth); font-size: 1.08em; }
/* Why she is walking: a note in her own hand - handwriting in a sketched box (page.js), and a
   hand-drawn tick drawn beside each reason as the note scrolls into view */
.why-note { position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin: 10px auto; padding: 14px 28px 12px 24px; font-family: "Gaegu", "Segoe Print", cursive; }   /* centred, as wide as its longest line */
.why-note > svg.sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.why-title { font-size: 1.5rem; line-height: 1.1; color: var(--muted); margin-bottom: 6px; }
.why-note ul { list-style: none; margin: 0; padding: 0; }
.why-note li { position: relative; padding-left: 32px; font-size: 1.35rem; line-height: 1.35; color: var(--fg); }
.why-note li svg.tick { position: absolute; left: 0; top: .12em; width: 24px; height: 24px; overflow: visible; }
.why-label { display: block; font-family: "Gaegu", "Segoe Print", cursive; font-size: 1.35rem; line-height: 1.1; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 700px) { .intro figure { float: none; width: auto; max-width: 420px; margin: 0 0 24px; } }

.poem em, .lede em { font-style: normal; }
.lede em { color: var(--fg); font-weight: 500; }   /* the Day 1 joining note, also highlighted by page.js */

/* The poem that closes the page: its lines come in one after another as it scrolls into view */
.poem { text-align: center; padding-bottom: clamp(28px, 4vw, 44px); }   /* the page ends soon after the poem, before the footer */
.poem-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.poem-by { margin-top: 6px; font-family: "Gaegu", "Segoe Print", cursive; font-size: 1.35rem; line-height: 1.1; color: var(--muted); }
/* a poem keeps its own line breaks: every line stays whole, and the size comes down on narrow screens so the
   longest line ("rests in his beauty on the water, and the great heron feeds.", 26.7em) still fits */
.poem .wrap { container-type: inline-size; }
.poem-text { position: relative; margin-top: 24px; font-family: "GFS Didot", "Didot", "Bodoni MT", Georgia, serif; font-size: min(clamp(1.15rem, 1rem + .7vw, 1.5rem), calc(100cqi / 27.4)); line-height: 1.55; color: var(--earth); max-width: 34em; margin-left: auto; margin-right: auto; }
.poem-text .line { display: block; white-space: nowrap; transition: opacity .7s ease, transform .7s ease; }
.js .poem-text:not(.in) .line { opacity: 0; transform: translateY(6px); }   /* until page.js fades them in */
.poem-text.in .line { opacity: 1; transform: none; }
/* phones: set as narrow books set a poem - left-aligned at a readable size, and a line too long
   for the screen turns over, continuing indented under itself */
@media (max-width: 599px) {
  .poem-text { text-align: left; font-size: min(1rem, calc(100cqi / 22)); }   /* 16px on a typical phone, a touch smaller on narrow ones: about three lines turn over either way */
  .poem-text .line { white-space: normal; padding-left: 1.5em; text-indent: -1.5em; }
}
@media (prefers-reduced-motion: reduce) { .poem-text .line { opacity: 1; transform: none; transition: none; } }

/* Route map */
.route-map { margin: 0; }
.route-map figcaption { text-align: center; }
.map-box {
  position: relative; height: clamp(440px, 70vh, 600px); border-radius: var(--radius); overflow: hidden;
  background: var(--soft); box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
@media (max-width: 599px) { .map-box { height: 420px; } }
/* if the map tiles are blocked, a picture of the whole route stands in for the map (page.js) */
.map-fallback { position: absolute; inset: 0; z-index: 900; width: 100%; height: 100%; object-fit: cover; object-position: 52% top; background: var(--soft); }
.tiles-off .leaflet-control-container, .tiles-off .info-btn { display: none; }   /* the day buttons stay: they switch between pictures of each day */
#map { position: absolute; inset: 0; }
.day-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.day-chips button {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font: 500 .92rem "Outfit", system-ui, sans-serif; color: var(--earth); background: var(--cream);
  transition: background .15s, color .15s;
}
.day-chips button:hover { background: color-mix(in srgb, var(--earth) 12%, var(--cream)); }
.day-chips button[aria-pressed="true"] { background: var(--earth); color: #fff; }
.day-chips button:focus-visible { outline: 2px solid var(--pin); outline-offset: 2px; }
/* Elevation profile along the bottom of the map: a cream strip with the sketched chart (map.js) */
.profile {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000; height: 96px;
  background: #F8F4EE; padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 2px;
  font-family: "Outfit", system-ui, sans-serif;
}
#elev { flex: 1; width: 100%; min-height: 0; display: block; cursor: crosshair; }
@media (max-width: 599px) { .profile { display: none; } }

/* Map buttons */
.ctl { display: flex; flex-direction: column; gap: 10px; }
.ctl-btn {
  all: unset; box-sizing: border-box; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #333; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.ctl-btn:hover { background: #f0f0f0; color: #000; }
.ctl-btn:focus-visible { outline: 2px solid var(--pin); outline-offset: 2px; }
.leaflet-container .ctl-btn img { width: 22px !important; height: 22px !important; max-width: none; display: block; }   /* Leaflet resets images inside the map */
.layer-panel, .info-panel {
  position: absolute; z-index: 1001; background: #fff; color: #222; border: 1px solid rgba(0,0,0,.08); border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1); font-size: 13px; line-height: 1.4; padding: 8px 12px;
}
.layer-panel { right: 52px; top: 10px; display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.layer-panel label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.info-btn { position: absolute; left: 10px; top: 10px; z-index: 1001; width: 26px; height: 26px; background: none; border: 0; box-shadow: none; opacity: .65; }
.info-btn:hover { background: none; opacity: 1; }
.info-panel { left: 44px; top: 10px; max-width: 240px; }
.info-panel b { display: block; font-weight: 600; font-size: 12px; }
.info-panel p { margin: 0 0 8px; }
.info-panel a { color: inherit; }
.info-panel .made { border-top: 1px solid #eee; padding-top: 8px; margin: 0; font-size: 11px; color: #666; }
.map-box:fullscreen { border-radius: 0; height: 100%; }

/* Map markers and controls */
.pin { width: 10px; height: 10px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.35); transition: transform .2s; }
/* Start and finish symbols on the map */
.endpoint { position: relative; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0,0,0,.35); transition: opacity .3s; }
/* Leaflet resets marker images to their natural size (width: auto); keep the badge icon at badge size */
.leaflet-container .leaflet-marker-pane .endpoint img { width: 100% !important; height: 100% !important; max-width: none; display: block; }
.endpoint span { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #fff; color: #1c231e; font: 700 9.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: nowrap; }
@media (max-width: 599px) { .endpoint { width: 28px; height: 28px; } .endpoint span { top: 33px; } }
.pin.hover { background: #fff; box-shadow: 0 0 0 3px var(--pin), 0 2px 6px rgba(0,0,0,.35); }
.leaflet-container { font-family: var(--sans); background: var(--soft); }
.leaflet-tooltip.town { background: rgba(30,30,30,.92); color: #fff; border: 0; border-radius: 6px; box-shadow: 0 3px 12px rgba(0,0,0,.35); font-size: 13px; font-weight: 500; padding: 6px 10px; }
.leaflet-tooltip.town::before { display: none; }
.pin.end { width: 12px; height: 12px; background: #fff; box-shadow: 0 0 0 3px var(--pin), 0 2px 6px rgba(0,0,0,.3); }   /* where a day finishes */
.leaflet-tooltip.town-label { background: rgba(255,255,255,.92); color: #1c231e; border: 0; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.2); font: 700 11.5px/1.3 "Outfit", system-ui, sans-serif; padding: 2px 8px; }
.leaflet-tooltip.town-label::before { display: none; }
@media (max-width: 599px) { .leaflet-tooltip.finish-label { display: none; } }   /* the Finish badge says it; the long name would run under the buttons */
/* a day's popup: date, route, km and stage times, with a link down to the day */
.day-popup .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.day-popup .leaflet-popup-content { margin: 12px 16px; font-family: "Outfit", system-ui, sans-serif; }
.day-pop { display: flex; flex-direction: column; gap: 2px; }
.day-pop-n { font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #2f5d46; }
.day-pop strong { font-size: 1rem; line-height: 1.25; color: #2F3542; }
.day-pop-km { font-size: .85rem; color: #6b736d; margin-bottom: 4px; }
.day-pop .stage-time { margin: 0; font-size: .9rem; color: #2f5d46; }
.day-pop a { margin-top: 8px; font-weight: 800; color: var(--pin) !important; }


.stage-time b { font-weight: inherit; margin: 0 .5em; color: var(--muted); }   /* the dot between the two stages' times */

/* Walk with us: the six days as the timetable - a card each, strung on a timeline drawn like the
   route on the map (orange ring pins on a dashed line). Opening a card shows its stages and photos. */
/* the "at your own risk" notice, in a hand-drawn grey box (page.js) */
.risk-note { position: relative; isolation: isolate; max-width: 40em; margin: clamp(32px, 4vw, 44px) auto 0; padding: 14px 18px; text-align: center; font-size: .92em; line-height: 1.55; color: var(--muted); }
.risk-note > svg.sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.risk-note .why-label { color: var(--fg); }
.risk-note em { font-style: normal; }
.days-title { font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; color: var(--ink); margin-bottom: 18px; }
.days-title span { display: block; margin-top: 4px; font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.days { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 30px; }
.day { position: relative; background: var(--cream); border-radius: var(--radius); scroll-margin-top: 20px; }
.day::before { content: ""; position: absolute; left: -26px; top: 40px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 3px var(--pin); z-index: 1; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.js .days:not(.in) .day::before { transform: scale(0); }
.day:first-child::before, .day:last-child::before { background: var(--pin); }
.day:not(:last-child)::after { content: ""; position: absolute; left: -22px; top: 56px; bottom: -40px; border-left: 2px dashed var(--pin); opacity: .55; transform-origin: top; transition: transform .45s ease-out; }
.js .days:not(.in) .day::after { transform: scaleY(0); }
/* each pin lands, then its dash runs down to the next: timed per day by --i */
.days.in .day::before { transition-delay: calc(var(--i) * .5s); }
.days.in .day::after { transition-delay: calc(var(--i) * .5s + .2s); }
@media (prefers-reduced-motion: reduce) { .day::before, .day::after { transition: none; } }
.day summary { list-style: none; border-radius: var(--radius); display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 22px 14px 14px; cursor: pointer; }
.day summary::-webkit-details-marker { display: none; }
.day-thumb { width: 112px; height: 84px; object-fit: cover; border-radius: calc(var(--radius) * .6); display: block; }
.day-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day-label { font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--earth); }
.day-title { font-weight: 800; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.2; color: var(--ink); }
.day-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: .9rem; color: var(--muted); }
/* in a card's summary the times run inline, so when they wrap the highlighter marks each line on its own */
.day-km { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.day-km::before { content: ""; flex: none; width: 36px; height: 36px; background: currentColor; --steps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg%3E%3Cpath d='M96.2 260.8 C95.9 258.5 94.6 253 94.5 249.5 C94.3 245.9 94.9 242.8 95.1 239.4 C95.3 235.9 95.8 232.3 95.7 228.7 C95.5 225.1 95.1 221.4 94.3 217.9 C93.6 214.4 92.2 211 91.1 207.7 C90 204.5 88.8 201.6 87.7 198.3 C86.5 195 85.1 191.6 84.2 188.1 C83.3 184.6 82.2 180.9 82.1 177.4 C82 173.9 82 169.9 83.7 167.1 C85.4 164.2 89.1 162 92.2 160.5 C95.4 159.1 99.2 158 102.5 158.2 C105.8 158.4 109.6 159.5 112 161.7 C114.3 164 115.7 168.2 116.7 171.7 C117.7 175.2 117.7 178.9 117.7 182.6 C117.8 186.2 117.4 189.9 117.1 193.4 C116.9 196.9 116.5 200.1 116.3 203.6 C116.1 207.2 115.8 210.9 116 214.7 C116.2 218.6 116.7 222.7 117.5 226.5 C118.2 230.2 119.5 234 120.7 237.4 C121.9 240.9 123.4 243.9 124.5 247.1 C125.7 250.3 127.8 253.5 127.7 256.7 C127.5 259.9 126.1 264.3 123.7 266.2 C121.3 268.2 116.7 268.6 113.4 268.4 C110.1 268.2 106.6 267.1 103.9 265.1 C101.1 263.1 98.8 259.6 96.9 256.4 C95 253.2 93.3 248.3 92.4 246 C91.5 243.6 91.9 243.2 91.5 242.1 C91.1 241 90.8 240.2 90.1 239.5 C89.5 238.8 88.5 238.1 87.6 237.8 C86.7 237.6 85.6 237.5 84.6 237.7 C83.7 237.9 82.7 238.4 82 239 C81.3 239.7 80.7 240.6 80.4 241.6 C80.1 242.5 80 242.3 80.2 244.5 C80.4 246.7 81.2 251.2 81.7 254.7 C82.2 258.3 82.4 262.4 83.3 265.8 C84.1 269.3 84.8 272.3 86.7 275.5 C88.5 278.6 91.2 282.4 94.4 284.6 C97.6 286.9 102 288.2 105.8 288.9 C109.5 289.6 113.2 289.3 116.7 288.9 C120.2 288.4 123.6 287.6 126.9 286.2 C130.2 284.8 133.6 283.2 136.4 280.7 C139.3 278.2 142.5 274.7 144.1 271.1 C145.8 267.6 146.3 263.1 146.4 259.4 C146.6 255.8 145.7 252.6 144.9 249.1 C144.1 245.7 142.6 242.3 141.6 238.8 C140.5 235.2 139.1 231.8 138.5 228.1 C137.8 224.4 137.4 220.3 137.5 216.6 C137.5 212.9 138.2 209.8 138.8 206.1 C139.4 202.4 140.4 198.2 140.9 194.4 C141.5 190.6 142.1 187.3 142.3 183.5 C142.5 179.7 142.5 175.2 142.2 171.5 C141.8 167.8 141.2 164.7 140.2 161.4 C139.1 158 137.8 154.6 135.9 151.4 C133.9 148.2 131.6 144.9 128.6 142.3 C125.7 139.6 122 137.1 118.4 135.5 C114.7 133.9 110.3 133.1 106.5 132.7 C102.7 132.4 99.3 132.9 95.5 133.5 C91.7 134.1 87.3 135.3 83.6 136.5 C80 137.8 76.9 139.1 73.8 141.2 C70.6 143.2 67.3 145.9 64.7 148.9 C62.2 151.9 60 155.6 58.5 159.2 C56.9 162.7 56 166.5 55.5 170.1 C54.9 173.7 54.9 176.9 55 180.7 C55.2 184.5 55.9 188.9 56.6 192.8 C57.4 196.6 58.5 200.2 59.5 203.7 C60.6 207.1 61.7 210 62.9 213.5 C64.1 216.9 65.3 220.7 66.7 224.2 C68 227.7 69.5 231.3 71.1 234.5 C72.6 237.7 74.2 240.3 75.8 243.4 C77.4 246.4 79.1 249.6 80.6 252.8 C82.2 256 84.2 260.5 85.1 262.5 C86 264.4 85.6 263.7 86 264.4 C86.4 265.1 86.9 266.1 87.5 266.7 C88.2 267.3 89.2 267.7 90.1 267.9 C90.9 268.1 92 268 92.8 267.7 C93.7 267.4 94.6 266.8 95.2 266.1 C95.7 265.5 96.2 264.5 96.4 263.6 C96.5 262.7 96.5 263.2 96.2 260.8 Z' fill='%2324503a'/%3E%3Cpath d='M118.2 112.9 C118.8 114.8 119.1 117.1 119 119.1 C118.9 121 118.3 123.1 117.4 124.8 C116.5 126.5 115.1 128 113.6 129 C112.1 130 110.2 130.6 108.4 130.8 C106.6 130.9 104.6 130.5 102.9 129.8 C101.2 129 99.4 127.8 98.1 126.3 C96.7 124.8 95.6 122.8 94.9 120.9 C94.2 119 93.9 116.7 94.1 114.7 C94.2 112.7 94.8 110.6 95.7 109 C96.6 107.3 98 105.8 99.5 104.8 C101 103.8 102.9 103.1 104.7 103 C106.4 102.9 108.5 103.2 110.2 104 C111.9 104.7 113.7 106 115 107.5 C116.4 109 117.5 110.9 118.2 112.9 Z' fill='%2324503a'/%3E%3Cpath d='M91.4 109.3 C91.8 110.6 91.9 112.2 91.7 113.5 C91.5 114.9 91 116.3 90.3 117.4 C89.6 118.4 88.6 119.4 87.6 120 C86.5 120.6 85.2 121 83.9 121 C82.7 121 81.4 120.7 80.2 120.1 C79.1 119.5 77.9 118.5 77.1 117.4 C76.3 116.4 75.6 115 75.2 113.6 C74.9 112.3 74.8 110.7 74.9 109.4 C75.1 108 75.6 106.6 76.3 105.6 C77 104.5 78 103.5 79.1 102.9 C80.2 102.3 81.5 101.9 82.7 101.9 C83.9 101.9 85.3 102.3 86.4 102.9 C87.6 103.4 88.7 104.4 89.6 105.5 C90.4 106.5 91.1 107.9 91.4 109.3 Z' fill='%2324503a'/%3E%3Cpath d='M75 116.2 C75.1 117.4 75 118.8 74.6 120 C74.3 121.2 73.6 122.3 72.8 123.2 C72 124 71 124.7 70 125.1 C68.9 125.5 67.7 125.6 66.6 125.4 C65.6 125.2 64.4 124.7 63.5 124 C62.6 123.3 61.7 122.3 61.2 121.2 C60.6 120.1 60.2 118.7 60.1 117.5 C60 116.2 60.1 114.8 60.5 113.6 C60.9 112.5 61.5 111.3 62.3 110.4 C63.1 109.6 64.1 108.9 65.2 108.5 C66.2 108.1 67.4 108 68.5 108.2 C69.6 108.4 70.7 108.9 71.6 109.6 C72.5 110.3 73.4 111.4 74 112.5 C74.5 113.6 74.9 114.9 75 116.2 Z' fill='%2324503a'/%3E%3Cpath d='M61.6 127.2 C61.5 128.3 61.2 129.5 60.8 130.5 C60.3 131.5 59.6 132.4 58.8 133.1 C58 133.7 57 134.2 56.1 134.4 C55.1 134.6 54.1 134.6 53.1 134.3 C52.2 134 51.3 133.4 50.6 132.7 C49.9 131.9 49.3 130.9 48.9 129.9 C48.5 128.9 48.4 127.7 48.4 126.5 C48.5 125.4 48.8 124.2 49.2 123.3 C49.7 122.3 50.4 121.4 51.2 120.7 C52 120.1 53 119.6 53.9 119.4 C54.9 119.2 55.9 119.2 56.9 119.5 C57.8 119.8 58.7 120.4 59.4 121.1 C60.1 121.9 60.8 122.9 61.1 123.9 C61.5 124.9 61.7 126.1 61.6 127.2 Z' fill='%2324503a'/%3E%3Cpath d='M52.7 142 C52.5 142.9 52 143.9 51.5 144.7 C50.9 145.5 50.1 146.2 49.4 146.6 C48.6 147.1 47.6 147.4 46.8 147.4 C45.9 147.4 45 147.2 44.2 146.8 C43.5 146.4 42.8 145.7 42.2 145 C41.7 144.3 41.4 143.3 41.2 142.3 C41 141.4 41.1 140.3 41.3 139.4 C41.5 138.4 42 137.4 42.5 136.6 C43.1 135.9 43.8 135.2 44.6 134.7 C45.4 134.3 46.3 134 47.2 134 C48.1 133.9 49 134.2 49.7 134.6 C50.5 135 51.2 135.6 51.7 136.4 C52.2 137.1 52.6 138.1 52.8 139 C52.9 139.9 52.9 141 52.7 142 Z' fill='%2324503a'/%3E%3Cpath d='M234.5 190.8 C235.4 188.7 236.9 184.2 238.2 180.9 C239.4 177.6 240.8 174.3 242.1 171.1 C243.4 167.9 244.7 165.1 245.9 161.8 C247.1 158.5 248.4 154.8 249.5 151.2 C250.7 147.6 251.7 143.7 252.7 140.2 C253.8 136.8 254.8 133.9 255.8 130.5 C256.8 127.1 257.9 123.5 258.6 119.7 C259.3 115.9 259.9 111.5 260.1 107.8 C260.2 104.1 260.1 101 259.5 97.5 C258.9 94 257.9 90.2 256.3 86.8 C254.6 83.4 252.3 79.8 249.7 77 C247.1 74.2 243.7 71.8 240.5 70 C237.3 68.2 234.2 67.2 230.6 66.2 C227 65.2 222.5 64.5 218.8 64.2 C215 63.9 211.6 63.8 208.1 64.5 C204.5 65.2 200.5 66.5 197.2 68.4 C194 70.2 190.9 72.9 188.5 75.6 C186.1 78.3 184.3 81.6 182.8 84.7 C181.3 87.7 180.4 90.6 179.6 94.2 C178.8 97.8 178.4 102.2 178.2 106.1 C178 109.9 178.4 113.7 178.6 117.3 C178.9 121 179.5 124.1 179.9 127.8 C180.3 131.4 180.9 135.6 181 139.1 C181.1 142.7 181.2 145.6 180.6 149.2 C180.1 152.7 178.8 156.6 177.6 160.3 C176.4 164 174.5 167.9 173.3 171.4 C172.2 174.9 171.1 177.5 170.7 181.2 C170.2 184.9 170.1 189.8 170.8 193.6 C171.4 197.3 172.8 200.7 174.7 203.6 C176.5 206.6 179 209.1 182.1 211.3 C185.2 213.5 189.4 215.6 193.1 216.8 C196.8 218.1 200.5 218.7 204.3 218.9 C208.1 219 212.1 219 216.1 217.9 C220 216.7 224.8 214.8 227.9 212.1 C231.1 209.3 233.4 205.3 235 201.6 C236.6 197.9 237 193.6 237.5 189.8 C238 186 237.9 181.9 238.1 178.7 C238.4 175.5 238.9 172.4 239 170.6 C239.1 168.7 239 168.4 238.7 167.5 C238.4 166.6 237.7 165.6 236.9 165 C236.2 164.4 235.1 163.9 234.2 163.7 C233.2 163.5 232 163.6 231.1 164 C230.2 164.3 229.2 165 228.6 165.7 C227.9 166.5 228.1 166.2 227.3 168.5 C226.5 170.8 225.3 176.4 223.7 179.6 C222.2 182.8 220.6 185.7 218 187.9 C215.4 190 211.4 192 208 192.3 C204.7 192.6 199.8 192.1 198.1 189.8 C196.4 187.6 197.3 182.6 197.8 178.8 C198.3 175 200.1 170.9 201 167 C201.8 163.2 202.6 159.5 202.9 155.6 C203.2 151.7 203.2 147.4 202.9 143.6 C202.6 139.7 201.8 136 201.2 132.5 C200.5 129 199.7 126 199 122.6 C198.3 119.1 197.4 115.1 197.1 111.6 C196.8 108.1 196.6 104.9 197.2 101.6 C197.7 98.3 198.5 94.5 200.5 91.8 C202.4 89.1 205.6 86.3 208.7 85.4 C211.9 84.5 216 85.7 219.3 86.5 C222.6 87.3 226.2 88.1 228.8 90.2 C231.4 92.2 233.7 95.6 234.8 98.9 C235.8 102.2 235.4 106.5 235.1 110 C234.9 113.6 234 116.5 233.1 119.9 C232.2 123.4 230.9 127.4 229.8 130.8 C228.7 134.3 227.6 137.3 226.7 140.7 C225.7 144.1 224.7 147.6 224.2 151.1 C223.7 154.6 223.8 158.3 223.8 161.8 C223.8 165.3 224.3 168.4 224.3 172 C224.3 175.6 224.1 181 223.8 183.5 C223.5 186 222.9 186 222.7 187.2 C222.5 188.3 222.4 189.4 222.6 190.4 C222.8 191.4 223.4 192.4 224.1 193.2 C224.8 193.9 225.8 194.6 226.8 194.9 C227.8 195.2 229 195.2 230 195 C231 194.8 232 194.2 232.8 193.5 C233.5 192.8 233.6 192.9 234.5 190.8 Z' fill='%2324503a'/%3E%3Cpath d='M220 50.3 C219.4 52.2 218.3 54.2 217.1 55.7 C215.8 57.2 214.2 58.5 212.5 59.3 C210.8 60.1 208.8 60.5 207.1 60.5 C205.3 60.4 203.5 59.8 202 58.9 C200.5 58 199.1 56.5 198.1 54.9 C197.2 53.3 196.5 51.3 196.3 49.4 C196.1 47.4 196.4 45.2 196.9 43.3 C197.5 41.4 198.6 39.4 199.8 37.9 C201.1 36.4 202.8 35.1 204.4 34.3 C206.1 33.5 208.1 33.1 209.8 33.1 C211.6 33.2 213.5 33.8 215 34.7 C216.5 35.6 217.9 37.1 218.8 38.7 C219.7 40.3 220.4 42.3 220.6 44.2 C220.8 46.2 220.6 48.4 220 50.3 Z' fill='%2324503a'/%3E%3Cpath d='M239 42.5 C238.7 43.9 238.1 45.3 237.3 46.3 C236.5 47.4 235.5 48.4 234.4 49 C233.3 49.6 231.9 50 230.7 50 C229.5 50.1 228.2 49.8 227.2 49.2 C226.1 48.7 225.1 47.7 224.4 46.7 C223.6 45.7 223.1 44.3 222.9 43 C222.6 41.7 222.7 40.2 223 38.8 C223.3 37.5 223.9 36.1 224.7 35.1 C225.5 34 226.6 33 227.7 32.4 C228.8 31.8 230.1 31.4 231.3 31.3 C232.5 31.3 233.8 31.6 234.9 32.2 C235.9 32.7 236.9 33.6 237.7 34.7 C238.4 35.7 238.9 37.1 239.2 38.4 C239.4 39.7 239.3 41.2 239 42.5 Z' fill='%2324503a'/%3E%3Cpath d='M254 45.8 C253.9 47 253.6 48.4 253.1 49.4 C252.5 50.5 251.7 51.6 250.9 52.3 C250 53 248.9 53.6 247.8 53.8 C246.8 54 245.6 53.9 244.6 53.6 C243.5 53.3 242.5 52.6 241.7 51.8 C240.9 51 240.2 49.9 239.8 48.8 C239.4 47.6 239.2 46.3 239.3 45 C239.4 43.8 239.7 42.4 240.2 41.4 C240.7 40.3 241.5 39.2 242.4 38.5 C243.3 37.8 244.4 37.2 245.4 37 C246.5 36.8 247.7 36.9 248.7 37.2 C249.7 37.5 250.8 38.2 251.6 39 C252.4 39.8 253 40.9 253.4 42.1 C253.8 43.2 254 44.6 254 45.8 Z' fill='%2324503a'/%3E%3Cpath d='M265.7 54.3 C265.8 55.4 265.7 56.6 265.4 57.6 C265 58.6 264.5 59.6 263.8 60.3 C263.1 61.1 262.2 61.7 261.4 62 C260.5 62.3 259.4 62.4 258.5 62.3 C257.6 62.1 256.6 61.6 255.8 61 C255 60.4 254.2 59.5 253.8 58.6 C253.3 57.7 252.9 56.5 252.8 55.4 C252.7 54.3 252.9 53.1 253.2 52.1 C253.5 51.1 254.1 50.1 254.8 49.4 C255.4 48.6 256.3 48 257.2 47.7 C258.1 47.4 259.1 47.3 260.1 47.4 C261 47.6 262 48 262.8 48.7 C263.6 49.3 264.3 50.2 264.8 51.1 C265.3 52 265.6 53.2 265.7 54.3 Z' fill='%2324503a'/%3E%3Cpath d='M273.1 66.6 C273.4 67.5 273.5 68.6 273.3 69.5 C273.2 70.4 272.9 71.4 272.4 72.1 C271.9 72.9 271.2 73.6 270.5 74 C269.8 74.4 268.9 74.6 268 74.6 C267.2 74.6 266.3 74.4 265.5 74 C264.7 73.6 263.9 72.9 263.4 72.2 C262.8 71.4 262.3 70.5 262.1 69.6 C261.8 68.6 261.7 67.6 261.9 66.6 C262 65.7 262.3 64.7 262.8 64 C263.3 63.3 264 62.6 264.7 62.2 C265.4 61.8 266.3 61.5 267.2 61.5 C268 61.5 268.9 61.7 269.7 62.2 C270.5 62.6 271.3 63.2 271.8 64 C272.4 64.7 272.9 65.7 273.1 66.6 Z' fill='%2324503a'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: var(--steps) center / contain no-repeat; mask: var(--steps) center / contain no-repeat; }   /* hand-drawn footprints */
.day-meta .stage-time { display: inline; margin: 0; font-size: .9rem; }
.day-meta .stage-time::before { display: inline-block; vertical-align: -9px; margin-right: 6px; }
.day-meta .stage-time b { white-space: nowrap; }
/* the open/close control: a small hand-drawn box (page.js) with "View details" and an arrow; orange on hover.
   Open, it reads "Close" and the arrow points up. Phones keep just the arrow in its box. */
.day-more { position: relative; isolation: isolate; flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; color: var(--earth); transition: color .2s; }
.stage p.join-note > svg.sketch path, .day-more > svg.sketch path { stroke-linejoin: round; stroke-linecap: round; }   /* clean corners on the small frames */
.day-more > svg.sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
/* both labels share one grid cell, so the box keeps the width of the longer and they crossfade */
.day-more-text { display: grid; font-family: "Gaegu", "Segoe Print", cursive; font-size: 1.15rem; line-height: 1; white-space: nowrap; }
.day-more-text::before, .day-more-text::after { grid-area: 1 / 1; text-align: center; transition: opacity .25s ease; }
.day-more-text::before { content: attr(data-open); }
.day-more-text::after { content: attr(data-close); opacity: 0; }
.day[open] .day-more-text::before { opacity: 0; }
.day[open] .day-more-text::after { opacity: 1; }
.day-more .arrow { flex: none; width: 30px; height: 30px; background: currentColor; --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg%3E%3Cpath d='M171 284.2 C171.7 281.5 172.4 277.6 173.1 274.2 C173.7 270.9 174.7 267.6 175 264.3 C175.2 260.9 174.9 257.6 174.8 254.3 C174.7 250.9 174.5 247.6 174.3 244.3 C174.2 240.9 174 237.9 173.9 234.2 C173.8 230.6 173.7 226.3 173.7 222.3 C173.7 218.3 173.9 214 173.9 210.3 C174 206.7 174.1 203.7 174.2 200.3 C174.2 197 174.3 193.7 174.2 190.3 C174.2 187 174.1 183.7 173.9 180.3 C173.8 177 173.5 173.6 173.3 170.3 C173 167 172.7 163.6 172.4 160.3 C172.2 156.9 172 153.5 171.8 150.2 C171.6 146.8 171.4 143.4 171.4 140.1 C171.3 136.7 171.4 133.4 171.6 130.1 C171.8 126.8 172.1 123.4 172.4 120.1 C172.7 116.8 173.1 113.4 173.5 110.1 C173.9 106.8 174.4 103.4 174.7 100.1 C175.1 96.8 175.5 93.4 175.7 90.1 C175.8 86.8 176.2 83.5 175.8 80.1 C175.5 76.8 174.2 72.8 173.6 70.1 C172.9 67.4 173 65.6 171.9 63.8 C170.9 62 169.2 60.2 167.4 59.2 C165.5 58.1 163.2 57.5 161.1 57.5 C159 57.4 156.6 58.1 154.8 59.1 C153 60.1 151.2 61.9 150.2 63.7 C149.1 65.5 149.1 67.2 148.4 69.9 C147.7 72.7 146.4 76.6 146 79.9 C145.6 83.3 145.9 86.6 146.1 89.9 C146.2 93.3 146.6 96.6 146.9 99.9 C147.2 103.3 147.6 106.6 148 109.9 C148.3 113.3 148.7 116.6 149 120 C149.3 123.3 149.5 126.6 149.7 130 C149.8 133.3 149.9 136.3 149.7 140 C149.6 143.6 149.4 147.9 149 151.8 C148.7 155.8 148.1 160.1 147.6 163.8 C147.2 167.4 146.8 170.4 146.4 173.7 C146 177.1 145.7 180.4 145.4 183.7 C145.2 187 145 190.4 144.9 193.7 C144.7 197 144.7 200.4 144.6 203.7 C144.5 207 144.5 210.3 144.4 213.7 C144.3 217 144.3 220.4 144.1 223.8 C144 227.1 143.8 230.4 143.6 233.8 C143.4 237.1 143.2 240.4 142.9 243.8 C142.7 247.1 142.4 250.4 142.2 253.7 C141.9 257.1 141.5 260.4 141.7 263.7 C141.8 267.1 142.7 270.4 143.2 273.8 C143.8 277.1 144.4 281 145 283.8 C145.5 286.6 145.6 288.4 146.6 290.3 C147.7 292.2 149.4 294.1 151.3 295.2 C153.2 296.3 155.6 297 157.8 297 C160 297.1 162.4 296.4 164.3 295.4 C166.2 294.3 168.1 292.6 169.2 290.7 C170.3 288.8 170.4 286.9 171 284.2 Z' fill='%2324503a'/%3E%3Cpath d='M91.5 138.9 C93.7 137.2 96.3 134.3 98.8 132.1 C101.4 129.9 104.2 128 106.6 125.7 C109 123.4 111.2 120.8 113.4 118.4 C115.6 115.9 117.8 113.3 120 110.9 C122.3 108.4 124.6 106 126.8 103.5 C129.1 101.1 131.4 98.7 133.7 96.3 C136 93.8 138.2 91.4 140.5 88.9 C142.7 86.4 144.7 84.1 147 81.3 C149.3 78.5 152.1 74.9 154.4 72.1 C156.8 69.3 158.7 64.7 161.3 64.6 C163.9 64.5 167.5 68.8 170.3 71.5 C173.1 74.1 175.7 77.8 178 80.6 C180.3 83.5 182.1 85.9 184.1 88.6 C186.2 91.3 188.2 94 190.2 96.6 C192.3 99.2 194.4 101.8 196.5 104.4 C198.7 107 200.9 109.5 203.1 112 C205.3 114.4 207.5 117 210 119.2 C212.4 121.5 215.2 123.5 217.9 125.5 C220.6 127.5 224 129.7 226.2 131.4 C228.3 133 229 134.2 230.7 135.4 C232.3 136.6 234 138 235.9 138.6 C237.8 139.1 240.1 139.2 242.1 138.7 C244 138.2 246 137.1 247.4 135.7 C248.9 134.3 250 132.4 250.6 130.5 C251.1 128.6 251.2 126.2 250.7 124.3 C250.2 122.4 249.3 121.2 247.7 118.9 C246.2 116.7 243.6 113.7 241.6 110.9 C239.7 108.2 238.1 105.1 236.1 102.4 C234.1 99.7 231.8 97.2 229.6 94.8 C227.3 92.3 224.9 90 222.5 87.8 C220 85.5 217.6 83.2 215 81 C212.5 78.8 209.9 76.7 207.4 74.5 C204.8 72.4 202.2 70.3 199.6 68.1 C197 66 194.5 63.9 191.9 61.6 C189.4 59.4 187.3 57.2 184.5 54.7 C181.6 52.1 178.4 48.5 174.7 46.4 C171 44.3 166 42.5 162.2 42 C158.4 41.5 155.4 42.1 151.8 43.3 C148.3 44.5 144.3 47 141.1 49.3 C137.8 51.5 135.1 54.3 132.5 56.7 C129.8 59.1 127.6 61.2 125.1 63.5 C122.7 65.8 120.4 68.2 118 70.6 C115.7 72.9 113.4 75.4 111.1 77.8 C108.9 80.2 106.6 82.7 104.3 85.1 C102 87.5 99.7 89.9 97.4 92.3 C95 94.7 92.6 96.9 90.3 99.3 C88 101.7 85.7 104.2 83.6 106.8 C81.5 109.4 79.5 112.6 77.7 114.9 C75.8 117.3 73.9 119.1 72.5 121.1 C71.1 123.1 69.8 124.9 69.3 127 C68.9 129.1 68.9 131.7 69.6 133.7 C70.2 135.8 71.5 138 73.1 139.5 C74.7 141 76.9 142.2 79 142.7 C81.1 143.1 83.7 143.1 85.7 142.4 C87.8 141.8 89.3 140.6 91.5 138.9 Z' fill='%2324503a'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transform: rotate(180deg); transition: transform .32s cubic-bezier(.4, 0, .2, 1); }   /* hand-drawn arrow: down when closed */
.day[open] .day-more .arrow { transform: rotate(0); }
.day summary:hover .day-more { color: var(--pin); }
@media (max-width: 560px) { .day-more-text { display: none; } .day-more { padding: 7px 9px; } }
.day-body { padding: 0 22px 24px; overflow: hidden; }   /* its height is animated open and closed by page.js */
.day-body .gallery { margin-top: 20px; }
@media (max-width: 560px) {
  .day summary { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 14px 14px 18px; }
  .day-thumb { display: none; }   /* phones: no room beside the text; the photos are inside the card */
  .day-meta { flex-direction: column; align-items: flex-start; gap: 2px; }   /* phones: km, then the times on their own line */
  .days { padding-left: 24px; }
  .day::before { left: -22px; }
  .day:not(:last-child)::after { left: -18px; }
  .day-body { padding: 0 16px 20px; }
}
/* An open day: its stages as rows - stage number and time on the left, the route and notes on the right */
.stages { display: flex; flex-direction: column; margin-top: 4px; position: relative; }
.stages > svg.sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* hand-drawn dividers, drawn by rough.js */
.sketch-top > svg.sketch { position: absolute; left: 0; top: 0; width: 100%; height: 6px; overflow: visible; pointer-events: none; }
.stage { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); grid-template-areas: "n name" "t text" ". note"; column-gap: 24px; align-content: start; padding: 18px 0; }
.stage-n { grid-area: n; display: block; font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--earth); font-variant-numeric: tabular-nums; }
.stage strong { grid-area: name; display: block; font-weight: 700; font-size: 1.08em; line-height: 1.35; }
.stage-time { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 500; color: var(--earth); font-variant-numeric: tabular-nums; }
.stage > .stage-time { grid-area: t; font-size: .92rem; }
.stage-time::before { content: ""; flex: none; width: 30px; height: 30px; background: currentColor; --clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg%3E%3Cpath d='M90.7 69.4 C92.8 68.2 97.1 65.2 100.5 63.4 C103.9 61.7 107.4 60.3 110.9 59 C114.5 57.8 118.1 56.8 121.8 55.9 C125.4 55.1 129.2 54.5 132.8 54.1 C136.5 53.7 140.2 53.5 143.9 53.4 C147.6 53.3 151.2 53.4 154.8 53.6 C158.5 53.7 162.1 54.1 165.6 54.5 C169.2 54.9 172.7 55.4 176.3 55.9 C179.8 56.5 183.3 57.1 186.8 58 C190.2 58.8 193.7 59.8 197 61 C200.4 62.1 203.7 63.5 207 64.9 C210.2 66.4 213.4 68 216.5 69.8 C219.5 71.5 222.6 73.5 225.5 75.5 C228.4 77.6 231.2 79.8 233.9 82.1 C236.6 84.4 239.2 86.8 241.6 89.4 C244.1 91.9 246.4 94.6 248.6 97.4 C250.8 100.2 252.9 103.1 254.8 106.1 C256.7 109.1 258.5 112.1 260.1 115.3 C261.8 118.5 263.2 121.7 264.5 125 C265.8 128.3 267 131.7 267.9 135.1 C268.9 138.6 269.7 142.1 270.3 145.6 C270.9 149.1 271.4 152.6 271.6 156.2 C271.9 159.8 272 163.4 271.9 166.9 C271.7 170.5 271.5 174.1 271 177.7 C270.5 181.2 269.8 184.8 269 188.3 C268.1 191.8 267.1 195.3 265.8 198.7 C264.6 202.1 263.2 205.5 261.7 208.7 C260.1 212 258.3 215.2 256.4 218.3 C254.5 221.4 252.4 224.4 250.2 227.3 C248 230.2 245.6 232.9 243.1 235.6 C240.5 238.2 237.9 240.7 235.1 243.1 C232.3 245.5 229.4 247.7 226.4 249.8 C223.4 251.9 220.3 253.8 217 255.6 C213.8 257.3 210.5 258.9 207.2 260.4 C203.8 261.8 200.4 263 196.9 264.1 C193.4 265.2 189.8 266.1 186.3 266.9 C182.7 267.6 179.1 268.2 175.4 268.5 C171.8 268.9 168.2 269.1 164.6 269.1 C160.9 269.2 157.3 269 153.7 268.7 C150.1 268.4 146.5 267.9 142.9 267.3 C139.4 266.6 135.9 265.8 132.4 264.8 C128.9 263.8 125.5 262.7 122.2 261.4 C118.8 260.1 115.6 258.6 112.4 257 C109.2 255.4 106.1 253.7 103.1 251.8 C100 249.9 97.1 247.9 94.3 245.8 C91.5 243.6 88.8 241.3 86.2 238.9 C83.6 236.6 81.1 234 78.7 231.4 C76.4 228.8 74.2 226.1 72.1 223.3 C70 220.4 68.1 217.5 66.3 214.5 C64.5 211.5 62.8 208.5 61.3 205.3 C59.8 202.2 58.5 198.9 57.3 195.7 C56.1 192.4 55.1 189 54.2 185.7 C53.4 182.3 52.7 178.9 52.2 175.4 C51.7 172 51.4 168.5 51.2 165.1 C51 161.6 51.1 158.1 51.3 154.6 C51.5 151.1 51.8 147.7 52.4 144.2 C52.9 140.8 53.7 137.4 54.6 134 C55.5 130.6 56.6 127.3 57.8 124 C59.1 120.8 60.5 117.6 62.1 114.5 C63.6 111.3 65.4 108.3 67.3 105.3 C69.1 102.4 71.2 99.5 73.3 96.7 C75.4 93.9 77.6 91.1 79.8 88.3 C82.1 85.6 84.4 82.9 86.9 80.3 C89.5 77.6 92.4 74.8 95.2 72.3 C98 69.9 100.8 67.6 103.7 65.4 C106.7 63.3 109.9 61.2 113.1 59.4 C116.4 57.5 119.8 55.8 123.3 54.4 C126.7 53 130.9 51.6 134 50.8 C137 49.9 139.8 49.7 141.6 49.2 C143.4 48.7 143.9 48.5 144.8 47.7 C145.6 47 146.4 45.9 146.8 44.8 C147.2 43.8 147.3 42.4 147.1 41.3 C146.9 40.2 146.3 39 145.6 38.1 C144.8 37.2 143.7 36.5 142.7 36.1 C141.6 35.7 141.4 35.5 139.2 35.8 C136.9 36 132.4 36.9 128.9 37.6 C125.5 38.3 122 39 118.6 39.9 C115.1 40.7 111.7 41.6 108.3 42.7 C104.9 43.7 101.5 44.8 98.1 46.1 C94.7 47.4 91.4 48.8 88.1 50.4 C84.7 52 81.1 53.9 77.8 55.8 C74.6 57.8 71.5 59.7 68.6 61.9 C65.6 64.1 62.6 66.4 59.9 68.9 C57.1 71.4 54.4 74 52 76.8 C49.5 79.6 47.2 82.6 45 85.6 C42.9 88.7 40.9 91.8 39 95.1 C37.1 98.3 35.4 101.6 33.7 105 C32.1 108.4 30.7 111.9 29.3 115.4 C28 118.9 26.8 122.5 25.8 126.1 C24.8 129.7 23.9 133.4 23.2 137 C22.5 140.7 22 144.5 21.6 148.2 C21.2 152 21 155.7 20.9 159.5 C20.9 163.3 21 167 21.2 170.8 C21.5 174.5 21.9 178.3 22.5 182 C23.1 185.7 23.9 189.4 24.8 193.1 C25.7 196.7 26.8 200.3 28 203.9 C29.3 207.4 30.6 211 32.2 214.4 C33.7 217.8 35.4 221.2 37.2 224.5 C39.1 227.7 41 231 43.1 234.1 C45.2 237.2 47.5 240.2 49.8 243.1 C52.2 246 54.7 248.8 57.3 251.5 C59.8 254.2 62.6 256.8 65.4 259.2 C68.2 261.7 71.1 264 74.1 266.2 C77.1 268.4 80.1 270.5 83.3 272.5 C86.5 274.4 89.7 276.2 93 277.9 C96.3 279.6 99.7 281.1 103.1 282.5 C106.5 283.9 109.9 285.2 113.5 286.3 C117 287.4 120.5 288.4 124.1 289.2 C127.7 290.1 131.3 290.8 134.9 291.3 C138.5 291.9 142.2 292.3 145.8 292.6 C149.4 292.8 153.1 293 156.7 292.9 C160.4 292.9 164 292.8 167.7 292.5 C171.3 292.2 174.9 291.8 178.5 291.2 C182.1 290.6 185.6 289.9 189.2 289.1 C192.7 288.3 196.2 287.3 199.6 286.2 C203.1 285.1 206.5 283.9 209.9 282.5 C213.2 281.2 216.5 279.7 219.8 278.1 C223 276.5 226.2 274.8 229.3 272.9 C232.4 271.1 235.4 269.1 238.4 267 C241.4 265 244.2 262.8 247 260.5 C249.8 258.2 252.5 255.8 255.1 253.3 C257.7 250.7 260.3 248.1 262.7 245.4 C265.1 242.7 267.4 239.9 269.5 237 C271.7 234.1 273.8 231.1 275.7 228 C277.7 225 279.5 221.8 281.2 218.6 C282.9 215.4 284.4 212.1 285.9 208.7 C287.3 205.3 288.6 201.9 289.7 198.4 C290.8 195 291.8 191.4 292.7 187.9 C293.5 184.3 294.2 180.7 294.8 177.1 C295.3 173.4 295.7 169.8 295.9 166.1 C296.1 162.4 296.2 158.8 296.1 155.1 C296 151.4 295.8 147.7 295.3 144 C294.9 140.4 294.4 136.7 293.6 133.1 C292.9 129.5 292 125.9 291 122.3 C289.9 118.8 288.7 115.3 287.4 111.8 C286 108.4 284.5 105 282.9 101.7 C281.2 98.3 279.4 95.1 277.5 91.9 C275.6 88.8 273.5 85.7 271.3 82.7 C269.2 79.7 266.8 76.8 264.4 74 C262 71.2 259.4 68.5 256.8 65.9 C254.1 63.3 251.3 60.9 248.5 58.5 C245.6 56.2 242.6 53.9 239.6 51.8 C236.5 49.7 233.4 47.7 230.2 45.9 C227 44 223.7 42.3 220.4 40.7 C217 39.2 213.6 37.7 210.2 36.4 C206.7 35.1 203.2 33.9 199.7 32.9 C196.1 31.8 192.5 30.9 188.9 30.2 C185.3 29.4 181.6 28.8 178 28.4 C174.3 28 170.6 27.8 166.9 27.8 C163.3 27.8 159.6 28.1 155.9 28.4 C152.3 28.8 148.6 29.4 145.1 30.1 C141.5 30.8 137.9 31.7 134.5 32.8 C131 33.8 127.6 35 124.2 36.2 C120.8 37.5 117.5 38.9 114.3 40.4 C111.1 41.9 107.9 43.6 104.8 45.2 C101.7 46.9 98.6 48.7 95.6 50.6 C92.6 52.4 88.8 54.9 86.8 56.2 C84.7 57.6 84.3 57.7 83.4 58.5 C82.5 59.4 81.6 60.1 81.2 61.1 C80.7 62.1 80.4 63.3 80.5 64.4 C80.6 65.5 81 66.7 81.6 67.6 C82.2 68.5 83.2 69.4 84.1 69.8 C85.1 70.3 86.4 70.6 87.5 70.5 C88.5 70.4 88.5 70.6 90.7 69.4 Z' fill='%2324503a'/%3E%3Cpath d='M171.5 161.2 C172.2 158.6 173.5 154.6 173.8 151.2 C174.1 147.9 173.3 144.5 173.2 141.2 C173 137.9 172.8 134.9 172.7 131.2 C172.5 127.5 172.8 122.9 172.4 119.2 C172 115.5 170.9 112.8 170.2 109.2 C169.5 105.5 168.6 101.3 168.3 97.4 C168.1 93.4 168.7 88 168.7 85.5 C168.6 82.9 168.5 83 168 82 C167.5 81 166.6 80 165.7 79.4 C164.7 78.8 163.5 78.4 162.4 78.3 C161.2 78.2 159.9 78.5 158.9 79 C157.9 79.5 156.9 80.4 156.3 81.3 C155.7 82.2 155.5 82.4 155.2 84.6 C154.9 86.8 154.7 91.2 154.3 94.6 C153.9 98 153.4 101.5 152.6 104.8 C151.9 108.2 150.6 111.5 149.9 114.8 C149.2 118.2 148.6 121.5 148.4 124.8 C148.1 128.1 148.4 131.5 148.2 134.8 C147.9 138.1 147.1 141.5 146.9 144.8 C146.7 148.1 146.7 152.1 147 154.8 C147.3 157.5 148 158.8 148.5 160.8 C149 162.8 149 164.9 149.9 166.6 C150.9 168.3 152.4 169.9 154.1 170.9 C155.7 171.9 157.9 172.5 159.8 172.5 C161.7 172.5 163.9 172 165.6 171.1 C167.3 170.1 168.9 168.6 169.9 166.9 C170.9 165.3 170.8 163.8 171.5 161.2 Z' fill='%2324503a'/%3E%3Cpath d='M154.2 171.5 C156.2 173.4 159.1 176.5 161.9 178.2 C164.8 180 168 180.4 171.4 181.8 C174.8 183.2 178.7 185.7 182.2 186.9 C185.8 188.1 189.4 187.9 192.8 188.7 C196.2 189.6 200.3 191.3 202.5 192.2 C204.7 193 204.9 193.5 206.1 193.9 C207.3 194.3 208.5 194.7 209.7 194.7 C210.8 194.6 212.2 194.1 213.1 193.5 C214.1 192.9 215 191.8 215.6 190.8 C216.1 189.7 216.4 188.4 216.3 187.2 C216.2 186 215.8 184.7 215.1 183.7 C214.5 182.8 214.6 182.8 212.4 181.3 C210.2 179.9 205.1 177.5 202.2 175.2 C199.4 172.9 197.8 169.8 195.3 167.5 C192.8 165.2 189.9 163.3 187.2 161.4 C184.5 159.5 181.7 157.6 178.8 155.9 C175.9 154.2 172.2 152 170 151.1 C167.9 150.2 167.5 150.8 165.8 150.5 C164.1 150.1 161.8 149 159.8 149 C157.8 149 155.5 149.7 153.8 150.7 C152.1 151.8 150.4 153.5 149.5 155.2 C148.5 157 148 159.2 148 161.2 C148 163.2 148.7 165.5 149.7 167.2 C150.8 168.9 152.2 169.7 154.2 171.5 Z' fill='%2324503a'/%3E%3Cpath d='M178 161 C178 163.5 177.3 166.3 176.2 168.6 C175.1 170.9 173.3 173.1 171.2 174.7 C169.2 176.3 166.5 177.5 164 178.1 C161.5 178.6 158.5 178.6 156 178.1 C153.5 177.5 150.8 176.3 148.8 174.7 C146.7 173.1 144.9 170.9 143.8 168.6 C142.7 166.3 142 163.5 142 161 C142 158.5 142.7 155.7 143.8 153.4 C144.9 151.1 146.7 148.9 148.8 147.3 C150.8 145.7 153.5 144.5 156 143.9 C158.5 143.4 161.5 143.4 164 143.9 C166.5 144.5 169.2 145.7 171.2 147.3 C173.3 148.9 175.1 151.1 176.2 153.4 C177.3 155.7 178 158.5 178 161 Z' fill='%2324503a'/%3E%3Cpath d='M167.6 83 C167.9 80.7 168.2 75.3 168.1 73 C168 70.7 167.7 70.1 167 68.9 C166.3 67.8 165.2 66.7 164.1 66 C162.9 65.3 161.4 64.9 160 64.9 C158.6 64.9 157.1 65.3 155.9 66 C154.8 66.7 153.7 67.8 153 68.9 C152.3 70.1 152 70.7 151.9 73 C151.8 75.3 152.1 80.7 152.4 83 C152.7 85.3 152.8 85.7 153.4 86.8 C154.1 87.9 155.1 88.9 156.2 89.6 C157.3 90.2 158.7 90.6 160 90.6 C161.3 90.6 162.7 90.2 163.8 89.6 C164.9 88.9 165.9 87.9 166.6 86.8 C167.2 85.7 167.3 85.3 167.6 83 Z' fill='%2324503a'/%3E%3Cpath d='M240 168.6 C242.3 168.7 248 168.1 250 168.2 C252 168.3 251 169.1 252 169.1 C253 169.1 254.9 168.7 256.1 168 C257.2 167.3 258.3 166.2 259 165.1 C259.7 163.9 260.1 162.4 260.1 161 C260.1 159.6 259.7 158.1 259 156.9 C258.3 155.8 257.2 154.7 256.1 154 C254.9 153.3 254.3 153.4 252 152.9 C249.7 152.3 244 150.6 242 150.7 C240 150.8 241 152.8 240 153.4 C239 154 237.3 153.8 236.2 154.4 C235.1 155.1 234.1 156.1 233.4 157.2 C232.8 158.3 232.4 159.7 232.4 161 C232.4 162.3 232.8 163.7 233.4 164.8 C234.1 165.9 235.1 166.9 236.2 167.6 C237.3 168.2 237.7 168.5 240 168.6 Z' fill='%2324503a'/%3E%3Cpath d='M152.4 239 C152.1 241.3 151.8 246.7 151.9 249 C152 251.3 152.3 251.9 153 253.1 C153.7 254.2 154.8 255.3 155.9 256 C157.1 256.7 158.6 257.1 160 257.1 C161.4 257.1 162.9 256.7 164.1 256 C165.2 255.3 166.3 254.2 167 253.1 C167.7 251.9 168 251.3 168.1 249 C168.2 246.7 167.9 241.3 167.6 239 C167.3 236.7 167.2 236.3 166.6 235.2 C165.9 234.1 164.9 233.1 163.8 232.4 C162.7 231.8 161.3 231.4 160 231.4 C158.7 231.4 157.3 231.8 156.2 232.4 C155.1 233.1 154.1 234.1 153.4 235.2 C152.8 236.3 152.7 236.7 152.4 239 Z' fill='%2324503a'/%3E%3Cpath d='M80 153.4 C77.7 153.3 72 153.9 70 153.8 C68 153.7 69 152.9 68 152.9 C67 152.9 65.1 153.3 63.9 154 C62.8 154.7 61.7 155.8 61 156.9 C60.3 158.1 59.9 159.6 59.9 161 C59.9 162.4 60.3 163.9 61 165.1 C61.7 166.2 62.8 167.3 63.9 168 C65.1 168.7 65.7 168.6 68 169.1 C70.3 169.7 76 171.4 78 171.3 C80 171.2 79 169.2 80 168.6 C81 168 82.7 168.2 83.8 167.6 C84.9 166.9 85.9 165.9 86.6 164.8 C87.2 163.7 87.6 162.3 87.6 161 C87.6 159.7 87.2 158.3 86.6 157.2 C85.9 156.1 84.9 155.1 83.8 154.4 C82.7 153.8 82.3 153.5 80 153.4 Z' fill='%2324503a'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask: var(--clock) center / contain no-repeat; mask: var(--clock) center / contain no-repeat; }   /* inline, as file:// pages cannot load a mask from a file */
.stage p { grid-area: text; margin: 4px 0 0; font-size: .95em; line-height: 1.6; color: var(--muted); }
/* who can join a stage: a soft tinted note, green where you can join, peach where you can't */
.stage p.join-note { grid-area: note; margin-top: 12px; padding: 10px 14px 10px 36px; position: relative; isolation: isolate; font-size: .92em; line-height: 1.5; color: var(--fg); }
.stage p.join-note > svg.sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }   /* the hand-drawn box, drawn by page.js */
.stage p.join-note > svg.dot { position: absolute; left: 12px; top: .9em; width: 14px; height: 14px; overflow: visible; }   /* a sketched, hatched dot in the note's colour (page.js) */
@media (max-width: 560px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "name" "t" "text" "note"; padding: 14px 0; }
  .stage > .stage-time { margin-top: 2px; }
}
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 520px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
figcaption a { color: inherit; }

/* The destination */
.divider { display: block; width: min(100%, 280px); height: 14px; margin: 0 auto 30px; position: relative; }   /* Rough Notation paints it with an orange marker stroke */
.march { text-align: center; }
.march .wrap { position: relative; }   /* the orange marker stroke is drawn inside it */
.march .kicker { justify-content: center; }
.march .lede { margin-left: auto; margin-right: auto; }
.march-when { margin-top: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--earth); }
.finale-logo { display: inline-block; margin-top: 28px; }   /* the march organisers' logo, links to their site */
.finale-logo img { display: block; width: 140px; height: auto; }   /* about the size of the source file (146px), so it stays sharp */
.march .more { margin-top: 14px; }
.march .more a { color: var(--earth); font-weight: 600; }

/* Closing invitation, in a cream box */
.invite-box { max-width: 40em; margin: 0 auto; padding: clamp(28px, 4vw, 44px); background: var(--cream); border-radius: var(--radius); text-align: center; }
.invite .portrait { display: block; width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; }
.invite h2 { font-size: clamp(28px, 1.6rem + 1vw, 40px); }
.invite .lede { margin-left: auto; margin-right: auto; max-width: 30em; }
.invite .contact { margin-top: 14px; font-size: 1.05em; color: var(--muted); max-width: 30em; margin-left: auto; margin-right: auto; }
.invite .contact a { color: var(--earth); font-weight: 600; user-select: all; }

footer { position: relative; margin-top: 0; padding: 2rem var(--gutter) 3rem; font-size: .8rem; color: var(--muted); }
footer .inner { max-width: var(--col); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; text-align: center; }
footer a { color: inherit; text-underline-offset: 3px; }
.foot-logo { align-self: center; display: block; }
.foot-logo img { display: block; height: clamp(56px, 7vw, 76px); width: auto; max-width: 100%; }
footer a:hover { color: var(--earth); }