*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.05; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

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

.eyebrow {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Inline marker for unconfirmed copy. Visible on purpose. */
.ph {
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Scroll fade. Content is fully visible without JS or with reduced motion. */
.js .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.8s ease, transform 0.8s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Heading followed by a hairline rule running to the edge, as in the book. */
.h-rule {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.h-rule::after { content: ""; flex: 1; min-width: 2rem; height: var(--hair); background: currentColor; opacity: 0.55; }

.caps { font-size: var(--step-0); font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.3; }

.bullets { list-style: none; padding: 0; }
.bullets li { position: relative; padding-left: 1.1em; break-inside: avoid; }
.bullets li + li { margin-top: 0.55em; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.32em; height: 0.32em; border-radius: 50%; background: currentColor; }
@media (min-width: 600px) {
  .bullets--2col { columns: 2; column-gap: 2.5rem; }
  .bullets--2col li { margin-top: 0 !important; margin-bottom: 0.55em; }
}

/* Image slot: grey frame with its label, or a real image when supplied. */
.slot {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ar-m);
  background: #d9d8d4;
  color: #2e2e2c;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (min-width: 768px) { .slot { aspect-ratio: var(--ar); } }
.slot figcaption { max-width: 28ch; padding: 1.25rem; text-align: center; font-size: 1.0625rem; line-height: 1.4; }
.slot--img { display: block; background: #d9d8d4; }
.slot--img picture, .slot--img img { width: 100%; height: 100%; }
.slot--img img { object-fit: cover; object-position: var(--focus, 50% 50%); }
.slot__note {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
}
/* On narrow screens a wrapped heading leaves no room for the rule, so the
   rule drops beneath the heading instead. */
@media (max-width: 639px) {
  .h-rule { display: block; }
  .h-rule::after { display: block; width: 100%; margin-top: 0.45em; }
}