/* ==========================================================================
   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); }

/* ---------- Theme switch: the new theme is revealed by a growing circle -----
   js/layout.js drives the clip-path; the default cross-fade is switched off so
   the old theme stays put underneath until the circle covers it.            */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---------- Lenis smooth scroll (js/motion.js; never under reduced motion) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Masked line reveals (SplitText, js/motion.js) -----------------
   The mask is padded so a display serif's ascenders and descenders are never
   clipped, and the padding is taken back so no line moves. Adjacent negative
   margins collapse rather than add, so each gap is taken back once, from the
   bottom margin, and the first and last lines settle their own outer edge.  */
.him-line-mask {
  padding-block: 0.12em;
  margin-bottom: -0.24em;
}
.him-line-mask:first-child { margin-top: -0.12em; }
.him-line-mask:last-child  { margin-bottom: -0.12em; }