/* Chrome Worldwide. Values come from the Framer project (colours, text styles) and
   the live site; see CLAUDE.md > Design. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-opsz.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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-ext-opsz.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-vietnamese-opsz.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

:root{
  --white:#fff; --black:#000;
  --grey:#bbb; --grey20:rgba(187,187,187,.2); --nav:#262626; --highlight:#d9d9d9;
  --story:#8c8c8c; --muted:#999; --dim:#828282;
  --green:#00ff51; --beatport:#91ff00; --soundcloud:#ff8000; --instagram:#f200ff; --accent:#33aaff;
  --wrap:min(1000px, 100vw - 40px);
  --radius:50px;
  --font:"Inter", system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:130px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--font);font-optical-sizing:auto;font-size:16px;line-height:1.6;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--white);color:var(--black);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- nav: floating pill ---- */
.nav{position:sticky;top:12px;z-index:50;padding:12px 0 0;margin-bottom:12px}
.nav__pill{width:var(--wrap);margin-inline:auto;height:100px;padding:0 34px 0 22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;background:var(--nav);border-radius:var(--radius)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav__pill{background:rgba(38,38,38,.88);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}}
.nav__logo img{width:56px;height:56px}
.nav__links{display:flex;justify-content:center;gap:clamp(18px,3.2vw,40px);font-size:14px;font-weight:600;letter-spacing:0}
.nav__links a{position:relative;color:var(--white)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--white);transform:scaleX(0);transform-origin:left}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__tag{display:flex;flex-direction:column;font-size:14px;font-weight:600;line-height:15px;letter-spacing:0}
.nav__tag span:last-child{color:var(--dim)}
.nav__toggle{display:none}
@media (prefers-reduced-motion:no-preference){.nav__links a::after{transition:transform .25s ease}}

/* ---- shared pieces ---- */
.giant{font-weight:600;font-size:clamp(56px,13.8vw,138px);line-height:1.2;letter-spacing:-.067em;padding-bottom:.02em}
.giant--page{font-size:clamp(72px,19vw,190px);line-height:1;letter-spacing:-.065em}
.meta-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--grey20);font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--highlight)}
.strip{height:28px;background:var(--white);border-radius:2px}
.strip--label{display:flex;justify-content:space-between;align-items:center;padding:0 8px;color:var(--black);font-size:15px;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;height:auto;min-height:26px}
.pill-link{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:2px solid var(--white);border-radius:999px;font-size:16px;font-weight:800;letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.pill-link:hover{background:var(--white);color:var(--black)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{position:relative;display:block;border-radius:24px;overflow:hidden;background:#111}
.card img{width:100%;aspect-ratio:1;object-fit:cover}
.card--artist img{aspect-ratio:3/2}
.card--product{background:#0b0b0b}
.card--product img{object-fit:contain;padding:6%}
.card__name{position:absolute;left:16px;bottom:14px;right:16px;font-size:14px;font-weight:600;letter-spacing:0;text-shadow:0 1px 12px rgba(0,0,0,.6);opacity:0;transform:translateY(6px)}
.card:hover .card__name,.card:focus-visible .card__name{opacity:1;transform:none}
@media (hover:none){.card__name{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.card img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}.card__name{transition:opacity .3s ease,transform .3s ease}.card:hover img{transform:scale(1.03)}}
.buy{color:var(--green);font-weight:800;letter-spacing:-.01em}
.buy:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- home: hero ---- */
.hero__card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1004/667;min-height:340px;background:#111;isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.hero__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 45%,rgba(0,0,0,.35));z-index:-1}
.hero__lede{position:absolute;left:5.5%;top:7%;font-size:clamp(24px,4.7vw,47px);line-height:1.02;font-weight:500;letter-spacing:-.03em;color:rgba(255,255,255,.86)}
.hero__word{position:absolute;left:0;right:0;bottom:-.14em;text-align:center;font-weight:600;font-size:clamp(96px,34.6vw,346px);line-height:.9;letter-spacing:-.062em;color:var(--white);white-space:nowrap}
.hero__under{display:flex;align-items:center;gap:14px;margin-top:10px}
.hero__bar{flex:1;height:10px;border-radius:999px;background:var(--grey20)}
.hero__tags{display:flex;gap:14px;font-size:14px;letter-spacing:0;white-space:nowrap}

/* ---- home: story ---- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.story__photos{display:grid;gap:12px}
.story__photos img,.story__wide{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.story__text{display:flex;flex-direction:column;justify-content:space-between;text-align:right;padding-bottom:12px}
.story__line{font-size:clamp(26px,4.7vw,47px);line-height:1.08;font-weight:500;letter-spacing:-.017em;color:var(--story)}
.story__music{font-size:clamp(26px,4.7vw,47px);line-height:1.08;font-weight:500;letter-spacing:-.017em}

/* ---- home: sections ---- */
.section{margin-top:clamp(64px,10vw,120px)}
.section__intro{margin:28px 0 8px auto;max-width:500px;font-size:20px;line-height:1.2;color:var(--grey);letter-spacing:-.03em}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.section__head--merch{gap:12px}
.merch__block{flex:1;align-self:stretch;min-height:120px;border-radius:24px;background:var(--nav)}
.section .strip--label{margin-bottom:12px}
.section > p:last-child{margin-top:24px}

/* ---- releases ---- */
.page{padding-top:20px}
.rel-list{display:grid;gap:12px;margin-top:10px}
.rel{display:grid;grid-template-columns:minmax(120px,300px) 1fr;gap:12px;align-items:start}
.rel__art img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.rel__info{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.rel__cat,.rel__date{color:var(--muted);font-weight:500}
.rel__artist,.rel__title{font-weight:700;letter-spacing:-.02em}
.rel__title a:hover{text-decoration:underline;text-underline-offset:3px}
.release{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:16px;align-items:start}
.release__art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px}
.release__info{display:flex;flex-direction:column;gap:2px}
.release__title{display:flex;flex-direction:column;font-size:16px;line-height:1.6}
.release__title a:hover{text-decoration:underline;text-underline-offset:3px}
.pager{display:flex;justify-content:space-between;padding:32px 0 8px;font-weight:500}
.pager a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- artists ---- */
.page__head{display:flex;align-items:center;gap:12px}
.page__accent{flex:1;align-self:stretch;margin:14px calc((100vw - var(--wrap)) / -2) 14px 0;background:var(--accent);border-radius:0 var(--radius) var(--radius) 0;max-width:520px;margin-right:0;border-radius:var(--radius)}
.artist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;margin-top:10px}
.artist-tile{display:flex;flex-direction:column;gap:6px}
.artist-tile__name{font-weight:500;font-size:16px;line-height:1.2}
.artist-tile img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:8px;filter:grayscale(.15)}
@media (prefers-reduced-motion:no-preference){.artist-tile img{transition:filter .4s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.artist-tile:hover img{filter:none;transform:scale(1.02)}}
.artist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.artist__photo{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:51px}
.artist__name{margin-top:-.55em;position:relative;font-size:clamp(52px,9.3vw,93px);font-weight:600;line-height:1;letter-spacing:-.03em}
.artist__label{margin-top:18px;color:var(--grey);font-size:18px;font-weight:600;letter-spacing:-.03em;line-height:1.2}
.artist__value{color:var(--grey);font-weight:600;line-height:1.2}
.artist__links{display:flex;flex-direction:column;font-weight:600;line-height:1.2}
.artist__links a:hover{text-decoration:underline;text-underline-offset:3px}
.link--beatport{color:var(--beatport)}.link--soundcloud{color:var(--soundcloud)}.link--instagram{color:var(--instagram)}
.artist__bio{display:flex;flex-direction:column;gap:16px;font-weight:500}
.artist__bio strong{font-weight:700}
.artist__rel-head{margin-top:16px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--highlight)}
.artist__rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.artist__rels a{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.3;font-weight:600}
.artist__rels img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.later{margin-top:16px;font-size:20px;color:var(--grey);max-width:40ch}
.later a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* ---- footer ---- */
.foot{margin-top:clamp(80px,12vw,140px);overflow:hidden}
.foot__row{display:flex;justify-content:space-between;font-weight:600;letter-spacing:0;margin-bottom:6px}
.foot__links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;font-size:14px;line-height:1.2;letter-spacing:-.03em}
.foot__links a:hover{text-decoration:underline;text-underline-offset:2px}
.foot__year{font-weight:600;font-size:clamp(110px,35vw,450px);line-height:1.1;letter-spacing:-.048em;font-feature-settings:"zero" 1;text-align:center;margin:10px calc((100vw - var(--wrap)) / -2 + 8px) 0;white-space:nowrap}

/* ---- press feedback + reveal (same rules as the Adilian site) ---- */
.pill-link:active,.card:active,.nav__links a:active,.artist-tile:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){
  .pill-link{transition:background-color .2s ease,color .2s ease,transform .1s ease-out}
  .card,.artist-tile,.nav__links a{transition:transform .1s ease-out}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pill-link:active,.card:active,.nav__links a:active,.artist-tile:active{transform:none;opacity:.7}
}
@keyframes word-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-transparency:reduce){.nav__pill{background:var(--nav);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){:root{--grey20:rgba(187,187,187,.6);--story:#bbb;--muted:#ccc;--dim:#bbb}}

/* ---- tablet ---- */
@media (max-width:1199px){
  .nav__pill{height:84px}
  .artist{grid-template-columns:1fr}
}
/* ---- phone ---- */
@media (max-width:809px){
  :root{--radius:32px}
  html{scroll-padding-top:100px}
  .nav{top:8px}
  .nav__pill{height:68px;padding:0 10px 0 10px;grid-template-columns:auto 1fr auto}
  .nav__logo img{width:48px;height:48px}
  .nav__tag{display:none}
  .js .nav__toggle{display:block;justify-self:end;background:none;border:1px solid rgba(255,255,255,.3);color:var(--white);font:inherit;font-size:14px;font-weight:600;height:44px;padding:0 18px;border-radius:999px}
  .js .nav__links{position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:0;padding:8px 22px 14px;background:var(--nav);border-radius:24px;visibility:hidden;opacity:0;pointer-events:none;width:var(--wrap);margin-inline:auto}
  .js .nav__links.is-open{visibility:visible;opacity:1;pointer-events:auto}
  .js .nav__links a{padding:14px 0;font-size:18px;border-top:1px solid rgba(255,255,255,.08)}
  .js .nav__links a:first-child{border-top:0}
  .js .nav__links a::after{display:none}
  .nav{position:sticky}
  .nav__pill{position:relative}
  .hero__card{aspect-ratio:4/5}
  .hero__word{font-size:clamp(84px,30vw,200px)}
  .hero__under{flex-wrap:wrap}
  .hero__tags{font-size:12px;gap:10px}
  .story{grid-template-columns:1fr}
  .story__text{order:-1;text-align:left;gap:10px}
  .grid2{grid-template-columns:1fr}
  .section__head{flex-wrap:wrap}
  .rel{grid-template-columns:120px 1fr}
  .release{grid-template-columns:1fr}
  .artist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page__accent{display:none}
  .foot__links{grid-template-columns:1fr}
  .meta-row{font-size:10px}
  .strip--label{font-size:12px}
}
@media (max-width:809px) and (prefers-reduced-motion:no-preference){
  .js .nav__links{clip-path:inset(0 0 100% 0 round 24px);transition:clip-path .3s cubic-bezier(.8,0,.8,.2),opacity .3s ease,visibility 0s linear .3s}
  .js .nav__links.is-open{clip-path:inset(0 0 0 0 round 24px);transition:clip-path .45s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s}
}

/* Scale the big type to its box (like Framer), not to the window. Browsers without
   container units keep the clamp() sizes above. */
@supports (font-size:1cqi){
  .hero__card,.section,.page,.story,.foot{container-type:inline-size}
  .hero__word{font-size:30.5cqi;letter-spacing:-.07em}
  .hero__lede{font-size:max(22px,4.7cqi)}
  .giant{font-size:13.8cqi}
  .giant--page{font-size:19cqi}
  .story__line,.story__music{font-size:max(22px,4.7cqi)}
  .foot__year{font-size:32cqi;margin-inline:0}
}

/* =====================================================================
   Framer parity (measured on chromeworldwide.com, Sep 2026)
   ===================================================================== */

/* Width: 79% of the window, capped at 1200px (so 4K stays 1200 wide). Tablet 79%.
   Phone: nav and hero go edge to edge, sections keep a 16px gutter. */
:root{--wrap:min(79.2vw,1200px);--gap:10px}
@media (min-width:810px) and (max-width:1199.98px){:root{--wrap:79vw;--gap:20px}}
@media (max-width:809.98px){:root{--wrap:calc(100vw - 32px);--gap:10px}}

/* Nav sits --gap from the top (10px, 20px on tablet) and the hero starts --gap below it. */
.nav{top:0;padding:var(--gap) 0 0;margin-bottom:var(--gap)}
.nav__pill{height:100px}

/* Hero: as tall as half the window minus 10px, at every size (short on laptops, tall on 4K). */
.hero__card{aspect-ratio:auto;height:calc(50vh - 10px);min-height:320px;background:transparent}
.hero__lede{left:30px;top:20px;font-size:clamp(36px,4.3cqi,49px);line-height:.93;letter-spacing:-.035em}
@supports (font-size:1cqi){.hero__word{font-size:calc((100cqi - 10px) * .305)}}
.hero__word{left:5px;right:5px;bottom:5px;line-height:.9}

/* Framer's "subtract" look: these headings use the difference blend, so white text
   inverts whatever is behind it. */
.hero__word,.hero__lede,.story__line,.story__music,#h-artists,#h-merch,.pill-link{mix-blend-mode:difference}

/* Load sequence (Framer's appear animations, same timings and curves):
   0s     faint "Chrome" (10%, 60% size, 100px up) on black
   2.9s   "Chrome" grows into place over 1.4s
   4s     hero photo fades in behind it (1s)
   4.3s   "Uncompromising..." rises 45px
   5s     the bar and labels slide in from the right; MUSIC / LEGACY / CULTURE at 6, 7, 8s
   4s     "20+ years" slides in from the left (2s)
   5s     the stack of three history photos appears (it wraps their own 2-6s fades, so they
          never show before the hero); 4th photo 5-7s, Axis building 6-7s */
@media (prefers-reduced-motion:no-preference){
  .hero__word{opacity:.1;transform:translateY(-100px) scale(.6);animation:cw-word 1.4s cubic-bezier(.95,-.02,.38,1) 2.9s forwards}
  .hero__img,.hero__card::after{opacity:0;animation:cw-fade 1s cubic-bezier(.44,0,.56,1) 4s forwards}
  .hero__lede{opacity:0;transform:translateY(45px);animation:cw-rise .9s cubic-bezier(.2,.9,.3,1) 4.3s forwards}
  .hero__under{opacity:0;transform:translateX(150px);animation:cw-rise 1s cubic-bezier(.44,0,.56,1) 5s forwards}
  .hero__tags span{opacity:0;animation:cw-fade 1s cubic-bezier(.44,0,.56,1) forwards}
  .hero__tags span:nth-child(1){animation-delay:6s}
  .hero__tags span:nth-child(2){animation-delay:7s}
  .hero__tags span:nth-child(3){animation-delay:8s}
  .story__photos{opacity:0;animation:cw-fade 1s cubic-bezier(.44,0,.56,1) 5s forwards}
  .story__photos img:nth-child(1){opacity:0;transform:scale(.5);animation:cw-rise 2s cubic-bezier(.44,0,.56,1) 2s forwards}
  .story__photos img:nth-child(2){opacity:0;animation:cw-fade 2s cubic-bezier(.44,0,.56,1) 3s forwards}
  .story__photos img:nth-child(3){opacity:0;animation:cw-fade 2s cubic-bezier(.44,0,.56,1) 4s forwards}
  .story > .story__wide:nth-of-type(1){opacity:0;animation:cw-fade 2s cubic-bezier(.44,0,.56,1) 5s forwards}
  .story > .story__wide:nth-of-type(2){opacity:0;animation:cw-fade 1s cubic-bezier(.44,0,.56,1) 6s forwards}
  .story__text{opacity:0;transform:translateX(-150px);animation:cw-rise 2s cubic-bezier(.44,0,.56,1) 4s forwards}
}
@keyframes cw-word{to{opacity:1;transform:none}}
@keyframes cw-fade{to{opacity:1}}
@keyframes cw-rise{to{opacity:1;transform:none}}

/* Phone: full-width pill with logo, "Born in Boston / Circa 1993" in the middle and a menu icon. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger{display:block;width:24px}
.burger i{display:block;height:2px;margin:5px 0;background:currentColor;border-radius:1px}
@media (max-width:809.98px){
  .nav__pill{width:100vw;height:100px;padding:0 24px 0 20px;border-radius:50px}
  .nav__logo{grid-column:1;grid-row:1}
  .nav__logo img{width:62px;height:62px}
  .nav__tag{display:flex;grid-column:2;grid-row:1;justify-self:center;font-size:15px;line-height:16px}
  .js .nav__toggle{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%}
  .js .nav__links{width:calc(100vw - 20px)}
  .hero{width:100vw}
}

/* History block, measured at 1440: directly under the bar; 3.5:1 strips 10px apart, the first
   with rounded top corners; text right-aligned at 47px with "The Music." a line lower. */
.hero__under{margin-top:0;min-height:22px}
.story{margin-top:9px;column-gap:8px;row-gap:10px;align-items:start}
.story__photos{gap:10px}
.story__photos img,.story__wide{aspect-ratio:570/165;border-radius:0}
.story__photos img:first-child{border-radius:50px 50px 0 0}
.story > .story__wide:nth-of-type(1){border-radius:0 0 0 50px}
.story > .story__wide:nth-of-type(2){border-radius:0 0 50px 0}
.story__text{justify-content:flex-start;padding:6px 5px 0 0}
.story__line,.story__music{font-size:clamp(24px,4.12cqi,47px);line-height:1.077;letter-spacing:-.017em}
.story__music{margin-top:1.077em}
@media (max-width:809.98px){
  .story__photos img:first-child{border-radius:32px 32px 0 0}
  .story > .story__wide:nth-of-type(1),.story > .story__wide:nth-of-type(2){border-radius:0}
  .story > .story__wide:last-child{border-radius:0 0 32px 32px}
}
/* Exact column split at desktop sizes: 570 | 10 | 560 of 1140, strips 11px apart, building 560x157. */
@media (min-width:810px){
  .story{grid-template-columns:minmax(0,570fr) minmax(0,560fr);column-gap:10px;row-gap:11px}
  .story__photos{gap:11px}
  .story > .story__wide:nth-of-type(2){aspect-ratio:560/157}
}
/* Optical centring: the negative letter-spacing also trails the last "e" and the C/e side
   bearings differ, so the ink sat ~.038em right of centre. Shift it back (scales with size). */
.hero__word{margin-left:-.075em}

/* =====================================================================
   History block, exact per breakpoint (measured on Framer at 375, 390, 834,
   1024, 1440 and 1920 wide). Overrides the earlier story rules above.
   Strips have a fixed HEIGHT (not a fixed shape); columns are half | 5 | rest-5.
   ===================================================================== */
.story{--sh:165px;--sgap:11px;--bh:157px;--boff:1px;--stop:9px;--toff:6px;
  display:grid;grid-template-columns:calc((100% + 5px) / 2) minmax(0,1fr);column-gap:5px;row-gap:var(--sgap);
  padding-right:5px;margin-top:var(--stop);align-items:start}
.story__photos{display:grid;gap:var(--sgap)}
.story__photos img,.story > .story__wide{width:100%;height:var(--sh);aspect-ratio:auto;object-fit:cover;border-radius:0}
.story > .story__wide:nth-of-type(2){height:var(--bh);margin-top:var(--boff);aspect-ratio:auto}
.story__photos img:first-child{border-radius:50px 50px 0 0}
.story > .story__wide:nth-of-type(1){border-radius:0 0 50px 50px}
.story > .story__wide:nth-of-type(2){border-radius:0 0 50px 0}
.story__text{order:0;text-align:right;padding:var(--toff) 0 0 0;gap:0}
.story__line,.story__music{font-size:47px;line-height:1.077;letter-spacing:-.017em}
.story__music{margin-top:1.077em}
.hero__under{margin-top:0}

@media (min-width:810px) and (max-width:1199.98px){
  .story{--sh:160px;--sgap:10px;--bh:171px;--boff:3px;--stop:20px;--toff:5px}
  .hero__under{margin-top:10px}
  .story__line,.story__music{line-height:.864}
  .story__music{margin-top:.864em}
}
@media (max-width:809.98px){
  :root{--radius:50px}
  .story{--sh:94px;--sgap:10px;--bh:100px;--boff:-12px;--stop:7px;--toff:0px;
    width:100vw;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;padding:0 5px}
  .story__text{order:0;text-align:right}
  .story__line,.story__music{font-size:23px;line-height:.896}
  .story__music{margin-top:.896em}
  .hero__lede{line-height:.96}
}
/* Lede size is fixed per breakpoint in Framer: 49px on desktop and tablet, 36px on phones. */
.hero__lede{font-size:49px}
@media (max-width:809.98px){.hero__lede{font-size:36px}}

/* Nav, measured on Framer: 25px side padding, 61px logo, the seven links in equal slots
   (96px desktop, 57px tablet) centred between logo and tag; the tag never wraps. */
.nav__pill{padding:0 25px;column-gap:0}
.nav__logo img{width:61px;height:auto}
.nav__links{display:grid;grid-template-columns:repeat(7,var(--slot,96px));justify-content:center;justify-items:center;gap:0}
.nav__tag{white-space:nowrap}
@media (min-width:810px) and (max-width:1199.98px){.nav__links{--slot:57px}}
@media (max-width:809.98px){
  .js .nav__links{display:flex;grid-template-columns:none}
  .nav__logo img{width:62px}
}

/* =====================================================================
   Focal points: set per photo in the admin (click the part that must stay in view).
   Stored as "x y" percent; the page adds classes fx-X fy-Y (inline styles are blocked by the CSP).
   ===================================================================== */
img{object-position:var(--fx,50%) var(--fy,50%)}
.fx-0{--fx:0%}.fx-5{--fx:5%}.fx-10{--fx:10%}.fx-15{--fx:15%}.fx-20{--fx:20%}.fx-25{--fx:25%}.fx-30{--fx:30%}.fx-35{--fx:35%}.fx-40{--fx:40%}.fx-45{--fx:45%}.fx-50{--fx:50%}.fx-55{--fx:55%}.fx-60{--fx:60%}.fx-65{--fx:65%}.fx-70{--fx:70%}.fx-75{--fx:75%}.fx-80{--fx:80%}.fx-85{--fx:85%}.fx-90{--fx:90%}.fx-95{--fx:95%}.fx-100{--fx:100%}
.fy-0{--fy:0%}.fy-5{--fy:5%}.fy-10{--fy:10%}.fy-15{--fy:15%}.fy-20{--fy:20%}.fy-25{--fy:25%}.fy-30{--fy:30%}.fy-35{--fy:35%}.fy-40{--fy:40%}.fy-45{--fy:45%}.fy-50{--fy:50%}.fy-55{--fy:55%}.fy-60{--fy:60%}.fy-65{--fy:65%}.fy-70{--fy:70%}.fy-75{--fy:75%}.fy-80{--fy:80%}.fy-85{--fy:85%}.fy-90{--fy:90%}.fy-95{--fy:95%}.fy-100{--fy:100%}

/* =====================================================================
   About, Shop, product, Media, Contact, Intake (measured on Framer at 1440, 1024 and 390).
   ===================================================================== */
.page-title{font-weight:600;font-size:93px;line-height:1;letter-spacing:-.03em;text-align:center;margin-top:calc(var(--gap) * -1 + 4px)}

/* About: "The History" fits 78% of the column; text | 10 | photo, sides alternate. */
.about{padding-top:25px}
.about__title{font-weight:600;line-height:.9;letter-spacing:-.07em;text-align:center;font-size:clamp(56px,14.6vw,210px);margin-left:-.07em}
@supports (font-size:1cqi){.about{container-type:inline-size}.about__title{font-size:18.46cqi}}
.about__blocks{display:grid;gap:40px;margin-top:34px}
.about__block{display:grid;grid-template-columns:50% minmax(0,1fr);column-gap:10px;align-items:start}
.about__text{display:flex;flex-direction:column;gap:1.1em;font-size:16px;font-weight:500;line-height:1.1;letter-spacing:-.02em;color:#969696}
.about__text strong{font-weight:700;color:var(--highlight)}
.about__text em{font-style:italic}
.about__img{width:100%;height:var(--ih,300px);object-fit:cover;border-radius:50px}
.about__block:nth-child(1){--ih:307px}
.about__block:nth-child(2){--ih:261px}
.about__block:nth-child(3){--ih:296px}
.about__block--flip .about__text{order:2}
.about__block--flip .about__img{order:1}
@media (min-width:810px) and (max-width:1199.98px){.about{padding-top:0}.about__blocks{margin-top:18px;gap:30px}}
@media (max-width:809.98px){
  .about{padding-top:18px}
  @supports (font-size:1cqi){.about__title{font-size:15.2cqi}}
  .about__blocks{margin-top:28px;gap:16px}
  .about__text{font-size:10px}
  .about__block--flip .about__text{font-size:11px}
  .about__img{border-radius:25px;height:var(--ihp,140px)}
  .about__block:nth-child(1){--ihp:137px}
  .about__block:nth-child(2){--ihp:138px}
  .about__block:nth-child(3){--ihp:143px}
}

/* Shop: two products per row, photo | name and price. */
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:49px 8px;margin-top:13px}
.shop-item{display:grid;grid-template-columns:50% minmax(0,1fr);align-items:center}
.shop-item img{width:100%;aspect-ratio:283/288;object-fit:cover;border-radius:20px}
.shop-item__text{display:flex;flex-direction:column;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.shop-item:hover .shop-item__name{text-decoration:underline;text-underline-offset:3px}
.shop-item:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){.shop-item{transition:transform .1s ease-out}}
@media (min-width:810px) and (max-width:1199.98px){.page-title--shop{margin-top:12px}.shop-grid{margin-top:0;row-gap:68px}}
@media (max-width:809.98px){
  .shop-grid{gap:30px 18px;margin-top:0}
  .shop-item{grid-template-columns:1fr;justify-items:center;text-align:left}
  .shop-item img{width:88%;border-radius:20px}
  .shop-item__text{width:100%;padding-top:0}
}

/* Product page: title, big photo, price + Buy Now, description, next product. */
.product__title{font-weight:600;font-size:93px;line-height:1.22;letter-spacing:-.03em;margin-top:calc(var(--gap) * -1)}
.product__img{width:100%;height:625px;object-fit:contain;border-radius:24px;margin-top:65px}
.product__buyrow{display:flex;justify-content:center;align-items:center;gap:0;margin-top:33px}
.product__price{font-size:85px;font-weight:600;line-height:1.6;letter-spacing:-.02em;color:var(--muted);padding-right:24px}
.product__buy{position:relative;display:inline-flex;justify-content:center;width:143px;padding:8px 0 14px;font-size:23px;font-weight:700;line-height:20px;letter-spacing:-.013em}
.product__buy::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border-radius:30px;background:var(--white)}
.product__buy:active{transform:scale(.97)}
.product__desc{margin-top:34px;font-size:20px;font-weight:500;line-height:1.6;letter-spacing:-.02em}
.product__next{display:inline-block;margin-top:3px;font-size:20px;font-weight:500;line-height:1.6;color:#04ff00}
.product__next:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){.product__buy::after{transition:transform .25s ease}.product__buy:hover::after{transform:scaleX(.8)}}
@media (max-width:1199.98px){.product__img{height:auto;aspect-ratio:1140/625}}
@media (max-width:809.98px){
  .product{width:100vw}
  .product__title{font-size:36px;line-height:1.1;text-align:center;padding:0 10px}
  .product__img{aspect-ratio:390/396;margin-top:40px;border-radius:24px}
  .product__price{font-size:42px;padding-right:0}
  .product__desc,.product__next{font-size:16px;padding:0 16px}
}

/* Media: gallery list and gallery (3 columns, photos at their own shape). */
.media-tabs{display:flex;justify-content:center;gap:8px;margin-top:18px}
.media-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:2px solid var(--white);border-radius:999px;font-size:14px;font-weight:800;text-transform:uppercase}
.media-tabs a[aria-current]{background:var(--white);color:var(--black)}
.gallery-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:40px}
.gallery-card{position:relative;display:block;border-radius:24px;overflow:hidden;background:#111}
.gallery-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery-card__name{position:absolute;left:20px;bottom:16px;right:20px;font-size:24px;font-weight:600;letter-spacing:-.03em;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.gallery-card__count{display:block;font-size:14px;font-weight:500;color:var(--highlight);letter-spacing:0}
.gallery-card:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){.gallery-card{transition:transform .1s ease-out}.gallery-card img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}.gallery-card:hover img{transform:scale(1.03)}}
.gallery{width:min(912px,var(--wrap))}
.gallery__title{font-weight:600;font-size:86px;line-height:1.6;letter-spacing:-.03em;text-align:center;margin-top:calc(var(--gap) * -1)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 4px;align-items:start}
.gallery__grid img{width:100%;height:auto;border-radius:24px;background:#111}
.gallery__grid a{display:block;border-radius:24px}
.gallery__grid a:active{transform:scale(.98)}
.gallery__back{margin-top:24px;text-align:center}
@media (min-width:810px) and (max-width:1199.98px){.gallery{width:79vw}.gallery__title{line-height:1.14;margin-top:10px}}
@media (max-width:809.98px){
  .gallery{width:100vw}
  .gallery__title{font-size:40px;line-height:1.2}
  .gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 5px}
  .gallery-list{grid-template-columns:1fr}
}

/* Contact: heading, then label + address in three columns (stacked on phones). */
.contact{width:min(1100px,76.4vw);padding-top:184px}
.contact__title{font-size:32px;font-weight:400;line-height:1;letter-spacing:-.03em}
.contact__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px}
.contact__item{display:flex;flex-direction:column;color:var(--muted);letter-spacing:-.03em}
.contact__label{font-size:32px;line-height:1.2}
.contact__value{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
@media (min-width:810px) and (max-width:1199.98px){.contact{width:75vw;padding-top:183px}}
@media (max-width:809.98px){
  .contact{width:70vw;padding-top:10px}
  .contact__cols{grid-template-columns:1fr;gap:10px;margin-top:40px}
}

/* Intake: the Fillout form (it saves to Notion), full content width. */
.intake__frame{display:block;width:100%;height:max(640px,calc(100vh - 130px));border:0;background:transparent}
.intake__note{margin-top:12px;font-size:14px;color:var(--muted)}
.intake__note a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* Fine-tuning after comparing with Framer (Sep 29). */
.about__title{line-height:.84}
.about__blocks{gap:31px}
.about__block:nth-child(1){min-height:320px}
.about__block:nth-child(2){min-height:307px}
@media (min-width:810px) and (max-width:1199.98px){.about__blocks{gap:16px}.about__block:nth-child(1){min-height:0}.about__block:nth-child(2){min-height:328px}}
@media (max-width:809.98px){.about__blocks{gap:10px}.about__block:nth-child(1),.about__block:nth-child(2){min-height:0}}
.page-title{margin-top:calc(var(--gap) * -1)}
.product__price{min-width:285px;padding-right:0;text-align:center}
.product__buy{padding-bottom:20px}
@media (max-width:809.98px){.product__price{min-width:0;padding-right:24px}}
.gallery{margin-inline:auto}
/* The form is as tall as its content (like Framer), so the page scrolls, not the frame. */
.intake__frame{height:1984px}
@media (min-width:810px) and (max-width:1199.98px){.intake__frame{height:1913px;margin-top:10px}}
@media (max-width:809.98px){.intake{width:100vw}.intake__frame{height:1894px}}
@media (max-width:809.98px){
  @supports (font-size:1cqi){.about__title{font-size:16.5cqi}}
  .shop-grid{width:80vw;margin-inline:auto;column-gap:0}
}


/* =====================================================================
   Site audit, Sep 30 2026: every page re-measured on Framer at 1920, 1440, 1300,
   1024, 834 and 390 wide. These rules override the older blocks above.
   ===================================================================== */

/* Width: Framer uses 80% of the page (not of the window, so the scrollbar is left out),
   capped at 1200. Phones: 10px each side. */
:root{--wrap:min(80%,1200px)}
@media (min-width:810px) and (max-width:1199.98px){:root{--wrap:80%}}
@media (max-width:809.98px){:root{--wrap:calc(100% - 20px)}}

/* Type: Framer sets nearly everything in Inter Display (the opsz 32 cut of our variable
   Inter). A few pieces use the text cut. */
body{font-variation-settings:"opsz" 32}
.nav__tag,.contact,.hs__intro,#h-releases,.shop-item__text{font-variation-settings:"opsz" 14}

/* Every page except the homepage starts 10px under the nav (tablet too). */
.is-sub main{margin-top:calc(10px - var(--gap))}

/* Nav: the seven links share 72.5% of the space between logo and tag (88.5% on tablets),
   so their spacing grows with the window like Framer's. */
@media (min-width:810px){.nav__links{width:72.5%;justify-self:center;grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (min-width:810px) and (max-width:1199.98px){.nav__links{width:88.5%}}

/* Footer: 1200 wide from 1440 up, page width below that; the big year spans the whole
   window below 1440. Spacing measured on Framer per breakpoint. */
.foot{margin-top:20px;overflow:hidden;width:auto}
.foot__in{width:var(--wrap);margin-inline:auto}
.foot__big{container-type:inline-size;width:100%}
@media (min-width:1440px){.foot__in,.foot__big{width:1200px;margin-inline:auto}}
.foot__row{font-size:16px;font-weight:600;line-height:19.2px;letter-spacing:0;margin:0 0 18px}
.foot .strip{height:33px;border-radius:0}
.foot__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:10px;margin-top:10px;font-size:14px;font-weight:600;line-height:16.8px;letter-spacing:-.03em}
.foot__h{font-weight:600}
.foot__year{font-size:32.1cqi;line-height:1.21;letter-spacing:-.0478em;text-align:left;margin:84px 0 0;white-space:nowrap;font-weight:600;font-feature-settings:"cv01","cv02","cv03","cv04","cv05","cv06","cv07","cv08","cv09","cv10","cv12","cv13","ss01","ss02","ss07"}
@media (min-width:810px) and (max-width:1199.98px){
  .foot__row{margin-bottom:10px}
  .foot__links{column-gap:0}
  .foot__links p:first-child{font-size:13px;line-height:15.6px}
  .foot__year{margin-top:76px}
}
@media (max-width:809.98px){
  .foot{margin-top:16px}
  .foot__row{margin-bottom:7px}
  .foot__links{grid-template-columns:1fr;margin-top:7px;font-size:10px;line-height:12px}
  .foot__year{margin-top:7px}
}

/* Small labels above sections: 13px, a hairline under them. */
.meta-row{border-top:0;border-bottom:1px solid var(--grey20);padding:0 25px 10px 24px;font-size:13px;line-height:13px;font-weight:400;letter-spacing:0;color:var(--grey);text-transform:none}
.meta-row span:first-child{color:var(--white)}
@media (max-width:809.98px){.meta-row{padding:0 10px 10px 10px}}

/* "View all": 140 x 44 outline pill, 23px bold. */
.hs__more{width:140px;min-height:44px;height:44px;padding:0;justify-content:center;font-size:23px;font-weight:700;letter-spacing:-.013em;border-width:2px;flex:none}

/* ---- Homepage sections (Latest Releases, Artists, Merch) ---- */
@supports (font-size:1cqi){.hs,.releases,.artists,.release,.artist{container-type:inline-size}}
.hs{display:flex;flex-direction:column}
.hs__head{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.hs__title{font-weight:600;line-height:1.21;white-space:nowrap;padding-left:10px}
.hs .strip--label{height:33px;min-height:33px;padding:0 10px;border-radius:0;font-size:15px;font-weight:600;letter-spacing:-.02em;text-transform:none;margin:0}
.hs .card__name{position:absolute;left:24px;bottom:18px}

/* Latest Releases. Order: 1440+ heading, bar, text, covers; below 1440 the text comes first. */
.hs--rel{margin-top:76px}
.hs--rel .meta-row{order:1}
.hs--rel .hs__head{order:2;margin-top:56px}
.hs__bar{order:3;display:block;height:4px;background:var(--grey20);margin-top:-19px}
.hs__intro{order:4;margin-top:56px;font-size:24.28px;font-weight:400;line-height:1.2;letter-spacing:-.0247em;color:var(--grey)}
.hs__rel{order:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:47px}
.hs__relcard{display:block}
.hs__relcard img{width:100%;aspect-ratio:1;object-fit:cover}
#h-releases{font-size:12.9cqi;letter-spacing:-.0672em}
.hs--rel .hs__more{margin-right:10px}
@media (min-width:1200px) and (max-width:1439.98px){
  .hs__intro{order:2;margin:21px 0 0 25.5%;font-size:20.24px;line-height:1.285}
  .hs--rel .hs__head{order:3;margin-top:32px}
  .hs__bar{order:4;margin-top:-27px}
  .hs__rel{gap:10px;margin-top:30px}
}
@media (min-width:810px) and (max-width:1199.98px){
  .hs--rel{margin-top:69px}
  .hs__intro{order:2;margin-top:21px;font-size:4.33cqi;line-height:1.2}
  .hs--rel .hs__head{order:3;margin-top:34px}
  #h-releases{font-size:12.0cqi}
  .hs__bar{order:4;margin-top:13px}
  .hs__rel{gap:8px;margin-top:111px}
}
@media (max-width:809.98px){
  .hs--rel{margin-top:47px}
  .hs__intro{order:2;margin-top:0;padding-top:1px;font-size:4.3cqi;line-height:1.2}
  .hs--rel .hs__head{order:3;margin-top:10px}
  #h-releases{font-size:9.6cqi}
  .hs__bar{display:none}
  .hs__rel{gap:10px;margin-top:56px}
}

/* Artists: the heading overlaps the label row a little, like Framer. */
.hs--art{margin-top:59px}
.hs--art .hs__head{margin-top:-42px}
.hs--art .hs__title{font-size:18.7cqi;letter-spacing:-.0441em}
.hs--art .hs__more{margin:66px 10px 0 0}
.hs--art .strip--label{margin-top:-42px}
.hs__artists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.hs__artist{position:relative;display:block;border-radius:50px;overflow:hidden}
.hs__artist img{width:100%;height:200px;object-fit:cover}
@media (min-width:810px) and (max-width:1199.98px){
  .hs--art .hs__head{margin-top:-8px}
  .hs--art .hs__more{margin-top:28px}
  .hs--art .strip--label{margin-top:-7px;text-transform:uppercase}
  .hs__artists{margin-top:11px}
}
@media (max-width:809.98px){
  .hs--art{margin-top:24px}
  .hs--art .hs__head{margin-top:34px}
  .hs--art .hs__title{font-size:17.9cqi}
  .hs--art .hs__more{margin-top:-20px;position:absolute;right:0;top:0}
  .hs--art .hs__head{padding-right:150px}
  .hs--art .strip--label{margin-top:-6px;text-transform:uppercase}
  .hs__artists{margin-top:15px}
}

/* Merch: dark block on the left, heading on the right, pill then products. */
.hs--merch{margin-top:0}
.hs--merch .hs__head{margin-top:-23px;align-items:flex-start}
.hs__block{display:block;width:calc(50% - 10px);margin:38px 0 0 10px;height:179px;border-radius:50px 0 0 50px;background:var(--nav)}
.hs--merch .hs__title{font-size:18.5cqi;letter-spacing:-.0621em;padding:0 23px 0 0;margin-left:auto}
.hs--merch .strip--label{margin-top:-22px}
.hs--merch .hs__more{margin-top:0}
.hs__products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:1px}
.hs__product{position:relative;display:block}
.hs__product img{width:100%;aspect-ratio:570/579;object-fit:cover}
@media (min-width:810px) and (max-width:1199.98px){
  .hs--merch{margin-top:30px}
  .hs--merch .hs__head{margin-top:3px}
  .hs__block{width:50%;margin:24px 0 0 0;height:137px}
  .hs--merch .hs__title{font-size:18.9cqi;padding-right:10px}
  .hs--merch .strip--label{margin-top:-15px;text-transform:uppercase}
  .hs--merch .hs__more{order:9;margin-top:20px}
  .hs__products{margin-top:19px}
}
@media (max-width:809.98px){
  .hs--merch{margin-top:29px}
  .hs--merch .hs__head{margin-top:-1px}
  .hs__block{width:50%;margin:11px 0 0 0;height:66px}
  .hs--merch .hs__title{font-size:18.9cqi;padding-right:0}
  .hs--merch .strip--label{margin-top:-3px;text-transform:uppercase}
  .hs--merch .hs__more{order:9;margin-top:16px}
  .hs__products{margin-top:10px}
  .hs--merch .hs__title{letter-spacing:-.05em}
}

/* ---- Releases page: 2 x grid. Covers are 30% of the page width like Framer's list;
   text 20px (13px tablet); on phones the cover sits above the text. ---- */
.releases__title{font-weight:600;line-height:1.21;letter-spacing:-.03em;font-size:20.6cqi;white-space:nowrap;margin-top:-10px}
.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px;margin-top:40px}
.rel-grid .rel{display:grid;grid-template-columns:30cqi minmax(0,1fr);gap:10px;align-items:start}
.rel-grid .rel__art img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px}
.rel-grid .rel__info{padding-top:0;gap:0;font-size:20px;line-height:32px;letter-spacing:-.02em}
.rel__cat,.rel__date{color:var(--muted);font-weight:500}
.rel__artist{font-weight:600}
.rel__title{font-weight:700}
.rel-grid .rel__info .buy{font-weight:800}
@media (min-width:810px) and (max-width:1199.98px){
  .releases__title{margin-top:-22px}
  .rel-grid{margin-top:18px}
  .rel-grid .rel__info{font-size:13px;line-height:20.8px}
}
@media (max-width:809.98px){
  .releases__title{margin-top:-10px}
  .rel-grid{margin-top:20px;row-gap:24px}
  .rel-grid .rel{grid-template-columns:1fr;gap:8px}
  .rel-grid .rel__info{font-size:12px;line-height:17px}
}

/* ---- Release page ---- */
.release{display:grid;grid-template-columns:500px minmax(0,1fr);gap:20px;align-items:start;padding-top:0}
.release__art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px}
.release__info{display:flex;flex-direction:column;gap:0;font-size:20px;line-height:32px;letter-spacing:-.02em}
.release__title{display:flex;flex-direction:column;font-size:inherit;line-height:inherit;font-weight:inherit}
.release .rel__artist{font-weight:600}
.pager{padding:10px 0 0;font-size:20px;line-height:32px;font-weight:500;letter-spacing:-.02em}
@media (min-width:810px) and (max-width:1199.98px){
  .release{grid-template-columns:400px minmax(0,1fr)}
  .release__info,.pager{font-size:13px;line-height:20.8px}
  .pager{padding-top:13px}
}
@media (max-width:809.98px){
  .release{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
  .release__info{align-items:center;font-size:12px;line-height:17px}
  .pager{font-size:12px;line-height:17px;padding-top:24px}
}

/* ---- Artists page: heading and blue block side by side, then a 3-column grid
   (names 20px, photos 160px tall). ---- */
.artists__head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;align-items:start;font-size:17.3cqi;margin-top:-16px}
.artists__title{font-size:1em;font-weight:600;line-height:1.21;letter-spacing:-.03em;padding-left:10px;white-space:nowrap}
.artists__accent{display:block;height:1em;margin:.107em 10px 0 0;background:var(--accent);border-radius:0 50px 50px 0}
.artists .artist-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;row-gap:12px;padding:0 10px;margin-top:3px}
.artists .artist-tile{gap:3px}
.artists .artist-tile__name{font-size:20px;line-height:25px;font-weight:500;letter-spacing:-.02em}
.artists .artist-tile img{height:160px;aspect-ratio:auto;border-radius:8px;filter:none}
@media (min-width:810px) and (max-width:1199.98px){
  .artists__head{font-size:17cqi;margin-top:0}
  .artists .artist-grid{row-gap:21px;margin-top:9px}
  .artists .artist-tile__name{font-size:13px;line-height:16px}
}
@media (max-width:809.98px){
  .artists__head{font-size:16.4cqi;margin-top:-2px}
  .artists .artist-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px;margin-top:16px;padding:0}
  .artists .artist-tile{gap:2px}
  .artists .artist-tile__name{font-size:10px;line-height:12px}
}

/* ---- Artist page: photo half the width, name under it, bio beside (also on phones). ---- */
.artist{display:grid;grid-template-columns:50% minmax(0,1fr);column-gap:14px;align-items:start}
.artist__photo{width:100%;aspect-ratio:5/4;border-radius:51px}
.artist__name{margin-top:10px;font-size:93px;line-height:1;font-weight:600;letter-spacing:-.03em}
.artist__label{margin-top:27px;font-size:18.24px;line-height:1.2;font-weight:600;letter-spacing:-.03em;color:var(--grey)}
.artist__label + .artist__value{margin-top:0}
.artist__value{font-size:16.64px;line-height:1.2;font-weight:600;letter-spacing:-.03em;color:var(--grey)}
.artist__value + .artist__label{margin-top:7px}
.artist__links{font-size:16px;line-height:19.2px;font-weight:600;letter-spacing:-.03em}
.artist__bio{gap:20px;font-size:20px;line-height:32px;font-weight:500;letter-spacing:-.02em}
.artist__rel-head{font-size:13px;letter-spacing:.02em}
@media (min-width:810px) and (max-width:1199.98px){
  .artist{column-gap:13px;margin-top:20px}
  .artist__bio{gap:13px;font-size:13px;line-height:20.8px}
  .artist__label{margin-top:26px}
  .artist .pager,.artist ~ .pager{font-size:13px;line-height:20.8px}
}
@media (max-width:809.98px){
  .artist{grid-template-columns:50% minmax(0,1fr);column-gap:14px;margin-top:12px}
  .artist__photo{border-radius:25px}
  .artist__name{margin-top:15px;font-size:26px;line-height:1.2;font-weight:500}
  .artist__label{margin-top:32px}
  .artist__bio{gap:10px;font-size:10px;line-height:16px}
}

/* Pages that now start 10px under the nav on tablets too (see .is-sub main above). */
@media (min-width:810px) and (max-width:1199.98px){
  .about{padding-top:9px}
  .contact{padding-top:193px}
  .page-title,.gallery__title,.product__title{margin-top:0}
  .intake__frame{margin-top:20px}
}
.contact{width:min(1100px,77.2%)}
@media (min-width:810px) and (max-width:1199.98px){.contact{width:76%}}
@media (max-width:809.98px){.contact{width:70%}.page-title,.gallery__title,.product__title{margin-top:-6px}}
/* Audit round 2: measured against Framer on the preview. */
.hs--rel{margin-top:68px}
.hs--art .hs__title{font-size:17.9cqi}
@media (min-width:810px) and (max-width:1199.98px){.hs__intro{font-size:3.85cqi;line-height:42px}.hs--art .hs__title{font-size:17cqi}}
@media (min-width:810px) and (max-width:1199.98px){.hs__intro{font-size:4.15cqi}}
@media (max-width:809.98px){.meta-row{white-space:nowrap}.meta-row span:nth-child(2){display:none}.hs__intro{font-size:4.05cqi}}
/* "Releases" fills 99% of the width (Framer: 1132 of 1140), 10px above the grid. */
.releases__title{font-size:25.9cqi;margin-top:-42px}
.rel-grid{margin-top:10px}
@media (min-width:810px) and (max-width:1199.98px){.releases__title{margin-top:-22px}.rel-grid{margin-top:18px}}
@media (max-width:809.98px){.releases__title{margin-top:-4px}.rel-grid{margin-top:10px}}

/* =====================================================================
   POLISH (Sep 30): one type scale and one spacing scale for the whole site.
   Replaces Framer's one-off sizes and gaps on every page except the hero and
   history block. Later rules win, so everything here is the final word.
   ===================================================================== */
:root{
  --s1:10px; --s2:20px; --s3:40px; --s4:80px; --s5:120px;   /* spacing */
  --t-display:15.5cqi;  /* page titles and homepage section headings */
  --t-title:93px;       /* detail titles (release, artist, product, gallery) */
  --t-lead:24px;        /* intro lines, contact labels */
  --t-body:20px;        /* body text */
  --t-small:16px;       /* names, captions, labels */
}
@media (min-width:810px) and (max-width:1199.98px){
  :root{--s3:30px;--s4:60px;--s5:90px;--t-title:72px;--t-lead:21px;--t-body:17px;--t-small:14px}
}
@media (max-width:809.98px){
  :root{--s2:16px;--s3:24px;--s4:48px;--s5:64px;--t-title:40px;--t-lead:17px;--t-body:15px;--t-small:13px}
}
main > .wrap,main > section,main > article{container-type:inline-size}

/* ---- Titles ---- */
.ptitle,.releases__title,.about__title,.artists__title{font-size:var(--t-display);font-weight:600;line-height:.9;letter-spacing:-.05em;text-align:left;white-space:nowrap;margin:0 0 var(--s3) -.04em;padding:0}
.artists__head{font-size:var(--t-display);margin:0 0 var(--s3);column-gap:var(--s1)}
.artists__head .artists__title{font-size:1em;margin:0 0 0 -.04em}
.artists__accent{height:.727em;margin:.087em 0 0;border-radius:0 50px 50px 0}
.dtitle,.artist__name,.product__title,.gallery__title{font-size:var(--t-title);font-weight:600;line-height:1;letter-spacing:-.03em;text-align:left;margin:0 0 var(--s3) -.04em;padding:0;white-space:normal}
.artist__name{margin:var(--s2) 0 0 -.04em}

/* ---- Body text ---- */
.about__text,.artist__bio,.product__desc,.release__info,.rel-grid .rel__info{font-size:var(--t-body);line-height:1.5;letter-spacing:-.02em}
.about__text{gap:.9em}
.artist__bio{gap:.9em}
.artists .artist-tile__name,.shop-item__text,.artist__links,.gallery-card__count{font-size:var(--t-small);line-height:1.25}
.hs__intro{font-size:var(--t-lead);line-height:1.25;letter-spacing:-.02em;color:var(--grey);margin:var(--s2) 0 0;padding:0}

/* ---- Spacing between the page and the footer ---- */
.foot{margin-top:var(--s4)}

/* ---- About: text | photo, sides alternate; stacked on phones ---- */
.about{padding-top:0}
.about__blocks{margin-top:0;gap:var(--s4)}
.about__block,.about__block:nth-child(1),.about__block:nth-child(2),.about__block:nth-child(3){min-height:0;column-gap:var(--s2);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.about__block .about__img,.about__block:nth-child(n) .about__img{height:auto;aspect-ratio:4/3;border-radius:var(--radius)}
@media (max-width:809.98px){
  .about__block,.about__block:nth-child(1),.about__block:nth-child(2),.about__block:nth-child(3){grid-template-columns:1fr;row-gap:var(--s2)}
  .about__block .about__img,.about__block:nth-child(n) .about__img{order:-1;border-radius:32px}
  .about__block--flip .about__text{order:2}
  .about__text,.about__block--flip .about__text{font-size:var(--t-body)}
}

/* ---- Releases grid ---- */
.rel-grid{margin-top:0;gap:var(--s3) var(--s1)}
.rel-grid .rel{column-gap:var(--s2)}
@media (max-width:809.98px){.rel-grid{margin-top:0;gap:var(--s3) var(--s1)}.rel-grid .rel{row-gap:var(--s1)}}

/* ---- Release page: big title, then cover | details; left aligned everywhere ---- */
.release__head{margin-block:0}
.release{column-gap:var(--s2)}
.pager{padding-top:var(--s3);font-size:var(--t-small);line-height:1.5}
@media (max-width:809.98px){
  .release{justify-items:stretch;text-align:left;row-gap:var(--s2)}
  .release__info{align-items:flex-start}
  .pager{font-size:var(--t-small);line-height:1.5}
}

/* ---- Artists grid: 3 columns (2 on phones), names in the small size ---- */
.artists .artist-grid{padding:0;margin-top:0;row-gap:var(--s3);column-gap:var(--s1)}
.artists .artist-tile{gap:var(--s1)}
.artists .artist-tile img{height:auto;aspect-ratio:16/9;border-radius:16px}
@media (max-width:809.98px){.artists .artist-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s3);padding:0;margin-top:0}.artists .artist-tile{gap:8px}}

/* ---- Artist page: photo + details | bio; stacked on phones ---- */
.artist{column-gap:var(--s3);margin-top:0}
.artist__label{margin-top:var(--s3)}
@media (min-width:810px) and (max-width:1199.98px){.artist{margin-top:0}.artist__label{margin-top:var(--s3)}}
@media (max-width:809.98px){
  .artist{grid-template-columns:1fr;margin-top:0}
  .artist__photo{border-radius:32px}
  .artist__name{font-size:var(--t-title);font-weight:600;line-height:1;margin-top:var(--s2)}
  .artist__label{margin-top:var(--s3)}
  .artist__bio{margin-top:var(--s3);font-size:var(--t-body);line-height:1.5}
}

/* ---- Merch ---- */
.shop-grid{margin-top:0;gap:var(--s3) var(--s1)}
.shop-item{column-gap:var(--s2)}
@media (max-width:809.98px){.shop-grid{width:auto;gap:var(--s3) var(--s1)}.shop-item{row-gap:var(--s1)}.shop-item img{width:100%}}
.product__img{margin-top:0}
.product__buyrow{margin-top:var(--s3)}
.product__desc{margin-top:var(--s3)}
.product__next{margin-top:var(--s2);font-size:var(--t-small)}
@media (max-width:809.98px){.product{width:var(--wrap)}.product__title{text-align:left;padding:0;font-size:var(--t-title)}}

/* ---- Media ---- */
.media-tabs{justify-content:flex-start;margin:calc(var(--s2) - var(--s3)) 0 var(--s3)}
.gallery-list{margin-top:0}
.gallery,.gallery.wrap{width:var(--wrap);margin-inline:auto}
.gallery__grid{gap:var(--s1)}
.gallery__grid img,.gallery__grid a{border-radius:16px}
.gallery__back{margin-top:var(--s3);text-align:left}
@media (min-width:1200px){.gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:809.98px){.gallery,.gallery.wrap{width:var(--wrap)}.gallery__title{font-size:var(--t-title);line-height:1}}
@media (min-width:810px) and (max-width:1199.98px){.gallery,.gallery.wrap{width:var(--wrap)}.gallery__title{line-height:1}}

/* ---- Contact ---- */
.contact{width:var(--wrap);padding-top:0}
.contact__cols{margin-top:0;gap:var(--s3) var(--s2)}
.contact__label{font-size:var(--t-lead);line-height:1.25;color:var(--grey)}
.contact__value{font-size:var(--t-body);line-height:1.5;color:var(--white)}
.contact__value a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.contact__value a:hover{text-decoration-color:currentColor}
@media (min-width:810px) and (max-width:1199.98px){.contact{width:var(--wrap);padding-top:0}}
@media (max-width:809.98px){.contact{width:var(--wrap);padding-top:0}.contact__cols{margin-top:0}}

/* ---- Intake ---- */
@media (min-width:810px) and (max-width:1199.98px){.intake__frame{margin-top:0}}

/* ---- Homepage sections: same structure, heading size and spacing for all three ---- */
.hs,.hs--rel,.hs--art,.hs--merch{margin-top:var(--s5)}
.hs .meta-row{order:0}
.hs .hs__head,.hs--rel .hs__head,.hs--art .hs__head,.hs--merch .hs__head{order:0;margin:var(--s3) 0 0;padding:0;align-items:center;gap:var(--s2)}
.hs .hs__title,.hs--art .hs__title,.hs--merch .hs__title,.hs #h-releases{font-size:var(--t-display);letter-spacing:-.05em;line-height:.9;padding:0;margin:0 0 0 -.04em;font-variation-settings:"opsz" 32}
.hs .hs__more,.hs--rel .hs__more,.hs--art .hs__more,.hs--merch .hs__more{order:0;position:static;margin:0;flex:none}
.hs .hs__intro{order:0}
.hs .strip--label,.hs--art .strip--label,.hs--merch .strip--label{order:0;margin-top:var(--s2);text-transform:uppercase}
.hs .hs__rel,.hs .hs__artists,.hs .hs__products{order:0;margin-top:var(--s2);gap:var(--s1)}
.hs .hs__rel{margin-top:var(--s3)}
.hs__relcard img,.hs__product img{border-radius:24px}
.hs__product img{aspect-ratio:1}
@media (min-width:810px) and (max-width:1199.98px){
  .hs,.hs--rel,.hs--art,.hs--merch{margin-top:var(--s5)}
  .hs .hs__head,.hs--rel .hs__head,.hs--art .hs__head,.hs--merch .hs__head{margin-top:var(--s3)}
  .hs .hs__title,.hs--art .hs__title,.hs--merch .hs__title,.hs #h-releases{font-size:var(--t-display);padding:0}
  .hs .hs__intro{font-size:var(--t-lead);line-height:1.25;margin:var(--s2) 0 0}
  .hs .strip--label,.hs--art .strip--label,.hs--merch .strip--label{margin-top:var(--s2)}
  .hs .hs__rel,.hs .hs__artists,.hs .hs__products{margin-top:var(--s2);gap:var(--s1)}
  .hs .hs__rel{margin-top:var(--s3)}
  .hs--merch .hs__more{order:0;margin:0}
}
@media (max-width:809.98px){
  .hs,.hs--rel,.hs--art,.hs--merch{margin-top:var(--s5)}
  .hs .hs__head,.hs--rel .hs__head,.hs--art .hs__head,.hs--merch .hs__head{margin-top:var(--s3);padding:0}
  .hs .hs__title,.hs--art .hs__title,.hs--merch .hs__title,.hs #h-releases{font-size:var(--t-display);letter-spacing:-.05em;padding:0}
  .hs .hs__more,.hs--rel .hs__more,.hs--art .hs__more,.hs--merch .hs__more{width:auto;height:36px;min-height:36px;padding:0 16px;font-size:14px;margin:0;position:static}
  .hs .hs__intro{font-size:var(--t-lead);line-height:1.25;margin:var(--s2) 0 0;padding:0}
  .hs .strip--label,.hs--art .strip--label,.hs--merch .strip--label{margin-top:var(--s2)}
  .hs .hs__rel,.hs .hs__artists,.hs .hs__products{margin-top:var(--s2);gap:var(--s1)}
  .hs .hs__rel{margin-top:var(--s3)}
  .hs--merch .hs__more{order:0;margin:0}
}

/* Intro wraps naturally at a readable width instead of fixed desktop line breaks. */
.hs__intro br{display:none}
.hs .hs__intro{max-width:25em;text-wrap:pretty}

/* =====================================================================
   FINISH (Sep 30): one photo shape, label rows on every page, one hover/press
   language, and the artist page's releases in the Releases card style.
   ===================================================================== */
:root{--r-img:24px}
@media (min-width:810px) and (max-width:1199.98px){:root{--r-img:20px}}
@media (max-width:809.98px){:root{--r-img:16px}}

/* 1. Photos of people and places are 3:2 everywhere; artwork and products stay square;
      the photo archive keeps each picture's own shape. One corner radius for all. */
.artists .artist-tile img,
.about__block:nth-child(n) .about__img,
.artist .artist__photo,
.hs .hs__artist img,
.gallery-card img{height:auto;aspect-ratio:3/2;object-fit:cover}
.artists .artist-tile img,.about__block:nth-child(n) .about__img,.artist .artist__photo,
.rel-grid .rel__art img,.hs .hs__relcard img,.hs .hs__product img,.shop-item img,.release .release__art,
.gallery-card,.gallery__grid img,.gallery__grid a{border-radius:var(--r-img)}
.hs .hs__artist{border-radius:var(--r-img)}
.hs .hs__artist img{height:auto}

/* 2. Label rows: every main page opens with one, 40px above its title, like the homepage. */
.meta-row + .ptitle,.meta-row + .artists__head{margin-top:var(--s3)}

/* 3. Hover and press: images brighten, linked names underline, buttons invert,
      and anything you can click shrinks 3% while pressed. */
.hs__relcard img,.hs__artist img,.hs__product img,.rel__art img,.artist-tile img,.shop-item img,
.gallery-card img,.gallery__grid img{transition:filter .3s ease;transform:none}
.hs__relcard:hover img,.hs__artist:hover img,.hs__product:hover img,.rel__art:hover img,.artist-tile:hover img,
.shop-item:hover img,.gallery-card:hover img,.gallery__grid a:hover img{filter:brightness(1.12);transform:none}
.artist-tile:hover .artist-tile__name,.shop-item:hover .shop-item__name,.rel__title a:hover,.rel__artist a:hover,
.pager a:hover,.product__next:hover,.contact__value a:hover,.artist__links a:hover,.foot__links a:hover,.gallery-card:hover .gallery-card__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pill-link:hover,.media-tabs a:hover{background:var(--white);color:var(--black)}
.hs__relcard,.hs__artist,.hs__product,.rel__art,.artist-tile,.shop-item,.gallery-card,.gallery__grid a,
.pill-link,.media-tabs a,.product__buy{transition:transform .1s ease-out,background-color .2s ease,color .2s ease}
.hs__relcard:active,.hs__artist:active,.hs__product:active,.rel__art:active,.artist-tile:active,.shop-item:active,
.gallery-card:active,.gallery__grid a:active,.pill-link:active,.media-tabs a:active,.product__buy:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .hs__relcard,.hs__artist,.hs__product,.rel__art,.artist-tile,.shop-item,.gallery-card,.gallery__grid a,.pill-link,.media-tabs a,.product__buy,
  .hs__relcard img,.hs__artist img,.hs__product img,.rel__art img,.artist-tile img,.shop-item img,.gallery-card img,.gallery__grid img{transition:none}
  .hs__relcard:active,.hs__artist:active,.hs__product:active,.rel__art:active,.artist-tile:active,.shop-item:active,
  .gallery-card:active,.gallery__grid a:active,.pill-link:active,.media-tabs a:active,.product__buy:active{transform:none;opacity:.7}
}

/* 4. Artist page: "On Chrome" uses the Releases cards, stacked (cover over text). */
.artist .artist__rel-head{margin-top:var(--s3);font-size:var(--t-lead);font-weight:600;line-height:1.25;letter-spacing:-.02em;text-transform:none;color:var(--white)}
.artist .rel-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s1);margin-top:0}
.artist .rel-grid--compact .rel{grid-template-columns:1fr;row-gap:var(--s1)}
.artist .rel-grid--compact .rel__info{font-size:var(--t-small);line-height:1.4}
@media (max-width:809.98px){.artist .rel-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shop-grid .shop-item img{aspect-ratio:1}

/* Hero: clip the photo to the rounded card itself. Without this the fading photo is drawn
   on its own layer during the load animation and shows square corners until it finishes. */
.hero__card{clip-path:inset(0 round var(--radius));-webkit-mask-image:-webkit-radial-gradient(white,black)}
.hero__img,.hero__card::after{border-radius:inherit}

/* Phone menu (measured on Framer): the pill itself grows from 100 to 375px with a small
   spring, pushing the page down; inside, a lighter rounded panel holds the seven links,
   centred. The menu icon turns into an X. */
@media (max-width:809.98px){
  .js .nav .nav__pill{grid-template-rows:100px auto;row-gap:0;align-content:start;align-items:center;height:100px;overflow:hidden;
    transition:height .5s cubic-bezier(.3,1.25,.45,1)}
  .js .nav.menu-open .nav__pill{height:375px}
  .js .nav .nav__links{position:static;grid-column:1 / -1;grid-row:2;display:flex;flex-direction:column;align-items:stretch;
    width:auto;margin:-5px 0 25px;padding:11px 0;gap:0;background:rgba(187,187,187,.2);border-radius:38px;height:255px;
    justify-content:center;clip-path:none;visibility:hidden;opacity:0;pointer-events:none;
    transition:opacity .2s ease,visibility 0s linear .2s}
  .js .nav.menu-open .nav__links{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .3s ease .12s,visibility 0s}
  .js .nav .nav__links a{display:block;padding:8px 0;border:0;text-align:center;font-size:14px;font-weight:600;line-height:17px;color:var(--white)}
  .js .nav .nav__links a::after{display:none}
  .js .nav .nav__links a[aria-current]{color:var(--white);text-decoration:underline;text-underline-offset:4px}
  .burger i{transition:transform .3s cubic-bezier(.3,1.25,.45,1),opacity .2s ease}
  .nav__toggle[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
  .nav__toggle[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:809.98px) and (prefers-reduced-motion:reduce){
  .js .nav .nav__pill,.js .nav .nav__links,.js .nav.menu-open .nav__links,.burger i{transition:none}
}