/* ACME site. World: industrial mail-order catalogue.
   Colors, type, spacing, shape, depth, motion and fixed sizes come from tokens.
   Layout ratios, measures in ch, percentages and aspect ratios are written where they are used.
   Fonts are declared in index.html so this file holds no url().
   Contrast measured 2026-10-03: ink on yellow 11.70, on kraft 7.35, on manila 14.87;
   mute on manila 8.05, on yellow 6.34; mute-kraft on kraft 6.02 (4.82 on the darkest grain pixel); ink on the darkest grain pixel 5.88; red on manila 5.96;
   yellow and manila on ink 11.70 and 14.87. */

:root {
  /* color */
  --acme-yellow: #FFC400;      /* signal yellow: the hero field, the quote field and the claim block */
  --acme-kraft: #C79A6B;       /* the paper the catalogue is printed on */
  --acme-kraft-deep: #B5895B;  /* fibre and fold shadows on kraft */
  --acme-manila: #F2E4C8;      /* spec sheets and cards */
  --acme-ink: #141210;
  --acme-red: #94150D;         /* rubber stamps and warnings only, and only on a manila sheet: read through --acme-stamp-ink */
  --acme-stamp-ink: var(--acme-ink); /* what a stamp or a warning prints in where it sits: ink on kraft, red on a sheet (.sheet) */
  --acme-mute: #4A4034;        /* secondary text on manila or yellow */
  --acme-mute-kraft: #1B1713;  /* secondary text on kraft */
  --acme-rule: rgba(20, 18, 16, 0.28);

  /* type */
  --acme-f-stencil: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif;
  --acme-f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --acme-f-body: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --acme-f-sheet: 'Courier Prime', 'Courier New', monospace;
  --acme-t-hero: clamp(3rem, 7.4vw, 6rem);
  --acme-t-h2: clamp(2.25rem, 4.6vw, 4rem);
  --acme-t-claim: clamp(1.875rem, 4vw, 3.5rem);
  --acme-t-h3: clamp(1.5rem, 2.2vw, 1.875rem);
  --acme-t-mark: clamp(2.25rem, 3.4vw, 3rem);
  --acme-t-lead: clamp(1.1875rem, 1.5vw, 1.375rem);
  --acme-t-body: 1.125rem;
  --acme-t-small: 1rem;
  --acme-t-price: clamp(2.25rem, 3vw, 2.75rem);
  --acme-t-btn-sm: 1.25rem;
  --acme-t-btn-narrow: 1.375rem;
  --acme-lh-display: 0.92;
  --acme-lh-heading: 1.02;
  --acme-lh-body: 1.5;
  --acme-lh-claim: 1.12;
  --acme-lh-sheet: 1.3;      /* typed lines */
  --acme-lh-note: 1.35;      /* small print under a rule */
  --acme-ls-caps: 0.06em;
  --acme-ls-mark: 0.02em;
  --acme-ls-stamp: 0.08em;
  --acme-measure: 62ch;

  /* spacing, base 4 */
  --acme-s-1: 0.25rem;
  --acme-s-2: 0.5rem;
  --acme-s-3: 0.75rem;
  --acme-s-4: 1rem;
  --acme-s-5: 1.25rem;
  --acme-s-6: 1.5rem;
  --acme-s-8: 2rem;
  --acme-s-12: 3rem;
  --acme-s-16: 4rem;
  --acme-gutter: clamp(1rem, 4vw, 2.5rem);
  --acme-wrap: 1200px;
  --acme-section: clamp(3.5rem, 8vw, 7rem);
  --acme-field-top: clamp(2.5rem, 6vw, 5rem);      /* yellow field, above the content */
  --acme-field-bottom: clamp(3rem, 7vw, 6rem);
  --acme-col-gap: clamp(2rem, 5vw, 4.5rem);        /* between the two columns of a field */
  --acme-pad-sheet: clamp(1.25rem, 3vw, 2.25rem);  /* inside a small sheet */
  --acme-pad-form: clamp(1.5rem, 4vw, 3rem);       /* inside a large sheet or the coupon */

  /* shape: crates and printed sheets have square corners */
  --acme-r: 2px;
  --acme-line: 4px;
  --acme-line-mid: 2.5px;
  --acme-line-thin: 1.5px;

  /* depth */
  --acme-sh-frame: 0 2px 0 rgba(20, 18, 16, 0.5), 0 18px 28px rgba(20, 18, 16, 0.28); /* a mounted photograph */
  --acme-sh-sheet: 0 1px 0 rgba(20, 18, 16, 0.5), 0 10px 18px rgba(20, 18, 16, 0.22); /* paper lying on paper */
  --acme-sh-ctl: 0 5px 0 rgba(20, 18, 16, 0.35), 0 10px 16px rgba(20, 18, 16, 0.25);
  --acme-sh-ctl-down: 0 1px 0 rgba(20, 18, 16, 0.35), 0 2px 4px rgba(20, 18, 16, 0.25);

  /* hazard stripe */
  --acme-hazard: repeating-linear-gradient(-45deg, var(--acme-ink) 0 24px, var(--acme-yellow) 24px 48px);
  --acme-hazard-h: 28px;

  /* motion */
  --acme-dur-fast: 120ms;
  --acme-dur-med: 460ms;
  --acme-dur-stamp: 380ms;
  --acme-delay-lay: 120ms;
  --acme-delay-stamp: 620ms;
  --acme-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --acme-ease-stamp: cubic-bezier(0.2, 1.6, 0.4, 1);

  /* tilt: only stamps, the hero card and the ruler anvil are set at an angle */
  --acme-tilt-stamp: -7deg;
  --acme-tilt-card: -4deg;
  --acme-tilt-anvil: -12deg;
  --acme-ink-stamp: 0.9;     /* a stamp never prints solid */

  /* drop-test ruler */
  --acme-metre: 100px;
  --acme-anvil-at: 44vh;
  --acme-ruler-w: 4.75rem;
  --acme-anvil-w: 3.5rem;

  /* fixed sizes of small parts */
  --acme-w-lang: 2.75rem;        /* each language tab */
  --acme-w-picto: 2rem;          /* pictogram on a product sheet */
  --acme-w-card: 15.5rem;        /* the typed card on the hero photo */
  --acme-w-card-narrow: 17rem;
  --acme-w-fig: 9rem;            /* first column of the inspection sheet */
  --acme-w-label: 15rem;         /* second column of the inspection sheet */
  --acme-press: 2px;             /* how far a control sinks on hover */
  --acme-press-down: 5px;        /* and when pressed */
  --acme-stamp-top: clamp(1.25rem, 3vw, 2.5rem); /* the stamp on the inspection sheet */
  --acme-underline-gap: 0.18em;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--acme-s-8); }

body {
  margin: 0;
  background-color: var(--acme-kraft); /* the grain tile is set in index.html, next to the fonts */
  color: var(--acme-ink);
  font-family: var(--acme-f-body);
  font-weight: 500;
  font-size: var(--acme-t-body);
  line-height: var(--acme-lh-body);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--acme-ink);
  caret-color: var(--acme-ink);
  scrollbar-color: var(--acme-ink) var(--acme-kraft-deep);
}

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

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: var(--acme-underline-gap); text-decoration-thickness: var(--acme-line-thin); }

:focus-visible { outline: var(--acme-line) solid var(--acme-ink); outline-offset: var(--acme-s-1); }

.wrap { max-width: var(--acme-wrap); margin-inline: auto; padding-inline: var(--acme-gutter); }

.display {
  overflow-wrap: break-word; /* a long word an owner types never widens the page */
  font-family: var(--acme-f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--acme-lh-display);
  text-wrap: balance;
}

.hazard { height: var(--acme-hazard-h); background: var(--acme-hazard); border-block: var(--acme-line-mid) solid var(--acme-ink); }

/* ---------- demo notice ---------- */
.demo {
  background: var(--acme-ink);
  color: var(--acme-manila);
  text-align: center;
  font-family: var(--acme-f-sheet);
  font-size: var(--acme-t-small);
  padding: var(--acme-s-2) var(--acme-gutter);
}

/* ---------- header ---------- */
.hdr { padding-block: var(--acme-s-4); }
.hdr__in { display: flex; align-items: center; gap: var(--acme-s-6); flex-wrap: wrap; }
.mark {
  font-family: var(--acme-f-stencil);
  font-weight: 900;
  font-size: var(--acme-t-mark);
  line-height: 1;
  letter-spacing: var(--acme-ls-mark);
  text-decoration: none;
}
.hdr__tag { font-family: var(--acme-f-sheet); color: var(--acme-mute-kraft); font-size: var(--acme-t-small); margin-right: auto; }
.nav { display: flex; align-items: center; gap: var(--acme-s-6); font-family: var(--acme-f-sheet); font-weight: 700; }
.nav a { text-decoration: none; }
.nav__link { padding-block: var(--acme-s-2); }
.nav__link:hover { text-decoration: underline; }
.lang { display: flex; }
.lang a { padding: var(--acme-s-1) var(--acme-s-3); border: var(--acme-line-mid) solid var(--acme-ink); min-width: var(--acme-w-lang); text-align: center; }
.lang a + a { border-left: 0; }
.lang a[aria-current] { background: var(--acme-ink); color: var(--acme-yellow); }

/* ---------- controls ---------- */
.btn {
  display: inline-block;
  font-family: var(--acme-f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--acme-ls-caps);
  font-size: var(--acme-t-h3);
  line-height: 1;
  text-decoration: none;
  color: var(--acme-yellow);
  background: var(--acme-ink);
  border-radius: var(--acme-r);
  padding: var(--acme-s-5) var(--acme-s-8);
  box-shadow: var(--acme-sh-ctl);
  transition: transform var(--acme-dur-fast) var(--acme-ease), box-shadow var(--acme-dur-fast) var(--acme-ease);
}
.btn:hover { transform: translateY(var(--acme-press)); }
.btn:active { transform: translateY(var(--acme-press-down)); box-shadow: var(--acme-sh-ctl-down); }
.btn--sm { font-size: var(--acme-t-btn-sm); padding: var(--acme-s-3) var(--acme-s-5); }
.btn:focus-visible { outline: var(--acme-line) solid var(--acme-ink); outline-offset: var(--acme-s-1); }

/* ---------- printed pieces ---------- */
.sheet {
  --acme-stamp-ink: var(--acme-red); /* red prints on manila, never directly on kraft */
  background: var(--acme-manila);
  border: var(--acme-line-mid) solid var(--acme-ink);
  border-radius: var(--acme-r);
  box-shadow: var(--acme-sh-sheet);
}
.stamp {
  display: inline-block;
  font-family: var(--acme-f-stencil);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--acme-ls-stamp);
  line-height: 1;
  color: var(--acme-stamp-ink);
  border: var(--acme-line-mid) solid var(--acme-stamp-ink);
  border-radius: var(--acme-r);
  padding: var(--acme-s-2) var(--acme-s-3) var(--acme-s-1);
  transform: rotate(var(--acme-tilt-stamp));
  opacity: var(--acme-ink-stamp);
}

/* ---------- the drop test: ruler and anvil ---------- */
.fall { position: relative; }
.ruler { display: none; }
@media (min-width: 1400px) {
  .ruler {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(var(--acme-s-4), calc((100vw - var(--acme-wrap)) / 2 - 5.75rem));
    width: var(--acme-ruler-w);
    /* clip, not hidden: hidden makes the ruler a scroll container, and the
       sticky anvil would then stick to the ruler instead of the viewport */
    overflow: clip;
    border-left: var(--acme-line-mid) solid var(--acme-ink);
    background:
      repeating-linear-gradient(to bottom, var(--acme-ink) 0 var(--acme-line-thin), transparent var(--acme-line-thin) calc(var(--acme-metre) / 5)) left top / var(--acme-s-2) 100% no-repeat,
      repeating-linear-gradient(to bottom, var(--acme-ink) 0 var(--acme-line-mid), transparent var(--acme-line-mid) var(--acme-metre)) left top / var(--acme-s-5) 100% no-repeat;
    z-index: 2;
  }
  .ruler__n {
    position: absolute;
    left: var(--acme-s-6);
    transform: translateY(-50%);
    font-family: var(--acme-f-sheet);
    font-weight: 700;
    font-size: var(--acme-t-small);
    white-space: nowrap;
  }
  .ruler__n:nth-of-type(1) { top: var(--acme-s-3); }
  .ruler__n:nth-of-type(2) { top: calc(var(--acme-metre) * 5); }
  .ruler__n:nth-of-type(3) { top: calc(var(--acme-metre) * 10); }
  .ruler__n:nth-of-type(4) { top: calc(var(--acme-metre) * 15); }
  .ruler__n:nth-of-type(5) { top: calc(var(--acme-metre) * 20); }
  .ruler__n:nth-of-type(6) { top: calc(var(--acme-metre) * 25); }
  .ruler__n:nth-of-type(7) { top: calc(var(--acme-metre) * 30); }
  .ruler__n:nth-of-type(8) { top: calc(var(--acme-metre) * 35); }
  .ruler__anvil {
    position: sticky;
    top: var(--acme-anvil-at);
    width: var(--acme-anvil-w);
    margin-left: var(--acme-s-4);
    margin-top: var(--acme-s-12);
    transform: rotate(var(--acme-tilt-anvil));
  }
}

/* ---------- hero ---------- */
.hero { background: var(--acme-yellow); padding-block: var(--acme-field-top) var(--acme-field-bottom); }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--acme-col-gap);
  align-items: center;
}
.hero__title { font-size: var(--acme-t-hero); }
.hero__lead { font-size: var(--acme-t-lead); max-width: 34ch; margin-top: var(--acme-s-6); text-wrap: pretty; }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--acme-s-5) var(--acme-s-6); margin-top: var(--acme-s-8); }
.hero__note { font-family: var(--acme-f-sheet); font-size: var(--acme-t-small); color: var(--acme-mute); max-width: 34ch; line-height: var(--acme-lh-sheet); text-wrap: balance; }
.plate { position: relative; }
.plate__img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border: var(--acme-line) solid var(--acme-ink);
  border-radius: var(--acme-r);
  box-shadow: var(--acme-sh-frame);
}
.plate__card {
  position: absolute;
  left: calc(var(--acme-s-6) * -1);
  top: calc(var(--acme-s-8) * -1);
  width: min(var(--acme-w-card), 48%);
  padding: var(--acme-s-4) var(--acme-s-5) var(--acme-s-5);
  font-family: var(--acme-f-sheet);
  line-height: var(--acme-lh-sheet);
  transform: rotate(var(--acme-tilt-card));
}
.plate__ref { font-weight: 700; }
.plate__name { font-weight: 700; text-transform: uppercase; }
.plate__line { font-size: var(--acme-t-small); margin-top: var(--acme-s-2); }
.plate__card .stamp { display: block; width: fit-content; margin: var(--acme-s-5) 0 0 auto; font-size: var(--acme-t-h3); mix-blend-mode: multiply; } /* in flow, so it always lands on clear paper under the last typed line */

@media (prefers-reduced-motion: no-preference) {
  .plate__card { animation: lay var(--acme-dur-med) var(--acme-ease) var(--acme-delay-lay) both; }
  .plate__card .stamp { animation: stamp var(--acme-dur-stamp) var(--acme-ease-stamp) var(--acme-delay-stamp) both; }
}
@keyframes lay {
  from { transform: rotate(-9deg) translate(-18px, -22px); opacity: 0; }
  to { transform: rotate(var(--acme-tilt-card)); opacity: 1; }
}
@keyframes stamp {
  from { transform: rotate(var(--acme-tilt-stamp)) scale(2.2); opacity: 0; }
  to { transform: rotate(var(--acme-tilt-stamp)) scale(1); opacity: var(--acme-ink-stamp); }
}

/* ---------- promo ---------- */
.promo { background: var(--acme-ink); color: var(--acme-manila); }
.promo__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--acme-s-2) var(--acme-s-6); padding-block: var(--acme-s-5); }
.promo__label { font-family: var(--acme-f-stencil); font-weight: 800; text-transform: uppercase; letter-spacing: var(--acme-ls-caps); font-size: var(--acme-t-h3); line-height: 1; color: var(--acme-yellow); }
.promo__list li { font-size: var(--acme-t-lead); }

/* ---------- sections ---------- */
.sec { padding-block: var(--acme-section) 0; }
.sec:last-of-type { padding-bottom: var(--acme-section); }
.sec__title { font-size: var(--acme-t-h2); }
.sec__intro { font-family: var(--acme-f-sheet); color: var(--acme-mute-kraft); max-width: var(--acme-measure); margin-top: var(--acme-s-4); }
.sec__head { margin-bottom: var(--acme-s-12); }

/* ---------- why ---------- */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--acme-s-12) var(--acme-s-16); align-items: stretch; }
.why__claim {
  font-family: var(--acme-f-display);
  font-weight: 800;
  line-height: var(--acme-lh-claim);
  font-size: var(--acme-t-claim);
  text-wrap: balance;
  display: grid;
  align-content: center;
  padding: var(--acme-s-8);
  background: var(--acme-yellow);
  border: var(--acme-line) solid var(--acme-ink);
  border-radius: var(--acme-r);
  box-shadow: var(--acme-sh-sheet);
}
.why__list li { padding-block: var(--acme-s-6); border-top: var(--acme-line-mid) solid var(--acme-ink); }
.why__list li:last-child { border-bottom: var(--acme-line-mid) solid var(--acme-ink); }
.why__list h3 { font-family: var(--acme-f-display); font-weight: 800; text-transform: uppercase; font-size: var(--acme-t-h3); line-height: var(--acme-lh-heading); }
.why__list p { margin-top: var(--acme-s-2); max-width: var(--acme-measure); }

/* ---------- catalogue ---------- */
.cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--acme-s-8); }
.prod { display: flex; flex-direction: column; }
.prod__top { display: flex; justify-content: space-between; align-items: center; padding: var(--acme-s-2) var(--acme-s-4); font-family: var(--acme-f-sheet); font-weight: 700; border-bottom: var(--acme-line-mid) solid var(--acme-ink); }
.prod__picto { width: var(--acme-w-picto); height: var(--acme-w-picto); }
.prod__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 64%; border-bottom: var(--acme-line-mid) solid var(--acme-ink); }
.prod__body { display: flex; flex-direction: column; flex: 1; padding: var(--acme-s-5) var(--acme-s-5) var(--acme-s-6); }
.prod__name { font-family: var(--acme-f-display); font-weight: 800; text-transform: uppercase; font-size: var(--acme-t-h3); line-height: var(--acme-lh-heading); }
.prod__sum { margin-top: var(--acme-s-2); }
.prod__specs { margin-top: var(--acme-s-4); font-family: var(--acme-f-sheet); font-size: var(--acme-t-small); line-height: var(--acme-lh-note); }
.prod__specs li { padding-block: var(--acme-s-1); border-top: var(--acme-line-thin) dashed var(--acme-rule); }
.prod__warn { margin-top: var(--acme-s-4); padding-top: var(--acme-s-3); border-top: var(--acme-line-mid) solid var(--acme-stamp-ink); font-size: var(--acme-t-small); line-height: var(--acme-lh-note); }
.prod__warn b { font-family: var(--acme-f-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--acme-ls-caps); color: var(--acme-stamp-ink); margin-right: var(--acme-s-1); }
.prod__buy { display: flex; align-items: baseline; gap: var(--acme-s-2); margin-top: auto; padding-top: var(--acme-s-5); }
.prod__price { font-family: var(--acme-f-display); font-weight: 800; font-size: var(--acme-t-price); line-height: 1; font-variant-numeric: tabular-nums; }
.prod__unit { font-family: var(--acme-f-sheet); color: var(--acme-mute); font-size: var(--acme-t-small); }

/* ---------- proof: the inspection sheet ---------- */
.proof { position: relative; padding: var(--acme-pad-form); }
.proof__title { font-size: var(--acme-t-h2); max-width: 16ch; }
.proof .stamp { position: absolute; right: var(--acme-pad-form); top: var(--acme-stamp-top); font-size: var(--acme-t-h2); }
.proof__rows { margin-top: var(--acme-s-8); font-family: var(--acme-f-sheet); }
.proof__rows li {
  display: grid;
  grid-template-columns: var(--acme-w-fig) minmax(0, var(--acme-w-label)) minmax(0, 1fr);
  gap: var(--acme-s-1) var(--acme-s-6);
  align-items: baseline;
  padding-block: var(--acme-s-4);
  border-top: var(--acme-line-thin) dashed var(--acme-rule);
}
.proof__fig { font-weight: 700; font-size: var(--acme-t-lead); }
.proof__label { font-weight: 700; text-transform: uppercase; }

/* ---------- quote ---------- */
.quote { background: var(--acme-yellow); padding-block: var(--acme-section); }
.quote__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--acme-col-gap); align-items: start; }
.quote__coupon { border: var(--acme-line-mid) dashed var(--acme-ink); border-radius: var(--acme-r); padding: var(--acme-pad-form); }
.quote__title { font-size: var(--acme-t-hero); }
.quote__lead { margin-top: var(--acme-s-6); font-size: var(--acme-t-lead); max-width: 36ch; text-wrap: pretty; }
.quote__main .btn { margin-top: var(--acme-s-8); }
.quote__faq { padding: var(--acme-pad-sheet); }
.quote__faq h3 { font-family: var(--acme-f-display); font-weight: 800; text-transform: uppercase; font-size: var(--acme-t-h3); line-height: var(--acme-lh-heading); margin-bottom: var(--acme-s-3); }
.faq li { padding-block: var(--acme-s-4); border-top: var(--acme-line-thin) dashed var(--acme-rule); }
.faq__q { font-weight: 700; }
.faq__a { margin-top: var(--acme-s-1); color: var(--acme-mute); }

/* ---------- footer ---------- */
.ftr { background: var(--acme-ink); color: var(--acme-manila); padding-block: var(--acme-s-12); font-family: var(--acme-f-sheet); }
.ftr__in { display: flex; flex-wrap: wrap; gap: var(--acme-s-3) var(--acme-s-12); align-items: baseline; justify-content: space-between; }
.ftr__legal { font-size: var(--acme-t-small); }

/* ---------- smaller screens ---------- */
@media (max-width: 1020px) {
  .cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: 1fr; }
  .quote__in { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hero__in { grid-template-columns: 1fr; }
  .plate { margin-top: var(--acme-s-4); margin-right: var(--acme-s-3); display: flex; flex-direction: column-reverse; }
  .plate__card { position: relative; left: 0; top: 0; width: min(var(--acme-w-card-narrow), 78%); margin: 0 0 calc(var(--acme-s-6) * -1) var(--acme-s-4); z-index: 1; }
  .hdr__tag { display: none; }
  .nav { margin-left: auto; gap: var(--acme-s-4); }
  .nav__link, .nav .btn { display: none; }
  .proof__rows li { grid-template-columns: 1fr; }
  .proof .stamp { position: static; margin-top: var(--acme-s-6); font-size: var(--acme-t-h3); }
}
@media (max-width: 620px) {
  .cat { grid-template-columns: 1fr; }
  .btn { font-size: var(--acme-t-btn-narrow); padding: var(--acme-s-4) var(--acme-s-6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}