@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap");

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #FAFAF7; color: #4A4A4F; min-height: 100vh; }
h1, h2, h3, h4 { font-family: 'Fraunces', serif; color: #0B0B0C; font-feature-settings: "ss01"; }
p { color: #4A4A4F; }
::selection { background: rgba(147, 51, 234, 0.2); color: #0B0B0C; }
*:focus-visible { outline: 2px solid #9333EA; outline-offset: 2px; border-radius: 4px; }

.eyebrow { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #9333EA; display: inline-block; }
.mono { font-family: 'JetBrains Mono', monospace; }

.link-underline { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; color: #0B0B0C; font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: color 150ms ease, background-size 250ms ease; }
.link-underline:hover { color: #9333EA; background-size: 100% 2px; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); color: #9333EA; }
.chev { transition: transform 250ms ease; display: inline-block; }

/* Paper noise for postcard flat-lays */
.paper-noise::before {
  content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* Gradient brand wash for rare editorial moments (sparingly) */
.brand-gradient-text {
  background: linear-gradient(90deg, #581C87 0%, #9333EA 50%, #DB2777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Legal prose */
.prose-legal h2 { font-family: 'Fraunces', serif; font-size: 2rem; line-height: 1.25; letter-spacing: -0.01em; color: #0B0B0C; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose-legal h2:first-child { margin-top: 0; }
.prose-legal h3 { font-family: 'Fraunces', serif; font-size: 1.375rem; line-height: 1.35; color: #0B0B0C; margin-top: 2rem; margin-bottom: 0.5rem; }
.prose-legal p { font-size: 1rem; line-height: 1.65; color: #4A4A4F; margin-bottom: 1rem; max-width: 65ch; }
.prose-legal ul, .prose-legal ol { font-size: 1rem; line-height: 1.65; color: #4A4A4F; margin-bottom: 1rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 65ch; }
.prose-legal ul { list-style: disc; }
.prose-legal ol { list-style: decimal; }
.prose-legal a { color: #9333EA; text-decoration: underline; text-underline-offset: 4px; }
.prose-legal a:hover { color: #581C87; }
.prose-legal strong { color: #0B0B0C; font-weight: 500; }