/* ==========================================================================
   BeSpoken — Coming Soon (Patina styling, /3 layout: centered video hero)
   Alabaster #F7F4EE · Parchment #EDE4D6 · Sand #D8C4A8 · Umber #8A6F55
   Bark #3E342A · Indigo #35506B · Woad #6B89A8 · Chambray #C3D2DE
   Verdigris #5E8C88 · Aged bronze #A0763F (under 2% — hairlines only)

   Indigo is ink, never a field. Type is Bark on Alabaster throughout —
   the full-bleed footage sits behind a LIGHT scrim, not a dark one.
   ========================================================================== */

:root {
  --alabaster: #F7F4EE;
  --parchment: #EDE4D6;
  --sand: #D8C4A8;
  --umber: #8A6F55;
  /* Small text sits over moving footage, where the composited background
     luminance swings wide enough that Umber drops to ~2.9:1. This deeper
     tint holds AA (>=5.4:1) across the whole range while still reading as
     secondary against Bark. Umber stays in use for hairlines and fields. */
  --umber-deep: #5A4632;
  --bark: #3E342A;
  --indigo: #35506B;
  --woad: #6B89A8;
  --chambray: #C3D2DE;
  --verdigris: #5E8C88;
  --bronze: #A0763F;

  /* Newsreader and Public Sans are free stand-ins for the licensed pairing
     (Canela / GT Sectra / Publico with Söhne / Untitled Sans / Graphik).
     Swap via @font-face here once licenses are in hand. */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --max-width: 44rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--alabaster);
  color: var(--bark);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.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;
}

/* ---- hero shell ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 1.5rem 5rem;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--parchment);
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  /* Warm-grade the footage in the browser so it sits inside the palette
     instead of reading cool gray-lavender against Alabaster. This is a
     stopgap: the brief asks for a warm white balance and warm shadows at
     the grade, so a properly graded clip should replace both this filter
     and the montage itself. */
  filter: sepia(0.26) saturate(1.18) contrast(1.1) brightness(0.99);
}

/* The inverse of the Warm direction's charcoal wash: enough Alabaster to
   hold Bark type at AA, with the footage still legible through it.
   Two layers — a soft radial quiet zone under the content column (the brief
   requires a defined quiet zone wherever the mark sits over footage), over a
   vertical wash that lets the footage come through strongest at the edges. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      46% 34% at 50% 30%,
      rgba(247, 244, 238, 0.5) 0%,
      rgba(247, 244, 238, 0.26) 60%,
      rgba(247, 244, 238, 0) 100%
    ),
    linear-gradient(
      to bottom,
      var(--alabaster) 0%,
      rgba(247, 244, 238, 0.82) 20%,
      rgba(247, 244, 238, 0.76) 50%,
      rgba(247, 244, 238, 0.84) 80%,
      var(--alabaster) 100%
    );
}

/* ---- video toggle ------------------------------------------------------ */

.hero__toggle {
  position: absolute;
  z-index: 3;
  left: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(62, 52, 42, 0.28);
  border-radius: 0;
  background: rgba(247, 244, 238, 0.82);
  color: var(--bark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero__toggle:hover,
.hero__toggle:focus-visible {
  opacity: 1;
  background: var(--alabaster);
  border-color: var(--bronze);
}

.hero__toggle-icon { width: 15px; height: 15px; }

/* Chrome's UA `[hidden] { display: none }` is namespaced to HTML, so an
   `<svg hidden>` still renders. Without this rule both icons show at once. */
.hero__toggle-icon[hidden] { display: none; }

/* ---- content --------------------------------------------------------- */

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  width: 100%;
  text-align: center;
  animation: fade-up 0.7s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__content { animation: none; }
  .wordmark__rule,
  .wordmark__be,
  .wordmark__spoken { animation: none !important; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- kicker ------------------------------------------------------------ */

.kicker {
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--umber-deep);
}

/* ---- wordmark ------------------------------------------------------------ */

.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.wordmark__text {
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
  color: var(--bark);
}

.wordmark__rule {
  display: block;
  flex: none;
  width: 2px;
  height: 0.58em;
  background: var(--bronze);
  transform-origin: top center;
  animation: rule-draw 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both 0.1s;
}

/* Build: the rule draws in vertically, the word settles around it.
   Under one second, one easing, no bounce, no letters flying in. */
@keyframes rule-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes settle {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.wordmark__be,
.wordmark__spoken {
  animation: settle 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both 0.28s;
}

.wordmark__be { color: var(--woad); }
.wordmark__spoken { color: var(--bark); }

.tagline {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bark);
  text-wrap: pretty;
}

/* ---- lede / offerings ---------------------------------------------------- */

.lede {
  margin: 2rem auto 0;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--bark);
  text-wrap: pretty;
}

.offerings {
  margin: 2.25rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Squared, hairline, no pill — the rule vocabulary, not a chip. */
.offerings__tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--indigo);
  border: 1px solid var(--sand);
  border-radius: 0;
  background: rgba(247, 244, 238, 0.6);
  padding: 0.6rem 1.15rem;
}

/* ---- form ---------------------------------------------------------- */

.notify-form {
  margin: 2.75rem auto 0;
  max-width: 29rem;
}

.notify-form__label {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--umber-deep);
  line-height: 1.5;
}

.notify-form__row {
  display: flex;
  gap: 0.5rem;
}

.notify-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.15rem;
  border-radius: 0;
  border: 1px solid var(--sand);
  background: rgba(247, 244, 238, 0.85);
  color: var(--bark);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notify-form input[type="email"]::placeholder { color: var(--umber); opacity: 0.9; }

.notify-form input[type="email"]:focus {
  border-color: var(--woad);
  box-shadow: 0 0 0 3px rgba(107, 137, 168, 0.22);
}

.notify-form button {
  flex-shrink: 0;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--indigo);
  border-radius: 0;
  background: var(--indigo);
  color: var(--alabaster);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.notify-form button:hover {
  background: var(--woad);
  border-color: var(--woad);
}

.notify-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.notify-form__hint {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--umber-deep);
}

.notify-form__hint[data-state="success"] { color: var(--verdigris); }
.notify-form__hint[data-state="error"] { color: var(--bronze); }

@media (max-width: 30rem) {
  .notify-form__row { flex-direction: column; }
  .notify-form button { width: 100%; }
}

/* ---- founders / footer ---------------------------------------------- */

.founders {
  margin: 2.75rem auto 0;
  max-width: 32rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sand);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--umber-deep);
  text-wrap: pretty;
}

.footer {
  position: relative;
  z-index: 1;
  background: var(--alabaster);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber-deep);
  text-align: center;
}

/* Indigo, not Woad: at 14px this is body-size text, and Woad only clears
   3.3:1 on Alabaster. The brief scopes Woad to large type and interactive
   fills, so it stays on the hover state and the button. */
.footer a {
  color: var(--indigo);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.footer a:hover { color: var(--bronze); }

a { color: var(--indigo); }
a:hover { color: var(--bronze); }

/* ---- small viewport check (375px) ------------------------------------- */

@media (max-width: 25rem) {
  .hero { padding: 5rem 1.25rem 4rem; }
  .hero__toggle { left: 1rem; bottom: 1rem; }
}