/* =====================================================================
   FONTS
   Two custom local fonts, loaded from /fonts. 'Fraunces' (body serif)
   is loaded separately via Google Fonts <link> in index.html.
===================================================================== */
@font-face {
  font-family: 'Dharma Gothic M ExBold';   /* display font: headings, nav, logos */
  src: url('../fonts/DharmaGothicM-ExBold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT Cond Medium';    /* utility font: labels, dates, small caps text */
  src: url('../fonts/FuturaPTCond-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   COLOR TOKENS
===================================================================== */
:root{
  --bg:#0a0a10;
  --bg2:#050507;
  --ink:#f2ede0;         /* off-white body text */
  --muted:#a99fa8;       /* secondary/quiet text */
  --red:#ff2d3d;         /* primary brand red */
  --red-dim:#7c141c;
  --highlight:#ffd23f;   /* yellow accent */
  --pink:#ff4fa3;        /* pink accent */
  --line: rgba(242,237,224,0.14);  /* hairline borders */
  --card:#0e0a0d;        /* card background */
  --outline:#1a0a0d;     /* text-outline color for sticker effect */
}

/* =====================================================================
   RESET / BASE
===================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg2);
  color:var(--ink);
  font-family:'Fraunces', serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
a{ color:inherit; }

/* =====================================================================
   BACKGROUND FX
   Fixed full-viewport layers: gradient wash + halftone dot texture
   + two decorative corner "shards". All pointer-events:none.
===================================================================== */
.bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 1100px 700px at 50% 0%, rgba(244,232,224,0.95) 0%, rgba(214,178,176,0.6) 35%, transparent 68%),
    linear-gradient(180deg, #f1e6de 0%, #dcb7b5 12%, #ac5b60 28%, #6f272d 44%, #33151a 62%, #130a0d 80%, #050407 100%);
}
.dot-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(circle, rgb(0,0,0) 1px, transparent 1.6px);
  background-size:17px 17px;
  mix-blend-mode:soft-light;
  opacity:0.5;
}
.shard{position:fixed; z-index:0; pointer-events:none; opacity:0.25;}
.shard svg{display:block;}
.shard.left{ left:-60px; bottom:-40px; width:300px; }
.shard.right{ right:-70px; bottom:-30px; width:340px; transform:scaleX(-1); }

/* page wrapper: everything visible sits above the bg layers */
.page{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:32px 20px 90px;}

/* =====================================================================
   TICKER
   Top bar with a reload-random message.
===================================================================== */
.ticker{
  position:sticky;
  top:0;
  z-index:20;
  overflow:hidden;
  min-height:40px;
  background:#ffffff;
  color:#808080;
  border:2px solid #000000;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.ticker-viewport{
  overflow:hidden;
  width:100%;
}
.ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:ticker-scroll 18s linear infinite;
  will-change:transform;
}
.ticker-group{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  width:max-content;
}
.ticker-item{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:auto;
  padding:clamp(8px, 1.4vw, 2px) clamp(12px, 2.4vw, 20px) 0;
  font-family:'Dharma Gothic M ExBold', sans-serif;
  font-size:clamp(16px, 2.2vw, 24px);
  letter-spacing:0.9px;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
.ticker-item + .ticker-item::before{
  content:'\25CB';
  margin-right:clamp(12px, 2.4vw, 20px);
  opacity:0.65;
}
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){
  .ticker{ min-height:38px; }
  .ticker-track{ animation-duration:22s; }
  .ticker-item{ font-size:16px; letter-spacing:0.6px; }
}

/* =====================================================================
   MASTHEAD
   Logo image + stamp badge (positioned on top, beside the Y) + tagline
===================================================================== */
.masthead{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:38px 20px 12px;
  margin-bottom:26px;
}
.wordmark-img{
  width:min(1000px, 100%);
  max-width:100%;
  height:auto;
  display:block;
  margin:0;
  object-fit:contain;
  object-position:center;
  filter: drop-shadow(0 0 30px rgba(255,45,61,0.35)) drop-shadow(3px 3px 0 rgba(132, 132, 132, 0.6));
  position:relative;
  z-index:30;
}

/* tagline: "UNOFFICIAL FAN PROJECT" — kerning kept TIGHT here */
.tagline{
  display:block;
  width:fit-content;
  font-family:'Dharma Gothic M ExBold', sans-serif;
  background:var(--red);
  color:var(--ink);
  font-size:clamp(16px, 2.6vw, 40px); /* FIXED: min < preferred < max */
  letter-spacing:0.08em; /* scales with font-size for better kerning */
  line-height:1;
  margin:2px 0 0;
  padding:0.3em 1em 0.25em; /* relative units scale with text */
  text-transform:uppercase;
  text-shadow:2px 2px 0 rgba(0,0,0,0.6);
  position:relative;
  left:25%;
  z-index:1;
  transform:translateX(-50%) rotate(-3.5deg);
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}


/* =====================================================================
   PAGE LAYOUT — sidebar nav (left) + main content (right)
===================================================================== */
.layout{ display:grid; grid-template-columns:130px 1fr; gap:22px; align-items:start; }
@media (max-width:760px){ .layout{ grid-template-columns:1fr; gap:12px; } }

/* ---- sidebar nav words (sticker/outline text effect) ---- */
.sidebar{ display:flex; flex-direction:column; gap:10px; position:relative; padding-top:6px; }
.nav-word{
  font-family:'Dharma Gothic M ExBold', sans-serif;
  font-size:27px;
  letter-spacing:0.5px;
  background:none; border:none; cursor:pointer;
  text-align:left;
  padding:4px 8px;
  color:var(--ink);
  text-shadow:                              /* faux outline: 4 offsets + soft drop shadow */
    -1.5px -1.5px 0 var(--outline),
     1.5px -1.5px 0 var(--outline),
    -1.5px  1.5px 0 var(--outline),
     1.5px  1.5px 0 var(--outline),
     3px 3px 0 rgba(0,0,0,0.45);
  transition:transform 0.12s ease;
}
@media (max-width:760px){
  .sidebar{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding-top:0;
  }
  .nav-word{
    font-size:22px;
    text-align:center;
    padding:4px 8px;
  }
}
.nav-word:hover{ transform:translateX(3px); }
.nav-word:focus-visible{ outline:2px solid var(--highlight); outline-offset:3px; }
.nav-word.active{
  color:var(--red);
  text-decoration:underline wavy var(--red);
  text-underline-offset:5px;
}


main{ min-width:0; }
section.hidden{ display:none; }   /* tab sections not currently selected */

/* =====================================================================
   CARD — generic container used by every tab
===================================================================== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:20px 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,45,61,0.10), transparent);
  gap:16px;
}
.card-head .head-titles{ display:flex; flex-direction:column; gap:4px; }
.card-head h2{ font-family:'Dharma Gothic M ExBold', sans-serif; font-weight:400; letter-spacing:0.5px; font-size:26px; margin:0; color:var(--ink); }
.card-head .eyebrow{ font-family:'Futura PT Cond Medium', sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.card-body{ padding:24px 26px 30px; min-height:180px; }
p.body-text{ line-height:1.75; font-size:15.5px; }

/* =====================================================================
   PAGER — shared prev / count / next control
   Used by: Updates card-head, Members member-controls
===================================================================== */
.pager{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.pager-btn{
  width:34px; height:34px;
  background:rgba(255,45,61,0.14);
  border:1.5px solid var(--red);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  cursor:pointer;
  transform:rotate(-6deg);
  transition:background 0.15s ease;
}
.pager-btn.next{ transform:rotate(6deg); }
.pager-btn:hover{ background:rgba(255,45,61,0.32); }
.pager-btn:disabled{ opacity:0.3; cursor:default; }
.pager-count{ font-family:'Futura PT Cond Medium', sans-serif; font-size:13px; letter-spacing:1px; color:var(--muted); white-space:nowrap; }

/* =====================================================================
   UPDATES TAB — one fan-log .entry shown at a time
===================================================================== */
.entry{ display:none; }
.entry.active-entry{ display:block; }

/* "Fan Notes: ..." headline — kerning kept LOOSE here */
.entry h3{
  font-family:'Dharma Gothic M ExBold', sans-serif;
  font-weight:400;
  font-size:19px;
  letter-spacing:1.8px;           /* <-- loosened kerning (was 0 / default) */
  margin:4px 0 10px;
  color:var(--red);
}
.muted{ color:var(--muted); font-family:'Futura PT Cond Medium', sans-serif; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; }

/* =====================================================================
   MEMBERS TAB — gallery-style viewer
   Structure: big .member-stage image  ->  .member-controls (pager)
              ->  .member-thumbs (click to jump)  ->  .member-caption
   script.js keeps all four in sync via a shared currentIndex.
===================================================================== */

/* -- big "stage" image, one .member-slide visible at a time -- */
.member-stage{
  position:relative;
  width:100%;
  height:clamp(320px, 52vw, 540px);
  border:1px solid var(--line);
  border-radius:4px;
  background:#0b090d;
  overflow:hidden;
  margin-bottom:18px;
}
.member-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s ease;
}
.member-slide.active-slide{ opacity:1; pointer-events:auto; }
.member-card-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 56%;
  transform:scale(1.08) rotate(var(--card-tilt, 0deg));
  transform-origin:center;
  display:block;
}

/* -- prev / count / next, centered under the stage -- */
.member-controls{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:18px;
}

/* -- thumbnail strip: small clickable copies of each portrait -- */
.member-thumbs{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-bottom:22px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:2px 2px 8px;
}
.thumb{
  flex:0 0 auto;
  width:86px; height:66px;
  padding:0;
  border-radius:4px;
  border:2px solid var(--line);
  background:#151016;
  cursor:pointer;
  overflow:hidden;
  scroll-snap-align:start;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 56%;
  transform:scale(1.06) rotate(var(--card-tilt, 0deg));
  transform-origin:center;
  display:block;
}
.thumb:hover{ transform:translateY(-2px); }
.thumb.active-thumb{ border-color:var(--red); }
.member-thumbs::-webkit-scrollbar{ height:8px; }
.member-thumbs::-webkit-scrollbar-track{ background:rgba(242,237,224,0.08); border-radius:6px; }
.member-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,45,61,0.45); border-radius:6px; }

/* -- caption: only editable display name + file label -- */
.member-caption-slide{ display:none; text-align:center; }
.member-caption-slide.active-slide{ display:block; }
.member-caption h3{
  font-family:'Dharma Gothic M ExBold', sans-serif;
  font-size:30px; margin:6px 0 8px; color:var(--red);
}
.member-caption p.body-text{ max-width:520px; margin:0 auto; }
.member-socials{
  max-width:520px;
  margin:14px auto 0;
  padding-top:10px;
  border-top:1px solid var(--line);
  text-align:left;
}
.member-socials h4{
  margin:0 0 8px;
  font-family:'Futura PT Cond Medium', sans-serif;
  font-size:11.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
}
.member-socials ul{
  margin:0;
  padding-left:18px;
}
.member-socials li{
  margin:0 0 4px;
  line-height:1.55;
}
@media (max-width:760px){
  .member-stage{ height:clamp(250px, 66vw, 420px); }
  .thumb{ width:74px; height:58px; }
}

/* =====================================================================
   CONTRIBUTORS TAB — mirrors member presentation with a fixed GIF stage
   and keyboard-only bio switching.
===================================================================== */
.contributor-stage{
  position:relative;
  width:100%;
  height:clamp(320px, 52vw, 540px);
  border:1px solid var(--line);
  border-radius:4px;
  background:#0b090d;
  overflow:hidden;
  margin-bottom:18px;
}
.contributor-stage-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.contributor-caption p.body-text{ max-width:640px; margin:0 auto; }
.contributor-bio{ text-align:center; }
.contributor-intro{ margin-bottom:0; }
.contributors-role-title{
  margin:28px 0 10px;
  font-family:'Futura PT Cond Medium', sans-serif;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.contributor-role-line{
  margin-top:8px;
  text-align:left;
}
.contributor-role-name{
  font-family:'Dharma Gothic M ExBold', sans-serif;
  font-size:18px;
  letter-spacing:0.5px;
  color:var(--red);
  text-transform:uppercase;
}
@media (max-width:760px){
  .contributor-stage{ height:clamp(250px, 66vw, 420px); }
}

/* =====================================================================
   SOCIALS TAB — icon tiles with platform name below each icon
===================================================================== */
.social-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width:600px){ .social-grid{ grid-template-columns:repeat(2, 1fr); } }
.social-tile{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:4px; padding:24px 12px;
  text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.social-tile:hover{ border-color:var(--red); transform:translateY(-3px); background:rgba(255,45,61,0.06); }
.social-icon{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,45,61,0.12);
  color:var(--red);
}
.social-icon svg{ width:24px; height:24px; }
.social-name{
  font-family:'Dharma Gothic M ExBold', sans-serif;
  font-size:15px; letter-spacing:0.5px;
}

/* =====================================================================
   GUESTBOOK TAB — embedded external guestbook
===================================================================== */
.guestbook-frame{
  width:100%;
  min-height:760px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#f8f7ef;
}
.guestbook-frame.is-hidden{
  display:none;
}
.guestbook-fallback{
  display:none;
  margin:12px 0 0;
}
.guestbook-fallback.is-visible{
  display:block;
}
.guestbook-fallback a{
  color:var(--ink);
}
@media (max-width:760px){
  .guestbook-frame{ min-height:620px; }
}

/* =====================================================================
   INFO TAB — disclaimer callout
===================================================================== */
.disclaimer{ border-left:3px solid var(--red); padding:12px 16px; background:rgba(255,45,61,0.06); font-family:'Futura PT Cond Medium', sans-serif; font-size:11.5px; color:var(--muted); line-height:1.7; margin-top:18px; }

/* =====================================================================
   FOOTER
===================================================================== */
footer{ text-align:center; margin-top:44px; font-family:'Futura PT Cond Medium', sans-serif; font-size:10.5px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }