:root{
  --void:#0A0908;
  --pitch:#050505;
  --stone:#221F1B;
  --edge:#332E27;
  --bone:#E6E0D4;
  --dim:#8C8478;
  --gold:#C9A227;
  --ember:#B8813A;
  --cold:#7E97B8;
  --frost:#A9C0D8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--void);color:var(--dim);
  font-family:"Barlow",system-ui,sans-serif;font-weight:300;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--bone);text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.shell{max-width:960px;margin:0 auto;padding:0 26px}
.wide{max-width:1180px;margin:0 auto;padding:0 26px}
.narrow{max-width:62ch}

/* ---------- top bar ---------- */
.bar{
  padding:22px 0;border-bottom:1px solid var(--edge);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
}
.bar .home{font-family:"Marcellus",Georgia,serif;letter-spacing:.16em;font-size:14px;text-transform:none;color:var(--bone)}
.bar .home:hover{color:var(--gold)}
.bar nav a{color:var(--dim);margin-left:26px}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--bone)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:"Barlow",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ember);
  margin:0 0 14px;
}
h1{
  font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:clamp(38px,7vw,68px);color:var(--bone);
  margin:0 0 10px;line-height:1.05;letter-spacing:.01em;
}
h2{
  font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:clamp(23px,3.4vw,30px);color:var(--bone);
  margin:0 0 18px;line-height:1.25;
}
p{margin:0 0 17px}
p:last-child{margin-bottom:0}
strong{color:var(--bone);font-weight:400}

.sub{
  font-family:"Barlow",sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin:0;
}

/* ---------- character page ---------- */
.head{padding:58px 0 34px}
.plate{margin:0 0 6px;position:relative}
.plate img{width:100%;filter:saturate(.88) contrast(1.03)}
.plate .cap{
  margin:11px 0 0;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#6A6459;
}
.zoomable{cursor:zoom-in}

.block{padding:52px 0}
.block .label{
  font-family:"Barlow",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;color:#6A6459;margin:0 0 22px;
  padding:0 0 12px;border-bottom:1px solid var(--edge);
}
.voice p{color:#A79E90;font-size:18.5px;line-height:1.74}
.voice p:first-of-type{
  font-family:"Marcellus",Georgia,serif;color:var(--bone);
  font-size:clamp(21px,3vw,26px);line-height:1.5;margin-bottom:22px;
}
.voice strong{font-family:"Marcellus",serif;color:var(--bone)}
.sign{
  margin:30px 0 0;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#645E54;
}
.tale p{color:#9B9284}
.tale p.beat{
  font-family:"Marcellus",Georgia,serif;color:var(--bone);
  font-size:19px;line-height:1.6;margin:26px 0;
}

.sheetwrap{padding:20px 0 60px}
.sheetwrap .hint{
  margin:12px 0 0;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#645E54;
}

/* ---------- index grid ---------- */
.intro{padding:58px 0 10px}
.intro p{max-width:56ch;font-size:19px;color:#A79E90}
.grid{
  padding:36px 0 20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;
}
.card{display:block;background:var(--pitch);border:1px solid var(--edge);transition:border-color .2s ease}
.card:hover{border-color:#5A5148}
.card img{width:100%;aspect-ratio:9/7;object-fit:cover;filter:saturate(.86) brightness(.92);transition:filter .25s ease}
.card:hover img{filter:saturate(1) brightness(1)}
.card .txt{padding:18px 20px 22px}
.card .txt b{
  display:block;font-family:"Marcellus",serif;font-weight:400;
  font-size:24px;color:var(--bone);margin:0 0 4px;
}
.card .txt span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.card .txt em{display:block;font-style:normal;margin:10px 0 0;font-size:15px;color:#8C8478;line-height:1.6}

.pending{
  border:1px dashed var(--edge);background:transparent;padding:26px 22px;
  display:flex;flex-direction:column;justify-content:center;min-height:180px;
}
.pending b{font-family:"Marcellus",serif;font-weight:400;font-size:20px;color:#645E54;display:block;margin:0 0 6px}
.pending span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#4E4941}

/* ---------- pager ---------- */
.pager{
  margin:0;padding:30px 0 0;border-top:1px solid var(--edge);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"Marcellus",serif;font-size:16px;
}
.pager a{border-bottom:1px solid var(--edge);padding:0 0 3px}
.pager a:hover{color:var(--gold);border-bottom-color:var(--gold)}

footer{
  margin:56px 0 0;padding:26px 0 64px;border-top:1px solid var(--edge);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#645E54;
}
footer a{color:#8C8478;border-bottom:1px solid #3A352E}
footer a:hover{color:var(--bone)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(5,5,5,.97);
}
.lb.on{display:block}
.lb .pane{
  position:absolute;inset:0;overflow:auto;
  -webkit-overflow-scrolling:touch;touch-action:pinch-zoom;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.lb img{
  max-width:100%;max-height:calc(100vh - 32px);width:auto;height:auto;
  cursor:zoom-in;transition:none;
}
.lb.zoom .pane{display:block;padding:0}
.lb.zoom img{max-width:none;max-height:none;width:auto;cursor:zoom-out}
.lb .shut{
  position:fixed;top:14px;right:16px;z-index:92;
  width:44px;height:44px;border:1px solid var(--edge);background:rgba(10,9,8,.86);
  color:var(--bone);font-size:20px;line-height:1;cursor:pointer;border-radius:50%;
}
.lb .shut:hover{border-color:var(--gold);color:var(--gold)}
.lb .tip{
  position:fixed;bottom:16px;left:0;right:0;text-align:center;z-index:92;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#645E54;
  pointer-events:none;
}

@media (max-width:600px){
  body{font-size:16px}
  .head{padding:40px 0 26px}
  .block{padding:40px 0}
  .voice p{font-size:17.5px}
  .bar nav a{margin-left:0;margin-right:22px}
}