/* Betterward - public site. Colours, type and focus from the Ivory handoff (betterward.css / betterward.tokens.json,
   webpage 0.6); tokens on :root, dark set under prefers-color-scheme (PORTFOLIO 2.11). Fonts self-hosted (OFL). */

@font-face {
  font-family: 'Albert Sans';
  src: url('/assets/fonts/AlbertSans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/CormorantGaramond.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F7F2EE;          /* bw-bg */
  --surface: #FFFFFF;     /* bw-surface */
  --ink: #2E1A22;         /* bw-ink */
  --muted: #6B4F58;       /* bw-ink-2 */
  --accent: #4F2130;      /* bw-primary / bw-link (plum) */
  --on-accent: #F7F2EE;   /* bw-on-primary */
  --border: #E8DCDF;      /* bw-border */
  --focus-ring: #F8E59A;  /* bw-focus-ring */
  --focus-halo: #4F2130;  /* bw-focus-halo */
  --serif: 'Cormorant Garamond', Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1216;
    --surface: #261920;
    --ink: #F7F2EE;
    --muted: #D9C7CE;
    --accent: #F4A964;    /* apricot leads in dark */
    --on-accent: #2E1019;
    --border: #3F2E36;
    --focus-ring: #F4A964;
    --focus-halo: #1C1216;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-halo); }
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 8px; }

body {
  margin: 0;
  font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 0.2em; }
.brand, .lang-switch a { text-decoration: none; }
img, svg { max-width: 100%; height: auto; }
body { overflow-wrap: break-word; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }

.site-header { border-bottom: 1px solid var(--border); }
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand { display: inline-flex; align-items: center; min-height: 48px; }
.brand img { display: block; height: 32px; width: auto; }
.lang-switch { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 8px;
  border-radius: 12px; text-decoration: none; font-weight: 600; color: var(--muted);
}
.lang-switch a.active { color: var(--ink); background: var(--surface); border: 1px solid var(--border); box-shadow: inset 0 -3px 0 var(--accent); }

/* Serif for headings; under 30px always weight 600 (handoff rule). */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; }
h1 { font-weight: 500; font-size: clamp(2.2rem, 6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 0.5em; }
.hero { padding: 72px 0 48px; }
.info { padding: 0 0 72px; }
.info h2 { font-size: 1.75rem; margin: 1.6em 0 0.4em; }
.lead { font-size: 1.15rem; max-width: 36em; }
.note { color: var(--muted); }

.site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: 0.9rem; }
.site-footer p { margin: 0 0 6px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0 0 12px; padding: 0; }
.footer-links a { display: inline-block; padding: 12px 0; }

/* Legal and support pages */
.legal { max-width: 760px; padding-top: 40px; padding-bottom: 64px; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.legal h2 { font-size: 1.5rem; margin-top: 1.8em; }
.legal h3 { font-size: 1.25rem; margin-top: 1.4em; }
.legal ul, .legal ol { padding-left: 1.2em; }
.legal li { margin-bottom: 0.4em; }
.legal-date { color: var(--muted); font-size: 0.92rem; }
.legal-draft {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 12px 16px; margin: 0 0 1.5em;
}
.legal table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.95rem; }
.legal th, .legal td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--surface); }
.table-scroll { overflow-x: auto; }

/* Windows high contrast / forced colors: keep borders and focus visible */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .lang-switch a.active, .legal-draft { border: 2px solid CanvasText; }
}
@media print {
  .site-header, .site-footer, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}