:root {
  --black: #080707;
  --cream: #fff6dd;
  --pink: #ff4b8b;
  --lime: #d8ff42;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--cream);
  background: #8f3f62 url("assets/bebe-background.jpg") center / cover fixed no-repeat;
  font-family: "Space Mono", monospace;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(5,5,5,.88) 8%, rgba(5,5,5,.38) 58%, rgba(255,75,139,.2));
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.4) .55px, transparent .8px); background-size: 5px 5px; mix-blend-mode: overlay; }
.nav, main, footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.nav { min-height: 92px; display: flex; justify-content: space-between; align-items: center; }
.logo, h1, h2, .button { font-family: "Archivo Black", sans-serif; }
.logo { font-size: 1.55rem; color: var(--lime); text-decoration: none; letter-spacing: -1px; }
.nav-link { color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--lime); font-size: .75rem; font-weight: 700; padding-bottom: 4px; }
.hero { min-height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 70px 0 90px; }
.eyebrow, .section-label { color: var(--lime); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
h1 { margin: 10px 0 20px; font-size: clamp(4.8rem, 13vw, 10rem); line-height: .78; letter-spacing: -0.08em; text-transform: uppercase; }
h1 span { color: var(--pink); text-shadow: 4px 4px 0 var(--black); }
.hero-copy { max-width: 500px; font-size: clamp(.9rem, 2vw, 1.05rem); line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.button { display: inline-block; padding: 14px 18px; border: 2px solid var(--black); text-decoration: none; font-size: .82rem; color: var(--black); box-shadow: 4px 4px 0 var(--black); transition: transform .15s, box-shadow .15s; }
.button:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--black); }
.button-primary { background: var(--lime); }
.button-ghost { background: var(--cream); }
.ticker { margin-top: 52px; color: var(--cream); background: var(--black); padding: 10px 13px; transform: rotate(-2deg); font-size: .74rem; }
.card { margin: 0 auto 28px; max-width: 820px; padding: clamp(28px, 6vw, 60px); background: var(--cream); color: var(--black); border: 4px solid var(--black); box-shadow: 10px 10px 0 var(--pink); }
h2 { font-size: clamp(1.7rem, 5vw, 3.2rem); line-height: .95; letter-spacing: -.06em; text-transform: uppercase; margin: 10px 0 20px; }
.lore > p:not(.section-label) { max-width: 650px; line-height: 1.75; }
.quote-kicker { margin: 34px 0 3px; color: var(--pink); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.meme-quote { margin: 0; font: clamp(2.2rem, 7vw, 4.8rem)/.85 "Archivo Black", sans-serif; letter-spacing: -.07em; text-transform: uppercase; color: var(--black); -webkit-text-stroke: 1px var(--black); }
.stats { display: flex; margin-top: 35px; border-top: 2px solid var(--black); }
.stats div { flex: 1; padding: 18px 8px 0 0; display: grid; }
.stats strong { font: 1.6rem "Archivo Black", sans-serif; color: var(--pink); }
.stats span { font-size: .65rem; text-transform: uppercase; }
.address-row { display: flex; align-items: stretch; border: 3px solid var(--black); background: white; }
code { min-width: 0; flex: 1; padding: 16px; overflow-x: auto; color: #4b4650; font: .76rem "Space Mono", monospace; white-space: nowrap; }
button { cursor: pointer; border: 0; border-left: 3px solid var(--black); padding: 0 18px; background: var(--lime); font: 700 .75rem "Space Mono", monospace; }
.tiny-note { font-size: .68rem; margin: 15px 0 0; opacity: .7; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 60px 0 25px; font-size: .65rem; text-transform: uppercase; }
@media (max-width: 560px) {
  .nav, main, footer { width: min(100% - 28px, 1120px); }
  .hero { min-height: 560px; padding-top: 40px; }
  h1 { font-size: clamp(4.5rem, 23vw, 7rem); }
  .address-row { display: grid; }
  button { border-left: 0; border-top: 3px solid var(--black); min-height: 50px; }
  footer { flex-direction: column; }
}