/* normworks.uk: site layer. References the token contract only (tokens.css);
   no raw colour here (standards/cross-cutting/design-system.md rule 2). */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-action); text-underline-offset: 3px; }
a:hover { color: var(--color-action-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
svg { display: block; }

.skip {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--color-action); color: var(--color-on-action);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); z-index: 10;
}
.skip:focus { top: var(--space-4); color: var(--color-on-action); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: var(--space-4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--space-6); } }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--color-border); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.brand:hover { color: var(--color-text); }
.brand svg { width: 32px; height: 32px; }
.brand span { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.nav { display: flex; gap: var(--space-5); }
.nav a {
  font-family: var(--font-mono); font-size: var(--font-size-overline); letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: var(--color-text-subtle); text-decoration: none; padding-block: var(--space-2);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-action); }

/* ── type roles ─────────────────────────────────────────────────────────── */
.overline {
  margin: 0; font-family: var(--font-mono); font-size: var(--font-size-overline); line-height: var(--line-height-overline);
  font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-text-muted);
}
.display {
  margin: 0; font-size: clamp(36px, 7vw, var(--font-size-display)); line-height: var(--line-height-display);
  font-weight: var(--font-weight-display); letter-spacing: var(--tracking-display); text-wrap: balance;
}
.h2 { margin: 0; font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-h2); letter-spacing: var(--tracking-h2); }
.lede { margin: 0; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-subtle); max-width: 56ch; text-wrap: pretty; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--space-8) var(--space-7); }
.hero .wrap { display: grid; gap: var(--space-5); }
.hero .accent { color: var(--color-action); }
@media (min-width: 720px) { .hero { padding-block: var(--space-9) var(--space-8); } }

/* ── apps ───────────────────────────────────────────────────────────────── */
.apps { padding-block: 0 var(--space-8); }
.section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.app-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Each card wears its own app's tokens via [data-brand]; same markup for every brand. */
.app {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3);
  padding: var(--space-5); min-height: 240px;
  background: var(--color-bg-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.app svg { width: 48px; height: 48px; color: var(--color-text); }
.app h3 { margin: var(--space-2) 0 0; font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: 700; letter-spacing: var(--tracking-h3); }
.app .kind { color: var(--color-action); }
.app p { margin: 0; color: var(--color-text-subtle); font-size: var(--font-size-body); }
.app .endorse {
  font-family: var(--font-mono); font-size: var(--font-size-caption); color: var(--color-text-muted);
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
}

/* ── studio note ────────────────────────────────────────────────────────── */
.note { padding-block: var(--space-7); border-top: 1px solid var(--color-border); }
.note .wrap { display: grid; gap: var(--space-5); }
@media (min-width: 820px) { .note .wrap { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.note p { margin: 0; color: var(--color-text-subtle); max-width: 60ch; }
.note p + p { margin-top: var(--space-3); }

/* ── prose page (privacy) ───────────────────────────────────────────────── */
.doc { padding-block: var(--space-7) var(--space-8); }
.doc header { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 68ch; }
.doc h1 { margin: 0; font-size: clamp(32px, 6vw, var(--font-size-h1)); line-height: var(--line-height-h1); font-weight: 700; letter-spacing: var(--tracking-h1); }
.prose { max-width: 68ch; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: 600; letter-spacing: var(--tracking-h3); margin-top: var(--space-7); scroll-margin-top: var(--space-5); }
.prose h3 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: 600; margin-top: var(--space-5); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { font-weight: 600; }
.toc {
  background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.toc ol { margin: var(--space-2) 0 0; padding-left: 1.4em; columns: 2 220px; column-gap: var(--space-6); }
.toc li { break-inside: avoid; padding-block: 2px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-raised); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-family: var(--font-mono); font-size: var(--font-size-overline); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; background: var(--color-bg-surface); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--color-border); padding-block: var(--space-6); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; }
.site-foot p, .site-foot a { margin: 0; font-family: var(--font-mono); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.site-foot nav { display: flex; gap: var(--space-5); }
.site-foot a:hover { color: var(--color-action); }

@media (prefers-reduced-motion: no-preference) {
  .app { transition: transform .18s ease, box-shadow .18s ease; }
  .app:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}

.app .endorse { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.app .status { color: var(--color-text-subtle); }