/* ===========================================================
   East End Vintage Sale — rebuilt from Canva design
   Fonts: Anton (headlines), Big Shoulders (eyebrows), DM Serif (body)
   =========================================================== */

:root{
  --navy:#11284A;
  --pink:#EFA0BF;
  --pink-stripe:#F0BCCF;
  --pink-note:#EEB8D0;
  --pink-soft:#FDE7EF;
  --pink-loc:#FBD9E8;
  --cream:#F7F0E4;
  --cream-bg:#F9EEED;
  --blue:#CBD5E1;
  --ink:#111319;

  --font-head:'Anton',Impact,sans-serif;
  --font-eyebrow:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-serif:'DM Serif Display',Georgia,serif;

  --wrap:1180px;
  --sketch-radius:255px 12px 225px 15px/15px 225px 15px 255px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-serif);
  color:var(--navy);
  background:var(--cream-bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.35;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}

/* Paper texture helper (subtle wrinkle multiply over light sections) */
.paper{background-image:url('assets/paper_texture.jpg');background-size:600px;background-blend-mode:multiply}

h1,h2,h3{margin:0;font-weight:400}
.eyebrow{
  font-family:var(--font-eyebrow);
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:clamp(13px,1.4vw,16px);
  color:var(--navy);
  margin-bottom:.5em;
}
.display{
  font-family:var(--font-head);
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.005em;
}

/* ============================ NAV ============================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--navy);
  color:#fff;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav__logo img{height:44px;width:auto}
.nav__links{display:flex;gap:clamp(18px,3vw,42px);list-style:none;margin:0;padding:0}
.nav__links a{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:clamp(15px,1.7vw,20px);
  color:#fff;text-decoration:none;
  transition:color .15s;
}
.nav__links a:hover{color:var(--pink)}
.nav__toggle{display:none}

/* ============================ HERO ============================ */
.hero{
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,
      var(--pink-stripe) 0, var(--pink-stripe) 42px,
      #fbf3f6 42px, #fbf3f6 84px);
  padding:26px 0 40px;
}
.hero::before{ /* paper wrinkle overlay */
  content:"";position:absolute;inset:0;
  background:url('assets/paper_texture.jpg') center/620px;
  mix-blend-mode:multiply;opacity:.8;pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}

.hero__top{display:flex;justify-content:flex-end;margin-bottom:6px}
.hero__wordmark{margin:0 auto 14px;text-align:center}
.hero__wordmark img{height:clamp(130px,20vw,270px);width:auto;margin:0 auto}

.hero__grid{
  display:grid;
  grid-template-columns:1fr minmax(240px,340px) 1fr;
  align-items:center;
  gap:20px;
  margin-top:8px;
}
.hero__left{text-align:left}
.hero__right{text-align:left}
.hero__center{align-self:end;justify-self:center;position:relative;margin-top:-58px}
.hero__center img{height:clamp(380px,48vw,600px);width:auto;filter:drop-shadow(0 12px 22px rgba(17,40,74,.18))}
.hero__motion{position:absolute;left:-16%;top:30%;width:38%;height:38%;pointer-events:none}
.hero__motion path{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;opacity:.55}
.hero__caption{
  position:absolute;top:58%;right:-32px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  font-family:var(--font-serif);font-style:italic;font-weight:700;
  font-size:clamp(16px,1.9vw,22px);line-height:1.05;color:var(--navy);
}

.hero__headline{
  font-family:var(--font-head);text-transform:uppercase;
  color:var(--navy);line-height:.96;
  font-size:clamp(34px,5vw,62px);
}
.hero__vibes{
  font-family:var(--font-head);text-transform:uppercase;
  color:var(--navy);line-height:.98;
  font-size:clamp(30px,4.4vw,54px);
}
.hero__body{
  font-size:clamp(15px,1.5vw,19px);
  max-width:34ch;margin-top:18px;line-height:1.4;
  text-align:justify;
}
.hero__sustain{
  position:relative;display:inline-block;margin-top:26px;
  color:var(--navy);
  padding:20px 40px 26px;
}
.hero__sustain-text{position:relative;z-index:1;display:block;font-style:italic;font-size:clamp(18px,2vw,24px)}

/* Aug 9 pinned badge */
.badge{
  position:relative;display:inline-block;margin-top:22px;
  background:var(--cream);color:var(--navy);
  padding:16px 26px 14px;text-align:center;
  border-radius:6px;box-shadow:0 6px 16px rgba(17,40,74,.15);
  transform:rotate(-3deg);
}
.badge::before{ /* push-pin */
  content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--pink);box-shadow:0 2px 0 rgba(17,40,74,.35);
}
.badge__sunday{font-family:var(--font-eyebrow);font-weight:700;letter-spacing:.22em;color:var(--pink);font-size:13px}
.badge__date{font-family:var(--font-head);font-size:clamp(30px,4vw,44px);line-height:1;margin:2px 0}
.badge__time{font-family:var(--font-eyebrow);font-weight:700;letter-spacing:.12em;font-size:13px}

/* ======================= MARQUEE STRIP ======================= */
.marquee{background:var(--navy);color:#fff;overflow:hidden;padding:14px 0;white-space:nowrap}
.marquee__track{display:inline-flex;align-items:center;animation:scroll 26s linear infinite}
.marquee__track span{
  font-family:var(--font-head);text-transform:uppercase;
  font-size:clamp(18px,2.2vw,26px);letter-spacing:.04em;
  padding:0 6px;
}
.marquee .star{display:inline-flex;align-items:center;padding:0 22px}
.marquee .star svg{fill:var(--pink);stroke:var(--cream);stroke-width:1.4;stroke-linejoin:round}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ========================= SECTIONS ========================= */
.section{padding:clamp(56px,8vw,110px) 0}
.section--details{background:var(--cream-bg);position:relative}
.section--details::before{content:"";position:absolute;inset:0;background:url('assets/paper_texture.jpg') center/620px;mix-blend-mode:multiply;opacity:.6;pointer-events:none}
.section--details .wrap{position:relative;z-index:2}
.section__head{max-width:760px}
.section__title{
  font-family:var(--font-head);text-transform:uppercase;
  color:var(--navy);line-height:.98;
  font-size:clamp(34px,5.2vw,64px);margin-bottom:.35em;
}
.section__lead{font-size:clamp(16px,1.7vw,21px);max-width:52ch;line-height:1.4}

/* Detail note cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,42px);margin-top:clamp(36px,5vw,60px)}
.card{
  position:relative;background:transparent;
  border:2px solid var(--navy);
  border-radius:var(--sketch-radius);
  padding:44px 14px 30px;text-align:center;min-height:190px;max-width:280px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.card:nth-child(1){transform:rotate(-1.2deg)}
.card:nth-child(2){transform:rotate(.8deg)}
.card:nth-child(3){transform:rotate(-.6deg)}
.card__tag{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:var(--cream-bg);border:2px solid var(--navy);
  padding:3px 14px;font-family:var(--font-eyebrow);font-weight:700;
  letter-spacing:.18em;font-size:13px;border-radius:4px;
}
.card__big{font-family:var(--font-head);text-transform:uppercase;font-size:clamp(34px,4.8vw,50px);line-height:1}
.card__sm{font-family:var(--font-eyebrow);font-weight:700;letter-spacing:.14em;font-size:15px}

/* Hand-drawn doodle frame — used by the sketchbox and the drinks note */
.doodle-frame{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
  filter:drop-shadow(6px 8px 0 rgba(17,19,25,.12));
}
.doodle-frame path{vector-effect:non-scaling-stroke}
.doodle-tick{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* Hand-drawn cream box (Vibe + Location) */
.sketchbox{position:relative}
.sketchbox__body{position:relative;z-index:1;padding:clamp(30px,5vw,60px)}

/* Vibe section */
.section--vibe{
  position:relative;
  background:
    repeating-linear-gradient(90deg,
      var(--pink-stripe) 0,var(--pink-stripe) 48px,
      #fbf3f6 48px,#fbf3f6 96px);
}
.section--vibe::before{content:"";position:absolute;inset:0;background:url('assets/paper_texture.jpg') center/620px;mix-blend-mode:multiply;opacity:.6}
.section--vibe .wrap{position:relative;z-index:2}
.vibe__inner{display:flex;gap:28px;align-items:flex-start;margin-top:18px}
.vibe__note{height:clamp(120px,15vw,190px);width:auto;flex-shrink:0}
.vibe__body{font-size:clamp(20px,2.3vw,27px);line-height:1.45;max-width:60ch;text-align:justify}

.vibe__star{position:absolute;z-index:3;fill:var(--pink);stroke:var(--cream);stroke-width:1.4;stroke-linejoin:round;pointer-events:none}
.vibe__star--1{top:-16px;left:6%;transform:rotate(-12deg)}
.vibe__star--2{bottom:-10px;right:5%;transform:rotate(18deg)}

/* Drinks section */
.section--drinks{
  position:relative;
  background:
    repeating-linear-gradient(90deg,
      var(--blue) 0,var(--blue) 48px,
      #dbe3ec 48px,#dbe3ec 96px);
}
.section--drinks::before{content:"";position:absolute;inset:0;background:url('assets/paper_texture.jpg') center/620px;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.section--drinks .wrap{position:relative;z-index:2}
.drinks__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);align-items:center;margin-top:36px}
.drinks__cups img{width:100%;height:auto}
.drinks__labels{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:14px;text-align:center}
.drinks__labels span{font-family:var(--font-eyebrow);font-weight:700;letter-spacing:.1em;font-size:clamp(12px,1.3vw,15px);text-transform:uppercase;line-height:1.15}
.drinks__note{
  position:relative;
  transform:rotate(1.2deg);
}
.drinks__note-body{
  position:relative;z-index:1;
  padding:clamp(24px,3.5vw,38px);
  font-size:clamp(18px,2vw,23px);line-height:1.5;
}
.drinks__note-body p{margin:0 0 1em}
.drinks__note-body p:last-child{margin:0}

/* Location section */
.section--location{
  position:relative;
  background:var(--pink-loc);
}
.section--location::before{content:"";position:absolute;inset:0;background:url('assets/paper_texture.jpg') center/620px;mix-blend-mode:multiply;opacity:.75;pointer-events:none}
.section--location .wrap{position:relative;z-index:2}
.loc__inner{display:flex;gap:clamp(26px,4vw,50px);align-items:center}
.loc__map{flex-shrink:0}
.loc__map img{width:clamp(150px,18vw,220px);height:auto;border-radius:6px}
.loc__title{font-family:var(--font-head);text-transform:uppercase;font-size:clamp(30px,4.4vw,54px);line-height:.98;margin:.15em 0 .5em}
.loc__body{font-size:clamp(19px,2.2vw,25px);line-height:1.45;margin:0 0 1em;max-width:46ch;text-align:justify}

/* Buttons / links with icon */
.btn-maps{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--navy);
  font-family:var(--font-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:15px;margin-top:6px;
}
.btn-maps .ico{width:42px;height:42px;border:2px solid var(--navy);border-radius:50%;display:grid;place-items:center}
.btn-maps:hover{color:#000}
.btn-maps:hover .ico{background:var(--navy)}
.btn-maps:hover .ico svg{fill:#fff}

/* ========================== FOOTER ========================== */
.footer{
  position:relative;text-align:center;
  padding:clamp(56px,8vw,100px) 0 60px;
  background:
    repeating-linear-gradient(90deg,
      var(--pink-stripe) 0,var(--pink-stripe) 52px,
      #fdf6f8 52px,#fdf6f8 104px);
}
.footer::before{content:"";position:absolute;inset:0;background:url('assets/paper_texture.jpg') center/620px;mix-blend-mode:multiply;opacity:.6}
.footer .wrap{position:relative;z-index:2}
.footer__wordmark{height:clamp(88px,14vw,150px);width:auto;margin:0 auto 20px}
.footer__cta{
  font-family:var(--font-head);text-transform:uppercase;color:var(--navy);
  font-size:clamp(26px,4vw,50px);line-height:1;margin:6px 0 10px;
}
.footer__handle{font-style:italic;font-size:clamp(18px,2vw,26px);margin-bottom:22px}
.footer__handle a{text-decoration:none}

/* Social icon rows */
.socials{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.socials--top{gap:12px}
.socials a{
  width:44px;height:44px;border:2px solid var(--navy);border-radius:50%;
  display:grid;place-items:center;transition:.15s;
}
.socials a svg{width:20px;height:20px;fill:var(--navy)}
.socials a:hover{background:var(--navy)}
.socials a:hover svg{fill:#fff}

/* ========================= RESPONSIVE ========================= */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  .hero__left,.hero__right{text-align:center}
  .hero__center{order:-1}
  .hero__center img{height:clamp(320px,70vw,440px)}
  .hero__body{margin-left:auto;margin-right:auto}
  .cards{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .vibe__inner{flex-direction:column;align-items:center;text-align:center}
  .drinks__grid{grid-template-columns:1fr}
  .loc__inner{flex-direction:column;text-align:center}
  .loc__body{margin-left:auto;margin-right:auto}
  .btn-maps{justify-content:center}

  .nav__links{
    position:absolute;top:66px;left:0;right:0;
    background:var(--navy);flex-direction:column;align-items:center;
    gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav__links.open{max-height:340px}
  .nav__links li{width:100%;text-align:center}
  .nav__links a{display:block;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
  .nav__toggle{
    display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;
  }
  .nav__toggle span{width:26px;height:3px;background:#fff;border-radius:2px}
}
@media (max-width:520px){
  .hero{padding-top:16px}
  .badge{transform:none}
  .card:nth-child(n){transform:none}
}