/* ==========================================================================
   Tiny Beginnings — Base
   Reset, document defaults, typography scale, layout primitives.
   Every font-size below carries a line-height (design system §3.2 rule 1).
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Load-bearing: without height:auto a width/height attribute pair silently
   overrides the aspect ratio and stretches every image. (PROJECT-RULES §4) */
img, svg, video { max-width: 100%; }
img { height: auto; display: block; border: 0; }

/* figure carries a 40px default margin in every browser — it is the quietest
   source of horizontal overflow there is. */
figure, blockquote, dl, dd { margin: 0; }

/* ---- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-medium); }

/* Playfair only at or above its 28px web floor (§3.2 rule 2). */
.t-display, .t-hero, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
/* One per page, and only for the headline the page exists for (§15 level 1). */
.t-display { font-size: var(--size-display); line-height: var(--lh-display);
             letter-spacing: var(--tracking-xl); max-width: 14ch; }
@media (max-width: 1023px) { .t-display { max-width: 18ch; } }

.t-hero { font-size: var(--size-hero); line-height: var(--lh-hero);
          letter-spacing: var(--tracking-display); max-width: var(--measure-heading); }
.t-h1   { font-size: var(--size-h1);   line-height: var(--lh-h1);
          letter-spacing: var(--tracking-display); max-width: 800px; }
.t-h2   { font-size: var(--size-h2);   line-height: var(--lh-h2);
          letter-spacing: var(--tracking-heading); max-width: var(--measure-heading); }
.t-h3   { font-size: var(--size-h3);   line-height: var(--lh-h3);
          letter-spacing: var(--tracking-heading); max-width: 680px; }

/* H4 and H5 are sans by design — the family switch is what gives them
   hierarchy, not size (§3.3). */
.t-h4 { font-family: var(--font-body); font-weight: var(--weight-semibold);
        font-size: var(--size-h4); line-height: var(--lh-h4); max-width: 640px; }
.t-h5 { font-family: var(--font-body); font-weight: var(--weight-semibold);
        font-size: var(--size-h5); line-height: var(--lh-h5); max-width: 640px; }

/* Mobile hero/h2 can fall under 28px on the smallest phones — guard the
   Playfair floor by switching family rather than shrinking the serif. */
@media (max-width: 380px) {
  .t-h2, .t-h3 { font-family: var(--font-body); font-weight: var(--weight-semibold);
                 letter-spacing: 0; }
}

/* ---- Body text ----------------------------------------------------------- */
p { margin: 0; max-width: var(--measure-prose); }
p + p { margin-top: var(--space-sm); }

.lead {
  font-size: var(--size-body-lg); line-height: var(--lh-body-lg);
  color: var(--color-muted); max-width: var(--measure-lead);
}
.t-body-sm { font-size: var(--size-body-sm); line-height: var(--lh-body-sm); max-width: 600px; }
.t-caption { font-size: var(--size-caption); line-height: var(--lh-caption);
             color: var(--color-muted); max-width: 560px; }
.t-muted   { color: var(--color-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--size-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* The alias, not the swatch. §2.11 corrects muted text on a tinted ground by
     overriding `--color-muted` on that container; an eyebrow that names
     `stone-aa` directly opts itself out of that correction and measured
     4.07:1 on the Wheat panels. */
  color: var(--color-muted);
  margin: 0 0 var(--space-xs);
  display: block;
}

/* Every number is set with tabular figures (§3.1). */
.num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

strong, b { font-weight: var(--weight-semibold); }

/* ---- Links --------------------------------------------------------------- */
a { color: var(--color-action-deep); text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}

/* ---- Lists --------------------------------------------------------------- */
ul, ol { margin: 0; padding: 0; }
.prose-list { list-style: none; max-width: var(--measure-prose); }
.prose-list li { position: relative; padding-left: var(--space-md); }
.prose-list li + li { margin-top: var(--space-xs); }
.prose-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: var(--color-taupe);
}

/* ---- Focus --------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute; left: var(--space-md); top: -100px; z-index: 100;
  background: var(--color-surface); color: var(--color-text);
  display: inline-flex; align-items: center;
  min-height: var(--min-tap-target);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body-sm); line-height: var(--lh-body-sm);
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible { top: var(--space-xs); }

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

/* ---- Layout primitives --------------------------------------------------- */
.wrap {
  width: 100%; max-width: calc(var(--max-width) + var(--page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
/* A narrow section keeps the page's left gutter and narrows its content.
   It does not move to the middle — §14: "Every section begins at the same
   left gutter; a prose block narrows its measure, it does not move." */
.wrap--narrow > * { max-width: var(--max-width-narrow); }

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--space-2xl); }

/* A full-bleed tinted panel still puts its content in the 1120 wrap (§14).

   Wheat, not Linen. Linen sits at 1.11:1 against Cream, so nine alternating
   sections read as one undifferentiated field — the page had no visible
   structure down its length. Wheat is 1.22:1: still quiet, but the bands can
   actually be seen. Two grounds either way, so §12's "never three grounds on
   one page" still holds. Muted text steps to Bark on this ground (§2.11). */
.panel { background: var(--color-wheat); }
.panel--wheat { background: var(--color-wheat); }
.panel--accent { background: var(--color-accent-tint); }

/* Section head: eyebrow → H2 → lead → 40px → content (§12). */
.section-head { margin-bottom: var(--space-xl); }
.section-head .lead { margin-top: var(--space-sm); }

/* Heading rhythm — space above is twice the space below (§4.4). */
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-sm > * + * { margin-top: var(--space-sm); }

.prose { max-width: var(--measure-prose); }
.prose h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-lg); }
.prose h3 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.prose h4 { margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.prose > *:first-child { margin-top: 0; }
.prose p + ul, .prose p + ol { margin-top: var(--space-sm); }
.prose ul + p, .prose ol + p { margin-top: var(--space-sm); }

/* Asymmetric split — 7/5 or 5/7, never halves (§14). */
.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 7fr 5fr; gap: var(--space-2xl); }
  .split--narrow-first { grid-template-columns: 5fr 7fr; }
  /* Image-dominant split: the reference board gives the product shot about
     two thirds and the prose about one third. Still asymmetric, never a
     half, and the text column stays well inside the 640px measure. */
  .split--8-4 { grid-template-columns: 8fr 4fr; }
  .split--top { align-items: start; }
  /* A split with only one child still uses the 7-column measure rather than
     stretching its text across the full 1120. */
  .split--solo { grid-template-columns: 7fr 5fr; }
  /* Reverse visual order without changing DOM order, so the reading order
     stays correct for screen readers and keyboards. */
  .split--flip > :first-child { order: 2; }
  .split--flip > :last-child  { order: 1; }
}

.grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 761px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .grid--3 { grid-template-columns: repeat(2, 1fr); }
                             .grid { gap: var(--grid-gap); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Utilities ----------------------------------------------------------- */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* A line break that only applies once there is room for the rag it creates.
   Used in display headings, never in body copy. */
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }