/* ============================================================
   RHYTHM GOD MUSIC — shared site shell
   Tokens, base, header, footer, and the motion that goes with
   them. Every page links this file; page-specific CSS stays in
   the page. Change the header or footer here and it changes
   everywhere.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --black:#080808;
  --black-2:#0d0d0d;
  --paper:#efedea;
  --paper-2:#e6e3de;
  --ink:#1a1a1a;
  --ink-soft:#4a4744;
  --gold:#c9a15e;
  --gold-bright:#d9b475;
  --gold-line:#a9803f;
  --white:#ffffff;
  --rule:rgba(255,255,255,.14);
  --rule-dark:rgba(0,0,0,.16);

  --font:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script:'Sacramento', 'Snell Roundhand', cursive;

  --pad:22px;
  --max:1200px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.01em}

:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* a class that sets display must never out-rank the hidden attribute */
[hidden]{display:none!important}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  background:var(--black);
  position:relative;
  z-index:100;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:16px;
  padding-bottom:16px;
}
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1}
.brand svg{width:26px;height:26px;color:var(--white)}
.brand .wordmark{
  font-weight:600;
  font-size:15px;
  letter-spacing:.16em;
}
.brand .submark{
  display:flex;align-items:center;gap:7px;
  font-size:9px;letter-spacing:.42em;color:rgba(255,255,255,.7);
  margin-left:.42em;
}
.brand .submark::before,.brand .submark::after{
  content:"";height:1px;width:14px;background:rgba(255,255,255,.45)
}

/* --- hamburger: three bars, no extra elements to go stray --- */
.nav-toggle{
  position:relative;
  z-index:90;
  width:44px;height:44px;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:5px;
  margin-right:-6px;
}
.nav-toggle .bar{
  display:block;width:24px;height:2px;background:var(--white);
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .16s linear;
}
.nav-toggle:hover .bar{background:var(--gold-bright)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- full-screen menu panel (fixed, so it never joins the header flex row) --- */
.site-nav{
  position:fixed;
  inset:0;
  z-index:70;
  background:var(--black);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--header-h,90px) var(--pad) 44px;
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease,visibility .24s ease;
}
.site-nav.is-open{opacity:1;visibility:visible}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li + li{border-top:1px solid var(--rule)}
.site-nav a{
  display:block;
  padding:21px 2px;
  font-size:clamp(19px,5.8vw,25px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.site-nav a[aria-current="page"]{color:var(--gold)}
.nav-foot{
  margin:32px 0 0;
  font-family:var(--script);
  font-size:27px;
  line-height:1;
  color:var(--gold);
  opacity:.8;
}
body.nav-open{overflow:hidden}
body.nav-open .site-header{position:fixed;top:0;left:0;right:0}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--black);padding:24px 0}
.footer-inner{
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.footer-inner .brand{transform:scale(.8)}
.copyright{font-size:13px;color:rgba(255,255,255,.72);margin:0}
.copyright .sep{color:rgba(255,255,255,.32);padding:0 2px}
/* the credit stays on one line, so it never breaks mid-phrase */
.copyright .credit{white-space:nowrap}
.copyright a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-bottom:1px solid rgba(169,128,63,.6);
  transition:color .18s ease,border-color .18s ease;
}
.copyright a:hover,.copyright a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
/* on the narrowest screens the credit drops to its own line, and the divider
   goes with it rather than dangling at the end of the line above */
@media (max-width:479px){
  .copyright .credit{display:block;margin-top:5px}
  .copyright .sep{display:none}
}
.socials{display:flex;gap:22px}
.socials a{color:rgba(255,255,255,.85)}
.socials a:hover{color:var(--gold)}
.socials svg{width:23px;height:23px}

/* ============================================================
   BUTTON
   ============================================================ */
.btn{
  display:inline-block;
  padding:12px 26px;
  border:1px solid var(--gold-line);
  color:var(--ink);
  font-size:13px;font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .16s ease,border-color .28s ease,
             transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s ease;
}
.btn::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--gold-line);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .32s cubic-bezier(.65,0,.35,1);
}
.btn:hover::before,.btn:focus-visible::before{
  transform:scaleX(1);
  transform-origin:left center;
}
.btn:hover,.btn:focus-visible{
  color:var(--white);
  border-color:var(--gold-line);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  /* hold the label's colour until the sweep is under it, so it never
     sits white-on-light mid-transition */
  transition-property:color,border-color,transform,box-shadow;
  transition-duration:.14s,.28s,.32s,.32s;
  transition-delay:.15s,0s,0s,0s;
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-light{color:var(--gold);border-color:var(--gold-line)}
.btn-light:hover,.btn-light:focus-visible{color:var(--black)}

/* ============================================================
   TABLET  ≥ 700px
   ============================================================ */
@media (min-width:700px){
  :root{--pad:32px}
  .footer-inner{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ============================================================
   DESKTOP  ≥ 1000px
   ============================================================ */
@media (min-width:1000px){
  :root{--pad:40px}

  .nav-toggle{display:none}
  .site-nav{
    position:static;inset:auto;
    display:block;
    background:none;
    padding:0;
    opacity:1;visibility:visible;
    transition:none;
  }
  .site-nav ul{display:flex;gap:6px}
  .site-nav li + li{border-top:0}
  .site-nav a{
    padding:8px 18px;
    font-size:14px;
    font-weight:500;
    letter-spacing:.13em;
    border-bottom:2px solid transparent;
  }
  .nav-foot{display:none}
  body.nav-open{overflow:visible}
  body.nav-open .site-header{position:relative}
  .site-nav a:hover{color:var(--white)}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--gold)}
  .header-inner{padding-top:22px;padding-bottom:22px}
  .brand svg{width:34px;height:34px}
  .brand .wordmark{font-size:19px}
}

/* ============================================================
   MOTION
   header, footer and nav
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ---- keyframes ---- */
@keyframes riseIn  {from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}
@keyframes dropIn  {from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes settleIn{from{opacity:0;transform:scale(1.04)}     to{opacity:1;transform:none}}

/* ---- page load: header ---- */
.site-header .brand{animation:dropIn .6s var(--ease-out) backwards}
.nav-toggle{animation:dropIn .6s var(--ease-out) .08s backwards}

/* ---- brand mark ---- */
.brand svg{transition:transform .7s var(--ease-out),color .3s ease}
.brand .wordmark{transition:color .3s ease}
.brand:hover svg{color:var(--gold)}
.brand:hover .wordmark{color:var(--gold-bright)}

/* ---- socials ---- */
.socials a{transition:color .28s ease,transform .35s var(--ease-out)}
.socials a:hover{color:var(--gold);transform:translateY(-3px)}

/* ---- the footer reveals on every page ---- */
.js-anim .footer-inner > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s var(--ease-out),
             transform .75s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js-anim .footer-inner > *.is-in{opacity:1;transform:none}

/* the footer brand carries its own scale, so it reveals without losing it */
.js-anim .footer-inner .brand{transform:translateY(22px) scale(.8)}
.js-anim .footer-inner .brand.is-in{transform:scale(.8)}

.js-anim .footer-inner > *:nth-child(2){--d:90ms}
.js-anim .footer-inner > *:nth-child(3){--d:180ms}

/* ============================================================
   MOTION — mobile menu
   ============================================================ */
@media (max-width:999px){
  .site-nav li{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .35s ease,transform .45s var(--ease-out);
  }
  .site-nav.is-open li{opacity:1;transform:none}
  .site-nav.is-open li:nth-child(1){transition-delay:.10s}
  .site-nav.is-open li:nth-child(2){transition-delay:.16s}
  .site-nav.is-open li:nth-child(3){transition-delay:.22s}
  .site-nav.is-open li:nth-child(4){transition-delay:.28s}
  .site-nav.is-open li:nth-child(5){transition-delay:.34s}

  .nav-foot{
    opacity:0;transform:translateY(14px);
    transition:opacity .4s ease,transform .5s var(--ease-out);
  }
  .site-nav.is-open .nav-foot{opacity:.8;transform:none;transition-delay:.42s}

  .site-nav a{transition:color .25s ease,transform .3s var(--ease-out)}
  .site-nav a:hover{color:var(--gold-bright);transform:translateX(6px)}
}

/* ============================================================
   MOTION — desktop nav
   ============================================================ */
@media (min-width:1000px){
  .site-nav li{animation:dropIn .55s var(--ease-out) backwards}
  .site-nav li:nth-child(1){animation-delay:.14s}
  .site-nav li:nth-child(2){animation-delay:.18s}
  .site-nav li:nth-child(3){animation-delay:.22s}
  .site-nav li:nth-child(4){animation-delay:.26s}
  .site-nav li:nth-child(5){animation-delay:.30s}

  .site-nav a{
    position:relative;
    border-bottom:0;
    padding-bottom:10px;
    transition:color .25s ease;
  }
  .site-nav a::after{
    content:"";
    position:absolute;left:18px;right:18px;bottom:0;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .38s var(--ease-out);
  }
  .site-nav a:hover{color:var(--white)}
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after{transform:scaleX(1)}
  .site-nav a[aria-current="page"]::after{transform:scaleX(1)}
}

/* ============================================================
   MOTION — off switch
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .js-anim .footer-inner > *,
  .site-nav li,
  .nav-foot{opacity:1!important;transform:none!important}
  .nav-foot{opacity:.8!important}
  .js-anim .footer-inner .brand{transform:scale(.8)!important}
}