@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  --ink: #070706;
  --ink-soft: #0b0a09;
  --surface: #11100e;
  --surface-rich: #18120f;
  --gold: #d6ad55;
  --gold-bright: #f1dcad;
  --gold-muted: #b38b43;
  --blood: #731a11;
  --blood-bright: #b23426;
  --cream: #e5d8b8;
  --muted: #bca97c;
  --quiet: #8f8063;
  --line: rgba(214,173,85,.38);
  --line-soft: rgba(214,173,85,.18);
  --line-strong: rgba(214,173,85,.56);
  --shadow: 0 28px 80px rgba(0,0,0,.42);
  --display: Cinzel, Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--cream); background: radial-gradient(circle at 78% 6%,rgba(103,22,17,.20),transparent 31rem),#060606; font: 1.08rem/1.45 var(--serif); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background: url("assets/dashboard-header-art.png") top center/1800px auto no-repeat; mask-image: linear-gradient(#000,transparent 58%); }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; }
a,button,input,select,textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
::selection { color: #fff4d8; background: #762118; }

.portal-header,.member-header { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: clamp(18px,2.7vw,46px); min-height: 90px; padding: 7px clamp(18px,4vw,76px); border-bottom: 1px solid var(--line); background: rgba(7,7,6,.95); backdrop-filter: blur(16px); }
.portal-brand,.member-brand { display: flex; align-items: center; gap: 13px; color: var(--gold-bright); white-space: nowrap; }
.portal-brand img,.member-brand img { width: 70px; height: 70px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(165,24,17,.24)); }
.portal-brand span,.member-brand span { display: flex; align-items: baseline; gap: 6px; font: 600 clamp(.96rem,1.35vw,1.25rem)/1 var(--display); letter-spacing: .11em; }
.portal-brand small,.member-brand small { color: #ba9140; font-size: .52em; letter-spacing: .34em; }
.portal-nav,.member-nav { min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(13px,2.1vw,34px); }
.portal-nav a,.member-nav a { position: relative; padding: 33px 0 29px; color: #d6c492; font: .76rem var(--display); letter-spacing: .055em; white-space: nowrap; }
.portal-nav a i { display: none; }
.portal-nav a::after,.member-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; transform: scaleX(0); background: var(--blood-bright); transition: transform .2s; }
.portal-nav a:hover,.portal-nav a.active,.member-nav a:hover,.member-nav a.active { color: var(--gold-bright); }
.portal-nav a.active::after,.member-nav a.active::after { transform: scaleX(1); }
.portal-actions { display: flex; align-items: center; gap: 13px; }
.lf-bell { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold); border: 1px solid transparent; }
.lf-bell:hover { border-color: var(--line); }
.lf-user { min-width: 190px; padding: 7px 11px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); background: rgba(18,13,11,.64); }
.mini-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid var(--gold-muted); border-radius: 50%; background: radial-gradient(circle,#40130f,#0b0807); font: 500 .65rem var(--display); }
.lf-user > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.lf-user b { overflow: hidden; color: var(--gold-bright); font: 600 .92rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.lf-user small { color: var(--gold-muted); font-size: .72rem; }
.lf-user > i { color: var(--gold); font-style: normal; }

.portal-kicker,.member-eyebrow { margin: 0 0 13px; color: #c79c48; font: .72rem var(--display); letter-spacing: .18em; }
.gold-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 48px; padding: 0 23px; color: #f3d995; border: 1px solid #bf8528; background: linear-gradient(110deg,#731a11,#310b09); box-shadow: inset 0 0 0 1px rgba(255,217,126,.12),0 8px 25px rgba(0,0,0,.25); font: .76rem var(--display); letter-spacing: .06em; cursor: pointer; transition: transform .2s,filter .2s; }
.gold-button:hover { filter: brightness(1.18); transform: translateY(-2px); }
.gold-button.secondary { border-color: rgba(214,173,85,.42); background: transparent; color: var(--gold-bright); box-shadow: none; }
.gold-button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: #d6c492; font: .75rem var(--display); letter-spacing: .06em; }
.text-link:hover { color: var(--gold-bright); }
.text-link span { font-size: 1rem; transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.dashboard-status { width: min(1400px,calc(100% - 40px)); margin: 12px auto; padding: 12px 16px; color: #f3c1b7; border: 1px solid #8f2a22; background: #3e110e; text-align: center; }

.portal-footer,.member-footer { width: min(1400px,calc(100% - 40px)); margin: 0 auto; padding: 34px 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line-soft); color: var(--quiet); }
.portal-footer strong,.member-footer strong { display: block; color: var(--gold-bright); font: 500 .82rem var(--display); letter-spacing: .12em; }
.portal-footer small,.member-footer small { display: block; margin-top: 4px; font-size: .8rem; }
.portal-footer nav,.member-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; }
.portal-footer a,.member-footer a { color: var(--gold-muted); font: .75rem var(--display); letter-spacing: .05em; }
.portal-footer a:hover,.member-footer a:hover { color: var(--gold-bright); }

@media(max-width:1380px) and (min-width:821px) {
  .portal-header { grid-template-columns:auto minmax(0,1fr) auto; gap:20px; padding-inline:24px; }
  .portal-brand img { width:62px; height:62px; }
  .portal-brand span { font-size:.92rem; }
  .portal-nav { gap:clamp(11px,1.45vw,20px); }
  .portal-nav a { font-size:.7rem; }
  .lf-user { min-width:52px; width:52px; grid-template-columns:38px; border:0; padding:0; }
  .lf-user > span:nth-child(2),.lf-user > i { display:none; }
}

@media(max-width:1120px) {
  .portal-header,.member-header { gap: 18px; padding-inline: 22px; }
  .portal-nav,.member-nav { gap: 17px; }
  .portal-nav a,.member-nav a { font-size: .68rem; }
  .lf-user { min-width: 48px; grid-template-columns: 38px; border: 0; padding: 0; }
  .lf-user > span:nth-child(2),.lf-user > i { display: none; }
}

@media(max-width:980px) {
  body { padding-bottom: 70px; }
  .portal-header,.member-header { min-height: 74px; padding: 6px 15px; backdrop-filter: none; }
  .portal-brand img,.member-brand img { width: 56px; height: 56px; }
  .portal-brand span,.member-brand span { font-size: .82rem; }
  .portal-actions .lf-bell { display: none; }
  .portal-nav,.member-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: 68px; padding: 0 4px; gap: 0; justify-content:flex-start; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; scroll-snap-type:x proximity; background: rgba(7,7,6,.98); border-top: 1px solid var(--line); box-shadow:0 -12px 30px rgba(0,0,0,.38); }
  .portal-nav::-webkit-scrollbar,.member-nav::-webkit-scrollbar { display:none; }
  .portal-nav a,.member-nav a { flex:0 0 82px; min-width:82px; padding:21px 4px 17px; text-align:center; scroll-snap-align:start; font:600 .78rem var(--serif); letter-spacing:0; }
  .portal-nav a i { display:block; margin-bottom:1px; color:var(--gold-muted); font-size:.82rem; font-style:normal; line-height:1; }
  .portal-nav a::after,.member-nav a::after { top: 0; bottom: auto; }
  .member-account { width:48px; min-width:48px; height:40px; padding:0; display:grid; place-items:center; color:transparent; border:1px solid var(--line); font-size:0; }
  .member-account::before { content:"LF"; color:var(--gold-bright); font:.72rem var(--display); }
  .member-account::after { display:none; }
  .portal-footer,.member-footer { padding-bottom: 30px; align-items: flex-start; flex-direction: column; }
  .portal-footer nav,.member-footer nav { justify-content: flex-start; }
}

@media(max-width:480px) {
  .portal-brand small { display: none; }
}

@media(max-width:560px) {
  body { padding-bottom: 172px; }
  .portal-nav,.member-nav {
    height: 168px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(3,56px);
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    scroll-snap-type: none;
  }
  .portal-nav a,.member-nav a {
    width: auto;
    min-width: 0;
    height: 56px;
    padding: 19px 2px 13px;
    font-size: .75rem;
    line-height: 1;
  }
}