/* Sundry Works Limited — corporate site
   Single stylesheet. No build step, no imports, no third-party requests.
   See design.md for the reasoning behind every token below. */

/* ---------------------------------------------------------------------------
   1. Fonts

   Self-hosted and subset per CLAUDE.md §3 — never a font CDN. Regenerate with
   scripts/fetch-and-subset-fonts.sh; four faces, ~46KB total.

   Only the weights the design actually uses are shipped. The display serif is
   never set at 400 anywhere on the site, so that face is deliberately absent
   rather than downloaded and ignored. `font-synthesis-weight: none` below means
   a stray 400 would render at 600 rather than being faked.

   The fallback stacks still name real faces (Cambria/Palatino, Segoe UI) rather
   than bare `serif` / `sans-serif`, so a failed font load degrades to something
   chosen rather than to Times.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/sourceserif4-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/publicsans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/publicsans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. Tokens
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Palette. OKLCH only. Neutrals are tinted toward the brand hue (158) so
     nothing on the page is a pure grey, and no value is #000 or #fff. */
  --paper:      oklch(0.982 0.006 155);
  --surface:    oklch(0.952 0.011 155);
  --line:       oklch(0.884 0.014 155);
  --ink:        oklch(0.255 0.018 158);
  --muted:      oklch(0.468 0.021 158);
  --accent:     oklch(0.432 0.078 168);
  --accent-ink: oklch(0.985 0.006 155);

  --font-display: "Source Serif 4", Cambria, "Iowan Old Style",
                  "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Public Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Arial, sans-serif;

  /* Type scale — quiet, four steps. */
  --t-lede: clamp(1.125rem, 0.95rem + 0.75vw, 1.3125rem);
  --t-h1:   clamp(1.875rem, 1.4rem + 2.1vw, 2.75rem);
  --t-h2:   clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);
  --t-small: 0.875rem;

  /* Spacing — 4px base. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4.5rem;

  --radius: 4px;
  --measure: 34rem;      /* ~66 characters of body text */
  --container: 43rem;
}

/* ---------------------------------------------------------------------------
   3. Base
--------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* A 13-digit NZBN is read digit by digit, so it gets tabular lining figures. */
.nzbn { font-variant-numeric: tabular-nums lining-nums; }

h1, h2, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
a:hover { text-decoration-thickness: 2px; }

/* The only transition on the site, per the brief. */
a, summary, [tabindex] { transition: outline-color 120ms ease; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   4. Layout — single column, no grid, no sidebar
--------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.site-header { padding-block: var(--s7) var(--s6); }
.site-main   { padding-bottom: var(--s8); }

.site-logo { display: inline-block; color: var(--ink); }
.site-logo svg { display: block; width: 168px; height: auto; }

/* Sections are separated by space, not by rules. */
section + section { margin-top: var(--s8); }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 18ch;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: -0.006em;
  margin-bottom: var(--s4);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
  margin-top: var(--s5);
  text-wrap: pretty;
}

p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--s4); }

/* ---------------------------------------------------------------------------
   5. Properties list — signature element

   The company record panel this section used to sit beneath was removed at the
   owner's direction, so the labelled property entry now carries the page: name,
   domain, one line of description, and an honest status mark.
--------------------------------------------------------------------------- */

.properties { margin-top: var(--s4); }
.properties > li + li { margin-top: var(--s5); }

.property-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
}

.property-domain {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--muted);
}

.property-desc {
  margin-top: var(--s2);
  color: var(--muted);
  max-width: var(--measure);
}

.status {
  display: inline-block;
  margin-top: var(--s3);
  padding: 0.15em 0.55em;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 3px;
}
.status.is-quiet {
  color: var(--muted);
  background: var(--surface);
}

/* ---------------------------------------------------------------------------
   6. Contact form

   Plain HTML posting to a Pages Function. No client JavaScript, so validation
   is the browser's own plus the server's — which is why the fields lean on
   type/required/maxlength rather than on script.
--------------------------------------------------------------------------- */

.contact-form {
  margin-top: var(--s5);
  max-width: var(--measure);
}

.field + .field { margin-top: var(--s4); }

.field label {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  /* The only inset on the site: a field has to read as enterable without a
     border, since nothing else on the page uses one. */
  box-shadow: inset 0 0 0 1px oklch(0.884 0.014 155);
}

.contact-form textarea { resize: vertical; min-height: 8rem; }

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Browsers flag this only after a submit attempt, so it never scolds on load. */
.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  box-shadow: inset 0 0 0 2px oklch(0.52 0.16 28);
}

.hint {
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--muted);
}

.contact-form button {
  margin-top: var(--s5);
  padding: 0.6rem 1.4rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.contact-form button:hover { background: oklch(0.385 0.075 168); }

.form-note { margin-top: var(--s4); }

/* Honeypot. Off-canvas rather than display:none — some bots skip hidden
   fields, but few resist one that is present in the layout. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   7. Policy pages
--------------------------------------------------------------------------- */

/* Used by the form handler's error page, which has no site header above it.
   A class rather than an inline style, because the CSP forbids inline styles. */
.prose-standalone { padding-top: var(--s7); }

.prose h2 { margin-top: var(--s7); }
.prose h2:first-of-type { margin-top: var(--s6); }
.prose ul { margin-top: var(--s4); max-width: var(--measure); }
.prose ul li { padding-left: var(--s5); position: relative; }
.prose ul li + li { margin-top: var(--s2); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: var(--s2);
  top: 0.68em;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--accent);
}
.updated {
  margin-top: var(--s4);
  font-size: var(--t-small);
  color: var(--muted);
}
.backlink { font-size: var(--t-small); }

/* ---------------------------------------------------------------------------
   8. Footer
--------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  padding-block: var(--s6);
  font-size: var(--t-small);
  color: var(--muted);
}
.site-footer p { max-width: var(--measure); }
.site-footer p + p { margin-top: var(--s3); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-bottom: var(--s4);
}
.footer-links a { font-weight: 500; color: var(--ink); }

/* Site version. Kept in step with /VERSION at the repo root — bump it in both
   places on every change, so what is deployed can be identified from the page. */
.version {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}