/* =============================================================
   NASC TALENT
   White, quiet, mostly empty. Logo top left, nav top right,
   and the artists do the rest.
   ============================================================= */

:root{
  --paper:   #FFFFFF;
  --paper-2: #F2F1EE;
  --ink:     #0E0E10;
  --dim:     #8A8A90;
  --line:    rgba(14,14,16,.13);

  --sans: 'Figtree', -apple-system, Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  /* height of the fixed header: 2 x padding + the logo's rendered height.
     Every page uses this to clear the bar and nothing more. */
  --bar-h: clamp(86px, 9vw, 106px);
  --top: calc(var(--bar-h) + clamp(8px, 1.6vw, 22px));
  --ease: cubic-bezier(.19,1,.22,1);
  --slow: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--ink); color:var(--paper) }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
:focus-visible{ outline:1px solid var(--ink); outline-offset:4px }

.wrap{ padding:0 var(--gutter); max-width:1600px; margin:0 auto }
.grain{ display:none }   /* grain belonged to the dark build */

/* ---------- micro type ---------- */
.micro, .label, .note, .textlink{
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.label{ margin-bottom:26px }
.note{ letter-spacing:.16em }
.para{ max-width:58ch; margin-bottom:18px; color:rgba(14,14,16,.66); font-size:15.5px }
.textlink{ transition:color .5s var(--slow) }
.textlink:hover{ color:var(--ink) }

.btn{
  display:inline-block; font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  padding:16px 32px; border:1px solid var(--line); color:var(--ink);
  transition:background .5s var(--slow), color .5s var(--slow), border-color .5s var(--slow);
}
.btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* ---------- header: logo left, links right, always visible ---------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px var(--gutter);
  background:var(--paper);
}
.logo{ display:block; width:100%; height:auto; fill:currentColor }
.wordmark{ display:block; width:clamp(82px,8vw,112px); color:var(--ink); transition:opacity .5s var(--slow) }
.wordmark:hover{ opacity:.6 }

.topnav{ display:flex; gap:clamp(16px,2.4vw,30px) }
.topnav a{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); transition:color .5s var(--slow); white-space:nowrap;
}
.topnav a:hover, .topnav a.is-current{ color:var(--ink) }
@media(max-width:420px){ .topnav{ gap:14px } .topnav a{ letter-spacing:.14em } }

/* ---------- pages ---------- */
.page{ display:none }
.page.is-active{ display:block; animation:fadeIn .8s var(--ease) both }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- statement ---------- */
.statement{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,6vw,90px);
  align-items:start; padding:var(--top) 0 clamp(44px,6vw,88px);
  position:relative; z-index:2;
}
@media(max-width:820px){ .statement{ grid-template-columns:1fr } }
.statement-head{
  font-size:clamp(28px,4.4vw,58px); font-weight:300; line-height:1.05;
  letter-spacing:.01em; text-transform:uppercase;
}
.statement-body .para:last-child{ margin-bottom:0 }

.block{ padding:clamp(44px,6vw,84px) 0; border-top:1px solid var(--line); position:relative; z-index:2 }
.block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:34px }
.block-head .label{ margin:0 }
.split{ display:grid; grid-template-columns:180px 1fr; gap:clamp(20px,4vw,60px); align-items:start }
.split .label{ margin:0 }
@media(max-width:820px){ .split{ grid-template-columns:1fr } }

/* =============================================================
   ARTIST GRID
   ============================================================= */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(14px,2vw,26px); position:relative; z-index:2;
}
.grid-item{ display:block }
.grid-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2) }
.grid-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transform:scale(1.02);
  transition:transform 1.4s var(--ease), filter 1s var(--slow);
}
.grid-item:hover .grid-media img{ transform:scale(1.08); filter:grayscale(0) contrast(1.02) }
.grid-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 0 0 }
.grid-name{ font-size:clamp(16px,1.5vw,20px); font-weight:300; letter-spacing:.06em; text-transform:uppercase }
.grid-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); text-align:right }

/* page headings */
.page-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:var(--top) 0 clamp(24px,3.4vw,40px); position:relative; z-index:2 }
.page-title{ font-size:clamp(30px,5vw,64px); font-weight:300; letter-spacing:.02em; text-transform:uppercase; line-height:1 }
.count{ color:var(--dim); font-size:.4em; vertical-align:super; letter-spacing:.1em; margin-left:6px }


/* =============================================================
   ARTISTS — names left, press shot right
   ============================================================= */
.rosterwrap{ position:relative }

.preview{
  position:absolute; top:0; right:0;
  width:clamp(200px, 24vw, 320px); aspect-ratio:4/5;
  pointer-events:none; overflow:hidden;
  opacity:0; transform:translateY(-50%) translateX(14px);
  transition:opacity 480ms var(--ease-out), transform 620ms var(--ease-out), top 620ms var(--ease-io);
  z-index:3;
}
.preview.is-on{ opacity:1; transform:translateY(-50%) translateX(0) }
.preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  filter:grayscale(1) contrast(1.04);
  transition:opacity 480ms var(--ease-out), transform 900ms var(--ease-out);
}
.preview img.is-on{ opacity:1; transform:scale(1) }

/* names give the panel room to sit beside them */
@media(hover:hover) and (pointer:fine){
  .roster{ width:min(100%, 62%) }
}

.roster{ position:relative; z-index:2 }
.roster-item{
  display:block; border-top:1px solid var(--line);
  padding:clamp(20px,3.4vw,42px) 0;
  transition:opacity .7s var(--slow), padding-left .8s var(--ease);
}
.roster-item:last-child{ border-bottom:1px solid var(--line) }
.roster-row{ display:flex; align-items:center; justify-content:space-between; gap:20px }
.roster-name{
  font-size:clamp(30px,5.6vw,76px); font-weight:300; line-height:1;
  letter-spacing:.02em; text-transform:uppercase;
  transition:letter-spacing .9s var(--ease);
}
.roster-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); text-align:right; flex:none }
.roster.is-hovering .roster-item{ opacity:.34 }
.roster.is-hovering .roster-item:hover{ opacity:1; padding-left:clamp(10px,1.4vw,22px) }
.roster-item:hover .roster-name{ letter-spacing:.085em }
.roster-thumb{ display:none }
@media(hover:none), (max-width:820px){
  .preview{ display:none }
  .roster{ width:100% }
  .roster-thumb{ display:block; width:100%; margin-top:14px; aspect-ratio:5/4; object-fit:cover; filter:grayscale(1) contrast(1.04) }
  .roster.is-hovering .roster-item{ opacity:1 }
}

/* =============================================================
   ARTIST PAGE
   ============================================================= */
.artist-head{
  display:grid; grid-template-columns:1fr minmax(220px,340px);
  gap:clamp(24px,5vw,64px); align-items:end;
  padding:var(--top) 0 clamp(24px,3.4vw,44px);
  position:relative; z-index:2;
}
@media(max-width:820px){ .artist-head{ grid-template-columns:1fr } }
.artist-photo{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.04) }
.backlink{ display:inline-block; margin-bottom:22px }
.artist-links{ display:flex; gap:24px; flex-wrap:wrap; margin-top:24px }
.artist-links a{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); transition:color .5s var(--slow);
}
.artist-links a:hover{ color:var(--ink) }

.release{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:clamp(18px,3vw,36px); align-items:center }
@media(max-width:600px){ .release{ grid-template-columns:1fr } }
.release-art{ width:100%; aspect-ratio:1/1; object-fit:cover }
.release-art[hidden]{ display:none }
.release-art-ph{ width:100%; aspect-ratio:1/1; background:var(--paper-2); display:grid; place-items:center }
.release-title{ font-size:clamp(21px,2.6vw,32px); font-weight:300; letter-spacing:.02em; line-height:1.1; margin-bottom:8px }

.player{ margin-top:24px; border:1px solid var(--line); padding:12px }
.player iframe{ border:0; width:100%; display:block }
.bit-shell{ min-height:110px }
.bit-fallback{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 }

/* =============================================================
   CONTACT
   ============================================================= */
.contacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); position:relative; z-index:2 }
.contact{ background:var(--paper); padding:clamp(24px,3vw,38px); transition:background .6s var(--slow) }
.contact:hover{ background:var(--paper-2) }
.contact .label{ margin-bottom:14px }
.mail{ font-size:clamp(16px,1.7vw,21px); font-weight:300; letter-spacing:.01em; word-break:break-word; transition:opacity .4s }
.contact:hover .mail{ opacity:.7 }
.contact .note{ margin-top:10px }

.bookform{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
@media(max-width:760px){ .bookform{ grid-template-columns:1fr } }
.field{ display:flex; flex-direction:column; gap:7px }
.field.full{ grid-column:1/-1 }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim) }
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--sans); font-weight:300; font-size:15px; padding:11px 0;
  transition:border-color .5s var(--slow);
}
.field select{ appearance:none; cursor:pointer; border-radius:0 }
.field textarea{ resize:vertical; min-height:110px }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink) }
.field input::placeholder, .field textarea::placeholder{ color:rgba(138,138,144,.8) }
.form-foot{ flex-direction:row; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.form-status{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); min-height:14px }

/* =============================================================
   FOOTER
   ============================================================= */
footer{ border-top:1px solid var(--line); margin-top:clamp(50px,8vw,110px); position:relative; z-index:2 }
footer .wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; align-items:flex-end;
  padding-top:clamp(44px,6vw,80px); padding-bottom:36px;
}
.foot-mark{ display:block; width:clamp(170px,24vw,330px); color:var(--ink); margin:0; transition:opacity .5s }
.foot-mark:hover{ opacity:.6 }
.foot-contact{ display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.foot-contact .label{ margin:0 }
.foot-contact .mail{ font-size:clamp(14px,1.3vw,17px) }
.foot-links{ display:flex; flex-direction:row; gap:22px; margin-top:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim) }
.foot-links a{ transition:color .5s var(--slow) }
.foot-links a:hover{ color:var(--ink) }
.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding-top:16px; padding-bottom:28px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
}

/* =============================================================
   MOTION
   Every rule below has a job. Durations scale to how often you
   see the thing: hovers are quick, once-per-visit reveals are
   slower. Only transform / opacity / clip-path are animated, so
   everything stays on the compositor.
   ============================================================= */

:root{
  /* decelerating curve — things arriving on screen */
  --ease-out: cubic-bezier(.165,.84,.44,1);
  /* symmetric — things moving while already on screen */
  --ease-io:  cubic-bezier(.65,0,.35,1);

  --dur-hover: 420ms;   /* medium frequency  */
  --dur-enter: 780ms;   /* low frequency     */
  --dur-mark:  1100ms;  /* once per visit    */
}

/* ---------- 1. first load: the mark wipes in ---------- */
/* Job: brand moment. Fires once, so it can afford to be slow. */
.bar .wordmark{
  clip-path:inset(0 100% 0 0);
  animation:markWipe var(--dur-mark) .15s var(--ease-out) forwards;
}
@keyframes markWipe{ to{ clip-path:inset(0 0 0 0) } }

/* nav links follow the mark, staggered */
.topnav a{ opacity:0; transform:translateY(-6px); animation:navIn 620ms var(--ease-out) forwards }
.topnav a:nth-child(1){ animation-delay:.66s }
.topnav a:nth-child(2){ animation-delay:.74s }
@keyframes navIn{ to{ opacity:1; transform:none } }

/* ---------- 2. statement heading: masked lines rise ---------- */
/* Job: understanding — gives the page a starting point for the eye. */
.statement-head .line{ display:block; overflow:hidden }
.statement-head .line > span{
  display:block; transform:translateY(102%);
  transition:transform var(--dur-enter) var(--ease-out);
}
.statement-head.is-in .line:nth-child(1) > span{ transition-delay:60ms }
.statement-head.is-in .line:nth-child(2) > span{ transition-delay:150ms }
.statement-head.is-in .line > span{ transform:translateY(0) }

/* ---------- 3. scroll reveals ---------- */
/* Job: spatial continuity on a page with a lot of empty space. */
[data-reveal]{ opacity:0; transform:translateY(18px);
  transition:opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out) }
[data-reveal].is-in{ opacity:1; transform:none }
/* children stagger themselves */
[data-reveal-stagger] > *{ opacity:0; transform:translateY(14px);
  transition:opacity 640ms var(--ease-out), transform 640ms var(--ease-out) }
[data-reveal-stagger].is-in > *{ opacity:1; transform:none }
[data-reveal-stagger].is-in > *:nth-child(1){ transition-delay:40ms }
[data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:110ms }
[data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:180ms }
[data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:250ms }
[data-reveal-stagger].is-in > *:nth-child(5){ transition-delay:320ms }
[data-reveal-stagger].is-in > *:nth-child(n+6){ transition-delay:380ms }

/* ---------- 4. grid tiles: unmask, then stagger ---------- */
/* Job: spatial — tiles arrive from somewhere rather than blinking on. */
.grid-item{ opacity:0; transform:translateY(22px);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out) }
.grid.is-in .grid-item{ opacity:1; transform:none }
.grid.is-in .grid-item:nth-child(1){ transition-delay:0ms }
.grid.is-in .grid-item:nth-child(2){ transition-delay:90ms }
.grid.is-in .grid-item:nth-child(3){ transition-delay:180ms }
.grid.is-in .grid-item:nth-child(4){ transition-delay:270ms }
.grid.is-in .grid-item:nth-child(n+5){ transition-delay:340ms }

/* the image itself unmasks upward inside its frame */
.grid-media img{ clip-path:inset(100% 0 0 0); transition:clip-path 900ms var(--ease-out),
  transform 1.4s var(--ease), filter 1s var(--slow) }
.grid.is-in .grid-media img{ clip-path:inset(0 0 0 0) }

/* hover: name steps aside, rule draws under */
.grid-meta{ position:relative }
.grid-meta::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-hover) var(--ease-io);
}
.grid-item:hover .grid-meta::after{ transform:scaleX(1) }
.grid-name{ transition:transform var(--dur-hover) var(--ease-out) }
.grid-item:hover .grid-name{ transform:translateX(6px) }

/* ---------- 5. list rows ---------- */
/* Job: responsiveness — confirm which row the pointer owns. */
.roster-item{ position:relative }
.roster-item::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform 560ms var(--ease-io);
}
.roster-item:hover::after{ transform:scaleX(1) }

/* ---------- 6. artist page ---------- */
.artist-photo{
  clip-path:inset(100% 0 0 0);
  animation:photoWipe 1s .12s var(--ease-out) forwards;
  will-change:clip-path;
}
@keyframes photoWipe{ to{ clip-path:inset(0 0 0 0) } }
/* slow drift as you scroll past — depth without parallax jitter */
.artist-photo{ transform:translate3d(0, var(--py, 0px), 0) }

/* ---------- 7. route change ---------- */
/* Job: responsiveness — a hash route has no browser loading cue, so
   make one. Sweeps left to right, then fades. */
.routeline{
  position:fixed; top:0; left:0; right:0; height:1px; z-index:90;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  opacity:0; pointer-events:none;
}
.routeline.is-running{ animation:routeSweep 620ms var(--ease-io) }
@keyframes routeSweep{
  0%{ transform:scaleX(0); opacity:1 }
  70%{ transform:scaleX(1); opacity:1 }
  100%{ transform:scaleX(1); opacity:0 }
}

/* ---------- 8. links ---------- */
/* Job: responsiveness. Underline grows from the left, retreats right. */
.topnav a, .artist-links a, .foot-links a, .textlink{ position:relative }
.topnav a::after, .artist-links a::after, .foot-links a::after, .textlink::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform 380ms var(--ease-io);
}
.topnav a:hover::after, .artist-links a:hover::after,
.foot-links a:hover::after, .textlink:hover::after{ transform:scaleX(1); transform-origin:left }

/* ---------- reduced motion: keep the meaning, drop the movement ---------- */
@media (prefers-reduced-motion: reduce){
  .bar .wordmark{ clip-path:none; animation:none }
  .topnav a{ opacity:1; transform:none; animation:none }
  .statement-head .line > span{ transform:none }
  [data-reveal], [data-reveal-stagger] > *, .grid-item{ opacity:1; transform:none }
  .grid-media img, .artist-photo{ clip-path:none; animation:none }
  .routeline{ display:none }
}

/* ---------- the plus ----------
   Job: responsiveness. Rotates a quarter turn on hover so the link
   reads as an action rather than a label. */
.plus{
  display:inline-block; margin-left:.35em;
  transition:transform 460ms var(--ease-io);
  transform-origin:50% 50%;
}
.topnav a:hover .plus,
.foot-links a:hover .plus{ transform:rotate(90deg) }

/* on the page heading the plus is decorative, so hold it back a little */
.page-title .plus{ color:var(--dim); margin-left:.18em }

@media (prefers-reduced-motion: reduce){
  .plus{ transition:none }
}