/* ===================== styles.css (merged) ===================== */
:root {
  --radius-xl: 1rem;

  /* Cyber theme tokens */
  --bg-grad-a: #0a0a0b;
  --bg-grad-b: #0f1116;
  --bg-grad-c: #151922;
  --text: #e6e6e6;
  --muted: #a1a1aa;
  --ring: #6366f1;
  --card: rgba(24, 24, 27, 0.7);
  --card-border: #27272a;
  --link: #c7d2fe;
}

/* App shell */
/* one continuous gradient behind everything */
html {
  min-height: 100%;
  background: linear-gradient(135deg, var(--bg-grad-a), var(--bg-grad-b) 40%, var(--bg-grad-c));
  background-color: var(--bg-grad-b);
}
body {
  margin: 0;
  color: var(--text);
  background: transparent;   /* let html show through */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.skip-link {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem .75rem;
  background: rgba(0,0,0,.7); color: #fff; border-radius: .5rem; z-index: 1001;
}

.container {
  max-width: 72rem; /* ~1152px */
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}
:root { --brand-icon: 30px; }  /* try 24–32px */
/* Badge container (keeps your current look) */
.brand-badge {
  padding: .5rem;
  border-radius: 1rem;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  display: flex;                /* center the icon */
  align-items: center;
  justify-content: center;
  line-height: 0;               /* removes any inline gap */
}

/* Icon sizing */
.brand-img {
  width: var(--brand-icon);
  height: var(--brand-icon);
  display: block;
  object-fit: contain;          /* or 'cover' if PNG has extra padding */
}
.brand-title {
  font-weight: 600;
  letter-spacing: .2px;
}
/* Toggle button: visible on mobile, hidden on desktop */
.menu-toggle{
  appearance:none; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  width:40px; 
  height:40px; 
  border:1px solid rgba(255,255,255,.15);
  border-radius:.75rem; 
  background:rgba(255,255,255,.06); 
  color:inherit; 
  cursor:pointer;
}
.menu-toggle:hover{ 
    background:rgba(255,255,255,.1);
}
@media (min-width:640px){
    .menu-toggle{ 
        display:none;
     }
}

.nav {
  display: none;
  gap: 1.25rem;
  opacity: .85;
  font-size: .95rem;
}
@media (min-width:640px){ .nav{ display:flex; } }

/* Drawer */
.nav-drawer{
  position:fixed; 
  top:0; 
  right:0; 
  height:100dvh; 
  width:260px; 
  padding:1rem 1.25rem;
  display:flex; 
  flex-direction:column; 
  gap:.75rem;
  background:rgba(24,24,27,.96); 
  border-left:1px solid #27272a;
  transform:translateX(100%); 
  transition:transform .25s ease; 
  z-index:1000;
}
.nav-drawer a{ 
    color:var(--text); 
    text-decoration:none; 
    padding:.5rem 0; 
    border-bottom:1px solid rgba(255,255,255,.06); 
}
.nav-drawer a:hover{ 
    text-decoration:underline; 
}
.nav-drawer.open{ 
    transform:translateX(0); 
}

/* Backdrop */
.backdrop{ 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,.5); 
    backdrop-filter:blur(2px); 
    z-index:999; 
}
.backdrop[hidden]{ 
    display:none; 
}

/* Prevent background scroll when open */
body.menu-open{ overflow:hidden; }


.nav a {
  color: inherit;
  text-decoration: none;
}
.nav a:hover {
  opacity: 1;
  text-decoration: underline;
}
@media (min-width: 640px){
  .nav { display: flex; }
}
/* Larger tap area for header/nav links and drawer links */
.nav a, .nav-drawer a {
  padding: .35rem 0;
}

/* Clear keyboard focus */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Hero */
.hero { padding-top: .25rem; }
.hero-frame { border-radius: 1rem; overflow: hidden; position: relative; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.45), rgba(0,0,0,.6)); }
.hero-center { position: relative; z-index: 1; display: grid; place-items: center; aspect-ratio: 21/9; }
@media (min-width: 768px){
  .hero-center { aspect-ratio: 21/7; }
}
.hero-title {
  font-size: clamp(1.875rem, 4vw + 1rem, 3.5rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  color: #fff;
  margin: 0;
}
.wave { width: 100%; color: rgba(255,255,255,.07); display: block; }
.wave path { fill: currentColor; }

/* Headings: better spacing on mobile */
h1, .hero-title { letter-spacing: .2px; }
h1 { margin: 0 0 .75rem; }
h2.section-title, .about-title { margin: 0 0 1.25rem; }

@media (max-width: 480px) {
  .section { padding: 2rem 1rem; }       /* slightly tighter on very small phones */
  .hero-center { aspect-ratio: 21/9; }   /* reduce hero height on tiny screens */
}

/* Sections */
.section { padding: 2.5rem 1.25rem; }
.section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 1rem 0;
}
.muted { color: var(--muted); line-height: 1.6; }
.mt { margin-top: 1rem; }
.link { color: var(--link); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* Cards */
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px){
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
}
.card-body { padding: 1.25rem; }
.card-headline { font-weight: 600; margin: 0 0 .25rem 0; }

/* Gallery */
.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px){
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gallery-tile {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display: grid;
  place-items: center;
}

/* NEW: make linked tiles look like cards, not blue links */
.gallery-tile { color: inherit; 
    text-decoration: none; 
}
.gallery-tile:link,
.gallery-tile:visited { color: inherit; 
    text-decoration: none; }
.gallery-tile:hover .gallery-label,
.gallery-tile:focus .gallery-label { text-decoration: underline; }
.gallery-tile:focus { 
    outline: 2px solid var(--link); 
    outline-offset: 2px; 
}
.gallery-label { 
    opacity: .7; 
    font-size: .9rem; 
    text-align: center; 
    text-wrap: balance;
    padding: 0 .5rem;
}
/* About */
.about-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px){
  .about-grid { grid-template-columns: 2fr 3fr; }
}
.about-title { 
    font-weight: 800; 
    font-size: 1.875rem; 
    margin: 0; 
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: .01ms !important; 
    scroll-behavior: auto !important; }
}

/* Footer */
.footer {
  padding: 3rem 1.25rem;
  opacity: .75;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .9rem;
}