/* === Theme tokens === */
:root{
  --bg: #0b0f14;
  --surface: #0f141b;
  --surface-2: #121821;
  --text: #d7e0ee;
  --muted: #9aa7bd;
  --border: #1e2633;
  --accent: #5eead4;          /* teal */
  --accent-2: #60a5fa;        /* blue */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

html,body{ background: var(--bg); color: var(--text); }

/* Subtle hero/overall background lighting */
body{
  background:
    radial-gradient(600px 600px at 0% 0%, rgba(96,165,250,.09), transparent 100%),
    radial-gradient(600px 600px at 100% 100%, rgba(96,165,250,.09), transparent 100%),
    var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Container + readable line-length */
.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Type scale */
h1{ font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); letter-spacing:.2px; margin: .2rem 0 1rem; }
h2{ font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); margin: 2.4rem 0 1rem; }
.sub{ color: var(--muted); max-width: 70ch; }

/* Accent utilities */
a{ color: inherit; text-decoration: none; }
a:hover{ color: white; }
.accent{ color: var(--accent); }

/* Buttons */
.btns{ display:block; gap:.75rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1rem; border-radius: 10px; border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn.primary{
  color:#041015;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

/* Sticky frosted nav */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,15,20,.6);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav .links a{
  padding:.55rem .9rem; border-radius:999px;
}
.nav .links a:hover{
  background: rgba(96,165,250,.12);
}

/* Grid helpers */
.grid{ display:grid; gap: 16px; }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1024px){ .grid.cols-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns: 1fr; } }

/* Cards: layered border + subtle gloss + hover lift */
.card, .card_click{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 16px 0;
  padding: 16px;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.card img{max-width:100%;
            height: auto;
            display:block;
            border-radius:2px;
            margin-top:10px;
            object-fit: cover;}
.card::before, .card_click::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 25%);
  pointer-events:none; /* soft top highlight */
}
.card_click:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.card strong{ display:block; font-weight: 650; margin-bottom: .35rem; }
.muted{ color: var(--muted); }

/* Make whole card clickable */
.card_click{ display:block; color:inherit; }

/* Thumbnail helper for work/gallery items */
.thumb{ aspect-ratio: 4/3; overflow:hidden; border-radius:10px; margin-bottom:.6rem; }
.thumb > img{ width:100%; height:100%; display:block; object-fit:cover; }

/* Pills/badges */
.pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  border:1px solid var(--border); background: rgba(255,255,255,.04);
  color: var(--muted); font-size:.85rem; margin-right:.4rem; margin-top:.4rem;
}

/* Section header divider */
section > h2{ position:relative; padding-bottom:.55rem; }
section > h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity:.5;
}

/* Focus styles for accessibility */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}