@font-face{
  font-family:"Bricolage";
  src:url("font-bricolage.woff2") format("woff2");
  font-weight:200 800;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("font-newsreader.woff2") format("woff2");
  font-weight:200 800;
  font-display:swap;
}

:root{
  --gutter:clamp(1.25rem,5vw,3rem);
  --max:68rem;
  --display:"Bricolage","Helvetica Neue",Arial,sans-serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:#0a1a28;
  color:#eaf4fa;
  font-family:var(--text);
  font-size:clamp(1.125rem,1.05rem + .4vw,1.3rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:.08em}
a:focus-visible,.strip:focus-visible,.btn:focus-visible{outline:3px solid currentColor;outline-offset:4px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:35% 50%;
}
.hero__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,#0a1a28 0%,rgba(10,26,40,.78) 22%,rgba(10,26,40,.12) 60%,rgba(10,26,40,.38) 100%);
}
.hero__text{
  position:relative;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:0 var(--gutter) clamp(2rem,6vw,4rem);
}
.hero__name{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(4.4rem,23vw,13rem);
  line-height:.84;
  letter-spacing:-.045em;
}
.hero__name span{display:block;overflow:hidden;padding-bottom:.06em}
.hero__name span::before{content:none}
.hero__line{
  margin:1.4rem 0 0;
  font-size:clamp(1.15rem,3.6vw,1.6rem);
  max-width:24ch;
  line-height:1.35;
}

/* ---------- Chapters: each one is a climate ---------- */
.chapter{
  --prev:#0a1a28;
  --bg:#0a1a28;
  --ink:#eaf4fa;
  color:var(--ink);
  --blend:clamp(7rem,32vw,14rem);
  background:linear-gradient(to bottom,var(--prev) 0,var(--bg) var(--blend));
  padding-top:calc(var(--blend) + 1rem);
  padding-bottom:clamp(5rem,16vw,10rem);
}
.chapter .wrap + .wrap{margin-top:clamp(2rem,6vw,4rem)}

.ice   {--prev:#0a1a28;--bg:#e4eef3;--ink:#0b2133}
.fjord {--prev:#e4eef3;--bg:#0f3b5c;--ink:#eaf4fa}
.ochre {--prev:#0f3b5c;--bg:#eba33a;--ink:#2a1606}
.green {--prev:#eba33a;--bg:#1c4a37;--ink:#eef4e8}
.night {--prev:#1c4a37;--bg:#09131c;--ink:#eaf4fa}

h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem,10vw,5rem);
  line-height:.95;
  letter-spacing:-.035em;
  margin:0 0 1.2rem;
  text-wrap:balance;
}
h2.big{
  font-size:clamp(2.7rem,11.5vw,7.2rem);
  line-height:.92;
  letter-spacing:-.04em;
  max-width:14ch;
  margin-bottom:0;
}
.night h2.big{margin-bottom:1.2rem}
p{margin:0 0 1.15em;max-width:36em}
.lead{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.75rem);line-height:1.4;font-weight:400}

/* split layout: text + photo */
.split{display:grid;gap:2.5rem}
.split__photo img{width:100%;border-radius:.2rem}
.split__photo.tall img{aspect-ratio:3/4;object-fit:cover}

/* ---------- Polar ---------- */
.prose .lead{max-width:24em}
.note{
  margin:2.2rem 0 0;
  padding:0 0 0 1.2rem;
  border-left:3px solid currentColor;
  max-width:34em;
}
.note p{margin:0 0 1.4em;font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.55}
.note footer{font-family:var(--display);font-weight:600;font-size:.95rem;opacity:.8}
.links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.8rem;font-family:var(--display);font-weight:600;font-size:1rem}
.bleed{margin-top:clamp(3rem,9vw,6rem)}
.bleed img{width:100%;max-height:85vh;object-fit:cover;object-position:50% 40%}
.bleed figcaption{padding-top:.8rem;font-size:.95rem;opacity:.8}

/* ---------- Polar: numbers, route, film, portrait ---------- */
.polar-stats{
  display:grid;grid-template-columns:1fr;gap:1.2rem;
  margin-top:clamp(2.5rem,7vw,4.5rem);
}
.stat{display:flex;align-items:baseline;gap:1rem;font-family:var(--display)}
.stat b{
  font-weight:800;font-size:clamp(4.5rem,24vw,10rem);line-height:.82;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;color:#9fd4f2;min-width:2.2ch;
}
.stat span{font-weight:600;font-size:clamp(1.1rem,4.4vw,1.6rem);line-height:1.1;max-width:10em}
.route{position:relative;margin-top:clamp(1.5rem,5vw,3rem);height:clamp(70px,14vw,120px)}
.route svg{display:block;width:100%;height:100%;overflow:visible}
.route path{fill:none;vector-effect:non-scaling-stroke}
.route__track{stroke:currentColor;stroke-width:2;stroke-dasharray:3 9;opacity:.3}
.route__line{stroke:#9fd4f2;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.5,0,.2,1)}
.route.armed .route__line{stroke-dashoffset:1}
.route.armed.in .route__line{stroke-dashoffset:0}
.route__a,.route__b{position:absolute;bottom:-1.6rem;font-family:var(--display);font-weight:600;font-size:.85rem;opacity:.75}
.route__a{left:var(--gutter)}
.route__b{right:var(--gutter)}
.polar-film{
  position:relative;margin-top:clamp(4rem,10vw,7rem);
  background:#07243a;
}
.polar-film video{
  width:100%;aspect-ratio:4/5;max-height:88svh;object-fit:cover;object-position:62% 50%;
  border-radius:0;
}
.polar-film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,22,36,.88) 0,rgba(5,22,36,.25) 38%,transparent 62%);
}
.polar-film figcaption{
  position:absolute;z-index:1;left:0;right:0;bottom:0;margin-inline:auto;
  padding-bottom:clamp(1.5rem,5vw,3.5rem);color:#fff;
}
.polar-film q{
  display:block;max-width:14em;quotes:"“" "”";
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.9rem,8.4vw,4.4rem);text-wrap:balance;
}
.polar-duo{display:grid;gap:2.2rem;margin-top:clamp(3rem,9vw,6rem);align-items:start}
.polar-duo__photo{position:relative}
.polar-duo__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.2rem}
.polar-duo__photo figcaption{
  position:absolute;left:-.4rem;bottom:1.2rem;
  background:#9fd4f2;color:#07243a;padding:.5rem .9rem;
  font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.005em;
  transform:rotate(-2deg);
}
.polar-duo__text .lead{margin-top:0}
.polar-duo__text .note{margin-top:1.8rem}

/* ---------- Trade ---------- */
.trade{margin-top:clamp(2.5rem,7vw,5rem)}
.trade .split__photo img{aspect-ratio:3/4;object-fit:cover}
.summers{margin-top:clamp(3rem,8vw,6rem)}
.dots{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:clamp(.4rem,1.6vw,.9rem);
}
.dots li{
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid currentColor;
  background:transparent;
  opacity:.55;
  transition:background-color .5s ease, opacity .5s ease;
}
.dots li.on{background:currentColor;opacity:1}
.summers__cap{margin:1rem 0 0;font-family:var(--display);font-weight:600}

/* ---------- Road ---------- */
.tally{
  display:flex;align-items:flex-end;gap:1rem;
  margin:clamp(1.5rem,4vw,2.5rem) 0 0;max-width:none;
  font-family:var(--display);font-weight:800;
}
.tally__n{font-size:clamp(6rem,30vw,13rem);line-height:.8;letter-spacing:-.06em;color:#eba33a}
.tally__t{font-size:clamp(1.3rem,5vw,2.4rem);line-height:1.05;letter-spacing:-.02em;padding-bottom:.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.maps{margin-top:clamp(2rem,6vw,3.5rem)}
.map__h{
  margin:0 0 .6rem;display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,3.4vw,1.35rem);letter-spacing:-.01em;
}
.map__h span{font-weight:800;color:#eba33a}
.hint{margin-left:auto;font-style:normal;font-weight:600;font-size:.85rem;opacity:.7}
@media (min-width:800px){.hint{display:none}}
.map__svg{display:block;height:auto}
.map__land{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;opacity:.4}
.map__pins circle{fill:#eba33a}
.map__pins text{fill:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.map--world{overflow-x:auto;padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.map--world::-webkit-scrollbar{display:none}
.map--world .map__svg{width:max(860px,min(100%,74rem));margin-inline:auto}
.map--world .map__pins text{font-size:12.5px}
.maps__pair{display:grid;gap:clamp(2rem,5vw,3rem);margin-top:clamp(2rem,5vw,3rem)}
.map--small .map__svg{width:100%}
.map--small .map__pins text{font-size:11.5px}
.map:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.strip{
  display:flex;
  gap:clamp(.8rem,2vw,1.4rem);
  margin-top:clamp(2.5rem,7vw,5rem);
  --pad:var(--gutter);
  padding:0 var(--pad);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip figure{
  --hh:min(72svh,34rem);
  flex:0 0 auto;
  scroll-snap-align:start;
}
.strip img{
  width:min(84vw,calc(var(--hh) * var(--w) / var(--h)));
  height:auto;
  aspect-ratio:var(--w) / var(--h);
  object-fit:cover;
  border-radius:.2rem;
}
.strip figcaption{margin-top:.7rem;font-size:.95rem;line-height:1.35;max-width:22ch;opacity:.85}

/* ---------- Contact ---------- */
.cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  text-decoration:none;
  padding:.95rem 1.5rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  border:2px solid var(--ink);
}
.btn--ghost{background:transparent;color:var(--ink)}
.btn:hover{opacity:.88}

.foot{background:#09131c;color:#9fb4c4;padding:0 0 3rem;font-size:.9rem}
.foot p{margin:0;max-width:46em}

/* ---------- Larger screens ---------- */
@media (min-width:800px){
  .split{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,7vw,6rem);align-items:start}
  .split__photo{margin-top:clamp(2rem,8vw,6rem)}
  .dots{grid-template-columns:repeat(18,1fr)}
  .polar-stats{grid-template-columns:repeat(3,1fr);gap:2rem}
  .stat{flex-direction:column;align-items:flex-start;gap:.6rem}
  .polar-film video{aspect-ratio:16/9;max-height:84vh;object-position:62% 70%}
  .polar-duo{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,6rem)}
  .polar-duo__photo{position:sticky;top:2rem}
  .maps__pair{grid-template-columns:1fr 1fr;align-items:start}
  .strip{--pad:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
  .strip figure{--hh:min(70vh,36rem)}
}

/* ---------- One orchestrated moment: the name lands once ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero__name span{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
  .hero__name span:nth-child(2){animation-delay:.12s}
  .hero__line{animation:fade 1s .5s ease both}
  @keyframes rise{from{transform:translateY(105%)}to{transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dots li{transition:none}
}