/* =========================================================
   Our World, So Far
   Aged-paper scrapbook: polaroids, pins, handwriting.
   ========================================================= */

:root{
  /* paper + ink */
  --paper:        #f2e9db;
  --paper-deep:   #e7dac6;
  --paper-card:   #fdfbf6;
  --ink:          #241d18;
  --ink-soft:     #5d514a;
  --ink-faint:    #9a8d83;

  /* map */
  --sea:          #e4dac6;
  --land:         #d4c0a0;
  --land-edge:    #b09a79;
  --grat:         #bda888;
  --visited:      #c05746;

  /* accents */
  --pin:          #b5402f;
  --pin-deep:     #8d2f22;
  --gold:         #b08240;
  --thread:       #c9a227;

  --shadow-lift:  0 1px 2px rgba(36,29,24,.10), 0 8px 22px rgba(36,29,24,.14);
  --shadow-deep:  0 2px 6px rgba(36,29,24,.14), 0 24px 50px rgba(36,29,24,.22);

  --serif:  "Fraunces", Georgia, "Times New Roman", serif;
  --hand:   "Caveat", "Segoe Script", cursive;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* several components below set display, which would otherwise beat [hidden] */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  /* soft vignette + fibre speckle so it reads as paper, not flat beige */
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(255,252,245,.85), rgba(255,252,245,0) 60%),
    radial-gradient(100% 70% at 110% 100%, rgba(170,140,100,.16), rgba(170,140,100,0) 55%),
    radial-gradient(90% 60% at -10% 80%, rgba(170,140,100,.14), rgba(170,140,100,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed, fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* ---------- shared bits ---------- */
.kicker{
  font-family:var(--hand);
  font-size:1.5rem;
  color:var(--pin);
  margin:0 0 .35rem;
  transform:rotate(-1.4deg);
}

.btn{
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.02em;
  border:1px solid rgba(36,29,24,.22);
  background:var(--paper-card);
  color:var(--ink);
  border-radius:999px;
  padding:.55rem 1rem;
  box-shadow:0 1px 2px rgba(36,29,24,.10);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lift); }
.btn:active{ transform:translateY(0); }
.btn--icon{
  width:2.3rem; height:2.3rem; padding:0;
  display:grid; place-items:center;
  font-size:1.05rem; line-height:1;
}
.btn--ghost{ background:transparent; border-style:dashed; }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  padding:.36rem .72rem; border-radius:999px;
  border:1px solid rgba(36,29,24,.2);
  background:transparent; color:var(--ink-soft);
  transition:all .14s ease;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:min(92vh, 780px);
  display:grid;
  align-items:center;
  padding:clamp(3rem,8vw,6rem) 1.25rem 5rem;
  overflow:hidden;
}
.hero__inner{
  position:relative; z-index:3;
  max-width:46rem; margin:0 auto; text-align:center;
}
.hero__tape{
  position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(240px,46vw); height:34px;
  background:linear-gradient(180deg, rgba(222,206,170,.75), rgba(206,186,146,.6));
  box-shadow:0 2px 6px rgba(36,29,24,.12);
  rotate:-1.2deg;
  opacity:.9;
  clip-path:polygon(2% 0,98% 4%,100% 100%,0 96%);
  z-index:4;
}

.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3rem, 11vw, 7rem);
  line-height:.92;
  letter-spacing:-.025em;
  margin:.1em 0 .45em;
}
.hero__title em{
  display:block;
  font-style:italic;
  font-weight:500;
  color:var(--pin);
}

.hero__sub{
  font-size:clamp(1rem,1.6vw,1.12rem);
  line-height:1.65;
  color:var(--ink-soft);
  max-width:34rem; margin:0 auto;
}

/* stat strip */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
  margin:2.75rem auto 0;
  max-width:38rem;
  padding:1.1rem .5rem;
  border-top:1px solid rgba(36,29,24,.16);
  border-bottom:1px solid rgba(36,29,24,.16);
}
.stat{ text-align:center; }
.stats dt{
  font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-faint);
  margin-bottom:.3rem;
}
.stats dd{
  margin:0;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,4vw,2.1rem);
  line-height:1;
}

/* floating polaroids behind the title */
.hero__scatter{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__scatter .polaroid{ position:absolute; width:clamp(110px,13vw,186px); }
@media (max-width:860px){
  .hero__scatter .polaroid:nth-child(n+4){ display:none; }
  .hero__scatter .polaroid{ opacity:.5; }
}

.scroll-hint{
  position:absolute; bottom:1.75rem; left:50%; translate:-50% 0;
  z-index:3;
  font-family:var(--hand); font-size:1.2rem;
  color:var(--ink-soft); text-decoration:none;
  display:flex; align-items:center; gap:.4rem;
}
.scroll-hint span{ animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) 1.25rem;
}
.section__head{ max-width:40rem; margin-bottom:2.5rem; }
.section__head h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,5vw,3.1rem);
  line-height:1.05; letter-spacing:-.02em;
  margin:0 0 .5rem;
}
.section__head p{
  margin:0; color:var(--ink-soft); line-height:1.65;
  font-size:1rem;
}

/* =========================================================
   POLAROID
   ========================================================= */
.polaroid{
  background:var(--paper-card);
  padding:.6rem .6rem 0;
  border-radius:2px;
  box-shadow:var(--shadow-lift);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
  will-change:transform;
}
.polaroid__img{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:linear-gradient(145deg,#c7b8a2,#9e8f7c);
}
.polaroid__img img{
  width:100%; height:100%; object-fit:cover;
  /* the faint warm cast of a real instant print */
  filter:saturate(.92) contrast(1.03) sepia(.07);
}
.polaroid__cap{
  font-family:var(--hand);
  font-size:1.05rem; line-height:1.15;
  color:#3a2f28;
  padding:.5rem .25rem .62rem;
  min-height:2.6rem;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.polaroid--button{ border:0; display:block; width:100%; padding:.6rem .6rem 0; }
.polaroid--button:hover{ transform:translateY(-5px) rotate(0deg) scale(1.02); box-shadow:var(--shadow-deep); }

/* =========================================================
   MAP
   ========================================================= */
.section--map{ max-width:1320px; }

.mapwrap{ position:relative; }

.map{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  background:var(--sea);
  box-shadow:
    inset 0 0 0 1px rgba(36,29,24,.14),
    inset 0 0 90px rgba(120,95,60,.22),
    var(--shadow-lift);
  touch-action:none;
  cursor:grab;
}
.map.is-dragging{ cursor:grabbing; }
.map svg{ display:block; width:100%; height:auto; }

/* map paint */
#worldSvg .sea{ fill:var(--sea); }
#worldSvg .grat{ fill:none; stroke:var(--grat); stroke-width:.4; opacity:.5; }
#worldSvg .outline{ fill:none; stroke:rgba(36,29,24,.3); stroke-width:.8; }
#worldSvg .country{
  fill:var(--land);
  stroke:var(--land-edge);
  stroke-width:.3;
  vector-effect:non-scaling-stroke;
  transition:fill .3s ease;
}
#worldSvg .country.is-visited{ fill:var(--visited); fill-opacity:.42; }
#worldSvg .land-shadow{ fill:rgba(90,70,45,.3); }

/* pins live in an overlay so they never scale with the map */
.map__pins{ position:absolute; inset:0; pointer-events:none; }

.pin{
  position:absolute;
  translate:-50% -100%;
  pointer-events:auto;
  border:0; background:none; padding:0;
  line-height:0;
  filter:drop-shadow(0 3px 4px rgba(36,29,24,.35));
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
  transform-origin:50% 100%;
  z-index:2;
}
.pin:hover,.pin:focus-visible{ transform:scale(1.22); z-index:5; outline:none; }
.pin svg{ display:block; }
.pin__head{ fill:var(--pin); }
.pin__shine{ fill:rgba(255,255,255,.4); }
.pin__stem{ stroke:var(--pin-deep); }

.pin__label{
  position:absolute;
  left:50%; bottom:calc(100% + 4px);
  translate:-50% 0;
  font-family:var(--hand); font-size:1rem; white-space:nowrap;
  background:var(--paper-card);
  padding:.1rem .45rem;
  border-radius:2px;
  box-shadow:0 1px 3px rgba(36,29,24,.25);
  opacity:0; transition:opacity .16s ease;
  pointer-events:none;
}
.pin:hover .pin__label,.pin:focus-visible .pin__label{ opacity:1; }

.pin--cluster .pin__count{
  font-family:var(--sans); font-size:.6rem; font-weight:700;
  fill:#fff;
}

.map__toolbar{
  position:absolute; top:.75rem; right:.75rem; z-index:6;
  display:flex; flex-direction:column; gap:.35rem;
}
.map__filters{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.85rem; flex-wrap:wrap;
}
.map__filters-label{
  font-size:.64rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-faint);
}
.map__legend{
  display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; color:var(--ink-faint);
  margin:.8rem 0 0;
}
.legend-swatch{
  width:1rem; height:.7rem; border-radius:2px;
  background:var(--visited); opacity:.42;
  outline:1px solid var(--land-edge);
}

.map__empty{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(242,233,219,.72); backdrop-filter:blur(2px);
}
.map__empty-card{
  background:var(--paper-card); padding:1.5rem 1.75rem;
  max-width:26rem; text-align:center;
  box-shadow:var(--shadow-deep); border-radius:3px;
  rotate:-.8deg;
}
.map__empty-card h3{ font-family:var(--serif); font-weight:500; margin:0 0 .5rem; font-size:1.3rem; }
.map__empty-card p{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.map__empty-card code{
  font-size:.84em; background:var(--paper-deep);
  padding:.1em .35em; border-radius:2px;
}

/* =========================================================
   TRIPS
   ========================================================= */
.trip{
  padding:2rem 0;
  border-top:1px solid rgba(36,29,24,.14);
}
.trip:first-child{ border-top:0; padding-top:0; }

.trip__head{
  display:flex; align-items:baseline; gap:.9rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.trip__year{
  font-family:var(--serif); font-size:1rem; font-weight:500;
  color:var(--pin);
  background:var(--paper-card);
  border:1px solid rgba(181,64,47,.3);
  border-radius:999px; padding:.15rem .7rem;
}
.trip__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,3vw,2rem);
  margin:0; letter-spacing:-.015em;
}
.trip__where{ font-size:.9rem; color:var(--ink-soft); margin:0; }
.trip__dates{
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-left:auto;
}

/* horizontal polaroid strip, scrollable on small screens */
.trip__strip{
  display:flex; gap:1.6rem;
  overflow-x:auto; overflow-y:hidden;
  padding:1.2rem .25rem 1.8rem;
  margin:0 -.25rem;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.trip__strip::-webkit-scrollbar{ height:7px; }
.trip__strip::-webkit-scrollbar-thumb{ background:rgba(36,29,24,.2); border-radius:99px; }
.trip__strip .polaroid{
  flex:0 0 auto;
  width:clamp(168px,21vw,230px);
  scroll-snap-align:start;
}

/* =========================================================
   BUCKET LIST
   ========================================================= */
.bucket__controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:2rem;
}

.bucket{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1.5rem;
}

.trip-card{
  position:relative;
  background:var(--paper-card);
  border-radius:3px;
  box-shadow:var(--shadow-lift);
  padding:1.4rem 1.4rem 1.5rem;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease;
  overflow:hidden;
}
.trip-card::before{ /* torn top edge */
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 18px);
  opacity:.55;
}
.trip-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-deep); }
.trip-card.is-hidden{ display:none; }
.trip-card.is-picked{
  outline:2px solid var(--pin);
  outline-offset:3px;
  animation:pop .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{ 0%{transform:scale(.97)} 55%{transform:scale(1.035)} 100%{transform:scale(1)} }

.trip-card__stamp{
  position:absolute; top:.9rem; right:.9rem;
  width:62px; height:62px; opacity:.9;
  rotate:8deg;
}
.trip-card__eyebrow{
  font-size:.62rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
  margin:.35rem 0 .3rem;
}
.trip-card__title{
  font-family:var(--serif); font-weight:500;
  font-size:1.5rem; line-height:1.1; letter-spacing:-.015em;
  margin:0 0 .15rem; padding-right:4rem;
}
.trip-card__tag{
  font-family:var(--hand); font-size:1.15rem; color:var(--pin);
  margin:0 0 .9rem;
}
.trip-card__why{
  font-size:.91rem; line-height:1.62; color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.trip-card__moment{
  font-family:var(--hand); font-size:1.14rem; line-height:1.35;
  color:#3a2f28;
  border-left:2px solid var(--thread);
  padding:.1rem 0 .1rem .7rem;
  margin:0 0 1.2rem;
}
.trip-card__facts{
  margin:auto 0 0; padding:.9rem 0 0;
  border-top:1px dashed rgba(36,29,24,.22);
  display:grid; gap:.45rem;
}
.fact{ display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; }
.fact dt{ color:var(--ink-faint); letter-spacing:.02em; }
.fact dd{ margin:0; font-weight:600; text-align:right; }

.bucket__note{
  margin-top:2rem; font-size:.84rem; color:var(--ink-faint);
  line-height:1.6; max-width:40rem;
}

/* =========================================================
   WINS — a thread down the page with cards tied to it
   ========================================================= */
.wins__controls{ margin-bottom:2.25rem; }

.wins{
  list-style:none;
  margin:0; padding:0;
  position:relative;
}
/* the thread */
.wins::before{
  content:""; position:absolute; top:.6rem; bottom:.6rem;
  left:50%; width:2px; translate:-1px 0;
  background:repeating-linear-gradient(180deg,
    var(--thread) 0 7px, transparent 7px 13px);
  opacity:.65;
}

.win{
  position:relative;
  width:calc(50% - 2.6rem);
  margin-bottom:2rem;
}
.win:nth-child(odd){  margin-right:auto; text-align:right; }
.win:nth-child(even){ margin-left:auto; }
.win.is-hidden{ display:none; }

/* the knot on the thread */
.win::after{
  content:""; position:absolute; top:1.4rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--paper-card);
  border:2px solid var(--thread);
  box-shadow:0 1px 3px rgba(36,29,24,.2);
}
.win:nth-child(odd)::after{  right:-3.15rem; }
.win:nth-child(even)::after{ left:-3.15rem; }

.win__card{
  background:var(--paper-card);
  border-radius:3px;
  padding:1.25rem 1.3rem 1.35rem;
  box-shadow:var(--shadow-lift);
  transition:transform .2s ease, box-shadow .2s ease;
  border-left:3px solid var(--gold);
}
.win:nth-child(odd) .win__card{ border-left:0; border-right:3px solid var(--gold); }
.win__card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-deep); }

.win[data-track="Personal"] .win__card{ border-color:var(--pin); }
.win[data-track="Us"] .win__card{ border-color:var(--thread); }
.win[data-track="Personal"]::after{ border-color:var(--pin); }

.win__date{
  font-family:var(--hand); font-size:1.2rem;
  color:var(--pin); margin:0 0 .15rem;
}
.win__track{
  font-size:.6rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .5rem;
}
.win__title{
  font-family:var(--serif); font-weight:500;
  font-size:1.2rem; line-height:1.25; letter-spacing:-.01em;
  margin:0 0 .5rem;
}
.win__detail{
  font-size:.88rem; line-height:1.6; color:var(--ink-soft);
  margin:0;
}
.win__stat{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:2.2rem; line-height:1;
  letter-spacing:-.02em;
  margin:.1rem 0 .1rem;
}
.win__stat-label{
  display:block;
  font-size:.62rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.7rem;
}

.wins__empty{
  text-align:center; padding:2rem 1rem;
  font-family:var(--hand); font-size:1.3rem; color:var(--ink-faint);
}

@media (max-width:760px){
  .wins::before{ left:9px; }
  .win,
  .win:nth-child(odd),
  .win:nth-child(even){
    width:100%; margin-left:0; margin-right:0; text-align:left;
    padding-left:2.1rem;
  }
  .win:nth-child(odd)::after,
  .win:nth-child(even)::after{ left:4px; right:auto; }
  .win:nth-child(odd) .win__card{ border-right:0; border-left:3px solid var(--gold); }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(28,22,18,.88);
  backdrop-filter:blur(5px);
  animation:fade .18s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }

.lightbox__frame{
  margin:0;
  background:var(--paper-card);
  padding:.9rem .9rem 0;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  max-width:min(760px,92vw);
  animation:rise .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1} }
.lightbox__imgwrap{
  background:#1b1714;
  max-height:min(70vh,760px);
  display:grid; place-items:center;
  overflow:hidden;
}
.lightbox__imgwrap img{
  max-height:min(70vh,760px); width:auto;
  filter:saturate(.94) contrast(1.02) sepia(.05);
}
.lightbox__frame figcaption{
  padding:.85rem .3rem 1.1rem;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.lightbox__caption{ font-family:var(--hand); font-size:1.35rem; color:#3a2f28; }
.lightbox__meta{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}

.lightbox__close,.lightbox__nav{
  position:absolute; z-index:3;
  border:0; background:rgba(253,251,246,.14);
  color:#fdfbf6;
  width:2.9rem; height:2.9rem; border-radius:999px;
  display:grid; place-items:center;
  font-size:1.5rem; line-height:1;
  transition:background .15s ease, transform .15s ease;
}
.lightbox__close{ top:1.1rem; right:1.1rem; font-size:1.05rem; }
.lightbox__nav--prev{ left:1.1rem; top:50%; translate:0 -50%; }
.lightbox__nav--next{ right:1.1rem; top:50%; translate:0 -50%; }
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(253,251,246,.3); }

/* =========================================================
   TRIP SHEET
   ========================================================= */
.sheet{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(440px,92vw);
  background:var(--paper);
  box-shadow:-18px 0 50px rgba(36,29,24,.3);
  overflow-y:auto;
  padding:3.25rem 1.6rem 2.5rem;
  animation:slidein .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes slidein{ from{transform:translateX(100%)} to{transform:translateX(0)} }
.sheet__close{
  position:absolute; top:1rem; right:1rem;
  border:0; background:var(--paper-deep);
  width:2.2rem; height:2.2rem; border-radius:999px;
  display:grid; place-items:center; font-size:.9rem;
}
.sheet__title{
  font-family:var(--serif); font-weight:500;
  font-size:1.9rem; line-height:1.08; margin:0 0 .2rem;
}
.sheet__sub{ color:var(--ink-soft); font-size:.9rem; margin:0 0 .3rem; }
.sheet__dates{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.5rem;
}
.sheet__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.sheet__grid .polaroid{ width:100%; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  text-align:center;
  padding:3rem 1.25rem 4rem;
  border-top:1px solid rgba(36,29,24,.14);
  max-width:var(--maxw); margin:0 auto;
}
.footer__hand{
  font-family:var(--hand); font-size:1.9rem;
  color:var(--pin); margin:0 0 .4rem; rotate:-1.5deg;
}
.footer__meta{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:640px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:1rem .5rem; }
  .trip__dates{ margin-left:0; width:100%; }
  .sheet{ width:100%; }
  .sheet__grid{ grid-template-columns:1fr 1fr; }
  .map__toolbar{ top:.5rem; right:.5rem; }
  .bucket{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
}

/* print: a keepsake, why not */
@media print{
  .map__toolbar,.scroll-hint,.bucket__controls,.lightbox,.sheet{ display:none !important; }
  body{ background:#fff; }
  .trip__strip{ overflow:visible; flex-wrap:wrap; }
}