:root { --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); }
html { scroll-behavior: smooth; }
body { background: #FBF7EF; color: #1A1612; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; z-index: 0; }

.hero-gradient {
  background:
    radial-gradient(60% 50% at 82% 18%, rgba(234,175,20,0.32) 0%, rgba(234,175,20,0) 60%),
    radial-gradient(45% 40% at 12% 88%, rgba(22,35,63,0.14) 0%, rgba(22,35,63,0) 65%),
    radial-gradient(80% 60% at 50% 100%, rgba(232,91,44,0.08) 0%, rgba(232,91,44,0) 70%),
    linear-gradient(180deg, #FBF7EF 0%, #F5EFE1 100%);
}
.section-accent {
  background:
    radial-gradient(50% 40% at 90% 10%, rgba(234,175,20,0.14) 0%, rgba(234,175,20,0) 65%),
    #FBF7EF;
}
.band-ink {
  background:
    radial-gradient(50% 70% at 85% 30%, rgba(234,175,20,0.18) 0%, rgba(234,175,20,0) 60%),
    radial-gradient(40% 60% at 10% 80%, rgba(232,91,44,0.10) 0%, rgba(232,91,44,0) 65%),
    linear-gradient(180deg, #16233F 0%, #0F1A30 100%);
}

.fraunces-italic { font-family: 'Fraunces', serif; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.display { font-family: 'Fraunces', serif; letter-spacing: -0.035em; font-variation-settings: "SOFT" 50, "WONK" 0; }

.btn-primary {
  background: linear-gradient(180deg, #EAAF14 0%, #D99806 100%);
  color: #3E2A02;
  transition: transform 260ms var(--ease-spring), box-shadow 260ms var(--ease-out-soft), filter 180ms var(--ease-out-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px -6px rgba(138,92,5,0.40), 0 14px 32px -14px rgba(217,152,6,0.55);
}
.btn-primary:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 24px -6px rgba(138,92,5,0.50), 0 22px 48px -16px rgba(217,152,6,0.65); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid #3E2A02; outline-offset: 3px; }

.btn-ghost {
  transition: transform 260ms var(--ease-spring), background-color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(26,22,18,0.04); border-color: #1A1612; }
.btn-ghost:active { transform: translateY(0); }
.btn-ghost:focus-visible { outline: 2px solid #1A1612; outline-offset: 3px; }

.nav-link { position: relative; transition: color 200ms var(--ease-out-soft); }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: #D99806; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-spring);
}
.nav-link:hover { color: #1A1612; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:focus-visible { outline: 2px solid #D99806; outline-offset: 4px; border-radius: 2px; }

.card {
  background: #FFFFFF;
  border: 1px solid rgba(26,22,18,0.06);
  border-radius: 20px;
  transition: transform 340ms var(--ease-spring), box-shadow 340ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -12px rgba(62,42,2,0.20), 0 30px 70px -30px rgba(217,152,6,0.40); border-color: rgba(217,152,6,0.28); }
.card-link { display:block; color:inherit; text-decoration:none; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible .card { outline: 2px solid #D99806; outline-offset: 3px; box-shadow: 0 10px 30px -12px rgba(62,42,2,0.25), 0 30px 70px -30px rgba(217,152,6,0.45); }
.card-link:hover .card-arrow { transform: translateX(3px); }
.card-arrow { transition: transform 260ms var(--ease-spring); }

.ribbon-dot { background: radial-gradient(circle at 30% 30%, #F5C73E 0%, #D99806 60%, #8A5C05 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 6px rgba(138,92,5,0.35); }

.stat-num { font-variant-numeric: tabular-nums; font-family: 'Fraunces', serif; }

.hero-logo-plate {
  background:
    radial-gradient(65% 55% at 50% 40%, rgba(255,255,255,0.9) 0%, rgba(251,247,239,0) 72%),
    radial-gradient(80% 60% at 50% 60%, rgba(234,175,20,0.15) 0%, rgba(234,175,20,0) 70%);
}

.img-treat::after {
  content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(26,22,18,0) 38%, rgba(26,22,18,0.62) 100%); pointer-events:none;
}
.img-tone { mix-blend-mode: multiply; }

/* Article / detail page */
.prose-rfc { font-size: 17px; line-height: 1.8; color: #3B342B; max-width: 72ch; }
.prose-rfc > * + * { margin-top: 1.3em; }
.prose-rfc p strong { color: #1A1612; font-weight: 600; }
.prose-rfc h2 { font-family: 'Fraunces', serif; font-size: 28px; letter-spacing: -0.025em; color: #1A1612; margin-top: 2em; line-height: 1.2; }
.prose-rfc h3 { font-family: 'Fraunces', serif; font-size: 22px; letter-spacing: -0.02em; color: #1A1612; margin-top: 1.8em; line-height: 1.25; }
.prose-rfc ul { list-style: none; padding-left: 0; }
.prose-rfc ul li { position: relative; padding-left: 1.6em; }
.prose-rfc ul li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 999px; background: #D99806; }
.prose-rfc blockquote { border-left: 3px solid #D99806; padding: 0.2em 0 0.2em 1.1em; font-family: 'Fraunces', serif; font-style: italic; color: #1A1612; font-size: 20px; }
.prose-rfc a { color: #B37B05; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 200ms var(--ease-out-soft); }
.prose-rfc a:hover { color: #8A5C05; }

.gallery-img { transition: transform 400ms var(--ease-out-soft); }
.gallery-tile:hover .gallery-img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}