/* World Rhythm — draft landing. No build step. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../assets/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../assets/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#151412; --ink-2:#1d1c19;
  --cream:#efe9dc; --cream-dim:#b9b3a6;
  --forest:#1f3a2e; --forest-2:#27493a;
  --accent:#e2b54b;
  --pad:clamp(20px,4vw,56px);
  --wide:125%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;background:var(--ink);color:var(--cream);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul{list-style:none}
.skip{position:absolute;left:-999px;top:0;background:var(--cream);color:var(--ink);padding:8px 12px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* type helpers */
h1,h2,h3,.nav__brand,.pill,.eyebrow,.card__meta,.footer__label,.section-head__count,.tags li,.file{font-stretch:var(--wide);text-transform:uppercase;letter-spacing:.01em}

/* NAV */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);background:rgba(21,20,18,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(239,233,220,.08)}
.nav__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px}
.nav__logo{display:block}
.nav__links{display:flex;gap:28px;font-stretch:var(--wide);text-transform:uppercase;font-size:13px}
.nav__links a{text-decoration:none;opacity:.8}
.nav__links a:hover{opacity:1}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid currentColor;border-radius:999px;padding:9px 18px;font-size:12px;font-weight:600;text-decoration:none;transition:background .2s,color .2s;white-space:nowrap}
.pill:hover{background:var(--cream);color:var(--ink)}
.pill--solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.pill--solid:hover{background:var(--accent);border-color:var(--accent)}
.pill--lg{font-size:14px;padding:16px 28px}

/* HERO */
.hero{position:relative;min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);padding-top:120px;overflow:hidden}
.hero__title{font-size:clamp(64px,15vw,240px);line-height:.86;font-weight:800;letter-spacing:-.02em}
.hero__line{max-width:640px;margin-top:28px;font-size:clamp(18px,1.8vw,22px);color:var(--cream-dim)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__ring{position:absolute;top:clamp(80px,10vw,120px);right:var(--pad);width:clamp(150px,20vw,260px);aspect-ratio:1}
.hero__ring svg{width:100%;height:100%;animation:spin 28s linear infinite;fill:var(--cream);font-stretch:var(--wide);font-size:14px;font-weight:600;letter-spacing:.12em}
.hero__mark{position:absolute;inset:30%;width:40%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero__ring svg{animation:none}html{scroll-behavior:auto}}

/* STRIP */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:clamp(180px,26vw,380px);overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.strip:hover img{filter:none}

/* ROSTER */
.roster{background:var(--forest);padding:clamp(56px,8vw,120px) var(--pad)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1.5px solid rgba(239,233,220,.25);padding-bottom:18px;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{font-size:clamp(40px,7vw,96px);line-height:.9;font-weight:800}
.section-head__count{font-size:12px;opacity:.75}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.card{display:flex;flex-direction:column}
.card__img{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--forest-2)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.card:hover .card__img img{transform:scale(1.03)}
.card__img figcaption{position:absolute;left:10px;bottom:8px;font-size:11px;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.card__body{padding-top:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.card__name{font-size:clamp(24px,2.3vw,34px);line-height:1;font-weight:700}
.card__meta{font-size:11px;color:var(--accent);font-weight:600}
.card__bio{font-size:15.5px;color:rgba(239,233,220,.88)}
.card__more summary{cursor:pointer;font-size:12px;font-stretch:var(--wide);text-transform:uppercase;font-weight:600;list-style:none;opacity:.8}
.card__more summary::-webkit-details-marker{display:none}
.card__more summary::after{content:" +"}
.card__more[open] summary::after{content:" –"}
.card__more p{margin-top:10px;font-size:14.5px;color:rgba(239,233,220,.78)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:10.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(239,233,220,.1)}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.links a{text-decoration:none;border-bottom:1px solid rgba(239,233,220,.35)}
.links a:hover{border-color:var(--cream)}
.files{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.file{flex:1;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1.5px solid rgba(239,233,220,.6);font-size:11.5px;font-weight:600;text-decoration:none}
.file span{font-size:10px;opacity:.6}
.file:not(.is-soon):hover{background:var(--cream);color:var(--forest)}
.file.is-soon{border-style:dashed;opacity:.7;cursor:default}
.file--request{border-radius:999px;justify-content:center;gap:10px;padding:13px 18px;transition:background .2s,color .2s,border-color .2s}
.file--request span{font-size:12px;opacity:.8}
.file--request:hover{border-color:var(--cream)}

/* ABOUT */
.about{padding:clamp(64px,9vw,140px) var(--pad);background:var(--ink)}
.about__big{font-size:clamp(40px,7.4vw,120px);line-height:.9;font-weight:800;max-width:14ch}
.about__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(40px,6vw,80px)}
.about__cols h3{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:14px}
.about__cols p+p{margin-top:14px}
.about__cols p{color:rgba(239,233,220,.85)}
.list li{padding:10px 0;border-bottom:1px solid rgba(239,233,220,.15)}
.list li:first-child{border-top:1px solid rgba(239,233,220,.15)}

/* BOOKING */
.booking{scroll-margin-top:0;background:var(--cream);color:var(--ink);padding:clamp(64px,9vw,140px) var(--pad);text-align:center}
.eyebrow{font-size:12px;font-weight:600;opacity:.7}
.booking__title{font-size:clamp(40px,7vw,110px);line-height:.92;font-weight:800;margin-top:14px}
.booking__text{max-width:560px;margin:24px auto 0;font-size:18px;opacity:.8}
.booking__actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:36px}
.booking .pill--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.booking .pill--solid:hover{background:var(--forest);border-color:var(--forest)}
.booking__mail{font-size:clamp(18px,2vw,24px);font-stretch:var(--wide);text-decoration:none;border-bottom:2px solid currentColor}

/* FOOTER */
.footer{padding:56px var(--pad) 28px;background:var(--ink-2);font-size:14px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.footer__claim{margin-top:14px;max-width:32ch;color:var(--cream-dim)}
.footer__label{font-size:10.5px;font-weight:600;opacity:.6;margin-bottom:8px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__small{margin-top:48px;font-size:12px;opacity:.5}

.placeholder,.placeholder-inline{color:#ffb38a;font-style:italic}
.placeholder{background:rgba(255,179,138,.08);border:1px dashed rgba(255,179,138,.5);padding:8px 10px;display:inline-block;font-size:14px}

/* LEGAL PAGES */
.legal{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,96px) var(--pad)}
.legal h1{font-size:clamp(36px,6vw,72px);line-height:.95;margin-bottom:28px}
.legal h2{font-size:14px;color:var(--accent);margin:32px 0 10px}
.legal p,.legal li{color:rgba(239,233,220,.85)}
.legal .placeholder{display:block;margin:6px 0}

/* RESPONSIVE */
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .about__cols{grid-template-columns:1fr 1fr}
  .about__cols>div:first-child{grid-column:1/-1}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav__links{display:none}
  .hero{min-height:auto;padding-top:200px}
  .hero__ring{width:140px;top:32px}
  .cards{grid-template-columns:1fr}
  .about__cols{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .strip{height:150px}
}
.section-head__count{white-space:nowrap}
@media (max-width:640px){.hero__title{font-size:13.6vw}.hero__cta .pill{flex:1 1 100%}}

/* BOOKING FORM */
.bform{max-width:860px;margin:44px auto 0;text-align:left}
.bform__hp{display:none}
.bform__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.bform__field{display:flex;flex-direction:column;gap:7px}
.bform__field--full{grid-column:1/-1}
.bform__field span{font-size:11px;font-weight:600;font-stretch:var(--wide);text-transform:uppercase;letter-spacing:.01em;opacity:.75}
.bform input,.bform select,.bform textarea{font:inherit;font-size:16px;color:var(--ink);background:rgba(21,20,18,.04);border:1.5px solid rgba(21,20,18,.35);border-radius:10px;padding:12px 14px;width:100%;appearance:none;-webkit-appearance:none;transition:border-color .2s,background .2s}
.bform textarea{resize:vertical;min-height:88px}
.bform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23151412' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;cursor:pointer}
.bform select:invalid{color:rgba(21,20,18,.5)}
.bform ::placeholder{color:rgba(21,20,18,.42)}
.bform input:hover,.bform select:hover,.bform textarea:hover{border-color:rgba(21,20,18,.6)}
.bform input:focus,.bform select:focus,.bform textarea:focus{outline:none;border-color:var(--forest);background:#fff8ea;box-shadow:0 0 0 3px rgba(31,58,46,.18)}
.bform__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:28px}
.bform button{cursor:pointer;font-family:inherit}
.bform__alt{font-size:15px;opacity:.85}
.bform__alt .booking__mail{font-size:inherit;margin-left:4px}
.bform__note{margin-top:20px;font-size:12.5px;opacity:.6}
.bform__note a{text-decoration:underline}
.thanks{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;align-items:center}
@media (max-width:640px){
  .bform{margin-top:32px}
  .bform__grid{grid-template-columns:1fr;gap:16px}
  .bform__foot{flex-direction:column;align-items:stretch;text-align:center}
  .bform__foot .pill{width:100%}
}

/* strip: keep images inside the fixed strip height (they were overflowing and top-cropped) */
.strip{grid-template-rows:minmax(0,1fr)}
.strip img:first-child{object-position:50% 30%}
@media (max-width:640px){.section-head{flex-wrap:wrap;row-gap:6px}}

/* EPK REQUEST: visible section without JS, modal with JS */
.epk{background:var(--cream);color:var(--ink);padding:clamp(56px,8vw,110px) var(--pad);position:relative}
.epk__backdrop,.epk__close{display:none}
.epk__panel{max-width:620px;margin:0 auto;position:relative}
.epk__title{font-size:clamp(32px,4.4vw,56px);line-height:.95;font-weight:800;margin-top:10px;font-stretch:var(--wide);text-transform:uppercase}
.epk__text{margin-top:14px;font-size:16px;opacity:.8}
.bform--epk{margin-top:26px;max-width:none}
.js .epk{display:none;position:fixed;inset:0;z-index:100;padding:0;background:none;align-items:center;justify-content:center}
.js .epk.is-open{display:flex}
.js .epk__backdrop{display:block;position:absolute;inset:0;background:rgba(10,10,9,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.js .epk__panel{background:var(--cream);width:min(620px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(24px,4vw,44px);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);outline:none}
.js .epk__close{display:flex;position:absolute;top:14px;right:14px;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid rgba(21,20,18,.35);background:none;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;font-family:inherit}
.js .epk__close:hover{background:var(--ink);color:var(--cream)}
.epk-lock{overflow:hidden}
@media (max-width:640px){.js .epk{align-items:flex-end}.js .epk__panel{width:100%;max-height:92dvh;border-radius:16px 16px 0 0}}
.js .epk__close{z-index:2}
.js .epk__panel>.eyebrow,.js .epk__title{padding-right:48px}
.epk .pill--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.epk .pill--solid:hover{background:var(--forest);border-color:var(--forest)}
.epk{scroll-margin-top:64px}
.js .epk__title{font-size:clamp(28px,3.4vw,40px)}

/* PLAYED AT */
.played{font-size:13.5px;line-height:1.45;color:rgba(239,233,220,.88);padding-top:10px;border-top:1px solid rgba(239,233,220,.15)}
.played__label{display:block;margin-bottom:4px;font-size:10.5px;font-weight:600;font-stretch:var(--wide);text-transform:uppercase;letter-spacing:.01em;color:var(--accent)}
.played__item{white-space:nowrap}
.played__sep{opacity:.5}

/* ROSTER ALIGNMENT (multi-column only): every card spans the same 9 grid rows
   (photo, name, meta, bio, more, highlight gigs, tags, links, EPK button) via subgrid,
   so each row starts at the same height across the cards in a row, whatever the bio length. */
@supports (grid-template-rows:subgrid){
  @media (min-width:641px){
    .card{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:12px}
    .card__body{display:contents}
    .card__name{margin-top:6px}          /* 12px row-gap + 6px = original 18px under the photo */
    .card__name,.card__meta,.card__bio,.card__more,.played,.tags,.links{align-self:start}
    .files{margin-top:0;padding-top:8px;align-self:end}
  }
}