/* ============================================================================
   The Alien Archive — reading pages, built on the heav3n.org tokens.
   Long-form serif, one column, generous measure. The infoboxes the wiki emits
   are restyled rather than replaced so the entries keep their structure.
   ============================================================================ */

body.arc{background:var(--void)}
body.arc::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--indigo) 60%,transparent),transparent 62%)}

.arc-wrap{max-width:940px;margin:0 auto;padding:clamp(88px,13vh,140px) var(--gut) clamp(60px,9vh,110px)}
.arc-wrap.wide{max-width:1180px}

.crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:0 0 1.5em}
.crumb a{color:color-mix(in srgb,var(--signal) 85%,var(--bone));text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{opacity:.4}

.arc-title{font-family:var(--display);font-weight:200;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.1rem,5.4vw,3.6rem);color:var(--halo);margin:0 0 .5em;text-wrap:balance}

.arc-head{margin-bottom:clamp(30px,5vh,58px)}
.arc-head .tel{margin:0 0 1em}

/* ── the index ────────────────────────────────────────────────────────────── */
.arc-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:1.8em 0 1.2em}
#arc-find{flex:1 1 280px;max-width:420px;font-family:var(--body);font-size:1rem;color:var(--bone);
  background:color-mix(in srgb,var(--deep) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--bone) 16%,transparent);border-radius:999px;padding:.8em 1.2em}
#arc-find:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
#arc-find:focus{border-color:var(--signal);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 30%,transparent)}
#arc-find::placeholder{color:color-mix(in srgb,var(--dim) 92%,transparent)}

.cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:.6em}
.cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-decoration:none;
  color:var(--dim);border:1px solid color-mix(in srgb,var(--bone) 13%,transparent);
  border-radius:999px;padding:.5em .9em;transition:.3s}
.cat i{font-style:normal;opacity:.55;margin-left:.4em}
.cat:hover{color:var(--halo);border-color:color-mix(in srgb,var(--signal) 45%,transparent)}
.cat.on{color:var(--void);background:var(--signal);border-color:var(--signal)}
.cat.on i{opacity:.7}

.arc-list{list-style:none;margin:2.2em 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px}
.arc-list a{display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:inherit;
  padding:16px;border-radius:4px;transition:background .35s var(--ease),transform .35s var(--ease)}
.arc-list a:hover,.arc-list a:focus-visible{background:color-mix(in srgb,var(--ion) 13%,transparent)}
.arc-list .thumb{flex:0 0 68px;width:68px;height:88px;overflow:hidden;border-radius:3px;background:var(--deep)}
.arc-list .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
/* entries with no illustration keep the slot, so every title starts on the
   same line; the empty slot carries a quiet mark rather than a blank box */
.arc-list .thumb-none{background:
  linear-gradient(160deg,color-mix(in srgb,var(--indigo) 46%,transparent),transparent 74%);
  position:relative}
.arc-list .thumb-none::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--signal) 40%,transparent)}
.arc-list a:hover .thumb img{filter:none}
.arc-list .meat{min-width:0}
.arc-list b{display:block;font-family:var(--display);font-weight:300;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--halo);margin-bottom:.3em;line-height:1.2}
.arc-list em{display:block;font-style:normal;font-size:.88rem;line-height:1.5;color:var(--dim)}
.arc-empty{margin-top:2.4em;color:var(--dim)}

/* ── one entry ────────────────────────────────────────────────────────────── */
.arc-body{font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.78}
.arc-body > p,.arc-body > ul,.arc-body > ol,.arc-body > blockquote{max-width:70ch}
.arc-body > *:first-child{margin-top:0}
.arc-body p{margin:0 0 1.25em}
.arc-body h2,.arc-body h3,.arc-body h4{font-family:var(--display);font-weight:300;
  letter-spacing:-.01em;color:var(--halo);line-height:1.15;margin:2em 0 .6em}
.arc-body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);padding-bottom:.35em;
  border-bottom:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.arc-body h3{font-size:clamp(1.12rem,1.8vw,1.35rem)}
.arc-body h4{font-size:1.02rem;color:var(--bone)}
.arc-body a.x{color:var(--halo);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--halo) 35%,transparent);transition:.3s}
.arc-body a.x:hover{color:var(--signal);border-bottom-color:var(--signal)}
.arc-body a.ext{color:var(--signal);text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb,var(--signal) 50%,transparent)}
.arc-body ul,.arc-body ol{margin:0 0 1.3em;padding-left:1.35em}
.arc-body li{margin-bottom:.45em}
.arc-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.3em;
  border-left:2px solid color-mix(in srgb,var(--ion) 65%,transparent);
  font-style:italic;color:color-mix(in srgb,var(--bone) 88%,transparent)}
.arc-body img{border-radius:4px;height:auto}
.arc-body figure{margin:1.8em 0}
.arc-body hr{border:0;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent);margin:2.4em 0}
.arc-body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.94rem}
.arc-body th,.arc-body td{text-align:left;padding:.6em .8em;
  border-bottom:1px solid color-mix(in srgb,var(--bone) 11%,transparent);vertical-align:top}
.arc-body th{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.arc-body code,.arc-body pre{font-family:var(--mono);font-size:.88em}
.arc-body sup a{color:var(--signal);text-decoration:none;font-size:.78em}
.arc-body .reference,.arc-body .references{font-size:.9rem;color:var(--dim)}
.arc-body .references{margin-top:2em;padding-top:1em;
  border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.arc-body .references li{margin-bottom:.6em}

/* the wiki's own infobox, retuned */
.arc-body .aa-infobox{float:right;width:min(286px,34%);margin:.3em 0 1.4em 2em;padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--ion) 34%,transparent);border-radius:10px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--indigo) 52%,transparent),transparent 78%);
  font-size:.9rem;line-height:1.55}
.arc-body .aa-ib-title{font-family:var(--display);font-weight:300;font-size:1.05rem;
  color:var(--halo);margin-bottom:.7em;letter-spacing:-.01em}
.arc-body .aa-ib-row{display:grid;grid-template-columns:82px 1fr;gap:10px;padding:.55em 0;
  border-top:1px solid color-mix(in srgb,var(--bone) 11%,transparent)}
.arc-body .aa-ib-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);padding-top:.25em}
.arc-body .aa-ib-v{color:color-mix(in srgb,var(--bone) 92%,transparent)}
.arc-body .aa-ib-gnostic .aa-ib-k{color:color-mix(in srgb,var(--signal) 80%,transparent)}
.arc-body .aa-ib-img img{width:100%;border-radius:7px;margin-bottom:.5em}
.arc-body .aa-ib-cap{font-size:.78rem;color:var(--dim);text-align:center;margin-bottom:.7em}
.arc-body .aa-quote{border-left:2px solid var(--halo);padding:.3em 1.1em;margin:1.5em 0;font-style:italic}
@media (max-width:720px){
  .arc-body .aa-infobox{float:none;width:auto;margin:0 0 1.6em}
}

/* nearby */
.arc-near{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:3.4em 0 2em}
@media (max-width:620px){.arc-near{grid-template-columns:1fr}}
.near{display:grid;gap:.3em;text-decoration:none;padding:1.1em 1.3em;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--bone) 13%,transparent);transition:.35s var(--ease)}
.near:hover{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 8%,transparent)}
.near span{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.near b{font-family:var(--display);font-weight:300;font-size:1rem;color:var(--halo);letter-spacing:-.01em}
.near.next{text-align:right}
.arc-foot{margin-top:2em}