/*
  The Unheld Question — base styles
  Resets, type primitives, and layout primitives (bands, sections, grid).
  Load tokens.css before this file.
*/

/* ---- Reset -------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
}

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

/* Square corners, always. No radius on anything, ever. */
* { border-radius: var(--radius) !important; }

/* ---- Links ---------------------------------------------------------- */

a {
  color: var(--color-brass);
  text-decoration: none;
}
a:hover { color: var(--color-brass-hover); }
.on-ink a, [data-ground="ink"] a { color: var(--color-brass-on-ink); }
.on-ink a:hover, [data-ground="ink"] a:hover { color: #E0C481; }

/* Links sitting inside running text need a non-colour signal too
   (WCAG 1.4.1) — brass on paper doesn't have 3:1 against the body
   colour. Standalone links (nav, buttons, tiles, back-links) carry
   their own shape and are left alone. */
.body a, p a, .lede a, .dot-list li a, .list-row__desc a, .footer__links a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- Focus --------------------------------------------------------- */
/* One visible keyboard-focus indicator for everything interactive.
   `:focus-visible` so it shows for keyboard/AT users without ringing
   on every mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}
.band--ink :focus-visible,
.cta-band :focus-visible,
.ink-band :focus-visible,
.on-ink :focus-visible,
[data-ground="ink"] :focus-visible {
  outline-color: var(--color-paper);
}
/* The skip link and the <main> it targets shouldn't paint a ring
   around the whole content column when focus lands there. */
#main:focus { outline: none; }

/* Visually hidden, but still read by assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Skip link ---------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 8px; color: var(--color-paper); }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---- Type primitives ------------------------------------------------ */
/* Three faces, three strict jobs. Never let them trade places. */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-brass);
  margin: 0;
}
.on-ink .eyebrow, [data-ground="ink"] .eyebrow { color: var(--color-brass-on-ink); }

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow--rule::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  color: var(--color-brass);
  background: var(--color-brass);
}

.h-hero, .h-section, .h-subsection, .h-title, .h-item {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}
.h-hero {
  font-size: var(--text-hero-size);
  line-height: var(--text-hero-lh);
  letter-spacing: var(--tracking-headline);
}
.h-section {
  font-size: var(--text-section-size);
  line-height: var(--text-section-lh);
  letter-spacing: var(--tracking-headline);
}
.h-subsection {
  font-size: var(--text-subsection-size);
  line-height: var(--text-subsection-lh);
  letter-spacing: var(--tracking-title);
}
.h-title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: var(--tracking-title);
}
.h-item {
  font-size: var(--text-item-size);
  line-height: var(--text-item-lh);
}
.h-quote { font-style: italic; }

.body, p {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--color-body);
  max-width: var(--measure);
  margin: 0 0 1em;
}
.on-ink .body, .on-ink p, [data-ground="ink"] .body, [data-ground="ink"] p {
  color: var(--color-body-on-ink);
}

.body-dense {
  font-family: var(--font-sans);
  font-size: var(--text-body-dense-size);
  line-height: var(--text-body-dense-lh);
  color: var(--color-body);
}

.label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
}
.on-ink .label, [data-ground="ink"] .label { color: var(--color-ui-on-ink); }

.numeral {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-brass);
}
.on-ink .numeral, [data-ground="ink"] .numeral { color: var(--color-brass-on-ink); }

strong { font-weight: 600; color: var(--color-ink); }
.on-ink strong, [data-ground="ink"] strong { color: var(--color-paper); }

/* A safe global default for bare h1–h3 (and the .caslon escape hatch
   for a non-heading element that needs the same face) — every
   headline is Caslon, per the guide. Pages that use the classed
   headline primitives above (.h-hero etc.) already set their own
   font-family/size explicitly, so this never overrides them; it only
   fills in for markup — like the guided-wizard tools — that reaches
   for a plain <h1>/<h2>/<h3>. */
h1, h2, h3, .caslon { font-family: var(--font-serif); font-weight: 400; color: var(--color-ink); margin: 0; }
/* A directly-targeted rule (even a bare tag selector, like the one
   above) always beats a merely-inherited color — so any h1/h2/h3 on
   an ink ground needs its own explicit override, or it renders
   ink-on-ink. Covers .band--ink/.cta-band (headlines using the
   .h-hero/.h-section/etc primitives, which don't set their own
   color) and .ink-band (the wizard-tool summary, whose own h2 rule
   already wins on specificity alone — restated here for safety). */
.band--ink h1, .band--ink h2, .band--ink h3,
.cta-band h1, .cta-band h2, .cta-band h3,
.ink-band h1, .ink-band h2, .ink-band h3 { color: var(--color-paper); }

/* A plain list with a small brass square instead of a bullet —
   "what you need" / "what to check" style intros. */
.dot-list { list-style: none; margin: 0; padding: 0; }
.dot-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--color-brass);
}

/* ---- Layout: bands, not boxes -------------------------------------- */
/* Structure comes from full-width horizontal bands. Never more than
   one ink band per screen or spread. */

.band {
  padding: var(--band-spacing) var(--gutter);
}
.band--paper   { background: var(--color-paper);        color: var(--color-ink); }
.band--shaded  { background: var(--color-paper-shaded); color: var(--color-ink); }
.band--ink     { background: var(--color-ink);           color: var(--color-paper); }

/* A `.band--ink` also behaves as `.on-ink` for its descendants
   (links, eyebrows, body text, hairlines, labels, strong) without an
   extra class — see the `.on-ink …` rules above and below. */
.band--ink a { color: var(--color-brass-on-ink); }
.band--ink a:hover { color: #E0C481; }
.band--ink .eyebrow { color: var(--color-brass-on-ink); }
.band--ink .body, .band--ink p { color: var(--color-body-on-ink); }
.band--ink .label { color: var(--color-ui-on-ink); }
.band--ink .numeral { color: var(--color-brass-on-ink); }
.band--ink strong { color: var(--color-paper); }
.band--ink .hairline { border-color: var(--color-rule-on-ink); }
.band--ink .section-header { border-bottom-color: var(--color-rule-on-ink); }
.band--ink .section-header__number { color: var(--color-brass-on-ink); }

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.hairline-top {
  border-top: var(--rule-width) solid var(--color-ink);
}
.hairline {
  border-bottom: var(--rule-width) solid var(--color-rule);
}
.on-ink .hairline, [data-ground="ink"] .hairline { border-color: var(--color-rule-on-ink); }

/* Number the sections: every major block carries a mono eyebrow like
   "SECTION 02 · THE PRACTICE LIBRARY", set against a hairline. */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--rule-width) solid var(--color-ink);
  padding-bottom: 16px;
  margin-bottom: 44px;
  gap: 24px;
}
.on-ink .section-header, [data-ground="ink"] .section-header {
  border-bottom-color: var(--color-rule-on-ink);
}
.section-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: var(--tracking-title);
  margin: 0;
}
.section-header__number {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-brass);
  white-space: nowrap;
}
.on-ink .section-header__number, [data-ground="ink"] .section-header__number {
  color: var(--color-brass-on-ink);
}

/* Two columns beat three: asymmetric splits, real gutters. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.split--wide-left  { grid-template-columns: 1.15fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.15fr; }
.split--label      { grid-template-columns: 320px 1fr; }
@media (max-width: 720px) {
  .split, .split--wide-left, .split--wide-right, .split--label {
    grid-template-columns: 1fr;
  }
}

.stack { display: flex; flex-direction: column; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 14px; }
.gap-md { gap: 22px; }
.gap-lg { gap: 34px; }

/* Photography: full-bleed to the edge of its column, square-cornered,
   never a floating rounded thumbnail. Use as a stand-in until a real
   photo is dropped in. */
.photo-placeholder {
  background: repeating-linear-gradient(135deg, #E6E3D7 0 9px, #EFEDE4 9px 18px);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  min-height: 320px;
}
.photo-placeholder__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #857E6C;
  background: var(--color-paper);
  padding: 6px 9px;
}

/* A real photo dropped into a fixed-size column — same square-cornered,
   full-bleed rule as .photo-placeholder above, but for an actual <img>
   rather than a stand-in. The image is cropped (never distorted) to
   fill whatever box its container gives it, so any source photo works
   regardless of its own aspect ratio. */
.photo-frame { overflow: hidden; }
.photo-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}