/* Breaking Threads design system - from design-bar.md (Refactoring UI application notes: scales decided once, HSL saturated greys, hierarchy by weight/contrast/size) */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* type scale: 12 14 16 20 25 31 39 */
  --t-1: 0.75rem; --t0: 0.875rem; --t1: 1rem; --t2: 1.25rem; --t3: 1.5625rem; --t4: 1.9375rem; --t5: 2.4375rem;
  /* spacing scale: 4 8 12 16 24 32 48 64 96 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 12px;
  --bg: hsl(210, 20%, 98%); --surface: hsl(0, 0%, 100%);
  --ink: hsl(215, 25%, 14%); --ink-2: hsl(215, 12%, 42%); --ink-3: hsl(215, 10%, 62%);
  --line: hsl(214, 15%, 90%);
  --brand: hsl(222, 89%, 55%); --brand-ink: hsl(0, 0%, 100%);
  --shadow: 0 1px 2px hsla(215, 25%, 14%, 0.06), 0 8px 24px hsla(215, 25%, 14%, 0.08);
}
[data-theme="dark"] {
  --bg: hsl(220, 18%, 10%); --surface: hsl(220, 14%, 15%);
  --ink: hsl(210, 20%, 94%); --ink-2: hsl(214, 12%, 68%); --ink-3: hsl(215, 10%, 48%);
  --line: hsl(218, 12%, 24%);
  --brand: hsl(217, 91%, 65%); --brand-ink: hsl(222, 47%, 11%);
  --shadow: 0 1px 2px hsla(0, 0%, 0%, 0.3), 0 8px 24px hsla(0, 0%, 0%, 0.35);
}
* { box-sizing: border-box; margin: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-ui); background: var(--bg); color: var(--ink);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
.wordmark {
  font-weight: 800; font-size: var(--t3); letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.wordmark sup { font-size: 0.45em; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
header.site {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
nav.main { display: flex; gap: var(--s5); align-items: center; }
nav.main a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t0); font-weight: 600;
  padding: var(--s2) var(--s1);
}
nav.main a:hover, nav.main a[aria-current] { color: var(--ink); }
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--s7) var(--s5); }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
/* Joke card - the hero. One dominant focal element (McCloud flow). */
.joke-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.joke-card img { display: block; width: 100%; height: auto; background: hsl(0,0%,100%); }
.joke-meta { padding: var(--s4) var(--s5); display: flex; justify-content: space-between; align-items: baseline; }
.joke-meta time { color: var(--ink-3); font-size: var(--t0); }
.joke-title { font-size: var(--t2); font-weight: 700; }
/* Joke nav - Fitts: big targets flanking the joke */
.joke-nav { display: flex; gap: var(--s3); justify-content: center; margin: var(--s6) 0; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s3) var(--s5);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: var(--t1);
  text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.07); }
/* Product card - the joke leads, price second (Exploding Kittens pattern) */
.product-card {
  margin: var(--s6) 0; padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start;
}
.product-card .kicker { font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.product-card .line { font-size: var(--t2); font-weight: 700; }
.product-card .price { color: var(--ink-2); font-size: var(--t1); }
/* Share row */
.share { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0 0; }
.share a, .share button {
  font-size: var(--t0); font-weight: 600; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s2) var(--s4); text-decoration: none; cursor: pointer;
}
.share a:hover, .share button:hover { color: var(--ink); border-color: var(--ink-3); }
/* Ad slots - reserved dimensions, never above the joke */
.ad-slot {
  margin: var(--s7) auto; width: 100%; max-width: 728px; height: 90px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase;
}
/* Archive grid (Slide:ology: consistent geometry) */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s5); }
.archive-grid a { text-decoration: none; color: var(--ink); }
.archive-grid .joke-card { transition: transform 120ms ease; }
.archive-grid .joke-card:hover { transform: translateY(-2px); }
.archive-grid .cap { padding: var(--s3) var(--s4); font-size: var(--t0); font-weight: 600; }
.archive-month { margin: var(--s7) 0 var(--s4); font-size: var(--t3); font-weight: 800; letter-spacing: -0.01em; }
.hits-row { margin-bottom: var(--s7); }
.hits-row h2 { font-size: var(--t2); margin-bottom: var(--s4); }
/* About / text pages */
.prose { max-width: 65ch; } .prose p { margin: var(--s4) 0; color: var(--ink-2); }
.prose h2 { margin: var(--s6) 0 var(--s3); }
/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s5); }
footer.site {
  border-top: 1px solid var(--line); padding: var(--s6) var(--s5);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  color: var(--ink-3); font-size: var(--t0); background: var(--surface);
}
footer.site a { color: var(--ink-2); text-decoration: none; }
#theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; padding: var(--s2) var(--s4); cursor: pointer; color: var(--ink-2); font-size: var(--t0); font-weight: 600; }
.bonus-panel { margin: var(--s4) 0 0; }
.bonus-panel details { border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.bonus-panel summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: var(--t0); }
.bonus-panel p { margin-top: var(--s3); color: var(--ink-2); }
.bonus-panel img { display: block; width: 100%; height: auto; margin-top: var(--s3); border-radius: var(--radius); }
@media (max-width: 640px) {
  header.site { flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); }
  nav.main { gap: var(--s4); }
  main { padding: var(--s5) var(--s4); }
  .joke-nav .btn { flex: 1; }
}
.story-link { margin: var(--s2) 0 0; font-size: var(--t0); color: var(--ink-2); }
.story-link a { color: var(--ink-2); }