:root {
  --fg:#111;
  --bg:#fff;
  --muted:#666;
  --card:#eaeaea;
  --accent:#000;
}
@media (prefers-color-scheme: dark){
  :root {
    --fg:#eee;
    --bg:#0b0b0b;
    --muted:#aaa;
    --card:#1a1a1a;
    --accent:#fff;
  }
}

* {
  box-sizing:border-box;
}

html, body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  line-height:1.6;
}

/* Link colors - light mode */
a {
  color:#0066cc;
}
a:visited {
  color:#6b4c9a;
}
a:hover {
  opacity:0.8;
}

/* Link colors - dark mode */
@media (prefers-color-scheme: dark){
  a {
    color:#6ab0f3;
  }
  a:visited {
    color:#ce93d8;
  }
}

h1, h2, h3 {
  font-family:"Orbitron", system-ui, sans-serif;
  letter-spacing:.01em;
}

/* layout containers */

.container {
  max-width:960px;
  margin:0 auto;
  padding:1rem;
}

.site-header,
.site-footer {
  max-width:960px;
  margin:0 auto;
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand {
  font-weight:700;
  text-decoration:none;
  color:var(--fg);
  font-family:"Orbitron", system-ui, sans-serif;
  font-size:1.1rem;
}

/* header navigation */

.main-nav {
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-left:auto; /* pushes nav to the right */
  font-family:"Orbitron", system-ui, sans-serif;
  font-size:0.9rem;
}

.main-nav a {
  text-decoration:none;
  color:var(--fg);
  opacity:.9;
}

.main-nav a:hover {
  opacity:1;
}

/* dropdowns shared (header and splash) */

.dropdown {
  position:relative;
  display:inline-flex;
  align-items:center;
}

.dropbtn {
  background:none;
  border:none;
  padding:0;
  margin:0;
  line-height:1;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

/* base dropdown menu (non splash default) */

.dropdown-menu {
  position:absolute;
  top:100%;
  left:-.75rem;
  min-width:220px;
  background:var(--bg);
  border:1px solid #0002;
  border-radius:.4rem;
  padding:.4rem 0;
  display:none;
  text-align:left;
  z-index:20;
  font-family:inherit;
  font-size:0.9rem;
}

.dropdown-menu a {
  display:block;
  padding:.4rem .75rem .4rem .75rem;
  color:var(--fg);
  text-decoration:none;
}

.dropdown-menu a:hover {
  background:var(--card);
}

.dropdown:hover .dropdown-menu,
.dropdown-menu[data-open="1"] {
  display:block;
}

/* hamburger for small screens */

.nav-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:.25rem;
  margin-left:auto;
}

.nav-toggle span {
  display:block;
  width:22px;
  height:2px;
  background:var(--fg);
  margin:4px 0;
}

/* portfolio grid and cards */

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
}

/* card as flex container so year can sit at the bottom */

.card {
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--card);
  padding:.5rem;
  border-radius:.5rem;
  text-decoration:none;
  color:inherit;
  border:1px solid #0001;
}

.card img {
  width:100%;
  height:auto;
  display:block;
  border-radius:.35rem;
}

/* generic meta text */

.meta {
  font-size:.875rem;
  color:var(--muted);
}

/* meta inside cards is pinned to the bottom */

.card .meta {
  margin-top:auto;
}

/* subtitle styling inside cards */

.card .subtitle {
  font-family:'Victor Mono', monospace;
  font-size:0.75rem;        /* smaller */
  line-height:1.1;          /* tighter vertical spacing */
  margin:0.1rem 0 0.15rem;  /* less space above and below */
  opacity:0.85;
  letter-spacing:0.2px;     /* slightly less wide */
}

/* post pages */

.post .hero-img {
  width:100%;
  height:auto;
  border-radius:.5rem;
}

.post img,
.container img {
  max-width:90%;
  height:auto;
  display:block;
  margin:1rem auto;
}

.post img + em,
.container img + em {
  display:block;
  text-align:center;
  max-width:90%;
  margin:0 auto 1rem;
}

/* generic embed wrapper */
.embed,
.embed-audio {
  max-width:100%;
}

/* 16:9 responsive video (YouTube etc.) */
.embed-video {
  aspect-ratio:16/9;
}
.embed-video iframe {
  width:100%;
  height:100%;
  border:0;
}

/* SoundCloud: respect its natural height */
.embed-audio iframe {
  width:100%;
  border:0;
  /* no height override, let the 166px from the embed HTML win */
}

/* filters on portfolio pages */

.filters {
  margin:1rem 0;
}

.filters button {
  margin-right:.5rem;
  padding:.4rem .7rem;
  border:1px solid #0002;
  background:var(--card);
  color:var(--fg);
  border-radius:.4rem;
  cursor:pointer;
}

.filters button.active {
  outline:2px solid var(--fg);
}

/* splash page */

body.splash,
.splash,
.hero {
  margin:0;
  height:100vh;
  width:100%;
}

.hero {
  background:url("/media/hero.jpg") right center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.overlay {
  background:none;
  padding:0;
  border-radius:0;
  color:#fff;
  text-align:center;
  position:relative;
  top:7vh; /* move name + links down */
}

.overlay h1 {
  font-family:"Orbitron", system-ui, sans-serif;
  font-size:3.5rem;
  margin:0 0 1rem;
}

/* splash menu: text only, no pills */

.splash-menu {
  display:inline-flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  font-family:"Orbitron", system-ui, sans-serif;
  font-size:1.3rem;
  letter-spacing:.03em;
}

.splash-menu > a,
.splash-menu .dropbtn {
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  padding:0;
  margin:0;
  font:inherit;
  line-height:1;
  transition:opacity .2s ease;
}

.splash-menu > a:hover,
.splash-menu .dropbtn:hover {
  opacity:.6;
}

/* darker dropdown variant on splash */

body.splash .dropdown-menu {
  background:rgba(0,0,0,.85);
  border:none;
}

body.splash .dropdown-menu a {
  color:#fff;
}

/* splash social links */

.splash-social-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
}

.splash-social-links a {
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.splash-social-links a:hover {
  opacity: 1;
}

body.splash .dropdown-menu a:hover {
  background:rgba(255,255,255,.1);
}

/* responsive */

@media (max-width:700px){

  .site-header,
  .site-footer {
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-toggle {
    display:block;
  }

  .main-nav {
    display:none;
    flex-direction:column;
    gap:.5rem;
    margin-top:.5rem;
    width:100%;
  }

  .main-nav.is-open {
    display:flex;
  }

  .main-nav a,
  .main-nav .dropbtn {
    margin-left:0;
  }

  .overlay {
    top:10vh;
  }

  .overlay h1 {
    font-size:2.1rem;
  }

  .splash-menu {
    gap:.75rem;
  }

  .splash-menu > a,
  .splash-menu .dropbtn {
    font-size:1.1rem;
  }
}

/* portfolio list cards used on the portfolio index */

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
  margin:2rem 0;
}

.portfolio-card {
  background:var(--card, #f5f5f5);
  padding:1rem 1.25rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  height:100%;
}

.portfolio-card a {
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  height:100%;
}

.portfolio-card-title {
  margin:0 0 0.4rem 0;
  font-size:1.05rem;
}

.portfolio-card-meta {
  margin:0 0 0.5rem 0;
  font-size:0.85rem;
  opacity:0.7;
  margin-top:auto;
}

.portfolio-card-excerpt {
  margin:0;
  font-size:0.9rem;
}

.portfolio-card-thumb {
  width:100%;
  margin-top:0.75rem;
  border-radius:4px;
}

.portfolio-card .subtitle {
  font-family:'Victor Mono', monospace;
  font-size:0.75rem;
  line-height:1.1;
  margin:0.1rem 0 0.15rem;
  opacity:0.85;
  letter-spacing:0.2px;
}

.fullwidth-img img {
  width: 100%;
  height: auto;
  display: block;
}

.bc-embed iframe {
  width: 100%;
  max-width: 350px;
  height: 654px;
  border: 0;
}
.embedded-card {
  max-width: 250px;
}
/* Events */
.events-list {
  margin: 1rem 0;
}

.event-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
  .event-item {
    border-bottom-color: rgba(255,255,255,0.1);
  }
}

.event-item:last-child {
  border-bottom: none;
}

.event-item a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.event-item a:hover .event-title {
  opacity: 0.7;
}

.event-date {
  font-family: 'Victor Mono', monospace;
  font-size: 0.85rem;
  opacity: 0.7;
  flex-shrink: 0;
  min-width: 95px;
}

.event-title {
  font-size: 1.05rem;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.event-venue {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-left: auto;
  text-align: right;
}

.event-meta {
  background: var(--card);
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  line-height: 1.6;
}