/* ============================================================================
   Tafel · base.css — reset, typography, layout primitives, utilities.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-15);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  touch-action: manipulation;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
svg { fill: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
::selection { background: var(--saffron-soft); color: var(--ink); }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -999px; top: var(--s-2); z-index: var(--z-toast); padding: var(--s-2) var(--s-4); background: var(--chrome); color: var(--chrome-ink); border-radius: var(--r-sm); }
.skip-link:focus { left: var(--s-2); }

/* --- typography ---------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--t-28); }
h2 { font-size: var(--t-22); }
h3 { font-size: var(--t-18); }
h4 { font-size: var(--t-15); }
p { text-wrap: pretty; }
.display, .d { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: var(--lh-tight); font-variation-settings: 'opsz' 96, 'SOFT' 60; }
.d-xl { font-size: var(--d-xl); } .d-lg { font-size: var(--d-lg); } .d-md { font-size: var(--d-md); } .d-sm { font-size: var(--d-sm); }
.d-i { font-style: italic; font-weight: 400; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.num, .money { font-variant-numeric: tabular-nums; }
.money { font-weight: 600; }
.muted { color: var(--ink-3); }
.sub { color: var(--ink-2); }
.faint { color: var(--ink-4); }
.kicker { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.eyebrow { font-size: var(--t-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--paprika-ink); }
.t-11 { font-size: var(--t-11); } .t-12 { font-size: var(--t-12); } .t-13 { font-size: var(--t-13); } .t-14 { font-size: var(--t-14); }
.t-15 { font-size: var(--t-15); } .t-16 { font-size: var(--t-16); } .t-18 { font-size: var(--t-18); } .t-20 { font-size: var(--t-20); }
.t-22 { font-size: var(--t-22); } .t-24 { font-size: var(--t-24); } .t-28 { font-size: var(--t-28); } .t-32 { font-size: var(--t-32); } .t-36 { font-size: var(--t-36); }
.w-400 { font-weight: 400; } .w-500 { font-weight: 500; } .w-600 { font-weight: 600; } .w-700 { font-weight: 700; }
.tc { text-align: center; } .tr { text-align: right; } .tl { text-align: left; }
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--s-4); }
.prose h2 { margin: var(--s-10) 0 var(--s-3); }
.prose h3 { margin: var(--s-6) 0 var(--s-2); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-1); }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.balance { text-wrap: balance; }

/* --- layout -------------------------------------------------------------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.start { align-items: flex-start; }
.baseline { align-items: baseline; }
.stretch { align-items: stretch; }
.g-1 { gap: var(--s-1); } .g-2 { gap: var(--s-2); } .g-3 { gap: var(--s-3); } .g-4 { gap: var(--s-4); } .g-5 { gap: var(--s-5); } .g-6 { gap: var(--s-6); } .g-8 { gap: var(--s-8); }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-5, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--s-4); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-8 > * + * { margin-top: var(--s-8); }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-10 { margin-top: var(--s-10); } .mt-12 { margin-top: var(--s-12); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.ml-auto { margin-left: auto; } .mx-auto { margin-left: auto; margin-right: auto; }
.p-3 { padding: var(--s-3); } .p-4 { padding: var(--s-4); } .p-5 { padding: var(--s-5); } .p-6 { padding: var(--s-6); } .p-8 { padding: var(--s-8); }
.px-4 { padding-left: var(--s-4); padding-right: var(--s-4); } .py-4 { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.w-full { width: 100%; } .h-full { height: 100%; }
.rel { position: relative; } .abs { position: absolute; }
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .hide-sm { display: none !important; } }
@media (min-width: 721px) { .show-sm { display: none !important; } }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
.pointer { cursor: pointer; }
.divider { border-top: 1px solid var(--line); }
.divider-dashed { border-top: 1px dashed var(--line-strong); }

/* --- colour utilities ------------------------------------------------------ */
.c-paprika { color: var(--paprika-ink); } .c-basil { color: var(--basil-ink); } .c-saffron { color: var(--saffron-ink); }
.c-plum { color: var(--plum-ink); } .c-info { color: var(--info-ink); } .c-danger { color: var(--danger-ink); } .c-ink { color: var(--ink); }
.bg-surface { background: var(--surface); } .bg-sunk { background: var(--surface-sunk); } .bg-2 { background: var(--surface-2); }
.bg-paprika { background: var(--paprika); color: var(--on-paprika); }
.bg-ink { background: var(--chrome); color: var(--chrome-ink); }
.bg-paprika-soft { background: var(--paprika-soft); } .bg-basil-soft { background: var(--basil-soft); } .bg-saffron-soft { background: var(--saffron-soft); }
.bg-plum-soft { background: var(--plum-soft); } .bg-info-soft { background: var(--info-soft); } .bg-danger-soft { background: var(--danger-soft); }

/* --- grain texture (hero and empty states only) --------------------------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- reveal -------------------------------------------------------------- */
.rv { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv.pre { opacity: 0; transform: translateY(14px); }
.rv.in { opacity: 1; transform: none; }
.stagger > * { animation: tf-in .5s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: 50ms; } .stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; } .stagger > *:nth-child(5) { animation-delay: 200ms; } .stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; } .stagger > *:nth-child(8) { animation-delay: 350ms; } .stagger > *:nth-child(n+9) { animation-delay: 400ms; }
@keyframes tf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tf-ring { 0% { box-shadow: 0 0 0 0 var(--paprika-line); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes tf-spin { to { transform: rotate(360deg); } }
@keyframes tf-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tf-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }