:root{
  --paper:#ECE7DC; --paper-2:#E1DBCD; --card:#F5F1E8; --ink:#231D19; --muted:#655A50;
  --shuka:#AE2129; --blue:#2C4A7E; --gold:#C98A2B; --rule:rgba(35,29,25,.14);
  --night:#0F0D0B; --on-night:#F1EADC;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --measure:33rem; --wide:min(1100px,92vw);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#181512;--paper-2:#221E1A;--card:#1F1B17;--ink:#EDE6D8;--muted:#AEA292;--rule:rgba(237,230,216,.13);--shuka:#D9474F;--blue:#8AA6D6;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#181512;--paper-2:#221E1A;--card:#1F1B17;--ink:#EDE6D8;--muted:#AEA292;--rule:rgba(237,230,216,.13);--shuka:#D9474F;--blue:#8AA6D6;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html:has(#ts2:checked){font-size:114%}
html:has(#ts3:checked){font-size:130%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.72;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--shuka);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.shuka{background:
  repeating-linear-gradient(90deg,transparent 0 14px,rgba(20,24,60,.55) 14px 17px,transparent 17px 22px,rgba(20,24,60,.55) 22px 25px,transparent 25px 40px),
  repeating-linear-gradient(0deg,transparent 0 4px,rgba(20,24,60,.45) 4px 6px,transparent 6px 10px),#AE2129}
.label{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--shuka);margin:0 0 .8em}

/* ---------- cover ---------- */
.cover{position:relative;height:calc(100svh - 64px);min-height:520px;display:grid;align-items:end;color:#F7F0E3;isolation:isolate;overflow:hidden;background:#140f0a;}
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,6,3,.25) 0%,rgba(10,6,3,0) 28%,rgba(10,6,3,0) 45%,rgba(10,6,3,.85) 100%)}
.cover-in{width:var(--wide);margin:0 auto;padding-bottom:calc(clamp(56px,10vh,96px) + env(safe-area-inset-bottom,0px))}
.cover .kicker{font-family:var(--sans);font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:#F0C98B;margin:0 0 .6em;opacity:0;animation:rise 1.2s .2s ease-out forwards}
.cover h1{font-weight:400;font-size:clamp(4.2rem,2.4rem + 9vw,10rem);line-height:.88;letter-spacing:-.035em;margin:0 0 .22em}
.cover h1 span{display:inline-block;opacity:0;transform:translateY(.25em);animation:rise 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.cover h1 span:nth-child(2){animation-delay:.25s}
.cover .sub{font-size:clamp(1.1rem,1rem + .5vw,1.45rem);margin:0;max-width:26ch;color:#EADFCB;opacity:0;animation:rise 1.2s .7s ease-out forwards}
@keyframes rise{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));translate:-50% 0;width:26px;height:42px;border:1.5px solid rgba(247,240,227,.6);border-radius:14px;opacity:0;animation:rise 1s 1.6s forwards}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#F7F0E3;animation:cue 2s 2s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.cover .band{position:absolute;left:0;right:0;bottom:0;height:8px}

/* ---------- prologue ---------- */
.prologue{width:var(--wide);margin:0 auto;padding:clamp(88px,16vw,180px) 0 clamp(72px,12vw,140px);text-align:center}
.prologue p{margin:0 auto;max-width:22ch;font-size:clamp(1.9rem,1.2rem + 3.2vw,3.6rem);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.prologue p .soft{color:var(--muted)}
.prologue .who{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:1.6em;max-width:none;letter-spacing:0}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin:2.4em 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600}

/* ---------- route ---------- */
.route{width:var(--wide);margin:0 auto;padding-bottom:clamp(72px,12vw,140px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.route h2,.contents h2,.seen h2{font-weight:400;font-size:clamp(2rem,1.3rem + 2.4vw,3.3rem);line-height:1.05;letter-spacing:-.015em;margin:0 0 .35em}
.route .intro{color:var(--muted);margin:0 0 1.4em;font-size:1.05rem}
.map{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:12px;aspect-ratio:400/380}
.map svg{width:100%;height:100%;display:block;overflow:visible}
.map .grid line{stroke:var(--rule);stroke-width:1}
.map .eq{stroke:var(--gold);stroke-width:1.2;stroke-dasharray:4 5}
.map .eqt{font-family:var(--sans);font-size:9.5px;fill:var(--gold);letter-spacing:.06em}
.map .region{fill:var(--gold);opacity:.13}
.map .lake{fill:var(--blue);opacity:.35}
.map .road{fill:none;stroke:var(--shuka);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.map .air{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 5;opacity:.55}
.map .pin circle{fill:var(--ink);stroke:var(--card);stroke-width:2.5}
.map .pin text{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--card);text-anchor:middle;dominant-baseline:central}
.map .pin:hover circle{fill:var(--shuka)}
.map .place{font-family:var(--serif);font-size:13px;fill:var(--ink)}
.map .note{font-family:var(--sans);font-size:9.5px;fill:var(--muted)}
.stops{list-style:none;margin:0;padding:0}
.stops li a{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:.75em 0;border-top:1px solid var(--rule);text-decoration:none}
.stops .k{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.78rem;font-weight:700;display:grid;place-items:center;margin-top:.15em}
.stops .k.plane{background:none;color:var(--ink);font-size:1rem;box-shadow:inset 0 0 0 1.5px var(--ink)}
.stops b{display:block;font-weight:400;font-size:1.1rem;line-height:1.3}
.stops small{display:block;font-family:var(--sans);font-size:.88rem;color:var(--muted);line-height:1.4;margin-top:2px}
.stops a:hover b{text-decoration:underline;text-underline-offset:3px}

/* ---------- contents ---------- */
.contents{background:var(--card);border-block:1px solid var(--rule);padding:clamp(64px,10vw,112px) 0}
.contents-in{width:var(--wide);margin:0 auto}
.contents-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:12px}
.contents-head p{margin:0;color:var(--muted);font-family:var(--sans);font-size:1rem}
.ts{display:inline-flex;align-items:center;gap:2px;background:var(--paper-2);border-radius:999px;padding:4px}
.ts>span{font-family:var(--sans);font-size:.85rem;color:var(--muted);padding:0 .6em 0 .8em}
.ts label{cursor:pointer;width:40px;height:38px;display:grid;place-items:center;border-radius:999px;line-height:1}
.ts label:nth-of-type(1){font-size:15px}.ts label:nth-of-type(2){font-size:19px}.ts label:nth-of-type(3){font-size:24px}
body:has(#ts1:checked) label[for=ts1],body:has(#ts2:checked) label[for=ts2],body:has(#ts3:checked) label[for=ts3]{background:var(--ink);color:var(--paper)}
body:has(#ts1:focus-visible) label[for=ts1],body:has(#ts2:focus-visible) label[for=ts2],body:has(#ts3:focus-visible) label[for=ts3]{outline:3px solid var(--shuka)}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:0 48px}
.part h3{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--shuka);margin:2em 0 .4em}
.part ol{list-style:none;margin:0;padding:0}
.part li a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:.6em 0;border-top:1px solid var(--rule);text-decoration:none;line-height:1.3}
.part li img,.part .nothumb{width:56px;height:42px;object-fit:cover;border-radius:6px;display:block}
.part .n{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-right:.6em;font-variant-numeric:tabular-nums}
.part .m{font-family:var(--sans);font-size:.82rem;color:var(--muted);white-space:nowrap}
.part li a:hover .t{text-decoration:underline;text-underline-offset:3px}

/* ---------- chapters ---------- */
.chapter{padding:clamp(80px,12vw,140px) 0 0}
.ch-head{width:min(var(--measure),90vw);margin:0 auto 1.8em}
.where{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--shuka);display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0 0 16px}
.where i{width:34px;height:8px;border-radius:2px;flex:none}
.where span{font-weight:400;color:var(--muted)}
.ch-head h2{font-weight:400;font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
.chapter>p{width:min(var(--measure),90vw);margin:0 auto 1.15em;text-wrap:pretty}
.chapter>p.first::first-line{font-variant-caps:all-small-caps;letter-spacing:.04em;font-size:1.06em}
.pull{width:min(40rem,88vw);margin:2.4em auto 2.6em;padding:0;text-align:center}
.pull::before{content:"";display:block;width:44px;height:8px;margin:0 auto 1.1em;border-radius:2px;background:
  repeating-linear-gradient(90deg,transparent 0 6px,rgba(20,24,60,.55) 6px 8px,transparent 8px 12px),var(--shuka)}
.pull p{margin:0;font-size:clamp(1.6rem,1.1rem + 2vw,2.5rem);line-height:1.18;letter-spacing:-.01em;font-style:italic;text-wrap:balance}
.ph{margin:2.4em auto}
.ph img{width:100%;height:auto;background:var(--paper-2)}
.ph.land{width:var(--wide)} .ph.land img,.ph.port img,.pair img{border-radius:6px}
.ph.port{width:min(540px,90vw)} .ph.in{margin:0}
.pair{width:var(--wide);margin:2.4em auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next{width:min(var(--measure),90vw);margin:2.8em auto 0}
.next a{display:block;text-decoration:none;padding:1.1em 1.3em;border-radius:14px;background:var(--card);border:1px solid var(--rule);font-size:1.25rem;line-height:1.25}
.next a span{display:block;font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-bottom:.2em}
.next a::after{content:"\2193";float:right;color:var(--shuka);margin-top:-1.2em}
.next a:hover{border-color:var(--ink)}

/* ---------- what we saw ---------- */
.seen{width:var(--wide);margin:0 auto;padding:clamp(96px,14vw,160px) 0 0}
.seen .intro{color:var(--muted);margin:0 0 1.6em;font-size:1.05rem;max-width:36ch}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}
.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.spotted{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 40px}
.spotted li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:.8em 0;border-top:1px solid var(--rule);line-height:1.35}
.spotted li::before{content:"";width:20px;height:20px;margin-top:.2em;border-radius:50%;background:var(--shuka);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E");}
.spotted li::before{background:var(--shuka) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.spotted li.heard::before{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23AE2129' stroke-width='1.6' stroke-dasharray='3 2.6'/%3E%3C/svg%3E") center/100% no-repeat}
.spotted b{font-weight:400;font-size:1.12rem}
.spotted small{display:block;font-family:var(--sans);font-size:.88rem;color:var(--muted)}

/* ---------- finale ---------- */
.finale{position:relative;margin-top:clamp(96px,14vw,160px);background:var(--night);color:var(--on-night);isolation:isolate;overflow:hidden}
.finale>img{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;object-fit:cover;object-position:50% 70%;opacity:.55;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.finale::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;background-image:
  radial-gradient(1.2px 1.2px at 8% 12%,#fff,transparent),radial-gradient(1px 1px at 18% 30%,#fff,transparent),radial-gradient(1.4px 1.4px at 27% 8%,#fff,transparent),
  radial-gradient(1px 1px at 36% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 44% 5%,#fff,transparent),radial-gradient(1px 1px at 52% 18%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 61% 10%,#fff,transparent),radial-gradient(1px 1px at 69% 27%,#fff,transparent),radial-gradient(1.2px 1.2px at 77% 6%,#fff,transparent),
  radial-gradient(1px 1px at 85% 20%,#fff,transparent),radial-gradient(1.3px 1.3px at 93% 9%,#fff,transparent),radial-gradient(1px 1px at 13% 40%,#fff,transparent),
  radial-gradient(1px 1px at 48% 34%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 36%,#fff,transparent),radial-gradient(1px 1px at 72% 42%,#fff,transparent),
  radial-gradient(1px 1px at 4% 26%,#fff,transparent),radial-gradient(1px 1px at 31% 46%,#fff,transparent),radial-gradient(1.2px 1.2px at 58% 44%,#fff,transparent);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.finale-in{width:var(--wide);margin:0 auto;padding:clamp(120px,18vw,200px) 0 clamp(80px,10vw,120px)}
.finale .label{color:#E8A04A}
.finale h2{font-weight:400;font-style:italic;font-size:clamp(2.4rem,1.4rem + 4.4vw,5.4rem);line-height:1;letter-spacing:-.02em;margin:0 0 1em;max-width:13ch}
.memories{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0 40px;counter-reset:m}
.memories li{counter-increment:m;position:relative;padding:1em 0 1em 2.6em;border-top:1px solid rgba(241,234,220,.18);line-height:1.45}
.memories li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:1.15em;font-family:var(--sans);font-size:.8rem;font-weight:600;color:#E8A04A}
.last{margin:clamp(80px,12vw,140px) 0 0;text-align:center}
.last p{margin:0 auto;font-size:clamp(2rem,1.3rem + 3.4vw,4.4rem);line-height:1.05;letter-spacing:-.02em;max-width:14ch;text-wrap:balance}
.last .btn{display:inline-block;margin-top:2em;font-family:var(--sans);font-weight:600;font-size:1rem;text-decoration:none;color:var(--night);background:var(--on-night);border-radius:999px;padding:.95em 1.6em}

/* ---------- floating chapters button ---------- */
.fab{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.92rem;text-decoration:none;color:var(--paper);background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.75em 1.1em;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.25)}

/* ---------- motion where the browser supports scroll timelines (no JavaScript) ---------- */
.progress{display:none}
@supports (animation-timeline: scroll()){
  .progress{display:block;position:fixed;top:0;left:0;right:0;height:4px;z-index:40;transform-origin:left;transform:scaleX(0);animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
  .fab{animation:fabin linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  @keyframes fabin{from{opacity:0;transform:translateY(20px);pointer-events:none}to{opacity:1;transform:none}}
}
@supports (animation-timeline: view()){
  .ph img,.pair,.pull,.card-in{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes reveal{from{opacity:0;transform:translateY(48px) scale(.97)}to{opacity:1;transform:none}}
  .map .road{stroke-dasharray:1;stroke-dashoffset:1;animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  @keyframes draw{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;opacity:1!important;transform:none!important}.map .road{stroke-dasharray:none!important}}

@media (max-width:760px){
  .route{grid-template-columns:1fr}
  .ph.land{width:100vw} .ph.land img{border-radius:0}
  .pair{width:100vw;gap:4px} .pair img{border-radius:0}
  .strip{grid-template-columns:repeat(2,1fr)}
  .ts>span{display:none}
}

/* ================= tripmemo site ================= */
body{font-optical-sizing:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:.6em 1em;border-radius:8px;z-index:100}
.skip:focus{left:12px}
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.site-head-in{width:var(--wide);margin:0 auto;height:64px;display:flex;align-items:center;gap:24px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:14px;margin-right:auto}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:-.02em;line-height:1}
.brand span{font-family:var(--sans);font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.nav{display:flex;gap:32px;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;padding:.4em 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--rule)}
.nav a[aria-current="page"]{border-color:var(--shuka)}
.tabbar{display:none}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;transform-origin:left;transform:scaleX(0)}

/* mobile: tab bar at the bottom, compact header */
@media (max-width:899px){
  .nav{display:none}
  .site-head-in{height:56px}
  .brand b{font-size:1.45rem}
  .brand span{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--rule);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:grid;justify-items:center;gap:2px;text-decoration:none;font-family:var(--sans);font-size:.7rem;font-weight:600;color:var(--muted);padding:4px 0}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{color:var(--shuka)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .cover{height:calc(100svh - 56px - 64px)}
}

/* ---------- photo actions (like / share) ---------- */
[data-photo]{position:relative}
[data-photo] img{cursor:zoom-in}
.pa{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:2}
.pa button{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;color:#fff;background:rgba(15,12,10,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;height:36px;min-width:36px;padding:0 10px;font-family:var(--sans);font-size:.82rem;font-weight:600;justify-content:center}
.pa button:hover{background:rgba(15,12,10,.62)}
.pa .pa-n:empty{display:none}
.pa-like.on{--h:#FF4D5E;color:#FFD9DC}
.pa-like.pop svg{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.share-pop{position:fixed;z-index:80;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:6px;display:grid;min-width:170px;font-family:var(--sans);font-size:.95rem}
.share-pop a,.share-pop button{text-align:left;background:none;border:0;padding:.7em .9em;border-radius:9px;text-decoration:none;cursor:pointer;color:inherit;font:inherit}
.share-pop a:hover,.share-pop button:hover{background:var(--paper-2)}

/* ---------- lightbox ---------- */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:90;background:rgba(10,8,7,.97);color:#F1EADC;display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.lb[hidden]{display:none}
.lb-top,.lb-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(12px,3vw,28px);font-family:var(--sans);font-size:.9rem;min-height:60px}
.lb-x{background:rgba(255,255,255,.1);border:0;color:inherit;width:42px;height:42px;border-radius:50%;font-size:1.05rem;cursor:pointer}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 clamp(6px,6vw,90px)}
.lb-stage img{max-width:100%;max-height:calc(100svh - 140px);width:auto;height:auto;object-fit:contain;border-radius:3px;touch-action:pinch-zoom}
.lb-nav{position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lb-prev{left:clamp(6px,2vw,24px)}.lb-next{right:clamp(6px,2vw,24px)}
.lb-cap{font-family:var(--serif);font-style:italic;font-size:1.05rem}
.lb-pa{position:static}
@media (max-width:899px){.lb-nav{display:none}}

/* ---------- reveal (home/resources) ---------- */
.reveal.pre{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.pre.in{opacity:1;transform:none}

/* ---------- home ---------- */
.home-hero{position:relative;height:calc(100svh - 64px);min-height:520px;max-height:960px;display:grid;place-items:center;text-align:center;color:#FFF7EC;isolation:isolate;overflow:hidden;background:#2a1d17}
.home-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-2;animation:drift 30s ease-in-out infinite alternate}
.home-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,18,12,.15),rgba(30,18,12,0) 40%,rgba(30,18,12,.45))}
.home-hero h1{margin:0;font-weight:400;font-size:clamp(2.6rem,1.4rem + 5vw,6.2rem);line-height:1;letter-spacing:-.025em;text-shadow:0 2px 30px rgba(60,25,10,.35)}
.home-hero h1 span{display:inline-block;opacity:0;transform:translateY(.3em);animation:rise 1.3s cubic-bezier(.2,.7,.2,1) forwards}
.home-hero h1 span:nth-child(2){animation-delay:.35s}.home-hero h1 span:nth-child(3){animation-delay:.7s}
.home-hero .hint{position:absolute;left:50%;bottom:26px;translate:-50% 0;color:#FFF7EC;opacity:0;animation:rise 1s 1.6s forwards}
.home-hero .hint .wheel{animation:wheel 1.8s 2.2s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}
.home-intro{width:var(--wide);margin:0 auto;padding:clamp(72px,12vw,150px) 0 clamp(56px,9vw,110px)}
.home-intro p{margin:0;max-width:30em;font-size:clamp(1.35rem,1rem + 1.4vw,2.2rem);line-height:1.38;letter-spacing:-.008em;text-wrap:pretty}
.journals{width:var(--wide);margin:0 auto;padding-bottom:clamp(80px,12vw,150px)}
.journals .label{margin-bottom:16px}
.jgrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:18px}
.jcard{position:relative;display:block;text-decoration:none;color:#FFF7EC;border-radius:18px;overflow:hidden;isolation:isolate;min-height:clamp(320px,38vw,520px)}
.jcard .tri{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;z-index:-2;background:#111}
.jcard .tri img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.jcard:hover .tri img{transform:scale(1.05)}
.jcard::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(10,6,3,.45),rgba(10,6,3,.15) 70%),linear-gradient(180deg,transparent 50%,rgba(10,6,3,.6))}
.jcard .t{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:8px;padding:20px}
.jcard .t b{font-weight:400;font-size:clamp(2.4rem,1.4rem + 4vw,5.4rem);line-height:.95;letter-spacing:.06em;text-transform:uppercase}
.jcard .t span{font-family:var(--sans);font-weight:600;font-size:clamp(.85rem,.8rem + .4vw,1.1rem);letter-spacing:.5em;text-transform:uppercase;padding-left:.5em}
.jcard .m{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;gap:12px;font-family:var(--sans);font-size:.88rem;opacity:.92}
.jcard .m em{font-style:normal;font-weight:600}
.plus{display:grid;place-items:center;border-radius:18px;border:2px dashed var(--rule);color:var(--muted);min-height:clamp(140px,38vw,520px)}
.plus svg{width:56px;height:56px}
@media (max-width:899px){.jgrid{grid-template-columns:1fr}.jcard{min-height:420px}.jcard .tri{grid-template-columns:1fr 1fr 1fr}.plus{min-height:120px}}

/* ---------- page heads ---------- */
.page-head{width:var(--wide);margin:0 auto;padding:clamp(56px,9vw,112px) 0 clamp(28px,4vw,48px)}
.page-head h1{font-weight:400;font-size:clamp(2.6rem,1.6rem + 4vw,5rem);line-height:1;letter-spacing:-.025em;margin:0 0 .3em}
.page-head p{margin:0;color:var(--muted);max-width:36em;font-size:1.1rem}

/* ---------- resources ---------- */
.guides{width:var(--wide);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.guide{background:var(--card);border:1px solid var(--rule);border-radius:18px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.guide .pv{background:var(--paper-2);padding:22px 22px 0;display:block}
.guide .pv img{width:100%;border-radius:6px 6px 0 0;box-shadow:0 10px 30px rgba(0,0,0,.15);aspect-ratio:210/200;object-fit:cover;object-position:top}
.guide .b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.guide h3{font-weight:400;font-size:1.55rem;line-height:1.1;margin:0}
.guide p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.guide .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.btn2{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.92rem;text-decoration:none;border-radius:999px;padding:.75em 1.2em;border:0;cursor:pointer}
.btn2.solid{background:var(--ink);color:var(--paper)}
.btn2.line{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);background:none}
.sec{width:var(--wide);margin:0 auto;padding-top:clamp(72px,10vw,120px)}
.sec h2{font-weight:400;font-size:clamp(1.9rem,1.3rem + 2vw,3rem);line-height:1.05;margin:0 0 .3em}
.sec>p{color:var(--muted);margin:0 0 24px;font-size:1.05rem}
.gallery{columns:4 240px;column-gap:12px}
.gallery figure{margin:0 0 12px;break-inside:avoid;border-radius:10px;overflow:hidden}
.gallery img{width:100%;height:auto;display:block;background:var(--paper-2)}
.gallery .pa button{height:32px;min-width:32px;padding:0 9px}
@media (max-width:899px){.guides{grid-template-columns:1fr}.gallery{columns:2 140px;column-gap:6px}.gallery figure{margin-bottom:6px;border-radius:6px}.gallery .pa{right:6px;bottom:6px;gap:4px}.gallery .pa button{height:30px;min-width:30px;padding:0 7px}}

/* ---------- about ---------- */
.about-grid{width:var(--wide);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,88px);align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.about-grid .pic{margin:0;position:sticky;top:96px}
.about-grid .pic img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:18px}
.about-grid .pic figcaption{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:.8em}
.about-grid h1{font-weight:400;font-size:clamp(2.6rem,1.6rem + 4vw,4.8rem);line-height:1;letter-spacing:-.025em;margin:0 0 .5em}
.about-grid .bio p{margin:0 0 1.1em;max-width:34em}
.about-grid .sig{font-style:italic;font-size:1.35rem;line-height:1.35;border-left:3px solid var(--shuka);padding-left:1em;margin:1.6em 0 0}
.social{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.social a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.7em 1.1em .7em .8em;border-radius:999px;background:var(--card);border:1px solid var(--rule)}
.social a:hover{border-color:var(--ink)}
.social svg{width:22px;height:22px}
.contact{background:var(--card);border-block:1px solid var(--rule);padding:clamp(64px,10vw,112px) 0}
.contact-in{width:var(--wide);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px)}
.contact h2{font-weight:400;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);line-height:1.05;margin:0 0 .4em}
.contact p{color:var(--muted);margin:0 0 1em}
.contact .mail{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);color:var(--ink);text-underline-offset:4px;word-break:break-all}
form.cf{display:grid;gap:14px}
form.cf label{display:grid;gap:6px;font-family:var(--sans);font-size:.88rem;font-weight:600}
form.cf input,form.cf textarea{font:inherit;font-family:var(--serif);font-size:1.05rem;padding:.8em .9em;border-radius:12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
form.cf textarea{min-height:150px;resize:vertical}
form.cf .note{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:0}
@media (max-width:899px){.about-grid,.contact-in{grid-template-columns:1fr}.about-grid .pic{position:static;max-width:420px}}

/* ---------- journal layout: sidebar on wide screens, chapters sheet on phones ---------- */
.jwrap{display:block}
.side{display:none}
.chap-btn{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:35;display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--paper);background:var(--ink);border:0;cursor:pointer;padding:.8em 1.15em;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media (max-width:899px){.chap-btn{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media (min-width:1200px){
  .jwrap{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;width:min(1360px,96vw);margin:0 auto}
  .jwrap{--wide:min(1000px,100%)}
  .side{display:block;position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto;padding:40px 8px 40px 0;scrollbar-width:thin}
  .side h3{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--shuka);margin:1.6em 0 .5em}
  .side ol{list-style:none;margin:0;padding:0}
  .side a{display:grid;grid-template-columns:1.8em 1fr;padding:.38em .6em;border-radius:8px;text-decoration:none;font-size:.98rem;line-height:1.3;color:var(--muted)}
  .side a span{font-family:var(--sans);font-size:.78rem;padding-top:.2em}
  .side a:hover{color:var(--ink);background:var(--paper-2)}
  .side a.here{color:var(--ink);background:var(--card);box-shadow:inset 3px 0 0 var(--shuka)}
  .chap-btn{display:none}
  .chapter{padding-top:96px}
}
.sheet{position:fixed;inset:0;z-index:60}
.sheet .scrim{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:82svh;overflow:auto;background:var(--paper);border-radius:20px 20px 0 0;padding:14px 20px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet.open .scrim{opacity:1}.sheet.open .panel{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--rule);margin:0 auto 12px}
.sheet h3{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--shuka);margin:1.2em 0 .3em}
.sheet ol{list-style:none;margin:0;padding:0}
.sheet a{display:grid;grid-template-columns:2em 1fr;padding:.65em 0;border-top:1px solid var(--rule);text-decoration:none;line-height:1.3}
.sheet a span{font-family:var(--sans);font-size:.8rem;color:var(--muted);padding-top:.2em}

/* ---------- footer ---------- */
.site-foot{background:#17130F;color:#E9E1D2;margin-top:0}
.site-foot-in{width:var(--wide);margin:0 auto;padding:clamp(48px,7vw,80px) 0 28px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px 48px}
.site-foot .fb b{font-family:var(--serif);font-weight:500;font-size:2rem;display:block;line-height:1}
.site-foot .fb span{font-family:var(--sans);font-size:.9rem;color:#B9AE9E}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;justify-items:start}
.site-foot ul a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--sans);font-size:.95rem}
.site-foot ul a:hover{text-decoration:underline;text-underline-offset:3px}
.site-foot svg{width:20px;height:20px}
.site-foot .copy{grid-column:1/-1;border-top:1px solid rgba(233,225,210,.15);padding-top:20px;font-family:var(--sans);font-size:.82rem;color:#B9AE9E;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.site-foot .copy a{color:inherit}
@media (max-width:899px){.site-foot-in{grid-template-columns:1fr}}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.home-hero img{animation:none}.home-hero h1 span,.home-hero .hint{opacity:1;transform:none;animation:none}}
/* photos: a comfortable size on big screens, edge to edge on phones; full size opens on tap */
@media (min-width:761px){.ph.land{width:min(860px,var(--wide))}.pair{width:min(860px,var(--wide))}.ph.port{width:min(480px,90vw)}}
.gp{margin:0 0 12px;break-inside:avoid;border-radius:10px;overflow:hidden}
.gp img{width:100%;height:auto;display:block;background:var(--paper-2)}
@media (max-width:899px){.gp{margin-bottom:6px;border-radius:6px}}
.finale .last .btn.ghost{background:none;color:var(--on-night);box-shadow:inset 0 0 0 1.5px var(--on-night);margin-left:8px}
@media (max-width:899px){.home-hero img{object-position:72% 50%}}

/* ================= desktop refinements (mobile untouched) ================= */
@media (min-width:900px){
  /* home: header sits on the cover photo, turns cream once you reach the words */
  .page-home .site-head{position:fixed;left:0;right:0;background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#FFF7EC;transition:background .35s ease,color .35s ease,border-color .35s ease}
  .page-home .site-head .nav a[aria-current="page"]{border-color:transparent}
  .page-home .site-head.solid{background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--rule);color:var(--ink)}
  .page-home .home-hero{height:100svh;max-height:none}
  .page-home .home-hero::after{background:linear-gradient(180deg,rgba(30,18,12,.35),rgba(30,18,12,0) 22%,rgba(30,18,12,0) 60%,rgba(30,18,12,.4))}

  /* journal: text column fills the page, no empty side gaps */
  .page-kenya .route{width:min(1080px,92vw);gap:56px;padding-bottom:clamp(64px,8vw,100px);align-items:start}
  .page-kenya .prologue{padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,96px)}
  .page-kenya .chapter{padding-top:72px}
  .page-kenya .chapter>p,.page-kenya .ch-head,.page-kenya .next{width:min(46rem,92vw)}
  .page-kenya .pull{width:min(46rem,92vw);margin:1.8em auto 2em}
  /* photos: medium or small depending on shape; tap to see them large */
  .page-kenya .ph{margin:1.8em auto}
  .page-kenya .ph.land{width:min(600px,92vw)}
  .page-kenya .ph.land.wide{width:min(720px,92vw)}
  .page-kenya .ph.port{width:min(340px,92vw)}
  .page-kenya .ph.sq{width:min(460px,92vw)}
  .page-kenya .pair{width:min(600px,92vw);margin:1.8em auto;gap:10px}
}
@media (min-width:1200px){
  .page-kenya .jwrap{grid-template-columns:240px minmax(0,46rem);justify-content:center;gap:64px;width:min(1180px,96vw)}
  .page-kenya .jwrap{--wide:100%}
  .page-kenya .jwrap .chapter>p,.page-kenya .jwrap .ch-head,.page-kenya .jwrap .next,.page-kenya .jwrap .pull{width:100%}
  .page-kenya .chapter{padding-top:64px}
}
@media (max-width:899px){.home-hero .hint{display:none}}

.view[hidden]{display:none!important}