/* baton.chat, one page, minimal (v4, 2026-09-29: one screen, one picture, nothing selling).
   Token values copied from 6. Code/apps/app/design/tokens.json (design-tokens slot, 2026-09-25/D-2).
   Rules: no gradient / glass / glow, no animation, no transitions. Pressed button = instant state.
   Headline face: Nunito 800 (the wordmark's family; the app's Fraunces stays an app decision). */

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #F4F4F2;        /* bg.canvas */
  --surface: #FFFFFF;       /* bg.surface */
  --ink: #111111;           /* text.primary */
  --ink-2: #5B5B57;         /* text.secondary */
  --link: #1F4ED8;          /* text.link */
  --focus: #1F4ED8;         /* focus.ring */
  --accent: #F0457F;        /* accent.primary */
  --on-accent: #111111;     /* accent.onPrimary (5.27:1) */
  --line: #111111;          /* border.strong, sticker ink line */
  --line-2: #D6D6D0;        /* border.subtle */
  --shadow: #111111;        /* box.shadow (light = border.strong) */
  --error: #C21F1F;         /* status.error */

  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --weight-display: 800;

  --gutter: 20px;           /* layout side margin */
  --radius: 12px;           /* radius.md */
  --radius-lg: 16px;        /* radius.lg */
  --stroke: 2px;            /* border.width.hairline (D-2) */
  --press: 3px;             /* box.shadow.button */
  --control-h: 52px;        /* box.height.button */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0A0A0A;
    --surface: #151515;
    --ink: #F3F3F0;
    --ink-2: #A6A6A0;
    --link: #8EA6FF;
    --focus: #8EA6FF;
    --accent: #FF6F9C;
    --on-accent: #111111;
    --line: #F3F3F0;
    --line-2: #262626;
    --shadow: #5A5A55;
    --error: #FF7A70;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0A0A0A;
  --surface: #151515;
  --ink: #F3F3F0;
  --ink-2: #A6A6A0;
  --link: #8EA6FF;
  --focus: #8EA6FF;
  --accent: #FF6F9C;
  --on-accent: #111111;
  --line: #F3F3F0;
  --line-2: #262626;
  --shadow: #5A5A55;
  --error: #FF7A70;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* 17px, en-US body token */
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page {
  width: 100%;
  max-width: 72rem;               /* 1152px: the copy on one line + the picture, centred */
  margin-inline: auto;
  padding-inline: var(--gutter);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 16px;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  z-index: 10;
}
.skip:focus { top: 12px; }

/* ---------- mark ---------- */
.site-header { padding-block: 28px 40px; }
.mark {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  /* hit area ≥ 44px tall around a 24px mark */
  padding-block: 10px;
  margin-block: -10px;
}
.mark svg { height: 24px; width: auto; display: block; overflow: visible; }
.wm-ink { fill: var(--ink); }
.wm-baton { fill: var(--accent); }   /* logo B: the b's stem is a pink baton */

/* ---------- text ---------- */
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.75rem;            /* 28px, screen title token */
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
h1 span { display: block; text-wrap: balance; }

.copy p {
  margin: 0 0 12px;
  max-width: 40em;               /* the longest line is 34em at 19px; room for it, no more */
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- CTA (single swappable block) ---------- */
.cta { margin-block: 28px 0; max-width: 34em; }

.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.input {
  font: inherit;
  font-size: 1.0625rem;          /* ≥16px, no iOS zoom */
  color: var(--ink);
  background: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  min-height: var(--control-h);
  padding: 0 16px;
  width: 100%;
  min-width: 0;
}
.input::placeholder { color: var(--ink-2); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--error); }
.input:focus-visible { outline-offset: 2px; border-radius: var(--radius); }

.button {
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--on-accent);
  background: var(--accent);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  min-height: var(--control-h);
  padding: 12px 24px;
  box-shadow: var(--press) var(--press) 0 0 var(--shadow);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-inline-end: var(--press);   /* keep the shadow inside the column */
}
.button:active {
  transform: translate(var(--press), var(--press));
  box-shadow: none;
}
.button:focus-visible { border-radius: var(--radius); outline-offset: 2px; }
.button[aria-busy="true"] { cursor: progress; }

.copy .field-error {
  color: var(--error);
  font-weight: 600;
  margin: 8px 0 0;
}
.field-error:empty { display: none; }
/* honeypot: a field people never see (bots fill it; the server keeps nothing) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.copy .form-note, .copy .done {
  color: var(--ink-2);
  margin: 20px 0 0;
  max-width: 34em;
}
.copy .done {
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}

@media (min-width: 40rem) {
  .row { flex-direction: row; align-items: stretch; }
  .button { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}

@media (forced-colors: active) {
  .button { border-color: ButtonText; }
  .wm-ink, .wm-baton { fill: CanvasText; }
  .shot-frame { border-color: CanvasText; }
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: auto;
  padding-block: 56px 32px;
  color: var(--ink-2);
  font-size: 0.9375rem;          /* 15px */
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 4px;
}
.site-footer li { display: flex; align-items: center; }
.site-footer a {
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a:hover { color: var(--ink); }

/* the closing line pair: two sentences, each its own line (one line each from 1024px) */
.lines span { display: block; }

/* ---------- stub pages ---------- */
/* a stub's own paragraphs (direct children of <main>; the home page's sit inside .hero-copy):
   the longest, the privacy stub's, is 40.5em, so each stays on one line from 48rem up */
.copy > p { max-width: 44em; }
.copy .stub-status {
  display: inline-block;
  font-weight: 600;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 16px;
  align-self: flex-start;        /* from 64rem .copy is a flex column: keep the badge its own width */
}

/* ---------- the one picture (v4) ----------
   One slot, `data-shot="hero"`: the agents' room. It holds its final shape from the start
   (393:660, the crop the capture is cut to), so nothing moves when the image lands. Blank, it is
   a quiet frame: a hairline, the surface colour, the small pill from the mark in the middle.
   No caption, no label, no text. To fill it: replace the one <span class="shot-blank"> with one
   <img> (or <picture>) tag, see README.md. */
.shot { margin: 40px 0 0; min-width: 0; width: 100%; max-width: 24rem; }   /* phones: the full column (350px at 390) so the drawing's text stays readable */
.shot-frame {
  aspect-ratio: 393 / 660;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  display: grid;
  place-items: center;
}
.shot-frame img, .shot-frame picture { display: block; width: 100%; height: 100%; }
.shot-frame img { object-fit: cover; object-position: top; }
.shot-blank { display: block; width: 28px; height: 28px; opacity: 0.4; }

/* Illustration mode (v4 r2): `<figure class="shot" data-shot="hero" data-art>`. The drawing sets its
   own ratio from its width/height attributes; no frame, no fill, it sits on the canvas.
   Light/dark: one theme-neutral SVG needs nothing. An SVG pair uses .art-light / .art-dark, which
   follow the same switch as the page (system setting, or data-theme on <html>). */
.shot[data-art] .shot-frame { aspect-ratio: auto; border: 0; border-radius: 0; background: none; display: block; }
.shot[data-art] .shot-frame img { height: auto; object-fit: contain; }
.shot-frame .art-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-frame .art-light { display: none; }
  :root:not([data-theme="light"]) .shot-frame .art-dark { display: block; }
}
:root[data-theme="dark"] .shot-frame .art-light { display: none; }
:root[data-theme="dark"] .shot-frame .art-dark { display: block; }
.shot-blank svg { display: block; width: 100%; height: 100%; }

/* From 64rem (1024px): one screen. The copy and the form on the left, the picture on the
   right, the two centred on each other; the footer sits at the bottom of the viewport. */
@media (min-width: 64rem) {
  .site-header { padding-block: 40px 24px; }
  .mark svg { height: 26px; }
  .copy { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-block: 16px 24px; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;   /* 320px picture */
    column-gap: 40px;
    align-items: center;
  }
  .shot { margin: 0; max-width: none; justify-self: end; }
  h1 { font-size: 2rem; margin-bottom: 28px; }       /* 32px */
  .site-footer { padding-block: 32px 28px; }
}
/* From 80rem (1280px): the large-body size and a wider picture (384px, r3); every sentence still one line. */
@media (min-width: 80rem) {
  h1 { font-size: 2.25rem; }                          /* 36px, display token */
  body { font-size: 1.1875rem; }                      /* 19px, large body token */
  .input, .button { font-size: 1.1875rem; }
  .site-header { padding-block: 32px 16px; }        /* 1280x800 stays one screen with the 571px drawing */
  .hero { grid-template-columns: minmax(0, 1fr) 24rem; column-gap: 40px; }   /* 384px picture: the illustration's smallest text stays ~11px; 40px gap keeps the text column at 688px (longest sentence 670px) */
  .shot:not([data-art]) .shot-frame { aspect-ratio: 4 / 5; }   /* blank frame at 384px: 480 tall, still one screen at 1280x800 */
}