/* Reset, element defaults, scrollbar, selection, focus, utilities */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto;                      /* Lenis owns smooth scrolling */
  scroll-padding-top: calc(var(--header-h-scrolled) + 12px);
  -webkit-text-size-adjust: 100%;
  /* Brand scrollbar (standards-based) */
  scrollbar-color: var(--color-accent) var(--color-surface-2);
  scrollbar-width: auto;
}
html:not(.js) { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; }
ul { margin: 0; padding: 0; }

.site { width: 100%; background: var(--color-bg); overflow-x: clip; }
.wrap { max-width: var(--container-width); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.disp { font-family: var(--font-heading); }
.flex-none { flex: none; }
.span-2 { grid-column: span 2; }
.t-strong { font-weight: 700; font-size: 16px; }

/* Selection: brand red with white text (contrast 6:1) */
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }

/* Scrollbar fallback for engines without scrollbar-color (older Safari) */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--color-surface-2); }
  ::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 999px; border: 3px solid var(--color-surface-2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-accent-dark); }
}

/* Visible focus everywhere; colour adapts to dark/light surfaces */
:focus-visible { outline: 3px solid var(--color-focus-light-bg); outline-offset: 3px; border-radius: 4px; }
.hdr :focus-visible, .on-dark :focus-visible, footer :focus-visible, #areas :focus-visible,
#counters :focus-visible, #top :focus-visible, #contact :focus-visible { outline-color: var(--color-focus); }

/* Accessibility helpers */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: var(--z-skip);
  background: var(--color-primary); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 16px; outline: 3px solid var(--color-focus); }

/* Images that fail to load fall back to the brand panel behind them */
img.is-missing { visibility: hidden; }