/* MaartensWorld. A rally-livery trip log: a left-to-right world map carries the whole ride, with a live odometer beside the title. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:italic;font-display:swap;src:url(fonts/barlow-condensed-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:italic;font-display:swap;src:url(fonts/barlow-condensed-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/literata-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/literata-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/literata-latin-600-normal.woff2) format("woff2")}

:root{
  --salt:#EDF1F3; --paper:#FFFFFF; --ink:#0E1B33; --muted:#4E5D73; --line:#C9D3DB;
  --rally:#E4252C; --rally-text:#BE1A21; --on-rally:#FFFFFF;
  --cobalt:#1636B8; --land:#3355DB; --on-cobalt:#FFFFFF; --on-cobalt-soft:#D5DEFF; --route-base:#7F97F2;
  --dial:#0A1122; --dial-fg:#F4F6FA; --dial-soft:#1E2A44; --mapframe:#FFFFFF;
  --scrim:rgb(10 17 34 / .78); --shade:rgb(10 17 34 / .28); --veil:rgb(5 9 19 / .92);
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --read:"Literata",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --salt:#0B1426; --paper:#121D33; --ink:#E8EDF3; --muted:#A2B0C4; --line:#2B3852;
  --rally:#F2363C; --rally-text:#FF8488;
  --cobalt:#12298C; --land:#2543B4; --on-cobalt-soft:#CBD6FF; --route-base:#6A82E0;
  --dial:#050913; color-scheme:dark}}
:root[data-theme="dark"]{
  --salt:#0B1426; --paper:#121D33; --ink:#E8EDF3; --muted:#A2B0C4; --line:#2B3852;
  --rally:#F2363C; --rally-text:#FF8488;
  --cobalt:#12298C; --land:#2543B4; --on-cobalt-soft:#CBD6FF; --route-base:#6A82E0;
  --dial:#050913; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--salt);color:var(--ink);font:400 17px/1.65 var(--read)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--dial)}
img{max-width:100%;height:auto;display:block}
a{color:var(--rally-text);text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:3px solid var(--rally);outline-offset:2px}
h1,h2,h3,.nav,.eyebrow,.btn,.meta,th{font-family:var(--display)}
h1,h2,h3{margin:0;line-height:1;font-style:italic;font-weight:800;text-wrap:balance}
h2{font-size:clamp(2.2rem,5.4vw,3.6rem);text-transform:uppercase}
h3{font-size:1.75rem}
p{margin:0}
figure{margin:0}
.wrap{max-width:1160px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-weight:700;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rally-text)}
.meta{font-weight:500;font-size:1.05rem;letter-spacing:.03em;color:var(--muted)}
.stack{display:grid;gap:1rem;min-width:0}
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section + .section{border-top:1px solid var(--line)}
.lede{max-width:62ch}
.cols{columns:2;column-gap:2rem}

/* Top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--dial);color:var(--dial-fg)}
.bar .wrap{display:flex;align-items:center;gap:1.5rem}
.brand{font:italic 800 1.5rem/1 var(--display);color:var(--dial-fg);text-decoration:none;white-space:nowrap;padding-block:.8rem}
.brand b{color:var(--rally);font-weight:800}
.nav{display:flex;gap:.25rem;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.nav a{color:var(--dial-fg);text-decoration:none;font-weight:600;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase;padding:.85rem .65rem;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--dial-fg)}
.nav a[aria-current="page"]{border-bottom-color:var(--rally)}
.nav .home-link{display:none}

/* Hero */
.hero{background:var(--cobalt);color:var(--on-cobalt);overflow:hidden}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;padding-top:clamp(2rem,5vw,3.5rem)}
.hero h1{font-size:clamp(3.5rem,11.4vw,9.25rem);line-height:.86;text-transform:uppercase;letter-spacing:-.01em}
.hero h1 em{font-style:inherit;display:block}
.trip{display:grid;gap:.5rem;padding-bottom:.5rem}
.odo{display:flex;align-items:center;gap:3px;background:var(--dial);padding:7px;width:max-content;border-radius:4px}
.odo span{display:block;width:1.6rem;height:2.5rem;text-align:center;background:linear-gradient(var(--dial) 0,var(--dial-soft) 50%,var(--dial) 100%);color:var(--dial-fg);font:700 1.85rem/2.5rem var(--display);font-variant-numeric:tabular-nums}
.odo span:last-child{background:var(--rally);color:var(--on-rally)}
.trip small{font:600 1rem/1.3 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--on-cobalt-soft)}
.map{width:100%;height:auto;display:block;overflow:hidden}
.map .landmass{fill:var(--land)}
.map .base{fill:none;stroke:var(--route-base);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.map .ride{fill:none;stroke:var(--on-cobalt);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--d) linear var(--s) forwards}
.map .sea{fill:none;stroke:var(--on-cobalt-soft);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round}
.map .stop{fill:var(--rally);stroke:var(--on-cobalt);stroke-width:2}
.map text{font:700 17px var(--display);letter-spacing:.04em;text-transform:uppercase;fill:var(--on-cobalt);paint-order:stroke;stroke:var(--cobalt);stroke-width:4px}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.map .ride{animation:none;stroke-dashoffset:0}}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:start;padding-block:1rem 3rem}
.hero-foot p{max-width:58ch}
.quiet{font-style:italic;color:var(--on-cobalt-soft)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}

/* Inner page header */
.head{background:var(--cobalt);color:var(--on-cobalt)}
.head .wrap{display:grid;gap:.75rem;padding-block:clamp(2rem,5vw,3.5rem)}
.head h1{font-size:clamp(2.8rem,8vw,6rem);line-height:.92;text-transform:uppercase}
.head .eyebrow{color:var(--on-cobalt-soft)}
.head p:not(.eyebrow){max-width:62ch}

.btn{display:inline-block;padding:.7rem 1.4rem;font-weight:700;font-style:italic;font-size:1.3rem;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;background:var(--rally);color:var(--on-rally);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:transform .15s}
.btn:hover{transform:translateX(3px)}
.btn.alt{background:var(--on-cobalt);color:var(--cobalt)}
.btn.line{background:var(--ink);color:var(--salt)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* Photos */
.ph{overflow:hidden;background:var(--line)}
.ph img{width:100%;height:100%;object-fit:cover}
.r32{aspect-ratio:3/2}
.r169{aspect-ratio:16/9}
/* Some old photos have a feathered white edge. Zooming a little crops it away. */
.feather img{transform:scale(1.07)}

/* Banner photo */
.banner{position:relative;background:var(--dial);overflow:hidden}
.banner img{width:100%;height:clamp(260px,56vw,760px);object-fit:cover;object-position:50% 72%}

/* Six legs */
.legs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem;margin:0;padding:0;list-style:none}
.leg{display:grid;gap:.5rem;align-content:start}
.leg .ph{margin-bottom:.35rem}
.leg h3 a{color:inherit;text-decoration:none}
.leg h3 a:hover,.leg a:hover h3{color:var(--rally-text)}
.leg p{font-size:1rem;line-height:1.55}
.row-links{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font:600 1.1rem/1.4 var(--display);letter-spacing:.03em}
.mapframe{background:var(--mapframe);padding:.5rem;width:fit-content;max-width:100%}
.leg-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:2rem}
.tile{position:relative;display:block;overflow:hidden;background:var(--line);aspect-ratio:3/2;color:var(--on-cobalt);text-decoration:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.tile:hover img{transform:scale(1.04)}
.tile span{position:absolute;inset:auto 0 0;padding:2.2rem .9rem .7rem;font:italic 800 clamp(1.4rem,2.8vw,2.1rem)/1 var(--display);text-transform:uppercase;background:linear-gradient(transparent,var(--scrim))}
.tile small{display:block;font:500 1rem/1.3 var(--display);font-style:normal;text-transform:none;letter-spacing:.03em;margin-top:.2rem}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}.tile:hover img{transform:none}}

/* Stories */
.tales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem;margin-top:2.5rem}
.tale{display:grid;gap:.75rem;align-content:start;color:inherit;text-decoration:none}
.tale h3{font-size:clamp(1.9rem,3.6vw,2.6rem);transition:color .15s}
.tale:hover h3{color:var(--rally-text)}
.reader{max-width:66ch;margin-inline:auto;display:grid;gap:1.25rem}
.reader h1{font-size:clamp(2.7rem,7.5vw,5rem);text-transform:uppercase}
.reader .first::first-letter{font:italic 800 3.5em/.8 var(--display);float:left;padding:.08em .1em 0 0;color:var(--rally-text)}
.reader figure{margin-block:.75rem}
.reader figure img{width:100%}
.reader-end{border-top:3px solid var(--ink);padding-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}

/* Book */
.book{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.cover{box-shadow:0 14px 34px var(--shade)}
.editions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:.5rem}
.edition{display:grid;gap:.5rem;align-content:start;justify-items:start;border-top:3px solid var(--ink);padding-top:.8rem}
.edition p{font-size:1rem}

/* Numbers */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.25rem;margin:0}
.facts div{border-top:1px solid var(--line);padding-top:.5rem}
.facts dt{font:600 1rem/1.25 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font:italic 800 2.5rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:1rem;line-height:1.3}
th{font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left;border-bottom:2px solid var(--ink);padding:.4rem .75rem .4rem 0}
td{padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.parts{columns:2;column-gap:2rem;padding:0;margin:0;list-style:none;font-size:1rem}
.parts li{break-inside:avoid;padding-block:.3rem;border-bottom:1px solid var(--line)}
.band{background:var(--dial);color:var(--dial-fg)}
.band .eyebrow{color:var(--rally)}
.section + .band,.band + .section{border-top:0}
.extremes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.extremes b{display:block;font:italic 800 clamp(2.6rem,6vw,4.25rem)/1 var(--display);font-variant-numeric:tabular-nums;margin-bottom:.3rem}
.extremes p{font-size:1rem;line-height:1.5}

/* Pam's modifications */
.hotspots{position:relative;background:var(--mapframe)}
.hotspots a{position:absolute;border-radius:2px}
.hotspots a:hover,.hotspots a:focus-visible{background:rgb(228 37 44 / .22);outline:2px solid var(--rally)}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2.5rem;margin-top:2.5rem}
.mod{display:grid;gap:.6rem;align-content:start;border-top:3px solid var(--ink);padding-top:.8rem;scroll-margin-top:4.5rem}
.mod:target{border-top-color:var(--rally)}
.mod p{font-size:1rem;line-height:1.6}
.mod img{margin-top:.25rem}

/* Galleries */
.place{margin-top:3rem;display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.place:first-child{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem 1rem;margin-top:1.25rem}
.shot{display:block;background:var(--line);aspect-ratio:3/2;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.shot:hover img{transform:scale(1.04)}
.grid h3{font-size:1.25rem;line-height:1.1;margin-top:.5rem;font-weight:700}
.grid .cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:normal}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}.shot:hover img{transform:none}}
.regions{display:flex;flex-wrap:wrap;gap:.25rem .9rem;font:600 1.15rem/1.5 var(--display);letter-spacing:.03em}
.regions a{color:var(--on-cobalt)}
.regions [aria-current]{color:var(--on-cobalt-soft);text-decoration:none}

#viewer{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:var(--veil);color:var(--dial-fg)}
#viewer[open]{display:flex;align-items:center;justify-content:center}
#viewer::backdrop{background:var(--veil)}
.v-body{width:min(880px,100%);max-height:100%;overflow-y:auto;padding:max(3.25rem,calc(env(safe-area-inset-top,0px) + 3.25rem)) 16px 1.5rem}
.v-body img{width:100%;max-height:68vh;object-fit:contain;background:var(--dial)}
.v-meta{display:grid;gap:.35rem;margin-top:.9rem}
.v-place{font:600 1rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--on-cobalt-soft)}
.v-title{font:italic 800 clamp(1.6rem,4vw,2.2rem)/1.05 var(--display)}
.v-text{font-size:1rem;line-height:1.6;display:grid;gap:.6rem;max-width:66ch}
.v-bar{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;align-items:center;gap:.4rem;padding:.5rem max(16px,env(safe-area-inset-right,0px));background:var(--dial)}
.v-count{margin-right:auto;font:600 1.05rem var(--display);font-variant-numeric:tabular-nums}
.v-bar button{font:700 1.05rem var(--display);letter-spacing:.04em;text-transform:uppercase;background:var(--dial-soft);color:var(--dial-fg);border:0;padding:.45rem .9rem;cursor:pointer}
.v-bar button:hover{background:var(--rally)}

/* People and links */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.5rem}
.person{display:grid;gap:.3rem;align-content:start;border-top:1px solid var(--line);padding-top:.7rem}
.person h3{font-size:1.5rem}
.person p{font-size:1rem;line-height:1.6}
.linklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem}
.linklist div{display:grid;gap:.2rem;border-top:1px solid var(--line);padding-top:.6rem}
.linklist a{font:700 1.3rem/1.2 var(--display);overflow-wrap:anywhere}
.linklist p{font-size:1rem}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font:italic 800 clamp(1.6rem,5vw,2.75rem)/1.1 var(--display)}
.mailrow a{overflow-wrap:anywhere}
.mailrow button{font:700 1rem var(--display);letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:var(--salt);border:0;padding:.5rem .9rem;cursor:pointer}
.tree{display:grid;gap:1.75rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.tree ul{list-style:none;margin:.5rem 0 0;padding:0;font-size:1rem}

footer{background:var(--dial);color:var(--dial-fg);padding-block:2.5rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem}
footer a{color:inherit}
footer p{font-size:1rem}
footer nav{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font:600 1.1rem/1.4 var(--display);letter-spacing:.03em}

@media (max-width:820px){
  .hero-top,.hero-foot,.split,.book,.leg-body{grid-template-columns:minmax(0,1fr)}
  .cta{justify-content:flex-start}
  .legs,.tiles,.tree{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book .ph{max-width:260px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .brand{display:none}
  .nav{margin-left:-.65rem}
  .nav .home-link{display:block}
  .map text{display:none}
  .legs,.tales,.editions,.extremes,.mods,.people,.linklist,.tree{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .6rem}
  .parts,.cols{columns:1}
  .hotspots a{display:none}
}