/* ============================================================
   sundai.us — Quiet Authority (personal edition)
   Same family as okeke.us. Burnt sienna accent.
   Paper-grain background marks the personal/creative side.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Same ink + paper as okeke.us — visual continuity */
  --color-ink:        #0E0E0C;
  --color-ink-soft:   #2A2A26;
  --color-mute:       #6B6A63;
  --color-mute-soft:  #ABA89D;
  --color-paper:      #FAF8F2;
  --color-paper-edge: #F1EEE4;
  --color-rule:       #E5E1D3;

  /* DIFFERENT accent: burnt sienna instead of amber.
     Reads as the creative/personal side of the same author. */
  --color-accent:     #B5462A;
  --color-accent-ink: #6C2710;

  --color-success:    #4C6B3A;
  --color-error:      #A33A2A;

  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-flat:  0;
  --tracking-wide:  0.08em;
  --tracking-edge:  0.18em;

  --type-eyebrow: 0.6875rem;
  --type-meta:    0.8125rem;
  --type-body:    1rem;
  --type-lead:    1.1875rem;
  --type-h3:      1.5rem;
  --type-h2:      clamp(2rem, 4vw, 3rem);
  --type-h1:      clamp(2.75rem, 7vw, 5rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  --r-tight: 2px;
  --r-soft:  4px;
  --r-pill:  999px;

  --rule-hair: 0.5px;
  --rule-thin: 1px;
}

/* Paper-grain texture: very faint dotted SVG noise applied to body.
   This is the signature spatial move for sundai — same bones as okeke,
   but the surface feels touched. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(14,14,12,0.035) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(14,14,12,0.025) 1px, transparent 0);
  background-size: 18px 18px, 7px 7px;
  background-position: 0 0, 3px 3px;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rail {
  max-width: 1280px;
  margin: 0 auto;
  /* Fluid horizontal padding — at least 2rem on phones, scales with viewport
     so mid-widths breathe, caps at 4.5rem on very wide screens. */
  padding-inline: clamp(2rem, 7vw, 4.5rem);
  position: relative;
}
html, body { overflow-x: clip; }

/* Same edge-stack as okeke.us — author signature */
.edge-stack {
  position: absolute;
  left: var(--s-4); top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-edge);
  color: var(--color-mute-soft);
  text-transform: uppercase;
}
@media (max-width: 899px) { .edge-stack { display: none; } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-edge);
  color: var(--color-accent-ink);
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--color-accent);
}

.display {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.display em {
  font-style: normal;
  color: var(--color-accent);
  font-weight: 700;
}
.lead {
  font-size: var(--type-lead);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-tight);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.btn-primary:hover { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.btn-ghost:hover { border-color: var(--color-ink); }
.btn svg { width: 16px; height: 16px; }

.icon {
  width: 22px; height: 22px;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.rule { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 0; }