/* ============================================================
   BASE — Reset, custom properties, typography
   ============================================================ */

@import url("https://use.typekit.net/rps5iyg.css");

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

:root {
  /* Colors */
  --accent:          #ed6f4a;
  --accent-hover:    #d95f3b;
  --bg:              #ffffff;
  --bg-subtle:       #f9f7f5;
  --text:            #111111;
  --text-muted:      #6b6b6b;
  --text-faint:      #999999;
  --border:          #e8e4df;
  --border-light:    #f0ece8;
  --tag-bg:          #f2ede9;
  --tag-text:        #444444;

  /* Typography */
  --font:            "trade-gothic-next", "Trade Gothic Next", Arial, sans-serif;
  --font-serif:      "adobe-garamond-pro", "Adobe Garamond Pro", Georgia, serif;
  --font-display:    "clarendon-wide", "Clarendon Wide", Georgia, serif;
  --font-mono:       "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  --text-xs:         clamp(11px, 1vw, 12px);
  --text-sm:         clamp(12px, 1.2vw, 13px);
  --text-base:       clamp(14px, 1.4vw, 15px);
  --text-md:         clamp(15px, 1.6vw, 16px);
  --text-lg:         clamp(18px, 2vw, 20px);
  --text-xl:         clamp(22px, 3vw, 28px);
  --text-2xl:        clamp(28px, 4.5vw, 40px);
  --text-hero:       clamp(36px, 7vw, 72px);

  /* Spacing */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-16:        64px;
  --space-20:        80px;
  --space-24:        96px;

  /* Shape */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-pill:     9999px;

  /* Motion */
  --ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration:        160ms;

  /* Layout */
  --max-width:       860px;
  --nav-height:      60px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* Selection */
::selection {
  background: var(--accent);
  color: #fff;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}