/* Fonts and base */
:root {
  --midnight-navy: #14213D;
  --midnight-ink:  #0B1428;
  --honey-gold:    #F3C766;
  --amber-glow:    #E8B04B;
  --cream:         #F5EBDD;
  --dusk-violet:   #3B2F63;
  --twilight-lav:  #8E7CC3;

  --radius: 14px;
  --container: min(1100px, 92vw);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(1400px 700px at 70% -10%, rgba(232,176,75,0.22), transparent 60%),
    linear-gradient(#0B1428, #14213D 20%, #0B1428 100%);
  background-color: var(--midnight-navy);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .wordmark, .sig-line {
  font-family: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  letter-spacing: 0.02em;
}

h2 {
  font-size: clamp(1.4rem, 0.8rem + 2vw, 2.2rem);
  margin: 0 0 0.75rem;
  color: var(--honey-gold);
}

.container { width: var(--container); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--honey-gold); color: #111; padding: 8px 12px; border-radius: 6px; }
.skip-link:focus { left: 10px; z-index: 1000; }

/* Header */
.site-header {
  position: relative;
  padding: 20px 0 40px;
}
.header-inner {
  display: grid;
  gap: 18px;
  place-items: center;
  text-align: center;
}
.brand-lockup .sig-line {
  color: var(--amber-glow);
  font-style: italic;
  font-weight: 700;
}
.brand-lockup .lockup-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brand-lockup .crescent {
  width: 24px; height: 24px;
}
.wordmark {
  font-weight: 800;
  font-size: clamp(2.1rem, 1.3rem + 7vw, 5rem);
  margin: 0;
  color: var(--honey-gold);
}
.pronounce {
  margin: 6px 0 0;
  color: #EED9A2;
  font-weight: 500;
}
.hero-line {
  font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem);
  margin: 6px 0 0;
  color: #F8E6B8;
  font-weight: 800;
}
.subhead {
  margin: 6px 0 4px;
  color: #D9C8A3;
}
.hero-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: end;
  width: 100%;
}
.hero-can {
  display: grid;
  place-items: center;
}
.hero-can img {
  width: min(68vw, 280px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
.can-fallback {
  border: 2px solid rgba(243,199,102,0.35);
  border-radius: 22px;
  padding: 14px 16px;
}
.can-fallback .can-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(243,199,102,0.14);
  color: var(--honey-gold);
  font-weight: 700;
}
.can-fallback .can-caption {
  margin-top: 10px;
  color: #EBD9BB;
}
.hide { display: none; }

.moon-glow {
  position: absolute;
  inset: -20vh -15vw auto auto;
  width: 45vw;
  max-width: 680px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(243, 199, 102, .22), rgba(232, 176, 75, .05) 55%, transparent 70%);
  filter: blur(12px);
  opacity: .8;
}

/* Form */
form.waitlist {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
form.waitlist input[type="email"] {
  width: 100%;
  padding: 14px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
}
form.waitlist input::placeholder { color: rgba(255,255,255,0.7); }
.btn {
  --bg: var(--honey-gold);
  --fg: #101317;
  appearance: none;
  border: 0;
  background: var(--bg);
  color: var(--fg);
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.btn-amber { --bg: linear-gradient(180deg, #F3C766, #E8B04B); }
.microline {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.85rem;
  color: #EED9A2;
  margin: 6px 0 -2px;
}
.planned { color: #CDBA8A; }
.form-note {
  grid-column: 1 / -1;
  min-height: 1.2em;
  font-size: 0.95rem;
}
.form-note.success { color: #BDE2BD; }
.form-note.error { color: #FFB0B0; }

/* Sections */
.section { padding: 52px 0; }
.section .container { text-align: left; }
.lead {
  font-weight: 800; 
  color: var(--honey-gold);
  font-size: clamp(1.1rem, 0.9rem + 1.2vw, 1.8rem);
}
.sub { color: #EBD9BB; margin-top: 4px; }
.problem-art img { width: 100%; height: auto; border-radius: var(--radius); margin-top: 14px; }

.founder { background: linear-gradient(180deg, rgba(245,235,221,0.08), transparent 60%); }
.founder-grid {
  display: grid;
  gap: 20px;
}
.founder blockquote {
  margin: 0;
  padding: 12px 18px;
  border-left: 4px solid var(--honey-gold);
  color: #F3E7C8;
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.4rem);
}
.founder blockquote footer { color: #E3D5B9; font-size: .95rem; margin-top: 6px; }
.name-story h2 { margin-top: 0; }
.name-story p { color: #EDE0CF; }

.amber-hour { background: radial-gradient(800px 400px at 10% 20%, rgba(232,176,75,0.18), transparent 60%); }
.amber-hour .taste { color: #F0DEC1; }
.amber-hour .ritual { color: #F5E0B6; }
.can-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.can-row img { width: 100%; height: auto; border-radius: var(--radius); }

.inside { background: #0E182E; }
.grid.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 18px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}
.grid.two-col li {
  background: rgba(255,255,255,0.04);
  padding: 12px 14px;
  border-radius: 12px;
  color: #EDE0CF;
}
.left-out .list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0; margin: 10px 0 0; list-style: none;
}
.left-out .list-chips li {
  border: 1px solid rgba(243,199,102,0.35);
  color: var(--honey-gold);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
}

.ritual-grid {
  display: grid;
  gap: 16px;
  align-items: center;
}
.ritual-art img { width: 100%; height: auto; border-radius: var(--radius); }

.closing { text-align: center; }
.closing h2 { margin-bottom: 8px; }
.closing .closing-line { margin: 0 0 18px; color: #EED9A2; font-style: italic; font-weight: 700; }
.closing .price-note { color: #EAD7B0; margin-top: 10px; }
.waitlist-bottom { margin: 0 auto; max-width: 680px; }

.site-footer {
  background: #0B1428;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 0 60px;
  color: #E8DCBF;
  font-size: 0.95rem;
}
.footer-grid { display: grid; gap: 16px; }
.footer-grid a { color: var(--honey-gold); text-decoration: none; }
.footer-grid .todo { color: #EDC683; }
.disclaimer { font-size: 0.82rem; color: #D9C8A3; max-width: 60ch; }
.copyright { color: #CDBA8A; }

/* Desktop */
@media (min-width: 900px) {
  .hero-cta {
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 28px;
  }
  .founder-grid { grid-template-columns: 1.3fr .7fr; }
  .grid.two-col { grid-template-columns: repeat(2, 1fr); }
  .ritual-grid { grid-template-columns: 1.1fr .9fr; }
  .footer-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ---- Preview QA fixes (layout bugs only; no copy/brand changes) ---- */
/* 1. Background was sized to a 100%-height html/body, so the gradient tiled every viewport height (hard bands). */
html, body { height: auto; }
body { min-height: 100vh; }
/* 2. .moon-glow sits at right:-15vw and caused horizontal scrolling on every viewport. */
.site-header { overflow: hidden; }
/* 3. .section .container forced left-align, so the closing heading sat left of a centered form. */
.closing .container { text-align: center; }
/* 4. Default <figure> 40px side margins indented the images relative to the text column. */
.problem-art, .can-row, .ritual-art, .hero-can { margin-left: 0; margin-right: 0; }
/* 5. Concept cans rendered ~1290px tall each on desktop; cap their width. */
.can-row { grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; }
@media (min-width: 900px) {
  /* 6. Hero form was pinned to the bottom of the can column, leaving a large empty block above it. */
  .hero-cta { align-items: center; }
}

/* Hero line in the display serif */
.hero-line { font-family: "Fraunces", ui-serif, Georgia, serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); color: #F5EBDD; }