/* 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.
   The @font-face blocks below are live but the .woff2 files are not yet in the
   repo; run assets/fonts/fetch-and-subset.sh to produce them. Until then the
   fallback stack in --font-display / --font-body carries the page, which is
   why both stacks name real faces rather than bare `serif` / `sans-serif`.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/sourceserif4-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@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;
}