/* ── Brand type ──────────────────────────────────────────────────────────── */
/* ba&sh Todo, the client's own face. Served from /public/fonts; the fallback
   stack is what a phone shows during the swap, never a different look after. */
@font-face {
  font-family: "Bash Todo";
  src: url("/public/fonts/BashandTodo-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bash Todo";
  src: url("/public/fonts/BashandTodo-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bash Todo";
  src: url("/public/fonts/BashandTodo-black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ── Theme tokens ────────────────────────────────────────────────────────── */
/* Sampled from the ba&sh Beaugrenelle mockup v2: ground #f4efe9, near-white field. */
:root {
  --bg: #f4efe9;
  --panel: #fefdfc;
  --text: #1a1a1a;
  --dim: #6b6560;
  --accent: #1a1a1a;
  --accent-subtle: #3a3530;
  --err: #c0392b;
  --stroke: #1a1a1a;
  --radius: 10px;
  --font-brand: "Bash Todo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-brand);
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  text-align: center;
  padding: 22px 16px 4px;
}
header .topurl {
  margin: 0 0 26px;
  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0.02em;
}
header .topurl a {
  color: var(--text);
  text-decoration: none;
}
header h1 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  color: var(--text);
  font-weight: 900;
}
header .sub {
  margin: 6px 0 0;
  font-weight: 500;
  color: var(--dim);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* The wordmark carries the branding; it is the page's real title. */
header .logo {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

/* ── Main ────────────────────────────────────────────────────────────────── */
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 22px 0;
}
main.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

/* ── Form ────────────────────────────────────────────────────────────────── */
/* No card: on the mockup everything sits straight on the ground, only the
   e-mail field is a white pill. */
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intro {
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
}
/* *stars* in landing_intro → set upright inside the italic line */
.intro .roman { font-style: normal; }
form label {
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
}
form label.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.35;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
form label.check a {
  color: inherit;
  text-decoration: inherit;
}

.row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.row input[type="email"] { flex: 1 1 auto; min-width: 0; }
.row button { flex: 0 0 auto; margin-top: 0; padding-left: 26px; padding-right: 26px; }

input[type="email"] {
  padding: 14px 22px;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-style: italic;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
}
input[type="email"]::placeholder {
  color: var(--dim);
  font-style: italic;
}
input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Square empty boxes, like the mockup — the native control is too round. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  border: 1px solid var(--stroke);
  border-radius: 2px;
  background: var(--panel);
  cursor: pointer;
  position: relative;
}
input[type="checkbox"]:checked::after {
  content: "X";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 500 11px/1 var(--font-brand);
  color: var(--text);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  margin-top: 4px;
  padding: 13px 22px;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: opacity 0.15s;
}
button:hover { opacity: 0.7; }
button:active { transform: scale(0.98); }

/* ── Photo strip ─────────────────────────────────────────────────────────── */
.strip {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
}
.strip img {
  width: 100%;
  display: block;
  aspect-ratio: auto;
}

/* Brand visual under the guest's own photo. On the client's mockup it sits
   centred at 82% of the form's width (465 of 563 px), not edge to edge. */
.hero {
  display: block;
  width: 82%;
  margin: 26px auto 0;
}

/* ── Legal ───────────────────────────────────────────────────────────────── */
.legal {
  color: var(--dim);
  font-size: 0.72rem;
  line-height: 1.5;
  margin: 22px 0 0;
  text-align: center;
  font-style: italic;
}

/* ── Success / Error ─────────────────────────────────────────────────────── */
.success h2 {
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 10px;
}
.error h2 {
  font-weight: 700;
  color: var(--err);
}
.success a, .error a {
  color: var(--accent-subtle);
  text-decoration: underline;
}

.sent-notice {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-style: italic;
}

/* ── Plain theme ─────────────────────────────────────────────────────────── */
/* landing_theme = "plain": a client whose face we do not hold (Back Market,
   10/2026). System sans, upright; the ground comes from landing_bg. */
body.theme-plain { --font-brand: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.theme-plain .intro,
body.theme-plain form label,
body.theme-plain form label.check,
body.theme-plain header .topurl,
body.theme-plain input[type="email"],
body.theme-plain input[type="email"]::placeholder,
body.theme-plain input[type="checkbox"]:checked::after,
body.theme-plain button,
body.theme-plain .legal,
body.theme-plain .sent-notice { font-style: normal; }
body.theme-plain .intro { font-weight: 500; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 26px 16px 30px;
  font-weight: 500;
  color: var(--text);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.01em;
}
footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer p { margin: 0 0 4px; }