/* setecastronomylab.com — SITE-1 (docs/slice-site-1-the-company-website.md §3, §11 Q-B/Q-C).
   Every colour, size and leading below is a token VALUE copied from web/theme/tokens.ts
   (colors, space, type) into the :root variables; the rules use the variables only.
   The test site/__tests__/site.test.ts pins every hex here to the tokens file and the
   five named colours to their values — a token change there fails `ci` until this copy
   follows (design rule 1 as brand.md §0 applies it to assets). The column measure is the
   web's `.page` (web/app/globals.css). No motion, no burgundy (design rule 2). */

:root {
  /* web/theme/tokens.ts — colors */
  --color-warmIvory: #F6EEE9;
  --color-ink: #463240;
  --color-plum: #584152;
  --color-stone: #B7AEB4;
  --color-line: #E8DCE0;
  /* web/theme/tokens.ts — space */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  /* web/theme/tokens.ts — type */
  --type-display-size: 32px;
  --type-display-leading: 38px;
  --type-title-size: 24px;
  --type-title-leading: 30px;
  --type-body-size: 16px;
  --type-body-leading: 24px;
  --type-caption-size: 15px;
  --type-caption-leading: 21px;
  /* the faces — self-hosted below, never fetched from a third party (§11 Q-B) */
  --font-fraunces: 'Fraunces';
  --font-inter: 'Inter';
}

/* The seven files are byte-identical copies of web/public/fonts/ (the test checks). */
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; src: url('fonts/Fraunces-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Fraunces'; font-weight: 500; font-style: normal; src: url('fonts/Fraunces-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-style: normal; src: url('fonts/Fraunces-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; src: url('fonts/Inter-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-warmIvory);
  color: var(--color-ink);
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-plum); }

.page { max-width: 640px; margin: 0 auto; padding: var(--space-40) var(--space-16); }

h1 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 600;
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
  color: var(--color-plum);
  margin: 0 0 var(--space-4);
}
.subtitle { color: var(--color-stone); margin: 0; }

h2 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 500;
  font-size: var(--type-title-size);
  line-height: var(--type-title-leading);
  color: var(--color-plum);
  margin: var(--space-40) 0 var(--space-8);
}
p { margin: 0 0 var(--space-12); }

/* What we build — the product's mark beside its paragraphs (§3), and beneath them the
   screenshot row (SITE-R1, §14g): two or three real captures in one row at desktop width,
   a single column on a phone; captions in the caption face and stone; no border, no
   shadow, no frame. Width and height attributes on each image keep the layout from shifting. */
.product-row { display: flex; gap: var(--space-16); align-items: flex-start; }
.product-row .mark { flex: none; height: var(--space-40); width: auto; margin-top: var(--space-40); }
.product-row > div { min-width: 0; }
.screens { display: grid; grid-template-columns: repeat(var(--screens-count), minmax(0, 1fr)); gap: var(--space-16); margin: var(--space-24) 0 0; }
.screens-2 { --screens-count: 2; }
.screens-3 { --screens-count: 3; }
.screens figure { margin: 0; }
.screens img { display: block; width: 100%; height: auto; }
.screens figcaption { color: var(--color-stone); font-size: var(--type-caption-size); line-height: var(--type-caption-leading); margin-top: var(--space-8); }
@media (max-width: 640px) { .screens { grid-template-columns: minmax(0, 1fr); } }

address { font-style: normal; }

footer {
  margin-top: var(--space-40);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-line);
  color: var(--color-stone);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}
footer p { margin: 0 0 var(--space-4); }