/* Articles — shared stylesheet for /articles/*, loaded after game.css.
   Same "Premier Night" world as the range and the sens converter: navy ground,
   one rationed gold accent, ice-blue links, 1px lines, Exo 2 italic display
   over Rubik body. game.css locks the body and disables selection for the
   canvas app, so this sheet restores normal document scrolling and text
   selection for long-form reading. */

html,body{height:auto;min-height:100%;overflow:auto}
body{background:var(--bg);padding:0 0 56px}
.wrap{max-width:760px;margin:0 auto;padding:32px 20px 0;user-select:text;-webkit-user-select:text}

/* ---------- masthead ---------- */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.brand{font:italic 800 20px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);text-decoration:none}
.brand em{color:var(--acc);font-style:italic}
.btn.mini{padding:8px 14px;font-size:12px}

/* ---------- breadcrumb ---------- */
.crumbs{font:italic 700 11px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.crumbs a{color:var(--ice);text-decoration:none}
.crumbs a:hover{color:var(--acc)}
.crumbs .sep{margin:0 8px;color:var(--line2)}

/* ---------- article head ---------- */
h1{font:italic 800 clamp(24px,4.6vw,33px)/1.16 var(--f-display);letter-spacing:.035em;text-transform:uppercase;color:var(--txt);margin:0 0 14px}
p.standfirst{font-size:16.5px;line-height:1.6;color:var(--txt);max-width:62ch;margin:0 0 18px}
p.standfirst a{color:var(--ice);text-decoration:none}
p.standfirst a:hover{color:var(--acc);text-decoration:underline}
.byline{display:flex;flex-wrap:wrap;gap:8px;font:italic 700 11px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-bottom:26px;border-bottom:1px solid var(--line)}
.byline b{color:var(--acc)}

/* ---------- prose ---------- */
.content{max-width:66ch}
.content p{font-size:15px;line-height:1.72;color:var(--dim);margin:0 0 16px}
.content p a,.content li a,.callout a{color:var(--ice);text-decoration:none}
.content p a:hover,.content li a:hover,.callout a:hover{color:var(--acc);text-decoration:underline}
.content p b,.content p strong,.content li b,.content li strong{color:var(--txt);font-weight:600}
.content h2{font:italic 800 17px var(--f-display);letter-spacing:.07em;text-transform:uppercase;color:var(--txt);
  margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.content h3{font:italic 700 15px var(--f-display);letter-spacing:.05em;color:var(--txt);margin:26px 0 8px}
.content ul,.content ol{margin:0 0 16px;padding-left:22px;color:var(--dim);font-size:15px;line-height:1.7}
.content li{margin:0 0 7px}
.content li::marker{color:var(--acc)}
.content ol li::marker{font-family:var(--f-num);font-weight:700}
.content code{font-family:var(--f-num);font-size:12.5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-key);padding:1px 6px;color:var(--txt)}
.content table{width:100%;border-collapse:collapse;margin:4px 0 18px;font-size:13.5px}
.content th{font:italic 700 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--txt);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2)}
.content td{padding:8px 10px;border-top:1px solid var(--line);color:var(--dim)}
.content td.n{font-family:var(--f-num);font-variant-numeric:tabular-nums;color:var(--txt)}

/* pull sentence — one per article at most */
.pull{font:italic 700 18px/1.45 var(--f-display);color:var(--txt);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:16px 0;margin:26px 0;max-width:56ch}

/* drill box */
.callout{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:24px 0;max-width:66ch}
.callout .lbl{display:block;font:italic 700 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.callout p{font-size:14px;line-height:1.65;color:var(--dim);margin:0}
.callout p+p{margin-top:8px}

/* end CTA */
.endcta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:34px 0 0;padding:20px 22px;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r);max-width:66ch}
.endcta .txt{flex:1;min-width:200px}
.endcta b{display:block;font:italic 800 15px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--txt);margin-bottom:4px}
.endcta .txt span{font-size:13px;line-height:1.55;color:var(--dim)}

/* related guides */
.related{margin-top:38px}
.related ul{list-style:none;padding:0;margin:0}
.related li{border-top:1px solid var(--line);padding:11px 0}
.related li:last-child{border-bottom:1px solid var(--line)}
.related a{color:var(--txt);text-decoration:none;font-weight:600;font-size:14px}
.related a:hover{color:var(--acc)}
.related small{display:block;color:var(--dim);font-size:12px;line-height:1.5;margin-top:3px;font-weight:400}

/* ---------- hub list ---------- */
.intro{max-width:66ch}
.intro p{font-size:14.5px;line-height:1.7;color:var(--dim);margin:0 0 14px}
.intro p a{color:var(--ice);text-decoration:none}
.intro p a:hover{color:var(--acc);text-decoration:underline}
.artlist{margin:30px 0 0;list-style:none;padding:0;max-width:66ch}
.artlist li{border-top:1px solid var(--line);padding:20px 0}
.artlist li:last-child{border-bottom:1px solid var(--line)}
.artlist a.t{display:inline-block;font:italic 800 17px/1.25 var(--f-display);letter-spacing:.03em;color:var(--txt);text-decoration:none}
.artlist a.t:hover{color:var(--acc)}
.artlist p{font-size:13.5px;line-height:1.62;color:var(--dim);margin:7px 0 0}
.artlist .meta{margin-top:9px;font:italic 700 11px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.artlist .meta em{font-style:italic;color:var(--ice)}

/* ---------- footer ---------- */
footer{margin-top:46px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
footer p{font-size:12px;line-height:1.6;color:var(--dim);margin:0 0 8px;max-width:78ch}
footer a{color:var(--ice);text-decoration:none}
footer a:hover{color:var(--acc);text-decoration:underline}

@media(max-width:520px){
  h1{font-size:23px}
  .wrap{padding:22px 14px 0}
  p.standfirst{font-size:15.5px}
}