/* ============================================================
   base.css - reset, paper grain, typographic scale, focus,
   reduced motion, shared primitives. Mobile first at 390px.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  /* Double tap to zoom is a separate gesture from the pinch, and the
     viewport meta does not cover it. "manipulation" keeps scrolling and
     tapping and drops the double tap zoom with them. */
  touch-action: manipulation;

  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Faint tooth over the whole sheet. Clean cream, no fold lines,
   no stains; the grain is the only texture. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: var(--grain);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--denim);
}

/* The three CTA instances override link color themselves. */

::selection {
  background: var(--sawdust);
  color: #1C1915;
}

:focus-visible {
  outline: 3px solid var(--denim);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

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

/* ---------- Type scale (art direction section 3) ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}

h1 {
  font-size: clamp(1.875rem, 8vw, 3rem);
  line-height: 1.08;
}

h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bark);
}

.pull {
  font-size: 20px;
  font-style: italic;
  line-height: 1.4;
}

.meta {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}

@media (min-width: 900px) {
  body { font-size: 18px; }
  h2 { font-size: 32px; }
  .pull { font-size: 24px; }
}

/* ---------- Section scaffolding ---------- */

.section {
  padding: 64px 20px 0;
}

.section__inner {
  max-width: 680px;
  margin: 0 auto;
}

/* Hairline rule + kicker opens every section, like column rules
   in a printed page. */
.rulehead {
  border-top: 1px solid var(--bark);
  padding-top: 14px;
  margin-bottom: 20px;
}

.rulehead .kicker {
  display: block;
}

@media (min-width: 900px) {
  .section { padding-top: 96px; }
}

/* Thick sawdust underline ornament for headline emphasis. */
.uline {
  background-image: linear-gradient(var(--sawdust), var(--sawdust));
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 92%;
}

/* ---------- Motion doctrine: paper does not animate ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Print base ---------- */

@media print {
  body::after { display: none; }
  .callbar,
  .masthead { display: none !important; }
}