/* =====================================================================
   RIVERKINGZ - site stylesheet
   Heavy rock grit + latin house heat.
   Palette roles: ember = ACTION (all primary CTAs)
                  neon / gold = DETAIL only, never an action
   ===================================================================== */

:root{
  --ink:#0B0B0C;
  --ink-2:#111214;
  --ink-3:#17191C;
  --river:#1B282C;
  --river-2:#233338;
  --ember:#FF5B5C;      /* exact brand coral, sampled from RK_Album 1 */
  --ember-2:#FF7C7C;
  --stone:#E8E2D3;      /* parchment from the brand lore sheet */
  --tan:#B9A88C;        /* riverbank warm, from the river photography */
  --bone:#F4F1EA;
  --bone-2:#E4DFD4;
  --mute:#8E9298;
  --line:rgba(255,255,255,.10);

  --font-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1280px;
  --nav-h:76px;
  --ticker-h:38px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.012em;line-height:.92;
  font-synthesis:none}
p{margin:0 0 18px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* film grain over everything -------------------------------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- type kit */
.eyebrow{
  font-family:var(--font-mono);font-size:14px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ember);
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--ember);flex:none}
.eyebrow.stone{color:var(--stone)}.eyebrow.stone::before{background:var(--stone)}
.eyebrow.tan{color:var(--tan)}.eyebrow.tan::before{background:var(--tan)}

.h-xxl{font-size:clamp(52px,9vw,132px)}
.h-xl{font-size:clamp(40px,6.2vw,88px)}
.h-lg{font-size:clamp(32px,4.4vw,60px)}
.h-md{font-size:clamp(24px,2.6vw,34px)}
.h-sm{font-size:22px}
.lede{font-size:19px;color:#C9CDD3;max-width:62ch}
.muted{color:var(--mute)}
.mono{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;font-size:14px}

/* placeholder flag ------------------------------------------------- */
.ph{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#FFD9CE;background:rgba(255,61,20,.14);border:1px dashed rgba(255,61,20,.5);
  padding:5px 10px;border-radius:4px;
}
.ph::before{content:"";width:6px;height:6px;background:var(--ember);border-radius:50%}
.ph-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-top:10px}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;line-height:1;
  padding:19px 30px 15px;border:2px solid transparent;border-radius:2px;
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
  font-weight:400;font-synthesis:none;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-ember{background:var(--ember);color:#fff;box-shadow:0 12px 30px rgba(255,61,20,.32)}
.btn-ember:hover{transform:translateY(-3px);background:var(--ember-2);box-shadow:0 18px 40px rgba(255,61,20,.44)}
.btn-ghost{background:transparent;color:var(--bone);
  border-color:var(--ghost-line,rgba(255,255,255,.34))}
.btn-ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);transform:translateY(-3px)}
.btn-dark{background:var(--ink);color:var(--bone)}
.btn-dark:hover{background:var(--ember);color:#fff;transform:translateY(-3px)}
.btn-sm{font-size:16px;padding:14px 20px 11px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  border-bottom:2px solid var(--ember);padding-bottom:6px;transition:gap .2s ease,color .2s ease}
.link-arrow:hover{gap:18px;color:var(--ember)}

/* ------------------------------------------------------------- ticker */
.ticker{
  position:relative;z-index:60;height:var(--ticker-h);background:var(--ember);
  color:#fff;display:flex;align-items:center;overflow:hidden;
}
.ticker-track{display:flex;gap:0;white-space:nowrap;will-change:transform;
  animation:tick 34s linear infinite}
.ticker-track span{
  font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.ticker-track span::after{content:"◆";font-size:9px;opacity:.75}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(8,9,11,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease;
}
.site-head.stuck{background:rgba(8,9,11,.96);border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:26px;width:100%}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand svg{width:30px;height:30px;flex:none;color:var(--ember)}
.brand img{height:40px;width:auto;display:block}
/* the wordmark is wide, so it steps down before it can reach the nav links */
@media (max-width:1120px){ .brand img{height:32px} }
.foot-brand img{height:78px;width:auto;margin-bottom:18px}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-family:var(--font-mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:#CFD4DA;position:relative;padding:6px 0;transition:color .18s ease}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--ember);transition:right .22s ease}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.head-cta{margin-left:8px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;
  flex-direction:column;gap:5px;align-items:flex-end}
.burger span{display:block;height:2px;background:var(--bone);transition:.22s ease}
.burger span:nth-child(1){width:22px}.burger span:nth-child(2){width:16px}.burger span:nth-child(3){width:22px}

/* ------------------------------------------------- RK monogram usage */
/* In-flow mark. Inherits colour, so set `color` on the parent. */
.rk{width:26px;height:auto;flex:none;display:block}
.brand .rk{color:var(--ember);width:24px}
.foot-brand .rk{color:var(--ember);width:40px;margin-bottom:14px}
.mm-top .rk{color:var(--ember);width:24px}

/* Quiet watermark behind a section. Add .sec-mark to any .sec. */
.sec-mark{position:relative;overflow:hidden}
.sec-mark::before{
  content:"";position:absolute;right:-5%;top:50%;transform:translateY(-50%);
  width:min(560px,54vw);aspect-ratio:769/553;
  background:url('assets/rk-watermark.svg') center/contain no-repeat;
  opacity:.05;pointer-events:none;z-index:0}
.sec-mark.mark-left::before{right:auto;left:-6%}
.sec-mark.mark-center::before{right:auto;left:50%;transform:translate(-50%,-50%);
  width:min(760px,88vw);opacity:.04}
.sec-mark > .wrap{position:relative;z-index:1}
.sec-bone.sec-mark::before{background-image:url('assets/rk-mark-ink.svg');opacity:.055}

/* Divider: hairline, mark, hairline. */
.rk-rule{display:flex;align-items:center;gap:22px;margin:0;padding:8px 0}
.rk-rule::before,.rk-rule::after{content:"";height:1px;flex:1;background:var(--line)}
.rk-rule .rk{width:32px;color:var(--ember);opacity:.95}
.sec-bone .rk-rule::before,.sec-bone .rk-rule::after{background:rgba(0,0,0,.14)}

/* Hero gets the mark as a large ghost behind the wordmark. */
.hero-in::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);
  width:min(680px,78vw);aspect-ratio:769/553;
  background:url('assets/rk-watermark.svg') center/contain no-repeat;
  opacity:.06;pointer-events:none;z-index:-1}

/* 404 leads with the monogram. */
.rk-big{width:min(220px,44vw);color:var(--ember);margin:0 auto 26px}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:95;background:var(--ink);
  display:flex;flex-direction:column;padding:24px 28px 40px;
  transform:translateY(-100%);transition:transform .34s cubic-bezier(.6,0,.2,1);overflow-y:auto}
.mobile-menu.open{transform:translateY(0)}
.mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.mm-close{background:none;border:0;color:var(--bone);font-size:30px;line-height:1;cursor:pointer;padding:6px}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font-family:var(--font-display);font-size:38px;text-transform:uppercase;
  padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.mobile-menu nav a span{font-family:var(--font-mono);font-size:14px;color:var(--ember)}
.mm-foot{margin-top:auto;padding-top:30px}

/* --------------------------------------------------------------- hero */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;
  overflow:hidden;padding:120px 0 64px;margin-top:calc(var(--nav-h) * -1)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.62;
  animation:slowzoom 26s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.32) 38%,rgba(8,9,11,.94) 100%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1{margin:0;line-height:0}
.hero h1 img{width:min(880px,100%);height:auto;filter:drop-shadow(0 24px 60px rgba(0,0,0,.65))}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0 30px}
.hero-tag{font-family:var(--font-mono);font-size:14px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--stone)}
.scroll-cue{position:absolute;left:auto;right:34px;bottom:22px;z-index:3;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue::after{content:"";width:1px;height:36px;background:linear-gradient(var(--ember),transparent);
  animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* page hero (interior) */
.page-hero{position:relative;overflow:hidden;padding:150px 0 84px;margin-top:calc(var(--nav-h) * -1)}
.page-hero .hero-bg img{opacity:.42}
.page-hero .hero-bg::after{background:linear-gradient(180deg,rgba(8,9,11,.9) 0%,rgba(8,9,11,.55) 50%,rgba(8,9,11,.98) 100%)}
.page-hero-in{position:relative;z-index:2}
.crumb{font-family:var(--font-mono);font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);margin-bottom:18px}
.crumb a:hover{color:var(--ember)}

/* ----------------------------------------------------------- sections */
.sec{padding:104px 0;position:relative}
.sec-tight{padding:72px 0}
.sec-ink{background:var(--ink)}
.sec-ink2{background:var(--ink-2)}
.sec-river{background:linear-gradient(180deg,var(--river) 0%,#10181B 100%)}
.sec-bone{background:var(--bone);color:var(--ink)}
.sec-bone h1,.sec-bone h2,.sec-bone h3{color:var(--ink)}
.sec-bone .lede{color:#3D444C}
.sec-bone .eyebrow{color:#C42E08}
.sec-bone .eyebrow::before{background:#C42E08}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  flex-wrap:wrap;margin-bottom:46px}
.sec-head p{margin:14px 0 0}

/* giant scrolling word strip */
.word-strip{background:var(--ember);padding:16px 0;overflow:hidden;transform:rotate(-1.4deg) scale(1.06);
  margin:-26px 0;position:relative;z-index:5}
.word-strip.alt{background:var(--bone);transform:rotate(1.1deg) scale(1.05)}
.word-strip .ws-track{display:flex;white-space:nowrap;animation:tick 30s linear infinite}
.word-strip .ws-track span{font-family:var(--font-display);font-size:38px;text-transform:uppercase;
  letter-spacing:.02em;padding:0 22px;color:#fff;line-height:1.2}
.word-strip.alt .ws-track span{color:var(--ink)}

/* ------------------------------------------------------ featured drop */
.drop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.drop-art{position:relative}
.drop-art img{border-radius:3px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.drop-art::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,61,20,.42),transparent 72%);filter:blur(24px)}
.tracklist{list-style:none;margin:26px 0;padding:0;border-top:1px solid var(--line)}
.tracklist li{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:16px}
.tracklist li b{font-family:var(--font-mono);font-size:14px;color:var(--mute);width:26px;flex:none}
.tracklist li span{margin-left:auto;font-family:var(--font-mono);font-size:14px;color:var(--mute)}

/* streaming platform chips */
.dsp{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.dsp a{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:2px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-family:var(--font-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  transition:.18s ease}
.dsp a:hover{border-color:var(--ember);background:rgba(255,61,20,.12);transform:translateY(-2px)}
.dsp a svg{width:16px;height:16px;flex:none;fill:currentColor}
.sec-bone .dsp a{border-color:rgba(0,0,0,.16);background:rgba(0,0,0,.03);color:var(--ink)}
.sec-bone .dsp a:hover{border-color:var(--ember);background:rgba(255,61,20,.1)}

/* ---------------------------------------------------------- tour rows */
.tour-list{border-top:1px solid var(--line)}
.tour-row{
  display:grid;grid-template-columns:150px minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:26px;align-items:center;padding:24px 18px;border-bottom:1px solid var(--line);
  position:relative;transition:background .2s ease,padding .2s ease}
.tour-row:hover{background:rgba(255,61,20,.08);padding-left:26px}
.tour-date{font-family:var(--font-display);font-size:26px;line-height:1}
.tour-date small{display:block;font-family:var(--font-mono);font-size:14px;letter-spacing:.18em;
  color:var(--ember);margin-top:6px}
.tour-city{font-family:var(--font-display);font-size:24px}
.tour-venue{font-size:15px;color:var(--mute)}
.tour-support{font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;color:var(--tan);
  text-transform:uppercase}
.tour-actions{display:flex;gap:10px;justify-content:flex-end}
/* was an inline style, which no ground could override */
.tour-few{border-color:rgba(255,197,49,.5);color:#FFC531}
.tour-soldout{font-family:var(--font-mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--line);padding:13px 18px}

/* -------------------------------------------------------------- cards */
.grid{display:grid;gap:26px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{background:var(--ink-3);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(255,61,20,.5);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.card-body{padding:20px 22px 24px}
.card h3{font-size:22px;margin-bottom:8px}
.card .meta{font-family:var(--font-mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute)}

/* video tiles */
.vid{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--ink-3)}
.vid img{transition:transform .5s ease;aspect-ratio:16/9;object-fit:cover;width:100%}
.vid:hover img{transform:scale(1.06)}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,transparent 40%,rgba(8,9,11,.8))}
.vid .play svg{width:58px;height:58px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));transition:transform .25s ease}
.vid:hover .play svg{transform:scale(1.12)}
.vid .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.vid .cap h3{font-size:20px}
.vid-feature img{aspect-ratio:16/9}
.embed{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink-3);
  border:1px dashed rgba(255,255,255,.22);border-radius:3px;display:grid;place-items:center;text-align:center;padding:24px}

/* merch tiles */
.prod{display:block;background:#fff;border-radius:3px;overflow:hidden;color:var(--ink);
  border:1px solid rgba(0,0,0,.08);transition:transform .22s ease,box-shadow .22s ease}
.prod:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(0,0,0,.22)}
.prod img{aspect-ratio:4/5;object-fit:cover;width:100%}
.prod .pinfo{padding:16px 18px 20px}
.prod h3{font-size:19px;margin-bottom:6px}
.prod .price{font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;color:#6A7078}

/* member cards */
.member{text-align:center}
.member .ring{width:150px;height:150px;margin:0 auto 18px;border-radius:50%;
  border:3px solid var(--ember);display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,var(--river-2),var(--ink));position:relative}
.member .ring span{font-family:var(--font-display);font-size:46px;color:var(--bone)}
.member h3{font-size:22px}
.member .role{font-family:var(--font-mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);margin-top:6px}

/* brand marks (the client's own symbol system) */
.marks{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:22px 14px;align-items:start}
.marks figure{margin:0;text-align:center}
.marks img{width:100%;height:auto;max-width:78px;margin:0 auto 12px;opacity:.9;transition:opacity .2s ease,transform .2s ease}
.marks figure:hover img{opacity:1;transform:translateY(-4px)}
.marks figcaption{font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);line-height:1.35}
.mark-watermark{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:340px;opacity:.05;pointer-events:none}

/* quote */
.quote{border-left:3px solid var(--ember);padding:8px 0 8px 24px;margin:0}
.quote p{font-family:var(--font-display);font-size:26px;line-height:1.24;text-transform:uppercase;margin-bottom:12px}
.quote cite{font-family:var(--font-mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-style:normal}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.stat b{display:block;font-family:var(--font-display);font-size:46px;line-height:1;
  background:linear-gradient(180deg,var(--bone),var(--mute));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-family:var(--font-mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{font-family:var(--font-mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:none;
  color:var(--mute);transition:.18s ease}
.chip:hover{color:var(--bone);border-color:rgba(255,255,255,.4)}
.chip.on{background:var(--ember);border-color:var(--ember);color:#fff}
.sec-bone .chip{border-color:rgba(0,0,0,.18);color:#5E656D}
.sec-bone .chip.on{background:var(--ember);color:#fff;border-color:var(--ember)}

/* ----------------------------------------------------------- cta band */
.cta{position:relative;overflow:hidden;padding:108px 0;text-align:center}
.cta .hero-bg img{opacity:.34}
.cta .hero-bg::after{background:linear-gradient(180deg,rgba(8,9,11,.88),rgba(8,9,11,.94))}
.cta-in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.cta h2{font-size:clamp(38px,6vw,80px);margin-bottom:18px}

/* ------------------------------------------------------------- forms */
.form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-family:var(--font-mono);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);font-family:var(--font-body);font-size:16px;padding:15px 16px;
  transition:border-color .18s ease,background .18s ease}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ember);background:rgba(255,61,20,.06)}
.field input::placeholder,.field textarea::placeholder{color:#5C636C}
.form-note{font-size:14px;color:var(--mute)}

.inline-signup{display:flex;gap:12px;flex-wrap:wrap;max-width:560px;margin:0 auto}
.inline-signup input{flex:1 1 240px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  border-radius:2px;color:var(--bone);padding:18px 18px;font-size:16px;font-family:var(--font-body)}
.inline-signup input:focus{outline:none;border-color:var(--ember)}

/* ------------------------------------------------------------- footer */
.site-foot{background:#050607;border-top:1px solid var(--line);padding:78px 0 34px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:52px;
  border-bottom:1px solid var(--line)}

.foot-col h4{font-family:var(--font-mono);font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);margin-bottom:16px;font-weight:500}
.foot-col a{display:block;padding:6px 0;font-size:16px;color:#C3C8CE;transition:color .16s ease}
.foot-col a:hover{color:var(--ember)}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.socials a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;transition:.18s ease}
.socials a svg{width:18px;height:18px;fill:currentColor}
.socials a:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:translateY(-3px)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding-top:26px;font-size:12px;color:#7C838C;letter-spacing:.04em}
.foot-bottom a:hover{color:var(--ember)}

/* ------------------------------------------------------------ reveals */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  .nav,.head-cta{display:none}
  .burger{display:flex}
  .drop{grid-template-columns:1fr;gap:38px}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:860px){
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .tour-row{grid-template-columns:110px 1fr;gap:14px 18px;padding:20px 12px}
  .tour-row .tour-venue-cell{grid-column:1/-1}
  .tour-actions{grid-column:1/-1;justify-content:flex-start}
  .sec{padding:76px 0}
  .word-strip .ws-track span{font-size:28px}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .btn{font-size:18px;padding:17px 22px 14px}
  .btn-row .btn{width:100%}
  .hero{min-height:auto;padding:130px 0 70px}
  .mobile-menu nav a{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   MOBILE 390 PASS
   Target device width 390px. Page padding 18px, so content + standalone
   buttons land on 354 (LMH standalone-button width). Text floor is 14px;
   12px is allowed on fine print only (footer legal, build annotations).
   Placed last in the file so these overrides beat the base rules.
   ===================================================================== */
@media (max-width:430px){
  .wrap{padding:0 18px}
  body{font-size:16px}

  /* chrome: nav stays pinned to the top of the viewport while the page scrolls */
  :root{--nav-h:64px;--ticker-h:34px}
  .site-head{background:rgba(11,11,12,.72)}
  .site-head.stuck{background:rgba(11,11,12,.97);
    box-shadow:0 10px 26px rgba(0,0,0,.5)}
  .ticker-track span{font-size:14px;letter-spacing:.16em;padding:0 18px}
  .brand svg{width:30px;height:30px}
  .brand .wordmark{font-size:23px}
  .burger{padding:8px 0}
  .mobile-menu{padding:20px 18px 34px}
  .mobile-menu nav a{font-size:32px;padding:12px 0}
  .mobile-menu nav a span{font-size:14px}
  .mm-foot .btn{width:354px;max-width:100%}

  /* hero */
  .hero{min-height:auto;padding:112px 0 62px}
  .hero h1{font-size:66px;line-height:.86}
  .hero h1 em{-webkit-text-stroke-width:1.6px}
  .hero-sub{gap:10px;margin:20px 0 24px}
  .hero-tag{font-size:14px;letter-spacing:.2em}
  .scroll-cue{display:none}
  .page-hero{padding:112px 0 56px}
  .page-hero .lede{font-size:16px}
  .crumb{font-size:14px}

  /* type */
  .h-xxl{font-size:56px}
  .h-xl{font-size:46px}
  .h-lg{font-size:36px}
  .h-md{font-size:26px}
  .lede{font-size:16px}
  .eyebrow{font-size:14px;letter-spacing:.24em;margin-bottom:14px}
  .eyebrow::before{width:24px}
  .mono,.meta,.card .meta,.tour-support,.chip,.prod .price,.member .role,
  .quote cite,.field label,.form-note,.dsp a{font-size:14px}
  .sec{padding:60px 0}
  .sec-tight{padding:48px 0}
  .sec-head{margin-bottom:28px;gap:18px}

  /* buttons: standalone buttons are 354 wide */
  .btn{font-size:18px;padding:17px 20px 14px}
  .btn-row{flex-direction:column;gap:12px}
  .btn-row .btn{width:354px;max-width:100%}
  .sec-head .btn,.mm-foot .btn{width:354px;max-width:100%}
  .btn-sm{font-size:16px;padding:14px 18px 11px}
  .tour-actions .btn,.card .btn,.dsp a{width:auto}

  /* word strips */
  .word-strip{padding:12px 0;transform:rotate(-1.6deg) scale(1.08)}
  .word-strip .ws-track span{font-size:26px;padding:0 14px}

  /* featured drop */
  .drop{gap:30px}
  .tracklist li{font-size:16px;padding:11px 0}
  .tracklist li span{font-size:14px}
  .dsp{gap:8px}
  .dsp a{padding:11px 13px;letter-spacing:.1em}

  /* tour rows stack into a card-like block */
  .tour-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .tour-row:hover{padding-left:0;background:rgba(255,61,20,.06)}
  .tour-date{font-size:22px;display:flex;align-items:baseline;gap:10px}
  .tour-date small{display:inline;margin-top:0}
  .tour-city{font-size:24px}
  .tour-venue{font-size:15px}
  .tour-actions{justify-content:flex-start;gap:10px;flex-wrap:wrap}
  .tour-actions .btn{flex:1 1 160px}
  .tour-soldout{font-size:14px;padding:12px 16px;flex:1 1 160px;text-align:center}
  .chips{gap:8px;margin-bottom:24px;overflow-x:auto;flex-wrap:nowrap;
    padding-bottom:6px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;padding:10px 15px}

  /* peek carousels for card rows (house pattern) */
  .grid.mscroll{
    display:grid;grid-auto-flow:column;grid-auto-columns:78%;
    grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -18px;padding:2px 18px 14px;scrollbar-width:none}
  .grid.mscroll::-webkit-scrollbar{display:none}
  .grid.mscroll > *{scroll-snap-align:start}
  .grid.mscroll .card:hover,.grid.mscroll .prod:hover{transform:none}

  /* merch grid stays 2-up so products read as a shop */
  #merch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #merch-grid .pinfo{padding:12px 12px 16px}
  #merch-grid h3{font-size:17px}

  /* cards + members + stats */
  .card-body{padding:18px}
  .card h3{font-size:20px}
  .vid .cap h3{font-size:18px}
  .member .ring{width:118px;height:118px}
  .member .ring span{font-size:38px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:26px 0}
  .stat b{font-size:38px}
  .quote p{font-size:21px}

  /* forms: one field per line, 16px inputs kill iOS focus zoom */
  .form-row{grid-template-columns:1fr;gap:14px}
  .field input,.field select,.field textarea{font-size:16px;padding:14px 14px}
  .inline-signup{flex-direction:column}
  .inline-signup input{flex:none;width:100%;font-size:16px}
  .inline-signup .btn{width:354px;max-width:100%}
  .cta{padding:66px 0}
  .cta h2{font-size:42px}

  .sec-mark::before{width:78vw;opacity:.04;right:-18%}
  .sec-mark.mark-left::before{left:-18%}
  .hero-in::before{width:96vw;opacity:.05}
  .rk-rule{gap:14px}
  .rk-rule .rk{width:26px}
  .foot-brand .rk{width:34px}

  .marks{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
  .marks img{max-width:60px}
  .mark-watermark{display:none}
  .brand img{height:32px}
  .foot-brand img{height:58px}
  .hero h1 img{width:100%}

  /* footer */
  .site-foot{padding:56px 0 26px}
  .foot-top{grid-template-columns:1fr;gap:30px;padding-bottom:34px}
  .foot-brand .wordmark{font-size:32px}
  .foot-col h4{font-size:14px;margin-bottom:10px}
  .foot-col a{font-size:16px;padding:7px 0}
  .socials a{width:44px;height:44px}
  .foot-bottom{gap:10px;font-size:12px}
}

/* =====================================================================
   AUDIO PLAYER
   Real <audio> under a custom UI so it matches the site rather than
   showing the browser's default chrome.
   ===================================================================== */
.player{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:3px;
  padding:12px 16px;position:relative;overflow:hidden}
.player + .player{margin-top:8px}
.player-art{width:52px;height:52px;flex:none;border-radius:2px;object-fit:cover;
  align-self:flex-start}
.player-play{
  width:42px;height:42px;flex:none;border:0;border-radius:50%;cursor:pointer;
  align-self:flex-start;margin-top:4px;
  background:var(--ember);color:#fff;display:grid;place-items:center;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  box-shadow:0 8px 22px rgba(255,91,92,.30)}
.player-play:hover{transform:scale(1.06)}
.player-play svg{width:18px;height:18px;fill:currentColor;pointer-events:none}
.player-play .ico-pause{display:none}
.player.playing .player-play .ico-play{display:none}
.player.playing .player-play .ico-pause{display:block}

.player-body{flex:1;min-width:0}
.player-title{font-family:var(--font-display);font-size:19px;text-transform:uppercase;
  line-height:1;margin:0 0 4px}
.player-meta{font-family:var(--font-mono);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.player-scrub{
  position:relative;height:18px;display:flex;align-items:center;cursor:pointer;
  touch-action:none}
.player-track{position:relative;height:4px;width:100%;border-radius:999px;
  background:rgba(255,255,255,.14);overflow:hidden}
.player-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--ember);
  border-radius:999px}
.player-buffer{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,255,255,.10)}
.player-knob{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--bone);transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .18s ease}
.player-scrub:hover .player-knob,.player.playing .player-knob{opacity:1}
/* times ride the scrubber line rather than taking a row of their own */
.player-line{display:flex;align-items:center;gap:12px}
.player-line .player-scrub{flex:1;min-width:0}
.player-cur,.player-dur{font-family:var(--font-mono);font-size:14px;color:var(--mute);
  flex:none;font-variant-numeric:tabular-nums;min-width:38px}
.player-dur{text-align:right}
/* share confirmation, swapped in after a copy-to-clipboard fallback */
.pl-share.copied{background:var(--ember);border-color:var(--ember);color:#fff}

.sec-bone .player{background:#fff;border-color:rgba(0,0,0,.10)}
.sec-bone .player-title{color:var(--ink)}
.sec-bone .player-track{background:rgba(0,0,0,.12)}

@media (max-width:430px){
  .player{gap:11px;padding:10px 12px}
  .player-line{gap:9px}
  .player-cur,.player-dur{min-width:34px}
  .player-art{width:46px;height:46px}
  .player-play{width:40px;height:40px;margin-top:2px}
  .player-title{font-size:18px}
}

/* ---- playlist controls: play all / loop ---- */
.playlist-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.pl-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  padding:11px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--bone);transition:.18s ease}
.pl-btn:hover{border-color:rgba(255,255,255,.42);transform:translateY(-2px)}
.pl-btn svg{width:15px;height:15px;fill:currentColor;flex:none}
.pl-btn .lbl-stop{display:none}
.playlist.running .pl-play .lbl-start{display:none}
.playlist.running .pl-play .lbl-stop{display:inline}
.pl-btn[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.pl-count{font-family:var(--font-mono);font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-left:auto}

/* the track currently playing */
.player.active{border-color:rgba(255,91,92,.55)}
.player.active .player-title{color:var(--ember)}

.sec-bone .pl-btn{border-color:rgba(0,0,0,.16);background:rgba(0,0,0,.03);color:var(--ink)}

@media (max-width:430px){
  .playlist-bar{gap:8px}
  .pl-btn{padding:10px 13px;letter-spacing:.12em}
  .pl-count{flex:1 1 100%;margin-left:0;order:5}
}

/* the album title reads as one line at every width */
.album-title{white-space:nowrap}
@media (max-width:430px){ .album-title{font-size:32px} }

/* a product tile whose artwork is not final yet */
.prod-media{position:relative;display:block}
.prod-flag{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--ember);padding:5px 9px;border-radius:3px;
  box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* =====================================================================
   HERO CUTOUT
   The band, cut out, sitting on the right of the hero. Absolutely
   positioned so it never pushes the copy around; the copy simply reserves
   room on the right at desktop widths.
   ===================================================================== */
/* Width-driven, not height-driven: the reserve on the copy and the size of the
   image have to be the SAME number or they drift apart and the art lands on the
   wordmark. Sizing by height meant a 733px-wide image behind a 560px reserve. */
:root{--cutout-w:min(46vw,660px)}
.hero-cutout{
  position:absolute;right:0;bottom:0;z-index:1;
  width:var(--cutout-w);height:auto;max-height:94%;object-fit:contain;
  object-position:bottom right;pointer-events:none;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.34));
}
.hero.has-cutout .hero-in{padding-right:var(--cutout-w)}
.hero.has-cutout .scroll-cue{display:none}

@media (max-width:1080px){
  :root{--cutout-w:min(50vw,470px)}
  .hero-cutout{right:-4%;opacity:.94}
}
@media (max-width:620px){
  /* stacked: copy, then the band underneath, rather than a squeezed column */
  .hero.has-cutout{flex-direction:column;align-items:stretch;padding-bottom:0}
  /* restore the wrap gutter the desktop reserve had overridden */
  .hero.has-cutout .hero-in{padding-right:18px}
  .hero-cutout{position:static;width:100%;max-width:430px;max-height:none;height:auto;
    margin:26px auto 0;right:auto;opacity:1;display:block}
}

/* ---- 390px touch targets -------------------------------------------------
   Measured on a real 390px mobile emulation: burger 32px, close 42px, player
   transport 38px, filter chips 38px. All under the 44px comfortable minimum,
   so they get padded out without changing how they look. */
@media (max-width:900px){
  .burger{min-width:44px;min-height:44px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:5px}
  .mm-close{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center;padding:0}
  .pl-btn,.player-play,.player-loop{min-width:44px;min-height:44px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- master volume ------------------------------------------------------
   One control in the playlist bar, not one per row. Hidden below 720px because
   iOS and Android ignore HTMLMediaElement.volume outright, so it would be a
   dead control on a phone. */
.pl-vol{display:flex;align-items:center;gap:8px}
.pl-mute{background:none;border:0;padding:6px;cursor:pointer;color:var(--stone);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;transition:color .18s ease}
.pl-mute:hover{color:var(--bone)}
.pl-mute svg{width:18px;height:18px;fill:currentColor;pointer-events:none}
.pl-mute .ico-mute{display:none}
.pl-vol.muted .ico-vol{display:none}
.pl-vol.muted .ico-mute{display:block}
.pl-vol.muted .pl-mute{color:var(--ember)}
.pl-volrange{-webkit-appearance:none;appearance:none;width:92px;height:18px;
  background:none;cursor:pointer}
.pl-volrange::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:rgba(240,192,160,.28)}
.pl-volrange::-moz-range-track{height:4px;border-radius:2px;
  background:rgba(240,192,160,.28)}
.pl-volrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;background:var(--bone);border:0;
  margin-top:-4.5px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pl-volrange::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--bone);border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pl-volrange:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* Desktop only. iOS and Android Chrome ignore HTMLMediaElement.volume, and the
   Web Audio workaround that got round it broke background playback and made the
   pitch drift, so on a phone the hardware keys are the volume control. */
@media (max-width:720px){ .pl-vol{display:none} }

/* ---- sticky mobile actions ----------------------------------------------
   Two thumb-reachable buttons pinned to the bottom on phones. One line each,
   icon then label. Sits below the mobile menu (z-index 95) so opening the menu
   still covers it, and the body gets matching bottom padding so the footer is
   never trapped underneath. */
.sticky-cta{display:none}
@media (max-width:720px){
  .sticky-cta{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(8,14,14,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid rgba(240,192,160,.16)}
  .sticky-cta .btn{width:100%;min-height:48px;font-size:16px;
    padding-left:10px;padding-right:10px;gap:8px}
  .sticky-cta .btn svg{width:17px;height:17px;fill:currentColor;flex:none}
  .sticky-cta .btn-ghost{background:rgba(255,255,255,.06)}
  /* clear the bar, plus the home indicator on an iPhone */
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}

/* ---- centred footer on mobile -------------------------------------------
   Stacked columns read better centred on a phone than ragged-left. */
@media (max-width:720px){
  .foot-top{text-align:center}
  .foot-brand,.foot-col{text-align:center}
  .foot-brand img{margin-left:auto;margin-right:auto}
  .foot-brand p{margin-left:auto;margin-right:auto}
  .foot-brand .socials,.foot-col .socials{justify-content:center}
  .foot-col ul{padding-left:0;list-style:none}
  .foot-col li{justify-content:center}
  .foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .foot-bottom nav,.foot-bottom div{justify-content:center;text-align:center}
}

/* ---- now playing bar -----------------------------------------------------
   Appears only once something is playing. On a phone it replaces the sticky
   Listen / Tickets bar rather than stacking a second bar on top of it. */
.nowbar{position:fixed;left:0;right:0;bottom:0;z-index:92;
  background:rgba(8,14,14,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(240,192,160,.18)}
.nowbar[hidden]{display:none}
.nb-scrub{height:16px;display:flex;align-items:center;cursor:pointer;
  padding:0;margin-top:-6px;touch-action:none}
.nb-scrub::before{content:"";position:absolute;left:0;right:0;height:3px;
  background:rgba(240,192,160,.22)}
.nb-fill{position:relative;height:3px;background:var(--ember);width:0;
  transition:width .12s linear}
.nb-in{display:flex;align-items:center;gap:14px;
  max-width:var(--wrap,1180px);margin:0 auto;padding:10px 18px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.nb-art{width:44px;height:44px;object-fit:cover;flex:none;border-radius:2px}
.nb-meta{min-width:0;flex:1}
.nb-title{font-family:var(--font-display);font-size:16px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-sub{font-family:var(--font-mono);font-size:14px;color:var(--stone);margin-top:2px}
.nb-ctrl{display:flex;align-items:center;gap:4px;flex:none}
.nb-btn{background:none;border:0;color:var(--bone);cursor:pointer;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;transition:color .18s ease}
.nb-btn:hover{color:var(--ember)}
.nb-btn svg{width:22px;height:22px;fill:currentColor;pointer-events:none}
.nb-play svg{width:26px;height:26px}
.nb-play .ico-play{display:none}
.nowbar.paused .ico-play{display:block}
.nowbar.paused .ico-pause{display:none}
/* one bar at a time on a phone */
@media (max-width:720px){
  body.playing .sticky-cta{display:none}
  .nb-in{gap:10px;padding-left:14px;padding-right:14px}
  .nb-art{width:40px;height:40px}
  .nb-title{font-size:15px}
}

/* the agency credit sits last, in the fine print row */
.foot-credit{width:100%;order:9}
.foot-credit a{color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(124,131,140,.5)}
.foot-credit a:hover{color:var(--bone);text-decoration-color:currentColor}
@media (min-width:721px){
  .foot-bottom{flex-wrap:wrap}
  .foot-credit{width:auto;order:0;margin-left:auto}
}