/* ═══════════════════════════════════════════════════════════════
   CYPRESS & TIDE — fog, silt, blackwater
   Display  Bodoni Moda      (didone; italic carries species names)
   Body     Hanken Grotesk   (quiet humanist counterweight)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fog:    #E9ECE6;
  --mist:   #F5F7F3;
  --silt:   #C6CCC0;
  --sage:   #6E7D68;
  --water:  #1B2420;
  --water2: #263129;
  --tannin: #7A5A34;
  --gold:   #B79553;
  --ink:    #1F2721;
  --ink-dim:#4C564A;

  --pad: clamp(1.25rem, 5vw, 7rem);
  --maxw: 1500px;

  --f-disp:"Bodoni Moda", Didot, Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;

  --ease: cubic-bezier(.19,.72,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
section[id],footer[id]{ scroll-margin-top:4.5rem; }

body{
  margin:0;
  background:var(--fog);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .28vw,1.12rem);
  line-height:1.72;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol,dl,dd,figure{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
.defs{ position:absolute; width:0; height:0; }

::selection{ background:var(--sage); color:var(--mist); }
:focus-visible{ outline:2px solid var(--tannin); outline-offset:3px; }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--water); color:var(--mist);
  padding:.7rem 1.1rem; font-size:.8rem; text-decoration:none;
}
.skip:focus{ top:1rem; }

/* ── type primitives ───────────────────────────────────────── */
.label{
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sage); font-weight:500;
  margin-bottom:1.5rem;
}
.title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,4.1rem);
  line-height:1.12; letter-spacing:-.012em;
  max-width:19ch;
  margin-bottom:1.7rem;
}
.title em{ font-style:italic; }
.dtitle{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2rem,4.2vw,3.6rem);
  line-height:1.08; letter-spacing:-.012em;
  margin-bottom:1.8rem;
}
.dtitle em{ font-style:italic; color:var(--gold); }
.lede{
  color:var(--ink-dim); max-width:50ch;
  margin-bottom:1.1rem;
}

.btn{
  display:inline-block; margin-top:1.4rem;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  color:var(--mist); background:var(--water);
  padding:1rem 1.8rem; text-decoration:none;
  transition:background .45s var(--ease);
}
.btn:hover{ background:var(--sage); }
.link-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tannin);
  border-bottom:1px solid var(--silt); padding-bottom:2px;
  margin-top:.9rem;
}
.link-btn:hover{ border-bottom-color:var(--tannin); }

/* the botanical plates all ripple a little */
.plate{
  filter:url(#ripple);
  width:100%;
}

/* ── nav ───────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem var(--pad);
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(233,236,230,.78);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:rgba(35,43,37,.12);
}
.nav__mark{
  font-family:var(--f-disp); font-size:1.16rem;
  letter-spacing:.02em; text-decoration:none;
}
.nav__mark em{ font-style:italic; color:var(--gold); }
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a,
.nav__loc{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--sage); }
.nav__loc{ color:var(--sage); }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem var(--pad) 2rem;
  overflow:hidden; isolation:isolate;
}
.hero__water{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero__src{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.hero__wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* a pale veil where the type sits; the water stays legible on the right */
  background:
    linear-gradient(102deg, rgba(233,236,230,.95) 0%, rgba(233,236,230,.86) 26%, rgba(233,236,230,.20) 56%, rgba(233,236,230,0) 76%),
    linear-gradient(to bottom, rgba(233,236,230,.55) 0%, rgba(233,236,230,.05) 20%, rgba(233,236,230,.05) 66%, var(--fog) 100%);
}
.hero__type{ max-width:min(100%,860px); }
.hero__base{
  margin-top:auto; padding-top:3rem;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage);
}
.hero__down{ text-decoration:none; }
.hero__hint{ opacity:.7; }
.hero__kicker{
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--sage); font-weight:500; margin-bottom:1.6rem;
}
.hero__title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(3.4rem,11vw,10.5rem);
  line-height:.94; letter-spacing:-.03em;
  margin-bottom:2rem;
}
.hero__title em{ font-style:italic; color:var(--gold); }
.hero__lede{
  max-width:46ch; color:var(--ink-dim);
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
}

/* ── the water (dark panel) ────────────────────────────────── */
.water{
  background:var(--water); color:var(--mist);
  padding:clamp(5rem,11vw,10rem) var(--pad);
}
.water__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2.5rem,6vw,6rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;
}
.water .label{ color:var(--gold); }
.water .lede{ color:rgba(245,247,243,.66); }
.water__facts{ margin-top:2.8rem; }
.water__facts div{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.9rem 0; border-top:1px solid rgba(245,247,243,.16);
  font-size:.82rem; letter-spacing:.04em;
}
.water__facts dt{ color:rgba(245,247,243,.5); text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; }
.water__fig img{ aspect-ratio:4/5; object-fit:cover; }
.water__fig figcaption{
  margin-top:1rem; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(245,247,243,.42);
}

/* ── the notes ─────────────────────────────────────────────── */
.notes{
  padding:clamp(5rem,11vw,10rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.notes__head{ margin-bottom:clamp(3rem,6vw,5rem); }
.notes__cols{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.ncol__h{
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sage); font-weight:500;
  padding-bottom:.9rem; margin-bottom:1.3rem;
  border-bottom:1px solid var(--silt);
  display:flex; justify-content:space-between; align-items:baseline;
}
.ncol__h span{ font-family:var(--f-disp); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--ink-dim); font-style:italic; }
.ncol__list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-family:inherit; font-size:.86rem; font-weight:300;
  background:none; cursor:pointer;
  border:1px solid var(--silt); border-radius:999px;
  padding:.42rem 1rem; color:var(--ink-dim);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip:hover{ border-color:var(--sage); color:var(--ink); }
.chip.is-on{ background:var(--water); border-color:var(--water); color:var(--mist); }
.chip.is-dead{ opacity:.32; }
.notes__state{
  margin-top:2.6rem; font-family:var(--f-disp); font-style:italic;
  font-size:clamp(1.1rem,1.9vw,1.5rem); color:var(--ink);
}

/* ── the shelf ─────────────────────────────────────────────── */
.shelf{
  padding:0 var(--pad) clamp(5rem,11vw,10rem);
  max-width:var(--maxw); margin-inline:auto;
}
.shelf__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.shelf__grid{
  display:grid; gap:clamp(2rem,3.5vw,3.5rem);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.item{
  display:flex; flex-direction:column;
  transition:opacity .7s var(--ease), filter .7s var(--ease);
}
/* excluded bottles stay on the shelf, greyed — you can see what you ruled out */
.item.is-out{
  opacity:.2; filter:grayscale(1);
  pointer-events:none;
}
.item__fig{
  position:relative; overflow:hidden;
  background:var(--mist); aspect-ratio:3/4; margin-bottom:1.4rem;
}
.item__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.item:hover .item__fig img{ transform:scale(1.045); }
.item__vol{
  position:absolute; right:0; bottom:0; z-index:2;
  background:var(--fog); color:var(--sage);
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.5rem .8rem;
}
.item__name{
  font-family:var(--f-disp); font-size:1.7rem; line-height:1.14;
  margin-bottom:.4rem;
}
.item__latin{
  font-family:var(--f-disp); font-style:italic;
  color:var(--sage); font-size:.95rem; margin-bottom:.9rem;
}
.item__desc{ color:var(--ink-dim); font-size:.95rem; margin-bottom:1.2rem; }
.item__notes{
  display:flex; flex-wrap:wrap; gap:.35rem .5rem;
  margin-bottom:auto; padding-bottom:1.3rem;
}
.item__notes b{
  font-weight:300; font-size:.74rem; letter-spacing:.1em;
  color:var(--ink-dim);
  border:1px solid var(--silt); border-radius:999px;
  padding:.2rem .65rem;
}
.item__notes b.is-hit{ border-color:var(--water); background:var(--water); color:var(--mist); }
.item__buy{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.1rem; border-top:1px solid var(--silt);
}
.item__price{ font-family:var(--f-disp); font-size:1.3rem; }
.item__add{
  font-family:inherit; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  background:none; border:0; cursor:pointer; color:var(--tannin);
  border-bottom:1px solid var(--silt); padding:0 0 3px;
  transition:border-color .35s var(--ease);
}
.item__add:hover{ border-bottom-color:var(--tannin); }
.shelf__empty{
  font-family:var(--f-disp); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--sage);
  padding:3rem 0;
}

/* ── the still ─────────────────────────────────────────────── */
.still{
  background:var(--mist);
  padding:clamp(5rem,11vw,10rem) var(--pad);
  border-top:1px solid var(--silt);
}
.still__head{ max-width:var(--maxw); margin:0 auto clamp(3rem,6vw,5rem); }
.still__steps{ max-width:var(--maxw); margin-inline:auto; }
.step{
  display:grid; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  align-items:center;
  padding:clamp(2.5rem,5vw,4.5rem) 0;
  border-top:1px solid var(--silt);
}
.step:nth-child(even) .step__fig{ order:2; }
.step__n{
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sage); margin-bottom:1rem;
}
.step__body h3{
  font-family:var(--f-disp); font-size:clamp(1.8rem,3.4vw,2.9rem);
  line-height:1.1; margin-bottom:1.1rem;
}
.step__body p{ color:var(--ink-dim); max-width:48ch; }

/* ── visit ─────────────────────────────────────────────────── */
.visit{
  padding:clamp(4.5rem,9vw,8rem) var(--pad) 2rem;
  border-top:1px solid var(--silt);
}
.visit__top{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.visit__addr{ color:var(--ink-dim); margin-bottom:.9rem; }
.visit__addr a{ text-decoration-color:var(--silt); text-underline-offset:4px; }
.visit__mark{
  max-width:var(--maxw); margin:clamp(3.5rem,8vw,6rem) auto 0;
  font-family:var(--f-disp); font-size:clamp(3rem,13vw,12rem);
  line-height:.9; letter-spacing:-.03em; color:var(--silt);
  user-select:none;
}
.visit__mark em{ font-style:italic; color:var(--sage); }
.visit__legal{
  max-width:var(--maxw); margin:1.8rem auto 0; padding-top:1.4rem;
  border-top:1px solid var(--silt);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage);
}

/* ── reveal ────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(20px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1000px){
  .water__grid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; }
  .step:nth-child(even) .step__fig{ order:0; }
}
@media (max-width:820px){
  .nav{ flex-wrap:wrap; row-gap:.75rem; padding-bottom:.85rem; }
  .nav__links{ order:3; width:100%; gap:1.5rem; overflow-x:auto; scrollbar-width:none; }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ white-space:nowrap; }
  .nav__loc{ display:none; }
  .hero{ padding-top:9.5rem; }
  /* the side veil does nothing on a narrow screen — lay it top-to-bottom instead */
  .hero__wash{
    background:linear-gradient(180deg,
      rgba(233,236,230,.94) 0%, rgba(233,236,230,.86) 44%,
      rgba(233,236,230,.30) 68%, var(--fog) 100%);
  }
}

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