/* 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)}
}

/* ---- 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}}

/* 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: a cutout, not a wash ---------------------------------------- */
/* The approved concept does NOT put the statement over the picture. The figures occupy the right
   two thirds and the type sits on flat black beside them. That separation is most of why it reads
   as a record sleeve rather than a hero banner, so the image is an element with a fade on its
   left edge, not a background with a scrim over everything. */
.kp-hero{position:relative;isolation:isolate;display:grid;align-items:center;
  min-height:min(74svh,640px);background:var(--ink);overflow:hidden}
.kp-hero__art{position:absolute;inset:0 0 0 auto;width:min(78%,1180px);z-index:-2}
.kp-hero__art img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.kp-hero__fade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 22%,rgba(0,0,0,.72) 38%,
             rgba(0,0,0,.18) 56%,transparent 74%),
             linear-gradient(180deg,var(--ink) 0%,rgba(0,0,0,.80) 9%,rgba(0,0,0,.18) 26%,
             transparent 40%,transparent 70%,var(--ink) 100%)}
.kp-hero__in{position:relative;width:100%;padding-block:clamp(78px,12vh,124px) clamp(30px,5vh,52px)}
.kp-hero__eyebrow{font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:clamp(12px,2vh,18px)}
.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(2.7rem,9.5vw,6.2rem)}
.kp-hero__sub{margin-top:clamp(12px,1.8vh,18px);font-size:clamp(11px,1.25vw,13px);
  letter-spacing:.30em;text-transform:uppercase;color:var(--ivory-dim)}
.kp-hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(22px,3.6vh,36px)}
/* The handwritten line, lower right, exactly where the concept puts it. Decoration: it is
   aria-hidden and it disappears rather than reflowing when there is no room for it. */
.kp-hero__script{position:absolute;right:clamp(24px,5vw,72px);bottom:clamp(22px,5vh,52px);
  margin:0;max-width:15ch;text-align:right;color:var(--ivory-dim);opacity:.72;
  font-family:var(--display);font-style:italic;font-size:clamp(15px,1.7vw,21px);line-height:1.5;
  transform:rotate(-6deg);transform-origin:100% 100%;pointer-events:none}
@media (max-width:1100px){.kp-hero__script{display:none}}
@media (max-width:860px){
  .kp-hero{align-items:end;min-height:min(80svh,680px)}
  .kp-hero__art{inset:0;width:100%}
  .kp-hero__fade{background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.12) 26%,
                 rgba(0,0,0,.72) 66%,var(--ink) 100%)}
}

.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(44px,7vh,84px) clamp(48px,8vh,92px);background:var(--ink)}
.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:0 clamp(48px,8vh,92px);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(44px,8vh,92px);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)}

/* ---- the crown --------------------------------------------------------- */
.crown{display:block;fill:none}
.kp-mark{display:grid;justify-items:center;gap:5px}
.kp-mark__crown{width:22px;height:auto;color:var(--gold-bright);opacity:.9}
.kp-quote__div{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(20px,3.6vh,32px)}
.kp-quote__div i{display:block;width:clamp(26px,5vw,52px);height:1px;background:var(--panel-accent);
  opacity:.75}
.kp-quote__crown{width:26px;height:auto;color:var(--panel-accent)}