:root{
  /* DARK GREEN (current). For dark blue, swap these 7 values with the ones below. */
  --paper:#0f1f1a;      /* page background */
  --paper-2:#17302a;    /* boxes */
  --dark:#0a1713;       /* Zander Production section */
  --black:#07110e;      /* footer, text on orange */
  --ink:#eee9df;        /* main text */
  --muted:#a6b3ac;      /* secondary text */
  --line:rgba(238,233,223,.14);
  /* Dark blue: #0e1726 / #16233a / #0a111d / #070c15 / #eee9df / #a3adbd / rgba(238,233,223,.14) */

  --accent:#ff5a1f;
  --dark-text:var(--ink);
  --dark-muted:var(--muted);
  --dark-line:var(--line);
  --max:1280px;
  --pad:clamp(18px,4vw,48px);
  --font:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
b{font-weight:700}
ul,ol{list-style:none}
.hidden{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--black)}

/* type helpers */
.h-xl{font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(46px,7vw,104px);line-height:.86;letter-spacing:-.01em}
.label{font-weight:700;font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--muted)}
.label--accent{color:var(--accent)}
.label--gap{margin-top:26px}
.tag{font-weight:600;font-stretch:85%;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--accent);margin-bottom:10px}
.links{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px;font-weight:700}
.links a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent);text-underline-offset:5px}
.links a:hover{color:var(--accent)}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;padding:14px var(--pad);background:var(--paper);border-bottom:1px solid var(--ink)}
.nav__name{font-weight:900;font-stretch:72%;text-transform:uppercase;text-decoration:none;font-size:20px;letter-spacing:.01em;margin-right:auto}
.nav__links{display:flex;gap:26px}
.nav__links a{text-decoration:none;font-weight:600;font-size:15px}
.nav__links a:hover{color:var(--accent)}
.nav__cv{text-decoration:none;font-weight:700;font-size:15px;background:var(--ink);color:var(--paper);padding:8px 14px}
.nav__cv:hover{background:var(--accent);color:var(--black)}
@media (max-width:760px){.nav__links{display:none}}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,56px) var(--pad) clamp(40px,6vw,72px)}
.hero__hi{font-size:clamp(18px,1.8vw,22px);font-weight:500;margin-bottom:6px}
.hero__title{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(54px,15vw,210px);line-height:.8;letter-spacing:-.015em}
.hero__video{margin-top:clamp(24px,3vw,36px)}
.hero__caption{font-size:14px;color:var(--muted);margin-top:10px}
.hero__bottom{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,5vw,72px);margin-top:clamp(26px,4vw,44px);align-items:start}
.hero__intro{font-size:clamp(19px,2vw,25px);line-height:1.4;font-weight:450}
.hero__facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.hero__facts div{padding:12px 0;border-bottom:1px solid var(--line)}
.hero__facts div:nth-child(odd){padding-right:14px}
.hero__facts dt{font-size:13px;color:var(--muted)}
.hero__facts dd{font-weight:700;font-size:17px}
@media (max-width:860px){.hero__bottom{grid-template-columns:1fr}}

/* services */
.services{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.service{padding:28px 24px 32px 0}
.service + .service{padding-left:24px;border-left:1px solid var(--ink)}
.service__num{font-weight:900;font-stretch:62%;font-size:22px;color:var(--accent)}
.service h2{font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(28px,2.8vw,38px);line-height:.95;margin:6px 0 10px}
.service p{color:var(--muted)}
@media (max-width:860px){.services{grid-template-columns:1fr}.service,.service + .service{padding:24px 0;border-left:0}.service + .service{border-top:1px solid var(--line)}}

/* sections */
.section{max-width:var(--max);margin:0 auto;padding:clamp(64px,9vw,120px) var(--pad)}
.section__head{margin-bottom:clamp(36px,5vw,56px);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.section__head > p{max-width:36ch;color:var(--muted)}
.section__head--split{display:grid;grid-template-columns:1fr 1fr;align-items:end}
.section__head--split p{color:var(--dark-muted);margin-top:12px}
.section__head--split a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.section__head--split{grid-template-columns:1fr}}

/* projects */
.project{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--ink)}
.project--flip .yt{order:2}
.project h3{font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(38px,4.4vw,60px);line-height:.88;margin-bottom:16px}
.project__text > p:not(.tag):not(.links){color:var(--muted)}
.role{margin-top:18px;padding:14px 16px;background:var(--paper-2);border-left:3px solid var(--accent)}
.role dt{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.role dd{font-size:16px}
@media (max-width:860px){.project{grid-template-columns:1fr}.project--flip .yt{order:0}}

/* episodes under a project */
.episodes{order:3;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.episodes:empty{display:none}
.episodes__label{grid-column:1/-1;font-weight:700;font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--muted)}
.ep__title{font-weight:700;font-size:16px;margin-top:10px;line-height:1.3}
.ep__meta{font-size:14px;color:var(--muted)}
.ep-link{display:block;text-decoration:none}
.ep-link .yt__play{background:var(--ink)}
@media (max-width:860px){.episodes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.episodes{grid-template-columns:1fr}}

/* youtube lite */
.yt{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000 center/cover no-repeat;cursor:pointer}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45));pointer-events:none}
.yt__play{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;background:var(--accent);color:var(--black);font-weight:800;font-stretch:80%;text-transform:uppercase;font-size:14px;letter-spacing:.04em;padding:10px 16px 10px 14px;transition:padding .2s}
.yt__play::before{content:"";border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.yt:hover .yt__play{padding-right:22px}
.yt--hero .yt__play{font-size:17px;padding:16px 22px 16px 20px}
.yt--hero .yt__play::before{border-width:9px 0 9px 14px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* rows + sliders */
.row{padding-top:clamp(48px,6vw,80px)}
.row__head{max-width:60ch;margin-bottom:22px}
.row__head h3{font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(32px,3.4vw,46px);line-height:.9;margin-bottom:8px}
.row__head p{color:var(--muted)}
.row__head--inline{max-width:none;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.row__head--inline h3{margin:0}
.dark .row__head p{color:var(--dark-muted)}

.slider__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.slider__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}
.slide__title{font-weight:700;font-size:16px;line-height:1.3;margin-top:10px}
.slide__meta{font-size:14px;color:var(--muted)}
.dark .slide__meta{color:var(--dark-muted)}
.slider--posters .slide{flex:0 0 calc((100% - 56px)/5)}
.slider--posters .slide img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper-2)}
.slider__nav{display:flex;align-items:center;gap:8px;margin-top:16px}
.slider__nav button{width:48px;height:48px;border:1.5px solid currentColor;background:none;color:inherit;font-size:20px;cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.slider__nav button:hover{background:var(--accent);border-color:var(--accent);color:var(--black)}
.slider__count{margin-left:10px;font-size:14px;color:var(--muted);font-weight:600}
.dark .slider__count{color:var(--dark-muted)}
@media (max-width:900px){.slide{flex-basis:calc((100% - 14px)/2)}.slider--posters .slide{flex-basis:calc((100% - 28px)/3)}}
@media (max-width:560px){.slide{flex-basis:86%}.slider--posters .slide{flex-basis:64%}}

/* instagram block */
.insta{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,90px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--ink);align-items:start}
.insta h3{font-weight:900;font-stretch:68%;text-transform:uppercase;font-size:clamp(38px,4.4vw,60px);line-height:.88;margin-bottom:16px}
.insta__text > p:not(.tag):not(.links){color:var(--muted);margin-bottom:12px}
.insta__text b{color:var(--ink)}
.insta__shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.insta__shots img{border:1px solid var(--ink);width:100%}
.reels{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.reels:empty{display:none}
.reels .instagram-media{margin:0!important;min-width:0!important;width:100%!important}
@media (max-width:860px){.insta,.reels{grid-template-columns:1fr}}

/* partners */
.partners{margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--ink);padding-top:22px}
.partners ul{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:14px}
.partners li{font-weight:900;font-stretch:70%;text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--ink);opacity:.82}

/* dark music section */
.dark{background:var(--dark);color:var(--dark-text);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark .h-xl{color:var(--dark-text)}
.highlights{border-top:1px solid var(--dark-line);margin-bottom:36px}
.highlights li{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--dark-line);font-size:clamp(17px,1.6vw,20px);color:var(--dark-muted)}
.highlights li b{color:var(--dark-text)}
.highlights span{font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:var(--accent);padding-top:3px}
@media (max-width:600px){.highlights li{grid-template-columns:1fr;gap:2px}}

.photos{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:240px 240px;gap:10px}
.photos img{width:100%;height:100%;object-fit:cover;background:var(--paper-2)}
.photos__a{grid-row:span 2}
.photos__d{grid-column:span 2}
@media (max-width:760px){.photos{grid-template-columns:1fr 1fr;grid-template-rows:auto}.photos img{aspect-ratio:4/3;height:auto}.photos__a{grid-column:span 2;grid-row:auto}}

.dark .links a{color:var(--dark-text)}
.dark .links a:hover{color:var(--accent)}

/* spotify wrapped */
.wrapped{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.wr{padding:26px 24px 28px;color:#121212;position:relative;overflow:hidden;min-height:300px;display:flex;flex-direction:column;border-radius:12px}
.wr--green{background:#1ed760}
.wr--pink{background:#ff6ec7}
.wr--purple{background:#4100f5;color:#cdf564}
.wr::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-70px;background:rgba(0,0,0,.12)}
.wr--pink::after{border-radius:0;transform:rotate(25deg);background:rgba(65,0,245,.18)}
.wr--purple::after{background:rgba(205,245,100,.12);width:300px;height:120px;border-radius:999px;top:auto;bottom:-40px;right:-60px}
.wr__year{font-weight:800;font-size:15px;margin-bottom:auto;position:relative;z-index:1}
.wr__stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:40px;position:relative;z-index:1}
.wr__stats b,.wr__big{font-weight:800;font-stretch:100%;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.03em;display:block}
.wr__stats span,.wr__big span{display:block;font-size:13px;font-weight:700;letter-spacing:0;margin-top:4px}
.wr__track{font-weight:800;font-size:20px;line-height:1.2;margin:18px 0 22px;position:relative;z-index:1}
.wr__track i{font-weight:500;font-style:normal;opacity:.8;font-size:15px}
.wr__big{position:relative;z-index:1}
.wr__big--sm{font-size:30px;margin-top:16px}
@media (max-width:900px){.wrapped{grid-template-columns:1fr}.wr{min-height:0}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper-2)}
.about__text .h-xl{margin-bottom:24px}
.about__text p{color:var(--muted);margin-bottom:16px;font-size:18px;max-width:62ch}
.about__text b{color:var(--ink)}
.about__text a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
@media (max-width:860px){.about{grid-template-columns:1fr}.about__photo img{max-height:520px}}

.cvgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--ink);padding-top:28px}
.timeline{margin-top:14px}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.timeline span{font-weight:700;font-size:14px;color:var(--accent)}
.timeline b{font-size:17px}
.timeline p{color:var(--muted);font-size:15px}
.plainlist{margin-top:8px;color:var(--muted)}
@media (max-width:860px){.cvgrid{grid-template-columns:1fr}}
@media (max-width:480px){.timeline li{grid-template-columns:1fr;gap:2px}}

/* contact */
.contact{background:var(--accent);color:var(--black)}
.contact__title{font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(54px,13vw,190px);line-height:.8;letter-spacing:-.015em;margin-bottom:clamp(36px,5vw,56px)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.contact__lead{font-size:20px;line-height:1.4;margin-bottom:24px;max-width:40ch}
.contact__list > div{display:grid;grid-template-columns:110px 1fr;padding:12px 0;border-top:1.5px solid var(--black)}
.contact__list dt{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding-top:3px}
.contact__list dd a{font-weight:700;font-size:clamp(17px,1.7vw,20px);text-decoration:none}
.contact__list dd a:hover{text-decoration:underline;text-underline-offset:4px}
.form{display:flex;flex-direction:column;gap:14px;background:var(--paper);color:var(--ink);padding:26px;border:1.5px solid var(--black)}
.form label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
.form input,.form textarea{background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:8px 0;color:var(--ink);font:inherit;font-size:17px;font-weight:400;resize:vertical;border-radius:0}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--accent)}
.btn{align-self:flex-start;margin-top:8px;background:var(--ink);color:var(--paper);border:0;padding:14px 22px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--accent);color:var(--black);outline:1.5px solid var(--black)}
@media (max-width:860px){.contact__grid{grid-template-columns:1fr}}

.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px var(--pad);background:var(--black);color:var(--dark-muted);font-size:14px}
.footer a{text-decoration:none;color:var(--dark-text)}

/* fade */
.fade{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade{opacity:1;transform:none;transition:none}.slider__track{scroll-behavior:auto}}

/* instagram number bubbles */
.bubbles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bubble{background:var(--paper-2);border:1.5px solid var(--line);border-radius:28px;padding:22px 24px 20px;display:flex;flex-direction:column;gap:6px;transition:transform .3s,border-color .3s}
.bubble:hover{transform:translateY(-3px);border-color:var(--accent)}
.bubble b{font-weight:900;font-stretch:66%;font-size:clamp(46px,5.2vw,76px);line-height:.9;letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums}
.bubble span{font-size:15px;line-height:1.35;color:var(--muted)}
.bubble--hot{grid-column:1/-1;background:var(--accent);border-color:var(--accent);border-radius:999px;padding:26px 36px;flex-direction:row;align-items:center;gap:22px}
.bubble--hot b{color:var(--black);font-size:clamp(58px,7.5vw,110px)}
.bubble--hot span{color:var(--black);font-weight:700;font-size:17px;max-width:16ch}
.bubbles--two{grid-template-columns:1fr}
@media (max-width:760px){.bubbles{grid-template-columns:1fr}}
@media (max-width:560px){.bubble--hot{border-radius:28px;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 24px}}