/* 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:#000000;--ground:#050505;--ground-deep:#0a0908;--ground-band:#0d0b0a;--ground-raised:#111010;--surface:#171413;--hairline:rgba(236, 228, 220, 0.11);--hairline-strong:rgba(236, 228, 220, 0.24);--ivory:#ece4dc;--ivory-dim:rgba(236, 228, 220, 0.70);--ivory-faint:rgba(236, 228, 220, 0.55);--gold:#c2a05c;--gold-bright:#d9bd82;--gold-faint:rgba(194, 160, 92, 0.28);--panel-accent:#d8635a;--panel-accent-fill:#b5514a;--panel-tint:rgba(181, 81, 74, 0.12);--panel-glow:rgba(194, 160, 92, 0.20);--glow:rgba(194, 160, 92, 0.20);--display:Jost, "Helvetica Neue", Arial, sans-serif;--sans:Jost, "Helvetica Neue", Arial, sans-serif;--display-weight:400;--display-track:0.14em;--eyebrow-track:0.30em;--nav-track:0.18em;--drift:24s;--sheen:38s;--amp:6px;--maxw:1180px;--gutter:clamp(22px, 5vw, 56px);--section-gap:clamp(76px, 11vh, 140px)}
/* 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}

/* Key Pen skin, keypenmusic.com.
   Darker, smokier and more intimate than Rocky Bay. The layout rules are base.css, shared with the
   label; everything here is what makes this site read as Key Pen and not as a Rocky Bay page.

   The single biggest separator is the display face: Rocky Bay sets its headings in a high contrast
   serif, Key Pen sets them in wide letterspaced sans. That is why tokens carry display and sans as
   separate keys. The second is the red, which is taken off the real cover art and is a FILL, never
   type: it computes 4.15:1 on this ground, under the 4.5 normal text needs. */

/* ---- header ------------------------------------------------------------ */
.kp-hdr .hdr__in{gap:clamp(14px,2.6vw,36px)}
.kp-mark{flex:none;display:block;padding-block:2px}
.kp-mark img{width:clamp(132px,15vw,190px);height:auto}
.kp-hdr .nav{margin-inline-start:auto}
.kp-listen{flex:none;display:inline-flex;align-items:center;padding:9px 22px;border-radius:999px;
  border:1px solid var(--panel-accent);color:var(--panel-accent);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;transition:background .35s ease,color .35s ease}
.kp-listen:hover{background:var(--panel-accent);color:#fff}
@media (max-width:900px){.kp-listen{display:none}}

/* ---- hero -------------------------------------------------------------- */
.kp-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  isolation:isolate;background:var(--ink)}
.kp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 42%;z-index:-2}
.kp-hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.20) 28%,rgba(0,0,0,.66) 72%,var(--ink) 100%),
             linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.10) 100%)}
/* The artwork is smoke, so the motion is smoke: one very slow, very low amplitude drift of a warm
   haze across the lower third. Nothing loops visibly and nothing moves under reduced motion. */
.kp-hero__smoke{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(48% 34% at 40% 82%,var(--panel-glow),transparent 74%);
  animation:kpsmoke var(--drift) ease-in-out infinite alternate}
@keyframes kpsmoke{
  from{transform:translate3d(calc(var(--amp) * -1),var(--amp),0);opacity:.55}
  to{transform:translate3d(var(--amp),calc(var(--amp) * -1),0);opacity:.95}}
@media (prefers-reduced-motion:reduce){.kp-hero__smoke{animation:none}}
.kp-hero__in{position:relative;padding-block:0 clamp(64px,12vh,124px);width:100%}
.kp-hero__eyebrow{font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:clamp(14px,2.4vh,22px)}
.kp-hero__h{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:var(--display-track);line-height:.94;color:var(--ivory);
  font-size:clamp(3rem,13vw,8.5rem);text-shadow:0 2px 60px rgba(0,0,0,.75)}
.kp-hero__sub{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(11px,1.3vw,13.5px);
  letter-spacing:.30em;text-transform:uppercase;color:var(--ivory-dim)}
.kp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4.4vh,44px)}

.kp-btn{display:inline-flex;align-items:center;justify-content:center;min-width:164px;
  padding:14px 30px;border-radius:999px;border:1px solid var(--hairline-strong);
  color:var(--ivory);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:border-color .35s ease,background .35s ease,color .35s ease}
.kp-btn:hover{border-color:var(--ivory);background:rgba(255,255,255,.06)}
.kp-btn--fill{background:var(--panel-accent-fill,var(--panel-accent));border-color:transparent;
  color:#fff}
.kp-btn--fill:hover{background:var(--panel-accent);border-color:transparent;color:#fff}

/* ---- latest release ---------------------------------------------------- */
.kp-latest{padding-block:clamp(56px,9vh,104px);background:var(--ground-band)}
.kp-latest__grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(26px,4.6vw,64px);align-items:center}
.kp-latest__art{display:block;overflow:hidden;border:1px solid var(--hairline);
  background:var(--ground-raised);box-shadow:0 30px 80px -34px #000}
.kp-latest__art img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.kp-latest__art:hover img{transform:scale(1.035)}
.kp-latest__title{font-family:var(--display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:.10em;line-height:1.08;color:var(--ivory);
  font-size:clamp(1.5rem,3.6vw,2.5rem);margin-top:14px}
.kp-latest__title a:hover{color:var(--panel-accent)}
.kp-latest__line{margin-top:18px;font-family:var(--display);font-style:italic;
  font-size:clamp(15px,1.9vw,19px);color:var(--ivory-dim);max-width:40ch;line-height:1.7}
.kp-latest .tl{max-width:520px}
.kp-latest .listen{margin-top:28px}
@media (max-width:880px){
  .kp-latest__grid{grid-template-columns:1fr}
  .kp-latest__art{max-width:300px}
}

/* ---- the two tiles ----------------------------------------------------- */
.kp-tiles{padding-block:clamp(10px,2vh,24px) clamp(56px,9vh,104px);background:var(--ink)}
.kp-tiles__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(14px,1.8vw,24px)}
.kp-tile{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:16/9;
  border:1px solid var(--hairline);background:var(--ground-raised)}
.kp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.kp-tile:hover img{transform:scale(1.05)}
/* The tile images are made dark on purpose, so the scrim only has to seat the type, not rescue it. */
.kp-tile__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.26) 40%,rgba(0,0,0,.62) 100%)}
.kp-tile__text{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:10px;text-align:center;padding:20px}
.kp-tile__h{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:.22em;font-size:clamp(1.2rem,2.8vw,1.8rem);color:var(--ivory)}
.kp-tile__n{font-size:10.5px;letter-spacing:.2em;color:var(--ivory-dim)}
.kp-tile:hover .kp-tile__n{color:var(--panel-accent)}

/* ---- pull quote -------------------------------------------------------- */
.kp-quote{padding-block:clamp(56px,10vh,120px);text-align:center;background:var(--ink)}
.kp-quote__t{font-family:var(--display);font-weight:var(--display-weight);text-transform:uppercase;
  letter-spacing:.20em;line-height:1.55;color:var(--ivory-dim);
  font-size:clamp(.95rem,2.2vw,1.35rem);max-width:26ch;margin-inline:auto}
.kp-quote__rule{display:block;width:54px;height:1px;margin:clamp(22px,4vh,36px) auto 0;
  background:var(--panel-accent);opacity:.8}

/* ---- footer ------------------------------------------------------------ */
.kp-ftr{background:var(--ground)}
.kp-ftr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(28px,4.4vw,60px);align-items:start}
.kp-ftr__h{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-bright);
  font-weight:500;margin-bottom:16px}
.kp-follow{display:flex;flex-wrap:wrap;gap:11px}
.kp-follow a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--ground-raised);border:1px solid var(--hairline);color:var(--ivory-dim);
  transition:color .3s ease,border-color .3s ease,transform .3s ease}
.kp-follow a:hover{color:var(--panel-accent);border-color:var(--panel-accent);transform:translateY(-2px)}
.kp-follow__none{font-size:12.5px;color:var(--ivory-faint);max-width:30ch;line-height:1.7}
.kp-ftr__list{display:grid;gap:9px}
.kp-ftr__list a{font-size:12.5px;color:var(--ivory-dim);transition:color .3s ease}
.kp-ftr__list a:hover{color:var(--ivory)}

/* The one place Rocky Bay is named. It is a quiet exit, not a badge: the label's own mark, the
   line, and a link out. Never in the header, the hero, a title or a canonical. */
.kp-ftr__label a{display:grid;justify-items:start;gap:10px;padding-top:2px}
.kp-ftr__mark{width:74px;height:auto;opacity:.85;transition:opacity .3s ease}
.kp-ftr__label a:hover .kp-ftr__mark{opacity:1}
.kp-ftr__labelline{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-faint)}
.kp-ftr__learn{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--panel-accent)}
/* Rocky Bay's base line is PLACE, rule, wordmark. Key Pen's has no wordmark after it, so the
   rule would trail off into nothing. */
.kp-ftr .ftr__place{font-family:var(--display);letter-spacing:.3em;padding-inline-end:0}
.kp-ftr .ftr__place::after{display:none}

.kp-about__label{margin-top:clamp(28px,4.4vh,44px);font-size:13.5px;color:var(--ivory-faint);
  line-height:1.8}
.kp-about__label a{color:var(--panel-accent);border-bottom:1px solid transparent;
  transition:border-color .3s ease}
.kp-about__label a:hover{border-bottom-color:currentColor}

/* Shared blocks that need Key Pen values rather than the label's */
.release-hero__artist{color:var(--panel-accent)}
.rcard:hover .rcard__title{color:var(--panel-accent)}
.sechead__more:hover,.crumbs a:hover{color:var(--panel-accent)}
.pill{border-color:var(--panel-accent);color:var(--panel-accent)}
.pill:hover{background:var(--panel-accent);color:#fff}
.svc:hover{color:var(--panel-accent);border-color:var(--panel-accent)}
.stack__h{color:var(--gold-bright)}