/* Written by build/fetch-fonts.py. Do not edit by hand: a rebuild overwrites it.
   Cormorant Garamond, Jost, Rye and Caveat. SIL Open Font License 1.1, latin subset. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/caveat-normal-400-500-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url('/fonts/cormorant-garamond-normal-300-500-latin.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url('/fonts/jost-normal-300-500-latin.woff2') format('woff2')}
@font-face{font-family:'Rye';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/rye-normal-400-latin.woff2') format('woff2')}

:root{--ink:#120b06;--ground:#120b06;--ground-deep:#1c1209;--ground-band:#1c1209;--ground-raised:#2a190c;--surface:#2a190c;--hairline:rgba(242, 210, 162, 0.16);--hairline-strong:rgba(242, 210, 162, 0.32);--ivory:#fbe9c8;--ivory-dim:rgba(251, 233, 200, 0.80);--ivory-faint:rgba(251, 233, 200, 0.62);--gold:#c98b3a;--gold-bright:#e0a64e;--gold-faint:rgba(224, 166, 78, 0.30);--panel-accent:#e0a64e;--panel-accent-fill:#b5772f;--panel-tint:rgba(224, 166, 78, 0.12);--panel-glow:rgba(253, 220, 160, 0.22);--glow:rgba(253, 220, 160, 0.22);--display:Rye, Georgia, serif;--serif:"Cormorant Garamond", Georgia, serif;--hand:Caveat, "Bradley Hand", cursive;--sans:Jost, "Helvetica Neue", Arial, sans-serif;--display-weight:400;--display-track:0.04em;--eyebrow-track:0.32em;--nav-track:0.20em;--drift:22s;--sheen:34s;--amp:6px;--maxw:1180px;--gutter:clamp(20px, 5vw, 56px);--section-gap:clamp(52px, 8vh, 104px)}
/* Rocky Bay platform: the shared layout and type system.
   Every value here is a token reference. No colour, face or size is literal in this file, so the
   same rules render Rocky Bay and Key Pen from two different token sets. The skin files carry the
   differences. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--ink);
  padding:10px 18px;font-size:13px;letter-spacing:.12em}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ---- type -------------------------------------------------------------- */
.display{font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:var(--display-track);line-height:1.02;text-transform:uppercase}
.eyebrow{font-size:11px;letter-spacing:var(--eyebrow-track);text-transform:uppercase;
  color:var(--gold-bright);font-weight:500;margin:0}
.lede{font-size:clamp(15px,1.5vw,17px);color:var(--ivory-dim);max-width:54ch;line-height:1.75}

/* ---- header ------------------------------------------------------------ */
.hdr{position:relative;z-index:30;padding-block:clamp(18px,2.4vh,30px)}
.hdr--over{position:absolute;inset-inline:0;top:0}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.lockup{display:grid;grid-template-columns:auto;justify-items:center;gap:2px;flex:none;
  padding-block:2px}
.lockup .mark{width:clamp(56px,6vw,74px);height:auto}
.lockup__name{font-family:var(--display);font-weight:var(--display-weight);
  font-size:clamp(15px,1.5vw,19px);letter-spacing:.30em;text-indent:.30em;color:var(--ivory);
  line-height:1;white-space:nowrap}
.lockup__rule{display:flex;align-items:center;gap:7px;font-size:7.5px;letter-spacing:.42em;
  text-indent:.42em;color:var(--gold);line-height:1;white-space:nowrap;margin-top:3px}
.lockup__rule i{display:block;width:clamp(12px,1.4vw,20px);height:1px;background:var(--gold);
  opacity:.65}
.lockup--sm .mark{width:64px}

.nav{margin-inline-start:auto}
.nav ul{display:flex;gap:clamp(18px,2.6vw,38px)}
.nav a{font-size:11.5px;letter-spacing:var(--nav-track);text-transform:uppercase;
  color:var(--ivory-dim);transition:color .3s ease;position:relative;padding-block:6px}
.nav a:hover,.nav a[aria-current]{color:var(--ivory)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold)}
.hdr__svcs{display:flex;gap:12px;align-items:center}
.hsvc{color:var(--ivory-faint);transition:color .3s ease}
.hsvc:hover{color:var(--gold-bright)}
.burger{display:none;width:26px;height:18px;flex-direction:column;justify-content:space-between;
  margin-inline-start:auto}
.burger span{display:block;height:1.4px;background:var(--ivory);transition:transform .3s,opacity .3s}
.mnav{display:none}

@media (max-width:900px){
  .nav,.hdr__svcs{display:none}
  .burger{display:flex}
  /* On the home page the header is absolutely positioned over the hero, so an open menu with no
     ground of its own lands transparently on top of the hero statement. */
  .mnav{display:block;max-height:0;overflow:hidden;background:rgba(0,4,8,.97);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transition:max-height .42s cubic-bezier(.22,1,.36,1)}
  .mnav[data-open]{border-bottom:1px solid var(--hairline)}
  .mnav[data-open]{max-height:320px}
  .mnav ul{padding:14px var(--gutter) 24px;display:grid;gap:2px}
  .mnav a{display:block;padding:13px 0;font-size:13px;letter-spacing:var(--nav-track);
    color:var(--ivory-dim);border-bottom:1px solid var(--hairline)}
  .burger[aria-expanded=true] span:nth-child(1){transform:translateY(8.3px) rotate(45deg)}
  .burger[aria-expanded=true] span:nth-child(2){opacity:0}
  .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8.3px) rotate(-45deg)}
}

/* ---- the stage: hero AND featured release on one photograph ------------- */
/* The approved concept runs the bay straight down behind FEATURED RELEASE with no section edge.
   Both live inside .stage, which owns the image, the motion and one scrim that fades to ink at
   the bottom. Nothing between them has a background of its own. */
.stage{position:relative;isolation:isolate;overflow:hidden}
.stage__media{position:absolute;inset:0;z-index:-3}
.stage__media img{width:100%;height:100%;object-fit:cover;object-position:62% 38%}
/* Two things move, both long period and low amplitude: the reflection drifts, and a sheen crosses
   it. The brief asks for water that is barely alive, not a looping video. */
.stage__drift{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(52% 30% at 62% 46%,var(--glow),transparent 72%);
  animation:drift var(--drift) ease-in-out infinite alternate}
.stage__sheen{position:absolute;inset:0;z-index:-3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,transparent 38%,rgba(227,194,102,.05) 50%,transparent 62%);
  background-size:280% 100%;animation:sheen var(--sheen) linear infinite}
.stage__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink) 0%,rgba(0,4,8,.86) 26%,rgba(0,4,8,.30) 58%,rgba(0,4,8,.10) 100%),
    linear-gradient(180deg,rgba(0,4,8,.74) 0%,rgba(0,4,8,.10) 22%,rgba(0,4,8,.55) 64%,var(--ink) 100%)}
@keyframes drift{from{transform:translate3d(0,calc(var(--amp) * -1),0)}
                 to{transform:translate3d(0,var(--amp),0)}}
@keyframes sheen{from{background-position:180% 0}to{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){
  .stage__drift,.stage__sheen{animation:none}
  .stage__sheen{display:none}
}

/* The hero is NOT a full viewport. The concept shows the featured release already on screen
   under it, which is most of why that page reads dense and editorial rather than sparse. */
.hero{position:relative;display:flex;align-items:center;min-height:min(74svh,660px)}
.hero__in{position:relative;padding-block:clamp(92px,14vh,150px) clamp(30px,5vh,56px)}
.hero__h{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:var(--display-track);line-height:.98;color:var(--ivory);
  font-size:clamp(2.6rem,7.6vw,5.6rem);max-width:13ch;
  text-shadow:0 2px 40px rgba(0,0,0,.72)}
.hero__kicker{margin-bottom:clamp(16px,2.8vh,28px);color:var(--ivory-faint);font-size:10.5px;
  letter-spacing:var(--eyebrow-track);text-transform:uppercase}
.hero__sup{margin-top:clamp(16px,2.6vh,26px);font-size:clamp(11.5px,1.15vw,13px);
  letter-spacing:.20em;text-transform:uppercase;color:var(--ivory-dim);line-height:2.05}
.hero__cta{display:inline-flex;align-items:center;gap:15px;margin-top:clamp(22px,3.6vh,38px);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-dim);
  transition:color .3s ease}
.hero__cta:hover{color:var(--ivory)}
.hero__cta i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid var(--hairline-strong);transition:border-color .3s ease,background .3s ease}
.hero__cta:hover i{border-color:var(--gold);background:var(--panel-tint)}
.hero__cta svg{margin-inline-start:2px}

/* ---- section heads ----------------------------------------------------- */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:clamp(18px,2.6vh,30px)}
.sechead h2{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:var(--display-track);font-size:clamp(1.35rem,3vw,2.15rem);color:var(--ivory)}
.sechead__more{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ivory-faint);transition:color .3s ease;white-space:nowrap}
.sechead__more:hover{color:var(--gold-bright)}

/* ---- featured release, on the stage ------------------------------------ */
.featured{position:relative;padding-block:clamp(6px,1.5vh,18px) clamp(48px,8vh,88px)}
.featured__grid{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,auto);
  grid-template-areas:"eyebrow eyebrow aside" "art body aside";
  gap:clamp(18px,2.6vw,38px);align-items:start}
.featured .eyebrow{grid-area:eyebrow;margin-bottom:4px}
.featured__art{grid-area:art;display:block;position:relative;border:1px solid var(--hairline);
  background:var(--ground-raised);overflow:hidden;
  box-shadow:0 26px 70px -28px rgba(0,0,0,.95)}
.featured__art img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.featured__art:hover img{transform:scale(1.035)}
.featured__body{grid-area:body;padding-top:2px}
.featured__artist{font-family:var(--display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:.22em;font-size:clamp(1.1rem,2.3vw,1.6rem);
  color:var(--ivory)}
.featured__artist a{transition:color .3s ease}
.featured__artist a:hover{color:var(--gold-bright)}
.featured__title{font-size:clamp(11px,1.25vw,13.5px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-dim);font-weight:400;margin-top:8px}
.featured__title a{transition:color .3s ease}
.featured__title a:hover{color:var(--ivory)}
.featured__aside{grid-area:aside;align-self:end;text-align:right;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-faint);line-height:2.2;
  justify-self:end;white-space:nowrap}
@media (max-width:1080px){.featured__aside{display:none}}
@media (max-width:860px){
  .featured__grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"eyebrow" "art" "body";justify-items:start}
  .featured__art{max-width:260px}
}

/* ---- listen ------------------------------------------------------------ */
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.2vw,26px);margin-top:20px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:172px;
  padding:13px 28px;border:1px solid var(--gold);border-radius:999px;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright);
  transition:background .35s ease,color .35s ease}
.pill:hover{background:var(--gold);color:var(--ink)}
.svcs{display:flex;gap:11px;flex-wrap:wrap}
/* A forthcoming release: its date, and its pre-save. Never a listen control. */
.listen--soon{gap:clamp(14px,2.4vw,26px)}
.outdate{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-dim);
  white-space:nowrap}
.outdate span{color:var(--gold-bright);margin-inline-end:.5em}
.rcard__meta .soon{font-style:normal;color:var(--gold-bright);white-space:nowrap}
.svc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--ground-raised);border:1px solid var(--hairline);color:var(--ivory-dim);
  transition:color .3s ease,border-color .3s ease,transform .3s ease}
.svc:hover{color:var(--gold-bright);border-color:var(--gold);transform:translateY(-2px)}

/* ---- artist panels ----------------------------------------------------- */
.artists{padding-block:var(--section-gap) calc(var(--section-gap) * .6);
  background:var(--ink)}
.apanels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(14px,1.8vw,26px)}
.apanel{position:relative;display:block;overflow:hidden;isolation:isolate;
  border:1px solid var(--hairline);background:var(--ground-raised);
  aspect-ratio:16/9.5;min-height:230px}
.apanel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);z-index:-2}
a.apanel:hover .apanel__img{transform:scale(1.045)}
.apanel__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.86) 100%),
             linear-gradient(90deg,rgba(0,0,0,.6) 0%,transparent 55%)}
.apanel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--panel-tint,transparent);opacity:0;transition:opacity .5s ease}
a.apanel:hover::after{opacity:1}
.apanel__text{position:absolute;left:clamp(20px,3vw,34px);bottom:clamp(20px,3vw,32px);
  display:grid;gap:9px;max-width:72%}
.apanel__name{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(1.3rem,3.1vw,2rem);color:var(--ivory);line-height:1}
.apanel__genre{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--panel-accent,var(--gold-bright))}
.apanel__go{position:absolute;right:clamp(18px,2.6vw,30px);bottom:clamp(20px,3vw,32px);
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--panel-accent,var(--gold));color:var(--panel-accent,var(--gold-bright));
  transition:background .35s ease,color .35s ease}
a.apanel:hover .apanel__go{background:var(--panel-accent,var(--gold));color:var(--ink)}
.apanel--soon .apanel__text{grid-auto-flow:row}
.apanel--soon .apanel__name{order:2}
.apanel--soon .apanel__genre{order:1}

/* ---- release grid ------------------------------------------------------ */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(18px,2.4vw,34px)}
/* On a phone a single column of 331px covers turns a three release index into a very long
   scroll. Two up keeps the artwork large enough to read and the page short enough to scan. */
@media (max-width:560px){.rgrid{grid-template-columns:1fr 1fr;gap:16px 14px}
  .rcard__title{font-size:.92rem;letter-spacing:.06em}}
.rcard{display:grid;gap:11px}
.rcard__art{display:block;overflow:hidden;border:1px solid var(--hairline);
  background:var(--ground-raised)}
.rcard__art img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.rcard:hover .rcard__art img{transform:scale(1.045)}
.rcard__meta{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-faint)}
.rcard__title{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:.10em;font-size:clamp(.95rem,1.6vw,1.12rem);color:var(--ivory);line-height:1.25}
.rcard:hover .rcard__title{color:var(--gold-bright)}

/* ---- track list and credits -------------------------------------------- */
.tl{display:grid;gap:1px;margin-top:22px;border-top:1px solid var(--hairline)}
.tl li{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:14px;
  padding:14px 2px;border-bottom:1px solid var(--hairline);font-size:13.5px}
.tl__n{color:var(--ivory-faint);font-size:11px;letter-spacing:.1em}
.tl__t{color:var(--ivory)}
.tl__dur{color:var(--ivory-faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.cr{display:grid;gap:1px;margin-top:26px;border-top:1px solid var(--hairline)}
.cr__row{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:18px;padding:13px 2px;
  border-bottom:1px solid var(--hairline);font-size:13px}
.cr dt{color:var(--ivory-faint);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding-top:2px}
.cr dd{margin:0;color:var(--ivory-dim)}
@media (max-width:560px){.cr__row{grid-template-columns:1fr;gap:5px}}

/* ---- video ------------------------------------------------------------- */
.vid{position:relative;display:block;overflow:hidden;border:1px solid var(--hairline);
  background:var(--ground-raised);aspect-ratio:16/9}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.vid:hover img{transform:scale(1.04)}
.vid__play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  border:1px solid var(--hairline-strong);background:rgba(0,0,0,.34);backdrop-filter:blur(3px)}
.vid__play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:13px solid var(--ivory);border-block:8px solid transparent;margin-inline-start:23px}
.vid__title{position:absolute;left:18px;bottom:16px;right:18px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivory);text-shadow:0 1px 14px rgba(0,0,0,.9)}

/* ---- mobile action stack ----------------------------------------------- */
.mobile-actions{display:none}
.stack__h{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);
  margin:28px 0 10px;font-weight:500}
.stack{display:grid;gap:8px}
.stack__row{display:flex;align-items:center;gap:14px;padding:15px 18px;
  background:var(--ground-raised);border:1px solid var(--hairline);color:var(--ivory);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.stack__row span{flex:1}
.stack__row em{font-style:normal;color:var(--ivory-faint);font-size:17px;line-height:1}
.stack__row:active{background:var(--surface)}
.stack--plain .stack__row{background:transparent}
@media (max-width:760px){.mobile-actions{display:block}}

/* ---- breadcrumbs ------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ivory-faint);margin-bottom:clamp(20px,3vh,34px)}
.crumbs a{transition:color .3s ease}
.crumbs a:hover{color:var(--gold-bright)}
.crumbs em{font-style:normal;opacity:.4}
.crumbs [aria-current]{color:var(--ivory-dim)}

/* ---- editorial band ---------------------------------------------------- */
.editorial{padding-block:var(--section-gap);position:relative;
  background:linear-gradient(180deg,var(--ink) 0%,var(--ground-deep) 42%,var(--ground-deep) 100%)}
.editorial__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(26px,4.4vw,64px);align-items:center}
.editorial h2{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:var(--display-track);line-height:1.12;font-size:clamp(1.6rem,4vw,2.7rem);
  color:var(--ivory);text-wrap:balance}
.editorial h2 em{display:block;font-style:normal;text-transform:none;letter-spacing:.02em;
  color:var(--ivory-dim);font-size:.62em;margin-top:.34em}
.editorial__rule{width:74px;height:1px;background:var(--gold);opacity:.7;margin:clamp(22px,3.6vh,34px) 0}
.editorial__body{font-size:14.5px;line-height:1.95;color:var(--ivory-dim);max-width:46ch}
.editorial__img{border:1px solid var(--hairline);overflow:hidden}
.editorial__img img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:820px){.editorial__grid{grid-template-columns:1fr}}

/* ---- generic page shell ------------------------------------------------ */
.page{padding-block:clamp(40px,7vh,84px) var(--section-gap)}
.page__h{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:var(--display-track);font-size:clamp(2rem,5.4vw,3.6rem);color:var(--ivory);
  line-height:1.02}
.page__lede{margin-top:clamp(18px,2.6vh,26px)}
.prose{display:grid;gap:1.15em;font-size:15px;line-height:1.92;color:var(--ivory-dim);max-width:62ch}
.rule{height:1px;background:var(--hairline);border:0;margin-block:var(--section-gap)}

/* ---- footer ------------------------------------------------------------ */
.ftr{padding-block:clamp(56px,9vh,104px) 34px;background:var(--ground);
  border-top:1px solid var(--hairline)}
.ftr__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(34px,6vw,86px);
  align-items:start}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,142px),1fr));
  gap:clamp(24px,3.4vw,44px)}
.fcol h3{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-bright);
  font-weight:500;margin-bottom:14px}
.fcol ul{display:grid;gap:9px}
.fcol a{font-size:12.5px;color:var(--ivory-dim);transition:color .3s ease}
.fcol a:hover{color:var(--ivory)}
.fsvcs a{display:inline-flex;align-items:center;gap:9px}
.ftr__rule{height:1px;background:var(--hairline);margin-block:clamp(34px,5vh,54px) 22px}
.ftr__base{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,3vw,30px);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-faint)}
.ftr__place{position:relative;padding-inline-end:clamp(14px,3vw,30px)}
.ftr__place::after{content:"";position:absolute;right:0;top:50%;width:clamp(20px,4vw,54px);
  height:1px;background:var(--hairline-strong);transform:translateX(100%)}
.ftr__name{margin-inline-start:clamp(28px,5vw,66px);color:var(--ivory-dim)}
.ftr__legal{margin-inline-start:auto;letter-spacing:.14em}
.ftr__credit{margin-top:26px}
@media (max-width:760px){
  .ftr__top{grid-template-columns:1fr}
  .ftr__legal{margin-inline-start:0;width:100%}
  .ftr__place::after{display:none}
  .ftr__name{margin-inline-start:0}
}

/* Narrows credit, strategy/Brand-Footer-Credit.md, dark ground values */
.nwc{display:inline-flex;align-items:center;gap:9px;color:#cfd8e4;text-decoration:none;padding:4px 0}
.nwc svg{width:26px;height:auto;flex:none}
.nwc .lo{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:none}
.nwc .lo b{color:#E8579B;font-weight:700}
.nwc:hover{color:#fff}

/* ---- reveal on scroll -------------------------------------------------- */
/* The hidden state is gated on .js, which an inline script in the head sets before first paint.
   Without that gate, a reveal is content that only JavaScript can make visible: if site.js fails
   to load, is blocked, or the page is parsed by anything that does not run scripts, the section
   stays at opacity 0 forever. The animation is a nicety; the copy is not. */
html.js [data-reveal]{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
html.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* The artist page's fact column. dt/dd reuse the credits list's rules, so a release page's
   credits and an artist page's facts are the same object set in the same way. */
.afacts .cr{border-top-color:var(--hairline)}
.afacts .cr a{color:var(--panel-accent,var(--gold-bright));border-bottom:1px solid transparent;
  transition:border-color .3s ease}
.afacts .cr a:hover{border-bottom-color:currentColor}
.afacts .listen{margin-top:28px}

/* ---- release page, both sites ------------------------------------------ */
.release-hero{padding-block:clamp(30px,5vh,56px) clamp(44px,7vh,80px)}
.release-hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.release-hero__art{border:1px solid var(--hairline);overflow:hidden;background:var(--ground-raised);
  box-shadow:0 34px 90px -40px rgba(0,0,0,.95);max-width:520px}
.release-hero__art img{width:100%;aspect-ratio:1;object-fit:cover}
.release-hero__meta{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivory-faint);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.release-hero__meta span::after{content:"·";margin-inline-start:10px;opacity:.5}
.release-hero__meta span:last-child::after{content:"";margin:0}
.release-hero__artist{margin-top:18px;font-size:clamp(13px,1.5vw,15px);letter-spacing:.24em;
  text-transform:uppercase;color:var(--panel-accent,var(--gold-bright))}
.release-hero__artist a:hover{color:var(--ivory)}
.release-hero__title{font-family:var(--display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:.07em;line-height:1.0;color:var(--ivory);
  font-size:clamp(2.1rem,6.4vw,4.2rem);margin-top:12px}
.release-hero__tag{margin-top:22px;font-size:14.5px;line-height:1.85;color:var(--ivory-dim);
  max-width:44ch;font-style:italic;font-family:var(--display);font-size:clamp(16px,2vw,20px)}
.release-hero__desc{margin-top:20px;font-size:14.5px;line-height:1.9;color:var(--ivory-dim);
  max-width:48ch}
@media (max-width:880px){
  .release-hero__grid{grid-template-columns:1fr}
  .release-hero__art{max-width:360px}
}


/* ---- 404, both sites ---------------------------------------------------- */
.nf{min-height:64svh;display:grid;place-items:center;text-align:center}
.nf__h{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:var(--display-track);font-size:clamp(1.8rem,5vw,3rem);color:var(--ivory)}
.nf p{margin-top:18px;color:var(--ivory-dim);font-size:14.5px}
.nf .pill{margin-top:30px}

/* ---- lyrics, both sites ------------------------------------------------- */
/* Real selectable text, never an image or a third party embed: it is the artist's own writing and
   it is the single most searched thing about any song. */
.lyrics{margin-top:var(--section-gap);padding-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--hairline)}
.lyrics__h{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);
  font-weight:500;margin-bottom:clamp(20px,3vh,30px)}
.lyrics__body{columns:2;column-gap:clamp(34px,6vw,86px);max-width:74ch}
.lyrics__body p{break-inside:avoid;margin-bottom:1.6em;font-size:14.5px;line-height:2;
  color:var(--ivory-dim)}
@media (max-width:760px){.lyrics__body{columns:1}}

/* Dusty Kyle skin, rockybayproductions.com/dustykyle/.
   Taken from his debut cover, not from the label: a centred poster composition, western wood type
   for the name, a letterspaced serif for titles, ornamental double rules with a diamond, and the
   handwritten fridge notes. Lamplit amber and cream on kitchen brown. Every colour and face is a
   token from brand/dustykyle/tokens.json, except the paper and pin of the fridge notes, which are
   drawn objects rather than palette. */

body{background:var(--ink)}

/* ---- header ------------------------------------------------------------ */
.dk-hdr{position:absolute;inset-inline:0;top:0;z-index:30;padding-block:clamp(16px,2.4vh,26px)}
.dk-hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.dk-wordmark{font-family:var(--display);font-size:clamp(17px,1.8vw,22px);letter-spacing:.06em;
  color:var(--ivory);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.dk-nav{margin-inline-start:auto}
.dk-nav ul{display:flex;gap:clamp(16px,2.6vw,34px)}
.dk-nav a{font-size:11px;letter-spacing:var(--nav-track);color:var(--ivory-dim);
  transition:color .3s ease}
.dk-nav a:hover{color:var(--ivory)}
.dk-pill{display:inline-flex;align-items:center;padding:9px 20px;border-radius:999px;
  border:1px solid var(--gold-bright);color:var(--gold-bright);font-size:10px;letter-spacing:.24em;
  transition:background .35s ease,color .35s ease}
.dk-pill:hover{background:var(--gold-bright);color:var(--ink)}
@media (max-width:560px){.dk-nav{display:none}.dk-pill{margin-inline-start:auto}}

/* ---- ornament ---------------------------------------------------------- */
/* The cover frames both its title panels with a pair of thin rules meeting a small diamond. */
.dk-orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold-bright)}
.dk-orn i{display:block;flex:1;max-width:220px;height:0;border-top:1px solid var(--hairline-strong);
  border-bottom:1px solid var(--hairline);padding-top:2px}
.dk-orn--wide i{max-width:min(36vw,420px)}

/* ---- hero: the poster -------------------------------------------------- */
.dk-hero{position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;
  min-height:min(92svh,820px);overflow:hidden;background:var(--ink)}
.dk-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:38% 40%;z-index:-3;filter:sepia(.3) saturate(.95) brightness(.98)}
.dk-hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 46%,rgba(18,11,6,.08),rgba(18,11,6,.62) 80%),
             linear-gradient(180deg,rgba(18,11,6,.70) 0%,rgba(18,11,6,.12) 28%,
             rgba(18,11,6,.34) 66%,var(--ink) 100%)}
/* Fine paper grain, so the cream lettering sits on something rather than on a photograph.
   An inline SVG noise: no request, and no file to keep. */
.dk-hero__grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dk-hero__in{padding-block:clamp(110px,16vh,170px) clamp(56px,9vh,96px)}
.dk-hero__name{font-family:var(--display);font-weight:var(--display-weight);
  letter-spacing:var(--display-track);line-height:.92;color:var(--ivory);
  font-size:clamp(3.2rem,12vw,8.6rem);margin-block:clamp(10px,1.6vh,18px);
  text-shadow:0 3px 0 rgba(42,25,12,.55),0 10px 50px rgba(0,0,0,.6)}
.dk-hero__genre{margin-top:clamp(12px,2vh,20px);font-family:var(--serif);font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.5em;text-indent:.5em;color:var(--ivory-dim)}
.dk-hero__single{display:grid;gap:6px;justify-items:center;margin-top:clamp(28px,5vh,52px)}
.dk-hero__kicker{font-size:10px;letter-spacing:var(--eyebrow-track);color:var(--gold-bright)}
.dk-hero__single a{font-family:var(--serif);font-size:clamp(1.25rem,2.8vw,1.9rem);
  letter-spacing:.24em;text-indent:.24em;color:var(--ivory);transition:color .3s ease}
.dk-hero__single a:hover{color:var(--gold-bright)}
.dk-hero__when{font-size:10.5px;letter-spacing:.28em;color:var(--ivory-dim)}
.dk-hero__cta{display:flex;justify-content:center;gap:12px;margin-top:clamp(18px,3vh,28px)}

.dk-btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;
  padding:14px 30px;border-radius:999px;border:1px solid var(--hairline-strong);color:var(--ivory);
  font-size:10.5px;letter-spacing:.26em;transition:background .35s ease,color .35s ease}
.dk-btn--fill{background:var(--panel-accent-fill);border-color:transparent;color:var(--ink)}
.dk-btn--fill:hover{background:var(--gold-bright)}

/* ---- the single -------------------------------------------------------- */
.dk-single{padding-block:var(--section-gap);background:var(--ink)}
.dk-single__grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:clamp(30px,6vw,84px);align-items:center}
.dk-single__art{display:block;overflow:hidden;border:1px solid var(--hairline);
  box-shadow:0 34px 90px -36px #000,0 0 0 8px var(--ground-raised)}
.dk-single__art img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.dk-single__art:hover img{transform:scale(1.03)}
.dk-single__body{text-align:center}
.dk-single__title{font-family:var(--serif);font-weight:500;letter-spacing:.2em;text-indent:.2em;
  line-height:1.2;color:var(--ivory);font-size:clamp(1.6rem,3.6vw,2.6rem);
  margin-block:clamp(14px,2.4vh,22px) 6px}
.dk-single__title a{transition:color .3s ease}
.dk-single__title a:hover{color:var(--gold-bright)}
.dk-single__edit{font-size:10.5px;letter-spacing:.34em;text-indent:.34em;color:var(--gold-bright);
  margin-bottom:clamp(14px,2.4vh,22px)}
.dk-single__desc{margin:clamp(18px,3vh,28px) auto 0;max-width:40ch;font-size:15px;line-height:1.85;
  color:var(--ivory-dim)}
.dk-single .listen{justify-content:center;margin-top:24px}
.dk-more{display:inline-block;margin-top:22px;font-size:10.5px;letter-spacing:.24em;
  color:var(--ivory-faint);transition:color .3s ease}
.dk-more em{font-style:normal}
.dk-more:hover{color:var(--gold-bright)}
@media (max-width:860px){
  .dk-single__grid{grid-template-columns:1fr;justify-items:center}
  .dk-single__art{max-width:420px;width:100%}
}

/* ---- about, with the notes off his fridge ------------------------------ */
.dk-about{padding-block:calc(var(--section-gap) * .4) var(--section-gap);background:var(--ink)}
.dk-about__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,6vw,84px);align-items:center;padding-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--hairline)}
.dk-about__h{font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--ivory);
  font-size:clamp(1.6rem,3.2vw,2.3rem);margin-bottom:clamp(14px,2.4vh,22px)}
.dk-about__prose{display:grid;gap:1em;font-size:15px;line-height:1.9;color:var(--ivory-dim);
  max-width:48ch}
.dk-notes{display:flex;justify-content:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap}
.dk-note{position:relative;margin:0;padding:30px 22px 22px;min-width:150px;
  background:#efe1c2;color:#3a2516;box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
  font-family:var(--hand);font-size:clamp(20px,2.2vw,25px);line-height:1.25;text-align:left}
.dk-note--0{transform:rotate(-3deg)}
.dk-note--1{transform:rotate(2.5deg) translateY(16px);background:#e8d6b2}
.dk-note__pin{position:absolute;top:9px;left:50%;width:13px;height:13px;margin-left:-6.5px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a7a68,#3a2f25);
  box-shadow:0 2px 3px rgba(0,0,0,.5)}
@media (max-width:860px){.dk-about__grid{grid-template-columns:1fr}}

/* ---- footer ------------------------------------------------------------ */
.dk-ftr{padding-block:clamp(44px,7vh,80px) 30px;background:var(--ground-deep);
  border-top:1px solid var(--hairline)}
.dk-ftr__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:center}
.dk-ftr__h{font-size:9.5px;letter-spacing:.28em;color:var(--gold-bright);font-weight:500;
  margin-bottom:14px}
.dk-follow{display:flex;gap:11px}
.dk-follow a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hairline);color:var(--ivory-dim);transition:color .3s ease,border-color .3s ease}
.dk-follow a:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
/* The one place the label is named. Its own mark and a link home; never a header badge. */
.dk-ftr__label a{display:grid;justify-items:start;gap:9px}
.dk-ftr__mark{width:70px;height:auto;opacity:.85}
.dk-ftr__line{font-size:9.5px;letter-spacing:.24em;color:var(--ivory-faint)}
.dk-ftr__more{font-size:9.5px;letter-spacing:.22em;color:var(--gold-bright)}
.dk-ftr__more em{font-style:normal}
.dk-ftr__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;
  margin-top:clamp(28px,4vh,44px);padding-top:20px;border-top:1px solid var(--hairline);
  font-size:10px;letter-spacing:.14em;color:var(--ivory-faint)}