:root {
  
  --color-surface: oklch(0.97 0.003 230);
  --color-surface-2: oklch(0.945 0.004 230);
  --color-card: oklch(1 0 0);
  --color-rule: oklch(0.91 0.004 230);
  --color-rule-2: oklch(0.86 0.005 230);

  --color-ink: oklch(0.20 0.012 240);
  --color-ink-2: oklch(0.36 0.01 240);
  --color-ink-3: oklch(0.52 0.008 240);
  --color-ink-4: oklch(0.68 0.005 240);

  --color-main-50: oklch(0.96 0.015 200);
  --color-main-100: oklch(0.92 0.04 200);
  --color-main-200: oklch(0.85 0.06 200);
  --color-main-400: oklch(0.65 0.09 200);
  --color-main-500: oklch(0.55 0.10 200);
  --color-main-600: oklch(0.45 0.10 200);
  --color-main-700: oklch(0.36 0.09 200);

  --color-open: oklch(0.58 0.10 145);
  --color-open-soft: oklch(0.93 0.03 145);
  --color-soon: oklch(0.70 0.12 75);
  --color-soon-soft: oklch(0.95 0.04 75);
  --color-closed: oklch(0.62 0.008 240);

  
  --color-bg: var(--color-surface);
  --color-fg: var(--color-ink);
  --color-muted: var(--color-ink-3);
  --color-primary: var(--color-main-500);
  --color-accent: var(--color-main-500);

  
  --font-sans: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  
  --shadow-card: 0 0 0 1px oklch(0.91 0.004 230);
  --shadow-pop: 0 1px 2px oklch(0.20 0.012 240 / 0.05), 0 4px 12px oklch(0.20 0.012 240 / 0.06), 0 0 0 1px oklch(0.91 0.004 230);
  --shadow-float: 0 8px 24px oklch(0.20 0.012 240 / 0.10), 0 0 0 1px oklch(0.91 0.004 230);
}


html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "tnum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-main-500); color: var(--color-card); }


.font-mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

.t-display { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; }
.t-h1 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 600; }
.t-h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
.t-h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.005em; font-weight: 600; }
.t-h4 { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }
.t-body { font-size: 15px; line-height: 1.5; }
.t-body-sm { font-size: 14px; line-height: 1.45; }
.t-caption { font-size: 13px; line-height: 1.4; color: var(--color-ink-3); }
.t-label { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--color-ink-3); letter-spacing: 0.01em; }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }


kbd {
  border: 1px solid var(--color-rule);
  padding: var(--space-4) var(--space-8);
  border-radius: 4px;
}


.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-rule);
  background: var(--color-card);
  color: var(--color-ink-2);
  line-height: 1;
  min-height: 36px;
  white-space: nowrap;
}
.pill-active {
  background: var(--color-ink);
  color: var(--color-card);
  border-color: var(--color-ink);
}
.pill-status-open {
  color: var(--color-open);
  background: var(--color-open-soft);
  border-color: transparent;
}
.pill-status-soon {
  color: oklch(0.40 0.10 75);
  background: var(--color-soon-soft);
  border-color: transparent;
}
.pill-status-closed {
  color: var(--color-ink-3);
  background: var(--color-surface-2);
  border-color: transparent;
}


select.pill {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234d525a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}


.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
.dot-open { background: var(--color-open); }
.dot-soon { background: var(--color-soon); }
.dot-closed { background: var(--color-closed); }


.card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card-hover { transition: box-shadow .15s ease, transform .15s ease; }
.card-hover:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }


.pill-44 { height: 44px; min-height: 44px; border-radius: 10px; }


*:focus-visible {
  outline: 2px solid var(--color-main-500);
  outline-offset: 2px;
}


.ad-slot {
  border: 1px dashed var(--color-rule-2);
  background: var(--color-surface-2);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}




.top-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-2);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.top-nav-link:hover { background: var(--color-surface); color: var(--color-ink); }
.top-nav-link.active { color: var(--color-ink); background: var(--color-surface); }


.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-card);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.brand-mark::before { content: "uw"; }


.sub-pill {
  font-size: 13px;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-ink-2);
  border: 1px solid var(--color-rule);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
}
.sub-pill.active { background: var(--color-ink); color: var(--color-card); border-color: var(--color-ink); }
.sub-pill .count { color: var(--color-ink-4); font-variant-numeric: tabular-nums; font-size: 12px; }
.sub-pill.active .count { color: oklch(1 0 0 / 0.5); }


.pill-scroll-row > * { flex: 0 0 auto; }


.t-h1-article {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
}


.prose-cap { max-width: 65ch; }


@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: oklch(0.15 0.006 240);
    --color-surface-2: oklch(0.19 0.008 240);
    --color-card: oklch(0.21 0.010 240);
    --color-rule: oklch(0.29 0.010 240);
    --color-rule-2: oklch(0.34 0.010 240);

    --color-ink: oklch(0.95 0.005 240);
    --color-ink-2: oklch(0.84 0.007 240);
    --color-ink-3: oklch(0.70 0.008 240);
    --color-ink-4: oklch(0.56 0.008 240);

    --color-main-50: oklch(0.22 0.025 200);
    --color-main-100: oklch(0.26 0.045 200);
    --color-main-200: oklch(0.36 0.065 200);
    --color-main-400: oklch(0.74 0.09 200);
    --color-main-500: oklch(0.72 0.10 200);
    --color-main-600: oklch(0.80 0.10 200);
    --color-main-700: oklch(0.86 0.09 200);

    --color-open: oklch(0.74 0.10 145);
    --color-open-soft: oklch(0.30 0.04 145);
    --color-soon: oklch(0.78 0.12 75);
    --color-soon-soft: oklch(0.30 0.05 75);
    --color-closed: oklch(0.62 0.008 240);

    --shadow-card: 0 0 0 1px oklch(0.29 0.010 240);
    --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.4), 0 0 0 1px oklch(0.29 0.010 240);
    --shadow-float: 0 8px 24px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(0.29 0.010 240);
  }
  
  select.pill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cdd0d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}