/* ---------- Design Tokens ---------- */
:root {
  --bg:#0d1222; --fg:#e5e7eb; --muted:#9aa4b2;
  --accent:#8b93ff; --accent-2:#a5adff;
  --card:#141b2f; --border:#24314f;
  --ring:0 0 0 3px rgba(165,173,255,.22);
  --shadow:0 8px 26px rgba(0,0,0,.42);

  --radius:14px;
  --container:980px;
  --space:clamp(16px,3vw,28px);
}

/* Light theme when html:not(.dark) */
html:not(.dark){
  --bg:#f3f4f6; --fg:#0f172a; --muted:#475569;
  --accent:#4f46e5; --accent-2:#6366f1;
  --card:#f8fafc; --border:#e5e7eb;
  --ring:0 0 0 3px rgba(79,70,229,.18);
  --shadow:0 6px 20px rgba(2,6,23,.06);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg); color:var(--fg);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; letter-spacing:.1px;
  padding:calc(var(--space) * 1.25) var(--space);
  transition:background .35s ease, color .35s ease;
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.container{max-width:var(--container);margin:0 auto}
img{display:block;max-width:100%;height:auto}

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:clamp(18px,3vw,28px);
  align-items:start;
  margin-bottom:calc(var(--space) * 1.2);
}
@media (max-width:800px){ .hero{ grid-template-columns:1fr } }

.title{
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.8rem,5vw,4rem);
  line-height:1.1; margin:0 0 .4rem;
}
.subtitle{ color:var(--muted); font-size:1.05rem; margin-bottom:1rem }

.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:.6rem }

/* Portrait on the RIGHT, snug toward text */
.portrait-wrap{
  grid-column:2;
  justify-self:start;   /* near the gap between columns */
  align-self:start;
  margin:0;

  max-width:280px;
  background:var(--card);
  padding:6px; border-radius:16px;
  border:2px solid var(--border);
  box-shadow:0 6px 16px rgba(0,0,0,.18);

  position:sticky; top:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.portrait-wrap:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.28) }
.portrait{ width:100%; border-radius:12px; object-fit:cover }

@media (max-width:800px){
  .portrait-wrap{ position:static; justify-self:center }
}

/* ---------- Sections ---------- */
section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:calc(var(--space) * 1.05);
  margin:0 auto var(--space);
  box-shadow:var(--shadow);
  max-width:var(--container);
}
h2{
  font-family:'Fugaz One',system-ui,sans-serif;
  font-size:clamp(1.25rem,2.5vw,1.6rem);
  margin:0 0 .6rem; color:var(--accent);
}

/* ---------- Grid / Cards ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px; margin-top:12px;
}
.card{
  background:color-mix(in srgb, var(--card) 94%, transparent);
  border:1px solid var(--border);
  border-radius:12px; padding:16px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border-color:color-mix(in srgb, var(--accent) 22%, var(--border));
}
.card img{ border-radius:10px; margin-top:10px }
.card audio{ margin-top:10px; width:100% }
.card h3{ margin:0 0 .35rem; font-size:1.05rem; font-weight:600 }

/* ---------- Links & Buttons ---------- */
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-2); text-decoration:underline }
.btn{
  display:inline-flex; align-items:center; gap:.5ch;
  background:var(--accent); color:#fff; border:0;
  border-radius:10px; padding:.6rem .9rem; font-weight:600; cursor:pointer;
  box-shadow:0 4px 14px rgba(139,147,255,.28);
}
.btn.secondary{
  background:transparent; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}
.btn:focus-visible, .toggle-theme:focus-visible{ outline:none; box-shadow:var(--ring) }

/* ---------- Theme Toggle ---------- */
.toggle-theme{
  position:fixed; top:14px; right:14px; z-index:20;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:999px;
  padding:8px 12px; font-size:.9rem; box-shadow:var(--shadow);
  cursor:pointer; display:inline-flex; align-items:center; gap:.5ch;
}

/* ---------- Footer ---------- */
footer{ text-align:center; color:var(--muted); font-size:.9rem; margin:calc(var(--space) * 1.2) auto 0; max-width:var(--container) }

/* ---------- Social Icons ---------- */
.social-icons{ display:flex; justify-content:center; gap:24px; margin-bottom:18px }
.social-icons a{ color:var(--fg); font-size:1.9rem; transition:transform .22s ease, color .22s ease }
.social-icons a:hover{ color:var(--accent); transform:scale(1.15) }

/* ---------- About ---------- */
#about{ margin-bottom:calc(var(--space) * .8) }
.about-details{
  border-radius:12px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 94%, transparent);
}
.about-details summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:600; color:var(--fg);
  display:flex; align-items:center; justify-content:space-between;
}
.about-details summary::-webkit-details-marker{ display:none }
.about-details .chev{ transition:transform .25s ease }
.about-details[open] .chev{ transform:rotate(180deg) }
.about-body{ padding:8px 14px 10px; color:var(--muted) }
#about .about-body > :last-child{ margin-bottom:0 }
/* Media grid styling */
.media-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.media-grid img {
  border-radius: 8px;
  margin-bottom: 10px;
}

.media-grid h3 {
  font-size: 1rem;
  margin: 0;
}

.media-grid h3 a {
  color: var(--accent);
  text-decoration: none;
}
.media-grid h3 a:hover {
  color: var(--accent-2);
  text-decoration: underline;
}
.site-logo {
  max-height: 60px;   /* size control */
  margin-bottom: 12px;
}