/* Reset + primitives. Component styles live in their own files. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--t-body)/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.wrap { padding-inline: var(--page-x); }

/* Mono micro-label — prices, sizes, edition details. Seasoning, not the meal. */
.micro{
  font: 600 var(--t-micro)/1.4 var(--f-mono);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Full-bleed loud band. Colour is passed per-instance from a piece's palette:
   <section class="band" style="--band:#C8401B"> — never hard-coded here. */
.band{
  background: var(--band, var(--ink));
  color: var(--ground);
  padding: var(--s9) var(--page-x);
  margin-block: var(--s9) 0;
}
.band__lockup{
  font: 800 var(--t-loud)/0.88 var(--f-display);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  margin: 0 0 var(--s4);
}
.band .micro{ color: inherit; opacity: .78; }

/* Buttons — shared by product pages and the footer forms. */
.btn{
  display: block;
  width: 100%;
  padding: var(--s4);
  border: 1px solid var(--ink);
  background: none;
  cursor: pointer;
  font: 600 var(--t-micro)/1 var(--f-mono);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.btn + .btn{ margin-top: var(--s2); }
.btn--add{ background: var(--ink); color: var(--ground); }
.btn--add:hover{ background: #000; }
.btn--wall:hover{ background: var(--ink); color: var(--ground); }

/* Focus: visible, monochrome, never a browser-blue halo on a white gallery. */
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}