/* ---------- Fonts ----------
   The whole site reads its font from --font-body (:root, below), so changing
   the typeface = declare its @font-face here, point --font-body at it and
   update the preload <link> in index.html and each projects/NAME/index.html.
   Weights used across the site: 300 (only the Info page note), 400, 500, 600,
   700 (no italics). */
/* Light (300): added for the turned note on the Info page. Static files from
   the Archivo family (Assets/Fonts/Archivo in the main checkout), same
   metrics as the other weights (ascent 878 / descent 210 / 1000 upm), so no
   line moves. No .otf for this one: the .ttf is the fallback. The browser only
   downloads it on pages that use weight 300. */
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-Light.woff2") format("woff2"), url("../Assets/Fonts/Archivo-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-Regular.woff2") format("woff2"), url("../Assets/Fonts/Archivo-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-Italic.woff2") format("woff2"), url("../Assets/Fonts/Archivo-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-Medium.woff2") format("woff2"), url("../Assets/Fonts/Archivo-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-MediumItalic.woff2") format("woff2"), url("../Assets/Fonts/Archivo-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-SemiBold.woff2") format("woff2"), url("../Assets/Fonts/Archivo-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-SemiBoldItalic.woff2") format("woff2"), url("../Assets/Fonts/Archivo-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-Bold.woff2") format("woff2"), url("../Assets/Fonts/Archivo-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../Assets/Fonts/Archivo-BoldItalic.woff2") format("woff2"), url("../Assets/Fonts/Archivo-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-text: #111111;

  --nav-glass-bg: rgba(232, 232, 232, 0.78);
  --nav-blur: 16px;
  --nav-radius: 5px;
  /* 036: gap between the bar and the sliding box on every side; the box's radius is the bar's minus this. */
  --nav-pill-gap: 4px;
  /* Sliding box: lighter than the bar in light theme (white), darker in dark theme (black), so the marked section stands out. Contrast checked in tests/menu-horizontal.test.js (R6). */
  --nav-pill-bg: rgba(255, 255, 255, 0.75);
  --nav-link-inactive: #686868;
  --nav-link-active: #111111;

  /* Backdrop behind the contact form — dark dim over light-theme content,
     inverted to a light dim in dark theme below so the blur doesn't read
     as "still dark mode" once the form is open. */
  --overlay-bg: rgba(17, 17, 17, 0.55);

  /* Solid mirror of --color-bg/--nav-link-active from the opposite theme,
     used by .nav-theme-toggle so its square stays inverted relative to
     the menu pill in both themes — solid, not glass, so no blur/transparency. */
  --nav-toggle-bg-inverted: #111111;
  --nav-link-active-inverted: #f5f5f5;

  /* Surfaces used by form controls (pills, inputs…) — kept separate from
     --color-bg/--color-text so those components stay readable in dark
     mode instead of inverting to unreadable combinations. */
  --color-surface: #f0f0f0;
  --color-surface-hover: #e6e6e6;
  --color-surface-weak: #f8f8f8;
  --color-surface-disabled: #f7f7f7;
  --color-text-disabled: #cccccc;
  --color-placeholder: #9a9a9a;
  --color-invalid-bg: #fdf1f1;
  --color-dot-inactive: #d8d8d8;

  /* Transparent in light theme (no visual change there) — the dark-theme
     override below gives pills/inputs/the contact links a visible edge. */
  --color-border: transparent;

  /* Same as --color-surface here — only the dark-theme override differs,
     giving the step forward/back buttons their own solid, accessible
     fill without brightening pills/the contact links too. */
  --color-surface-strong: #f0f0f0;
  --color-surface-strong-hover: #e6e6e6;

  /* Space above the first heading of a page's content: "Selected Work" on
     the home (css/work.css) and the headline on project pages
     (css/project.css) — the client wants them identical, so both read this. */
  --content-top-space: 80px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 1180px) {
  :root {
    --content-top-space: 56px;
  }
}

/* Dark theme — toggled by js/theme.js via data-theme on <html>. */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #111111;
  --color-text: #f5f5f5;

  --nav-glass-bg: rgba(48, 48, 48, 0.78);
  --nav-pill-bg: rgba(0, 0, 0, 0.5);
  --nav-link-inactive: #a8a8a8;
  --nav-link-active: #f5f5f5;

  --overlay-bg: rgba(245, 245, 245, 0.45);

  /* #f5f5f5, not pure #ffffff, to match --nav-link-active-inverted's white
     in the light theme below — keeps the toggle's own two whites
     consistent with each other through the click animation. */
  --nav-toggle-bg-inverted: #f5f5f5;
  --nav-link-active-inverted: #111111;

  --color-surface: #1f1f1f;
  --color-surface-hover: #2a2a2a;
  --color-surface-weak: #1a1a1a;
  /* Were #191919/#555555 — nearly the same near-black as --color-bg, so
     a disabled nav button read as gone rather than dimmed. Lightened
     enough to still show as a muted button, clearly weaker than
     --color-surface-strong's enabled fill. */
  --color-surface-disabled: #242424;
  --color-text-disabled: #707070;
  --color-placeholder: #6c6c6c;
  --color-invalid-bg: #3a1f1f;
  --color-dot-inactive: #666666;

  /* --color-surface (pills, the contact links) stays dim, with this as
     its edge, since those keep the outlined look. */
  --color-border: #707070;

  /* The step forward/back buttons get their own solid fill instead of
     a border — #626262 still clears the 3:1 WCAG minimum against
     --color-bg (#111111), unlike --color-surface here (~1.15:1). */
  --color-surface-strong: #626262;
  --color-surface-strong-hover: #757575;
}

/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  -webkit-text-size-adjust: 100%;
  /* Always the colour of the mode: Safari on iPhone takes the colour of its
     top bar from here and from body, and js/footer.js no longer repaints
     them (bug 027). */
  /* --footer-bg is set by js/footer.js only while the end of the page is near
     (phones and tablets), so the colour under the footer is the footer's; the
     top of the page keeps the mode's colour (bug 028). */
  background: var(--footer-bg, var(--color-bg));
  /* Fades with the theme switch (js/theme.js): html paints the mode, body is
     transparent so the bounce under the footer shows the footer's colour. */
  transition: background-color 0.3s ease;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  background: transparent;
  color: var(--color-text);
  min-height: 100dvh;
  /* Reserve space so page content is never hidden behind the fixed bottom nav */
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  /* Fades with the theme switch (js/theme.js) instead of snapping
     instantly. Scoped to body only — a blanket `* { transition }` was
     tried first but caused widespread flicker, since every element
     (including ones with backdrop-filter/transform animations of their
     own) started re-transitioning at once. */
  transition: color 0.3s ease;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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


/* Text for search engines and screen readers only (the home's <h1>: the
   page has no visible headline of its own, the intro video is the hero). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}