@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/newsreader-latin-opsz-normal.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-display:swap;font-weight:200 800;src:url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-wght-normal.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:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-500-normal.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}
/* Theme: light AND dark, both through CSS tokens.
   Light = slate-grey paper, sea-blue ink, restrained washes of sea-glass, moss and gorse.
   Dark  = the same scenes at night: pale ink on dark paper, moon for sun, stars, a lit lighthouse. */
:root{
  --paper:#dde1de; --paper-hi:#e9ece9; --ink:#1c262d; --ink-2:#4a5961; --ink-3:#7d8a90;
  --rule:rgba(28,38,45,.18); --chip:rgba(233,236,233,.86);
  --route:#1f5874; --route-plan:rgba(31,88,116,.42);
  --sky-top:#b9c9cf; --sky-low:#efe2c2; --day-top:#adc3cc; --day-low:#e4e8e2; --oc-top:#c0c8ca; --oc-low:#e3e5e0;
  --sun:#e6b548; --sun-glow:rgba(240,190,80,.5); --cloud:#f3f1ea;
  --sea-far:#96adb3; --sea-mid:#6f8e9a; --sea-deep:#4d6e7c;
  --sand:#d1c8b0; --sand-2:#bcb398; --stone:#a7aca9; --stone-2:#838b88; --tower:#f1f2ee;
  --moss:#81926f; --moss-2:#5f7255; --heather:#8d7e98; --hill-far:#b3bec1; --hill-mid:#8e9ea3;
  --chimney:#ad4b47; --white:#f2f2ee; --flag:#e0b04a; --glass:#8db8a9;
  --wall:#d0d4d0; --light:#f1ead3; --floor:#bfc4bf; --tarmac:#5d6669;
  --stars:0; --lamp:0;
  --grain:var(--grain-l);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f161b; --paper-hi:#16202a; --ink:#d8dfdd; --ink-2:#a2afb1; --ink-3:#6b797e;
    --rule:rgba(216,223,221,.16); --chip:rgba(15,22,27,.82);
    --route:#8fc6d8; --route-plan:rgba(143,198,216,.38);
    --sky-top:#081016; --sky-low:#1e2d37; --day-top:#09121a; --day-low:#1a2832; --oc-top:#0b1319; --oc-low:#18232b;
    --sun:#e4e0cb; --sun-glow:rgba(220,226,212,.2); --cloud:#24323c;
    --sea-far:#22343e; --sea-mid:#192a33; --sea-deep:#0f1d25;
    --sand:#2b3330; --sand-2:#222a28; --stone:#34403f; --stone-2:#283331; --tower:#4a575c;
    --moss:#24342c; --moss-2:#1a2822; --heather:#2f2a39; --hill-far:#1c2a33; --hill-mid:#15222a;
    --chimney:#7a3b39; --white:#5a6468; --flag:#d6b05a; --glass:#4e7a70;
    --wall:#131c22; --light:#243540; --floor:#1a242a; --tarmac:#2a3337;
    --stars:.9; --lamp:1;
    --grain:var(--grain-d);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f161b; --paper-hi:#16202a; --ink:#d8dfdd; --ink-2:#a2afb1; --ink-3:#6b797e;
  --rule:rgba(216,223,221,.16); --chip:rgba(15,22,27,.82);
  --route:#8fc6d8; --route-plan:rgba(143,198,216,.38);
  --sky-top:#081016; --sky-low:#1e2d37; --day-top:#09121a; --day-low:#1a2832; --oc-top:#0b1319; --oc-low:#18232b;
  --sun:#e4e0cb; --sun-glow:rgba(220,226,212,.2); --cloud:#24323c;
  --sea-far:#22343e; --sea-mid:#192a33; --sea-deep:#0f1d25;
  --sand:#2b3330; --sand-2:#222a28; --stone:#34403f; --stone-2:#283331; --tower:#4a575c;
  --moss:#24342c; --moss-2:#1a2822; --heather:#2f2a39; --hill-far:#1c2a33; --hill-mid:#15222a;
  --chimney:#7a3b39; --white:#5a6468; --flag:#d6b05a; --glass:#4e7a70;
  --wall:#131c22; --light:#243540; --floor:#1a242a; --tarmac:#2a3337;
  --stars:.9; --lamp:1;
  --grain:var(--grain-d);
  color-scheme:dark;
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk","Helvetica Neue",Helvetica,system-ui,sans-serif;overflow-x:hidden}
::selection{background:var(--route);color:var(--paper)}
:focus-visible{outline:2px solid var(--route);outline-offset:3px}
/* theme swap: one soft crossfade of the whole page, nothing rebuilt */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;background-image:var(--grain);background-size:180px 180px}

/* header */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;background:color-mix(in srgb,var(--paper) 90%,transparent);border-bottom:1px solid var(--rule)}
.mark{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-size:17px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.mark i{font-style:italic}
.tl{flex:1;display:flex;align-items:center;gap:10px;min-width:56px}
.tl span{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.tl-track{position:relative;flex:1;height:22px}
.tl-track::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--ink-3);opacity:.6}
.tl-yr{position:absolute;top:8px;width:1px;height:7px;background:var(--ink-3)}
.tl-now{position:absolute;top:5px;width:2px;height:13px;margin-left:-1px;background:var(--route)}
.tl-dot{position:absolute;top:7px;left:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);will-change:transform}
.btn{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--ink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.btn:hover{border-color:var(--ink-2)}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn svg{width:18px;height:18px}
.nowbtn{appearance:none;flex:none;height:30px;padding:0 10px 0 9px;border-radius:999px;border:1.5px solid var(--route);background:transparent;color:var(--route);font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px;cursor:pointer}
.nowbtn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--route)}
.nowbtn:hover{background:var(--route);color:var(--paper)}
.nowbtn:hover::before{background:var(--paper)}
@media (max-width:480px){.tl span{display:none}.top{gap:8px;padding:0 12px}}

/* journey: every scene is words first, then the painting below them */
main{position:relative;display:block;container:road / inline-size}
.scene{position:relative;overflow:hidden;min-height:max(640px,100svh);display:flex;flex-direction:column}
.stage{flex:1 0 auto;min-height:420px;position:relative;z-index:0}
#s1 .stage{min-height:300px}
.scene.pin .stage{min-height:360px}
.pinrun{position:relative}
.scene.pin.sticky{position:sticky;top:0}
.scene.pin{min-height:max(740px,100svh)}
.paint{position:absolute;inset:0;z-index:1;overflow:hidden}
.layer{position:absolute;left:0;width:100%;display:block;overflow:visible}
.scene.live .layer{will-change:transform}
.veil{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,var(--paper) 0,var(--paper) calc(100% - 56px),color-mix(in srgb,var(--paper) 0%,transparent) 100%)}
.deck{position:absolute;left:0;width:100%;height:30px;z-index:3;display:block;pointer-events:none;bottom:-1px}
.deck path{fill:var(--paper)}
.rip{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.trace{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.words{position:relative;z-index:4;padding:calc(env(safe-area-inset-top,0px) + 86px) 18px 0 22px;max-width:600px;flex:none}
@container road (min-width:900px){
  .words{width:min(540px,44cqi);padding-top:104px}
  .scene.l .words{padding-left:max(56px,7cqi);padding-right:0}
  .scene.r .words{margin-left:auto;padding-right:max(56px,7cqi);padding-left:0}
  #s1 .words{width:min(820px,64cqi)}
  .stage{min-height:400px}
  #s1 .stage{min-height:380px}
}
.cap{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;display:flex;gap:10px;align-items:center}
.cap::before{content:"";width:22px;height:1px;background:currentColor}
.lines{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-style:italic;font-weight:350;font-size:clamp(25px,6.4cqi,44px);line-height:1.14;letter-spacing:-.012em;margin:0;text-wrap:balance}
.ln{display:block;margin-bottom:.32em}
.ln + .ln{color:var(--ink-2)}
.fact{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0;padding:12px 0 0;border-top:1px solid var(--rule)}
.fact div{display:flex;flex-direction:column;gap:3px}
.fact dt{font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fact dd{margin:0;font:500 13px/1.3 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink)}
.tag{display:inline-block;font:500 9px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px dashed var(--ink-3);padding:4px 6px;vertical-align:middle}

/* hero */
.kick{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
h1{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:330;font-size:clamp(62px,18cqi,172px);line-height:.86;letter-spacing:-.035em;margin:0 0 18px}
h1 em{font-style:italic;font-weight:300}
@container road (min-width:900px){h1{font-size:clamp(90px,9cqi,128px)}}
.sub{font-size:clamp(16px,4.2cqi,19px);line-height:1.45;max-width:30em;margin:0 0 18px;color:var(--ink-2)}
.sub b{color:var(--ink);font-weight:600}
.cue{display:inline-flex;align-items:center;gap:10px;margin:20px 0 0;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cue i{display:block;width:1px;height:28px;background:var(--ink-2);transform-origin:top;animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}


/* photo placeholder */
.photo{margin:20px 0 0;width:min(220px,62cqi);aspect-ratio:4/3;border:1px solid var(--ink-3);background:repeating-linear-gradient(135deg,transparent 0 7px,var(--rule) 7px 8px),var(--chip);display:grid;place-items:center;transform:rotate(-2.2deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);position:relative}
.photo::before,.photo::after{content:"";position:absolute;width:44px;height:14px;background:color-mix(in srgb,var(--sand) 70%,transparent);top:-7px}
.photo::before{left:14px;transform:rotate(-8deg)}.photo::after{right:14px;transform:rotate(6deg)}
.photo span{font:400 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-2);text-align:center;padding:0 12px}
.photo:hover,.photo:focus-visible{transform:rotate(.6deg) translateY(-3px)}
@container road (min-width:900px){.scene.r .photo{position:absolute;right:calc(100% + 24px);top:150px;margin:0}}
.t-now.pulse{animation:pulse 1.1s ease-out 2;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.8)}100%{transform:scale(1)}}

/* where I am now */
.nowp{position:relative;z-index:4;padding:44px 18px 52px 22px;border-bottom:1px solid var(--rule)}
.nowp h2{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-style:italic;font-weight:350;font-size:clamp(28px,7cqi,40px);line-height:1.1;letter-spacing:-.012em;margin:0 0 6px}
.nowp .chap-now{font-size:16px;line-height:1.45;color:var(--ink-2);margin:0 0 4px}
.nowp .chap-now b{color:var(--ink);font-weight:600}
.ngrid{display:grid;gap:0;margin-top:18px}
.nrow{border-top:1px solid var(--rule);padding:14px 0}
.nrow > dt{font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;display:flex;gap:10px;align-items:center}
.nrow > dd{margin:0;font:500 13px/1.45 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink)}
.nrow > dd span{color:var(--ink-2);font-weight:400}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:400px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-2)}
.day i{--c:var(--ink);width:24px;height:24px;display:block;border-radius:46% 54% 50% 50%/52% 44% 56% 48%;background:var(--c);opacity:.88;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.day:nth-child(2n) i{border-radius:55% 45% 48% 52%/45% 55% 45% 55%}
.day.run i{--c:var(--route)}.day.bike i{--c:var(--glass)}.day.swim i{--c:var(--sea-mid)}
.day.planned i{background:none;box-shadow:inset 0 0 0 2px var(--c);opacity:1}
.day.rest i{background:none;box-shadow:none;border:1.5px dashed var(--ink-3)}
.day b{font-weight:500;color:var(--ink);font-size:10px}
.day.today b{color:var(--route);text-decoration:underline;text-underline-offset:3px}
.day:hover i{transform:scale(1.15) rotate(-8deg)}
.jump{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--route);font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:10px 0}
.jump svg{width:16px;height:16px}
.jump:hover{text-decoration:underline;text-underline-offset:4px}
@container road (min-width:900px){
  .nowp{padding:72px max(56px,7cqi) 72px}
  .nowp .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;max-width:1240px}
  .ngrid{grid-template-columns:1fr 1fr;column-gap:40px;margin-top:0}
  .nrow.wide{grid-column:1 / -1}
}

/* chapters (scene 3) */
.chapters{margin-top:18px}
.chap{border-top:1px solid var(--rule);padding:12px 0 2px}
.chap .ch-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:500 10px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.chap .ch-h .st{color:var(--route)}
.chap h3{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:400;font-size:21px;line-height:1.2;margin:6px 0 2px}
.chap .ch-d{font:400 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-2);margin:0 0 8px}
.chap p.ch-e{font-size:15px;line-height:1.45;color:var(--ink-2);margin:8px 0 0}
.wkticks{display:block;overflow:visible}
.wkticks .wd{fill:var(--route)}
.wkticks .wc{fill:color-mix(in srgb,var(--route) 35%,transparent);stroke:var(--route);stroke-width:1.5}
.wkticks .wf{fill:color-mix(in srgb,var(--ink-3) 28%,transparent)}
.wkticks text{font:400 10px "IBM Plex Mono",ui-monospace,monospace;fill:var(--ink-3);letter-spacing:.04em}
.wkticks text.cur{fill:var(--route);font-weight:500}

/* flags, bibs (scenes 2, 5) */
.flagwrap{position:absolute;inset:0;z-index:5;pointer-events:none}
.flagbtn{pointer-events:auto;position:absolute;width:max-content;appearance:none;border:0;background:var(--chip);color:var(--ink);text-align:left;padding:7px 9px;border-radius:2px;cursor:pointer;max-width:min(200px,52cqi);font:400 11px/1.35 "IBM Plex Mono",ui-monospace,monospace;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.flagbtn.right{transform:translate(12px,-100%)}
.flagbtn.left{transform:translate(calc(-100% - 12px),-100%)}
.flagbtn b{display:block;font:500 12px/1.25 "IBM Plex Mono",ui-monospace,monospace;margin-bottom:2px}
.flagbtn span{color:var(--ink-2)}
.flagbtn em{display:none;font-style:normal;color:var(--ink);margin-top:6px;padding-top:6px;border-top:1px solid var(--rule)}
.flagbtn[aria-expanded="true"] em{display:block}
.flagbtn:hover,.flagbtn[aria-expanded="true"]{box-shadow:0 0 0 1px var(--ink-2)}
.flagbtn.right:hover{transform:translate(12px,calc(-100% - 3px))}
.flagbtn.left:hover{transform:translate(calc(-100% - 12px),calc(-100% - 3px))}
.flagbtn.reached span{color:var(--route);font-weight:500}
.flagbtn.bib{border:1px solid var(--ink-3);padding:9px 12px 8px;background:var(--chip)}
.flagbtn.bib::before,.flagbtn.bib::after{content:"";position:absolute;top:5px;width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.flagbtn.bib::before{left:4px}.flagbtn.bib::after{right:4px}
.flagbtn.bib span{color:var(--route);font-weight:500}
.flaggrp{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.flaggrp.hot{transform:scale(1.25)}

/* svg classes */
.ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.inkfill{fill:var(--ink)}
.edge{fill:none;stroke:var(--ink);stroke-opacity:.13;stroke-width:1.6}
.f-sea-far{fill:var(--sea-far)}.f-sea-mid{fill:var(--sea-mid)}.f-sea-deep{fill:var(--sea-deep)}
.f-sand{fill:var(--sand)}.f-sand-2{fill:var(--sand-2)}.f-stone{fill:var(--stone)}.f-stone-2{fill:var(--stone-2)}
.f-moss{fill:var(--moss)}.f-moss-2{fill:var(--moss-2)}.f-heather{fill:var(--heather)}
.f-hill-far{fill:var(--hill-far)}.f-hill-mid{fill:var(--hill-mid)}.f-chimney{fill:var(--chimney)}.f-white{fill:var(--white)}
.f-flag{fill:var(--flag)}.f-glass{fill:var(--glass)}.f-tarmac{fill:var(--tarmac)}.f-cloud{fill:var(--cloud)}.f-sun{fill:var(--sun)}.f-tower{fill:var(--tower)}
.f-ink{fill:var(--ink)}
.flare{fill:none;stroke:var(--chimney);stroke-width:1.8;stroke-linecap:round}
.sunglow{fill:var(--sun-glow)}
.lamp{fill:var(--flag);opacity:var(--lamp)}
.star{fill:var(--ink);opacity:var(--stars)}
.trail{fill:none;stroke:var(--sand);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.svgtxt{font:400 11px "IBM Plex Mono",ui-monospace,monospace;fill:var(--ink-2);letter-spacing:.04em}
.svgtxt.b{font-weight:500;fill:var(--ink)}
.sunrefl{fill:none;stroke:var(--sun);stroke-linecap:round;opacity:.55}
.gs1{stop-color:var(--sky-top)}.gs2{stop-color:var(--sky-low)}
.gd1{stop-color:var(--day-top)}.gd2{stop-color:var(--day-low)}
.go1{stop-color:var(--oc-top)}.go2{stop-color:var(--oc-low)}
.bob{animation:bob 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(3px) rotate(3deg)}}
.ripple{fill:none;stroke:var(--ink);stroke-width:1.1;transform-box:fill-box;transform-origin:center;animation:rip 1.9s cubic-bezier(.15,.6,.3,1) forwards}
.ripple.b{animation-delay:.18s;opacity:0;stroke-width:.8}
@keyframes rip{0%{transform:scale(.08);opacity:.75}100%{transform:scale(1);opacity:0}}

/* the road inside each painting: solid ink = travelled, dots = the plan */
.t-ink{fill:none;stroke:var(--route);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.t-plan{fill:none;stroke:var(--route);stroke-width:2.4;stroke-dasharray:.1 7.5;stroke-linecap:round}
.t-tip{fill:var(--route)}
.t-tip.p{fill:var(--paper);stroke:var(--route);stroke-width:1.6}
.t-now{fill:var(--paper);stroke:var(--route);stroke-width:2}
.t-dot{fill:var(--route)}
.t-lbl{font:500 10px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;fill:var(--route)}
.t-lbl-bg{fill:var(--chip)}

/* epilogue */
.end{position:relative;z-index:4;padding:72px 18px 56px 22px;max-width:1200px}
@container road (min-width:900px){.end{padding:120px max(56px,7cqi) 80px}}
.big{font-family:Newsreader,"Iowan Old Style",Georgia,serif;font-weight:300;font-size:clamp(76px,24cqi,240px);line-height:.85;letter-spacing:-.04em;margin:0}
.big small{display:block;font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:16px}
.end p:not(.big){font-size:17px;line-height:1.5;max-width:32em;color:var(--ink-2)}
.end .lines{margin-top:28px}
.foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);font:400 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--ink-3)}
.back{appearance:none;background:none;border:1px solid var(--ink-2);color:var(--ink);padding:11px 16px;border-radius:999px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.back:hover{background:var(--ink);color:var(--paper)}

.brush{position:fixed;left:0;top:0;z-index:70;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);opacity:0;pointer-events:none;transition:width .3s,height .3s,margin .3s,opacity .3s;will-change:transform}
.brush.on{opacity:.78}
.brush.big{width:40px;height:40px;margin:-20px 0 0 -20px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:none),(pointer:coarse){.brush{display:none}}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}

@media (prefers-reduced-motion: reduce){
  .cue i,.bob,.ripple{animation:none}
  .cue i{transform:none}
  .photo,.flagbtn,.flaggrp,.day i{transition:none}
  .t-now.pulse{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Wide screens: the paintings run the full width, sharp, drawn for the wider frame (the scene code
   composes differently above 760px). Only the words sit in a centred column the width of a large phone,
   sized with container units against that column. */
:root{--sheet:600px}
@media (min-width:700px){
  main{container-type:normal}
  .words,.nowp,.end{container:road / inline-size}
  .scene .words{width:var(--sheet);max-width:var(--sheet);margin-inline:auto}
  .nowp,.end{max-width:var(--sheet);margin-inline:auto}
  .top{padding-inline:max(16px,calc((100% - var(--sheet)) / 2 + 16px))}
}

/* The live rows wait hidden until the feed fills them; the design's display rules must not show them early. */
[hidden]{display:none!important}