/* ============================================================
   Bonemark Codex. Tallow Games.

   Three sections that share one chrome and one search box:
     /manual     the 29 chapters, plus the catalogue of every
                 thing in the game, each with its own picture
     /modding    the data-mod guide, availability labels intact
     /glossary   one headword per entry, cross-linked both ways

   Rides on the tokens in styles.css and adds nothing to them.
   The reading column is wider here than on the front page: a
   reference book is scanned, not read start to finish.
   ============================================================ */

/* ---------------- frame ---------------- */
.cx{width:min(1220px,92vw);margin:0 auto;padding:0 0 5rem;}
.cx a{color:var(--gold);text-decoration:none;}
.cx a:hover{color:var(--parch);}

.cxhead{padding:2.4rem 0 1.2rem;border-bottom:2px solid var(--bevel);}
.cxhead .backlink{display:inline-block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.1rem;}
.cxhead .backlink:hover{color:var(--gold);}
.cxhead h1{font-family:var(--mono);font-size:clamp(1.5rem,3.2vw,2.2rem);color:var(--gold);
  text-transform:uppercase;letter-spacing:.05em;text-shadow:3px 3px 0 #000;margin:0 0 .5rem;}
.cxhead .sub{color:var(--ink-soft);font-family:var(--serif);font-size:1.12rem;
  max-width:44em;margin:0;}

/* ---------------- section tabs + omnibox ---------------- */
.cxbar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:.6rem;
  align-items:center;padding:.7rem 0;margin-bottom:1.4rem;
  background:linear-gradient(180deg,var(--bg) 72%,rgba(14,10,6,0));}
.cxtabs{display:flex;gap:.35rem;}
.cxtabs a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .8rem .44rem;border:2px solid var(--bevel);background:var(--stone);
  box-shadow:0 0 0 2px var(--edge);color:var(--ink-soft);}
.cxtabs a:hover{border-color:var(--brass);color:var(--ink);}
.cxtabs a.on{color:var(--gold);border-color:var(--brass);background:var(--panel);}

.cxsearch{position:relative;flex:1 1 260px;min-width:200px;}
.cxsearch input{width:100%;font-family:var(--mono);font-size:.82rem;color:var(--ink);
  background:var(--panel-deep);border:2px solid var(--bevel);box-shadow:0 0 0 2px var(--edge);
  padding:.52rem .8rem .46rem 2.1rem;outline:none;}
.cxsearch input::placeholder{color:#6d6250;}
.cxsearch input:focus{border-color:var(--brass);}
.cxsearch .mag{position:absolute;left:.62rem;top:50%;transform:translateY(-50%);
  width:14px;height:14px;opacity:.55;pointer-events:none;}
.cxsearch kbd{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:#6d6250;
  border:1px solid var(--bevel);padding:.12rem .3rem;pointer-events:none;}
.cxsearch input:focus~kbd,.cxsearch input:not(:placeholder-shown)~kbd{display:none;}

/* results overlay */
.cxres{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:70;display:none;
  max-height:min(66vh,540px);overflow-y:auto;
  background:var(--panel-deep);border:2px solid var(--brass);box-shadow:0 0 0 2px var(--edge),var(--shadow);}
.cxres.open{display:block;}
.cxres .rgroup{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);padding:.6rem .8rem .3rem;border-top:1px solid var(--bevel);}
.cxres .rgroup:first-child{border-top:none;}
.cxres a.r{display:flex;gap:.6rem;align-items:center;padding:.4rem .8rem;color:var(--ink);
  border-left:3px solid transparent;}
.cxres a.r:hover,.cxres a.r.sel{background:var(--stone);border-left-color:var(--gold);color:var(--parch);}
.cxres a.r img{flex:none;width:34px;height:34px;object-fit:cover;background:#0a0703;
  border:1px solid var(--bevel);}
.cxres a.r .rt{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;}
.cxres a.r .rd{font-family:var(--serif);font-size:.86rem;color:var(--ink-soft);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cxres .rnone{padding:1rem .8rem;color:var(--ink-soft);font-family:var(--serif);}
.cxres mark{background:none;color:var(--gold);}

/* ---------------- two column body ---------------- */
.cxbody{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start;}
@media (min-width:1000px){.cxbody{grid-template-columns:250px 1fr;gap:2.2rem;}}

.cxrail{display:none;}
@media (min-width:1000px){
  .cxrail{display:block;position:sticky;top:4.4rem;max-height:calc(100vh - 6rem);
    overflow-y:auto;padding-right:.5rem;}
}
.cxrail .rlab{font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-deep);margin:1.1rem 0 .45rem;}
.cxrail .rlab:first-child{margin-top:0;}
.cxrail a{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--ink-soft);padding:.24rem 0 .24rem .7rem;border-left:2px solid var(--bevel);}
.cxrail a:hover{color:var(--ink);border-left-color:var(--brass);}
.cxrail a.on{color:var(--gold);border-left-color:var(--gold);}
.cxrail a .n{color:var(--gold-deep);margin-right:.4rem;}

/* mobile: the rail becomes a drawer reusing the site's toggle */
.cxdrawer{position:fixed;top:0;right:0;z-index:95;height:100%;width:min(330px,86vw);
  background:var(--panel-deep);border-left:3px solid var(--brass);overflow-y:auto;
  padding:1rem 1.1rem 3rem;transform:translateX(102%);transition:transform .18s;}
.cxdrawer.open{transform:none;}
.cxscrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);display:none;}
.cxscrim.open{display:block;}
.cxdrawer .dhead{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;}
.cxdrawer .dhead button{background:none;border:none;color:var(--ink-soft);font-size:1rem;cursor:pointer;}
@media (min-width:1000px){.cxtoggle{display:none;}}
.cxtoggle{position:fixed;bottom:1rem;right:1rem;z-index:60;width:46px;height:46px;padding:0;
  background:var(--panel);border:2px solid var(--brass);box-shadow:0 0 0 2px var(--edge);cursor:pointer;}
.cxtoggle svg{width:24px;height:24px;}

/* ---------------- prose ---------------- */
.cxmain{min-width:0;}
.cxsec{scroll-margin-top:4.6rem;margin-bottom:2.6rem;}
.cxsec>h2{font-family:var(--mono);font-size:clamp(1.2rem,2.1vw,1.6rem);color:var(--gold);
  text-transform:uppercase;letter-spacing:.04em;text-shadow:3px 3px 0 #000;margin:0 0 .2rem;}
.cxsec>.chn{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;color:var(--gold-deep);
  text-transform:uppercase;margin-bottom:.7rem;}
.cxart{margin-bottom:1.4rem;}
.cxart h3{font-family:var(--mono);font-size:.86rem;color:var(--teal);text-transform:uppercase;
  letter-spacing:.06em;text-shadow:2px 2px 0 #000;margin:1.5rem 0 .5rem;}
.cxart p{font-family:var(--serif);font-size:1.14rem;line-height:1.66;color:var(--read);
  max-width:40em;margin:0 0 .8rem;}
.cxart p.lead{font-size:1.24rem;}
.cxart img.banner{display:block;width:100%;max-width:900px;height:auto;
  border:2px solid var(--bevel);box-shadow:0 0 0 2px var(--edge);margin:0 0 1.2rem;
  image-rendering:auto;}

/* Every chapter opens on a painting. They are all cut to one shape, because a
   book whose plates change proportion every chapter reads as a scrapbook. */
.cxsec>img.chbanner{display:block;width:100%;max-width:920px;height:auto;
  aspect-ratio:2.5/1;object-fit:cover;
  border:2px solid var(--brass);box-shadow:0 0 0 2px var(--edge),var(--shadow);
  margin:.2rem 0 1.6rem;image-rendering:auto;background:#0a0703;}

/* stat tables */
.cxtab{width:100%;border-collapse:collapse;margin:.4rem 0 1.2rem;font-family:var(--mono);font-size:.76rem;}
.cxtab caption{text-align:left;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);padding-bottom:.35rem;}
.cxtab th,.cxtab td{border:1px solid var(--bevel);padding:.36rem .6rem;vertical-align:top;text-align:left;}
.cxtab th{color:var(--ink-soft);font-weight:400;width:34%;background:rgba(0,0,0,.22);}
.cxtab td{color:var(--read);font-family:var(--serif);font-size:.98rem;}
.cxtabwrap{overflow-x:auto;}

/* ---------------- catalogue ---------------- */
.cxfilters{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem;}
.cxfilters button{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem .26rem;border:2px solid var(--bevel);background:var(--stone);
  box-shadow:0 0 0 1px var(--edge);color:var(--ink-soft);cursor:pointer;}
.cxfilters button:hover{border-color:var(--brass);color:var(--ink);}
.cxfilters button.on{color:var(--gold);border-color:var(--gold-deep);background:var(--panel);}
.cxfilters button .c{color:var(--gold-deep);margin-left:.35rem;}
/* .cxsec>p sets the serif for prose; this is a count, so it has to outrank it */
.cxsec>p.cxcount,.cxcount{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--ink-soft);margin:0 0 1rem;}

.cxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:.8rem;}
@media (min-width:700px){.cxgrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));}}
.cxcard{display:block;border:2px solid var(--bevel);background:var(--stone);
  box-shadow:0 0 0 2px var(--edge);padding:0 0 .6rem;transition:transform .1s,border-color .1s;}
.cxcard:hover{transform:translateY(-2px);border-color:var(--brass);}
.cxcard .shot{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0a0703;
  border-bottom:2px solid var(--bevel);}
.cxcard .shot img{width:100%;height:100%;object-fit:cover;display:block;}
/* Chrome drops image-rendering:pixelated the moment object-fit or padding is
   involved, so pixel art gets no object-fit and no padding of its own: it
   sits at a fixed size inside a centring box and stays sharp. */
.cxcard .shot.pixbox{display:flex;align-items:center;justify-content:center;}
.cxcard .shot.pixbox img{width:88px;height:88px;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;}
.cxcard .kb{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(8,5,2,.82);
  padding:.18rem .38rem .14rem;}
.cxcard .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--gold);
  padding:.55rem .55rem 0;line-height:1.3;}
.cxcard .s{font-family:var(--serif);font-size:.88rem;color:var(--ink-soft);padding:.15rem .55rem 0;
  line-height:1.35;}

/* one entry */
.cxentry{border:3px solid var(--brass);background:linear-gradient(180deg,var(--panel) 0%,var(--panel-deep) 100%);
  box-shadow:0 0 0 3px var(--edge),var(--shadow);padding:1.5rem 1.5rem 1.3rem;}
.cxentry .crumb{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.5rem;}
.cxentry h2{font-family:var(--mono);font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--gold);
  text-transform:uppercase;letter-spacing:.04em;text-shadow:3px 3px 0 #000;margin:0 0 .8rem;}
.cxentry .plates{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.1rem;}
.cxentry .plates img{width:min(268px,44vw);height:auto;border:2px solid var(--bevel);
  box-shadow:0 0 0 2px var(--edge);background:#0a0703;}
/* same reason: the box does the padding, the image only scales */
.cxentry .plates .pixbox{display:flex;align-items:center;justify-content:center;
  width:176px;height:176px;background:#0a0703;
  border:2px solid var(--bevel);box-shadow:0 0 0 2px var(--edge);}
.cxentry .plates .pixbox img{width:128px;height:128px;border:none;box-shadow:none;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;}
.cxentry p{font-family:var(--serif);font-size:1.1rem;line-height:1.6;color:var(--read);max-width:42em;}
.cxentry .backcat{display:inline-block;margin-top:1.2rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;}

/* availability, said out loud rather than reduced to a colour */
.avail{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.22rem .5rem .18rem;border:2px solid currentColor;
  background:rgba(0,0,0,.28);margin:0 .3rem .3rem 0;}
.avail.live{color:var(--teal);}
.avail.part{color:var(--gold);}
.avail.no{color:var(--coral);}

/* ---------------- glossary ---------------- */
.cxaz{display:flex;flex-wrap:wrap;gap:.22rem;margin-bottom:1.3rem;}
.cxaz a{font-family:var(--mono);font-size:.68rem;width:1.7rem;text-align:center;
  padding:.24rem 0 .2rem;border:1px solid var(--bevel);color:var(--ink-soft);}
.cxaz a:hover{border-color:var(--brass);color:var(--gold);}
.cxaz a.dead{opacity:.28;pointer-events:none;}
.cxterm{border-left:2px solid var(--bevel);padding:.1rem 0 .1rem 1rem;margin-bottom:1.5rem;
  scroll-margin-top:5rem;}
.cxterm:target,.cxterm.hit{border-left-color:var(--gold);}
.cxterm h3{font-family:var(--mono);font-size:1rem;color:var(--gold);text-transform:uppercase;
  letter-spacing:.04em;text-shadow:2px 2px 0 #000;margin:0 0 .35rem;}
.cxterm .reading{margin-bottom:.6rem;}
.cxterm .reading p{font-family:var(--serif);font-size:1.08rem;line-height:1.6;color:var(--read);
  max-width:42em;margin:0;}
.cxterm .src{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:.2rem;}
.cxterm .see{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);margin-top:.4rem;}
.cxterm .see a{margin-right:.5rem;}
.cxletter{font-family:var(--mono);font-size:1.5rem;color:var(--brass-hi);letter-spacing:.1em;
  border-bottom:2px solid var(--bevel);padding-bottom:.2rem;margin:2rem 0 1rem;
  scroll-margin-top:5rem;}

/* ---------------- modding ---------------- */
.cxnote{border:2px solid var(--gold-deep);background:rgba(210,163,95,.07);
  box-shadow:0 0 0 2px var(--edge);padding:1rem 1.2rem;margin-bottom:1.6rem;}
.cxnote p{font-family:var(--serif);font-size:1.06rem;line-height:1.6;color:var(--read);margin:0;max-width:44em;}
/* prose anywhere in a section reads in the serif, not the pixel face: the
   pixel font is for structure and labels, never for a paragraph */
.cxsec>p{font-family:var(--serif);font-size:1.12rem;line-height:1.64;color:var(--read);
  max-width:42em;margin:0 0 .9rem;}
.cxsec ul,.cxsec ol{font-family:var(--serif);font-size:1.1rem;line-height:1.6;color:var(--read);
  max-width:42em;padding-left:1.3rem;margin:0 0 1rem;}
.cxsec li{margin-bottom:.35rem;}
.cxsec code{font-family:var(--mono);font-size:.86em;color:var(--parch);
  background:rgba(0,0,0,.35);border:1px solid var(--bevel);padding:.04rem .28rem;}
.cxpre{font-family:var(--mono);font-size:.76rem;line-height:1.5;color:var(--parch);
  background:#0a0703;border:2px solid var(--bevel);box-shadow:0 0 0 2px var(--edge);
  padding:.8rem 1rem;overflow-x:auto;margin:0 0 1.1rem;white-space:pre;}
.cxpre code{background:none;border:none;padding:0;font-size:1em;}
.cxsec h3{font-family:var(--mono);font-size:.88rem;color:var(--teal);text-transform:uppercase;
  letter-spacing:.06em;text-shadow:2px 2px 0 #000;margin:1.6rem 0 .6rem;}
.cxmd{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-family:var(--mono);font-size:.74rem;}
.cxmd th,.cxmd td{border:1px solid var(--bevel);padding:.4rem .6rem;text-align:left;vertical-align:top;}
.cxmd th{color:var(--gold);background:rgba(0,0,0,.28);font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;}
.cxmd td{color:var(--read);font-family:var(--serif);font-size:.98rem;}
.cxmd td code{font-size:.82em;}

/* ---------------- the row of three, on the front page ---------------- */
/* This row sits over the section's painted backdrop, so the panels need
   their own ground or the copy floats on the picture. */
.refsetlab{font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep);text-align:center;margin:2.4rem 0 .1rem;}
.refset{margin-top:1rem;}
.refset .tile{display:block;text-align:left;text-decoration:none;padding:1.15rem 1.15rem 1.05rem;
  background:linear-gradient(180deg,#1a130a 0%,#100c07 100%);
  border-color:var(--brass);box-shadow:0 0 0 2px var(--edge),var(--shadow);}
.refset .tile .t{color:var(--gold);font-size:.86rem;margin-bottom:.4rem;}
.refset .tile:hover .t{color:var(--parch);}
.refset .tile .d{color:var(--read);}

/* ---------------- misc ---------------- */
.cxloading{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);padding:3rem 0;text-align:center;}
.cxfoot{margin-top:3rem;padding-top:1.2rem;border-top:2px solid var(--bevel);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}