/* @RJS° shared site shell — canonical fixed top bar + footer */
:root{
  --rjs-shell-header-height:94px;
  --rjs-shell-primary-height:50px;
  --rjs-shell-secondary-height:44px;
  --rjs-shell-max:1220px;
  --rjs-shell-bg:#090b0c;
  --rjs-shell-paper:#f0eee8;
  --rjs-shell-muted:#aaa9a4;
  --rjs-shell-line:rgba(255,255,255,.12);
  --rjs-shell-gold:#e0c27e;
  --rjs-shell-gold-base:#c9a45a;
  --rjs-shell-tone-accent:var(--rjs-shell-gold-base);
  --rjs-shell-accent:var(--rjs-shell-page-accent,var(--rjs-shell-tone-accent));
}

html{scroll-padding-top:calc(var(--rjs-shell-header-height) + 16px)}
body{padding-top:var(--rjs-shell-header-height)!important}

.site-header{
  --rjs-shell-accent:var(--rjs-shell-context-accent,var(--rjs-shell-page-accent,var(--rjs-shell-tone-accent)));
  position:fixed!important;
  inset:0 0 auto 0!important;
  z-index:1000!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:var(--rjs-shell-header-height)!important;
  min-height:var(--rjs-shell-header-height)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:rgba(9,11,12,.94)!important;
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  box-shadow:0 14px 38px rgba(0,0,0,.24)!important;
  overflow:visible!important;
  color:var(--rjs-shell-paper)!important;
}
.site-header[data-current-tone="gold"]{--rjs-shell-tone-accent:#c9a45a}
.site-header[data-current-tone="silver"]{--rjs-shell-tone-accent:#b8bec1}
.site-header[data-current-tone="blue"]{--rjs-shell-tone-accent:#536d87}
.site-header[data-current-tone="green"]{--rjs-shell-tone-accent:#6f8d74}
.site-header[data-current-tone="purple"]{--rjs-shell-tone-accent:#8a6fff}
.site-header[data-current-tone="red"]{--rjs-shell-tone-accent:#9c2d12}
.site-header[data-current-tone="kaleidoscope"]{--rjs-shell-tone-accent:#d65ca8}
.site-header[data-current-tone="phases"]{--rjs-shell-tone-accent:#638372}
.site-header[data-current-tone="release"]{--rjs-shell-tone-accent:#c9a227}
.site-header[data-current-tone="house"]{--rjs-shell-tone-accent:#b8bec1}
.site-header[data-current-tone="life"]{--rjs-shell-tone-accent:#b93d4a}
.site-header[data-current-tone="tbeah"]{--rjs-shell-tone-accent:#c9e31b}
.site-header[data-current-tone="brand-house"]{--rjs-shell-tone-accent:#c9a227}
.site-header[data-current-tone="brand-sites"]{--rjs-shell-tone-accent:#e84b9b}
.site-header[data-current-tone="alien"]{--rjs-shell-tone-accent:#2dd2e2}
.site-header[data-current-tone="camel"]{--rjs-shell-tone-accent:#c69145}
.site-header[data-current-tone="parking-orange"]{--rjs-shell-tone-accent:#B96A3B}
.site-header[data-current-tone="parking-blue"]{--rjs-shell-tone-accent:#739c8c}
/* Preserve each room's own header color language while sharing the shell geometry. */
.testing-page .site-header[data-section-accent="alien"]{--rjs-shell-page-accent:var(--alien-blue,#2dd2e2)}
.testing-page .site-header[data-section-accent="camel"]{--rjs-shell-page-accent:var(--camel-caramel,#c69145)}
.fuck-up-room-page .site-header[data-current-tone="red"]{--rjs-shell-page-accent:#9c2d12}

.site-header::after{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:-1px!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--rjs-shell-accent) 38%,transparent) 16%,var(--rjs-shell-accent) 50%,color-mix(in srgb,var(--rjs-shell-accent) 38%,transparent) 84%,transparent 100%)!important;
  opacity:1!important;
  pointer-events:none!important;
}
.site-header[data-current-tone="kaleidoscope"]::after{
  background:linear-gradient(90deg,transparent,#ff5ca8,#f4c94e,#57c7ff,#8f6bff,transparent)!important;
}

.site-header .header-inner{
  position:relative!important;
  z-index:2!important;
  width:min(calc(100% - 2rem),var(--rjs-shell-max))!important;
  max-width:var(--rjs-shell-max)!important;
  height:100%!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:var(--rjs-shell-primary-height) var(--rjs-shell-secondary-height)!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:visible!important;
}
.site-header .header-primary-row,
.site-header .header-secondary-row{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(190px,1fr) minmax(270px,auto) minmax(290px,1fr)!important;
  align-items:center!important;
  gap:clamp(.8rem,2vw,1.6rem)!important;
  overflow:visible!important;
}
.site-header .header-primary-row{grid-row:1!important;border-bottom:0!important}
.site-header .header-secondary-row{grid-row:2!important}

.site-header .site-mark{
  justify-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.48rem!important;
  min-width:0!important;
  color:var(--rjs-shell-paper)!important;
  -webkit-text-fill-color:var(--rjs-shell-paper)!important;
  text-decoration:none!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
  white-space:nowrap!important;
}
.site-header .site-mark img{
  display:block!important;
  width:36px!important;
  height:36px!important;
  max-width:36px!important;
  border-radius:50%!important;
  object-fit:contain!important;
}
.site-header .site-mark > span{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--rjs-shell-paper)!important;
  -webkit-text-fill-color:var(--rjs-shell-paper)!important;
  font-size:.82rem!important;
  line-height:1!important;
}
.site-header .header-current-identity,
.site-header .header-context,
.site-header .header-motto{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--rjs-shell-paper)!important;
  -webkit-text-fill-color:var(--rjs-shell-paper)!important;
  background:none!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  line-height:1.15!important;
  text-transform:none!important;
  transition:opacity .14s ease,transform .14s ease,color .22s ease!important;
}
.site-header .header-current-identity{
  justify-self:center!important;
  text-align:center!important;
  font-size:clamp(.72rem,1vw,.88rem)!important;
  font-weight:860!important;
  letter-spacing:.09em!important;
}
.site-header .header-motto{
  justify-self:end!important;
  max-width:100%!important;
  color:var(--rjs-shell-muted)!important;
  -webkit-text-fill-color:var(--rjs-shell-muted)!important;
  text-align:right!important;
  font-size:clamp(.61rem,.82vw,.72rem)!important;
  font-weight:790!important;
  letter-spacing:.055em!important;
}
.site-header .header-context{
  color:var(--rjs-shell-muted)!important;
  -webkit-text-fill-color:var(--rjs-shell-muted)!important;
  font-size:clamp(.64rem,.9vw,.76rem)!important;
  font-weight:790!important;
  letter-spacing:.07em!important;
}
.site-header .header-context-left{justify-self:start!important;text-align:left!important}
.site-header .header-context-right{justify-self:end!important;text-align:right!important}

.site-header .rjs-shell-punct{
  color:var(--rjs-shell-accent)!important;
  -webkit-text-fill-color:var(--rjs-shell-accent)!important;
}
.site-header .navigation-slot{
  position:relative!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.site-header .menu-button.navigation-pill{
  position:relative!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.62rem!important;
  min-height:31px!important;
  margin:0!important;
  padding:.34rem .88rem!important;
  border:1px solid color-mix(in srgb,var(--rjs-shell-accent) 52%,rgba(255,255,255,.12))!important;
  border-radius:999px!important;
  color:var(--rjs-shell-paper)!important;
  -webkit-text-fill-color:var(--rjs-shell-paper)!important;
  background:color-mix(in srgb,var(--rjs-shell-accent) 9%,rgba(9,11,12,.96))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rjs-shell-accent) 12%,transparent),0 8px 22px rgba(0,0,0,.18)!important;
  font:inherit!important;
  cursor:pointer!important;
}
.site-header .menu-button-label{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  font-size:.68rem!important;
  font-weight:800!important;
  letter-spacing:.07em!important;
  text-transform:none!important;
}
.site-header .menu-button-lines,
.site-header .menu-button-lines::before,
.site-header .menu-button-lines::after{
  content:""!important;
  display:block!important;
  width:15px!important;
  height:1px!important;
  background:var(--rjs-shell-accent)!important;
  transition:transform .18s ease!important;
}
.site-header .menu-button-lines{position:relative!important}
.site-header .menu-button-lines::before{position:absolute!important;transform:translateY(-5px)!important}
.site-header .menu-button-lines::after{position:absolute!important;transform:translateY(5px)!important}
.site-header .menu-button[aria-expanded="true"] .menu-button-lines{background:transparent!important}
.site-header .menu-button[aria-expanded="true"] .menu-button-lines::before{transform:rotate(45deg)!important}
.site-header .menu-button[aria-expanded="true"] .menu-button-lines::after{transform:rotate(-45deg)!important}

.site-header[data-header] .navigation-slot .site-nav{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:1100!important;
  width:min(300px,calc(100vw - 1.2rem))!important;
  margin:0!important;
  padding:.55rem!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:.38rem!important;
  border:1px solid color-mix(in srgb,var(--rjs-shell-accent) 34%,rgba(255,255,255,.10))!important;
  border-radius:18px!important;
  background:rgba(9,11,12,.99)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.48)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate(-50%,-8px)!important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease,border-color .2s ease!important;
}
.site-header[data-header] .navigation-slot .site-nav.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}
.site-header[data-header] .navigation-slot .site-nav a{
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:.58rem .76rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:var(--rjs-shell-muted)!important;
  -webkit-text-fill-color:var(--rjs-shell-muted)!important;
  background:transparent!important;
  text-align:center!important;
  text-decoration:none!important;
  font-size:.69rem!important;
  font-weight:780!important;
  letter-spacing:.055em!important;
  line-height:1.2!important;
  text-transform:none!important;
}
.site-header[data-header] .navigation-slot .site-nav a::after{display:none!important;content:none!important}
.site-header[data-header] .navigation-slot .site-nav a:hover,
.site-header[data-header] .navigation-slot .site-nav a:focus-visible,
.site-header[data-header] .navigation-slot .site-nav a.is-active{
  color:var(--rjs-shell-paper)!important;
  -webkit-text-fill-color:var(--rjs-shell-paper)!important;
  border-color:color-mix(in srgb,var(--rjs-shell-accent) 40%,transparent)!important;
  background:color-mix(in srgb,var(--rjs-shell-accent) 14%,transparent)!important;
}
.site-header .header-inner.is-updating .header-current-identity,
.site-header .header-inner.is-updating .header-context{
  opacity:.16!important;
  transform:translateY(2px)!important;
}


.site-header[data-header] .navigation-slot .site-nav a{
  grid-column:auto!important;
}
.site-header[data-header] .navigation-slot .menu-button[aria-expanded="true"] + .site-nav{
  display:flex!important;
  flex-direction:column!important;
}

.site-footer{
  position:relative!important;
  isolation:isolate!important;
  width:min(calc(100% - 2rem),var(--rjs-shell-max))!important;
  max-width:var(--rjs-shell-max)!important;
  min-height:58px!important;
  margin:1.5rem auto 1rem!important;
  padding:12px 18px!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  gap:1rem!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  color:var(--rjs-shell-muted)!important;
  -webkit-text-fill-color:var(--rjs-shell-muted)!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:.74rem!important;
  line-height:1.35!important;
}
.site-footer::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  border-radius:inherit!important;
  padding:1px!important;
  background:linear-gradient(90deg,transparent,rgba(201,164,90,.44),rgba(184,190,193,.24),rgba(201,164,90,.44),transparent)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  pointer-events:none!important;
}
.site-footer .footer-left,
.site-footer .footer-center,
.site-footer .footer-right{min-width:0!important}
.site-footer .footer-left{text-align:left!important}
.site-footer .footer-center{text-align:center!important}
.site-footer .footer-right{text-align:right!important}
.site-footer .text-terminal{
  color:#2eeb57!important;
  -webkit-text-fill-color:#2eeb57!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-shadow:0 0 11px rgba(46,235,87,.28)!important;
}
.site-footer .text-gold{
  color:var(--rjs-shell-gold)!important;
  -webkit-text-fill-color:var(--rjs-shell-gold)!important;
}
.site-footer .roxie-approved-pill{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  padding:.4rem .95rem!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  color:var(--rjs-shell-paper)!important;
  -webkit-text-fill-color:var(--rjs-shell-paper)!important;
  background:
    linear-gradient(#0b0d0e,#0b0d0e) padding-box,
    linear-gradient(90deg,#c65b89,#cb7b43,#c9ad58,#6eaa82,#6d9fc3,#8c70c1) border-box!important;
  white-space:nowrap!important;
  font-size:.68rem!important;
  font-weight:780!important;
  letter-spacing:.075em!important;
  text-transform:none!important;
}
.site-footer .roxie-approved-pill::before,
.site-footer .roxie-approved-pill::after{display:none!important;content:none!important}

/* Testing keeps its unique center approval artwork, but uses the shared footer geometry. */
.site-footer .camel-approved-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  padding:.1rem .45rem!important;
  border-radius:999px!important;
}
.site-footer .camel-approved-pill img{
  display:block!important;
  width:auto!important;
  height:36px!important;
  max-height:36px!important;
  object-fit:contain!important;
}

@media(max-width:1080px){
  .site-header .header-primary-row,
  .site-header .header-secondary-row{
    grid-template-columns:minmax(150px,.8fr) minmax(220px,1fr) minmax(220px,1fr)!important;
    gap:.65rem!important;
  }
  .site-header .header-motto{font-size:.56rem!important;letter-spacing:.04em!important}
  .site-header .header-current-identity{font-size:.7rem!important}
  .site-header .header-context{font-size:.6rem!important}
}

@media(max-width:760px){
  :root{
    --rjs-shell-header-height:92px;
    --rjs-shell-primary-height:49px;
    --rjs-shell-secondary-height:43px;
  }
  .site-header .header-inner{width:min(calc(100% - 1rem),var(--rjs-shell-max))!important}
  .site-header .header-primary-row{
    grid-template-columns:auto minmax(0,1fr) minmax(104px,.72fr)!important;
    gap:.42rem!important;
  }
  .site-header .header-secondary-row{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    gap:.42rem!important;
  }
  .site-header .site-mark{gap:.32rem!important}
  .site-header .site-mark img{width:30px!important;height:30px!important;max-width:30px!important}
  .site-header .site-mark > span{display:inline!important;font-size:.62rem!important;letter-spacing:.03em!important}
  .site-header .header-current-identity{
    font-size:clamp(.52rem,2.3vw,.64rem)!important;
    letter-spacing:.04em!important;
    white-space:normal!important;
  }
  .site-header .header-motto{
    max-width:112px!important;
    font-size:clamp(.43rem,1.8vw,.52rem)!important;
    letter-spacing:.02em!important;
    white-space:normal!important;
  }
  .site-header .header-context{
    font-size:clamp(.47rem,2vw,.57rem)!important;
    letter-spacing:.03em!important;
    white-space:normal!important;
  }
  .site-header .menu-button.navigation-pill{
    min-height:30px!important;
    padding:.3rem .52rem!important;
    gap:.38rem!important;
  }
  .site-header .menu-button-label{font-size:.57rem!important;letter-spacing:.04em!important}
  .site-header[data-header] .navigation-slot .site-nav{
    top:calc(100% + 7px)!important;
    width:min(280px,calc(100vw - 1rem))!important;
    padding:.5rem!important;
    gap:.34rem!important;
    border-radius:16px!important;
  }
  .site-header[data-header] .navigation-slot .site-nav a{min-height:42px!important;font-size:.64rem!important}
  .site-footer{
    width:min(calc(100% - 1.2rem),var(--rjs-shell-max))!important;
    grid-template-columns:1fr!important;
    gap:.72rem!important;
    padding:14px 16px!important;
    border-radius:22px!important;
    text-align:center!important;
  }
  .site-footer .footer-left,
  .site-footer .footer-center,
  .site-footer .footer-right{text-align:center!important}
}