:root {
  --bg: #120f0d; --surface: #1a1512; --surface-soft: #211a16;
  --ink: #f1e8dc; --dim: #a89b8d; --line: rgba(241,232,220,.12);
  --acid: #a94b3d; --copper: #8f5a3c; --paper: #d8cbbb; --paper-ink: #251d18;
  --pad: clamp(22px,4.2vw,72px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { background: radial-gradient(ellipse at 84% 6%,rgba(143,90,60,.08),transparent 34%),radial-gradient(ellipse at 10% 55%,rgba(94,52,37,.05),transparent 38%),var(--bg); color: var(--ink); font-family: "Helvetica Neue","Arial Nova",Arial,sans-serif; line-height: 1.4; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; }
::selection { background: var(--acid); color: var(--ink); }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 92px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.wordmark { justify-self: start; font-size: 21px; line-height: 1; letter-spacing: -.08em; font-weight: 700; }
.navigation { justify-self: center; display: flex; gap: 30px; }
.navigation a { position: relative; transition: color .45s cubic-bezier(.22,1,.36,1); }
.navigation a::after { content:""; position:absolute; height:1px; inset:auto 0 -5px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s ease; }
.navigation a:hover::after { transform:scaleX(1); transform-origin:left; }
.header-end { justify-self:end; display:flex; align-items:center; gap:28px; }
.location,.language-switcher span { color:var(--dim); }
.language-switcher { display:flex; align-items:center; gap:6px; }
.language-switcher button { border:0; padding:4px 0; background:transparent; color:var(--dim); font-size:11px; letter-spacing:.08em; cursor:pointer; transition:color .25s ease; }
.language-switcher button:hover,.language-switcher button.is-active { color:var(--ink); }
.hero { min-height:100svh; padding:clamp(125px,15vh,165px) var(--pad) 34px; display:flex; flex-direction:column; position:relative; isolation:isolate; border-bottom:1px solid var(--line); }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 76% 36%,rgba(184,95,63,.065),transparent 36%),radial-gradient(ellipse at 50% 110%,rgba(99,53,34,.1),transparent 42%); }
.hero-kicker { display:flex; align-items:center; justify-content:space-between; padding-bottom:clamp(35px,5vh,64px); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); }
.availability { display:flex; align-items:center; gap:9px; }
.availability i { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(169,75,61,.1),0 0 18px rgba(169,75,61,.15); animation:blink 2s ease-in-out infinite; }
.hero-title { font-size:clamp(76px,12.6vw,210px); font-weight:500; line-height:.76; letter-spacing:-.082em; white-space:nowrap; }
.title-line { display:block; overflow:hidden; padding:.08em .1em .1em 0; }
.title-line>span { display:block; transform:translateY(115%); animation:titleIn 1.25s cubic-bezier(.16,1,.3,1) forwards .12s; }
.hero-title .title-line:first-child { color:#c4b7a8; }
.title-line--offset { text-align:right; padding:.08em .12em .24em .08em; margin-bottom:-.14em; }
.title-line--offset>span { animation-delay:.24s; }
em { color:var(--ink); font-family:inherit; font-size:1.045em; font-style:normal; font-weight:600; line-height:.87; letter-spacing:-.06em; }
.hero-bottom { margin-top:auto; padding-top:45px; display:flex; justify-content:space-between; align-items:end; }
.hero-bottom>p { max-width:450px; font-size:clamp(17px,1.45vw,23px); letter-spacing:-.02em; }
.circle-link { width:110px; height:110px; border:1px solid var(--line); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; transition:background .35s,color .35s,transform .35s; }
.circle-link svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.4; }
.circle-link:hover { background:var(--acid); color:var(--ink); border-color:var(--acid); transform:translateY(-3px); }
.level-meter { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); height:35px; display:flex; gap:3px; align-items:end; opacity:.24; }
.level-meter span { width:2px; height:calc(5px + var(--h,10)*1px); background:var(--ink); animation:meter 3.2s ease-in-out infinite alternate; }
.level-meter span:nth-child(3n){--h:24;animation-delay:-.5s}.level-meter span:nth-child(4n){--h:15;animation-delay:-.9s}.level-meter span:nth-child(5n){--h:29;animation-delay:-.2s}
.section { padding:clamp(110px,15vw,220px) var(--pad); border-bottom:1px solid var(--line); }
.work { background:linear-gradient(180deg,rgba(26,21,18,.36),rgba(18,15,13,0) 28%); }
.about { background:radial-gradient(ellipse at 92% 48%,rgba(143,90,60,.055),transparent 38%),linear-gradient(180deg,rgba(26,21,18,.18),rgba(18,15,13,.04)); }
.section-label { display:flex; gap:38px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.section-label span { color:var(--ink); }
.section-intro { display:grid; grid-template-columns:1fr 3fr; align-items:start; margin-bottom:clamp(70px,10vw,150px); }
.section h2 { color:#c4b7a8; font-size:clamp(54px,7.6vw,126px); line-height:.89; letter-spacing:-.065em; font-weight:500; }
.work h2 { color:var(--ink); }.work h2 em { color:var(--dim); font-size:.84em; font-weight:400; letter-spacing:-.045em; }
.project-list { border-top:1px solid var(--line); }
.project { position:relative; min-height:154px; display:grid; grid-template-columns:.65fr 2fr .85fr 70px; gap:28px; align-items:center; border-bottom:1px solid var(--line); cursor:pointer; outline:none; }
.project::before { content:""; position:absolute; inset:0 calc(var(--pad)*-1); z-index:-1; background:#251c18; transform:scaleY(0); transform-origin:bottom; transition:transform .55s cubic-bezier(.22,1,.36,1); }
.project:hover { color:var(--ink); padding:0 12px; }.project:hover::before,.project:focus-within::before { transform:scaleY(1); }
.project-artist,.project-meta { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); transition:color .45s ease; }
.project:hover .project-artist,.project:hover .project-meta,.project:focus-within .project-artist,.project:focus-within .project-meta { color:rgba(241,232,220,.78); }
.project-main { grid-column:2; }.project-main h3 { font-size:clamp(34px,4.2vw,70px); line-height:1; letter-spacing:-.055em; font-weight:500; }
.project-artist { margin-bottom:9px; }.project-meta { grid-column:3; display:flex; gap:12px; }
.play-button { grid-column:4; justify-self:end; width:54px; height:54px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; background:transparent; cursor:pointer; transition:border-color .45s ease,background .45s ease,transform .55s cubic-bezier(.22,1,.36,1); }
.play-button svg { width:24px; height:24px; fill:currentColor; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.project:hover .play-button,.project:focus-within .play-button { border-color:rgba(241,232,220,.32); background:rgba(169,75,61,.16); transform:scale(1.06); }
.project:hover .play-button svg { transform:scale(1.08); }
.work-note { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-top:28px; text-align:right; }
.about-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(60px,10vw,170px); margin-top:clamp(70px,10vw,140px); }
.about-copy { padding-top:16px; }.about-copy>p { color:var(--dim); max-width:560px; font-size:clamp(16px,1.25vw,20px); }
.about-copy .lead { color:var(--ink); font-size:clamp(21px,2vw,31px); line-height:1.3; letter-spacing:-.03em; margin-bottom:32px; }
.services { margin-top:75px; border-top:1px solid var(--line); }.services div { display:grid; grid-template-columns:60px 1fr; border-bottom:1px solid var(--line); padding:15px 0; }
.services dt { color:var(--dim); font-size:10px; }.services dd { font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.process { background:radial-gradient(ellipse at 12% 0%,rgba(255,247,234,.2),transparent 38%),linear-gradient(135deg,#dbcfbf,var(--paper)); color:var(--paper-ink); }
.process h2,.process .section-label { color:#76685c; }.process .section-label span,.process em { color:var(--paper-ink); }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(37,29,24,.2); }
.process-grid article { min-height:330px; padding:26px 34px 0 0; border-right:1px solid rgba(37,29,24,.2); display:flex; flex-direction:column; }
.process-grid article+article { padding-left:34px; }.process-grid article:last-child { border:0; }
.process-grid span { font-size:10px; color:#76685c; }.process-grid h3 { margin-top:auto; font-size:clamp(36px,4vw,62px); font-weight:500; letter-spacing:-.055em; }
.process-grid p { max-width:320px; min-height:70px; margin-top:13px; color:#6f6257; font-size:14px; }
.contact { min-height:100svh; padding:clamp(105px,12vw,180px) var(--pad) 35px; display:flex; flex-direction:column; background:radial-gradient(ellipse at 70% 88%,rgba(143,90,60,.09),transparent 37%),linear-gradient(180deg,var(--surface),var(--bg) 45%); }
.contact-top { display:flex; justify-content:space-between; align-items:start; font-size:13px; }.contact-top>p:last-child { color:var(--dim); }
.contact-main { margin:auto 0; padding:clamp(70px,8vw,120px) 0; }.contact-heading { max-width:1250px; font-size:clamp(65px,10.5vw,168px); line-height:.88; letter-spacing:-.075em; font-weight:500; }
.contact-copy { max-width:520px; margin:clamp(34px,4vw,58px) 0 clamp(48px,6vw,82px); color:var(--dim); font-size:clamp(16px,1.3vw,20px); }
.contact-actions { border-top:1px solid var(--line); }.contact-row { min-height:74px; display:grid; grid-template-columns:.65fr 2fr auto; align-items:center; gap:24px; border-bottom:1px solid var(--line); transition:background .5s cubic-bezier(.22,1,.36,1),color .4s ease; }
.contact-row>span { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }.contact-row strong { font-size:clamp(17px,1.6vw,24px); font-weight:400; letter-spacing:-.02em; }
.contact-row>svg { width:24px; fill:none; stroke:currentColor; stroke-width:1.2; transition:transform .35s ease; }
.instagram-handle { display:inline-flex; align-items:center; gap:9px; }.instagram-icon { width:16px; height:16px; flex:0 0 16px; fill:none; stroke:currentColor; stroke-width:1.35; }.instagram-dot { fill:currentColor; stroke:none; }
.contact-row:hover { background:rgba(241,232,220,.025); } a.contact-row:hover { color:var(--ink); } a.contact-row:hover .external-arrow { transform:translate(3px,-3px); }
.copy-button,.modal-close { border:1px solid var(--line); border-radius:999px; padding:9px 14px; background:transparent; font-size:9px; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition:color .25s,border-color .25s,background .25s; }
.copy-button:hover,.copy-button.is-copied { color:var(--ink); border-color:var(--acid); background:rgba(169,75,61,.18); }.contact-footer { display:flex; justify-content:flex-end; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.project-modal { position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:22px; }.project-modal[hidden]{display:none}
.modal-backdrop { position:absolute; inset:0; border:0; background:rgba(8,6,5,.76); backdrop-filter:blur(10px); cursor:pointer; animation:modalFade .35s ease both; }
.modal-panel { position:relative; width:min(680px,100%); padding:clamp(24px,4vw,42px); background:var(--surface); border:1px solid var(--line); box-shadow:0 28px 90px rgba(5,3,2,.48); animation:modalIn .5s cubic-bezier(.16,1,.3,1) both; }
.modal-header { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:34px; }.modal-header span,.modal-header p { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.modal-header h3 { margin:7px 0 9px; font-size:clamp(35px,5vw,58px); line-height:1; letter-spacing:-.055em; font-weight:500; }.modal-close { color:var(--dim); }.modal-close:hover { color:var(--ink); border-color:rgba(241,232,220,.32); }
.spotify-embed { min-height:152px; }.spotify-embed iframe { display:block; width:100%; height:152px; border:0; border-radius:12px; } body.modal-open { overflow:hidden; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }
.project.reveal { transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1),color .45s ease,padding .55s cubic-bezier(.22,1,.36,1); }
@keyframes titleIn{to{transform:translateY(0)}}@keyframes blink{50%{opacity:.35}}@keyframes meter{to{height:9px}}@keyframes modalFade{from{opacity:0}}@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
@media(max-width:800px){
  .site-header{height:76px;grid-template-columns:auto 1fr auto;column-gap:16px}.navigation{justify-self:center;gap:12px}.navigation a{font-size:9px}.header-end{gap:0}.location{display:none}
  .hero{padding-top:118px;min-height:100svh}.hero-kicker{align-items:flex-start;padding-right:2vw;padding-left:3vw}.hero-kicker>span:first-child{max-width:140px}
  .hero-title{font-size:clamp(68px,20.7vw,150px);line-height:.82;white-space:normal}.hero-title .title-line:first-child{padding-left:3vw}.title-line--offset{text-align:left;padding-left:5vw;transform:translateY(-.045em)}
  .hero-bottom{align-items:end;gap:20px;padding-right:2vw;padding-left:3vw}.hero-bottom>p{max-width:250px;font-size:16px}
  .circle-link{width:80px;height:80px;flex:0 0 80px;gap:5px;margin-bottom:6px;padding:10px 8px 12px}.circle-link span{display:block;max-width:58px;text-align:center;line-height:1.15}.circle-link svg{width:16px;height:16px;flex:0 0 16px;margin-top:-1px}.level-meter{display:none}
  .section-intro{display:block}.section-intro .section-label{margin-bottom:65px}.section h2{font-size:clamp(52px,15vw,92px)}
  .project{min-height:142px;grid-template-columns:38px 1fr 48px;gap:12px}.project-main{grid-column:2}.project-meta{display:none}.project-main h3{font-size:clamp(34px,10vw,55px)}.play-button{grid-column:3;width:44px;height:44px}
  .about-layout{display:block}.about-copy{margin-top:65px}.process-grid{grid-template-columns:1fr}.process-grid article,.process-grid article+article{min-height:210px;padding:25px 0;border-right:0;border-bottom:1px solid rgba(37,29,24,.2)}.process-grid h3{margin-top:45px}.process-grid p{min-height:0}
  .contact{min-height:82svh}.contact-top>p:last-child{display:none}.contact-heading{font-size:clamp(58px,16vw,92px)}.contact-row{grid-template-columns:1fr auto;gap:10px;padding:16px 0}.contact-row>span{grid-column:1/-1}.contact-row strong{font-size:16px}.modal-panel{padding:24px 20px}
}
@media(max-width:430px){.site-header{column-gap:11px}.navigation{gap:8px}.navigation a{font-size:8px;letter-spacing:.04em}.language-switcher{gap:4px}.language-switcher button{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.title-line>span{transform:none}}
