/* ============================================================
   ASTOUNDING TALES OF BRITANNIA — shared pulp stylesheet
   Used by the shard index and every profession guide.
   Same palette and type as the magazine: yellowed newsprint,
   black ink, pulp red, mustard, moongate teal.
   Deliberately single-theme (a 1950s pulp has no dark mode).
   ============================================================ */
:root{
  --paper:#f0dfb4; --paper2:#e6cf98; --ink:#1c1a28; --ink2:#4a4152;
  --red:#c42a1e; --mustard:#f2b31b; --teal:#13707c; --night:#191d33; --cream:#fff6dd;
  --head:"Bangers","Impact","Arial Black",sans-serif;
  --mast:"Alfa Slab One","Rockwell","Georgia",serif;
  --type:"Special Elite","Courier New",monospace;
  --body:"Bitter",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.06rem;line-height:1.6;
  background-image:radial-gradient(rgba(28,26,40,.07) 1px,transparent 1.4px);background-size:6px 6px}
.wrap{max-width:1100px;margin:0 auto;padding-inline:18px;padding-block:0 60px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
a{color:var(--red)}

/* ---------- MASTHEAD ---------- */
.mast{background:var(--red);color:var(--mustard);display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 18px;border:6px solid var(--ink);border-bottom-width:6px;flex-wrap:wrap;margin-top:18px}
.mast .title{font-family:var(--mast);font-size:clamp(1.3rem,4.2vw,2.4rem);line-height:.95;text-shadow:3px 3px 0 var(--ink)}
.mast .title small{display:block;font-size:.42em;color:var(--cream);letter-spacing:.2em;text-shadow:none}
.mast .price{margin-left:auto;font-family:var(--type);color:var(--cream);text-align:right;font-size:.85rem;line-height:1.3}
.mast .price b{display:block;font-family:var(--mast);color:var(--mustard);font-size:1.4rem}

/* ---------- NAV STRIP ---------- */
.toc{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--ink);border-bottom:4px solid var(--red)}
.toc-in{max-width:1100px;margin:0 auto;padding:8px 18px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;align-items:center}
.toc-in::-webkit-scrollbar{display:none}
.toc a{flex:none;font-family:var(--head);letter-spacing:.06em;font-size:1.05rem;color:var(--mustard);text-decoration:none;padding:3px 10px;border:2px solid transparent}
.toc a:hover,.toc a:focus-visible{border-color:var(--mustard)}
.toc a.home{color:var(--cream)}

/* ---------- HEADINGS ---------- */
section{padding-block:48px 6px;scroll-margin-top:60px}
.kicker{font-family:var(--type);font-size:.95rem;color:var(--red);letter-spacing:.06em;text-transform:uppercase}
.big{font-family:var(--head);font-weight:400;font-size:clamp(2.1rem,5.5vw,3.4rem);line-height:.95;letter-spacing:.03em;color:var(--ink);text-shadow:3px 3px 0 var(--mustard)}
.head{display:flex;flex-direction:column;gap:6px;margin-bottom:22px;max-width:780px}
.head p{font-size:1.08rem}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;font-family:var(--head);font-size:1.2rem;letter-spacing:.06em;padding:7px 16px;border:3px solid var(--ink);
  background:var(--mustard);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.red{background:var(--red);color:var(--cream)}
.btn.teal{background:var(--teal);color:var(--cream)}
.btn.sm{font-size:1rem;padding:3px 11px;box-shadow:3px 3px 0 var(--ink)}

/* ---------- PANELS ---------- */
.panel{border:4px solid var(--ink);background:var(--cream);box-shadow:6px 6px 0 var(--ink);padding:18px;display:flex;flex-direction:column;gap:10px}
.panel h3{font-family:var(--head);font-weight:400;font-size:1.7rem;letter-spacing:.03em;line-height:1}
.panel h4{font-family:var(--head);font-weight:400;font-size:1.3rem;letter-spacing:.03em;line-height:1;color:var(--red)}
.panel.tight{padding:14px}
.col{display:flex;flex-direction:column;gap:16px}
.spread{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
@media (max-width:840px){.spread{grid-template-columns:1fr}}
.small{font-size:.88rem;color:var(--ink2)}

/* A loud pulp callout, like the YES! block on the magazine cover */
.yell{font-family:var(--head);font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1;color:var(--cream);background:var(--teal);
  border:4px solid var(--ink);padding:10px 16px;display:inline-block;transform:rotate(-1.5deg);box-shadow:6px 6px 0 var(--ink);margin-bottom:18px}
.yell.red{background:var(--red)}
.yell.mustard{background:var(--mustard);color:var(--ink)}

/* Starburst badge */
.burst{position:relative;z-index:3;width:120px;height:120px;display:grid;place-items:center;text-align:center;
  font-family:var(--head);font-size:1rem;line-height:1;color:var(--ink);transform:rotate(12deg);flex:none}
.burst::before{content:"";position:absolute;inset:0;background:var(--mustard);z-index:-1;
  clip-path:polygon(50% 0,61% 18%,82% 8%,80% 30%,100% 35%,86% 52%,100% 68%,79% 72%,82% 93%,61% 84%,50% 100%,39% 84%,18% 93%,21% 72%,0 68%,14% 52%,0 35%,20% 30%,18% 8%,39% 18%)}

/* ---------- GUIDE HERO BANNER ---------- */
.ghero{position:relative;border:6px solid var(--ink);background:var(--night);color:var(--cream);box-shadow:10px 10px 0 var(--ink);
  display:grid;grid-template-columns:1fr 230px;overflow:hidden;min-height:260px}
.ghero .rays{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 78% 55%,rgba(242,179,27,.13) 0 6deg,transparent 6deg 14deg)}
.ghero-copy{position:relative;z-index:2;padding:26px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ghero h1{font-family:var(--head);font-weight:400;font-size:clamp(2.3rem,7vw,4.2rem);line-height:.92;letter-spacing:.02em;
  color:var(--mustard);text-shadow:4px 4px 0 var(--red),7px 7px 0 var(--ink);transform:rotate(-1.5deg)}
.ghero .deck{font-family:var(--type);font-size:1.08rem;max-width:44ch}
.ghero-art{position:relative;z-index:1;display:grid;place-items:center;padding:14px}
.ghero-art svg{width:100%;max-width:180px;height:auto;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.4))}
.ghero .ribbon{position:absolute;top:12px;left:-4px;background:var(--mustard);color:var(--ink);font-family:var(--head);
  letter-spacing:.06em;padding:2px 12px;font-size:1rem;z-index:3}
@media (max-width:700px){.ghero{grid-template-columns:1fr}.ghero-art{max-height:170px;overflow:hidden}}

/* ---------- STAT STRIP ---------- */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.stat{border:3px solid var(--ink);background:var(--cream);padding:8px 14px;min-width:132px;box-shadow:4px 4px 0 var(--ink)}
.stat .l{font-family:var(--type);font-size:.78rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
.stat .v{font-family:var(--head);font-size:1.5rem;line-height:1.05;letter-spacing:.03em;color:var(--red)}
.bar{display:flex;gap:2px;margin-top:3px}
.bar i{width:14px;height:9px;border:1.5px solid var(--ink)}
.bar i.on{background:var(--teal)}

/* ---------- SKILL TABLE / TEMPLATE ---------- */
.tmpl{width:100%;border-collapse:collapse;font-size:.98rem;background:var(--cream)}
.tmpl caption{font-family:var(--head);font-size:1.35rem;letter-spacing:.04em;text-align:left;padding-bottom:8px;color:var(--ink)}
.tmpl th,.tmpl td{border:2.5px solid var(--ink);padding:6px 10px;text-align:left;vertical-align:top}
.tmpl thead th{background:var(--ink);color:var(--mustard);font-family:var(--head);font-weight:400;letter-spacing:.05em;font-size:1.05rem}
.tmpl td.n{font-family:var(--type);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tmpl tfoot td{background:var(--mustard);font-family:var(--head);font-size:1.15rem;letter-spacing:.04em}
.tmpl tbody tr:nth-child(even){background:var(--paper2)}
.tscroll{overflow-x:auto}

/* ---------- TRAINING LADDER ---------- */
.ladder{display:flex;flex-direction:column;gap:0;counter-reset:rung}
.rung{display:grid;grid-template-columns:86px 1fr;gap:14px;border-left:5px solid var(--ink);padding:0 0 18px 0;position:relative;margin-left:10px}
.rung:last-child{border-left-color:transparent;padding-bottom:0}
.rung .mark{font-family:var(--type);font-size:.84rem;font-weight:700;background:var(--red);color:var(--cream);border:3px solid var(--ink);
  padding:3px 0;text-align:center;height:fit-content;margin-left:-16px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
.rung .what{min-width:0;padding-top:2px}
.rung .what b{font-family:var(--head);font-weight:400;font-size:1.3rem;letter-spacing:.04em;display:block;line-height:1.1}
@media (max-width:560px){.rung{grid-template-columns:1fr;gap:6px}.rung .mark{margin-left:-14px;width:fit-content;padding-inline:10px}}

/* ---------- CHAIN (gather → refine → make) ---------- */
.chain{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.step{flex:1 1 150px;min-width:0;background:var(--paper);border:2.5px solid var(--ink);padding:10px;display:flex;flex-direction:column;gap:2px}
.step b{font-family:var(--head);font-weight:400;letter-spacing:.05em;font-size:1.15rem;color:var(--red)}
.arrow{align-self:center;font-family:var(--head);font-size:1.6rem}
@media (max-width:640px){.chain{flex-direction:column}.arrow{transform:rotate(90deg);align-self:flex-start;margin-left:20px}}

/* ---------- TAG PILLS ---------- */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills span{border:2px solid var(--ink);padding:1px 9px;font-size:.92rem;background:var(--paper);font-family:var(--type)}
.pills span.hot{background:var(--mustard)}

/* ---------- ADVICE BOXES ---------- */
.tip{border:3px solid var(--ink);background:var(--mustard);padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
.tip .bang{font-family:var(--head);font-size:2.1rem;line-height:.85;color:var(--red);flex:none}
.tip.warn{background:var(--cream);border-style:dashed}
.tip.warn .bang{color:var(--teal)}
.tip h4{font-family:var(--head);font-weight:400;font-size:1.2rem;letter-spacing:.04em;margin-bottom:2px;line-height:1.1}

/* ---------- Q&A ---------- */
.qa{border-top:2px dashed var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:3px}
.qa:first-child{border-top:0;padding-top:0}
.qa dt{font-family:var(--head);font-size:1.22rem;letter-spacing:.03em;color:var(--teal)}
.qa dd{margin:0}

/* ---------- NEWSSTAND GRID (index page) ---------- */
.rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:20px}
.issue{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--c,var(--teal));color:var(--cream);
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;position:relative;min-height:230px;
  transition:transform .12s,box-shadow .12s}
.issue:hover,.issue:focus-visible{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.issue .art{flex:1;display:grid;place-items:center;padding:16px 10px 6px;
  background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,246,221,.10) 0 8deg,transparent 8deg 18deg)}
.issue .art svg{width:60%;max-width:110px;height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35))}
.issue .nm{font-family:var(--head);font-size:1.75rem;letter-spacing:.04em;line-height:1;padding:8px 12px 0;color:var(--mustard);text-shadow:2px 2px 0 var(--ink)}
.issue .tag{font-family:var(--type);font-size:.86rem;line-height:1.35;padding:4px 12px 12px}
.issue .ribbon{position:absolute;top:10px;left:-4px;background:var(--ink);color:var(--mustard);font-family:var(--head);
  letter-spacing:.06em;padding:2px 10px;font-size:.9rem}

/* ---------- FOOTER ---------- */
footer{margin-top:50px;border-top:4px double var(--ink);padding-top:14px;font-family:var(--type);font-size:.9rem;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}