:root{
  --hfr-rail-w: 360px;
  --hfr-ink:   #0a0a0a;
  --hfr-gold:  #ffd000;
  --hfr-teal:  #0d4750;
  --hfr-line:  #dcdcdc;
  --hfr-serif: 'IBM Plex Serif', serif;
}

body.hfr-has-rail{ padding-left: 0; }
body.hfr-panel-open{ overflow: hidden; }

.hfr-rail{
  position: fixed;
  inset: 0;
  width: 100vw;
  background: #ffffff;
  padding: calc(var(--nav-h) + 150px) 0 40px 90px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .32s ease;
  will-change: transform;
}
.hfr-rail.open{ transform: translateX(0); }

.hfr-rail-nav{
  display:flex;
  flex-direction:column;
  width: var(--hfr-rail-w);
  gap: 28px;
}
.hfr-rail-nav a{
  font-family: var(--hfr-serif);
  font-size: 32px; font-weight: 300; letter-spacing: 1px;
  text-transform: uppercase; color: var(--hfr-ink);
  text-decoration: none; width: fit-content;
  padding: 0;
  transition: color .2s ease;
}
.hfr-rail-nav a:hover,
.hfr-rail-nav a.active{ color: var(--hfr-gold); }

.hfr-panel{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--hfr-rail-w);
  background: #ffffff;
  z-index: 1250;
  padding: calc(var(--nav-h) + 26px) 64px 26px 104px;
  overflow-y: auto;
  border-left: 1px solid var(--hfr-line);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.hfr-panel.open{ opacity: 1; visibility: visible; pointer-events: auto; }

.hfr-cards{ display: flex; flex-direction: column; gap: 26px; max-width: 960px; }
.hfr-card{
  position: relative; min-height: 185px;
  background: var(--hfr-teal); border-radius: 8px;
  padding: 24px 30px; display: flex; align-items: flex-end;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
.hfr-card:hover{ transform: translateY(-3px); filter: brightness(1.12); }
.hfr-card-title{
  font-family: var(--hfr-serif); font-size: 40px; font-weight: 300;
  letter-spacing: 1px; color: #ffffff;
}
.hfr-panel[data-section="join"] .hfr-cards{ gap: 16px; }
.hfr-panel[data-section="join"] .hfr-card{ min-height: 145px; }
.hfr-panel[data-section="join"] .hfr-card-title{ font-size: 28px; }

.hfr-wash{
  position: absolute; inset: 0; z-index: 5;
  background: #ffffff; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .34s ease;
}
.hfr-wash.show{ opacity: 1; }
.hfr-wash-text{
  font-family: var(--hfr-serif);
  font-size: clamp(56px, 8vw, 120px); font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase; color: var(--hfr-ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease .06s, transform .3s ease .06s;
}
.hfr-wash.show .hfr-wash-text{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .hfr-rail, .hfr-panel, .hfr-wash, .hfr-wash-text{ transition: none; }
}

@media (max-width: 760px){
  body.hfr-has-rail{ padding: 0; }
  .hfr-rail{
    width: 100vw;
    padding: calc(var(--nav-h) + 150px) 0 40px 48px;
    flex-direction: column;
  }
  .hfr-rail-nav{ flex-direction: column; width: min(360px, 86vw); gap: 22px; overflow: visible; }
  .hfr-rail-nav a{ font-size: 26px; white-space: normal; }
  .hfr-panel{ left: 0; padding: calc(var(--nav-h) + 26px) 20px 26px; border-left: 0; }
  .hfr-card{ min-height: 130px; }
  .hfr-card-title{ font-size: 28px; }
}
/* Account overlay: same rail, mirrored to the right */
.hfr-rail--right{
  transform: translateX(100%);
  padding: calc(var(--nav-h) + 150px) 90px 40px 0;
  align-items: flex-end;
}
.hfr-rail--right.open{ transform: translateX(0); }
.hfr-rail--right .hfr-rail-nav{ align-items: flex-end; }
.hfr-rail--right .hfr-rail-nav a{ text-align: right; }

.hfr-logout{ margin-top: auto; }
.hfr-logout button{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--hfr-serif); font-size: 16px; color: #b03030;
  transition: color .2s ease;
}
.hfr-logout button:hover{ color: #7d1f1f; text-decoration: underline; }

.hfr-panel--left{
  left: 0;
  right: var(--hfr-rail-w);
  border-left: 0;
  border-right: 1px solid var(--hfr-line);
  padding: calc(var(--nav-h) + 26px) 104px 26px 64px;
}

@media (max-width: 760px){
  .hfr-rail--right{ padding: calc(var(--nav-h) + 150px) 48px 40px 0; }
  .hfr-panel--left{ right: 0; border-right: 0; padding: calc(var(--nav-h) + 26px) 20px 26px; }
}