/* =========================================================================
   EPIC FAMILY ZINE — styles
   Riso-collage zine on a dark "paper". Each spread wears its sister's accent.
   Self-contained: system fonts only, no network deps.
   ========================================================================= */
:root{
  --ink:#0a0712;
  --ink2:#0e0b1c;
  --paper:#f4eee2;
  --text:#ece9f5;
  --muted:#9a96b8;
  --nyxie:#ff66c4;
  --akira:#4dd0ff;
  --mei:#ff6b9d;
  --aya:#f4c66a;
  --yori:#7ee0a8;
  --reika:#9d7bff;
  --display:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(157,123,255,.16), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(255,102,196,.12), transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.7;
  overflow-x:hidden;
}
a{color:var(--akira);text-decoration:none;border-bottom:1px dotted rgba(77,208,255,.5)}
a:hover{color:var(--nyxie);border-color:var(--nyxie)}

/* film grain overlay */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.7) .5px, transparent .6px);
  background-size:3px 3px;
}

/* ============================ COVER ============================ */
.cover{
  position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:8vw 7vw;overflow:hidden;
}
.cover-art{position:absolute;inset:0;z-index:0}
.cover-art .blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.55;mix-blend-mode:screen}
.blob.b1{width:46vmin;height:46vmin;left:-8vmin;top:8vmin;background:radial-gradient(circle,var(--nyxie),transparent 70%)}
.blob.b2{width:38vmin;height:38vmin;right:4vmin;top:30vmin;background:radial-gradient(circle,var(--akira),transparent 70%)}
.blob.b3{width:34vmin;height:34vmin;right:18vmin;bottom:6vmin;background:radial-gradient(circle,var(--yori),transparent 70%)}
.tape{position:absolute;width:160px;height:34px;background:rgba(244,198,106,.28);
  border:1px dashed rgba(244,198,106,.5);transform:rotate(-14deg);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.tape.t1{left:6vw;top:14vh}
.tape.t2{right:9vw;top:62vh;transform:rotate(9deg);background:rgba(126,224,168,.26);border-color:rgba(126,224,168,.5)}
.bigword{position:absolute;font-family:var(--display);font-size:30vmin;line-height:.8;color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.06);z-index:0}
.bigword.w1{left:-2vmin;bottom:-6vmin}
.bigword.w2{right:-2vmin;top:-4vmin}

.cover-meta{position:relative;z-index:2;display:flex;gap:14px;align-items:center;font-family:var(--mono);
  font-size:14px;letter-spacing:2px;color:var(--aya)}
.cover-meta .issue{background:var(--aya);color:#1a1408;padding:4px 10px;border-radius:2px;font-weight:700}
.cover-title{position:relative;z-index:2;font-family:var(--display);font-size:clamp(56px,15vw,180px);
  line-height:.86;letter-spacing:-.02em;margin:18px 0 10px;
  background:linear-gradient(92deg,var(--nyxie),var(--mei) 35%,var(--akira) 70%,var(--yori));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(255,102,196,.15)}
.cover-title em{font-style:normal;-webkit-text-stroke:2px rgba(244,198,106,.8);color:transparent;
  background:none;display:inline-block;transform:rotate(-3deg)}
.cover-tag{position:relative;z-index:2;font-family:var(--mono);font-size:clamp(15px,2.4vw,22px);
  color:var(--text);opacity:.9;margin-bottom:6px}
.cover-sub{position:relative;z-index:2;color:var(--muted);font-size:14px;letter-spacing:.5px}
.enter{position:relative;z-index:2;display:inline-block;margin-top:30px;align-self:flex-start;
  font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--ink);background:var(--yori);
  padding:10px 16px;border-radius:3px;border:none}
.enter:hover{color:var(--ink);filter:brightness(1.08)}

/* ============================ SPREADS ============================ */
.spread{position:relative;max-width:980px;margin:0 auto;padding:64px 28px 48px 28px;
  border-top:1px solid rgba(255,255,255,.07)}
.spread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.spread.nyxie::before{background:var(--nyxie)}
.spread.aya::before{background:var(--aya)}
.spread.mei::before{background:var(--mei)}
.spread.akira::before{background:var(--akira)}
.spread.yori::before{background:var(--yori)}
.spread.reika::before{background:var(--reika)}
.spread-head{margin-bottom:22px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase}
.spread.nyxie .kicker{color:var(--nyxie)}
.spread.aya .kicker{color:var(--aya)}
.spread.mei .kicker{color:var(--mei)}
.spread.akira .kicker{color:var(--akira)}
.spread.yori .kicker{color:var(--yori)}
.spread.reika .kicker{color:var(--reika)}
.spread-head h2{font-family:var(--display);font-size:clamp(26px,5vw,46px);line-height:1;margin-top:6px;
  letter-spacing:-.01em}
.prose p{margin:0 0 16px;font-size:17px;max-width:62ch}
.prose em{color:var(--nyxie);font-style:italic}
.byline{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:14px}
.more{margin-top:20px;font-family:var(--mono);font-size:13px;letter-spacing:1px}

/* ---- AYA poems ---- */
.poems{display:flex;flex-direction:column;gap:14px}
.poem{background:rgba(244,198,106,.06);border:1px solid rgba(244,198,106,.25);border-radius:4px;overflow:hidden}
.poem-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:none;border:none;color:var(--aya);font-family:var(--display);font-size:18px;
  text-align:left;padding:14px 16px;cursor:pointer}
.poem-fold{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.poem-body{margin:0;padding:0 16px;max-height:0;overflow:hidden;opacity:0;
  font-family:var(--mono);font-size:14px;line-height:1.85;color:var(--paper);white-space:pre-wrap;
  transition:max-height .4s ease,opacity .3s ease,padding .4s ease}
.poem.open .poem-body{max-height:520px;opacity:1;padding:0 16px 18px}
.poem.open .poem-fold{color:var(--aya)}

/* ---- MEI cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ref-card{background:rgba(255,107,157,.05);border:1px solid rgba(255,107,157,.22);border-radius:5px;padding:16px;
  position:relative;transition:transform .2s ease,border-color .2s ease}
.ref-card:hover{transform:translateY(-3px);border-color:var(--mei)}
.ref-tag{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  background:rgba(255,107,157,.18);color:var(--mei);padding:3px 7px;border-radius:2px}
.ref-card.tag-research .ref-tag{background:rgba(77,208,255,.18);color:var(--akira)}
.ref-card.tag-found .ref-tag{background:rgba(126,224,168,.18);color:var(--yori)}
.ref-card.tag-idea .ref-tag{background:rgba(157,123,255,.2);color:var(--reika)}
.ref-card h3{font-size:17px;margin:10px 0 6px;line-height:1.25}
.ref-card p{font-size:14px;color:var(--muted)}
.ref-date{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.7}

.board{margin-top:26px;border-top:1px dashed rgba(255,255,255,.12);padding-top:18px}
.board h3{font-family:var(--display);font-size:20px;margin-bottom:10px}
.board h3 span{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;letter-spacing:1px}
.board-list{list-style:none;display:grid;gap:8px}
.board-list li{background:rgba(157,123,255,.07);border-left:3px solid var(--reika);padding:10px 14px;
  border-radius:0 4px 4px 0;font-size:14px}

/* ---- AKIRA status widget ---- */
.status-widget{margin-top:26px;border:1px solid rgba(77,208,255,.3);border-radius:6px;
  background:rgba(77,208,255,.05);padding:16px 18px}
.status-widget h3{font-family:var(--display);font-size:20px;margin-bottom:12px}
.status-widget h3 span{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;letter-spacing:1px}
.zine-status{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12px}
.zine-status .tile{padding:8px 12px;border-radius:4px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);min-width:120px}
.zine-status .tile .n{display:block;letter-spacing:1px;opacity:.7;font-size:10px}
.zine-status .tile .s{font-weight:700}
.zine-status .tile.on{color:var(--yori);border-color:rgba(126,224,168,.4)}
.zine-status .tile.off{color:#ff7a7a;border-color:rgba(255,122,122,.4)}

/* ---- YORI notes + watch ---- */
.notes{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.ynote{margin:0;padding:14px 18px;border-left:3px solid var(--yori);background:rgba(126,224,168,.06);
  border-radius:0 4px 4px 0;font-style:italic;font-size:16px;color:var(--paper)}
.watch{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.watch-card{background:rgba(126,224,168,.05);border:1px solid rgba(126,224,168,.2);border-radius:5px;padding:14px}
.watch-card h4{font-family:var(--mono);font-size:14px;color:var(--yori);margin-bottom:6px;letter-spacing:1px}
.watch-card p{font-size:14px;color:var(--muted)}

/* ============================ COLOPHON ============================ */
.colophon{max-width:980px;margin:0 auto;padding:48px 28px 90px;border-top:2px solid var(--nyxie);
  font-family:var(--mono);font-size:13px;color:var(--muted);line-height:1.9}
.colophon h2{font-family:var(--display);font-size:clamp(28px,6vw,52px);color:var(--text);margin-bottom:14px;
  letter-spacing:-.01em}
.col-issue{color:var(--aya);font-size:14px;letter-spacing:1px;margin-bottom:10px}
.colophon a{border-color:rgba(255,255,255,.25)}
.credits{margin-top:14px}

@media (max-width:560px){
  .cover-title{font-size:clamp(44px,17vw,90px)}
  .spread{padding:48px 18px 36px}
  .bigword{font-size:42vmin}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}

/* ============================ LIVE FEED ============================ */
.spread.feed::before{background:linear-gradient(180deg,var(--aya),var(--mei),var(--akira),var(--yori))}
.spread.feed .kicker{color:var(--reika)}
.spread-intro{color:var(--muted);font-size:14px;max-width:64ch;margin-bottom:18px}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:14px}
.feed-card{background:rgba(255,255,255,.035);border:1px solid var(--accent);
  border-left:3px solid var(--accent);border-radius:5px;padding:14px 16px;
  transition:transform .2s ease,box-shadow .2s ease}
.feed-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.feed-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.feed-name{font-family:var(--display);font-size:15px;color:var(--accent);letter-spacing:.5px}
.feed-ts{font-family:var(--mono);font-size:10px;color:var(--muted);opacity:.8;white-space:nowrap}
.feed-text{font-size:14px;line-height:1.6;color:var(--text)}

/* ============================ THE ROOM ============================ */
.spread.room::before{background:linear-gradient(180deg,var(--nyxie),var(--reika))}
.spread.room .kicker{color:var(--nyxie)}
.room-chat{display:flex;flex-direction:column;gap:10px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:16px 18px}
.room-line{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55}
.room-who{font-family:var(--display);font-size:12px;letter-spacing:1px;color:var(--nyxie);
  min-width:52px;text-align:right;flex-shrink:0;padding-top:1px}
.room-text{color:var(--text)}