:root{
  --t-bg:#F2F5F7; --t-card:#FFFFFF; --t-ink:#16303E; --t-mut:#5E7787; --t-faint:#93A7B3;
  --t-line:#DDE6EB; --t-acc:#149CB4; --t-navy:#123F4F; --t-sea:#0B1B26;
  --t-shadow:0 10px 34px rgba(18,63,79,.10);
  --t-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--t-bg); color:var(--t-ink); font-family:var(--t-sans);
  font-size:16px; line-height:1.55}
a{color:var(--t-acc); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--t-acc); outline-offset:2px; border-radius:6px}
img{display:block}

.t-shell{display:grid; grid-template-columns:minmax(0,1fr) clamp(380px,44vw,680px); min-height:100dvh}
.t-feed{padding:28px clamp(18px,4vw,56px) 60px; max-width:860px}
.t-map-wrap{position:sticky; top:0; height:100dvh; background:var(--t-sea)}
#t-map{width:100%; height:100%}

/* header */
.t-crumbs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 22px}
.t-crumbs a{font-size:13.5px; font-weight:600; color:var(--t-mut)}
.t-crumbs a:hover{color:var(--t-acc); text-decoration:none}
.t-crumbs .sep{color:var(--t-faint); font-size:12px}
.t-top h1{font-size:clamp(28px,3.6vw,40px); line-height:1.08; letter-spacing:-.02em; margin:0 0 12px;
  color:var(--t-navy); font-weight:700}
.t-meta{display:flex; align-items:center; gap:10px; color:var(--t-mut); font-size:14px}
.t-avatar{width:34px; height:34px; border-radius:50%; background:var(--t-navy); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; flex:none}
.t-chips{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 6px}
.t-chips span{background:var(--t-card); border:1px solid var(--t-line); border-radius:999px;
  padding:7px 14px; font-size:13px; font-weight:600; color:var(--t-navy); box-shadow:0 2px 8px rgba(18,63,79,.05)}
.t-chips b{color:var(--t-acc); font-weight:700}
.t-intro{margin:16px 0 2px; max-width:60ch; font-size:16.5px; line-height:1.6; color:var(--t-navy)}

/* timeline feed */
.t-steps{list-style:none; margin:26px 0 0; padding:0 0 0 26px; position:relative}
.t-steps::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px;
  background:var(--t-line); border-radius:2px}
.t-step{position:relative; margin:0 0 30px}
.t-step::before{content:""; position:absolute; left:-26px; top:26px; width:12px; height:12px;
  border-radius:50%; background:var(--t-acc); border:3px solid var(--t-bg); box-shadow:0 0 0 2px var(--t-acc)}
.t-conn{color:var(--t-faint); font-size:13px; font-weight:600; margin:0 0 14px; padding:6px 0}
.t-conn::before{content:"···"; letter-spacing:3px; margin-right:9px; color:var(--t-acc)}
.t-card{background:var(--t-card); border-radius:16px; box-shadow:var(--t-shadow); padding:22px 22px 18px}
.t-when{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:600;
  color:var(--t-faint); text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px}
.t-card h2{font-size:24px; letter-spacing:-.01em; margin:0; color:var(--t-navy)}
.t-region{color:var(--t-mut); font-size:13.5px; margin:3px 0 0}

/* photo carousel — a couple visible, scroll for the rest */
.t-car-wrap{position:relative; margin:16px -22px 0; padding:0 22px}
.t-carousel{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:12px}
.t-carousel::-webkit-scrollbar{display:none}
.t-carousel img{height:300px; width:auto; aspect-ratio:auto 3 / 2; max-width:86%; object-fit:cover; border-radius:12px;
  scroll-snap-align:start; flex:0 0 auto; background:var(--t-line)}
.t-carousel .t-vid{position:relative; height:300px; aspect-ratio:auto 3 / 2; max-width:86%; border-radius:12px; overflow:hidden;
  scroll-snap-align:start; flex:0 0 auto; background:var(--t-line); display:block; padding:0; border:0}
.t-carousel .t-vid img, .t-carousel .t-vid video{width:100%; height:100%; max-width:none; object-fit:cover; display:block}
.t-vid .t-play{position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  background:rgba(11,27,38,.55); backdrop-filter:blur(2px)}
.t-vid .t-play::after{content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff}
.t-vid:hover .t-play{background:rgba(20,156,180,.85)}
.t-lightbox video{max-width:min(96vw,1100px); max-height:88vh; width:auto; height:auto; border-radius:4px;
  background:#000; box-shadow:0 12px 48px rgba(0,0,0,.5)}
.t-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px;
  border-radius:50%; border:0; background:#fff; color:var(--t-navy); font-size:20px; line-height:1;
  cursor:pointer; box-shadow:0 4px 16px rgba(18,63,79,.25); display:none; align-items:center; justify-content:center}
.t-arrow.show{display:flex}
.t-arrow[disabled]{opacity:.35; cursor:default}
.t-arrow.prev{left:8px}
.t-arrow.next{right:8px}
.t-arrow:hover:not([disabled]){color:var(--t-acc)}

/* description — auto-collapsed past a few lines */
.t-desc{margin:16px 0 0; color:var(--t-ink); max-height:5.1em; overflow:hidden; position:relative}
.t-desc p{margin:0 0 .8em}
.t-desc.open{max-height:none}
.t-desc.clamped:not(.open)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2.2em;
  background:linear-gradient(rgba(255,255,255,0), #fff)}
.t-more{display:none; margin:6px 0 0; border:0; background:none; color:var(--t-acc); font-weight:700;
  font-size:14px; cursor:pointer; padding:4px 0; font-family:var(--t-sans)}
.t-more.show{display:inline-block}
.t-more:hover{text-decoration:underline}

.t-foot{margin:44px 0 0; color:var(--t-faint); font-size:12.5px; line-height:1.7}
.t-foot a{font-weight:600}

/* map pins */
.t-pin{display:block; width:46px; height:46px; border-radius:50%; border:3px solid #fff;
  box-shadow:0 3px 12px rgba(0,0,0,.45); overflow:visible; position:relative; background:#fff;
  cursor:pointer; transition:transform .15s ease}
.t-pin img{width:100%!important; height:100%!important; object-fit:cover; border-radius:50%}
.t-pin b{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:#fff; color:var(--t-navy); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.t-pin.on{transform:scale(1.18); z-index:600!important}
.t-pin.on::after{content:""; position:absolute; inset:-7px; border:3px solid var(--t-acc); border-radius:50%}
.leaflet-container{background:var(--t-sea); font-family:var(--t-sans)}
.leaflet-control-attribution{background:rgba(11,27,38,.7)!important; color:#8FA6B2!important; font-size:10px!important}
.leaflet-control-attribution a{color:#B7C9D3!important}

/* mobile: map pinned on top, feed scrolls beneath it */
@media (max-width:900px){
  .t-shell{display:flex; flex-direction:column}
  .t-map-wrap{order:-1; position:sticky; top:0; height:42dvh; z-index:30;
    box-shadow:0 6px 24px rgba(11,27,38,.35)}
  .t-feed{padding-top:22px}
  .t-carousel img{height:230px}
  .t-carousel .t-vid{height:230px}
}
/* click-to-enlarge lightbox, with gallery nav through the step's photos */
.t-lightbox{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(11,27,38,.9); cursor:zoom-out; padding:24px}
.t-lightbox.on{display:flex}
.t-lightbox img{max-width:min(96vw,1100px); max-height:94vh; width:auto; height:auto; border-radius:4px;
  cursor:pointer; box-shadow:0 12px 48px rgba(0,0,0,.5)}
.t-lightbox .lb-nav{position:fixed; top:50%; transform:translateY(-50%); z-index:1; width:52px; height:52px;
  border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center}
.t-lightbox .lb-nav:hover{background:rgba(255,255,255,.28)}
.t-lightbox .lb-prev{left:18px}
.t-lightbox .lb-next{right:18px}
.t-lightbox .lb-bar{position:fixed; bottom:18px; left:0; right:0; display:flex; flex-direction:column;
  align-items:center; gap:5px; pointer-events:none; padding:0 20px}
.t-lightbox .lb-cap{max-width:min(90vw,760px); text-align:center; color:#fff; font-size:16px; line-height:1.4;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.t-lightbox .lb-count{color:rgba(255,255,255,.7); font-family:var(--mono); font-size:12px; letter-spacing:.08em}
@media (max-width:560px){ .t-lightbox .lb-nav{width:44px; height:44px; font-size:22px} .t-lightbox .lb-prev{left:6px} .t-lightbox .lb-next{right:6px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }