/* Atelier Watch — the design language, for pages that live on bdtech.app.
 *
 * WHY THIS FILE EXISTS, AND WHY IT IS A COPY.
 * The Atelier product site is sites/atelier/ on its own domain, and it carries
 * these tokens in its own site.css. This page is not on that domain — the app
 * links to bdtech.app/apps/atelierwatch/request, and that URL is baked into a
 * shipped binary, so it cannot move. /sites/* is redirected away from the main
 * domain by vercel.json, which means this page cannot link to the site's
 * stylesheet either. The duplication is forced by the routing, not chosen.
 *
 * THE CONTRACT: these tokens and sites/atelier/site.css must move together.
 * Both are recorded in sites/atelier/DESIGN.md, which is the source of truth
 * for the design language itself. Change it there first.
 *
 * SCOPE: loaded by this page only. It redefines the house tokens, so linking
 * it from any other page would repaint that page. */

:root {
  /* 1 · THE PAPER. #F5F5F7 is a screen grey; a maker's documentation is
     printed. Barely a shift in isolation, and it changes the register of the
     whole page. Still fully monochrome — no hue is introduced. */
  --bg: #F3F2EF;
  --surface: #FFFFFF;
  --ink: #1C1B1A;
  --ink-soft: #6C6862;
  --line: #E2E0DB;
  --line-strong: #C7C4BD;

  /* 2 · THE PROSE FACE. Every string in the app is set in `design: .serif`.
     New York is Apple's system serif — the app's own voice, and still zero
     webfonts, so DESIGN.md §3 holds. Headings and UI stay on the house sans;
     only prose changes. */
  --font-prose: ui-serif, "New York", Georgia, "Times New Roman", serif;
}

/* --- the page ----------------------------------------------------------- */

.atelier-wrap { max-inline-size: 40em; margin-inline: auto; }

.atelier-wrap p {
  font-family: var(--font-prose);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.12rem);
  line-height: 1.72;
  color: var(--ink-soft);
  max-inline-size: 46em;
}
.atelier-wrap p strong { color: var(--ink); font-weight: 650; }
.atelier-wrap a { color: var(--ink); }

.atelier-wrap h2 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  letter-spacing: -0.015em;
  margin-block: clamp(44px, 6vw, 68px) 16px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--line);
}

/* --- the list of categories --------------------------------------------- */
/* Hairline rows, not numbered steps. The four are alternatives rather than a
   sequence, and a number in front of each would claim an order that is not
   there — the same reason the product site numbers its stations (they *are*
   ordered) and numbers nothing else. */

.choices { list-style: none; margin: 0; padding: 0; }
.choice {
  padding-block: 20px;
  border-block-start: 1px solid var(--line);
}
.choices .choice:last-child { border-block-end: 1px solid var(--line); }
.choice h3 { font-size: 1.02rem; margin: 0 0 4px; }
.choice h3 a { text-decoration: none; }
.choice h3 a:hover { text-decoration: underline; }
.choice p { margin: 0; font-size: 0.98rem; max-inline-size: 44em; }

/* --- the two mail actions ------------------------------------------------ */
/* A card each, lifted off the paper by a shadow that falls to the bottom
   right — because the light on every Atelier surface arrives from the top
   left. It is the same −135° the watch itself is drawn under. */

.mail-actions {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 24px;
}
@media (min-width: 760px) {
  .mail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mail-action {
  display: block; padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 20px rgba(28, 27, 26, 0.05);
  text-decoration: none; color: inherit;
}
.mail-action:hover { border-color: var(--line-strong); }
.mail-action h3 { font-size: 1rem; margin: 0 0 4px; }
.mail-action p {
  font-family: var(--font-prose); font-size: 0.95rem; line-height: 1.6;
  color: var(--ink-soft); margin: 0;
}
.mail-action .go {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); display: inline-block; margin-block-start: 10px;
}

/* --- the note that carries the measured facts ---------------------------- */

.fixed-already {
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7;
  letter-spacing: 0.02em; color: var(--ink-soft);
  padding-block: 16px; margin-block: 26px;
  border-block: 1px solid var(--line);
}
.fixed-already b { color: var(--ink); font-weight: 500; }