/* k.css - the keepsake pages of vaevictis.vip (/guide/, /music/, /art/, /cards/, /wallpapers/, /shop/, /press/screens/, /press/store/,
   /reliquary/), over site.css (v86, 2026-10-06). Mobile first: made for a 360 to 430 px phone, then wider. The game's palette only
   (the variables are site.css's), hard pixel edges, no radius, no script needed to read a page. */
body.k main { max-width: 64rem; padding-top: 1rem; }
.k .kicker { font: 600 .8rem/1 var(--pix); letter-spacing: .14em; text-transform: uppercase; color: var(--gd); margin: .6rem 0 0; }
.k h1 { font-size: 2.4rem; margin-top: .3rem; }
.k .lede { max-width: 38rem; }
.k p, .k li { max-width: 42rem; }
.k img { max-width: 100%; height: auto; }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }

/* the page's hero: a live frame of the game (the title screen), the carved title in it */
.hero { display: grid; gap: 1rem; margin: .4rem 0 1.2rem; }
.hero .frame { border: 2px solid var(--r2); box-shadow: 0 4px 0 var(--r1); background: var(--k); }
.hero .frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
@media (min-width: 52rem) { .hero.two { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem; } }

/* pixel buttons: a plain link or button, 44 px or more to hit */
.pxbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem; font: 600 1rem/1.1 var(--pix); letter-spacing: .04em;
  color: var(--w); background: var(--r0); border: 2px solid var(--r3); border-radius: 0; box-shadow: 0 3px 0 var(--r1); text-decoration: none; cursor: pointer; text-transform: uppercase; }
.pxbtn:hover { background: var(--r2); color: var(--w); }
.pxbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--r1); }
.pxbtn.alt { background: var(--d1); border-color: var(--gr1); box-shadow: 0 3px 0 var(--k); color: var(--bn1); }
.pxbtn.alt:hover { background: var(--gr0); color: var(--w); }
.pxbtn[disabled], .pxbtn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }

/* the tiles: a door to each keepsake */
.tiles { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .9rem; }
.tile { margin: 0; max-width: none; }
.tile a { display: block; height: 100%; text-decoration: none; background: var(--d1); border: 2px solid var(--gr1); box-shadow: 0 3px 0 var(--k); color: var(--bn1); }
.tile a:hover { border-color: var(--r3); color: var(--w); }
.tile .pic { display: block; aspect-ratio: 4 / 3; background: var(--k); overflow: hidden; border-bottom: 2px solid var(--gr0); }
.tile .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .pic img.contain { object-fit: contain; background: #e9e5de; }
.tile b { display: block; font: 600 1rem/1.2 var(--pix); color: var(--w); padding: .6rem .7rem 0; }
.tile span.t { display: block; font-size: .92rem; line-height: 1.4; padding: .2rem .7rem .7rem; color: var(--gr3); }
.tag { display: inline-block; font: 600 .7rem/1 var(--pix); letter-spacing: .1em; text-transform: uppercase; padding: .22rem .4rem; border: 1px solid var(--gd); color: var(--gd); margin-left: .4rem; vertical-align: middle; }
.tag.red { border-color: var(--r4); color: var(--r4); }

/* the seal: PREVIEW, work in progress */
.seal { display: inline-block; font: 700 .9rem/1.2 var(--pix); letter-spacing: .14em; text-transform: uppercase; color: var(--r4); border: 3px double var(--r3); padding: .5rem .8rem; transform: rotate(-3deg); background: rgba(36, 4, 8, .7); text-align: center; }
.seal small { display: block; font-size: .72rem; letter-spacing: .2em; color: var(--bn1); margin-top: .15rem; }

/* figures */
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.2rem 1rem; margin: 1rem 0; }
.figs.sm { grid-template-columns: repeat(auto-fill, minmax(min(46%, 9rem), 1fr)); gap: .8rem .7rem; }
figure { margin: 0; }
figure img { display: block; width: 100%; border: 1px solid var(--gr0); background: var(--n0); }
figcaption { font-size: .9rem; line-height: 1.45; color: var(--gr3); margin-top: .35rem; }
figcaption b { color: var(--w); }
.sheet img { background: #f3efe6; }
.dl { font: .88rem/1.8 var(--pix); }
.dl a { white-space: nowrap; margin-right: .8rem; }
.note { background: var(--d1); border-left: 4px solid var(--gd); padding: .7rem 1rem; margin: 1rem 0; font-size: .96rem; max-width: 42rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; padding: 0; list-style: none; }
.chips li { margin: 0; font: .82rem/1 var(--pix); border: 1px solid var(--gr1); padding: .35rem .5rem; color: var(--bn1); }

/* the soundtrack */
.tracks { list-style: none; padding: 0; margin: 1rem 0; counter-reset: t; }
.track { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 .6rem; padding: .8rem 0; border-bottom: 1px solid var(--gr0); max-width: none; margin: 0; }
.track .n { font: 700 1.4rem/1.2 var(--pix); color: var(--r3); text-align: right; }
.track h3 { margin: 0; font-size: 1.05rem; }
.track .where { color: var(--gd); font: .82rem/1.5 var(--pix); }
.track p { margin: .2rem 0 .5rem; color: var(--gr3); font-size: .95rem; }
.track audio { width: 100%; height: 40px; color-scheme: dark; }
.track .len { color: var(--gr3); font: .8rem/1 var(--pix); margin-left: .5rem; }
.track.playing { background: linear-gradient(90deg, rgba(142, 19, 24, .22), transparent); }
.cover { display: grid; gap: 1rem; margin: .6rem 0 1rem; }
.cover img { width: min(100%, 20rem); image-rendering: pixelated; border: 2px solid var(--r2); box-shadow: 0 4px 0 var(--r1); }
@media (min-width: 40rem) { .cover { grid-template-columns: 20rem 1fr; align-items: start; } }

/* the art book */
.sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; }
#drawer-cart { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#drawer-cart[hidden] { display: none; }
.sw > div { max-width: none; }
.sw li, .sw div { margin: 0; max-width: none; border: 1px solid var(--gr0); font: .7rem/1.3 ui-monospace, Consolas, monospace; padding: 0 .35rem .3rem; color: var(--gr3); }
.sw i { display: block; height: 1.7rem; margin: 0 -.35rem .3rem; }
pre.recipe { background: var(--n0); border: 1px solid var(--gr0); padding: .8rem; overflow-x: auto; font: .78rem/1.5 ui-monospace, Consolas, monospace; color: var(--bn1); max-width: 100%; }
.bars { list-style: none; margin: 1rem 0; padding: 0; max-width: 36rem; }
.bars li { display: grid; grid-template-columns: 5.2rem 1fr 2rem; gap: .5rem; align-items: center; margin: .2rem 0; font: .8rem/1.2 var(--pix); color: var(--gr3); max-width: none; }
.bars i { display: block; height: .7rem; background: var(--r3); box-shadow: 0 2px 0 var(--r1); }
.timeline { list-style: none; padding: 0; margin: 1rem 0; border-left: 2px solid var(--r2); }
.timeline li { margin: 0 0 .9rem; padding-left: .9rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .55rem; width: 10px; height: 10px; background: var(--r3); }
.timeline time { display: block; font: 600 .8rem/1.3 var(--pix); color: var(--gd); }

/* the cards */
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 11rem), 1fr)); gap: .9rem .7rem; list-style: none; padding: 0; margin: 1rem 0; }
.deck li { margin: 0; max-width: none; }
.deck img { display: block; width: 100%; border: 1px solid var(--gr1); box-shadow: 0 3px 0 var(--k); }
.deck span { display: block; font: .8rem/1.3 var(--pix); color: var(--bn1); margin-top: .35rem; }

/* the shop */
.shopnote { margin-top: 0; }
.goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.1rem; margin: 1rem 0 2rem; list-style: none; padding: 0; }
.good { margin: 0; max-width: none; background: var(--d1); border: 2px solid var(--gr1); box-shadow: 0 3px 0 var(--k); display: flex; flex-direction: column; }
.good .pic { background: #e9e5de; aspect-ratio: 1 / 1; display: grid; place-items: center; border-bottom: 2px solid var(--gr0); overflow: hidden; }
.good .pic img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; display: block; }
.good .body { padding: .7rem .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.good h3 { margin: 0; display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.good .price { font: 700 1.15rem/1 var(--pix); color: var(--y); white-space: nowrap; }
.good p { margin: 0; font-size: .95rem; color: var(--gr3); }
.good .opts { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.good label { display: grid; gap: .2rem; font: .75rem/1.1 var(--pix); color: var(--gd); text-transform: uppercase; letter-spacing: .08em; }
.good select, .good .fixed { min-height: 44px; font: 1rem/1.2 var(--pix); color: var(--w); background: var(--k); border: 2px solid var(--gr1); border-radius: 0; padding: .4rem .5rem; width: 100%; }
.good .fixed { display: flex; align-items: center; color: var(--bn1); border-style: dashed; }
.good .opts .wide { grid-column: 1 / -1; }
.good .add { margin-top: auto; }
.thumbs { display: flex; gap: .4rem; padding: .4rem .8rem 0; }
.thumbs button { width: 48px; height: 48px; padding: 0; border: 2px solid var(--gr1); background: #e9e5de; cursor: pointer; }
.thumbs button[aria-pressed="true"] { border-color: var(--r3); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartbtn { position: fixed; z-index: 30; right: max(.7rem, env(safe-area-inset-right)); bottom: max(.7rem, env(safe-area-inset-bottom)); }
.cartbtn .count { background: var(--y); color: var(--k); padding: .15rem .45rem; font-weight: 700; min-width: 1.6rem; text-align: center; }
.scrim { position: fixed; inset: 0; background: rgba(5, 4, 7, .75); z-index: 40; display: none; }
.scrim.open { display: block; }
.drawer { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 86vh; max-height: 86dvh; display: none; flex-direction: column; background: var(--n0); border-top: 3px solid var(--r3);
  box-shadow: 0 -6px 0 var(--r1); padding-bottom: env(safe-area-inset-bottom); }
.drawer.open { display: flex; }
@media (min-width: 40rem) { .drawer { left: auto; width: 26rem; top: 0; max-height: none; border-top: 0; border-left: 3px solid var(--r3); box-shadow: -6px 0 0 var(--r1); } }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--gr0); }
.drawer h2 { margin: 0; border: 0; padding: 0; font-size: 1.1rem; }
.drawer .lines { overflow-y: auto; padding: .4rem .9rem; flex: 1; list-style: none; margin: 0; }
.drawer .line { display: grid; grid-template-columns: 56px 1fr auto; gap: .2rem .7rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--gr0); max-width: none; margin: 0; }
.drawer .line img { width: 56px; height: 56px; object-fit: cover; background: #e9e5de; }
.drawer .line b { color: var(--w); font: 600 .95rem/1.2 var(--pix); display: block; }
.drawer .line small { color: var(--gr3); font-size: .85rem; display: block; }
.drawer .line .amt { font: 700 1rem/1 var(--pix); color: var(--y); text-align: right; }
.stepper { display: inline-flex; align-items: center; gap: .2rem; margin-top: .3rem; }
.stepper button { width: 44px; height: 36px; font: 700 1.1rem/1 var(--pix); color: var(--w); background: var(--k); border: 2px solid var(--gr1); cursor: pointer; padding: 0; }
.stepper output { min-width: 1.8rem; text-align: center; font: 600 1rem/1 var(--pix); color: var(--w); }
.stepper .rm { width: auto; padding: 0 .6rem; font-size: .8rem; margin-left: .4rem; color: var(--gr3); }
.drawer footer { padding: .8rem .9rem 1rem; border-top: 1px solid var(--gr0); display: grid; gap: .6rem; }
.drawer .sub { display: flex; justify-content: space-between; font: 700 1.1rem/1 var(--pix); color: var(--w); }
.drawer .empty { padding: 1.4rem .9rem; color: var(--gr3); }
.closed { background: #240408; border: 2px solid var(--r3); padding: .8rem .9rem; font-size: .96rem; color: var(--w); }
.closed b { display: block; font: 700 1rem/1.2 var(--pix); letter-spacing: .08em; text-transform: uppercase; color: var(--r4); margin-bottom: .3rem; }
.closed p { margin: .3rem 0; color: var(--bn1); }

/* the reliquary placeholder */
.dark-room { border: 2px dashed var(--gr1); background: var(--n0); padding: 2rem 1rem; text-align: center; margin: 1rem 0; }
.dark-room .lamp { font: 700 1.4rem/1 var(--pix); color: var(--gd); letter-spacing: .2em; }

@media (min-width: 48rem) { .k h1 { font-size: 3rem; } }
@media (max-width: 30rem) { .k h1 { font-size: 2.1rem; } }
@media (prefers-reduced-motion: no-preference) { .drawer.open { animation: rise .18s steps(5) both; } @keyframes rise { from { transform: translateY(24px); opacity: 0; } } }
@media print { .cartbtn, .drawer, .scrim { display: none; } }

/* nothing may be wider than the screen: code and tables scroll inside themselves (the art book's recipe, its tables) */
.k pre { max-width: 100%; overflow-x: auto; }
.k table { display: block; max-width: 100%; overflow-x: auto; }
.k main { overflow-wrap: break-word; }