/* ============================================================================
   Comics — the Graphic Intelligence Archive reader (FICTIONAL ABYSS)
   Full-screen, immersive, tech-noir. One panel per leaf; text overlaid on art; UI fades.
   ========================================================================= */
:root{
  --cx-ink:#05070A; --cx-steel:#C0C0C0; --cx-cyan:#7fb4c4; --cx-text:#EAEDF2; --cx-dim:#8792a3;
  --cx-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --cx-label:"Archivo","Helvetica Neue",Arial,sans-serif;
  --cx-serif:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--cx-text);overflow:hidden;font-family:var(--cx-serif)}
a{color:inherit;text-decoration:none}
.comic-reader{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(120% 120% at 50% 40%, #0b0f16 0%, #05070A 60%, #000 100%)}

/* the flip host + leaves */
.comic-book{position:relative}
.comic-leaf,.comic-book .page{background:#05070A}
.comic-panel{position:relative;width:100%;height:100%;overflow:hidden;background:#05070A;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9)}
.comic-art{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.comic-art--blank{background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 22px),
  radial-gradient(80% 60% at 50% 42%, #121926 0%, #0a0f18 55%, #05070A 100%)}
.comic-pending{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--cx-label);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(192,192,192,.32);border:1px solid rgba(192,192,192,.18);padding:8px 14px;white-space:nowrap}

/* the overlay layer — 3×3 zone grid over the art */
.comic-overlays{position:absolute;inset:0;display:grid;
  grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;
  padding:clamp(14px,3.5vw,34px);gap:8px;pointer-events:none}
.ov{max-width:34ch;align-self:start;justify-self:start;text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
/* zone placement */
.zone-top-left{grid-area:1/1}.zone-top{grid-area:1/1/2/4;justify-self:center;text-align:center}.zone-top-right{grid-area:1/3;justify-self:end;text-align:right}
.zone-left{grid-area:2/1;align-self:center}.zone-center{grid-area:2/1/3/4;justify-self:center;align-self:center;text-align:center}.zone-right{grid-area:2/3;justify-self:end;align-self:center;text-align:right}
.zone-bottom-left{grid-area:3/1;align-self:end}.zone-bottom{grid-area:3/1/4/4;justify-self:center;align-self:end;text-align:center}.zone-bottom-right{grid-area:3/3;justify-self:end;align-self:end;text-align:right}
/* overlay types */
.ov-title{font-family:var(--cx-display);font-weight:600;font-size:var(--tc-title);line-height:.98;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;max-width:none}
.ov-caption{font-family:var(--cx-serif);font-size:clamp(15px,2.2vw,20px);line-height:1.4;color:#eef1f6;
  background:linear-gradient(180deg,rgba(5,7,10,.05),rgba(5,7,10,.55));backdrop-filter:blur(1px);padding:10px 14px}
.ov-dialogue{font-family:var(--cx-label);font-weight:600;font-size:clamp(15px,2.2vw,21px);line-height:1.35;
  color:#dff0f6;background:rgba(10,16,22,.62);border-left:2px solid var(--cx-cyan);padding:9px 14px}
.ov-thought{font-family:var(--cx-serif);font-style:italic;font-size:clamp(15px,2.2vw,20px);line-height:1.4;color:#cfd6e0}

/* the Foundation leaf link */
.comic-foundation{position:absolute;left:50%;bottom:clamp(18px,5vh,44px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;
  border:1px solid rgba(192,192,192,.4);padding:12px 20px;background:rgba(5,7,10,.6)}
.comic-foundation:hover{border-color:var(--cx-steel);background:rgba(12,18,26,.8)}
.cf-k{font-family:var(--cx-label);font-weight:700;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--cx-dim)}
.cf-v{font-family:var(--cx-display);font-weight:500;font-size:18px;text-transform:uppercase;letter-spacing:.02em;color:var(--cx-steel)}

/* chrome — exit, title, controls; all fade */
.comic-exit,.comic-title-chip,.comic-chrome{position:fixed;z-index:20;transition:opacity .5s ease}
.comic-exit{top:clamp(14px,3vh,26px);left:clamp(14px,3vw,28px);font-family:var(--cx-label);font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-dim)}
.comic-exit:hover{color:var(--cx-steel)}
.comic-title-chip{top:clamp(14px,3vh,26px);right:clamp(14px,3vw,28px);font-family:var(--cx-label);font-weight:700;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-dim)}
.comic-chrome{bottom:clamp(16px,4vh,34px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px}
.comic-prev,.comic-next{background:rgba(10,16,22,.7);border:1px solid rgba(192,192,192,.3);color:var(--cx-text);
  font-size:22px;line-height:1;width:44px;height:44px;cursor:pointer;transition:border-color .15s,background .15s}
.comic-prev:hover,.comic-next:hover{border-color:var(--cx-steel);background:rgba(18,26,38,.9)}
.comic-counter{font-family:var(--cx-label);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--cx-dim)}
body.chrome-hidden .comic-exit,body.chrome-hidden .comic-title-chip,body.chrome-hidden .comic-chrome{opacity:0;pointer-events:none}

.comic-noflip-note{display:none}
body.comic-noflip{overflow:auto;display:block}
body.comic-noflip .comic-book,body.comic-noflip .comic-chrome{display:none}
body.comic-noflip .comic-noflip-note{display:block;text-align:center;margin-top:30vh;color:var(--cx-dim);font-family:var(--cx-label)}
body.comic-noflip .comic-noflip-note a{color:var(--cx-steel);border-bottom:1px solid}