/* ─────────────────────────────────────────────
   TOKENS — glacial water
   shallows → silt → deep channel
   ───────────────────────────────────────────── */
:root{
  --paper:      #fcfdfe;
  --paper-2:    #eef8fb;   /* pale ice */
  --ink:        #101619;
  --ink-muted:  #5a7183;   /* grey-blue */
  --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(5rem, 11vh, 9rem);
  --measure: 66ch;
  --radius:  18px;
}

*,*::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; }

.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__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; gap:.5rem;
  font-weight:600; letter-spacing:-.015em; font-size:var(--step--1);
}
.nav__mark svg{ width:15px; height:15px; fill:var(--accent-hero); flex:none; }
.nav__links{
  margin-left:auto; display:flex; gap:1.4rem;
  font-size:var(--step--1); color:var(--ink-muted);
}
.nav__links a{ transition:color .2s ease; }
.nav__links a:hover{ color:var(--ink); }

/* ── HERO ── */
.hero{ padding-block:9rem 0; }
.hero__name{
  font-size:var(--step-3); font-weight:600;
  letter-spacing:-.04em; line-height:.96; margin:0; max-width:11ch;
}
.hero__name em{ font-style:normal; color:var(--accent-hero); }
.hero__motto{
  margin:1.75rem 0 0; color:var(--ink-muted);
  font-size:var(--step-1); letter-spacing:-.012em; max-width:34ch;
}

.plate{ margin-top:clamp(2.5rem,6vh,4.5rem); }
.plate__img{
  aspect-ratio:2 / 1; border-radius:var(--radius);
  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__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); }

/* ── 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;
}
.review:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(4,51,90,.13); }
.review[hidden]{ display:none; }
.review__img{
  aspect-ratio:4 / 3;
  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;
}

/* ── 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); }
.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;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(4,51,90,.12); }
.card__img{ aspect-ratio:16/9; 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 ── */
.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{ 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:8rem; }
.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 .plate{ margin-top:2.5rem; }
.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(auto-fit, minmax(120px,1fr));
}
.stat{ background:var(--paper-2); 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); }