/* ===== ScrollClips · modern 2025 theme ===== */
:root{
  --bg: #0c0c10;
  --bg-2: #131318;
  --panel: #16161c;
  --ink: #ece9e3;
  --muted: #a9a49c;
  --brand: #ffd089;      /* warm gold */
  --accent: #ffb751;     /* CTA */
  --border: #2a2a32;
  --ring: #ffe2ad;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, #1d1d23, var(--bg)),
    radial-gradient(800px 500px at 90% 20%, #151520 0, transparent 60%),
    radial-gradient(1000px 600px at 10% 30%, #12121a 0, transparent 70%),
    var(--bg);
}

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* ----- header (frosted) ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(15,15,18,.6);
  border-bottom: 1px solid var(--border);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand .logo { height: 30px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
.brand span { font-weight: 800; letter-spacing: .2px; }
.nav a {
  color: var(--ink); text-decoration: none; margin-left: 18px; opacity: .85;
  transition: opacity .15s ease;
}
.nav a:hover, .nav a.is-active { opacity: 1; }
.nav a.is-active { text-decoration: underline; text-underline-offset: 4px; }

/* ----- hero ----- */
.hero {
  padding: 54px 0 28px;
}
.kicker { color: var(--brand); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; font-size: .8rem; }
.h1 { font-size: clamp(30px, 4vw, 48px); margin: 10px 0 6px; font-weight: 900; }
.lede { color: var(--muted); max-width: 70ch; margin: 0 0 22px; }

/* ----- cards & grids ----- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0 0 10px; color: var(--muted); }
.card a.title { color: var(--brand); font-weight: 650; text-decoration: none; }
.card a.title:hover { color: #fff6dd; }

/* ----- article ----- */
.article {
  background: linear-gradient(180deg, var(--panel), #15151b);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.meta { color: var(--muted); margin-top: 6px; }

/* ----- buttons ----- */
.btn {
  display: inline-block; padding: 10px 14px; border-radius: 12px;
  background: var(--accent); color: #241a0c; text-decoration: none; font-weight: 800;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 20px rgba(229, 177, 92, .25);
}
.btn:hover { filter: brightness(1.05); }

/* ----- footer ----- */
.site-footer { border-top: 1px solid var(--border); margin-top: 48px; }
.site-footer .wrap { padding: 28px 0; color: var(--muted); }

/* accessibility focus */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 720px){
  .nav a { margin-left: 12px; }
}