/* CSS for Cynic Cafe - Mobile-first, semantic, accessible */
:root{
  --color-bg: #0b0f14;
  --color-surface: #121821;
  --color-text: #e6edf3;
  --color-muted: #9aa8b4;
  --color-accent: #7c9cff;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-2: .5rem;
  --max-w: 70rem;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 6px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--color-text);
  background:linear-gradient(180deg, #0b0f14 0%, #0e141b 100%);
}
img{max-width:100%;display:block}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--space-4);top:var(--space-4);width:auto;height:auto;padding:.5rem .75rem;background:var(--color-accent);color:#08101f;border-radius:.5rem;z-index:1000;box-shadow:var(--shadow-2)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.container{max-width:var(--max-w);margin-inline:auto;padding:0 var(--space-4)}

.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(18,24,33,.8);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:3.5rem}
.brand{font-weight:800;color:var(--color-text);letter-spacing:.3px}
.site-nav ul{margin:0;padding:0;list-style:none;display:flex;gap:var(--space-4)}
.site-nav a{padding:.25rem .5rem;border-radius:.375rem}
.site-nav a:hover{background:rgba(255,255,255,.06);text-decoration:none}

.hero-section{
  padding: clamp(3rem, 8vw, 6rem) 0;
  background:
    radial-gradient(1200px 1200px at 20% -10%, rgba(124,156,255,.12), transparent 70%),
    radial-gradient(1000px 1000px at 80% 0%, rgba(124,156,255,.08), transparent 70%);
}
.hero-section .lead{color:var(--color-muted);max-width:50ch}
.hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.button-primary,.button-secondary{display:inline-block;padding:.6rem .9rem;border-radius:.6rem;font-weight:600}
.button-primary{background:var(--color-accent);color:#08101f;box-shadow:var(--shadow-2)}
.button-secondary{border:1px solid rgba(255,255,255,.12);color:var(--color-text);background:rgba(255,255,255,.02)}
.button-secondary:hover{background:rgba(255,255,255,.06)}

.content-section{padding:3rem 0;border-top:1px solid rgba(255,255,255,.06)}
.content-section h2{margin-top:0}
.link-list{padding-left:1.2rem}
.note{color:var(--color-muted);margin-left:.5ch;font-size:.9em}

.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (min-width: 48rem){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 64rem){
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
}

@media (prefers-color-scheme: light){
  :root{
    --color-bg:#f8fafc;
    --color-surface:#ffffff;
    --color-text:#0b0f14;
    --color-muted:#475569;
    --color-accent:#335dff;
  }
  body{background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)}
  .button-primary{color:#ffffff}
}

.site-footer{padding:2rem 0;color:var(--color-muted)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}