:root {
  --bg:#0c1209; --bg-lift:#131c0e; --bg-card:#12180e;
  --text:#e4e0d6; --dim:#7c7870; --accent:#b8956a;
  --line:rgba(228,224,214,0.14);
  --line-strong:rgba(228,224,214,0.5);
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@view-transition{navigation:auto}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
a{color:inherit}

/* keyboard focus: visible and on-brand, never the default blue box */
:focus-visible{outline:1px solid var(--line-strong);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
img,video{max-width:100%;display:block}

body::after{
  content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E")
}

/* ── reveal on scroll ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1.2s cubic-bezier(.2,.7,.3,1),transform 1.2s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

/* ── nav ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(1.25rem,6vw,4rem);
  padding-top:env(safe-area-inset-top,0px);
  height:calc(56px + env(safe-area-inset-top,0px));
  background:transparent;border-bottom:1px solid transparent;
  transition:background .5s,border-color .5s
}
nav.scrolled,nav.solid{
  background:rgba(12,18,9,0.9);border-bottom-color:var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.nav-brand{
  font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.2rem;
  letter-spacing:0.01em;text-decoration:none;color:rgba(228,224,214,0.8);
  opacity:0;transition:opacity .5s
}
nav.scrolled .nav-brand,nav.solid .nav-brand{opacity:1}
.nav-links{list-style:none;display:flex;gap:clamp(1rem,3vw,2.5rem);margin-left:auto}
.nav-links a{
  font-size:0.62rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(228,224,214,0.45);text-decoration:none;transition:color .3s;white-space:nowrap
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}

.inner{max-width:880px;margin-inline:auto;padding-inline:clamp(1.25rem,6vw,4rem)}
.label{
  font-size:0.6rem;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(228,224,214,0.35);margin-bottom:3rem
}

/* ── hero ── */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;z-index:0}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(12,18,9,0.15) 0%,rgba(12,18,9,0.1) 35%,rgba(12,18,9,0.7) 68%,rgba(12,18,9,0.98) 100%)
}
.hero-inner{position:relative;z-index:2;padding-block:clamp(5rem,10vw,9rem) clamp(3rem,6vw,5.5rem);text-align:center}
.hero-name{
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(2.6rem,6.5vw,5.4rem);line-height:1;letter-spacing:-0.005em;
  color:rgba(228,224,214,0.82);white-space:nowrap;margin-bottom:1.5rem
}
.hero-tagline{
  font-size:clamp(0.58rem,1.15vw,0.68rem);font-weight:400;letter-spacing:0.28em;
  text-transform:uppercase;color:rgba(228,224,214,0.4);margin-bottom:2.75rem
}
.hero-socials{display:flex;align-items:center;justify-content:center;gap:1.75rem}
.hero-socials a{
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  color:rgba(228,224,214,0.34);text-decoration:none;flex-shrink:0;
  transition:color .35s,transform .35s
}
.hero-socials a:hover{color:rgba(228,224,214,0.92);transform:translateY(-2px)}
.hero-socials svg{width:16px;height:16px;fill:currentColor}

/* ── music ── */
#music{padding-block:clamp(5rem,12vw,9rem);background:var(--bg)}
.album-block{display:flex;gap:clamp(1.75rem,5vw,3.25rem);align-items:stretch}
.album-art{
  width:clamp(170px,30vw,280px);aspect-ratio:1;flex-shrink:0;
  border:1px solid var(--line-strong);padding:7px;background:var(--bg-card)
}
.album-art{overflow:hidden;transition:border-color .5s}
.album-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(85%) contrast(1.06);
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1),filter .6s}
.album-block:hover .album-art{border-color:rgba(228,224,214,0.75)}
.album-block:hover .album-art img{transform:scale(1.04);filter:grayscale(55%) contrast(1.06)}
.album-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.album-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.05;margin-bottom:0.65rem;color:var(--text)
}
.album-meta{font-size:0.7rem;line-height:1.7;letter-spacing:0.04em;color:var(--dim);max-width:34ch}

.stream-links{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(1rem,3vw,2rem);row-gap:0;border-bottom:1px solid var(--line)
}
.stream-link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:0.6rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(228,224,214,0.5);text-decoration:none;
  padding:0.85rem 0;border-top:1px solid var(--line);transition:color .35s
}
.stream-link .arr{font-size:0.7rem;opacity:0;transform:translate(-3px,3px);transition:opacity .35s,transform .35s}
.stream-link:hover{color:var(--text)}
.stream-link:hover .arr{opacity:.55;transform:none}

/* ── contact ── */
#contact{position:relative;padding-block:clamp(5rem,12vw,9rem);border-top:1px solid var(--line);overflow:hidden}
.contact-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.contact-bg::after{content:'';position:absolute;inset:0;background:rgba(8,12,7,0.82)}
.contact-inner{position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;margin-bottom:4rem}
.contact-portrait{width:200px;height:240px;object-fit:cover;object-position:center top;filter:grayscale(100%) contrast(1.05)}
.contact-bio{
  font-weight:300;font-size:clamp(0.95rem,1.8vw,1.1rem);line-height:1.9;
  color:rgba(228,224,214,0.82);margin-bottom:1.75rem;max-width:44ch
}
.contact-name{font-size:0.65rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--dim);margin-bottom:2.25rem}
.contact-cue{font-size:0.58rem;font-weight:400;letter-spacing:0.24em;text-transform:uppercase;color:rgba(228,224,214,0.3);margin-bottom:0.5rem}
.contact-email{
  font-weight:300;font-size:clamp(0.88rem,1.5vw,0.98rem);letter-spacing:0.02em;
  text-decoration:none;color:rgba(228,224,214,0.75);display:inline-block;
  transition:color .3s;border-bottom:1px solid transparent;padding-bottom:2px
}
.contact-email:hover{color:var(--text);border-bottom-color:var(--line-strong)}

.foot-socials{display:flex;flex-wrap:wrap;align-items:center;gap:0.3rem 0;padding-top:2rem;border-top:1px solid var(--line)}
.foot-social{
  font-size:0.6rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(228,224,214,0.32);text-decoration:none;transition:color .3s;padding:0.2rem 0.85rem 0.2rem 0
}
.foot-social:hover{color:var(--text)}
.foot-sep{color:rgba(228,224,214,0.14);font-size:0.6rem;user-select:none;padding-right:0.85rem}

footer{
  padding-block:1.5rem;padding-inline:clamp(1.25rem,6vw,4rem);
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:0.5rem
}
.footer-text{font-size:0.55rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(228,224,214,0.28)}
.footer-text a{color:inherit;text-decoration:none;transition:color .3s}
.footer-text a:hover{color:var(--text)}

/* ══ IMPRESSIONS ══ */
#impressions{padding-block:calc(56px + clamp(3.5rem,9vw,6rem)) clamp(4rem,10vw,7rem)}
.imp-intro{max-width:46ch;margin-bottom:clamp(2.5rem,6vw,4rem)}
.imp-title{
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.05;
  color:rgba(228,224,214,0.85);margin-bottom:1rem;text-wrap:balance
}
.imp-sub{font-size:0.72rem;letter-spacing:0.16em;line-height:1.8;color:var(--dim);text-wrap:balance}

.imp-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}

/* tile aspect ratios */
.ar-16-9{aspect-ratio:16/9}
.ar-4-3{aspect-ratio:4/3}
.ar-3-2{aspect-ratio:3/2}
.ar-1-1{aspect-ratio:1/1}
.ar-2-3{aspect-ratio:2/3}
.ar-3-4{aspect-ratio:3/4}
.ar-9-16{aspect-ratio:9/16}
.imp-grid{display:grid;gap:clamp(0.55rem,1.6vw,1.1rem)}
/* column ratios are the media's true aspect ratios, so every tile in a row
   ends at exactly the same height with zero cropping */
.imp-row{display:grid;gap:clamp(0.55rem,1.6vw,1.1rem);align-items:start}
.imp-row.r2{grid-template-columns:0.75fr 1fr}          /* 3:4  + 1:1  */
.imp-row.r3{grid-template-columns:0.5625fr 1.778fr}    /* 9:16 + 16:9 */
.imp-row.r4{grid-template-columns:0.667fr 0.75fr}      /* 2:3  + 3:4  */

.tile{
  position:relative;overflow:hidden;background:var(--bg-card);
  border:1px solid rgba(228,224,214,0.08);cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;display:block}
.tile>img,.tile>video{transition:transform 1.4s cubic-bezier(.2,.7,.3,1),opacity .6s}
.tile:hover>img{transform:scale(1.035)}
.tile::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(to top,rgba(8,12,7,0.78) 0%,rgba(8,12,7,0.28) 20%,transparent 42%),
    linear-gradient(to bottom,rgba(8,12,7,0.42) 0%,transparent 18%);
  opacity:.9;transition:opacity .5s
}
.tile:hover::after{opacity:.68}

.tile video{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.tile.playing video{opacity:1}
.tile.playing>img{opacity:0}

.tile .cap{
  position:absolute;left:0;bottom:0;z-index:3;
  padding:0.85rem clamp(0.85rem,2vw,1.15rem);
  font-size:0.55rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(228,224,214,0.72);transition:color .4s;
  text-shadow:0 1px 4px rgba(8,12,7,0.85)
}
.tile:hover .cap{color:#fff}

.tile .vmark{
  position:absolute;top:0;right:0;z-index:3;
  padding:0.85rem clamp(0.85rem,2vw,1.15rem);
  font-size:0.5rem;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(228,224,214,0.7);display:flex;align-items:center;gap:0.4rem;
  transition:opacity .4s;text-shadow:0 1px 4px rgba(8,12,7,0.85)
}
.tile .vmark svg{width:9px;height:9px;fill:currentColor}
.tile.playing .vmark{opacity:0}

/* ── lightbox ── */
.lb{
  position:fixed;inset:0;z-index:500;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,9,5,0.96);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:clamp(1rem,5vw,3rem);
  opacity:0;transition:opacity .4s
}
.lb.open{display:flex}
.lb.shown{opacity:1}
.lb-stage{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:100%;max-height:calc(100svh - 7rem);width:auto;height:auto;object-fit:contain}
.lb-close{
  position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:1.25rem;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:rgba(228,224,214,0.6);
  font-size:1.4rem;line-height:1;transition:color .3s
}
.lb-close:hover{color:var(--text)}
.lb-cap{
  position:absolute;left:0;right:0;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));
  text-align:center;font-size:0.55rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(228,224,214,0.4)
}

.imp-back{
  display:inline-flex;align-items:center;gap:0.6rem;margin-top:clamp(3rem,7vw,4.5rem);
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(228,224,214,0.4);text-decoration:none;transition:color .3s
}
.imp-back:hover{color:var(--text)}
.imp-back .ar{transition:transform .35s}
.imp-back:hover .ar{transform:translateX(-4px)}

/* ── mobile ── */
@media(max-width:700px){
  .album-block{flex-direction:column;gap:1.75rem}
  .album-art{width:min(100%,260px)}
  .stream-links{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:1.75rem}
  .contact-portrait{width:min(100%,260px);height:300px;object-position:center 15%}
  .hero-name{white-space:normal}
  .imp-row.r2,.imp-row.r3,.imp-row.r4{grid-template-columns:1fr}
  .foot-social{padding-right:0.7rem}
  .foot-sep{padding-right:0.7rem}

  /* stacked single column: keep tall media from swallowing the screen */
  .tile{max-height:64svh}
  .imp-intro{max-width:none}
}
@media(max-width:400px){
  .nav-links{gap:0.85rem}
  .nav-links a{font-size:0.56rem;letter-spacing:0.14em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
  .reveal{opacity:1;transform:none}
}