/* Minimal responsive styles for Accidentally Serious Producer
   Mobile-first, accessible and lightweight.
*/
:root{
  --bg:#0f1724; /* dark background */
  --card:#071126;
  --text:#e6eef8;
  --muted:#9fb2c9;
  --accent:#06b6d4;
  --container:1100px;
  --gap:1rem;
}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;line-height:1.5;font-size:16px}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:1rem}
header{padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,0.03)}
header h1{margin:0;font-size:1.25rem}
main{padding:1.25rem 0}
section{margin:1.25rem 0}
article{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
article h3{margin-top:0}
ul{padding-left:1.25rem}
p{color:var(--muted)}
a{color:var(--accent)}
/* Responsive layout */
@media (min-width:700px){
  .two-col{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
}
/* Accessibility helpers */
:focus{outline:2px solid var(--accent);outline-offset:2px}
/* Make images responsive if added */
img{max-width:100%;height:auto}
/* Footer small */
footer{padding:1rem 0;font-size:0.9rem;color:var(--muted)}

/* Skip link (accessible, visible on focus) */
.skip-link{position:fixed;left:0;top:0;background:var(--accent);color:var(--bg);padding:.5rem .75rem;border-bottom-right-radius:8px;transform:translateY(-120%);transition:transform .18s ease;z-index:1000;text-decoration:none;font-weight:600}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(0,0,0,0.12);outline-offset:2px}