/* ─────────────────────────────────────────────
   TOKENS — glacial water
   shallows → silt → deep channel
   ───────────────────────────────────────────── */
:root{
  --paper:      #fcfdfe;
  --paper-2:    #eef8fb;   /* pale ice */
  --ink:        #101619;
  --ink-muted:  #5a7183;   /* grey-blue */
  --ink-faint:  #8aa0ad;   /* faint grey — small connecting words */
  --hairline:   rgba(4,51,90,.13);

  --accent:      #0b5c8a;  /* mid water — reads blue against ink, safe for small text */
  --accent-hero: #1580b8;  /* display sizes only */
  --accent-deep: #04335a;  /* deepest — filled droplets, hairline mixing */
  --accent-bright:#0b5c8a;
  --accent-soft: rgba(176,229,244,.45);

  --ice:      #b0e5f4;     /* pale cyan */
  --seaglass: #b3e9ec;     /* light blue-green */
  --ice-deep: #7bbdd6;

  --silt-1:#b0e5f4;
  --silt-2:#dff3f9;
  --silt-3:#7bbdd6;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --step--1: clamp(.8rem,  .78rem + .1vw,  .875rem);
  --step-0:  clamp(1rem,   .96rem + .2vw,  1.125rem);
  --step-1:  clamp(1.25rem,1.15rem + .5vw, 1.5rem);
  --step-2:  clamp(1.75rem,1.4rem + 1.6vw, 2.75rem);
  --step-3:  clamp(2.9rem, 1.7rem + 5.2vw, 6.2rem);

  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(2.5rem, 5.5vh, 4.5rem);
  --measure: 66ch;
  --radius:  18px;

  --hero-word-duration: 1.4s;   /* time each rotating word is "on screen" */
  --hero-tagline-pause: .45s;   /* pause after the word settles, before the tagline fades in */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:var(--step-0); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(1140px, 100% - (var(--gutter) * 2)); margin-inline:auto; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.75rem 1rem;
}
.skip:focus{ left:0; }

/* ── NAV ── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:54px;
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
.nav[data-stuck="true"]{
  background:rgba(252,253,254,.75);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--hairline);
}
.nav[data-menu-open="true"]{
  background:rgba(252,253,254,.97);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--hairline);
}

.nav[data-menu-open="true"]{
  background:color-mix(in srgb, var(--accent) 6%, rgba(252,253,254,.97));
}

.nav__backdrop{
  position:fixed; top:54px; left:0; right:0; bottom:0; z-index:49;
  background:color-mix(in srgb, var(--ink) 30%, transparent);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.nav[data-menu-open="true"] + .nav__backdrop{
  opacity:1; visibility:visible;
  transition:opacity .25s ease;
}
.nav__inner{
  display:flex; align-items:center; gap:1.75rem;
  width:min(1140px, 100% - (var(--gutter) * 2)); margin-inline:auto;
}
.nav__mark{ display:flex; align-items:center; }
.nav__monogram{
  display:flex; align-items:center; gap:0;
  font-weight:700; font-size:1.15rem; line-height:1;
}
.nav__monogram-letter{ color:var(--accent-deep); }
.nav__monogram-drop{
  width:.78em; height:.78em; flex:none;
  margin-inline:-.1em;
  fill:none; stroke:var(--accent-hero); stroke-width:2;
}
.nav__links a{ transition:color .2s ease; }
.nav__links a:hover{ color:var(--ink); }

/* ── MOBILE NAV TOGGLE (below 700px) ── */
.nav__toggle{
  margin-left:auto; width:2.25rem; height:2.25rem; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:50%; color:var(--ink);
  cursor:pointer; transition:background .2s ease;
}
.nav__toggle:hover{ background:var(--accent-soft); }
.nav__toggle-icon{ width:20px; height:20px; }
.nav__toggle-bar{ transition:transform .25s ease, opacity .2s ease; transform-origin:12px 12px; }
.nav[data-menu-open="true"] .nav__toggle-bar--top{ transform:translateY(5px) rotate(45deg); }
.nav[data-menu-open="true"] .nav__toggle-bar--mid{ opacity:0; }
.nav[data-menu-open="true"] .nav__toggle-bar--bottom{ transform:translateY(-5px) rotate(-45deg); }

.nav__links{
  position:absolute; top:54px; left:0; right:0;
  display:flex; flex-direction:column; gap:0;
  padding:.4rem var(--gutter) .75rem;
  font-size:var(--step--1); color:var(--ink-muted);
  background:rgba(252,253,254,.97);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 20px 40px rgba(4,51,90,.18);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.nav[data-menu-open="true"] .nav__links{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .22s ease, transform .22s ease;
}
.nav__links a{ padding:.75rem 0; border-bottom:1px solid var(--hairline); }
.nav__links a:last-child{ border-bottom:none; }

@media (min-width:700px){
  .nav__toggle{ display:none; }
  .nav__links{
    position:static; flex-direction:row; align-items:center; gap:1.4rem;
    margin-left:auto; padding:0;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:none; box-shadow:none;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .nav__links a{ padding:0; border-bottom:none; }
}

/* ── HERO ── */
.hero{ padding-block:4.5rem 0; text-align:center; }
.hero__eyebrow{
  margin:0 0 .5rem; color:var(--ink-muted);
  font-size:var(--step-0); font-weight:500;
}
.hero__name{
  font-size:var(--step-3); font-weight:600;
  letter-spacing:-.04em; line-height:1.05; margin:0;
}

/* The rotator: an inline box sized to fit "Adventure" (the longest word),
   with each word absolutely positioned inside it so swapping words never
   changes the box's own size — that's what stops the headline from
   jumping horizontally as the word changes. */
.hero__rotator{
  position:relative; display:inline-block; text-align:left;
  color:var(--accent-hero);
}
.hero__rotator-ghost{ visibility:hidden; }
.hero__rotator-word{
  position:absolute; left:0; top:0;
  opacity:0;
}
/* Default / reduced-motion state: settled on "Adventure", nothing else
   visible, no animation. This is what shows if the media query below
   never matches. */
.hero__rotator-word[data-word="adventure"]{ opacity:1; }

.hero__motto{
  margin:1.75rem auto 0; color:var(--ink-muted);
  font-size:var(--step-1); letter-spacing:-.012em; max-width:34ch;
}
.hero__tagline{
  margin:.75rem auto 0; color:var(--ink-muted);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  /* Reserved space + visible by default (reduced-motion state); the
     media query below is what hides it early and fades it in late. */
  opacity:1;
}
.hero__tagline span:not(:last-child)::after{
  content:"\00b7"; color:var(--ink-faint); margin-inline:.5em;
}

@media (max-width:400px){
  .hero__name{ font-size:2.25rem; }
  .hero__tagline{ letter-spacing:.08em; }
}

/* Motion is opt-in: everything in here only runs if the visitor hasn't
   asked for reduced motion. If they have, none of this applies, and the
   plain rules above (already the finished, settled state) are all that
   render. */
@media (prefers-reduced-motion: no-preference){
  .hero__rotator-word[data-word="travel"]{
    animation:hero-word-cycle var(--hero-word-duration) ease both;
  }
  .hero__rotator-word[data-word="memories"]{
    animation:hero-word-cycle var(--hero-word-duration) ease both;
    animation-delay:var(--hero-word-duration);
  }
  .hero__rotator-word[data-word="adventure"]{
    animation:hero-word-settle var(--hero-word-duration) ease both;
    animation-delay:calc(var(--hero-word-duration) * 2);
  }
  .hero__tagline{
    opacity:0;
    animation:hero-tagline-in .6s ease both;
    animation-delay:calc(var(--hero-word-duration) * 3 + var(--hero-tagline-pause));
  }
}

/* Travel / Memories: drop in, hold, fade out — replaced by the next word. */
@keyframes hero-word-cycle{
  0%       { opacity:0; transform:translateY(-14px); }
  18%, 82% { opacity:1; transform:translateY(0); }
  100%     { opacity:0; transform:translateY(0); }
}
/* Adventure: drop in, then hold forever (no exit — this is where it settles). */
@keyframes hero-word-settle{
  0%        { opacity:0; transform:translateY(-14px); }
  18%, 100% { opacity:1; transform:translateY(0); }
}
@keyframes hero-tagline-in{
  0%   { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}

.plate{ margin-top:clamp(2.5rem,6vh,4.5rem); }
.plate__img{
  aspect-ratio:2 / 1; border-radius:var(--radius); position:relative; overflow:hidden;
  background:
    radial-gradient(110% 80% at 22% 10%, rgba(255,255,255,.6), transparent 62%),
    linear-gradient(158deg, var(--ice) 0%, var(--seaglass) 40%, var(--ice-deep) 100%);
}
.plate__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem;
  margin-top:.85rem; padding-inline:.15rem;
  font-family:var(--mono); font-size:.75rem;
  color:var(--ink-muted); letter-spacing:.01em;
}
@media (min-width:700px){ .plate__img{ aspect-ratio:5 / 2; } }

.rise{ opacity:0; transform:translateY(14px); }
.hero .rise{ animation:rise .95s cubic-bezier(.16,1,.3,1) forwards; }
.hero .rise:nth-child(1){ animation-delay:.05s; }
.hero .rise:nth-child(2){ animation-delay:.16s; }
.hero .rise:nth-child(3){ animation-delay:.28s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ── SECTIONS ── */
.band{ padding-block:var(--section); }
.band--tint{ background:var(--paper-2); }
.band--page-head{ padding-top:calc(var(--section) + 1.5rem); }
.band__head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.75rem; border-bottom:1px solid var(--hairline); padding-bottom:1rem;
}
.band__title{ font-size:var(--step-2); font-weight:600; letter-spacing:-.028em; margin:0; }
.band__meta{ margin-left:auto; color:var(--ink-muted); font-size:var(--step--1); }
.meta-drop{
  width:1em; height:1em;
  fill:var(--accent);
  transform:translateY(0.08em);
}

/* ── FILTER CHIPS ── */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.25rem; }
.chip{
  font:inherit; font-size:var(--step--1); font-weight:500;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink-muted);
  border:1px solid var(--hairline);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover{ color:var(--ink); border-color:rgba(4,51,90,.28); }
.chip[aria-pressed="true"]{
  background:var(--accent-soft); color:var(--accent); border-color:transparent;
}

/* ── REVIEW GRID ── */
.grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(272px, 1fr));
}
.review{
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  will-change:transform;
}
.review:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(4,51,90,.13); }
.review[hidden]{ display:none; }
.review__img{
  aspect-ratio:3 / 2; position:relative;
  background:linear-gradient(150deg, var(--seaglass), #eef8fb 52%, var(--ice));
}
.review__body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.review__cat{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent); font-weight:600;
}
.review__title{ font-size:var(--step-0); font-weight:600; letter-spacing:-.018em; margin:0; line-height:1.3; }
.review__note{ margin:0; font-size:var(--step--1); color:var(--ink-muted); }
.review__foot{
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--hairline);
  display:flex; align-items:center; gap:.6rem;
}
.review__stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.3rem; }
.review__stat{ text-align:center; }
.review__stat-label{
  margin:0; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-muted);
}
.review__stat-value{
  margin:.15rem 0 0; font-size:.8rem; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── SPLASH RATING ── */
.rating{ display:flex; gap:3px; }
.rating svg{ width:15px; height:15px; }
.rating svg.on{ fill:var(--accent-deep); }
.rating svg.off{ fill:rgba(16,22,25,.13); }
.drop--half{ position:relative; display:inline-block; width:15px; height:15px; }
.drop--half svg{ position:absolute; inset:0; }
.drop--half svg.on{ clip-path:inset(0 50% 0 0); }
.rating__num{ font-size:var(--step--1); color:var(--ink-muted); font-variant-numeric:tabular-nums; }

.empty{ color:var(--ink-muted); padding:2rem 0; }

/* ── PLACES ── */
.posts{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.posts > :first-child{ grid-column:1 / -1; }
.card{
  border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden;
  background:var(--paper); display:block;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  will-change:transform;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(4,51,90,.12); }
.card__img{ aspect-ratio:16/9; position:relative; background:linear-gradient(140deg, var(--ice), var(--seaglass) 50%, var(--ice-deep)); }
.posts > :first-child .card__img{ aspect-ratio:21/9; }
.card__body{ padding:1.2rem 1.3rem 1.45rem; }
.card__eyebrow{ margin:0 0 .35rem; font-size:var(--step--1); color:var(--ink-muted); }
.card__title{ margin:0; font-size:var(--step-1); font-weight:600; letter-spacing:-.02em; line-height:1.25; }

/* ── CARRY ── */
.carry{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr));
  border-top:1px solid var(--hairline); border-left:1px solid var(--hairline);
}
.carry__item{
  border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:2.25rem 1.25rem 1.5rem; text-align:center;
  transition:background .35s ease;
}
.carry__item:hover{ background:rgba(255,255,255,.8); }
.carry__item svg{
  width:44px; height:44px; margin-inline:auto;
  stroke:var(--ink-muted); stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.carry__item:hover svg{ stroke:var(--accent); transform:translateY(-3px); }
.carry__name{ margin:1rem 0 0; font-weight:600; letter-spacing:-.015em; }
.carry__spec{
  margin:.25rem 0 0; font-size:var(--step--1); color:var(--ink-muted);
  opacity:0; transform:translateY(-3px);
  transition:opacity .35s ease, transform .35s ease;
}
.carry__item:hover .carry__spec,
.carry__item:focus-within .carry__spec{ opacity:1; transform:none; }

/* ── ABOUT / FOOTER ── */
.about__layout{ display:flex; flex-direction:column; gap:1.75rem; }
.about__photo{
  flex:none; width:100%; max-width:320px; aspect-ratio:4 / 5;
  border-radius:var(--radius); position:relative; overflow:hidden;
  margin-inline:auto;
}
.about__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:700px){
  .about__layout{ flex-direction:row; align-items:flex-start; gap:2.5rem; }
  .about__photo{ margin-inline:0; }
}
.prose{ max-width:var(--measure); font-size:var(--step-1); letter-spacing:-.012em; color:var(--ink-muted); margin:0; }
.foot{
  border-top:1px solid var(--hairline); padding-block:2.5rem 3.5rem;
  color:var(--ink-muted); font-size:var(--step--1);
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
}
.foot a:hover{ color:var(--ink); }
.foot__right{ margin-left:auto; display:flex; gap:1.5rem; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rise,.reveal{ opacity:1 !important; transform:none !important; }
}

/* ── Images inside placeholders (real photos replace the gradients) ── */
.review__img img,.card__img img,.plate__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.plate__img--placeholder{
  background:
    radial-gradient(110% 80% at 22% 10%, rgba(255,255,255,.6), transparent 62%),
    linear-gradient(158deg, var(--ice) 0%, var(--seaglass) 40%, var(--ice-deep) 100%);
}

/* ── Individual post pages ── */
.post{ padding-top:4rem; }
.post__cat{
  margin:0 0 .5rem; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--accent); font-weight:600;
}
.post__title{
  margin:0; font-size:var(--step-2); font-weight:600; letter-spacing:-.03em;
  line-height:1.08; max-width:20ch;
}
.post__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.25rem;
  margin-top:1.1rem; color:var(--ink-muted); font-size:var(--step--1);
}
.post .stats{ margin-top:1.5rem; }
.post .plate{
  margin-top:2.5rem; position:relative; overflow:hidden;
  border-radius:var(--radius); aspect-ratio:4 / 5;
}
@media (min-width:700px){ .post .plate{ aspect-ratio:16 / 9; } }

/* ── PHOTO GALLERY ── */
.gallery{ position:absolute; inset:0; }
.gallery__track{
  display:flex; height:100%; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__slide{ flex:0 0 100%; height:100%; position:relative; scroll-snap-align:center; }
.gallery__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.gallery__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:1;
  width:2.5rem; height:2.5rem; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,22,25,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.gallery__arrow svg{ width:18px; height:18px; }
.gallery__arrow:hover{ background:rgba(16,22,25,.55); }
.gallery__arrow--prev{ left:.85rem; }
.gallery__arrow--next{ right:.85rem; }

.gallery__dots{
  position:absolute; z-index:1; bottom:.9rem; left:50%; translate:-50% 0;
  display:flex; gap:.4rem;
}
.gallery__dot{
  width:.4rem; height:.4rem; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.5); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.gallery__dot[aria-current="true"]{ background:#fff; transform:scale(1.3); }
.prose-body{ max-width:var(--measure); margin-top:2.5rem; }
.prose-body p{ margin:0 0 1.25rem; }
.prose-body h2{ font-size:var(--step-1); letter-spacing:-.02em; margin:2.5rem 0 .75rem; }
.prose-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.post__back{ margin-top:3rem; }
.post__back a{ color:var(--accent); }

/* ── Category averages ── */
.stats{
  display:grid; gap:.75rem; margin-bottom:2rem;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:700px){
  .stats{ grid-template-columns:repeat(4, 1fr); }
}
.stat{ background:rgba(176,229,244,.3); border:1px solid var(--hairline); border-radius:12px; padding:.9rem 1rem; }
.stat__label{ margin:0; font-size:var(--step--1); color:var(--ink-muted); }
.stat__value{ margin:.15rem 0 0; font-size:1.6rem; font-weight:600; letter-spacing:-.02em; }
.stat__sub{ margin:0; font-size:.75rem; color:var(--ink-muted); }