/* DECK LITE - the page is the app: a comic page with panels and an inked hand.
   Palette lifted straight from Source/ComicLook.cpp so the page and the
   product cannot drift apart: ink #17161a, stock #f2e6c8, red #c8382c,
   yellow #f2d24a. */
:root{
  --ink:#17161a; --stock:#f2e6c8; --red:#c8382c; --yellow:#f2d24a;
  --fade:rgba(23,22,26,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink) url("assets/comic_paper.jpg") center/1200px repeat;
  color:var(--ink);
  font:16px/1.55 "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:1080px;margin:0 auto;padding:26px 18px 60px}

/* A panel is the page's unit, the same as in the app: stock ground, a heavy
   ink border, and a hard offset shadow instead of a soft one. */
.panel{
  background:var(--stock);
  border:3px solid var(--ink);
  border-radius:5px;
  box-shadow:5px 5px 0 rgba(23,22,26,.85);
  padding:22px 24px;
  margin:0 0 26px;
}

header.masthead{
  background:var(--ink); color:var(--stock);
  border:3px solid var(--ink); border-radius:5px;
  box-shadow:5px 5px 0 rgba(23,22,26,.85);
  padding:16px 22px 14px; margin-bottom:6px;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
header.masthead h1{
  margin:0; font-size:38px; letter-spacing:.5px; font-weight:800;
  color:var(--red); text-transform:uppercase;
}
header.masthead h1 span{color:var(--stock)}
header.masthead .tag{margin-left:auto; font-size:13px; opacity:.75; letter-spacing:.16em; text-transform:uppercase}
.rule{height:4px;background:var(--red);border-radius:2px;margin:0 0 24px}

.lede{font-size:20px;line-height:1.45;margin:0}
.lede b{background:var(--yellow);padding:0 4px;border-radius:2px}

figure{margin:0 0 26px}
figure img{display:block;width:100%;height:auto;border:3px solid var(--ink);border-radius:5px;box-shadow:5px 5px 0 rgba(23,22,26,.85)}
figcaption{font-size:13px;color:var(--fade);margin-top:10px;font-style:italic}

h2{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 12px;color:var(--red);font-weight:800;
}
h3{font-size:19px;margin:0 0 6px}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.grid .panel{margin:0}

/* The suits, straight from the app's Suit.cpp - a maker's colour is how you
   find their cards in the hand. */
.suits{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.suit{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--stock);padding:5px 11px;border:2px solid var(--ink);border-radius:3px;
  box-shadow:2px 2px 0 rgba(23,22,26,.8);
}
.get{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.price{
  background:var(--red);color:var(--stock);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;font-size:15px;padding:11px 20px;border:3px solid var(--ink);
  border-radius:4px;box-shadow:4px 4px 0 rgba(23,22,26,.85);
}
.note{font-size:13px;color:var(--fade)}
dl.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
dl.spec dt{font-weight:700;letter-spacing:.05em}
dl.spec dd{margin:0;text-align:right;color:var(--fade)}

footer{margin-top:34px;text-align:center;color:rgba(242,230,200,.65);font-size:13px}
footer a{color:rgba(242,230,200,.85)}
@media (max-width:640px){
  header.masthead h1{font-size:28px}
  .lede{font-size:18px}
}

.download-button { display: inline-block; padding: 13px 20px; background: #c8382c; color: #fff; border-radius: 5px; font-weight: 800; text-decoration: none; }
.download-button:focus-visible { outline: 3px solid #f6c26d; outline-offset: 4px; }