/* ===========================================================
   SHAKE TEA — shared stylesheet
   Palette pulled from the condensation-drop sticker background:
   amber sunrise → blaze orange → ember, squeeze-yellow droplets,
   brewed-plum for ink, cream-foam for light text on dark.
=========================================================== */

:root{
  --amber-sunrise:#F6A623;
  --blaze:#E2591B;
  --ember:#B93C13;
  --squeeze-yellow:#FFCB3D;
  --brew-plum:#3B1220;
  --cream-foam:#FFF8EC;
  --ink:#2B0F08;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --radius: 22px;
  --container: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  color:var(--cream-foam);
  background-image:url("../assets/bg.png");
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-color:var(--ember); /* matches bottom edge of the sticker art, so tall pages don't seam */
  min-height:100vh;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- floating ambient droplets (site-wide signature) ---------- */
.droplet-field{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.droplet-field span{
  position:absolute;
  width:10px; height:12px;
  background:radial-gradient(circle at 35% 30%, #fff9dfcc, var(--squeeze-yellow) 55%, #e29a1a 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity:.55;
  filter:drop-shadow(0 2px 3px rgba(60,20,0,.25));
  animation:trickle linear infinite;
}
@keyframes trickle{
  0%{ transform:translateY(-40px) scale(1); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.5; }
  100%{ transform:translateY(140vh) scale(.85); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .droplet-field{ display:none; }
}

/* ---------- layout shell ---------- */
.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; position:relative; z-index:1; }

header.site{
  position:relative; z-index:2;
  padding:26px 0 10px;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.logo{
  font-family:var(--display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
  color:var(--cream-foam);
}
.logo svg{ width:34px; height:34px; }
.logo-mark{
  height:224px; width:224px;
  object-fit:contain; object-position:center center;
  background:linear-gradient(180deg, #FAAE19, #E07026);
  border-radius:50%;
  box-shadow:0 4px 12px rgba(43,15,8,.35);
  transition:transform .2s ease;
}
.logo:hover .logo-mark{ transform:rotate(-4deg) scale(1.04); }

/* Brand wordmark — approximates the logo's bubble lettering wherever
   "Shake Tea" appears as text rather than as the mark itself. */
.brand-mark{
  font-family:'Titan One', var(--display);
  font-size:1.5rem;
  color:var(--squeeze-yellow);
  -webkit-text-stroke:1.5px var(--brew-plum);
  paint-order:stroke fill;
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
  letter-spacing:.01em;
  display:inline-block;
  line-height:1.2;
}
nav.links{
  display:flex; gap:6px;
  background:rgba(59,18,32,.28);
  border:1px solid rgba(255,248,236,.25);
  backdrop-filter:blur(6px);
  padding:6px; border-radius:999px;
}
nav.links a{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:9px 16px;
  border-radius:999px;
  color:var(--cream-foam);
  opacity:.85;
  transition:background .2s ease, opacity .2s ease, transform .2s ease;
}
nav.links a:hover{ background:rgba(255,248,236,.16); opacity:1; }
nav.links a.active{ background:var(--squeeze-yellow); color:var(--brew-plum); opacity:1; font-weight:700; }

.btn{
  font-family:var(--mono);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:13px 22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{
  background:var(--squeeze-yellow);
  color:var(--brew-plum);
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.btn-primary:hover{ transform:translateY(-2px) rotate(-1deg); box-shadow:0 12px 26px rgba(0,0,0,.24); }
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,248,236,.5);
  color:var(--cream-foam);
}
.btn-ghost:hover{ background:rgba(255,248,236,.12); }

/* ---------- glass / wet-cup card, the site's signature surface ---------- */
.glass{
  position:relative;
  background:linear-gradient(180deg, rgba(255,248,236,.16), rgba(255,248,236,.07));
  border:1px solid rgba(255,248,236,.28);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  overflow:hidden;
}
.glass::before{
  /* condensation runnel that trickles on hover, echoing the sticker art */
  content:"";
  position:absolute; top:-20px; left:22px;
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--squeeze-yellow));
  opacity:0;
  transition:opacity .2s ease;
}
.glass:hover::before{
  opacity:.9;
  animation:runnel 1.1s ease-in forwards;
}
@keyframes runnel{
  0%{ top:-20px; opacity:.9; }
  100%{ top:105%; opacity:0; }
}

section{ position:relative; z-index:1; padding:64px 0; }

/* Media page — placeholder slots for the user's own YouTube embeds and photos */
.media-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  margin-top:32px;
}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:32px;
}
.media-slot{
  position:relative;
  border-radius:var(--radius);
  border:2px dashed rgba(255,248,236,.4);
  background:rgba(255,248,236,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:10px;
  padding:24px;
  color:rgba(255,248,236,.75);
}
.media-slot.video{ aspect-ratio:16/9; }
.media-slot.photo{ aspect-ratio:1/1; }
.media-slot svg{ width:34px; height:34px; opacity:.8; }
.media-slot .slot-label{
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--squeeze-yellow);
}
.media-slot .slot-hint{
  font-size:.82rem;
  max-width:26ch;
  color:rgba(255,248,236,.65);
}
.media-slot iframe, .media-slot img{
  width:100%; height:100%;
  border:0; border-radius:calc(var(--radius) - 2px);
  object-fit:cover;
}
@media (max-width:760px){
  .media-grid{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Full-bleed hero background — spans the viewport regardless of the
   .wrap container's max-width, so the supplied artwork isn't stretched
   or letterboxed to the site's content column. */
.hero-bleed{
  position:relative;
  left:50%; right:50%;
  width:100vw;
  margin-left:-50vw; margin-right:-50vw;
  padding:0;
  background-image:url("../assets/hero-bg.jpg");
  background-size:cover;
  background-position:left top;
  background-repeat:no-repeat;
}
.hero-bleed .wrap{ padding-top:20px; padding-bottom:70px; }
.hero-copy{
  max-width:640px;
  margin-left:clamp(0px, 44vw, 620px);
  margin-top:56px;
}
@media (max-width:820px){
  .hero-bleed{
    background-size:contain;
    background-color:var(--amber-sunrise);
  }
  .hero-bleed header.site{ margin-top:52vw; }
  .hero-copy{ margin-left:0; margin-top:14px; }
}

.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--squeeze-yellow);
  margin:0 0 14px;
}
h1,h2,h3{ font-family:var(--display); color:var(--cream-foam); margin:0; line-height:1.02; }
h1{ font-size:clamp(2.6rem, 6vw, 5rem); font-weight:800; letter-spacing:-0.02em; }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:800; letter-spacing:-0.01em; }
p{ line-height:1.65; color:rgba(255,248,236,.92); }
.lede{ font-size:1.15rem; max-width:56ch; color:rgba(255,248,236,.9); }

footer.site{
  position:relative; z-index:1;
  margin-top:40px;
  background:rgba(43,15,8,.55);
  border-top:1px solid rgba(255,248,236,.2);
  backdrop-filter:blur(8px);
  padding:44px 0 28px;
}
.foot-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px;
}
.foot-grid h4{
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--squeeze-yellow); margin:0 0 12px;
}
.foot-grid p, .foot-grid a{ font-size:.92rem; color:rgba(255,248,236,.82); }
.foot-grid a{ display:block; margin-bottom:6px; }
.foot-grid a:hover{ color:var(--squeeze-yellow); }
.foot-bottom{
  margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,248,236,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:.72rem; color:rgba(255,248,236,.6);
  text-transform:uppercase; letter-spacing:.04em;
}

@media (max-width: 760px){
  nav.links{ display:none; }
  .foot-grid{ grid-template-columns:1fr; }
}