6/* ---------- Font ---------- */
@font-face{
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-Bold.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

:root{
  --bg: #000;
  --fg: #f5f7fb;
  --muted: #cbd5e1;

  /* Brand gradient */
  --g1:#10b981; --g2:#06b6d4; --g3:#7c3aed;

  /* Radii + borders */
  --radius-lg: 24px;
  --radius-sm: 12px;
  --bw: 4px;          /* default gradient border */
  --bw-thick: 6px;   /* thicker border for header/hero */
  --bw-card-thick: 6px;
  --bw-card-thin: 4px;

  --glow: 0 0 32px rgba(124,58,237,.28);
}

html { height:100%; font-size:20px; }
body{
  min-height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .6px;
}

h1, h2, h3, .brand { letter-spacing: 1.35px; }

/* ---------- Layout helpers ---------- */
.container{ max-width:1200px; margin:0 auto; padding:24px; }
.stack{ display:flex; flex-direction:column; gap:22px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.center{ display:flex; align-items:center; justify-content:center; }

/* Default grids: single column unless a page overrides */
.grid{ display:grid; gap:16px; grid-template-columns: 1fr; }

.home .grid.gigs{ grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width:1024px){
  .home .grid.gigs{ grid-template-columns: repeat(3, 1fr); }
}

/* Helper to force one-per-row when needed */
.grid--one { grid-template-columns: 1fr !important; }

/* ---------- Gradient border utilities ---------- */
.gb{
  --_bw: var(--bw);
  border: var(--_bw) solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: var(--glow);
}
.gb--thick{ --_bw: var(--bw-thick); }

.site-header{
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  padding: 2rem 1rem;            /* meaty padding */
  border-radius: 18px;                 /* slightly rounder than cards */
}

/* inside header */
.site-header .brand{
  font-weight:900; text-decoration:none; color:var(--fg);
  letter-spacing:1.6px; line-height:1.2; font-size:1.65rem;
}
.site-header .nav{
  display:flex; gap:2.25rem; flex-wrap:wrap; justify-content:center;
}
.site-header a{ color:#fff; text-decoration: underline; }

.search{
  display:flex; gap:20px; align-items:center; justify-content:center;
  margin:18px auto; flex-wrap:wrap;
}
.search input[type="text"]{
  flex: 1;
  min-width: 460px;
  max-width: 820px;
  padding: 16px 30px;
  color: var(--fg);
  border-radius: 999px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--g1), var(--g2), var(--g3)) border-box;
  border: var(--bw) solid transparent;
  outline:none;
}
.search input::placeholder{
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .6px;
  color: #9aa4b2;
}

/* ---------- Buttons & pills ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; font-weight:800; font-size:1rem;
  color:#fff; text-decoration:none; cursor:pointer; user-select:none;
  border-radius:999px; border: var(--bw) solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  box-shadow: var(--glow);
  transition: transform .08s ease, filter .15s ease;
}
.btn--pill{ border-radius:999px; }
.btn--lg{ padding:16px 28px; font-size:1.15rem; }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }

.pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-block; padding:10px 14px; font-weight:800; font-size:1.05rem;
  border-radius:999px; color:var(--fg);
  border: var(--bw) solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--g1), var(--g2), var(--g3)) border-box;
}

/* ---------- Cards (two weights) ---------- */
/* Thin border cards for lists (2–3 across) */
.card-thin{
  position:relative;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  border: var(--bw-card-thin) solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  box-shadow: var(--glow);
  transition: transform .12s ease;
}
.card-thin:hover{ transform: translateY(-2px); }
.card-title{ margin:0 0 .5rem; font-size:1.35rem; line-height:1.15; }
.card-summary{ margin:0; color:var(--muted); line-height:1.65; }

/* Thick border card for featured/single */
.card-thick{
  position:relative;
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  border: var(--bw-card-thick) solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  box-shadow: var(--glow);
  transition: transform .12s ease;
}
.card-thick:hover{ transform: translateY(-2px); }

/* Make whole card clickable with an invisible stretched link */
.stretched-link{
  position:absolute; inset:0; border-radius:inherit;
  text-indent:-9999px; overflow:hidden;
}

/* ---------- “View” page (gig details) ---------- */
.gig-wrapper{
  max-width: 900px;
  margin: 2rem auto;
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  border: var(--bw-card-thick) solid transparent;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  box-shadow: var(--glow);
}
.gig-platform{ margin:0 0 1rem; font-size:2rem; color:#a883ff; letter-spacing:1px; }
.gig-title{ margin:0 0 1rem; font-size:1.6rem; color:#65e1d0; }
.gig-wrapper dt{ font-weight:700; color:#a883ff; margin-top:1rem; }
.gig-wrapper dd{ margin:0 0 .5rem 0; }

/* ---------- Forms ---------- */
label{ display:block; margin:6px 0 8px; font-weight:800; }
input[type="text"], input[type="email"], input[type="url"],
input[type="number"], textarea, select{
  width:100%; color:var(--fg); padding:12px 14px; border-radius: var(--radius-sm);
  border: var(--bw) solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;
  outline:none;
}
textarea{ min-height:160px; resize:vertical; }

/* ---------- Links ---------- */
a { color:#fff; text-decoration: underline; }

/* ---------- 404 (unchanged) ---------- */
.error404 { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; background:#000; color:#fff; }
.error404 .panel{
  width:min(920px, 92vw);
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(135deg,#6cf,#7f5cff,#50ff7f);
  box-shadow: 0 0 28px rgba(120,255,200,.15);
}
.error404 .panel-inner{
  border-radius: 18px;
  background:#000;
  padding: clamp(16px, 3vw, 28px);
  display:grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}
.error404 .oops{ font-size: clamp(22px, 4vw, 32px); margin: 0 0 6px 0; }
.error404 .robot{ max-width: 260px; width: 38vw; height: auto; display:block; }
.error404 .menu{ display:grid; gap: 14px; }
.error404 .pill{
  display:inline-block; text-decoration:none; color:#fff; font-weight:700;
  padding: 12px 22px; border-radius: 999px;
  background: #0b0b0b; border: 2px solid transparent;
  background-image:
    linear-gradient(#0b0b0b,#0b0b0b),
    linear-gradient(135deg,#6cf,#7f5cff,#50ff7f);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  text-align:center;
  transition: transform .08s ease, filter .08s ease;
  filter: drop-shadow(0 0 10px rgba(80,255,127,.15));
}
.error404 .pill:hover { transform: translateY(-1px); filter: drop-shadow(0 0 16px rgba(80,255,127,.25)); }

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}