/* Written by build/fetch-fonts.py. Do not edit by hand: a rebuild overwrites it.
   Cormorant Garamond and Jost, SIL Open Font License 1.1, latin subset. */
@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')}

:root{--ink:#000408;--ground:#02080e;--ground-deep:#01101a;--ground-band:#031117;--ground-raised:#0a141a;--surface:#111c1c;--hairline:rgba(232, 222, 210, 0.13);--hairline-strong:rgba(232, 222, 210, 0.26);--ivory:#f2e0da;--ivory-dim:rgba(242, 224, 218, 0.72);--ivory-faint:rgba(242, 224, 218, 0.55);--gold:#c9a227;--gold-bright:#e3c266;--gold-faint:rgba(201, 162, 39, 0.30);--panel-accent:#e3c266;--panel-accent-fill:#c9a227;--panel-tint:rgba(201, 162, 39, 0.08);--panel-glow:rgba(227, 194, 102, 0.16);--glow:rgba(227, 194, 102, 0.16);--display:"Cormorant Garamond", "Times New Roman", serif;--sans:Jost, "Helvetica Neue", Arial, sans-serif;--display-weight:300;--display-track:0.10em;--eyebrow-track:0.34em;--nav-track:0.20em;--drift:19s;--sheen:31s;--amp:9px;--maxw:1280px;--gutter:clamp(22px, 5vw, 64px);--section-gap:clamp(88px, 13vh, 168px)}
/* 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)}
}

/* ---- hero -------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* The reflection column drifts, and a sheen crosses it. Both are long period and low amplitude:
   the brief asks for water that is barely alive, not a looping video. */
.hero__drift{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(58% 42% at 62% 74%,var(--glow),transparent 72%);
  animation:drift var(--drift) ease-in-out infinite alternate}
.hero__sheen{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,transparent 38%,rgba(227,194,102,.055) 50%,transparent 62%);
  background-size:280% 100%;animation:sheen var(--sheen) linear infinite}
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 2%,rgba(0,4,8,.80) 34%,rgba(0,4,8,.14) 68%,transparent 100%),
             linear-gradient(180deg,rgba(0,4,8,.72) 0%,transparent 26%,transparent 58%,var(--ink) 99%)}
@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){
  .hero__drift,.hero__sheen{animation:none}
  .hero__sheen{display:none}
}
.hero__in{position:relative;padding-block:clamp(120px,18vh,200px) clamp(72px,12vh,120px)}
.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.7rem,8.2vw,6.4rem);max-width:14ch;
  text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero__eyebrow{margin-bottom:clamp(20px,4vh,38px);color:var(--ivory-faint);font-size:10.5px;
  letter-spacing:var(--eyebrow-track)}
.hero__sup{margin-top:clamp(20px,3.4vh,32px);font-size:clamp(12px,1.25vw,14px);
  letter-spacing:.20em;text-transform:uppercase;color:var(--ivory-dim);line-height:2.1}
.hero__cta{display:inline-flex;align-items:center;gap:15px;margin-top:clamp(28px,5vh,52px);
  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}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:1px;
  height:46px;background:linear-gradient(180deg,transparent,var(--gold));opacity:.5}

/* ---- section heads ----------------------------------------------------- */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:clamp(24px,3.6vh,40px)}
.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 -------------------------------------------------- */
.featured{position:relative;padding-block:clamp(60px,9vh,104px) clamp(66px,10vh,116px);
  background:linear-gradient(180deg,var(--ink) 0%,var(--ground-band) 26%,var(--ground-deep) 62%,
             var(--ink) 100%)}
/* The gold glint the concept carries across the top of this band: the hero's reflection
   continuing under the section rather than stopping at its edge. */
.featured::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,var(--gold-faint) 34%,var(--gold-bright) 50%,
             var(--gold-faint) 66%,transparent 96%);opacity:.34}
.featured__grid{display:grid;grid-template-columns:minmax(0,222px) minmax(0,1fr) minmax(0,auto);
  grid-template-areas:"eyebrow eyebrow aside" "art body aside";
  gap:clamp(22px,3.5vw,52px);align-items:start}
.featured .eyebrow{grid-area:eyebrow;margin-bottom:6px}
.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:clamp(6px,1.4vw,22px)}
.featured__artist{font-family:var(--display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:.22em;font-size:clamp(1.15rem,2.5vw,1.75rem);
  color:var(--ivory)}
.featured__artist a{transition:color .3s ease}
.featured__artist a:hover{color:var(--gold-bright)}
.featured__title{font-size:clamp(12px,1.35vw,15px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-dim);font-weight:400;margin-top:10px}
.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:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-faint);line-height:2.3;
  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" "aside";justify-items:start}
  .featured__art{max-width:320px}
  .featured__aside{text-align:left;justify-self:start;margin-top:8px}
}

/* ---- listen ------------------------------------------------------------ */
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);margin-top:26px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:186px;
  padding:14px 30px;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}
.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) * .55);
  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/11;min-height:250px}
.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,1.05fr);
  gap:clamp(28px,5vw,74px);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:3/2;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 -------------------------------------------------- */
[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)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [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}

/* Rocky Bay Productions skin.
   Only what makes this site this site. The layout is in base.css and is shared with Key Pen. */

/* The artist page borrows its artist's tokens for its own header band, which is how two artists
   avoid inheriting one identical treatment. Rocky Bay supplies the frame around it. */
.artist-hero{position:relative;min-height:min(74svh,640px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;background:var(--ground-raised)}
.artist-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.artist-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,4,8,.82) 0%,rgba(0,4,8,.20) 34%,rgba(0,4,8,.62) 74%,var(--ink) 100%),
             linear-gradient(90deg,rgba(0,4,8,.76) 0%,rgba(0,4,8,.12) 62%,transparent 100%)}
.artist-hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 44% at 24% 82%,var(--panel-glow,transparent),transparent 74%)}
.artist-hero__in{position:relative;padding-block:clamp(44px,8vh,86px);width:100%}
.artist-hero__genre{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--panel-accent,var(--gold-bright));margin-bottom:16px}
.artist-hero__name{font-family:var(--display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:.10em;line-height:.98;color:var(--ivory);
  font-size:clamp(2.6rem,9vw,6rem)}
.artist-hero__sub{margin-top:18px;font-size:clamp(14px,1.5vw,16.5px);color:var(--ivory-dim);
  max-width:50ch;line-height:1.72}
.artist-hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(22px,3.6vh,34px)}

/* The link out to the artist's own domain. It is a deliberate exit, so it reads as one. */
.official{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:999px;
  border:1px solid var(--panel-accent,var(--gold));color:var(--panel-accent,var(--gold-bright));
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease}
.official:hover{background:var(--panel-accent,var(--gold));color:var(--ink)}
.official svg{transition:transform .35s ease}
.official:hover svg{transform:translateX(3px)}

.artist-body{padding-block:var(--section-gap)}
.artist-body__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,6vw,88px);align-items:start}
@media (max-width:900px){.artist-body__grid{grid-template-columns:1fr}}

/* Contact */
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(24px,4vw,56px);margin-top:clamp(34px,5vh,58px)}
.contact__card h2{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-bright);font-weight:500;margin-bottom:14px}
.contact__card p{font-size:14px;line-height:1.85;color:var(--ivory-dim)}
.contact__card a{color:var(--ivory);border-bottom:1px solid var(--gold-faint);
  transition:border-color .3s ease}
.contact__card a:hover{border-color:var(--gold)}