/* Borrowed Worlds v2 — one voice (Cormorant), one sky (purple starfield), darker than pretty. */
:root{
  --void:#05050C; --ink:#08070F; --bone:#ECE6EF; --muted:#B5AEBF; --dim:#8D8A9E;
  --violet:#9C8CFF; --amber:#E0A458; --amber-hi:#F2C483; --amber-ink:#170F05;
  --crimson:#B3262F; --frost:#CFE3FF; --cyan:#7FE6FF;
  --title:"Cormorant Garamond",Georgia,serif;
  --body:"EB Garamond",Garamond,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--bone);font-family:var(--body);font-size:19px;line-height:1.6;overflow-x:hidden}
a{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px}
h1,h2,h3{font-family:var(--title);font-weight:300;margin:0;line-height:1.05;text-wrap:balance}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,5vw,64px)}

.mast{position:absolute;top:0;left:0;right:0;z-index:5}
.mast-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:22px}
.mast .name{font-family:"Cinzel Decorative",Georgia,serif;font-size:20px;letter-spacing:.04em;color:var(--bone);text-decoration:none}
.mast nav{display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.mast nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.mast nav a:hover,.mast nav a[aria-current="page"]{color:var(--bone)}
.mast nav a[aria-current="page"]{border-bottom:1px solid var(--violet)}

/* the sky */
.sky{position:relative;height:80svh;min-height:520px;max-height:880px;overflow:hidden;display:grid;place-items:center;text-align:center;
  background:
   radial-gradient(ellipse 60% 55% at 28% 38%,rgba(78,64,170,.55),transparent 70%),
   radial-gradient(ellipse 50% 45% at 72% 58%,rgba(140,36,84,.36),transparent 70%),
   radial-gradient(ellipse 40% 30% at 55% 30%,rgba(120,100,220,.16),transparent 70%),
   linear-gradient(180deg,#05060f 0%,#0a0b1f 55%,#0d0812 85%,var(--void) 100%)}
.sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,var(--void));pointer-events:none}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sky-in{position:relative;z-index:2;padding:110px 16px 40px}
.sky h1{display:flex;flex-direction:column;align-items:center;gap:.12em;font-weight:300;text-transform:uppercase;color:#F1EDF8;
  font-size:clamp(36px,7vw,92px);letter-spacing:.32em;line-height:1;text-shadow:0 0 34px rgba(160,140,255,.45),0 2px 3px rgba(0,0,0,.9)}
.sky h1 span{padding-left:.32em}
.sky .tag{margin:28px 0 0;font-family:var(--title);font-style:italic;font-weight:300;font-size:clamp(20px,2.4vw,27px);color:#D9D2E6}
.sky .free{margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.down{position:absolute;bottom:26px;left:50%;z-index:3;width:28px;height:44px;margin-left:-14px;border:1px solid rgba(236,230,239,.3);border-radius:14px}
.down span{position:absolute;left:50%;top:9px;width:2px;height:8px;margin-left:-1px;background:var(--bone);border-radius:1px;animation:sink 2.2s ease-in-out infinite}
@keyframes sink{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@media (max-width:560px){.sky h1{letter-spacing:.2em}.sky h1 span{padding-left:.2em}.sky-in{padding-top:150px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:14px 22px;border-radius:2px;background:var(--amber);color:var(--amber-ink);border:1px solid var(--amber);text-align:center}
.btn:hover{background:var(--amber-hi);border-color:var(--amber-hi);color:var(--amber-ink)}
.btn.ghost{background:transparent;color:var(--bone);border-color:rgba(236,230,239,.32)}
.btn.ghost:hover{border-color:var(--bone)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* featured book: the crimson room */
.featured{position:relative;padding-block:clamp(16px,3vw,40px) clamp(40px,7vw,90px);
  background:radial-gradient(ellipse 50% 70% at 22% 50%,rgba(179,38,47,.22),transparent 70%),var(--void)}
.feat-in{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:760px){.feat-in{grid-template-columns:1fr}.feat-cover{max-width:260px}}
.feat-cover{display:block;border-radius:2px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(179,38,47,.55),0 0 0 1px rgba(179,38,47,.5);transition:transform .35s ease,box-shadow .35s ease}
.feat-cover img{display:block;width:100%;height:auto}
.feat-cover:hover{transform:translateY(-6px);box-shadow:0 40px 90px -20px rgba(179,38,47,.75),0 0 0 1px rgba(220,70,80,.8)}
.featured .label{color:#E07A80}
.featured h2{font-size:clamp(46px,7vw,84px);font-weight:300;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.featured .series{margin:6px 0 0;font-family:var(--title);font-style:italic;font-size:24px;color:var(--muted)}
.featured .hook{margin:22px 0 0;font-size:21px;max-width:34em}
.featured .meta{margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* Star Wars shelf */
.world{position:relative}
.sw{padding-block:clamp(40px,6vw,80px)}
.world-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-bottom:14px;margin-bottom:34px;border-bottom:1px solid rgba(156,140,255,.25)}
.world-head h2{font-size:clamp(30px,4vw,46px);letter-spacing:.14em;text-transform:uppercase}
.world-head p{margin:0;font-family:var(--title);font-style:italic;font-size:21px;color:var(--muted)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:40px 24px}
@media (max-width:420px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}}
.tile{display:flex;flex-direction:column;gap:8px;color:var(--bone)}
.tile .t{font-family:var(--title);font-size:23px;font-weight:400;line-height:1.15;margin-top:2px}
.tile .sub{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tile .blurb{font-size:15px;line-height:1.5;color:var(--muted);margin:0}
.st{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px}
.st-soon{color:#B6ACFF} .st-rebuild{color:var(--dim)}
.cv{aspect-ratio:2/3;width:100%;position:relative;overflow:hidden;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12%}
.cv .cv-t{font-family:var(--title);font-weight:400;font-size:clamp(20px,2vw,24px);letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.cv .cv-s{font-family:var(--title);font-style:italic;font-size:16px;color:var(--muted)}
.cv.frost{background:radial-gradient(ellipse 80% 45% at 50% 100%,rgba(207,227,255,.22),transparent 70%),radial-gradient(1px 1px at 22% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 74% 32%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 40% 72%,#e6f0ff 50%,transparent 51%),linear-gradient(180deg,#07081a,#0f1428);
  box-shadow:0 14px 34px -14px #000,inset 0 0 0 1px rgba(207,227,255,.2)}
.cv.frost .cv-t{color:#EEF5FF;text-shadow:0 0 16px rgba(207,227,255,.4)}
.cv.ash{background:linear-gradient(180deg,#0b0b11,#141419);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:.55}
.cv.ash .cv-t{color:#9a98a6}

/* Tron: its own band, quiet, cool, no grid floor */
.tron{background:#020307;border-top:1px solid rgba(127,230,255,.18);border-bottom:1px solid rgba(127,230,255,.18);padding-block:clamp(40px,6vw,72px)}
.tron-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
.tron-mark{width:clamp(90px,12vw,140px);aspect-ratio:1;position:relative;border:1px solid rgba(127,230,255,.45);box-shadow:0 0 30px rgba(127,230,255,.12),inset 0 0 30px rgba(127,230,255,.08)}
.tron-mark::before,.tron-mark::after{content:"";position:absolute;background:rgba(127,230,255,.5)}
.tron-mark::before{left:50%;top:14%;bottom:14%;width:1px}
.tron-mark::after{top:50%;left:14%;right:14%;height:1px}
.tron-mark span{position:absolute;left:18%;right:18%;bottom:22%;height:2px;background:linear-gradient(90deg,transparent,#FF9A3C);box-shadow:0 0 10px #FF9A3C}
.tron .label{color:var(--cyan)}
.tron h2{font-size:clamp(30px,4.4vw,50px);letter-spacing:.16em;text-transform:uppercase;margin-top:10px;color:#EAFBFF;text-shadow:0 0 22px rgba(127,230,255,.35)}
.tron p{margin:10px 0 0;font-family:var(--title);font-style:italic;font-size:21px;color:#A9C9D2}

/* porch + footer */
.porch{padding-block:64px 10px}
.porch .lede{max-width:44em;color:var(--muted);margin:0 0 26px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid rgba(156,140,255,.22);background:rgba(16,14,32,.7);color:var(--bone);text-decoration:none}
.card:hover{border-color:var(--violet)}
.card h3{font-size:30px;font-weight:400;letter-spacing:.04em}
.card p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
.card .go{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.card .label{color:#B6ACFF}
footer{padding-block:64px 48px;font-size:15px;color:var(--dim)}
footer .wrap{border-top:1px solid rgba(156,140,255,.2);padding-top:22px}
.disclaim{margin:0 0 14px;max-width:70ch;font-size:14px;line-height:1.55}
.foot-row{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.down span{animation:none}.feat-cover{transition:none}}
/* real covers on the shelf */
.cv.has-img{padding:0}
.cv.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv.has-img.frost{box-shadow:0 14px 34px -14px #000,0 0 0 1px rgba(170,210,255,.35)}
a.tile:hover .cv.has-img.frost{transform:translateY(-6px);box-shadow:0 22px 50px -14px rgba(150,200,255,.5),0 0 0 1px rgba(190,225,255,.8)}
a.tile .cv{transition:transform .3s ease,box-shadow .3s ease}
.tile.off .cv.has-img{filter:saturate(.75) brightness(.8)}
.st-read{color:#A9CFFF}
a.tile{text-decoration:none}
.cv.has-img img{object-position:50% 0%}

/* Tron: Erasure, live in the band (Oct 25 2026) */
.tron-cover{display:block;width:clamp(120px,16vw,190px);box-shadow:0 0 34px rgba(123,108,255,.28),0 0 0 1px rgba(156,140,255,.45);transition:transform .35s ease}
.tron-cover img{display:block;width:100%;height:auto}
.tron-cover:hover{transform:translateY(-4px)}
.tron .btn.tron-btn{background:#7b6cff;border-color:#7b6cff;color:#05050C}
.tron .btn.tron-btn:hover{background:#b49bff;border-color:#b49bff}
.tron p.tron-meta{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:18px}
@media (max-width:560px){.tron-in{grid-template-columns:1fr}.tron-cover{width:150px}}
@media (prefers-reduced-motion:reduce){.tron-cover{transition:none}}