/* ===========================================================================
   1. COLOURS
   Change these six values and the whole site changes colour.
   =========================================================================== */
:root{
  --paper:#f4f4f2;      /* page background            */
  --ink:#191a1c;        /* main text                  */
  --muted:#6c6f75;      /* captions, dates, notes     */
  --body:#3d4045;       /* paragraph text             */
  --rule:#dededa;       /* hairlines between sections */
  --accent:#4e657e;     /* the slate blue             */
  --accent-lt:#6d87a3;
  --tint:#e9edf1;       /* tool chips                 */
  --card:#ffffff;
  --card-line:#e3e3df;
  --dark:#1c1e21;       /* the inverted flying band   */
  --dark-body:#bfc3c9;
  --dark-rule:#43464b;
  --dark-accent:#9db3c9;
  --maxw:1440px;
}
/* Dark mode. Follows the visitor's system setting; the header toggle overrides. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141517; --ink:#eceded; --muted:#9a9ea5; --body:#c6c9ce; --rule:#2b2d31;
    --accent:#9db3c9; --accent-lt:#b6c7d8; --tint:#232830; --card:#1b1d20;
    --card-line:#2b2d31; --dark:#0e0f11; --dark-body:#b4b8be; --dark-rule:#33363b;
  }
}
:root[data-theme="dark"]{
  --paper:#141517; --ink:#eceded; --muted:#9a9ea5; --body:#c6c9ce; --rule:#2b2d31;
  --accent:#9db3c9; --accent-lt:#b6c7d8; --tint:#232830; --card:#1b1d20;
  --card-line:#2b2d31; --dark:#0e0f11; --dark-body:#b4b8be; --dark-rule:#33363b;
}

/* ===========================================================================
   2. BASE
   =========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-lt); text-decoration:underline}
.serif{font-family:'Instrument Serif',Georgia,'Times New Roman',serif; font-weight:400}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,80px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===========================================================================
   3. HEADER
   =========================================================================== */
header.top{border-bottom:1px solid var(--ink); position:sticky; top:0; z-index:40;
  background:var(--paper); backdrop-filter:saturate(180%) blur(6px)}
.top-in{display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding-top:20px; padding-bottom:20px}
.brand{font-size:clamp(20px,2.4vw,26px); letter-spacing:-0.01em}
nav.main{display:flex; gap:clamp(14px,2vw,30px); align-items:baseline; flex-wrap:wrap}
nav.main a{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--muted)}
nav.main a:hover{color:var(--ink); text-decoration:none}
nav.main a.cta{color:var(--accent); border-bottom:1px solid var(--accent-lt)}
.theme-btn{background:none;border:1px solid var(--rule);color:var(--muted);cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;padding:6px 10px;border-radius:3px}
.theme-btn:hover{color:var(--ink);border-color:var(--muted)}

/* ===========================================================================
   4. HERO  —  headline left, logbook rail in the margin, glider underneath
   =========================================================================== */
.hero{border-bottom:1px solid var(--rule); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:230px minmax(0,1fr) clamp(260px,24vw,380px);
  gap:clamp(24px,3.4vw,48px); padding:clamp(40px,6vw,68px) 0 24px; align-items:start}
.subhead{font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--body); margin:22px 0 0; max-width:640px}
.hero-photo{margin:0; position:relative}
.hero-photo img{width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--tint)}
.hero-photo figcaption{font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:9px}
.rail{display:flex; flex-direction:column; gap:18px; padding-top:10px}
.rail-lbl{font-size:11px; letter-spacing:.14em; color:var(--accent)}
.rail-item{border-top:1px solid var(--rule); padding-top:13px}
.rail-num{font-size:clamp(34px,4vw,48px); line-height:1}
.rail-cap{font-size:11px; color:var(--muted); margin-top:4px}
h1.headline{font-size:clamp(46px,7vw,96px); line-height:0.98; letter-spacing:-0.02em; margin:0; max-width:900px}
h1.headline em{font-style:italic; color:var(--accent)}
.hero-lower{display:flex; gap:clamp(20px,3vw,44px); margin-top:30px; align-items:flex-start; flex-wrap:wrap}
.intro{max-width:480px; font-size:clamp(16px,1.3vw,18px); line-height:1.65; color:var(--body)}
.mnote{border-left:2px solid var(--accent-lt); padding-left:18px; max-width:270px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.7; color:var(--muted)}
.mnote b{display:block; font-weight:400; letter-spacing:.1em; color:var(--accent); margin-bottom:7px; font-size:11px}

/* the 3D model */
.glider-zone{position:relative; padding-bottom:20px; min-height:300px}
#glider{width:100%; height:clamp(260px,34vw,460px); display:block; cursor:grab}
#glider:active{cursor:grabbing}
#glider-fallback{width:100%; max-width:760px; margin-left:auto; display:none}
.glider-note{max-width:340px; border-top:1px solid var(--rule); padding-top:14px; margin-top:-10px}
.glider-note b{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--accent); display:block; margin-bottom:6px}
.glider-note span{font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.7; color:var(--muted)}

/* the dated "currently" line */
.currently{border-bottom:1px solid var(--rule); padding:18px 0; display:flex; gap:16px; align-items:baseline; flex-wrap:wrap}
.currently .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--accent); white-space:nowrap}
.currently .txt{font-size:15px; color:var(--body); line-height:1.6}
.currently .when{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-left:auto; white-space:nowrap}

/* ===========================================================================
   5. SECTION HEADINGS  (these pin to the top as you scroll past them)
   =========================================================================== */
section{padding:clamp(36px,5vw,58px) 0 0}
.shead{display:flex; align-items:baseline; gap:20px; margin-bottom:34px; position:sticky; top:69px;
  background:var(--paper); padding:10px 0 8px; z-index:20}
.shead h2{font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(30px,3.6vw,46px); margin:0; letter-spacing:-0.005em}
.shead .line{flex-grow:1; border-bottom:1px solid var(--rule)}
.shead .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--muted); white-space:nowrap}

/* ===========================================================================
   6. WORK SPINE  —  dates in the left margin, notes in the right
   =========================================================================== */
.entry{display:grid; grid-template-columns:260px 1fr 300px; gap:clamp(20px,4vw,56px);
  padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--rule)}
.entry:last-child{border-bottom:none}
.entry .when{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent)}
.entry .where{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-top:6px}
.entry h3{font-size:clamp(21px,2vw,27px); font-weight:600; letter-spacing:-0.01em; margin:0}
.entry .role{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted); margin-top:4px}
.entry p{font-size:16px; line-height:1.7; color:var(--body); margin:13px 0 0; max-width:620px}
.entry .side{border-left:1px solid var(--rule); padding-left:20px}
.entry .side p{font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.75; color:var(--muted); margin:0}
.entry .side figcaption{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-top:8px}
.more-btn{background:none; border:none; border-bottom:1px solid var(--accent-lt); color:var(--accent); cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; padding:0 0 3px; margin-top:6px}

/* ===========================================================================
   7. PROJECT FILTERS + CARD GRID
   =========================================================================== */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.chip{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em; padding:8px 16px;
  border:1px solid var(--card-line); color:var(--body); border-radius:100px; background:none; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s}
.chip:hover{border-color:var(--accent-lt); color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--paper); border-color:var(--accent)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.card{background:var(--card); border:1px solid var(--card-line); text-align:left; padding:0; cursor:pointer;
  display:flex; flex-direction:column; font:inherit; color:inherit;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 26px rgba(0,0,0,.09); border-color:var(--accent-lt)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.card .shot{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--tint)}
.card .in{padding:22px; display:flex; flex-direction:column; gap:9px; flex-grow:1}
.card .kicker{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--accent)}
.card h3{font-size:21px; font-weight:600; letter-spacing:-0.01em; margin:0}
.card p{font-size:14px; line-height:1.6; color:var(--muted); margin:0}
.card .tools{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px}
.tool{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.04em; background:var(--tint); color:var(--accent); padding:4px 10px}
.empty{color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:30px 0}

/* ===========================================================================
   8. PROJECT MODAL
   =========================================================================== */
.modal{position:fixed; inset:0; z-index:100; display:none; padding:clamp(12px,4vw,48px);
  background:rgba(12,13,15,.62); backdrop-filter:blur(3px); overflow-y:auto}
.modal.open{display:block}
.modal-in{background:var(--paper); max-width:1000px; margin:0 auto; border:1px solid var(--card-line);
  padding:clamp(24px,4vw,48px); animation:rise .3s cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:6px}
.modal h3{font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(28px,3.4vw,42px); margin:0; letter-spacing:-0.005em}
.modal .kicker{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--accent); margin-bottom:10px}
.modal p{font-size:16px; line-height:1.7; color:var(--body); max-width:640px}
.close{background:none; border:1px solid var(--rule); color:var(--muted); cursor:pointer; font-size:20px;
  line-height:1; width:38px; height:38px; flex-shrink:0; border-radius:50%}
.close:hover{color:var(--ink); border-color:var(--muted)}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:26px}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--tint)}
.gallery figcaption{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-top:7px}

/* ===========================================================================
   9. THE FLYING BAND  (inverted, so the personal half reads as another place)
   =========================================================================== */
.band{background:var(--dark); color:#f4f4f2; padding:clamp(32px,5vw,54px) clamp(24px,4vw,60px); margin-top:52px}
.band .shead{background:transparent; position:static}
.band .shead h2{color:#f4f4f2}
.band .shead .line{border-color:var(--dark-rule)}
.band .shead .meta{color:#9a9ea5}
.band-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px}
.band .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--dark-accent)}
.band h3{font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(26px,2.8vw,38px); line-height:1.12; margin:10px 0 0}
.band p{font-size:15px; line-height:1.65; color:var(--dark-body); margin:12px 0 0}
.strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:26px}
.strip img{width:100%; aspect-ratio:4/3; object-fit:cover; background:#2a2c30}

/* ===========================================================================
   10. FACTS + FOOTER
   =========================================================================== */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:34px; padding-top:12px}
.facts h4{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--accent);
  margin:0 0 14px; font-weight:400; border-bottom:1px solid var(--rule); padding-bottom:9px}
.facts li{font-size:15px; line-height:1.65; color:var(--body); margin-bottom:9px; list-style:none}
.facts ul{margin:0; padding:0}
.facts .skills{font-size:14px; line-height:1.9; color:var(--body)}
footer{padding:clamp(36px,5vw,58px) 0 clamp(40px,6vw,64px); display:flex; justify-content:space-between;
  align-items:flex-end; gap:30px; flex-wrap:wrap; border-top:1px solid var(--rule); margin-top:44px}
footer .big{font-family:'Instrument Serif',Georgia,serif; font-size:clamp(38px,5vw,56px); line-height:1}
footer .contact{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--accent); margin-top:15px}
footer .links{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); text-align:right; line-height:2}

/* ===========================================================================
   11. MOTION  —  images wipe in, cards rise, margin notes drift
   =========================================================================== */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
.wipe{clip-path:inset(100% 0 0 0); transition:clip-path .8s cubic-bezier(.2,.7,.3,1)}
.wipe.in{clip-path:inset(0 0 0 0)}
.drift{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.wipe{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important}
  .drift{transform:none !important}
  .card{transition:none}
  .modal-in{animation:none}
}

/* ===========================================================================
   12. RESPONSIVE  —  three columns become one
   =========================================================================== */
@media (max-width:1080px){
  .entry{grid-template-columns:180px 1fr}
  .entry .side{grid-column:2; border-left:none; border-top:1px solid var(--rule); padding:14px 0 0}
  .band-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr; gap:0}
  .hero-main{order:1}
  .hero-photo{order:2; margin-top:26px}
  .hero-photo img{aspect-ratio:4/3}
  .rail{order:2; flex-direction:row; gap:0; padding:0; margin-top:28px; border-top:1px solid var(--rule)}
  .rail-lbl{display:none}
  .rail-item{flex:1; border-top:none; border-left:1px solid var(--rule); padding:16px 10px 0}
  .rail-item:first-of-type{border-left:none; padding-left:0}
  .entry{grid-template-columns:1fr; gap:0; }
  .entry .when{margin-bottom:8px}
  .entry .where{display:inline; margin-left:8px}
  .entry .side{grid-column:1}
  .shead{top:63px}
  .band-grid{grid-template-columns:1fr}
  nav.main a:not(.cta):not(.theme){display:none}
  .glider-note{max-width:none}
}

/* ===========================================================================
   13. RECRUITER / PRINT VIEW
   Add ?print to the URL, or hit Cmd-P. Collapses to a clean one-pager.
   =========================================================================== */
body.print-mode .glider-zone,body.print-mode .hero-photo,body.print-mode .card .shot,body.print-mode .strip,
body.print-mode .gallery,body.print-mode .theme-btn,body.print-mode .chips,
body.print-mode .entry .side figure,body.print-mode .modal{display:none !important}
body.print-mode .grid{grid-template-columns:1fr 1fr; gap:10px}
body.print-mode .entry{grid-template-columns:150px 1fr; gap:24px; padding-bottom:18px; margin-bottom:18px}
body.print-mode .entry .side{grid-column:2; border-left:none; padding:8px 0 0}
body.print-mode .more-btn,body.print-mode .currently .when{display:none}
body.print-mode .hero-grid{padding-bottom:8px}
body.print-mode .card{cursor:default; border:none; border-left:2px solid var(--accent); padding-left:12px}
body.print-mode .card .in{padding:6px 0}
body.print-mode .band{background:none; color:var(--ink); padding-left:0; padding-right:0; margin-top:20px}
body.print-mode .band h3,body.print-mode .band p{color:var(--ink)}
body.print-mode .shead{position:static}
body.print-mode h1.headline{font-size:34px}
body.print-mode .reveal,body.print-mode .wipe{opacity:1; transform:none; clip-path:none}
@media print{
  header.top{position:static}
  .glider-zone,.theme-btn,.chips,.strip,.gallery,.modal{display:none !important}
  .band{background:none !important; color:#000 !important}
  .band h3,.band p,.band .lbl{color:#000 !important}
  body{background:#fff}
  .card,.entry{break-inside:avoid}
}

/* ===========================================================================
   14. MULTI-PAGE NAV
   =========================================================================== */
nav.main a.here{color:var(--ink); border-bottom:1px solid var(--ink)}

/* ===========================================================================
   15. FLYING PAGE — logbook stats, the journey timeline, the map
   =========================================================================== */
.page-head{padding:clamp(38px,6vw,68px) 0 30px; border-bottom:1px solid var(--rule)}
.page-head .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--accent); margin-bottom:20px}
.page-head h1{font-family:'Instrument Serif',Georgia,serif; font-weight:400;
  font-size:clamp(40px,6vw,78px); line-height:1.02; letter-spacing:-0.015em; margin:0; max-width:15ch}
.page-head p{font-size:clamp(16px,1.4vw,19px); line-height:1.65; color:var(--body); max-width:620px; margin:24px 0 0}

.logbook-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--rule); margin-top:36px}
.logbook-grid div{border-left:1px solid var(--rule); padding:18px 18px 4px}
.logbook-grid div:first-child{border-left:none; padding-left:0}
.logbook-grid .n{font-family:'Instrument Serif',Georgia,serif; font-size:clamp(28px,3vw,40px); line-height:1}
.logbook-grid .l{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em;
  color:var(--muted); margin-top:7px}

/* the journey */
.timeline{position:relative; padding:10px 0 0 0}
.timeline::before{content:""; position:absolute; left:117px; top:24px; bottom:30px;
  width:1px; background:var(--rule)}
.ms{display:grid; grid-template-columns:100px 36px minmax(0,1fr); gap:0;
  padding:0 0 34px; align-items:start}
.ms .when{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent);
  text-align:right; padding-top:5px; line-height:1.5}
.ms .dot{display:flex; justify-content:center; padding-top:9px}
.ms .dot i{width:9px; height:9px; border-radius:50%; background:var(--accent);
  outline:4px solid var(--paper); display:block}
.ms.big .dot i{width:13px; height:13px; background:var(--ink)}
.ms .body{padding-left:6px}
.ms h3{font-size:clamp(19px,1.8vw,24px); font-weight:600; letter-spacing:-0.01em; margin:0}
.ms .where{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-top:5px}
.ms p{font-size:15px; line-height:1.7; color:var(--body); margin:10px 0 0; max-width:560px}
.ms .media{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px}
.ms .media img.still{width:230px; aspect-ratio:4/3; object-fit:cover; background:var(--tint)}

/* click-to-play video, so nothing from YouTube loads until asked */
.vid{position:relative; width:330px; max-width:100%; aspect-ratio:16/9; background:var(--tint);
  border:none; padding:0; cursor:pointer; overflow:hidden; display:block}
.vid img{width:100%; height:100%; object-fit:cover}
.vid .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.vid .play span{width:58px; height:58px; border-radius:50%; background:rgba(20,22,25,.72);
  display:flex; align-items:center; justify-content:center; transition:background .18s, transform .18s}
.vid:hover .play span{background:var(--accent); transform:scale(1.06)}
.vid iframe{width:100%; height:100%; border:0; display:block}

/* the map */
.map-wrap{border:1px solid var(--card-line); background:var(--card); padding:clamp(14px,2vw,26px); margin-top:8px}
.map-wrap svg{width:100%; height:auto; display:block; overflow:visible}
.ap-dot{fill:var(--accent-lt); transition:r .18s, fill .18s}
.ap-dot.home{fill:var(--ink)}
.ap-g:hover .ap-dot{fill:var(--accent); r:7}
.ap-lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--muted); transition:fill .18s}
.ap-name{font-family:'IBM Plex Mono',monospace; font-size:9.5px; fill:var(--muted);
  opacity:0; transition:opacity .18s}
.ap-g:hover .ap-lbl{fill:var(--accent)}
.ap-g:hover .ap-name{opacity:.85}
.ap-g.home .ap-lbl{fill:var(--ink)}
.scale line,.northmark line,.northmark path{stroke:var(--muted); stroke-width:1; fill:var(--muted)}
.scale text,.northmark text{font-family:'IBM Plex Mono',monospace; font-size:10px;
  fill:var(--muted); letter-spacing:.06em}
.route{fill:none; stroke:var(--accent-lt); stroke-width:1.2; opacity:.42; stroke-linejoin:round}
.map-key{display:flex; gap:24px; flex-wrap:wrap; margin-top:18px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted)}
.map-key b{font-weight:400; color:var(--accent)}

.note-band{background:var(--dark); color:#f4f4f2; padding:clamp(30px,4vw,46px) clamp(24px,4vw,52px);
  margin-top:46px; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.note-band .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--dark-accent)}
.note-band p{font-size:16px; line-height:1.7; color:var(--dark-body); margin:12px 0 0}
.note-band h3{font-family:'Instrument Serif',Georgia,serif; font-weight:400;
  font-size:clamp(26px,3vw,38px); line-height:1.12; margin:0}

@media (max-width:760px){
  .timeline::before{left:5px}
  .ms{grid-template-columns:24px minmax(0,1fr); gap:0}
  .ms .when{grid-column:2; text-align:left; padding:0 0 6px}
  .ms .dot{grid-column:1; grid-row:1 / span 2; padding-top:3px; justify-content:flex-start}
  .ms .body{grid-column:2; padding-left:0}
  .ms .media img.still{width:100%}
  .vid{width:100%}
  .note-band{grid-template-columns:1fr}
  .logbook-grid div{padding-left:14px}
  .logbook-grid div:nth-child(odd){border-left:none; padding-left:0}
}