/* ==========================================================================
   Base: reset, body, links, focus, grain, reduced motion
   ========================================================================== */

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

/* The site is dark by design: tell the browser, so a forced dark mode
   (Samsung Internet) leaves the colours alone */
:root {
  color-scheme: only dark;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative; /* anchors the dev grid overlay */
  margin: 0;
  min-height: 100vh;
  background: var(--grain-tile) 0 0 / 256px 256px, var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip; /* 104% bands and the torn paper must never cause sideways scroll */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol {
  margin: 0;
}

/* :where() keeps this reset at zero specificity, so a component's own
   padding (e.g. the numbers block) always wins */
:where(ul[role='list'], ol[role='list']) {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

/* Images, drawings and videos can't be dragged out or selected, and a long
   press on an iPhone doesn't offer 'Save to Photos'. An image inside a
   link keeps the link's own long-press menu (open, copy link). The
   right-click menu: js/main.js. */
img,
svg,
video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
img,
video {
  -webkit-touch-callout: none;
}
a img,
a video {
  -webkit-touch-callout: default;
}

/* No widows or orphans (DESIGN.md, Type). Where a short ending still drops
   onto its own line at 390 or 360px, glue the last words with  . */
h1, h2, h3, .head {
  text-wrap: balance;
}
p, li, blockquote, figcaption {
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}

/* Headings: Archivo 900, condensed, uppercase */
.head {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-stretch: var(--head-stretch);
  text-transform: uppercase;
}

/* The one yellow word per section */
.accent {
  color: var(--accent);
}

/* Links */
a {
  color: var(--bone);
}
a:hover {
  color: var(--accent);
}

/* Focus: yellow outline with offset, never removed without a replacement */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

/* Hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: off screen until focused */
.skip-link {
  position: absolute;
  top: var(--sp-16);
  left: var(--sp-16);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--target-link);
  padding: 0 var(--sp-24);
  background: var(--accent-paint) var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--bone);
}
.skip-link:hover {
  color: var(--on-accent);
}

/* Page grain
   Same filter as the canvas (#pageGrain), drawn as a repeating tile so it
   stays cheap on long pages. It is a background image on body, never an
   overlay, so nothing can sit under it: text, paper, photos, videos and
   cards never get grain, in any browser or stacking order (DESIGN.md).
   .grain gives an opaque ink panel (the case study that slides over Next
   up, Next up itself) the same grain on its own background. */
.grain {
  background: var(--grain-tile) 0 0 / 256px 256px, var(--ink);
}

/* Text selection: the accent with ink text (a case study's own accent);
   on yellow surfaces (footer paper, caution tape, the phone hero paper,
   filled buttons) ink with bone text */
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
.site-footer::selection,
.site-footer *::selection,
.band::selection,
.band *::selection,
.btn::selection,
.btn *::selection {
  background: var(--ink);
  color: var(--bone);
}
@media (max-width: 759.98px) {
  .hero-intro::selection {
    background: var(--ink);
    color: var(--bone);
  }
}
/* Notes, arrows, tape and the View case ticket are decoration: not
   selectable (.hand covers the handwritten notes). Real text stays
   selectable. */
.tape,
.ticket,
.nf-note {
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Reduced motion: no animation, everything in its final state */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}