/* ==========================================================================
   base.css — fonts, reset, element defaults, focus, layout container.
   Uses role tokens only.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/archivo-expanded-700.61a7130410a8.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-400.66a0158fada2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* NG Mono = IBM Plex Mono, subsetted and renamed (Reserved Font Name "Plex"). */
@font-face {
  font-family: "NG Mono";
  src: url("../fonts/ng-mono-400.9418d7c6a439.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NG Mono";
  src: url("../fonts/ng-mono-500.bbbca9e9380f.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Focus and anchor jumps stop below the sticky header, never under it. */
  scroll-padding-top: calc(var(--header-height) + var(--space-m));
}

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

ul[class],
ol[class] {
  list-style: none;
}

table {
  border-collapse: collapse;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* --- Element defaults ----------------------------------------------------- */

body {
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-reading);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
  font-synthesis: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--type-heading-weight);
  /* Headings break between words, never inside one. Hyphenation (by the page
     lang) is the fallback for a word longer than the line, and only for long words. */
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: normal;
}

h1,
h2 {
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
}

h3,
h4 {
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line-height);
  letter-spacing: var(--type-heading-s-tracking);
}

strong,
b {
  font-family: var(--type-strong-family);
  font-weight: var(--type-strong-weight);
  font-size: var(--type-strong-size);
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: var(--link-underline-offset);
}

a:hover {
  text-decoration-thickness: var(--focus-width);
}

hr {
  border-top: var(--rule-width) solid var(--color-line);
}

input,
select,
textarea {
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-s);
  border: var(--rule-width) solid var(--color-control-edge);
  background: var(--color-canvas);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 0;
  padding: 0;
  border: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-control-edge-active);
}

::placeholder {
  color: var(--color-ink-muted);
  opacity: 1;
}

::selection {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

/* --- Type roles as classes ----------------------------------------------
   For text whose element does not already carry the role (a label in a p,
   a heading-s in an h2). Components add their own class for layout. */

.type-display,
.type-heading,
.type-heading-s {
  /* Headings break between words, never inside one. Hyphenation (by the page
     lang) is the fallback for a word longer than the line, and only for long words. */
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: normal;
}

.type-display {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-tracking);
}

.type-heading {
  font-family: var(--font-display);
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
}

.type-heading-s {
  font-family: var(--font-display);
  font-size: var(--type-heading-s-size);
  font-weight: var(--type-heading-s-weight);
  line-height: var(--type-heading-s-line-height);
  letter-spacing: var(--type-heading-s-tracking);
}

.type-body {
  font-family: var(--font-reading);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  font-weight: var(--type-mono-weight);
  line-height: var(--type-mono-line-height);
  letter-spacing: var(--type-mono-tracking);
}

.type-label {
  font-family: var(--font-mono);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

.type-wordmark {
  font-family: var(--type-wordmark-family);
  font-size: var(--type-heading-size);
  font-weight: var(--type-wordmark-weight);
  line-height: var(--type-wordmark-line-height);
  letter-spacing: var(--type-wordmark-tracking);
  text-transform: uppercase;
}

/* --- Focus ---------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Motion --------------------------------------------------------------- */

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

/* HQ: scroll reveal (Pinhas, 29 October 2026). Cards, section titles and
   campaign blocks fade and rise as they scroll into view; campaign photos
   settle from a slight zoom. Driven by the scroll itself (CSS scroll
   timelines): no JavaScript, nothing runs while the page is still. Browsers
   without scroll timelines, and visitors who ask for less motion, simply
   see everything in place. A block already wholly on screen at load is
   shown at once, so the first view never waits. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head,
    .product-card,
    .campaign-halves > li,
    .campaign-stories__item {
      animation: reveal-rise var(--motion-ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    /* Cards in a row arrive one after another. */
    .product-grid > li:nth-child(4n + 2) .product-card,
    .campaign-halves > li:nth-child(2),
    .campaign-stories > li:nth-child(3n + 2) .campaign-stories__item {
      animation-range: entry 10% entry 90%;
    }

    .product-grid > li:nth-child(4n + 3) .product-card,
    .campaign-stories > li:nth-child(3n + 3) .campaign-stories__item {
      animation-range: entry 20% entry 100%;
    }

    .product-grid > li:nth-child(4n + 4) .product-card {
      animation-range: entry 30% entry 100%;
    }

    .campaign .ph img,
    .campaign-stories .ph img {
      animation: reveal-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-settle {
  from { transform: scale(var(--reveal-photo-scale)); }
  to { transform: none; }
}

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--layer-floating);
  padding: var(--space-s) var(--space-m);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-family: var(--font-mono);
  font-size: var(--type-label-size);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: var(--rule-width);
  height: var(--rule-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}