/* ————————————————————————————————
   channing daughters · concept rebuild
   palette from the vineyard at golden hour:
   cream paper / bottle green / terracotta / sun gold
———————————————————————————————— */

:root{
  --cream:#f6f0e1;
  --cream-deep:#efe6cf;
  --green:#1d4a2c;
  --green-ink:#123320;
  --green-soft:#2e6340;
  --accent:#c97b5d;
  --accent-soft:#e6b39a;
  --gold:#d9a03b;
  --sky:#b9d4e4;
  --ink:#20301f;

  --serif:"Fraunces",Georgia,serif;
  --display:"Jacques Francois","Fraunces",Georgia,serif;
  --mono:"Courier Prime","Courier New",monospace;
  --hand:"Homemade Apple",cursive;

  --wonk:"SOFT" 60,"WONK" 1;
  --pad:clamp(1.25rem,4vw,4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-variation-settings:"SOFT" 30,"WONK" 0;
  font-weight:380;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.55;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:560;line-height:1.02;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.035em;font-variation-settings:normal}
h1 em,h2 em{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:0}
h2{font-size:clamp(2.2rem,1.4rem + 3.6vw,4.2rem)}
h3{font-size:1.15rem}
em{font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic}

/* grain — film-photo atmosphere */
body::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ————— ticker ————— */
.ticker{
  position:sticky;top:0;z-index:50;
  background:var(--green);color:var(--cream);
  overflow:hidden;white-space:nowrap;
  border-bottom:1.5px solid var(--green-ink);
}
.ticker__track{
  display:inline-flex;align-items:center;gap:2.2em;
  padding:.42em 0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  animation:tick 26s linear infinite;
}
.ticker__track i{font-style:normal;color:var(--accent)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ————— nav ————— */
/* index.html wraps the ticker + nav in .topbar so they pin as a single unit.
   That removes the old approach of offsetting the nav by a hand-measured
   ticker height, which left a few px of page content showing through the
   seam. Sub-pages have no ticker and no wrapper — there the nav sticks on
   its own at top:0. */
.topbar{position:sticky;top:0;z-index:50}
.topbar .ticker,.topbar .nav{position:static}
.nav{
  position:sticky;top:0;z-index:49;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem var(--pad);
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1.5px solid color-mix(in srgb,var(--green) 22%,transparent);
}
.nav__mark{
  display:flex;gap:.6rem;align-items:center;text-decoration:none;
  font-family:var(--display);font-size:.82rem;line-height:1.2;
  text-transform:uppercase;letter-spacing:.09em;color:var(--green-ink);
}
.nav__tree{width:34px;height:34px;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.25)}
.nav__links{display:flex;gap:clamp(.8rem,2vw,1.7rem)}
.nav__links a{
  text-decoration:none;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;
  padding-bottom:2px;border-bottom:1.5px solid transparent;transition:border-color .2s;
}
.nav__links a:hover{border-color:var(--accent)}
@media(max-width:820px){.nav__links{display:none}}

/* ————— buttons ————— */
.btn{
  display:inline-block;background:var(--green);color:var(--cream);
  font-family:var(--mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:.85em 1.6em;border-radius:999px;
  border:1.5px solid var(--green-ink);
  box-shadow:3px 3px 0 var(--green-ink);
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--green-ink)}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--green-ink)}
.btn--small{padding:.6em 1.2em;font-size:.72rem}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:3px 3px 0 color-mix(in srgb,var(--green-ink) 60%,transparent)}
.btn--ghost-green{background:transparent;color:var(--green);border-color:var(--green);box-shadow:3px 3px 0 color-mix(in srgb,var(--green) 35%,transparent)}
.btn--accent{background:var(--cream);color:var(--green-ink);border-color:var(--green-ink)}

/* ————— shared bits ————— */
.eyebrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.eyebrow--dark{color:var(--green-ink)}
.scrawl{
  font-family:var(--hand);font-size:1.02rem;line-height:1.9;color:var(--green);
  transform:rotate(-1.5deg);display:inline-block;
}
.scrawl--light{color:var(--cream)}
.section-head{max-width:46rem;padding:0 var(--pad);margin:0 auto 3rem}
.section-head__no{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;color:var(--accent);
  display:block;margin-bottom:.6rem;
}
.section-head h2{color:var(--green);margin-bottom:1.1rem}
.section-head--light h2{color:var(--cream)}
.frame{
  background:#fff;padding:.7rem .7rem 1rem;border:1.5px solid var(--green-ink);
  box-shadow:6px 6px 0 color-mix(in srgb,var(--green) 30%,transparent);
}
.frame figcaption{padding-top:.55rem}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ————— hero ————— */
.hero{
  position:relative;
  display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
  min-height:88vh;
}
.hero__photo{position:relative;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(18,51,32,.35)}
.hero__panel{
  background:var(--green);color:var(--cream);
  padding:clamp(2.5rem,6vw,5rem) var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  position:relative;
}
.hero__panel::before{ /* vine-row pinstripes */
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:repeating-linear-gradient(105deg,transparent 0 26px,var(--cream) 26px 27.5px);
}
.hero__panel>*{position:relative}
.hero h1{
  font-size:clamp(2.6rem,1.6rem + 4.4vw,5rem);color:var(--cream);
}
.hero h1 em{color:var(--accent-soft)}
.hero__lede{max-width:34ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);opacity:.92}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.4rem}
.hero__hours{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft)}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__photo{height:52vh}
}

/* ————— visit ————— */
.visit{padding:clamp(4rem,9vw,7.5rem) 0 clamp(3rem,7vw,6rem)}
.visit__grid{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(1.5rem,3.5vw,3.5rem);align-items:start;
  padding:0 var(--pad);max-width:75rem;margin:0 auto;
}
.visit__photo{transform:rotate(-1.4deg)}
.visit__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.card{
  background:var(--cream-deep);border:1.5px solid var(--green-ink);border-radius:14px;
  padding:1.3rem 1.4rem;box-shadow:4px 4px 0 color-mix(in srgb,var(--green) 22%,transparent);
}
.card h3{
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);margin-bottom:.8rem;
}
.card__table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.95rem}
.card__table td{padding:.3em 0;border-bottom:1px dashed color-mix(in srgb,var(--green) 35%,transparent)}
.card__table td:last-child{text-align:right;font-weight:700}
.card__big{font-size:1.25rem;font-variation-settings:var(--wonk);font-weight:520;line-height:1.25}
.card__big a{text-decoration:none}
.card__note{font-family:var(--mono);font-size:.8rem;margin-top:.7rem;opacity:.85}
.card__list{list-style:none;font-size:.98rem}
.card__list li{padding:.32em 0 .32em 1.2em;position:relative}
.card__list li::before{content:"✶";position:absolute;left:0;color:var(--accent);font-size:.75em;top:.55em}
.card--green{background:var(--green);color:var(--cream)}
.card--green h3{color:var(--accent-soft)}
@media(max-width:900px){
  .visit__grid{grid-template-columns:1fr}
  .visit__photo{max-width:420px;margin:0 auto}
}
@media(max-width:560px){.visit__cards{grid-template-columns:1fr}}

/* ————— after hours ————— */
.after{
  background:var(--accent);color:var(--green-ink);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,4rem);
  padding:clamp(4rem,8vw,7rem) var(--pad);
  border-block:2px solid var(--green-ink);
}
.after__head{position:relative;z-index:2;max-width:34rem;align-self:center}
.after h2{
  font-size:clamp(3.2rem,2rem + 6.4vw,6.8rem);color:var(--green-ink);
  text-transform:lowercase;margin-bottom:1.2rem;
}
.after__lede{font-size:clamp(1.02rem,1rem + .3vw,1.2rem);margin-bottom:1.6rem}
.after__menu{list-style:none;font-family:var(--mono);font-size:.92rem;margin-bottom:2rem}
.after__menu li{padding:.5em 0;border-bottom:1.5px dashed color-mix(in srgb,var(--green-ink) 45%,transparent)}
.after__menu b{display:inline-block;min-width:7.5em;color:var(--green);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.after__photos{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(160px,auto);gap:1rem;align-content:center}
.after__photo{border:2px solid var(--green-ink);box-shadow:6px 6px 0 var(--green-ink);overflow:hidden;position:relative;margin:0}
.after__photo img{width:100%;height:100%;object-fit:cover}
.after__photo--a{grid-row:span 2;transform:rotate(-1.2deg)}
.after__photo--b{transform:rotate(1.6deg)}
.after__photo--c{transform:rotate(-.8deg)}
.after__photo figcaption{position:absolute;left:.8rem;bottom:.5rem;font-size:1.02rem;text-shadow:0 1px 10px rgba(18,51,32,.85)}
.after__doodle{position:absolute;stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;opacity:.5;pointer-events:none}
.after__doodle--sun{top:6%;right:5%;width:110px;animation:spin 40s linear infinite}
.after__doodle--sun circle{fill:none}
.after__doodle--glass{bottom:8%;left:3%;width:64px;transform:rotate(-8deg)}
.after__doodle--note{top:12%;left:38%;width:52px;transform:rotate(10deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .after{grid-template-columns:1fr}
  .after__doodle--note{display:none}
}

/* ————— wines ————— */
.wines{padding:clamp(4.5rem,9vw,8rem) 0}
.wines__banner{
  position:relative;margin:0 var(--pad) 3rem;max-width:75rem;
  border:2px solid var(--green-ink);box-shadow:8px 8px 0 var(--accent);overflow:hidden;
}
@media(min-width:75rem){.wines__banner{margin-inline:auto}}
.wines__banner img{width:100%;height:clamp(280px,46vw,460px);object-fit:cover}
.wines__banner figcaption{position:absolute;right:1.2rem;bottom:.9rem;font-size:1.05rem;text-shadow:0 1px 12px rgba(18,51,32,.85)}
.wines__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:75rem;margin:0 auto;padding:0 var(--pad);
}
.winecat{
  border-left:1.5px dashed color-mix(in srgb,var(--green) 40%,transparent);
  padding:0 1.4rem 1rem;
}
.winecat:first-child{border-left:none;padding-left:0}
.winecat__no{font-family:var(--mono);color:var(--accent);font-size:1rem;display:block;margin-bottom:.5rem}
.winecat h3{font-family:var(--display);font-weight:400;color:var(--green);font-size:1.45rem;margin-bottom:.6rem}
.winecat p{font-size:.95rem;margin-bottom:1rem;opacity:.9}
.winecat ul{list-style:none;font-family:var(--mono);font-size:.82rem;letter-spacing:.02em}
.winecat li{padding:.34em 0;border-bottom:1px dotted color-mix(in srgb,var(--green) 35%,transparent)}
@media(max-width:980px){.wines__grid{grid-template-columns:1fr 1fr;row-gap:2.5rem}.winecat:nth-child(3){border-left:none;padding-left:0}}
@media(max-width:560px){.wines__grid{grid-template-columns:1fr}.winecat{border-left:none;padding:0 0 1rem}}
.wines__feature{
  display:grid;grid-template-columns:minmax(280px,400px) 1fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;max-width:75rem;margin:4.5rem auto 0;padding:0 var(--pad);
}
.wines__pour{transform:rotate(1.4deg)}
.wines__feature-copy blockquote{
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);font-variation-settings:"SOFT" 90,"WONK" 1;
  font-style:italic;color:var(--green);line-height:1.2;margin-bottom:1.2rem;
}
.wines__feature-copy p{max-width:44ch;margin-bottom:1.6rem}
@media(max-width:820px){.wines__feature{grid-template-columns:1fr}.wines__pour{max-width:400px;margin:0 auto}}

/* ————— story ————— */
.story{background:var(--green);color:var(--cream);border-block:2px solid var(--green-ink);position:relative}
.story::before{ /* faint roots watermark */
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:repeating-linear-gradient(-15deg,transparent 0 60px,var(--cream) 60px 61.5px);
}
.story__inner{position:relative;max-width:75rem;margin:0 auto;padding:clamp(4.5rem,9vw,8rem) var(--pad)}
.story .section-head{padding:0;margin:0 0 2.5rem}
.story .section-head__no{color:var(--accent-soft)}
.story__intro{
  display:grid;grid-template-columns:minmax(240px,360px) 1fr;
  gap:clamp(2rem,4vw,4rem);align-items:center;margin-bottom:4rem;
}
.story__portrait{
  background:#fbf7ec;padding:.8rem .8rem 1rem;transform:rotate(-1.4deg);
  box-shadow:0 16px 38px rgba(0,0,0,.4);
}
.story__portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 28%}
.story__portrait figcaption{font-family:var(--hand);font-size:.95rem;padding-top:.7rem;text-align:center;color:var(--green)}
.story__lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem)}
.story__lead p{margin-bottom:1.2em;opacity:.94}
.story__lead p:last-child{margin-bottom:0}
.story__lead em{color:var(--accent-soft)}
@media(max-width:760px){
  .story__intro{grid-template-columns:1fr;gap:1.8rem}
  .story__portrait{max-width:340px;margin:0 auto}
}
.story__spread{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;margin-bottom:4rem}
.polaroid{
  background:#fbf7ec;color:var(--ink);padding:.8rem .8rem 1rem;max-width:320px;
  transform:rotate(-2.4deg);box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.polaroid--b{transform:rotate(1.8deg);align-self:flex-end;max-width:280px}
.polaroid img{aspect-ratio:1;object-fit:cover;width:100%}
.polaroid--b img{aspect-ratio:3/4}
.polaroid figcaption{font-family:var(--hand);font-size:.95rem;padding-top:.7rem;text-align:center;color:var(--green)}
.timeline{list-style:none;max-width:58rem}
.timeline li{
  display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;align-items:baseline;
  padding:1.1rem 0;border-top:1.5px dashed color-mix(in srgb,var(--cream) 35%,transparent);
}
.timeline b{
  font-family:var(--mono);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);
}
.timeline span{opacity:.94}
@media(max-width:560px){.timeline li{grid-template-columns:1fr;gap:.3rem}}

/* ————— events ————— */
.events{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:center;
  max-width:75rem;margin:0 auto;padding:clamp(4.5rem,9vw,8rem) var(--pad);gap:clamp(2rem,4vw,4rem);
}
.events__photo{border:2px solid var(--green-ink);box-shadow:-8px 8px 0 var(--accent);transform:rotate(-.6deg)}
.events h2{color:var(--green);margin-bottom:1.1rem}
.events__copy p{max-width:42ch;margin-bottom:1.6rem}
@media(max-width:820px){.events{grid-template-columns:1fr}}

/* ————— lately strip ————— */
.lately{padding:0 0 clamp(3rem,6vw,5rem)}
.lately__head{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  padding:0 var(--pad);margin-bottom:1.2rem;color:var(--green);
}
.lately__strip{
  display:flex;gap:1rem;overflow-x:auto;padding:0 var(--pad) 1rem;
  scroll-snap-type:x mandatory;
}
.lately__strip img{
  height:220px;width:auto;flex:0 0 auto;scroll-snap-align:start;
  border:1.5px solid var(--green-ink);
  transition:transform .25s;
}
.lately__strip img:hover{transform:rotate(-1.5deg) scale(1.02)}

/* ————— footer ————— */
.footer{
  background:var(--green-ink);color:var(--cream);text-align:center;
  padding:3.5rem var(--pad) 2.5rem;
}
.footer__tree{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 1.1rem}
.footer__name{font-family:var(--display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:1rem}
.footer__addr{font-family:var(--mono);font-size:.85rem;line-height:1.8}
.footer__hours{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);margin-top:1rem}
.footer__fine{font-size:.75rem;opacity:.55;margin-top:2rem;font-family:var(--mono)}