html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
:root{
  --bg:#070707;
  --panel:#0c0c0c;
  --stone:#b8aa8f;
  --stone-dim:#756d60;
  --line:#635a4b;
  --gold:#b8a178;
  --red:#d01818;
  --white:#ded8cc;
}
*{box-sizing:border-box}
html{background:#050505;scroll-behavior:smooth}
body{
  margin:0;
  color:var(--stone);
  background:
    radial-gradient(circle at 50% -10%,rgba(80,72,60,.14),transparent 33rem),
    radial-gradient(circle at 10% 30%,rgba(55,48,40,.08),transparent 25rem),
    #070707;
  font-family:Georgia,"Times New Roman","Yu Mincho",YuMincho,serif;
  letter-spacing:.015em;
}
a{color:inherit;text-decoration:none}
a:hover{color:#e8d8b9}
.site-header{
  max-width:1500px;margin:0 auto;padding:24px 34px 16px;
  display:flex;align-items:center;gap:36px;border-bottom:1px solid rgba(184,161,120,.18)
}
.brand{display:block;line-height:0;flex:0 0 auto}
.brand img{display:block;width:300px;max-width:32vw;height:auto}
.top-nav{margin-left:auto;display:flex;gap:46px;font-size:16px;letter-spacing:.03em}
.top-nav a{position:relative;padding:12px 0;color:#b7ad9b}
.top-nav a.active{color:var(--red)}
.top-nav a.active:after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:1px;background:#e1c896}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#c8ad7f;font-size:34px;line-height:1;padding:5px 8px;cursor:pointer}
main{max-width:1460px;margin:0 auto;padding:32px 28px 24px}
.title-wrap{text-align:center;margin:12px 0 26px}
h1{margin:0;color:#bdb4a6;font-size:58px;letter-spacing:.12em;font-weight:600;text-shadow:0 2px 0 #000}
.title-ornament{display:flex;align-items:center;justify-content:center;gap:16px;color:#a99068;margin-top:6px}.title-ornament:before,.title-ornament:after{content:"";width:95px;height:1px;background:linear-gradient(90deg,transparent,#8e7d62,transparent)}
.hero{max-width:1120px;margin:0 auto;border:1px solid rgba(184,161,120,.45);padding:5px;background:#0a0a0a;box-shadow:0 0 0 1px rgba(255,255,255,.02),0 10px 40px rgba(0,0,0,.4)}
.hero img{display:block;width:100%;height:auto}
.ltr{text-align:center;margin:14px 0 20px;font-size:18px;letter-spacing:.19em;color:#b5a580}.ltr:before,.ltr:after{content:"✦";font-size:10px;margin:0 12px;color:#8f7b58}
.members{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch}
.member-card{
  min-height:485px;position:relative;padding:26px 18px 22px;text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.018),rgba(255,255,255,0)),
    repeating-linear-gradient(110deg,rgba(255,255,255,.014) 0 1px,transparent 1px 6px),#0b0b0b;
  border:1px solid rgba(184,161,120,.48);
  clip-path:polygon(8% 0,92% 0,100% 5%,100% 100%,0 100%,0 5%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.65)
}
.member-card:before{content:"";position:absolute;left:14px;right:14px;top:10px;height:1px;background:linear-gradient(90deg,transparent,#7f6d51,transparent)}
.member-crest{display:block;width:108px;height:auto;margin:0 auto 4px;opacity:.98;filter:drop-shadow(0 2px 2px #000)}
.member-name{font-size:32px;margin:0;color:#c1b5a0;font-weight:600}
.part{margin-top:7px;color:#e21919;font-size:18px}
.alias{margin:18px 0 11px;color:rgba(190,181,163,.42);font-size:16px;transition:color .2s,text-shadow .2s;cursor:default}
.member-card:hover .alias,.member-card:focus-within .alias{color:rgba(211,202,185,.76);text-shadow:0 0 9px rgba(255,255,255,.05)}
.birthday{font-size:16px;border-top:1px solid rgba(184,161,120,.28);border-bottom:1px solid rgba(184,161,120,.28);padding:8px 0;margin-bottom:5px}
.links{min-height:34px;display:flex;flex-direction:column;justify-content:center;gap:3px;color:#d1bc92;font-size:15px;line-height:1.15}
.band-link{display:inline-flex;gap:7px;justify-content:center;align-items:center}.band-link:after{content:"↗";color:var(--red);font-size:14px}
.x-link{display:inline-flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;margin-top:10px;color:#d7c29c}
.x-link svg,.x-link img{width:48px;height:48px;display:block}.x-handle{color:#df1b1b;font-family:Georgia,serif;font-size:14px}
.footer-nav{border-top:1px solid rgba(184,161,120,.25);margin-top:36px;padding:28px 0 10px;display:flex;justify-content:center;gap:52px;font-size:14px}.footer-nav .active{color:#d9c4a2}
.copyright{text-align:center;color:#6e665b;font-size:13px;margin:16px 0 4px}
@media (max-width:980px){
  .site-header{padding:18px 18px}.brand img{width:235px;max-width:62vw}.top-nav{display:none}.menu-toggle{display:block}.top-nav.open{display:flex;position:absolute;left:0;right:0;top:66px;z-index:20;background:rgba(6,6,6,.97);flex-direction:column;gap:0;border-top:1px solid #2f2b25;border-bottom:1px solid #2f2b25;padding:8px 24px}.top-nav.open a{padding:15px 0;border-bottom:1px solid #211f1b}.top-nav.open a:last-child{border-bottom:0}
  main{padding:24px 12px 20px}h1{font-size:42px}.hero{max-width:100%;padding:3px}.ltr{font-size:16px;margin:10px 0 14px}
  .members{display:flex;flex-direction:column;gap:9px}
  .member-card{clip-path:none;min-height:0;display:grid;grid-template-columns:minmax(170px,38%) minmax(0,1fr) 58px;grid-template-areas:"identity details social";align-items:center;text-align:left;padding:18px 12px;border-color:rgba(184,161,120,.42)}
  .member-card:before{left:8px;right:8px;top:6px}
  .identity{grid-area:identity;min-width:0;padding:0 10px 0 4px;border-right:1px solid rgba(184,161,120,.28);text-align:center;overflow:hidden}
  .details{grid-area:details;min-width:0;padding:0 10px;overflow:hidden}.social{grid-area:social;min-width:0;text-align:center;align-self:center}
  .member-crest{width:72px;margin:0 auto 4px;opacity:.98}.member-name{font-size:21px;line-height:1.08;margin-top:4px;white-space:normal;overflow-wrap:anywhere;max-width:100%}.part{font-size:15px}
  .alias{margin:0 0 6px;font-size:14px;color:rgba(190,181,163,.38);white-space:normal}.birthday{border:0;padding:0;margin:0 0 8px;font-size:13.5px;white-space:nowrap}.links{min-height:0;align-items:flex-start;font-size:13.5px;gap:4px;line-height:1.15}.band-link{justify-content:flex-start;overflow-wrap:anywhere}
  .x-link{margin:0;gap:5px}.x-link svg,.x-link img{width:44px;height:44px}.x-handle{display:none}
  .footer-nav{gap:18px;flex-wrap:wrap;font-size:11px;margin-top:24px}.copyright{font-size:11px}
}
@media (max-width:560px){
  .brand img{width:215px;max-width:66vw}h1{font-size:36px}.title-wrap{margin-bottom:18px}.title-ornament{gap:10px}.title-ornament:before,.title-ornament:after{width:55px}
  .member-card{grid-template-columns:minmax(138px,40%) minmax(0,1fr) 44px;padding:14px 7px}.identity{padding:0 7px 0 3px}.details{padding:0 7px}.member-crest{width:60px}.member-name{font-size:18px;line-height:1.08;white-space:normal;overflow-wrap:anywhere}.part{font-size:13px}.alias{font-size:12px}.birthday,.links{font-size:11.5px}.x-link svg,.x-link img{width:34px;height:34px}
}

@media (max-width:390px){
  .member-card{grid-template-columns:128px minmax(0,1fr) 40px;padding:12px 5px}
  .identity{padding:0 6px 0 2px}
  .details{padding:0 6px}
  .member-crest{width:54px}
  .member-name{font-size:17px;line-height:1.05;white-space:normal;overflow-wrap:anywhere}
  .part{font-size:12px}
  .alias,.birthday,.links{font-size:11px}
  .x-link svg,.x-link img{width:30px;height:30px}
}

@media (max-width:980px){
  .member-name{width:100%;max-width:100%;text-align:center}
  .identity,.details,.social{position:relative;z-index:1}
  .details{background:linear-gradient(90deg,rgba(11,11,11,.96),rgba(11,11,11,.88))}
}

@media (max-width: 980px){
  .members .member-card{
    display:grid !important;
    grid-template-columns: 36% minmax(0,1fr) 52px !important;
    grid-template-areas:"identity details social" !important;
    align-items:center !important;
    column-gap:0 !important;
    padding:14px 8px !important;
    overflow:hidden !important;
  }
  .members .member-card .identity{
    grid-area:identity !important;
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    overflow:hidden !important;
    padding:0 8px 0 2px !important;
    border-right:1px solid rgba(184,161,120,.28) !important;
    text-align:center !important;
  }
  .members .member-card .member-crest{
    width:58px !important;
    max-width:58px !important;
    height:auto !important;
    margin:0 auto 3px !important;
  }
  .members .member-card .member-name{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-size:17px !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    text-align:center !important;
  }
  .members .member-card .part{
    font-size:13px !important;
    line-height:1.15 !important;
    margin-top:4px !important;
    text-align:center !important;
  }
  .members .member-card .details{
    grid-area:details !important;
    min-width:0 !important;
    width:auto !important;
    overflow:hidden !important;
    padding:0 8px !important;
    background:#0b0b0b !important;
  }
  .members .member-card .alias,
  .members .member-card .birthday,
  .members .member-card .links{
    max-width:100% !important;
    overflow:hidden !important;
    font-size:12px !important;
    line-height:1.22 !important;
  }
  .members .member-card .alias{margin:0 0 5px !important;}
  .members .member-card .birthday{
    white-space:nowrap !important;
    margin:0 0 6px !important;
    padding:0 !important;
    border:0 !important;
  }
  .members .member-card .links{
    min-height:0 !important;
    gap:3px !important;
    align-items:flex-start !important;
  }
  .members .member-card .band-link{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  .members .member-card .social{
    grid-area:social !important;
    min-width:0 !important;
    width:52px !important;
    overflow:hidden !important;
    text-align:center !important;
  }
  .members .member-card .x-link{
    margin:0 !important;
    gap:0 !important;
  }
  .members .member-card .x-link img,
  .members .member-card .x-link svg{
    width:34px !important;
    height:34px !important;
  }
  .members .member-card .x-handle{
    display:none !important;
  }
}

@media (max-width: 430px){
  .members .member-card{
    grid-template-columns: 35% minmax(0,1fr) 46px !important;
    padding:12px 6px !important;
  }
  .members .member-card .member-crest{
    width:52px !important;
    max-width:52px !important;
  }
  .members .member-card .member-name{
    font-size:15px !important;
  }
  .members .member-card .part{
    font-size:12px !important;
  }
  .members .member-card .details{
    padding:0 6px !important;
  }
  .members .member-card .alias,
  .members .member-card .birthday,
  .members .member-card .links{
    font-size:11px !important;
  }
  .members .member-card .social{
    width:46px !important;
  }
  .members .member-card .x-link img,
  .members .member-card .x-link svg{
    width:30px !important;
    height:30px !important;
  }
}