:root{
  --ink:#f4f1ec;
  --ink-dim:#a8a29a;
  --bg:#12100e;
  --bg-2:#1a1714;
  --line:#2c2722;
  --accent:#e2a044;
  --accent-soft:#f0c88a;
  --maxw:1180px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
p{margin:0 0 1em}
a{color:inherit}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:linear-gradient(to bottom,rgba(10,9,8,.75),rgba(10,9,8,0));
  backdrop-filter:blur(6px);
}
.brand{
  font-family:var(--serif);font-weight:700;letter-spacing:.14em;
  font-size:1rem;text-decoration:none;color:var(--ink);
}
.brand span{color:var(--accent)}
.topbar nav{display:flex;gap:clamp(.7rem,2vw,1.8rem);flex-wrap:wrap}
.topbar nav a{
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-dim);transition:color .2s;
}
.topbar nav a:hover{color:var(--accent-soft)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;display:grid;padding:0}
/* The hero photograph lives here, not in the markup, so a wide panoramic crop
   can be swapped in by media query. The <img> in the HTML is hidden: at 800px
   it is only a thumbnail, and it cannot be re-pointed from CSS. */
.hero{
  background-image:url("img/IMG_1692.jpg");
  background-size:cover;background-position:50% 45%;background-repeat:no-repeat;
  background-color:#12100e;
}
.hero-img{display:none}
@media (min-aspect-ratio:16/9){
  .hero{background-image:url("img/pano-scaled.jpg");background-position:50% 50%}
}
/* Absolutely positioned, not a grid item: a percentage height inside an
   auto-sized grid row resolves to auto, which stops object-fit:cover working
   and lets the image push the hero copy below the fold on wide, short screens. */
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;
  transform:scale(1.04);filter:saturate(.95) contrast(1.02);
}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(10,9,8,.6) 0%,rgba(10,9,8,.12) 28%,rgba(10,9,8,.72) 72%,rgba(10,9,8,.94) 100%),
    linear-gradient(to right,rgba(10,9,8,.75) 0%,rgba(10,9,8,.25) 45%,rgba(10,9,8,0) 75%);
}
.hero-copy{
  grid-area:1/1;align-self:end;justify-self:start;
  position:relative;z-index:2;
  padding:0 clamp(1.2rem,5vw,4rem) clamp(3.5rem,9vh,7rem);
  max-width:min(900px,92%);
  text-shadow:0 1px 3px rgba(8,7,6,.95),0 3px 16px rgba(8,7,6,.9),0 10px 44px rgba(8,7,6,.8);
}
.kicker{
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1rem;
}
/* A dark pool sitting directly behind the hero text only, so the words read
   strongly without muddying the whole photograph. */
.hero-copy::before{
  content:"";position:absolute;inset:-12% -25% -25% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(115% 85% at 22% 78%,
    rgba(8,7,6,.95) 0%,rgba(8,7,6,.82) 35%,rgba(8,7,6,.45) 60%,rgba(8,7,6,0) 80%);
}
.hero h1{
  font-size:clamp(2.8rem,8.4vw,6.4rem);font-weight:700;
  letter-spacing:-.02em;text-wrap:balance;
  /* layered: a tight dark edge for legibility, then a wide soft halo that
     knocks back whatever busy part of the photo sits behind the words */
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 2px 10px rgba(0,0,0,.9),
    0 8px 34px rgba(0,0,0,.92),
    0 16px 70px rgba(0,0,0,.75);
}
.lede{margin-top:1.1rem;font-size:clamp(1rem,2.2vw,1.25rem);color:var(--ink-dim);max-width:44ch}
.scroll-cue{
  position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;
  width:26px;height:42px;border:1.5px solid rgba(244,241,236,.4);border-radius:14px;
}
.scroll-cue::after{
  content:"";position:absolute;left:50%;top:9px;translate:-50% 0;
  width:3px;height:8px;border-radius:2px;background:var(--accent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1}70%{opacity:0;transform:translateY(12px)}}

/* ---------- shared ---------- */
section{padding-block:clamp(3.5rem,9vw,7rem);padding-inline:clamp(1.2rem,5vw,2.5rem)}
.section-title{
  font-size:clamp(1.6rem,4vw,2.6rem);text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem);
  letter-spacing:-.01em;
}
.section-title::after{
  content:"";display:block;width:54px;height:2px;background:var(--accent);
  margin:.9rem auto 0;border-radius:2px;
}
.caption{
  text-align:center;color:var(--ink-dim);font-size:.9rem;
  max-width:60ch;margin-inline:auto;margin-top:1.4rem;
}

.intro{
  max-width:64ch;margin-inline:auto;text-align:center;
  font-size:clamp(1.05rem,2.4vw,1.3rem);color:#ddd6cc;
  padding-block:clamp(3rem,7vw,5rem);
}

/* ---------- journey ---------- */
.journey{max-width:var(--maxw);margin-inline:auto}
.stop{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  margin-bottom:0;
  position:relative;
}
/* Rows interlock rather than stack: each stop is pulled up into the previous
   one's gutter. Safe because consecutive stops put their photo on opposite
   sides, so the overlap happens in empty column space, not on top of text. */
.stop + .stop{margin-top:clamp(-5rem,-6vh,-1.5rem)}
.stop:nth-child(odd){z-index:1}
.stop:nth-child(even) .stop-img{order:2}
.stop-img{position:relative;display:flex;justify-content:center}
.shot{
  width:auto;height:auto;max-width:100%;max-height:min(52vh,540px);
  border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.stop-date{
  display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.7rem;
}
.stop-text h3{font-size:clamp(1.35rem,3.2vw,2rem);margin-bottom:.7rem;text-wrap:balance}
.stop-text p{color:var(--ink-dim);margin:0}

/* ---------- route ---------- */
.route{background:var(--bg-2);border-block:1px solid var(--line)}
.map-img{
  width:100%;max-width:860px;height:auto;margin-inline:auto;border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  max-width:var(--maxw);margin-inline:auto;text-align:center;
  padding-block:clamp(2.5rem,6vw,4rem);
}
.stats div{display:flex;flex-direction:column;gap:.35rem}
.stats strong{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);color:var(--accent);line-height:1}
.stats span{font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim)}


/* ---------- clips ---------- */
.clips{max-width:var(--maxw);margin-inline:auto}
.clip-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(.8rem,2vw,1.4rem);justify-items:center;
}
.clip-row video{
  width:100%;max-width:330px;height:auto;border-radius:4px;background:#000;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}

/* ---------- gallery ---------- */
.gallery{background:var(--bg-2);border-block:1px solid var(--line)}
.grid{
  max-width:1400px;margin-inline:auto;
  columns:4 260px;column-gap:14px;
}
.tile{
  display:block;width:100%;padding:0;margin:0 0 14px;border:0;background:none;
  cursor:zoom-in;break-inside:avoid;border-radius:3px;overflow:hidden;
  transition:transform .28s ease,filter .28s ease;
}
.tile img{width:100%;height:auto;filter:brightness(.92)}
.tile:hover{transform:translateY(-3px)}
.tile:hover img{filter:brightness(1.05)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- about / early ---------- */
/* Masonry columns: every photo keeps its own shape, so nothing is cropped.
   height:auto is required - the width/height attributes on each <img> are
   presentational hints that otherwise override any CSS sizing. */
.about{max-width:900px;margin-inline:auto}
.early{columns:3 240px;column-gap:14px}
.early-shot{
  width:100%;height:auto;margin:0 0 14px;
  break-inside:avoid;border-radius:3px;
}
@media (max-width:640px){
  .early{columns:2 140px;column-gap:10px}
  .early-shot{margin-bottom:10px}
}

/* ---------- footer ---------- */
footer{
  text-align:center;padding:clamp(2.5rem,6vw,4rem) 1.2rem;
  border-top:1px solid var(--line);color:var(--ink-dim);font-size:.88rem;
}
.brand-foot{
  font-family:var(--serif);letter-spacing:.2em;color:var(--ink);
  font-size:.95rem;margin-bottom:.6rem;
}
.brand-foot span{color:var(--accent)}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(8,7,6,.96);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:3px}
.lightbox button{
  position:absolute;background:none;border:0;color:var(--ink);
  cursor:pointer;line-height:1;padding:.4rem .8rem;
  font-size:2.6rem;opacity:.6;transition:opacity .2s;
}
.lightbox button:hover{opacity:1}
.lb-close{top:.6rem;right:1rem;font-size:2.8rem}
.lb-prev{left:.4rem;top:50%;translate:0 -50%}
.lb-next{right:.4rem;top:50%;translate:0 -50%}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .stop{grid-template-columns:1fr;gap:1.2rem}
  .stop:nth-child(even) .stop-img{order:0}
  .shot{max-height:52vh}
  .stop + .stop{margin-top:0}
  .stop{margin-bottom:clamp(2rem,6vw,3rem)}
  .stats{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .topbar nav{display:none}
  .grid{columns:2 150px;column-gap:10px}
  .tile{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}