/* ──────────────────────────────────────────────────────────
   OpenShed brand tokens — editorial / warm direction
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Color ── warm paper palette */
  --bg:        #f3eee5;
  --paper:     #f3eee5;
  --card:      #fbf8f2;
  --paper-2:   #ece5d6;
  --ink:       #1a1612;
  --ink-soft:  #5c5247;
  --ink-2:     #5c5247;
  --ink-3:     #8a7e6d;
  --line:      #d9cfbd;
  --rule:      #d9cfbd;
  --accent:    #b8422d;        /* warm terracotta */
  --accent-ink: #97341f;

  /* ── Type families ── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Scale ── */
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 16px; --fs-md: 18px;
  --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 40px; --fs-3xl: 56px;
  --fs-4xl: 80px; --fs-5xl: 108px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-1: 2px; --r-2: 4px; --r-card: 14px; --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type utilities ── */
.t-display {
  font-family: var(--font-display);
  font-weight: 360;
  font-variation-settings: "SOFT" 40, "opsz" 144;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.t-display em {
  font-style: italic; font-weight: 320; color: var(--accent);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.t-serif-italic {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 100, "opsz" 72;
}
.t-mono { font-family: var(--font-mono); font-weight: 400; }
.t-label {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}

/* ── Logo — slash wordmark on Fraunces ── */
.os-logo {
  font-family: var(--font-display);
  font-size: 1em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0.06em;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variation-settings: "SOFT" 30, "opsz" 48;
  color: var(--ink);
  white-space: nowrap;
}
.os-logo > span:first-child { font-weight: 400; }
.os-logo > span:last-child {
  font-weight: 400; font-style: italic; color: var(--accent);
  font-variation-settings: "SOFT" 100, "opsz" 48;
}
.os-logo em {
  font-style: normal; font-weight: 300; color: var(--accent);
  padding: 0 0.04em;
}
.os-logo.on-dark           { color: var(--bg); }
.os-logo.on-dark em,
.os-logo.on-dark > span:last-child { color: var(--accent); }

/* ── Buttons ── */
.btn {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; line-height: 1; white-space: nowrap; flex-shrink: 0;
}
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-accent { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn .arrow { display: inline-block; transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translate(2px, -2px); }

/* ── Rules / section tag ── */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.section-tag::before { content: ''; width: 18px; height: 1px; background: var(--accent); }

/* ── Paper grain — apply to body::before on pages ── */
.grain::before {
  content: ""; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5; pointer-events: none; mix-blend-mode: multiply; z-index: 1;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}