/* Game guides — long-form articles under /guides/. Loaded after hub.css,
   pages.css and toon.css, so the colours, fonts and outlines are the site's;
   this file only sets up comfortable reading. */

.guide{max-width:760px; margin:0 auto; padding:30px 20px 70px}
.crumbs{font-weight:800; font-size:14px; margin:0 0 14px; color:var(--text); opacity:.8}
.crumbs a{color:var(--text); text-decoration:underline; text-decoration-color:var(--gum); text-decoration-thickness:3px; text-underline-offset:3px}
.guide h1{
  font-size:clamp(34px, 6vw, 52px); line-height:1.05; margin:0 0 14px; color:#fff;
  -webkit-text-stroke:clamp(6px,1vw,8px) var(--ink); paint-order:stroke fill; text-shadow:0 5px 0 var(--ink);
}
.guide .standfirst{font-size:19px; line-height:1.55; font-weight:700; margin:0 0 10px; max-width:62ch}
.guide .byline{font-size:13.5px; font-weight:800; color:var(--muted); margin:0 0 24px}

.article{
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:26px; box-shadow:var(--lift-big);
  padding:28px clamp(18px, 4vw, 40px) 32px;
}
.article h2{font-size:28px; line-height:1.15; margin:34px 0 10px; color:var(--text)}
.article h2:first-child{margin-top:0}
.article h3{font-size:20px; margin:22px 0 6px}
.article p, .article li{font-size:17px; line-height:1.7; font-weight:600; max-width:66ch}
.article p{margin:0 0 14px}
.article ul, .article ol{margin:0 0 16px; padding-left:24px}
.article li{margin:0 0 8px}
.article li::marker{color:var(--gum); font-weight:900}
.article strong{font-weight:900}
.article a{color:var(--text); text-decoration:underline; text-decoration-color:var(--gum); text-decoration-thickness:3px; text-underline-offset:3px; font-weight:800}

.article figure{margin:22px 0 24px}
.article figure img{
  display:block; width:100%; height:auto; border:3px solid var(--ink); border-radius:18px;
  box-shadow:0 5px 0 var(--ink); background:var(--paper-2);
}
.article figure.narrow img{max-width:420px; margin:0 auto}
.article figcaption{font-size:14.5px; font-weight:700; color:var(--muted); margin-top:10px; text-align:center}

/* "In short" box at the top and the tip callouts in the text */
.tldr, .tip{
  border:var(--line) solid var(--ink); border-radius:18px; box-shadow:0 4px 0 var(--ink);
  padding:14px 18px; margin:0 0 22px;
}
.tldr{background:var(--paper-3)}
.tldr h2{font-size:21px; margin:0 0 6px}
.tldr ul{margin:0; padding-left:20px}
.tldr li{font-size:16px; margin:0 0 4px}
.tip{background:var(--paper-2); display:flex; gap:12px; align-items:flex-start}
.tip .t-icon{flex:none; font-size:24px; line-height:1.2}
.tip p{margin:0; font-size:16px}

/* facts table: what each thing does, numbers taken from the game's own rules */
.facts{width:100%; border-collapse:separate; border-spacing:0; margin:6px 0 20px; font-size:15.5px; font-weight:650;
       border:2.5px solid var(--ink); border-radius:16px; overflow:hidden}
.facts th, .facts td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:2px dashed color-mix(in srgb, var(--ink) 22%, transparent)}
.facts tr:last-child th, .facts tr:last-child td{border-bottom:0}
.facts th{font-family:var(--display); font-weight:400; font-size:16px; background:var(--paper-2); width:34%}

.play-box{
  margin:30px 0 0; padding:20px; border-radius:22px; border:var(--line) solid var(--ink); box-shadow:0 5px 0 var(--ink);
  background:linear-gradient(135deg, var(--g1, var(--grape)), var(--g2, var(--gum))); color:#fff;
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.play-box p{margin:0; font-family:var(--display); font-size:22px; line-height:1.2; text-shadow:0 2px 0 rgba(13,11,42,.45); max-width:none}
.play-box .btn{background:#fff; color:var(--ink); text-decoration:none; font-size:18px; padding:11px 22px}
.play-box .btn:hover{background:var(--sun); color:var(--ink)}

.more{margin:34px 0 0}
.more h2{font-size:26px; margin:0 0 14px; color:#fff; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; text-shadow:0 4px 0 var(--ink)}
.more ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px}
.more a{
  display:block; padding:12px 14px; border-radius:16px; border:var(--line) solid var(--ink); box-shadow:0 4px 0 var(--ink);
  background:var(--paper); color:var(--text); text-decoration:none; font-weight:800; font-size:15px;
}
.more a:hover{background:var(--paper-3)}
.more a b{display:block; font-family:var(--display); font-weight:400; font-size:19px}

/* the guides index */
.guide-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px; margin:26px 0 0}
.guide-card{
  display:flex; flex-direction:column; border-radius:24px; overflow:hidden; text-decoration:none; color:var(--text);
  background:var(--paper); border:var(--line) solid var(--ink); box-shadow:var(--lift-big); transition:transform .14s, box-shadow .14s;
}
.guide-card:hover{transform:translateY(-4px) rotate(-.5deg); box-shadow:0 10px 0 var(--ink)}
.guide-card .art{height:150px; border-bottom:var(--line) solid var(--ink); background:var(--paper-2)}
.guide-card .gbody{padding:14px 16px 18px}
.guide-card h2{font-size:23px; margin:0 0 6px}
.guide-card p{margin:0; font-size:15px; line-height:1.5; font-weight:650; opacity:.85}
.guide-card .read{display:inline-block; margin-top:10px; font-family:var(--display); font-size:17px; color:var(--text);
  text-decoration:underline; text-decoration-color:var(--gum); text-decoration-thickness:3px; text-underline-offset:3px}

@media(max-width:560px){
  .article p, .article li{font-size:16px}
  .article h2{font-size:24px}
  .facts th{width:40%}
}

.guide.wide{max-width:1120px}
/* each guide's colours, from the homepage card of its game (hub.css) */
body.gd-boat{--g1:var(--boat-1); --g2:var(--boat-2)}
body.gd-train{--g1:var(--train-1); --g2:var(--train-2)}
body.gd-orbit{--g1:var(--orbit-1); --g2:var(--orbit-2)}
body.gd-block{--g1:var(--block-1); --g2:var(--block-2)}
body.gd-fire{--g1:var(--fire-1); --g2:var(--fire-2)}
body.gd-hex{--g1:var(--hex-1); --g2:var(--hex-2)}
body.gd-word{--g1:var(--word-1); --g2:var(--word-2)}
body.gd-flux{--g1:var(--flux-1); --g2:var(--flux-2)}