/* Color Stock — marketing site
   Tokens transcribed from docs/design/color-stock-ui-constitution.md.
   Monochrome, whitespace over boxes, no cards / shadows / gradients. */

:root {
  --bg:        #FAFAF8;
  --ink:       #111111;
  --secondary: #6B6B68;
  --tertiary:  #A3A3A0;
  --divider:   #E7E7E3;
  --surface:   #F5F5F2;

  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px;

  --page-padding: 20px;
  --radius: 4px;
  --measure: 720px;
}

@media (min-width: 700px) { :root { --page-padding: 24px; } }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--page-padding); }

/* ---- typography: size, weight and space carry the hierarchy ---- */

h1, h2, h3 { font-weight: 500; letter-spacing: 0.005em; margin: 0; }

h1 { font-size: 28px; line-height: 1.6; }
h2 { font-size: 18px; line-height: 1.7; }

.display { font-size: 32px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.lede    { color: var(--secondary); }
.label   { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--tertiary);
           text-transform: uppercase; }
.secondary { font-size: 13px; color: var(--secondary); line-height: 1.8; }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--divider); }
a:hover { text-decoration-color: var(--ink); }

/* ---- rhythm ---- */

header.masthead { padding: var(--space-xxl) 0 0; }
section { padding: var(--space-xxl) 0; }
section + section { border-top: 1px solid var(--divider); }

.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

/* ---- the one control ---- */

.action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--ink); color: #FFFFFF;
  font-size: 16px; font-weight: 500; text-decoration: none;
  border-radius: var(--radius);
}
.action[aria-disabled="true"] { background: var(--surface); color: var(--tertiary); cursor: default; }

/* ---- screens: the product is the picture, no device frames ---- */

.screens { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 700px) { .screens { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }
.screens img { display: block; width: 100%; height: auto; border: 1px solid var(--divider);
               border-radius: var(--radius); background: #FFFFFF; }
.screens figure { margin: 0; }
.screens figcaption { margin-top: var(--space-md); }

/* ---- definition rows: dividers, not boxes ---- */

.rows { border-top: 1px solid var(--divider); }
.rows > div { border-bottom: 1px solid var(--divider); padding: var(--space-md) 0; }
@media (min-width: 700px) {
  .rows > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-lg); }
}
.rows dt, .rows .k { font-size: 13px; color: var(--secondary); margin: 0; }
.rows dd, .rows .v { margin: 0; }
@media (max-width: 699px) { .rows .v, .rows dd { margin-top: var(--space-xs); } }

/* ---- footer: quiet, and the legal links stay quiet ---- */

footer { border-top: 1px solid var(--divider); padding: var(--space-xl) 0 var(--space-xxl); }
footer a { color: var(--secondary); text-decoration-color: transparent; }
footer a:hover { text-decoration-color: var(--secondary); }
.fine { font-size: 12px; color: var(--tertiary); line-height: 2; }
.fine a { color: var(--tertiary); }

.backlink { font-size: 13px; color: var(--secondary); }