/* Minimal, billed-først portefølje — Niklas Lund Brock */
:root{
  --bg:#0b0d11;
  --fg:#e7e9ee;
  --muted:#9aa3b2;
  --card:#11141b;
  --accent:#c6d0f5;
  --ring: rgba(198,208,245,.25);
  --gap: clamp(.75rem, 2vw, 1.25rem);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";}
img{display:block;max-width:100%;height:auto;border-radius:12px;background:#0e1218}
a{color:var(--fg);text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1120px, 92%);margin-inline:auto}
.container.narrow{width:min(800px, 92%)}


.hero-removed{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;padding:1rem .5rem}
.name{font-size:clamp(1.25rem, 3.5vw, 2rem);margin:0}
.tagline{margin:0;color:var(--muted);font-size:.95rem}
.nav{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.nav a{padding:.4rem .7rem;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.03)}

.section{padding: clamp(2.5rem, 6vw, 4.5rem) 0}
h2{font-size: clamp(1.1rem, 3vw, 1.5rem);margin:.25rem 0 1rem}
.muted{color:var(--muted);margin-top:-.5rem}

.grid{display:grid;gap:var(--gap);grid-template-columns: repeat(1, 1fr)}

.item{display:flex;flex-direction:column;gap:.5rem}
.item a{display:block;position:relative;outline: none}
.item a:focus-visible{box-shadow:0 0 0 4px var(--ring);border-radius:12px}
figcaption{color:var(--muted);font-size:.9rem}

.contact{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}

.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:1rem 0;color:var(--muted)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:1rem}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-figure{max-width:min(1200px, 95vw)}
.lightbox-figure img{width:100%;height:auto;border-radius:12px}
.lightbox-figure figcaption{color:#cbd5e1;margin-top:.5rem;text-align:center}
.lightbox-close{position:absolute;top:1rem;right:1rem;font-size:2rem;background:transparent;border:none;color:#fff;cursor:pointer}


.top-hero{padding: clamp(2rem,6vw,4rem) 0 0.5rem;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(to bottom, rgba(11,13,17,.9), rgba(11,13,17,.3) 60%, transparent)}
.site-title{margin:0;font-size:clamp(1.6rem,4.5vw,2.6rem);letter-spacing:.2px}
.site-subtitle{margin:.25rem 0 0;color:var(--muted);font-weight:500;font-size:clamp(1rem,2.5vw,1.25rem)}

.socials{display:flex;gap:.6rem;margin-top:1rem}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.icon-link:hover{transform:translateY(-1px);opacity:.95}


/* Watch links in captions and lightbox */
.item figcaption .watch{color:var(--accent);border-bottom:1px solid rgba(198,208,245,.35)}
.lb-actions{display:flex;justify-content:center;margin-top:.75rem}
.lb-actions .watch{padding:.6rem 1rem;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}


/* Responsive About image tweaks */
.about-photo{width:100%}
.about-photo img{
  width:100%;
  max-width: clamp(220px, 45vw, 420px);
  height:auto;
  border-radius:16px;
  box-shadow: var(--shadow);
  display:block;
}
@media (max-width: 799px){
  .about-wrap{flex-direction: column; align-items:flex-start}
  .about-text{margin-left:0}
  .about-photo{display:flex; justify-content:flex-start}
  .about-photo img{max-width:100%}
}
@media (min-width: 800px){
  .about-wrap{flex-direction: row; align-items:flex-start}
  .about-photo{flex:1; display:flex; justify-content:flex-start}
  .about-text{flex:2; margin-left:2rem}
}


/* Responsive grid: 1 col mobile, 2 cols tablet, 3 cols desktop */
@media (min-width:700px){ .grid{grid-template-columns: repeat(2, 1fr)} }
@media (min-width:1024px){ .grid{grid-template-columns: repeat(3, 1fr)} }