:root {
  --blue: #CFDDE6; --blue-deep: #9DB7CC; --gold: #C2A46A; --gold-soft: #EADBB5; --olive: #6B6D3A; --olive-dark: #55572D;
  --peony: #EE8FB0; --peony-deep: #C9567F; --blush: #F8DCE5; --mint: #BFE3D2; --mint-deep: #5E9C82; --navy: #24335A; --navy-soft: #5A6585; --white: #FFFFFF;
  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 3.052rem; --step-5: 4.768rem;
  --shadow: 0 1px 0 rgba(36, 51, 90, 0.06), 0 10px 28px -14px rgba(36, 51, 90, 0.35);
  --radius-box: 14px; --radius-row: 8px;
}
* { box-sizing: border-box; }
html { color: var(--navy); font: 400 var(--step-0)/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--blue) url('/static/img/stars.svg') repeat; background-size: 320px; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: 0.005em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 0.75rem; max-width: 70ch; }
a { color: var(--olive); text-underline-offset: 3px; }
a:hover { color: var(--olive-dark); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--navy-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }
main:focus { outline: none; }

#glitter { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

.ribbon {
  position: sticky; top: 0; z-index: 40;
  background: var(--olive) image-set(url('/static/img/artichokes-800.webp') 1x, url('/static/img/artichokes-1600.webp') 2x) center / 900px auto;
  box-shadow: inset 0 -3px 0 var(--gold), 0 6px 18px -10px rgba(36, 51, 90, 0.5);
}
.ribbon::before { content: ''; position: absolute; inset: 0; background: rgba(85, 87, 45, 0.74); }
.tabs { position: relative; display: flex; gap: 0.25rem; max-width: 1120px; margin: 0 auto; padding: 0.6rem 1rem 0.75rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { color: var(--white); text-decoration: none; padding: 0.45rem 0.95rem; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: var(--step--1); letter-spacing: 0.01em; }
.tabs a:hover { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.tabs a[aria-current] { background: var(--white); color: var(--olive-dark); box-shadow: 0 0 0 2px var(--gold); }

.glitter-toggle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--white); color: var(--navy); font-size: 1.25rem; cursor: pointer; box-shadow: var(--shadow);
}
.glitter-toggle[aria-pressed='false'] { opacity: 0.6; }

.toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 80; display: grid; gap: 0.5rem; width: min(92vw, 460px); }
.toast { background: var(--navy); color: var(--white); padding: 0.7rem 1rem; border-radius: var(--radius-row); box-shadow: var(--shadow); font-weight: 600; }
.toast-error { background: var(--white); color: var(--navy); border-left: 5px solid var(--peony-deep); }

@media (max-width: 640px) {
  :root { --step-4: 2.441rem; --step-5: 3.6rem; }
  main { padding: 1rem 0.75rem 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}