/* ===============================================
   dlcbeatz.com — B&W editorial (Mikko Gordon feel)
   =============================================== */
:root{
  --bg:#0d0d0d;
  --bg-2:#131313;
  --ink:#f2efe8;
  --ink-soft:#a8a29a;
  --muted:#6c6862;
  --line:#26241f;
  --line-2:#3a3630;
  --paper:#161513;
  --serif:"Fraunces", "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw:1320px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:none}
::selection{background:var(--ink);color:var(--bg)}

/* Visible keyboard focus — cursor:none above only hides the pointer, not focus */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:4px;
  border-radius:2px;
}

/* Anything interactive still uses none-cursor; custom cursor scales up */
a, button, [role="button"]{ cursor:none }

/* ============ Custom cursor ============ */
.cursor{
  position:fixed; top:0; left:0;
  width:10px; height:10px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s ease, height .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  mix-blend-mode:difference;
  opacity:0;
}
.cursor.visible{ opacity:1 }
.cursor.hover{
  width:36px; height:36px;
  background:var(--ink);
  border-color:var(--ink);
}
@media (hover:none), (pointer:coarse){
  body, a, button{ cursor:auto }
  .cursor{ display:none }
}
/* If JS never adds .cursor.visible (e.g. main.js fails to load),
   fall back to the native pointer instead of leaving no cursor at all. */
body:not(.js-cursor-ready), body:not(.js-cursor-ready) a, body:not(.js-cursor-ready) button{
  cursor:auto;
}

/* ============ Reveal on scroll ============ */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none }

/* ============ HERO — full-bleed portrait ============ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url("assets/portrait-hero.jpg");
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.02);
  z-index:0;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(13,13,13,.55) 0%,
      rgba(13,13,13,.15) 22%,
      rgba(13,13,13,.15) 60%,
      rgba(13,13,13,.75) 100%);
  z-index:1;
}

/* Nav */
.nav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:26px 44px;
}
.wordmark{
  display:inline-flex; align-items:center;
  height:34px;
  flex:0 0 auto;
}
.wordmark img{
  height:100%; width:auto; display:block;
  filter:invert(1) brightness(1.1);
}
.nav-links{
  display:flex; gap:34px;
  flex:1 1 auto; justify-content:center;
}
.nav-links a{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); opacity:.85;
  transition:opacity .2s ease;
}
.nav-links a:hover{opacity:1}
.nav-right{
  display:flex; align-items:center; gap:22px;
  flex:0 0 auto;
}
.nav-socials{ display:flex; gap:16px; align-items:center }
.nav-socials a{
  width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  opacity:.85; transition:opacity .2s ease, transform .2s ease;
}
.nav-socials a:hover{opacity:1; transform:translateY(-1px)}
.nav-socials img{
  width:100%; height:100%;
  filter:invert(1) brightness(1.1);
}

/* Language toggle */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em;
  color:var(--ink);
  padding:6px 2px;
}
.lang-toggle .lang-opt{
  opacity:.5;
  transition:opacity .2s ease;
}
.lang-toggle .lang-opt.active{ opacity:1 }
.lang-toggle:hover .lang-opt{ opacity:.85 }
.lang-toggle:hover .lang-opt.active{ opacity:1 }
.lang-toggle .lang-sep{ opacity:.4 }

/* Hero content */
.hero-content{
  position:relative; z-index:2;
  margin-top:auto;
  padding:0 44px 64px;
}
.hero-role{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(28px, 4.4vw, 68px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:16ch;
}

/* ============ Sections ============ */
.section{
  padding:80px 44px;
  max-width:var(--maxw);
  margin:0 auto;
}
.section-head{
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-bottom:40px;
}
.section-label{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

/* ============ About ============ */
.about-text{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(24px, 2.6vw, 40px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:26ch;
  margin:0;
}

/* ============ Embeds (bare) ============ */
.bare-embed{
  width:100%;
  border:0;
  display:block;
  background:transparent;
}

/* ============ Contact ============ */
.contact-inner{
  display:flex; flex-direction:column;
  gap:48px;
  max-width:920px;
}
.contact h3.big{
  font-family:var(--serif);
  font-weight:200;
  font-size:clamp(56px, 10vw, 168px);
  letter-spacing:-.03em;
  line-height:.86;
  margin:0;
}
.contact h3.big em{font-style:italic; color:var(--ink-soft); font-weight:300}
.contact .cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:14px;
  padding:20px 30px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--mono);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  transition:transform .25s ease, background .25s ease;
}
.contact .cta:hover{transform:translateX(4px)}
.contact .cta svg{width:14px; height:14px}
.cta-row{display:flex; gap:16px; flex-wrap:wrap}
.contact .cta-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-2);
}
.contact .cta-outline:hover{background:rgba(242,239,232,.06)}

/* ============ Footer ============ */
.footer{
  border-top:1px solid var(--line);
  padding:44px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted);
}
.footer-socials{display:flex; gap:20px; align-items:center}
.footer-socials a{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  opacity:.7; transition:opacity .2s ease;
}
.footer-socials a:hover{opacity:1}
.footer-socials img{
  width:100%; height:100%;
  filter:invert(1) brightness(1);
}

/* ============ Responsive ============ */
@media (max-width: 900px){
  .nav{padding:18px 22px; gap:14px}
  .wordmark{height:26px}
  .nav-links{display:none}
  .nav-right{gap:16px}
  .nav-socials{gap:14px}
  .nav-socials a{width:22px; height:22px}
  .hero-content{padding:0 22px 44px}
  .section{padding:56px 22px}
  .section-head{margin-bottom:28px; padding-top:16px}
  .contact-inner{gap:32px}
  .footer{
    flex-direction:column; gap:20px; text-align:center;
    padding:32px 22px;
  }
}
@media (max-width: 560px){
  .hero-role{font-size:clamp(24px, 8vw, 40px); max-width:14ch}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .cursor{ display:none }
  html{ scroll-behavior:auto }
}