/* 04 · Marble — token skin. Pair with ../base.css */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,72,300;0,72,400;1,72,300&family=Work+Sans:wght@400;500&display=swap');

:root {
  /* color — one bronze, and air */
  --bg: #F6F4F1;
  --bg-alt: #EFECE7;
  --bg-dark: #23241F;
  --surface: #FFFFFF;
  --ink: #1F1D1A;
  --ink-inverse: #F1EEE9;
  --text-body: #1F1D1A;
  --muted: #78736C;
  --accent: #9C7A5B;              /* bronze — the only color */
  --accent-hover: #82644A;
  --accent-tint: #EDE5DC;
  --accent-2: #9C7A5B;            /* single-accent system */
  --line: #D9D4CC;

  /* type — oversized and light; this is the brand */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-utility: 'Work Sans', system-ui, sans-serif;
  --display-weight: 300;
  --fs-h1: clamp(3rem, 7vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --lh-body: 1.75;
  --fs-eyebrow: 0.75rem;
  --eyebrow-tracking: 0.18em;
  --eyebrow-weight: 500;
  --eyebrow-color: var(--muted);

  /* shape & depth — none of either; hairlines, scale, and whitespace do the work */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-btn: 0;
  --shadow: none;
  --space-section: clamp(5rem, 10vw, 8.5rem);   /* declared override: more air than any other system */
  --speed: 500ms;
  --btn-case: uppercase;
  --btn-tracking: 0.08em;
  --btn-size: 0.8125rem;
  --btn-pad: 1rem 2.25rem;
}

h1 { line-height: 1.05; letter-spacing: -0.01em; }

/* Bronze is reserved for markers and links; primary buttons are ink */
.btn-primary { background: var(--ink); color: var(--ink-inverse); }
.btn-primary:hover { background: #000000; }
.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-ghost {
  color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem;
  box-shadow: inset 0 -1px 0 transparent;
}
.btn-ghost:hover { box-shadow: inset 0 -1px 0 var(--ink); color: var(--ink); }

/* Signature: the editorial index */
.index-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr auto;
  gap: 2rem; align-items: baseline;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}
.index-row:last-child { border-bottom: 1px solid var(--line); }
.index-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--accent);
  line-height: 1;
}

/* Typeset forms: underline-only inputs */
.field :is(input, textarea, select) {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding-inline: 0;
}
.field :is(input, textarea, select):focus { border-color: var(--ink); box-shadow: none; }

/* Pull-quotes */
blockquote {
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--line);
  padding-block: 2.5rem;
}

/* Cards are rare here; when used, hairline only */
.card { box-shadow: none; padding: 2rem; }

/* No icons anywhere — enforced by the doc, not the stylesheet */