/* ==========================================================================
   HIM — Base layer: reset, document defaults, typography application
   Depends on tokens.css. Load order: tokens → base → components.
   ========================================================================== */

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

/* Components that set an explicit `display` would otherwise beat [hidden]'s
   UA rule — the bag badge rendered "0" because of exactly this. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--content);
  font-family: var(--him-font);
  font-size: var(--him-size-body);
  font-weight: var(--him-weight-regular);
  line-height: var(--him-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--him-duration-base) var(--him-ease-inout),
              color      var(--him-duration-base) var(--him-ease-inout);
}

/* An inverted section paints its own ground so the role swap is visible. */
.him-invert { background: var(--surface); color: var(--content); }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--him-duration-base) var(--him-ease-inout);
}

hr {
  border: 0;
  border-top: var(--him-border-hairline) solid var(--border);
  margin: 0;
}

/* ---------- Focus: visible, never a coloured glow (ADR 0001 §5) --------- */
:focus-visible {
  outline: var(--him-border-emphasis) solid var(--focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.him-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--him-space-4);
  z-index: var(--him-z-modal);
  padding: var(--him-space-3) var(--him-space-6);
  background: var(--content);
  color: var(--content-inverse);
}
.him-skip-link:focus { left: var(--him-space-4); }

.him-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   TYPOGRAPHY  (ADR 0001 §2)
   One display element per viewport. Body never below 16px. Measure ≤ 68ch.
   ========================================================================== */

.him-display-1,
.him-display-2,
.him-display-3 {
  font-family: var(--him-font-display);
  font-weight: var(--him-weight-regular);   /* Playfair at 300 is too fragile at scale */
  line-height: var(--him-leading-display);
  letter-spacing: var(--him-tracking-display);
  text-wrap: balance;
}
.him-display-1 { font-size: var(--him-size-display-1); }
.him-display-2 { font-size: var(--him-size-display-2); }
.him-display-3 { font-size: var(--him-size-display-3); }

.him-headline-1,
.him-headline-2 {
  font-weight: var(--him-weight-regular);
  line-height: var(--him-leading-heading);
  letter-spacing: var(--him-tracking-heading);
  text-wrap: balance;
}
.him-headline-1 { font-size: var(--him-size-headline-1); }
.him-headline-2 { font-size: var(--him-size-headline-2); }

.him-title {
  font-size: var(--him-size-title);
  font-weight: var(--him-weight-medium);
  line-height: var(--him-leading-heading);
  letter-spacing: var(--him-tracking-normal);
}

.him-body-lg { font-size: var(--him-size-body-lg); line-height: var(--him-leading-body); }
.him-body    { font-size: var(--him-size-body);    line-height: var(--him-leading-body); }

/* The single most identifiably editorial move in the system. Max 4 words. */
.him-eyebrow {
  font-size: var(--him-size-eyebrow);
  font-weight: var(--him-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--him-tracking-eyebrow);
  line-height: 1.4;
  color: var(--content-muted);
}

.him-caption {
  font-size: var(--him-size-caption);
  color: var(--content-muted);
  line-height: 1.5;
}

/* Prose blocks: measure-capped, editorial rhythm. */
.him-prose { max-width: var(--him-measure); }
.him-prose > * + * { margin-top: var(--him-space-6); }
.him-prose p { font-size: var(--him-size-body-lg); }
.him-prose a {
  border-bottom: var(--him-border-hairline) solid var(--border-accent);
  padding-bottom: 1px;
}
.him-prose a:hover { color: var(--accent-text); }

.him-muted { color: var(--content-muted); }

/* ==========================================================================
   LAYOUT  (ADR 0001 §6)
   ========================================================================== */

.him-container,
.him-container-narrow,
.him-container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--him-gutter);
}
.him-container        { max-width: calc(var(--him-container-default) + 2 * var(--him-gutter)); }
.him-container-narrow { max-width: calc(var(--him-container-narrow)  + 2 * var(--him-gutter)); }
.him-container-wide   { max-width: calc(var(--him-container-wide)    + 2 * var(--him-gutter)); }
.him-container-full   { width: 100%; }

/* Section rhythm uses only the top four spacing steps. */
.him-section    { padding-block: var(--him-space-16); }
.him-section-lg { padding-block: var(--him-space-24); }
.him-section-xl { padding-block: var(--him-space-32); }
@media (min-width: 1024px) {
  .him-section    { padding-block: var(--him-space-24); }
  .him-section-lg { padding-block: var(--him-space-32); }
  .him-section-xl { padding-block: var(--him-space-48); }
}

.him-grid {
  display: grid;
  gap: var(--him-grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px)  { .him-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .him-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Product grids stop at 3 — a 4th column shrinks imagery below the point
   where fabric texture reads (ADR 0001 §6). */
.him-grid-products {
  display: grid;
  gap: var(--him-grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .him-grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .him-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.him-stack > * + * { margin-top: var(--him-space-6); }
.him-stack-sm > * + * { margin-top: var(--him-space-3); }
.him-stack-lg > * + * { margin-top: var(--him-space-12); }