/* =========================================================================
   SOULBREW — LANDING · "Considered"
   Landing-only sections (hero, selection, ethos, ritual, places, finale).
   The shared chrome (palette vars, pill, ey, reveal, grain, nav, footer, cart
   theming) lives in considered.css, which this page loads first.
   ========================================================================= */

/* ============================= HERO ============================= */
.hero {
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 92% at 50% 34%, #5A4230 0%, var(--green) 46%, var(--green-deep) 100%);
  text-align:center;
}
.hero__scrim {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(46% 40% at 50% 52%, rgba(34,24,18,0.55), transparent 70%);
}
.hero__drink {
  position:absolute; z-index:1; width:min(76vw, 540px); height:auto;
  filter:drop-shadow(0 44px 60px rgba(0,0,0,0.5));
  animation:hero-sway 9s ease-in-out infinite;
  transform:translate(var(--px,0), var(--py,0));
}
.hero__type { position:relative; z-index:3; padding-inline:20px; }
.hero__eyebrow {
  font-size:clamp(11px, 1.4vw, 13px); letter-spacing:0.34em; text-transform:uppercase; font-weight:500;
  color:var(--cream-dim); margin-bottom:clamp(16px, 3vh, 30px);
  text-shadow:0 1px 20px rgba(20,26,14,0.4);
}
.hero__big {
  font-size:clamp(58px, 15vw, 200px); line-height:0.86; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--cream); font-weight:300;
  text-shadow:0 2px 40px rgba(20,26,14,0.35);
}
.hero__big .l { display:block; }
.hero__big .l:nth-child(2) { letter-spacing:0.02em; }
.hero__sub {
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(120px, 20vh, 168px);
  margin-inline:auto; max-width:34ch; padding-inline:24px;
  color:var(--cream-dim); font-size:14.5px; letter-spacing:0.04em; font-weight:300;
}
.hero__foot {
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(34px, 6vh, 52px);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.hero__scrolllink { color:var(--cream); opacity:.7; }
.hero__scrolllink svg { width:22px; height:22px; animation:hero-nudge 2s ease-in-out infinite; }

@keyframes hero-sway { 0%,100% { transform:translate(var(--px,0), var(--py,0)); } 50% { transform:translate(var(--px,0), calc(var(--py,0) - 16px)); } }
@keyframes hero-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .hero__drink, .hero__scrolllink svg { animation:none; }
}

/* Hero load intro */
.lp .hero__eyebrow { opacity:0; }
.lp.is-ready .hero__eyebrow { opacity:1; transition:opacity 1s ease .25s; }
.lp .hero__big .l { opacity:0; transform:translateY(0.24em); }
.lp.is-ready .hero__big .l { opacity:1; transform:none; transition:opacity 1s var(--ease, cubic-bezier(.22,1,.36,1)), transform 1s var(--ease, cubic-bezier(.22,1,.36,1)); }
.lp.is-ready .hero__big .l:nth-child(2) { transition-delay:.12s; }
.lp .hero__sub, .lp .hero__foot { opacity:0; }
.lp.is-ready .hero__sub { opacity:1; transition:opacity 1s ease .5s; }
.lp.is-ready .hero__foot { opacity:1; transition:opacity 1s ease .65s; }
@media (prefers-reduced-motion: reduce) {
  .lp .hero__eyebrow, .lp .hero__big .l, .lp .hero__sub, .lp .hero__foot { opacity:1; transform:none; }
}

/* ============================= SELECTION ============================= */
.selection { background:var(--paper); color:var(--ink); padding-block:clamp(72px, 11vw, 128px); }
.selection .ey { text-align:center; }
.selection .section-title { text-align:center; margin-bottom:clamp(44px, 6vw, 72px); }
.sel-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 40px); }
@media (max-width:900px) { .sel-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .sel-grid { grid-template-columns:1fr; max-width:360px; margin-inline:auto; } }

.dcard { display:flex; flex-direction:column; text-align:center; }
.dcard__im {
  display:grid; place-items:center; aspect-ratio:3/4; border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg, var(--paper-2), #E5DCC6);
}
.dcard__im img { width:66%; height:auto; transition:transform .6s var(--ease, cubic-bezier(.22,1,.36,1)); }
.dcard:hover .dcard__im img { transform:translateY(-8px) scale(1.04); }
.dcard__no { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--clay); margin-top:22px; }
.dcard__nm { font-size:19px; letter-spacing:0.09em; text-transform:uppercase; font-weight:400; margin-top:9px; color:var(--ink); }
.dcard__fe { font-size:13px; color:var(--ink-soft); margin-top:7px; letter-spacing:0.02em; }
.dcard__pr { font-size:14px; letter-spacing:0.1em; margin-top:13px; color:var(--ink); }
.dcard.is-soldout { opacity:.5; }
.sel-foot { text-align:center; margin-top:clamp(48px, 7vw, 80px); }

/* ============================= ETHOS ============================= */
.ethos { background:var(--moss); color:var(--cream); padding-block:clamp(80px, 13vw, 150px); }
.ethos .ey { color:rgba(242,236,211,.7); }
.ethos__head {
  font-size:clamp(30px, 5.2vw, 68px); text-transform:uppercase; letter-spacing:0.045em;
  line-height:1.06; max-width:17ch; margin-top:18px; color:var(--cream);
}
.ethos__body { font-size:clamp(15px, 1.4vw, 18px); color:rgba(242,236,211,.82); max-width:52ch; margin-top:26px; font-weight:300; }
.ethos__vals {
  display:flex; flex-wrap:wrap; gap:12px 40px; margin-top:44px;
  list-style:none; padding:0;
  border-top:1px solid rgba(242,236,211,.2); padding-top:32px;
}
.ethos__vals li { font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); }
.ethos__vals li::before { content:"— "; color:rgba(242,236,211,.5); }
.ethos__foot { margin-top:44px; }

/* ============================= RITUAL ============================= */
.ritual { background:var(--paper); color:var(--ink); padding-block:clamp(72px, 11vw, 128px); }
.ritual .section-title { margin-bottom:clamp(40px, 6vw, 68px); }
.ritual__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px, 4vw, 56px); list-style:none; padding:0; }
@media (max-width:760px) { .ritual__grid { grid-template-columns:1fr; } }
.ritual__item { border-top:1px solid var(--ink); padding-top:24px; }
.ritual__no { font-size:14px; letter-spacing:0.2em; color:var(--clay); }
.ritual__item h3 { font-size:clamp(20px, 2.4vw, 27px); text-transform:uppercase; letter-spacing:0.06em; margin:16px 0 12px; color:var(--ink); }
.ritual__item p { color:var(--ink-soft); font-size:15px; font-weight:300; }

/* ============================= PLACES ============================= */
.places { background:var(--green-deep); color:var(--cream); padding-block:clamp(80px, 13vw, 150px); }
.places .ey { color:rgba(242,236,211,.7); }
.places__head { font-size:clamp(30px, 5vw, 62px); text-transform:uppercase; letter-spacing:0.05em; margin-top:16px; margin-bottom:clamp(40px, 6vw, 68px); color:var(--cream); }
.places__grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(242,236,211,.24); }
@media (max-width:680px) { .places__grid { grid-template-columns:1fr; } }
.place { padding:clamp(28px,4vw,44px) 0; border-bottom:1px solid rgba(242,236,211,.14); }
@media (min-width:681px) {
  .place { padding-inline:clamp(24px,4vw,48px); border-bottom:none; }
  .place:first-child { padding-left:0; border-right:1px solid rgba(242,236,211,.14); }
}
.place__idx { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(242,236,211,.6); }
.place h3 { font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:0.05em; margin:14px 0 14px; color:var(--cream); }
.place p { color:rgba(242,236,211,.78); font-size:15px; font-weight:300; margin-bottom:6px; }
.place__hrs { font-size:12.5px; color:rgba(242,236,211,.55) !important; letter-spacing:0.04em; margin-top:14px; }

/* ============================= FINALE ============================= */
.finale {
  min-height:74vh; display:grid; place-items:center; text-align:center; padding:clamp(70px,12vw,120px) 24px;
  background:radial-gradient(120% 100% at 50% 40%, #5A4230, var(--green-deep));
}
.finale__inner { display:flex; flex-direction:column; align-items:center; gap:22px; }
.finale__big { font-size:clamp(46px, 10vw, 150px); text-transform:uppercase; letter-spacing:0.06em; line-height:0.94; color:var(--cream); font-weight:300; }
.finale__sub { color:var(--cream-dim); font-size:15px; max-width:40ch; font-weight:300; letter-spacing:0.03em; }
.finale__inner .pill { margin-top:14px; }