/* =========================================================================
   Yes And Communication Lab — shared foundation
   =========================================================================
   Tokens, reset, self-hosted type, and accessibility primitives only.
   Layout and typographic scale live in site.css. The split is worth keeping:
   these are the things that stay true whatever the page looks like.
   ========================================================================= */


/* --- Type ---------------------------------------------------------------
   Bebas Neue is self-hosted deliberately. public/_headers sets
   `default-src 'self'` with no font-src, so a Google Fonts request is
   blocked by CSP and fails *silently* — the page just renders in the
   fallback. Serving from our own origin needs no CSP change, because
   font-src inherits 'self' from default-src.

   SIL Open Font License; redistribution is permitted.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}


:root {
  /* Brand — Guidelines p.06. These three are the approved palette. */
  --berry: #9C1D4F;
  --black: #000000;
  --white: #FFFFFF;

  /* Approved extension to the palette — decided 2026-08-29.
     The guidelines say "do not invent new color combinations", but a page
     with sections needs neutrals for secondary text, hairlines and section
     separation, which three colours cannot carry. These are the same three
     values the email signature page already established, so the site uses
     one neutral set rather than two.

     Keep the scope: secondary text, rules, and section grounds only. No
     heading, link, button or state colour should depend on them — that
     discipline is what stops a three-colour brand drifting into a
     twelve-colour one. */
  --muted: #5A5A5A;   /* 6.8:1 on white, 6.4:1 on wash — AA at any size */
  --line:  #E4E0DE;   /* hairlines and dividers — non-text */
  --wash:  #F7F5F4;   /* alternating section grounds — non-text */

  /* Berry on white is 7.8:1 and white on berry likewise, so berry carries
     text and buttons at any size without an accessibility caveat. */

  --display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica,
    Arial, sans-serif;
}


/* --- Reset --------------------------------------------------------------- */

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

html {
  /* The logo is berry + black, so every page is light in every context. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }


/* --- Accessibility primitives -------------------------------------------- */

/* Visible to screen readers and search engines, not on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Berry rather than the UA default: the default blue is the one colour on
   the page that belongs to no part of the brand. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--berry);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: top 140ms ease;
}
.skip-link:focus { top: 0.5rem; }


/* --- Shared motion -------------------------------------------------------
   Carried over from the placeholder page, which already had this right. */

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

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