/* Almari's site, in the app's brand (CLAUDE.md's design law, 2026-10-10 on):
   Almari Pink on a Milk ground, Ink words, Cherry the deep note. League Spartan
   Bold for titles (the app's title face), Open Sauce Sans for everything else,
   Caveat for the one handwritten line. Every font is SIL OFL and self-hosted,
   its licence beside it in fonts/. */

@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/OpenSauceSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("/fonts/LeagueSpartan-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/Caveat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* The palette (mobile/src/styles/tokens.ts). Almari Pink is 2.96:1 on white,
     so it is never words: it draws shapes (the top bar's rule), and the same hue
     deepened, the accent, is every link and button. */
  --milk: #FFF9F5;       /* the ground */
  --white: #FFFFFF;      /* cards and fields on it */
  --ink: #191717;        /* words, 17.1:1 on Milk */
  --grey-dark: #605E5E;  /* secondary words, 6.17:1 on Milk */
  --pink: #C98292;       /* Almari Pink: shapes only */
  --accent: #A25E6F;     /* words and buttons: 4.61:1 on Milk, white on it 4.81:1 */
  --accent-pressed: #8E4C5D;
  --cherry: #8B1E2D;     /* the logo, the handwritten line, the step circles: white on it 9.05:1 */
  --maroon: 99, 28, 37;  /* rose.deep (Cherry 65% over Ink), the hero's fade, as rgb */
  --wash: #F8EAE8;
  --tint: #EED7DD;
  --line: #E6E6E6;
  --field-edge: #8F8D8D; /* a field's edge, 3.3:1 on white (WCAG's 3:1 for a control) */
  --sans: "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title: "League Spartan", "Open Sauce Sans", system-ui, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --gutter: 20px;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--milk); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--tint); color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
/* The top bar is fixed: a section reached by its link starts below it. */
section { scroll-margin-top: 72px; }
a { color: inherit; }

/* ── The logo ────────────────────────────────────────────── */
/* The app's script logo with the key in its A, drawn from its black template
   (mobile/assets/images/welcome/almari-script@3x.png, 1062 x 372, the ink cut
   tight) as a mask, so it takes whatever colour its place gives it. */
.logo {
  display: block;
  aspect-ratio: 1062 / 372;
  background-color: currentColor;
  -webkit-mask: url("/assets/almari-logo.png") center / contain no-repeat;
  mask: url("/assets/almari-logo.png") center / contain no-repeat;
}
@media (forced-colors: active) {
  .logo { background-color: CanvasText; forced-color-adjust: none; }
}

/* ── Top bar ─────────────────────────────────────────────── */
/* Over the film it is clear, its logo and words white; past the film it is the
   Milk ground with Home's 2pt Almari Pink rule, the logo in Cherry (main.js
   toggles .over). */
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  background: rgba(255, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--pink);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.mark { display: block; padding: 6px 0; color: var(--cherry); transition: color 0.25s ease, opacity 0.25s ease, visibility 0.25s; }
.mark .logo { width: 96px; }
.nav { display: flex; gap: 16px; }
.nav a {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--grey-dark);
  padding: 10px 0;
  transition: color 0.25s ease;
}
.nav a:hover { color: var(--accent); }
.top.over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Over the film the hero's own logo is the logo; the bar's comes in past it. */
.top.over .mark { color: var(--white); opacity: 0; visibility: hidden; }
.top.over .nav a { color: var(--white); text-shadow: 0 1px 8px rgba(25, 23, 23, 0.45); }
.top.over .nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

/* ── Hero: the film, the words over it ───────────────────── */
.hero {
  position: relative;
  /* A cropped band, not the whole screen (Michael: "way too big"): most of a
     phone, about two-thirds of a laptop. The film fills it, centred. */
  /* A floor, never a fixed height: the words and buttons always fit, clear of
     the top bar (its 72px), however wide or narrow the window. */
  min-height: 78vh;
  min-height: 78svh;
  padding-top: 88px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: rgb(var(--maroon)) url("/assets/film-poster.jpg") center / cover no-repeat;
  color: var(--white);
  text-align: center;
}
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The app hero's maroon, darkest where the words sit so they hold over any
   frame; a little Ink at the top for the bar's words. */
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(25, 23, 23, 0.42) 0%,
    rgba(25, 23, 23, 0.06) 20%,
    rgba(var(--maroon), 0.16) 44%,
    rgba(var(--maroon), 0.84) 100%
  );
}
.hero-words {
  position: relative;
  max-width: 960px;
  padding: 0 var(--gutter) 48px;
}
.wordmark { margin: 0 auto 18px; color: var(--milk); filter: drop-shadow(0 2px 14px rgba(25, 23, 23, 0.35)); }
.wordmark .logo { width: clamp(220px, 46vw, 360px); margin: 0 auto; }
/* ONE line at every width (Michael, 2026-10-16): the line is 13.38 em wide in
   League Spartan Bold (measured in the browser), so it sets at the window's
   width over 13.6 em, the gutters taken off, up to 64px: 64px from a ~935px
   window, ~25px on a 375px phone, ~21px on a 320px one. It is SIZED to one
   line, never held to one (no nowrap): a wider fallback face, while League
   Spartan loads or if it fails, wraps to two balanced lines rather than being
   cropped by the hero's overflow (Codex on #578). */
.headline {
  text-wrap: balance;
  font-family: var(--title);
  font-weight: 700;
  font-size: min(64px, calc((100vw - 2 * var(--gutter)) / 13.6));
  line-height: 1.1;
  margin: 0 0 16px;
  text-shadow: 0 2px 18px rgba(25, 23, 23, 0.4);
}
.lede {
  max-width: 580px;
  text-wrap: balance;
  margin: 0 auto 30px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 12px rgba(25, 23, 23, 0.5);
}
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  min-width: 200px;
  padding: 8px 22px 8px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: default;
}
.store svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.store-words { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-small { font-size: 11px; color: var(--grey-dark); }
.store-name { font-weight: 700; font-size: 17px; }

/* ── The handwritten line ───────────────────────────────── */
/* The opening's caption, Cherry, with the pen heart after it, drawn on once it
   is seen (main.js), whole under Reduce Motion or without JavaScript. */
.caption {
  margin: 0;
  padding: 64px var(--gutter) 0;
  text-align: center;
  font-family: var(--hand);
  font-size: clamp(26px, 8vw, 50px);
  line-height: 1.2;
  color: var(--cherry);
}
/* The heart stays on the line of the words before it. */
.keep { white-space: nowrap; }
.pen-heart {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.25em;
  vertical-align: -0.12em;
}
.pen-heart path {
  fill: none;
  stroke: currentColor;
  stroke-width: 70;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  /* Past 1, so not even a round cap's dot shows before it is drawn. */
  stroke-dashoffset: 1.05;
}
.pen-heart.drawn path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.26s cubic-bezier(0.45, 0, 0.35, 1) 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .pen-heart path { stroke-dashoffset: 0; transition: none; }
}

/* ── Our story ───────────────────────────────────────────── */
.story {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--gutter) 88px;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
.founders { margin: 0; }
/* The co-founders, square, on the wash while it loads. */
.founders img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
  background: var(--wash);
}
.story-words h2,
.how-intro h2,
.contact h2 {
  font-family: var(--title);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 46px);
  line-height: 1.08;
  margin: 0 0 20px;
  color: var(--ink);
}
.story-words p { margin: 0 0 18px; color: var(--ink); text-wrap: pretty; }
.story-words p:last-child { margin-bottom: 0; }

/* ── How it works ───────────────────────────────────────── */
.how {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px var(--gutter) 88px;
  border-top: 1px solid var(--line);
}
.how-intro { max-width: 640px; margin: 0 0 40px; }
.how-intro h2 { margin-bottom: 16px; }
.how-intro p { margin: 0; color: var(--grey-dark); font-size: 18px; text-wrap: pretty; }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
/* White cards on the Milk ground, as the app's are; a soft edge carries them. */
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px 30px;
}
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--cherry);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}
.step h3 {
  font-family: var(--title);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--ink);
}
.step p { margin: 0; color: var(--grey-dark); font-size: 16px; }

/* ── Contact ─────────────────────────────────────────────── */
.contact {
  max-width: 620px;
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
  border-top: 1px solid var(--line);
}
.contact-lede { color: var(--grey-dark); margin: 0 0 28px; text-wrap: pretty; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field span { font-weight: 500; font-size: 15px; }
.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--field-edge);
  border-radius: 14px;
  padding: 13px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send {
  justify-self: start;
  font: inherit;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  min-height: 52px;
  padding: 0 32px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.send:hover { background: var(--accent-pressed); }
.send:active { transform: scale(0.98); }
.send:disabled { opacity: 0.55; cursor: default; }
.send:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }
.status { margin: 0; min-height: 1.6em; color: var(--grey-dark); }
.status.error { color: var(--cherry); }
.privacy { margin: -8px 0 4px; font-size: 14px; color: var(--grey-dark); }

/* ── Footer ──────────────────────────────────────────────── */
.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px var(--gutter) 40px;
  color: var(--grey-dark);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.foot .logo { width: 72px; color: var(--cherry); }
.foot p { margin: 0; }

/* ── Wider screens ───────────────────────────────────────── */
@media (min-width: 760px) {
  :root { --gutter: 32px; }
  .hero { min-height: max(560px, min(72vh, 56.25vw)); }
  .hero-words { padding-bottom: 64px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .story { grid-template-columns: 5fr 6fr; gap: 64px; }
  .nav { gap: 22px; }
  .nav a { font-size: 15px; }
  .caption { padding-top: 80px; }
}

/* ── Phones ──────────────────────────────────────────────── */
/* The one-line headline sets small here (~21-29px), so the lede under it
   steps down to keep under it. */
@media (max-width: 479px) {
  .lede { font-size: 16px; }
}

/* ── The narrowest phones ────────────────────────────────── */
/* Under 360px the logo and three links cannot share the bar on one line;
   How It Works is the one to give way (the page scrolls to it anyway). */
@media (max-width: 359px) {
  .nav a[href="#how"] { display: none; }
}