/* DailyBuzzd — shared chrome for about.html and feedback.html */

:root {
  --bg:        oklch(0.16 0.012 60);
  --bg-2:      oklch(0.19 0.013 60);
  --bg-3:      oklch(0.23 0.014 60);
  --line:      oklch(0.32 0.012 60 / 0.55);
  --line-soft: oklch(0.32 0.012 60 / 0.28);
  --ink:       oklch(0.97 0.010 80);
  --ink-2:     oklch(0.86 0.012 70);
  --ink-3:     oklch(0.70 0.014 65);
  --ink-4:     oklch(0.56 0.012 60);

  --wiki:   oklch(0.74 0.155 250);
  --hn:     oklch(0.74 0.165 50);
  --poly:   oklch(0.84 0.180 130);
  --reddit: oklch(0.68 0.215 22);
  --up:    oklch(0.78 0.170 145);
  --down:  oklch(0.70 0.180 25);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'Geist', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { letter-spacing: -0.005em; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; z-index: 100;
}

.shell { max-width: clamp(1480px, 90vw, 1800px); margin: 0 auto; padding: 0 40px; }

/* ── header ── */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.top-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 40px; padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-row { display: flex; align-items: center; gap: 28px; }
.brand-mark {
  font-family: var(--serif); font-size: 60px; font-style: italic;
  letter-spacing: -0.025em; line-height: 1; padding-bottom: 0.1em;
  background: linear-gradient(96deg, var(--wiki) 0%, var(--wiki) 18%, var(--reddit) 52%, var(--hn) 86%, var(--hn) 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: brandShift 14s ease-in-out infinite; transition: filter .2s;
}
.brand:hover .brand-mark { filter: brightness(1.15); }
.brand-mark em { font-style: italic; }
@keyframes brandShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.top-nav {
  display: flex; gap: 20px; font-family: var(--mono); font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.top-nav a { position: relative; transition: color .15s; }
.top-nav a:hover { color: var(--ink); }
.top-nav a[aria-current="page"] { color: var(--ink); }
.top-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink);
}
.top-center {
  display: flex; align-items: center; gap: 18px; justify-content: center;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-2); text-transform: uppercase;
}
.top-center span { white-space: nowrap; }
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); animation: livePing 1.6s ease-in-out infinite;
  margin-right: 8px; vertical-align: 1px;
}
@keyframes livePing {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--up) 60%, transparent); }
  50%       { box-shadow: 0 0 0 8px color-mix(in oklab, var(--up) 0%, transparent); }
}
.top-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.back-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2); transition: border-color .15s, color .15s, background .15s;
}
.back-pill:hover { border-color: var(--ink-3); color: var(--ink); background: var(--bg-2); }

/* ── hamburger ── */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; padding: 6px; border-radius: 6px;
  background: transparent; transition: background .15s;
}
.hamburger:hover { background: var(--bg-2); }
.hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink-2); border-radius: 2px; transition: all .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  display: none; flex-direction: column;
  padding: 0 0 12px; border-top: 1px solid var(--line-soft);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  transition: color .15s;
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--ink); }

/* ── footer ── */
.footer {
  padding-top: 40px; padding-bottom: 56px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 24px;
  border-top: 1px solid var(--line-soft); margin-top: 48px;
}
.footer-l, .footer-r { font-family: var(--mono); font-size: 14px; color: var(--ink-2); letter-spacing: 0.04em; line-height: 1.7; }
.footer-r { text-align: right; }
.footer-c { font-family: var(--mono); font-size: 14px; color: var(--ink-2); letter-spacing: 0.04em; text-align: center; }
.footer-l b, .footer-r b { color: var(--ink); font-weight: 500; }
.sources-list { display: flex; gap: 14px; justify-content: center; }
.sources-list span { display: inline-flex; align-items: center; gap: 6px; }
.sources-list i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sources-list .w { background: var(--wiki); }
.sources-list .h { background: var(--hn); }
.sources-list .r { background: var(--reddit); }

@media (max-width: 1024px) {
  .top-center { display: none; }
  .top-row { grid-template-columns: 1fr auto; }
}
@media (max-width: 880px) {
  .shell { padding: 0 24px; }
  .top-nav { gap: 14px; font-size: 10.5px; }
  .footer { grid-template-columns: 1fr; text-align: center; gap: 24px; margin-top: 32px; padding-top: 32px; padding-bottom: 48px; }
  .footer-l, .footer-c, .footer-r { text-align: center; }
  .sources-list { justify-content: center; }
}
@media (max-width: 640px) {
  .shell { padding: 0 18px; }
  .top-row { grid-template-columns: 1fr auto; padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .brand-mark { font-size: 40px; }
  .brand-row { gap: 16px; }
  .top-nav { display: none; }
  .back-pill { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 420px) {
  .brand-mark { font-size: 34px; }
}
@media (min-width: 1600px) {
  .brand-mark { font-size: 68px; }
}