/* ==========================================================================
   Theme: Retrowave (single-page variant)
   --------------------------------------------------------------------------
   - Variables define palette, surfaces, shadows, and background asset.
   - This build removes tab/navigation/button/form styles that are not used.
   ========================================================================== */
:root{
  /* Core palette */
  --accent: #ff3aa7;                 /* primary accent */
  --accent-2: #ffb23f;               /* secondary accent (kept for gradients) */
  --text: #eef0f7;                   /* base foreground */
  --muted: #b8b9d6;                  /* secondary foreground */

  /* Surfaces / elevation */
  --surface: rgba(8, 10, 22, 0.72);        /* card overlay */
  --surface-strong: rgba(12, 14, 28, 0.86);/* header overlay */
  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius: 16px;

  /* Background asset */
  --bg-img: url("../img/vaporwave.jpg");
}

/* Light color scheme overrides */
@media (prefers-color-scheme: light){
  :root{
    --surface: rgba(255,255,255,0.82);
    --surface-strong: rgba(255,255,255,0.9);
    --text:#0e0a1a;
    --muted:#473a55;
    --border: rgba(0,0,0,0.08);
    --shadow: 0 10px 24px rgba(2,12,27,.15);
  }
}

/* Base reset and typography */
*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Source Sans 3","DejaVu Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Background layers: image + radial tints + vignette */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 50% 85%, rgba(255,58,167,0.25), transparent 60%),
    radial-gradient(1000px 600px at 50% 10%, rgba(255,178,63,0.18), transparent 55%),
    var(--bg-img) center/cover no-repeat fixed;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(5,7,15,0.25) 0%, rgba(5,7,15,0.55) 60%, rgba(5,7,15,0.75) 100%);
  z-index:-1;
}

/* Layout and links */
.container{ width:min(1100px,92vw); margin-inline:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(160%) blur(14px);
  background:var(--surface-strong);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:1rem;
  padding:.9rem 0;
}

.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; letter-spacing:.3px;
}
.brand-mark{
  display:grid; place-items:center;
  inline-size:36px; block-size:36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0a0f1a; border-radius:10px;
}
.brand-text{ color:var(--text); opacity:.95; }

/* ==========================================================================
   Content
   ========================================================================== */
main.container{ padding: 2rem 0 3rem; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1rem,2vw,1.5rem);
  backdrop-filter:saturate(130%) blur(6px);
}

/* Headings */
h1{ margin:0 0 .5rem 0; font-size:clamp(1.45rem,1.2rem + 1.2vw,2rem); }

/* Header tabs */
.site-nav{
  justify-self:end;
  display:flex;
  gap:1rem;
}

.tab-link{
  background:transparent;
  border:none;
  padding:0.35rem 0;
  font-size:0.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
}

.tab-link:is(:hover,:focus-visible){
  color:var(--accent);
  outline:none;
}

.tab-link.is-active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

/* Panels: hidden by [hidden] attribute, nothing fancy needed */
.tab-panel[hidden]{
  display:none;
}

/* Layout for String media */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
  margin-top:1rem;
}

.media-item{
  margin:0;
}

.media-item img,
.media-item video{
  display:block;
  width:100%;
  border-radius:var(--radius);
}

.media-item figcaption{
  margin-top:0.4rem;
  font-size:0.85rem;
  color:var(--muted);
}