/* SUL TASTO, one-page identity.
   Concept: "sul tasto" is a bow drawn over the fingerboard, a veiled, glassy tone.
   One string runs through the page. It reacts to the cursor, to scroll and to the music.
   Palette follows the journal art direction: near-black, warm ivory, restrained oxblood. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/hankengrotesk-200-800.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dmmono-400.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dmmono-500.woff2') format('woff2')}

:root{
  --ink:#0b0a09;
  --ink-2:#161412;
  --bone:#ece7dc;
  --bone-2:#e1dacb;
  --oxblood:#5c1512;
  --ember:#e0553b;

  --on-ink:#ece7dc;
  --on-ink-2:rgba(236,231,220,.66);
  --on-ink-3:rgba(236,231,220,.56);
  --line-ink:rgba(236,231,220,.16);
  --on-bone:#0b0a09;
  --on-bone-2:rgba(11,10,9,.68);
  --line-bone:rgba(11,10,9,.18);

  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,4.4vw,72px);
  --gap:clamp(16px,2vw,32px);
  --radius-sheet:clamp(20px,2.6vw,36px);

  --fs-hero:clamp(3.15rem,9.4vw,11.5rem);
  --fs-xl:clamp(3rem,8.4vw,10rem);
  --fs-l:clamp(2.1rem,4.4vw,5rem);
  --fs-m:clamp(1.3rem,2.1vw,2.2rem);
  --fs-body:clamp(1.0625rem,1.1vw + .5rem,1.25rem);
  --fs-label:.75rem;

  /* power4.out: arrives fast, settles slowly. power4.inOut for big moves. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--on-ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,video,canvas{display:block;max-width:100%}
::selection{background:var(--ember);color:var(--ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}

.skip-link{position:fixed;top:12px;left:12px;z-index:200;background:var(--bone);color:var(--ink);padding:12px 18px;transform:translateY(-200%)}
.skip-link:focus{transform:none}

.label{font-family:var(--mono);font-size:var(--fs-label);line-height:1.4;letter-spacing:.06em;text-transform:uppercase;font-weight:400}

/* Film grain on large screens only, one static tile, no blend mode. */
@media(min-width:900px){
  body::after{content:'';position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
}

/* ---------- Navigation: floating glass, hides on scroll down ---------- */
.nav{position:fixed;z-index:100;top:14px;left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 8px 8px 20px;border-radius:999px;border:1px solid transparent;transition:transform .6s var(--ease),background-color .5s ease,border-color .5s ease,backdrop-filter .5s ease,padding .5s var(--ease)}
.nav.is-solid{background:rgba(14,12,11,.76);border-color:rgba(236,231,220,.1);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 12px 40px rgba(0,0,0,.28)}
.nav.is-hidden{transform:translateY(calc(-100% - 24px))}
.brand img{width:clamp(128px,11vw,168px);height:auto}
.nav nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav-link{position:relative;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;padding:10px 0}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-cta{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--bone);color:var(--ink);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;transition:background-color .4s ease,color .4s ease,transform .4s var(--ease)}
.nav-cta:active{transform:scale(.97);transition-duration:.1s}
@media(hover:hover){
  .nav-link:hover::after{transform:scaleX(1);transform-origin:left}
  .nav-cta:hover{background:var(--ember);color:var(--ink)}
}

/* ---------- Hero: pinned film, the next section slides over it ---------- */
.hero{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:var(--ink)}
.hero-film{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:62% 50%;transform:translate3d(0,calc(var(--hero-shift,0)*1px),0) scale(1.03);filter:saturate(.8) contrast(1.05) brightness(.66);will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(11,10,9,.82) 0,rgba(11,10,9,.34) 52%,rgba(11,10,9,0) 80%),
  linear-gradient(0deg,rgba(11,10,9,.88) 0,rgba(11,10,9,0) 52%),
  linear-gradient(180deg,rgba(11,10,9,.5) 0,rgba(11,10,9,0) 22%)}
.hero-dim{position:absolute;inset:0;z-index:4;background:var(--ink);opacity:calc(var(--hero-p,0)*.78);pointer-events:none}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(104px,14vh,150px) var(--pad) clamp(22px,3.4vh,40px);transform:scale(calc(1 - var(--hero-p,0)*.05));transform-origin:50% 100%}
.hero-top{display:flex;justify-content:space-between;gap:20px;color:var(--on-ink-2)}
.hero h1{font-size:var(--fs-hero);font-weight:300;line-height:.94;letter-spacing:-.052em;max-width:11.2em;text-wrap:balance;margin-left:-.04em}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--gap);margin-top:clamp(18px,3vh,34px)}
.hero-foot p{max-width:34ch;font-size:clamp(1rem,1.05vw + .45rem,1.2rem);line-height:1.45;color:var(--on-ink-2)}
.scroll-cue{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase}
.scroll-cue i{position:relative;display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(236,231,220,.4);border-radius:50%;font-style:normal;font-size:1.05rem;transition:background-color .4s ease,color .4s ease,border-color .4s ease}
.hero .strand{position:relative;width:100%;height:clamp(64px,9vh,100px);margin-top:clamp(22px,4vh,44px)}
@media(hover:hover){.scroll-cue:hover i{background:var(--bone);color:var(--ink);border-color:var(--bone)}}
.hero-meta{display:flex;gap:clamp(14px,2vw,28px);align-items:center}
.hero-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(224,85,59,.6);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(224,85,59,.55)}70%,100%{box-shadow:0 0 0 10px rgba(224,85,59,0)}}

/* The string: one canvas component, drawn by onepage.js. */
.strand{display:block;touch-action:pan-y}

/* ---------- Words: mask reveal ---------- */
.w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em;padding-right:.04em;margin-right:-.04em}
.wi{display:inline-block;will-change:transform}
.js [data-words]:not(.is-in) .wi{transform:translate3d(0,112%,0)}
[data-words].is-in .wi{transform:none;transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0)*42ms)}
.hero [data-words].is-in .wi{transition-duration:1.3s;transition-delay:calc(var(--i,0)*80ms + 180ms)}
.js [data-fade]{opacity:0;transform:translate3d(0,26px,0)}
.js [data-fade].is-in,.js.is-ready .hero [data-fade]{opacity:1;transform:none;transition:opacity 1s ease,transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
/* ---------- Studio: ivory sheet over the film ---------- */
.studio{position:relative;z-index:3;background:var(--bone);color:var(--on-bone);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;padding:clamp(88px,13vw,190px) var(--pad) clamp(80px,10vw,150px);overflow:clip}
.studio-label{display:flex;justify-content:space-between;color:var(--on-bone-2);padding-bottom:18px;border-bottom:1px solid var(--line-bone)}
.studio h2{font-size:clamp(3.2rem,11.4vw,14rem);font-weight:300;line-height:.9;letter-spacing:-.06em;margin:clamp(40px,7vw,110px) 0 clamp(60px,9vw,140px);max-width:7.2em;text-wrap:balance}
.studio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:56px;align-items:start}
.term{grid-column:1/span 4;padding-top:18px;border-top:1px solid var(--line-bone)}
.term dt{font-size:clamp(1.5rem,2.1vw,2.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.term .pron{display:block;margin-top:8px;color:var(--on-bone-2)}
.term dd{margin:26px 0 0;max-width:30ch;color:var(--on-bone-2);line-height:1.5}
.studio-copy{grid-column:6/span 7;font-size:clamp(1.55rem,2.75vw,3.1rem);line-height:1.18;letter-spacing:-.032em;font-weight:400}
.studio-copy p+p{margin-top:.7em}
[data-scrub] .w{opacity:calc(.16 + var(--on,0)*.84)}
.facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(20px,5vw,80px);border-top:1px solid var(--line-bone)}
.facts div{padding-top:18px;color:var(--on-bone-2)}
.facts strong{display:block;margin-top:10px;color:var(--on-bone);font-weight:400;font-size:clamp(1.15rem,1.5vw,1.5rem);letter-spacing:-.02em;line-height:1.25}

/* ---------- Listen ---------- */
.listen{position:relative;z-index:3;background:var(--ink);padding:clamp(88px,12vw,180px) var(--pad) clamp(80px,10vw,150px)}
.listen-head{display:flex;justify-content:space-between;align-items:end;gap:var(--gap);padding-bottom:clamp(28px,4vw,56px)}
.listen-head h2{font-size:var(--fs-xl);font-weight:300;line-height:.9;letter-spacing:-.055em}
.listen-head p{max-width:24ch;color:var(--on-ink-2);text-align:right;padding-bottom:.6em}
.player{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);border-top:1px solid var(--line-ink)}
.stage{position:relative;min-width:0;padding:clamp(28px,3.4vw,52px) clamp(24px,4.4vw,72px) clamp(26px,3vw,44px) 0;border-right:1px solid var(--line-ink);display:flex;flex-direction:column}
.stage-top{display:flex;justify-content:space-between;gap:20px;color:var(--on-ink-3)}
.stage-top [data-active-context]{text-align:right;color:var(--on-ink-2)}
.stage-title{overflow:clip;margin:clamp(40px,7vw,104px) 0 clamp(26px,3vw,44px);padding-bottom:.1em}
.stage-title h3{font-size:clamp(3.3rem,6.6vw,8rem);font-weight:300;line-height:.96;letter-spacing:-.05em;overflow-wrap:anywhere}
.stage .strand{width:100%;height:clamp(70px,8vw,110px);margin-bottom:6px}
.wave{--progress:0%;position:relative;height:clamp(96px,10vw,148px);isolation:isolate;touch-action:pan-y;cursor:pointer}
.wave::before,.wave::after{content:'';position:absolute;inset:0;-webkit-mask:var(--wave-image) center/100% 100% no-repeat;mask:var(--wave-image) center/100% 100% no-repeat;background:rgba(236,231,220,.26);pointer-events:none}
.wave::after{background:var(--ember);clip-path:inset(0 calc(100% - var(--progress)) 0 0)}
.wave .playhead{position:absolute;z-index:1;top:-6px;bottom:-6px;left:var(--progress);width:1px;background:var(--bone);pointer-events:none}
.wave input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.wave:focus-within{outline:2px solid var(--ember);outline-offset:8px}
.wave-tip{position:absolute;z-index:2;top:-30px;left:0;transform:translateX(-50%);padding:3px 7px;background:var(--bone);color:var(--ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .2s ease}
.wave.is-hover .wave-tip{opacity:1}
.controls{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line-ink)}
.btn-round{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(236,231,220,.34);border-radius:50%;font-size:1.1rem;transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .35s var(--ease)}
.btn-round:active{transform:scale(.94);transition-duration:.08s}
.btn-play{width:92px;height:92px;border-color:var(--bone);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;background:var(--bone);color:var(--ink)}
.controls .time{margin-left:auto;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--on-ink-2);font-variant-numeric:tabular-nums}
.status{min-height:1.5em;margin-top:14px;font-size:.9rem;color:var(--on-ink-2)}
@media(hover:hover){
  .btn-round:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
  .btn-play:hover{background:var(--ember);border-color:var(--ember)}
}

.playlist{padding:0 0 0 clamp(24px,3.4vw,56px)}
.track{position:relative;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:96px;padding:18px 0;text-align:left;border-bottom:1px solid var(--line-ink);transition:padding .6s var(--ease),color .3s ease}
.track:first-child{border-top:0;padding-top:clamp(28px,3.4vw,52px);min-height:calc(96px + clamp(28px,3.4vw,52px) - 18px)}
.track:last-child{border-bottom:0}
.track .idx{font-family:var(--mono);font-size:.74rem;color:var(--on-ink-3);font-variant-numeric:tabular-nums}
.track strong{display:block;font-size:clamp(1.25rem,1.7vw,1.7rem);font-weight:400;letter-spacing:-.025em;line-height:1.15;transition:font-weight .4s ease}
.track small{display:block;margin-top:5px;font-size:.82rem;color:var(--on-ink-3);line-height:1.35}
.track .dur{font-family:var(--mono);font-size:.74rem;color:var(--on-ink-3);font-variant-numeric:tabular-nums}
.track .bars{display:none;align-items:flex-end;gap:2px;height:14px}
.track .bars i{width:2px;height:100%;background:var(--ember);transform-origin:bottom;transform:scaleY(.55)}
.track.is-active{color:var(--ember)}
.track.is-active small{color:rgba(224,85,59,.8)}
.track.is-active .idx{display:none}
.track.is-active .bars{display:flex}
.track.is-playing .bars i{animation:eq 1s ease-in-out infinite}
.track.is-playing .bars i:nth-child(2){animation-delay:-.35s}
.track.is-playing .bars i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@media(hover:hover){.track:hover{padding-left:14px}.track:hover strong{font-weight:500}}

/* Mini player: reads as a floating translucent layer once you scroll away from Listen. */
.mini{position:fixed;z-index:90;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:min(440px,calc(100vw - 32px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 8px 8px 8px;border-radius:999px;background:rgba(18,16,14,.66);border:1px solid rgba(236,231,220,.12);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 18px 50px rgba(0,0,0,.4);overflow:hidden;transform:translate3d(-50%,140%,0);opacity:0;pointer-events:none;transition:transform .7s var(--ease),opacity .4s ease}
.mini.is-visible{transform:translate3d(-50%,0,0);opacity:1;pointer-events:auto}
.mini-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bone);color:var(--ink);font-size:.82rem;transition:background-color .3s ease,transform .3s var(--ease)}
.mini-btn:active{transform:scale(.93);transition-duration:.08s}
.mini-info{min-width:0;text-align:left}
.mini-info strong{display:block;font-weight:500;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-info>span{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--on-ink-2);font-variant-numeric:tabular-nums}
.mini-top{padding:0 16px 0 4px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-2)}
.mini-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(236,231,220,.12)}
.mini-bar i{display:block;height:100%;width:var(--progress,0%);background:var(--ember)}
@media(hover:hover){.mini-btn:hover{background:var(--ember)}.mini-top:hover{color:var(--bone)}}

/* ---------- Method ---------- */
.method{position:relative;z-index:3;background:var(--ink-2);padding:clamp(88px,12vw,180px) var(--pad) clamp(70px,9vw,140px)}
.method h2{font-size:var(--fs-l);font-weight:300;line-height:1;letter-spacing:-.045em;max-width:13em;text-wrap:balance;margin-bottom:clamp(48px,8vw,120px)}
.method-list{border-top:1px solid var(--line-ink);list-style:none;margin:0;padding:0}
.service{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:clamp(22px,2.6vw,40px) 0;border-bottom:1px solid var(--line-ink);isolation:isolate;overflow:hidden;transition:color .5s ease}
.service::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--bone);transform:translateY(101%);transition:transform .7s var(--ease)}
.service h3{grid-column:1/span 6;font-size:clamp(2.1rem,4.6vw,5.4rem);font-weight:300;line-height:1;letter-spacing:-.048em;transition:font-weight .5s ease,transform .7s var(--ease)}
.service p{grid-column:8/span 5;max-width:44ch;color:var(--on-ink-2);transition:color .5s ease,transform .7s var(--ease)}
@media(hover:hover){
  .service:hover{color:var(--on-bone)}
  .service:hover::before{transform:none}
  .service:hover h3{font-weight:400;transform:translateX(clamp(8px,1.4vw,22px))}
  .service:hover p{color:var(--on-bone-2)}
}

/* ---------- Journal ---------- */
.notes{position:relative;z-index:3;background:var(--bone);color:var(--on-bone);padding:clamp(88px,12vw,180px) var(--pad) clamp(70px,9vw,140px)}
.notes-head{display:flex;justify-content:space-between;align-items:end;gap:var(--gap);margin-bottom:clamp(40px,6vw,90px)}
.notes-head h2{font-size:var(--fs-l);font-weight:300;line-height:1;letter-spacing:-.045em;max-width:12em;text-wrap:balance}
.link-arrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor;white-space:nowrap}
.link-arrow span{transition:transform .5s var(--ease)}
.j-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-bone)}
.j-row{position:relative;display:grid;grid-template-columns:minmax(150px,.3fr) minmax(0,1fr) auto;align-items:center;column-gap:var(--gap);padding:clamp(22px,2.6vw,38px) 0;border-bottom:1px solid var(--line-bone);transition:padding .6s var(--ease)}
.j-row .label{color:var(--on-bone-2)}
.j-row h3{font-size:clamp(1.4rem,2.5vw,2.6rem);font-weight:400;line-height:1.1;letter-spacing:-.035em;max-width:24em;text-wrap:balance}
.j-arrow{font-size:1.4rem;transition:transform .5s var(--ease)}
.j-thumb{position:absolute;z-index:2;height:auto;right:clamp(60px,9vw,150px);top:50%;width:clamp(180px,20vw,300px);aspect-ratio:16/9;object-fit:cover;transform:translateY(-50%) scale(.94);clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:clip-path .7s var(--ease),transform .7s var(--ease),opacity .3s ease}
@media(hover:hover){
  .j-row:hover{padding-left:14px}
  .j-row:hover .j-arrow{transform:translate(4px,-4px)}
  .j-row:hover .j-thumb{clip-path:inset(0);opacity:1;transform:translateY(-50%) scale(1)}
  .link-arrow:hover span{transform:translate(3px,-3px)}
}

/* ---------- Contact ---------- */
.contact{position:relative;z-index:3;background:var(--oxblood);color:var(--bone);padding:clamp(96px,14vw,210px) var(--pad) clamp(40px,5vw,72px);min-height:min(100svh,980px);display:flex;flex-direction:column;overflow:clip}
.contact h2{font-size:clamp(3.6rem,12.4vw,15rem);font-weight:300;line-height:.86;letter-spacing:-.06em}
.contact-main{margin-top:auto;padding-top:clamp(64px,9vw,140px)}
.mail{display:inline-block;font-size:clamp(1.55rem,5.4vw,6.4rem);font-weight:300;line-height:1.05;letter-spacing:-.045em;overflow-wrap:anywhere;padding-bottom:.08em;border-bottom:1px solid rgba(236,231,220,.5);transition:border-color .4s ease,color .4s ease}
.mail span{display:inline-block;transition:transform .6s var(--ease)}
.contact-row{display:flex;justify-content:space-between;align-items:center;gap:var(--gap);margin-top:clamp(28px,3.4vw,48px);color:rgba(236,231,220,.78)}
.copy{display:inline-flex;align-items:center;height:48px;padding:0 22px;border:1px solid rgba(236,231,220,.5);border-radius:999px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.copy:active{transform:scale(.97)}
@media(hover:hover){
  .mail:hover{border-color:var(--bone)}
  .mail:hover span{transform:translateX(.14em)}
  .copy:hover{background:var(--bone);color:var(--oxblood);border-color:var(--bone)}
}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:3;background:var(--ink);padding:clamp(40px,5vw,72px) var(--pad) clamp(28px,3vw,44px)}
.footer-logo{width:100%;height:auto;opacity:.92}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:clamp(28px,3.6vw,52px);padding-top:20px;border-top:1px solid var(--line-ink);color:var(--on-ink-2)}
.footer-row a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease}
@media(hover:hover){.footer-row a:hover{color:var(--bone);border-color:currentColor}}

/* ---------- Tablet and mobile: a separate composition, not a smaller desktop ---------- */
@media(max-width:1000px){
  .player{grid-template-columns:1fr}
  .stage{border-right:0;padding-right:0;border-bottom:1px solid var(--line-ink)}
  .playlist{padding-left:0}
  .term{grid-column:1/-1}
  .studio-copy{grid-column:1/-1}
  .service h3{grid-column:1/span 12}
  .service p{grid-column:1/span 12;margin-top:14px}
  .j-row{grid-template-columns:1fr auto}
  .j-row .label{grid-column:1/-1;margin-bottom:10px}
  .j-thumb{display:none}
}
@media(max-width:700px){
  .nav{top:10px;left:12px;right:12px;padding:6px 6px 6px 16px}
  .nav-link{display:none}
  .brand img{width:118px}
  .nav-cta{height:42px;padding:0 16px}
  .hero{min-height:560px}
  .hero-film{object-position:60% 50%}
  .hero-top .hero-meta:last-child{display:none}
  .hero h1{line-height:.96}
  .hero-foot{grid-template-columns:1fr;gap:20px}
  .hero-foot p{max-width:30ch;font-size:1rem}
  .scroll-cue{justify-self:start}
  .scroll-cue i{width:46px;height:46px}
  .studio h2{margin-bottom:56px}
  .facts{grid-template-columns:1fr;gap:0}
  .facts div{padding:16px 0;border-bottom:1px solid var(--line-bone)}
  .listen-head{flex-direction:column;align-items:flex-start}
  .listen-head p{text-align:left;padding:0}
  .stage-top [data-active-context]{max-width:16ch}
  .btn-play{width:80px;height:80px}
  .btn-round{width:48px;height:48px}
  .track{min-height:84px;grid-template-columns:28px minmax(0,1fr) auto}
  .notes-head{flex-direction:column;align-items:flex-start}
  .contact{min-height:88svh}
  .contact h2{font-size:19vw}
  .contact-row{flex-direction:column;align-items:flex-start}
  .footer-row{flex-direction:column}
}
@media(max-width:380px){.brand img{width:104px}.nav-cta{padding:0 12px}}

/* ---------- Accessibility preferences ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .hero-film{transform:none!important}
  .js [data-fade]{opacity:1;transform:none}
  .js .wi{transform:none!important}
  [data-scrub] .w{opacity:1}
}
@media(prefers-reduced-transparency:reduce){
  .nav.is-solid,.mini{-webkit-backdrop-filter:none;backdrop-filter:none;background:#14110f}
}
@media(prefers-contrast:more){
  :root{--on-ink-2:#d6d1c6;--on-ink-3:#c4bfb4;--on-bone-2:#27241f;--line-ink:rgba(236,231,220,.4);--line-bone:rgba(11,10,9,.5)}
}