@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=DM+Sans:wght@300;400;500&display=swap');

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

/* ── DESIGN TOKENS ── */
:root {
  /* Light */
  --paper:         #f5f2ed;
  --paper-warm:    #edeae3;
  --ink:           #1a1a18;
  --ink-mid:       #4a4a46;
  --ink-light:     #a0998e;
  --ink-faint:     #d4d0c8;
  --rule:          #ddd9d0;

  /* Dark */
  --dark-bg:       #0e0e0c;
  --dark-ink:      #f0ece4;
  --dark-ink-mid:  #a0998e;
  --dark-ink-muted:#6a6a64;
  --dark-ink-faint:#3a3a36;
  --dark-rule:     #1e1e1a;
}

/* ── BASE ── */
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
}

/* ── WORDMARK ── */
.wordmark-light {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow:
    5px 3px 0px rgba(0, 0, 0, 0.055),
    10px 6px 0px rgba(0, 0, 0, 0.03),
    15px 10px 0px rgba(0, 0, 0, 0.016),
    20px 13px 0px rgba(0, 0, 0, 0.008);
}

.wordmark-dark {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--dark-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow:
    5px 3px 0px rgba(255, 255, 255, 0.11),
    10px 6px 0px rgba(255, 255, 255, 0.062),
    15px 10px 0px rgba(255, 255, 255, 0.032),
    20px 13px 0px rgba(255, 255, 255, 0.015);
}

/* ── TAGLINE ── */
.tagline-light {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.tagline-dark {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-ink-mid);
}

/* ── PAGE HEADER ── */
.page-header {
  padding: 40px 64px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.brand-link {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  text-shadow:
    3px 2px 0px rgba(0, 0, 0, 0.05),
    6px 4px 0px rgba(0, 0, 0, 0.025);
}

.page-title {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-light);
}

/* ── SECTION ── */
.section {
  padding: 80px 64px;
  border-bottom: 1px solid var(--rule);
}

.section-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}