/* Base typography & layout primitives */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(166, 139, 91, 0.06) 0, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(15, 53, 98, 0.04) 0, transparent 40%);
  background-attachment: fixed;
}

h1, h2, h3, h4, .serif { font-family: var(--font-serif); font-weight: 500; }
h1 { font-size: var(--fs-3xl); letter-spacing: 0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: 0.02em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

a { color: var(--link); transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link-hover); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-section); }

.eyebrow {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--kincha);
  display: inline-block;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--kincha);
}

.section-title {
  font-size: var(--fs-2xl);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 40em;
}

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; }

/* Scroll reveal (progressive enhancement: visible by default, JS hides then animates in) */
.reveal { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-hidden { opacity: 0; transform: translateY(12px); }