/* ==========================================================================
   Base — reset, type system, editorial primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); scroll-padding-top: calc(var(--head-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
[hidden] { display: none !important; }
summary { cursor: pointer; }
::selection { background: var(--flare); color: #fff; }

h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: fixed; left: 1rem; top: calc(var(--safe-top) + 0.75rem); z-index: 1000;
  padding: 0.75rem 1.1rem; border-radius: var(--r-pill);
  background: var(--bone); color: #140f0e; font-weight: 700; text-decoration: none;
  transform: translateY(-180%); transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.2em; }
.i--sm { width: 1em; height: 1em; }
.i--lg { width: 1.5em; height: 1.5em; }

/* ---------- Type roles ---------- */
.display, .poster {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.88;
}
.poster { font-size: var(--t-mega); }
.caps { text-transform: uppercase; }
.serif { font-family: var(--f-read); }
.serif-it { font-family: var(--f-read); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

/* Kicker / eyebrow: small caps label, the reference's "POPULAR PRODUCTS" voice */
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
  line-height: 1.2;
}
.eyebrow--red, .kicker--red { color: var(--flare-text); }
.eyebrow::before, .kicker::before { content: ""; width: 1.8em; height: 1px; background: currentColor; }
.eyebrow--plain::before, .kicker--plain::before { display: none; }
.kicker b { color: var(--bone); font-weight: 600; }

.lede { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.35rem); line-height: 1.5; color: var(--bone-2); max-width: 38rem; }
.muted { color: var(--bone-3); }
.soft { color: var(--bone-2); }
.small { font-size: var(--t-small); }
.tiny { font-size: var(--t-micro); }
.num { font-variant-numeric: tabular-nums; }
.red { color: var(--flare-text); }

/* Image-filled letters — typography integrated into imagery */
.fill-img {
  background-image: var(--img);
  background-size: cover;
  background-position: var(--img-pos, center 30%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fill-img { color: var(--bone); -webkit-text-fill-color: currentColor; background: none; }
}

/* ---------- Long-form reading (calm, readable) ---------- */
.prose {
  font-family: var(--f-read);
  font-size: clamp(1.12rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.72;
  color: #e4dad0;
  max-width: var(--w-read);
  font-weight: 400;
}
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--f-display); color: var(--bone); margin-top: 2.2em; line-height: 1.1; letter-spacing: -0.02em; }
.prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.prose h3 { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); }
.prose h4 { font-size: 1.2rem; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose a { color: var(--flare-text); }
.prose a:hover { color: var(--bone); }
.prose strong { color: var(--bone); font-weight: 650; }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--flare); }
.prose blockquote {
  margin: 2em 0;
  padding: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bone);
  border: 0;
}
.prose blockquote::before { content: "“"; display: block; font-size: 2.2em; line-height: 0.6; color: var(--flare); margin-bottom: 0.1em; }
.prose blockquote p { font: inherit; }
.prose img { border-radius: var(--r); margin-block: 2em; width: 100%; }
.prose figcaption { font-family: var(--f-ui); font-size: var(--t-small); color: var(--bone-3); margin-top: 0.6em; }
.prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--ink-3); padding: 0.1em 0.35em; border-radius: 4px; }
.prose hr { margin: 3em auto; width: 3rem; border-top: 2px solid var(--flare); }
.prose > p:first-child::first-letter {
  font-family: var(--f-display); font-weight: 600; float: left;
  font-size: 4.2em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--bone);
}

/* ---------- Reveal (restrained) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); }
  .reveal-img.is-in, .is-in .reveal-img { clip-path: inset(0 0 0 0); }
}

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