:root { color-scheme: light; --ink: #11110f; --paper: #f3eee7; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); }
body { font-family: Rubik, system-ui, sans-serif; color: var(--ink); }
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; }
.hero__wash { position: absolute; inset: 0; background: radial-gradient(circle at 70% 44%, rgba(255,255,255,.08), transparent 45%), linear-gradient(90deg, transparent 45%, rgba(248,244,238,.11) 73%, rgba(248,244,238,.28)); z-index: -2; }
.content { width: min(40vw, 650px); margin-left: 52.5vw; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6.5rem 1.5rem 4rem; text-align: center; }
.brand { width: min(100%, 650px); }
.brand img { display: block; width: 100%; height: auto; }
h1 { margin: .1rem 0 0; font-family: 'Patrick Hand', cursive; font-size: clamp(3rem, 4.4vw, 5.7rem); line-height: .9; font-weight: 400; text-transform: uppercase; transform: rotate(-1deg); }
.scribble { width: min(280px, 55%); margin: .45rem auto 1.55rem; overflow: visible; }
.scribble path { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.tagline { margin: 0 0 .8rem; font-size: clamp(.6rem, .72vw, .82rem); letter-spacing: .37em; text-transform: uppercase; white-space: nowrap; }
.pitch { max-width: 560px; margin: 0 0 1.8rem; color: rgba(17,17,15,.72); font-size: clamp(.82rem, .9vw, 1rem); line-height: 1.55; }
.notify { display: flex; align-items: center; width: 100%; border: 1px solid rgba(17,17,15,.4); border-radius: 999px; background: rgba(255,255,255,.78); box-shadow: 0 18px 32px rgba(28,23,17,.08); overflow: visible; }
.notify:focus-within { outline: 3px solid rgba(17,17,15,.15); outline-offset: 4px; }
.notify input { flex: 1; min-width: 0; height: 64px; padding: 0 1.75rem; border: 0; outline: 0; background: transparent; font: 400 1rem Rubik, sans-serif; }
.notify button { height: 62px; padding: 0 2rem; border: 0; border-radius: 999px; color: white; background: var(--ink); font: 600 1rem Rubik, sans-serif; cursor: pointer; transition: transform .2s, background .2s; }
.notify button:hover { background: #2b2a27; transform: scale(.98); }
.notify button:disabled { opacity: .65; cursor: wait; }
.notify button.is-fleeing { position: relative; z-index: 50; box-shadow: 0 14px 36px rgba(17,17,15,.24); }
.form-status { min-height: 1.2rem; margin: .65rem 0 1rem; font-size: .86rem; }
.socials { display: flex; gap: 1.15rem; justify-content: center; }
.socials a { display: grid; width: 44px; height: 44px; place-items: center; color: var(--ink); border-radius: 50%; font-size: 1.55rem; text-decoration: none; transition: color .2s, background .2s, transform .2s; }
.socials a:hover { color: white; background: var(--ink); }
.socials .social-decoy.is-fleeing { position: relative; z-index: 49; box-shadow: 0 10px 28px rgba(17,17,15,.18); }
.doodle { position: absolute; font: 400 clamp(1.2rem, 1.75vw, 2.1rem)/1.06 'Patrick Hand', cursive; transform: rotate(-10deg); text-align: center; }
.doodle span { display: block; font-size: 1.7em; line-height: .9; }
.doodle--left { top: 7%; left: 5.5%; }
.doodle--right { top: 6%; right: 4.5%; transform: rotate(-7deg); }
.doodle--bottom { right: 5%; bottom: 5%; transform: rotate(-8deg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .hero { min-height: 100svh; }
  .hero__image { object-position: 32% center; }
  .hero__wash { background: linear-gradient(180deg, rgba(246,241,234,.05) 30%, rgba(246,241,234,.94) 64%, #f3eee7 100%); }
  .content { width: 100%; min-height: 100svh; margin: 0; justify-content: flex-end; padding: 48vh 1.25rem 2rem; }
  .brand { width: min(80vw, 440px); }
  h1 { font-size: clamp(2.8rem, 12vw, 4.7rem); }
  .tagline { letter-spacing: .24em; font-size: .56rem; }
  .pitch { max-width: 520px; font-size: .8rem; }
  .notify { max-width: 580px; }
  .doodle { display: none; }
}
@media (max-width: 480px) {
  .content { padding-inline: 1rem; }
  .notify input { height: 58px; padding-inline: 1.15rem; }
  .notify button { height: 56px; padding-inline: 1.25rem; }
}