/* ==========================================================================
   css/alternityrpg.css -- AlternityRPG.com, 2026-09-30 (phase 2)
   The "Mission Console" look from the prototype (Home = option A,
   Resources = option C): black, light green, teal highlights.
   Fonts: Alternity (headings, .AlternityFont) and Boost SSi (labels,
   .CharSheetLabel) from /css/fonts/stylesheet.css -- the same two classes
   AlternityBeyond uses -- plus IBM Plex Sans for body text.
   ========================================================================== */

:root {
	--bg:        #040706;
	--bg-deep:   #030505;
	--band:      #07100D;
	--panel:     #09120F;
	--panel-2:   #0D1A16;
	--line:      #1B2D27;
	--line-2:    #2A4A40;
	--green:     #B6F7C4;	/* headings, links */
	--green-2:   #7CEB97;	/* filled buttons */
	--teal:      #2DD4BF;	/* highlights */
	--text:      #E2F2E7;
	--text-2:    #C3D8CA;
	--muted:     #93AE9F;
	--on-light:  #04150A;	/* text on green / teal fills */
	--page-pad:  64px;
}

/* --- the two AlternityBeyond font classes --- */
.AlternityFont  { font-family: 'alternityregular', Tahoma, sans-serif; font-weight: normal; font-style: normal; }
.CharSheetLabel { font-family: 'boost_ssiregular', Tahoma, sans-serif; font-weight: normal; font-style: normal; }
.MonoFont       { font-family: 'IBM Plex Mono', Consolas, monospace; }

/* --- page basics --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg);
	color: var(--text);
	font-family: 'IBM Plex Sans', Tahoma, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}
a { color: var(--green); text-decoration: none; }
a:hover, a:focus { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--teal); outline-offset: 2px;
}
h1, h2, h3 { margin: 0; font-weight: normal; color: var(--green); }
p { margin: 0; }
img { max-width: 100%; }
.flex-wrapper { display: flex; min-height: 100vh; flex-direction: column; }
.flex-wrapper > main { flex: 1 0 auto; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--green-2); color: var(--on-light); padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 16px; top: 8px; }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- header --- */
.sysStrip {
	height: 36px; padding: 0 var(--page-pad);
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 1px solid var(--line);
	font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
}
.sysStrip .online { color: var(--teal); }
.sysStrip > div { display: flex; gap: 24px; }
.siteNav {
	min-height: 84px; padding: 0 var(--page-pad);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap; row-gap: 4px;	/* 2026-09-30 lets the menu drop to its own row */
	border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: baseline; gap: 12px; color: var(--green); white-space: nowrap; }
.wordmark .siteName { font-size: 30px; letter-spacing: 0.04em; }
.wordmark .siteTag { font-size: 12px; color: var(--teal); letter-spacing: 0.12em; }
.navLinks { display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.navLinks a { color: var(--text); padding: 6px 0; border-bottom: 2px solid transparent; }
.navLinks a:hover { color: var(--green); }
.navLinks a.here { color: var(--green); border-bottom-color: var(--teal); }
.navSearch { display: flex; }
.navSearch input {
	width: 170px; height: 44px; padding: 0 12px;
	background: var(--panel); color: var(--text);
	border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; font-size: 14px;
}
.navSearch button {
	width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 0 8px 8px 0;
	background: var(--panel); color: var(--green); cursor: pointer;
}
.buildBanner { background: var(--panel-2); color: var(--muted); text-align: center; font-size: 13px; padding: 6px 16px; border-bottom: 1px solid var(--line); }

/* --- sections --- */
.section { padding: 88px var(--page-pad); }
.section.tight { padding-top: 0; }
.section.band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sectionHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.sectionHead h2 { font-size: 44px; line-height: 1.1; }
.sectionHead p { margin-top: 10px; color: var(--text-2); }
.eyebrow { font-size: 13px; letter-spacing: 0.12em; color: var(--teal); text-transform: uppercase; margin-bottom: 10px; }
.moreLink { font-weight: 600; white-space: nowrap; }

/* --- buttons --- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border-radius: 6px;
	font-weight: 600; font-size: 16px; cursor: pointer; border: 1px solid transparent;
	font-family: 'IBM Plex Sans', Tahoma, sans-serif;
}
.btn-green { background: var(--green-2); color: var(--on-light); border-color: var(--green-2); }
.btn-green:hover { background: var(--green); color: var(--on-light); }
.btn-teal { background: var(--teal); color: var(--on-light); border-color: var(--teal); }
.btn-teal:hover { background: #5EEAD4; color: var(--on-light); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--panel-2); color: var(--teal); }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--green-2); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* --- cards / panels --- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.artHolder {
	background: repeating-linear-gradient(135deg, var(--panel-2) 0 14px, var(--panel) 14px 28px);
	display: flex; align-items: center; justify-content: center;
	color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line);
}
.emptyNote { color: var(--muted); padding: 16px 0; }

/* --- Home: hero --- */
.hero { position: relative; min-height: 640px; padding: 64px var(--page-pad); display: flex; align-items: center; gap: 64px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero .stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.heroText { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 28px; }
.heroText h1 { font-size: 68px; line-height: 1.04; }
/* 2026-10-01: the rotating headline fades between lines */
.heroRotate { transition: opacity 0.45s ease; }
.heroRotate.fading { opacity: 0; }
/* beside the dice box (wide screens) the headline column is narrower, so the
   size steps down a little there to keep the headlines to two lines */
@media (min-width: 1201px) { .heroText h1 { font-size: clamp(48px, 4vw, 68px); } }
.heroText p { max-width: 600px; font-size: 19px; line-height: 1.6; color: var(--text-2); }
.heroButtons { display: flex; gap: 16px; flex-wrap: wrap; }
.diceConsole { position: relative; width: 520px; flex-shrink: 0; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.diceConsole .head { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.diceRow { display: flex; gap: 16px; align-items: center; }
.die { width: 108px; height: 108px; border-radius: 10px; border: 2px solid var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.die b { font-size: 40px; color: var(--green); font-weight: normal; }
.die small { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }
.die.situation { border-color: var(--teal); }
.die.situation b { color: var(--teal); }
.diceNote { flex: 1 1 0; font-size: 15px; color: var(--text-2); }
/* situation die Steps: real buttons now (2026-09-30, working Core Mechanic box) */
.steps { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.steps button {
	height: 40px; padding: 0; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2);
	font-family: 'boost_ssiregular', Tahoma, sans-serif; font-size: 11px; color: var(--teal); cursor: pointer;
}
.steps button:hover { border-color: var(--teal); }
.steps button.bonus { color: var(--green); }
.steps button.zero { color: var(--text); }
.steps button.on { background: var(--teal); border-color: var(--teal); color: var(--on-light); }
.stepNums { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.stepNums button {
	height: 28px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent;
	font-family: 'boost_ssiregular', Tahoma, sans-serif; font-size: 12px; color: var(--teal); cursor: pointer;
}
.stepNums button:hover { border-color: var(--line-2); }
.stepNums button.bonus { color: var(--green); }
.stepNums button.zero { color: var(--text); }
.stepNums button.on { border-color: var(--teal); }
.stepsKey { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 8px; }
.dcPlus { font-size: 32px; color: var(--muted); width: 20px; text-align: center; }
.dcResult { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dcResult b { font-size: 24px; color: var(--text); font-weight: normal; line-height: 1.1; }
.dcResult span { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.dcResult.amazing b { color: var(--green); }
.dcResult.good b { color: var(--green-2); }
.dcResult.ordinary b { color: var(--teal); }
.dcResult.fail b { color: var(--muted); }
.dcResult.crit b { color: #FF8A8A; }
.dcScoreRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dcScoreRow label { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.dcStepper { display: flex; }
.dcStepper input {
	width: 60px; height: 44px; text-align: center; font-size: 18px;
	background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-left: 0; border-right: 0;
	-moz-appearance: textfield; appearance: textfield;
}
.dcStepper input::-webkit-outer-spin-button, .dcStepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dcBump { width: 44px; height: 44px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--green); font-size: 20px; cursor: pointer; }
.dcBump:first-child { border-radius: 6px 0 0 6px; }
.dcBump:last-child { border-radius: 0 6px 6px 0; }
.dcThresholds { font-size: 13px; color: var(--muted); }
#dcRoll { width: 100%; }
#dcRoll:disabled { opacity: 0.7; cursor: wait; }
.dcHistory { font-size: 12px; color: var(--muted); min-height: 18px; }
.diceConsole.rolling .die { border-style: dashed; }
.diceStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }
.diceStats b { display: block; font-size: 26px; color: var(--green); font-weight: normal; }
.diceStats small { font-size: 13px; color: var(--muted); }

/* --- Home: setting cards --- */
.settingCard { display: flex; flex-direction: column; overflow: hidden; color: var(--text); }
.settingCard:hover { border-color: var(--line-2); color: var(--text); }
.settingCard .artHolder { height: 200px; overflow: hidden; }
.settingCard .artHolder img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.3s; }
.settingCard:hover .artHolder img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .settingCard .artHolder img { transition: none; } .settingCard:hover .artHolder img { transform: none; } }
.settingCard .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.settingCard h3 { font-size: 28px; }
.settingCard p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* --- Home: article + video panels --- */
.listPanel { padding: 32px; display: flex; flex-direction: column; }
.listPanel .sectionHead { margin-bottom: 12px; }
.listPanel .sectionHead h2 { font-size: 32px; }
.articleRow { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text); }
.articleRow:hover { color: var(--text); background: rgba(45, 212, 191, 0.04); }
.articleRow .year { width: 64px; flex-shrink: 0; font-size: 12px; color: var(--muted); padding-top: 4px; }
.articleRow b { display: block; font-size: 17px; font-weight: 600; }
.articleRow small { font-size: 14px; color: var(--muted); }
.articleRow small .kind { color: var(--teal); }
.videoMain { height: 250px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.videoMain iframe { width: 100%; height: 100%; border: 0; display: block; }
.videoEmpty { height: 250px; border-radius: 8px; border: 1px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted); text-align: center; padding: 24px; }
.videoThumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.videoThumbs a { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.35; }
.videoThumbs .vidThumb { width: 100%; margin-bottom: 8px; }
/* 2026-09-30: video thumbnails carry the YouTube mark, so it's clear they're YouTube videos */
.vidThumb { position: relative; display: block; width: 108px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.vidThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytMark { position: absolute; inset: 0; display: grid; place-items: center; }
.ytMark i { font-size: 26px; color: #FF0033; line-height: 1; background: radial-gradient(circle, #fff 30%, transparent 32%); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.videoThumbs .ytMark i { font-size: 32px; }
a:hover .ytMark i { color: #FF3355; }
.ytNote { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ytNote i { color: #FF0033; font-size: 16px; }
.resultsHead + .ytNote { margin: 4px 0 4px; }
.go.VIDEO { white-space: nowrap; }
.go.VIDEO .fa-youtube { color: #FF0033; font-size: 16px; }

/* --- download table --- */
.dlTable { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dlTable th { background: var(--panel-2); text-align: left; font-weight: normal; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 20px; }
.dlTable td { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.dlTable td.title { font-weight: 600; }
.dlTable td.type { color: var(--teal); }
.dlTable td.muted { color: var(--muted); }
.dlTable td.act { text-align: right; }

/* --- store tiles --- */
.productTile { display: flex; flex-direction: column; overflow: hidden; }
/* 2026-09-30 book covers are tall, so show the whole cover on the striped
   background instead of cropping it to fill the box */
.productTile .artHolder { height: 240px; padding: 16px; }
.productTile .artHolder img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 18px rgba(0,0,0,0.55); }
.productTile .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.productTile b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.productTile small { font-size: 13px; color: var(--muted); }
.productTile .btn { margin-top: auto; width: 100%; }

/* --- community (front page cards, 2026-09-30) --- */
.communityBand { background: var(--band); border-bottom: 1px solid var(--line); }
.communityCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.communityCard { padding: 28px; display: flex; flex-direction: column; gap: 14px; color: var(--text); transition: border-color 0.15s; }
.communityCard:hover { border-color: var(--teal); color: var(--text); }
.communityCard .commTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.communityCard .commTop i { font-size: 36px; color: var(--teal); }
.communityCard .platform { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.communityCard b { font-size: 22px; font-weight: normal; color: var(--green); line-height: 1.15; overflow-wrap: anywhere; }	/* 2026-09-30 Boost SSi runs wider: 22px keeps "AlternityRPG.net" on one line in the 4-across cards */
.communityCard .commText { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.communityCard .commJoin { margin-top: auto; align-self: flex-start; }
.alsoLinks { margin-top: 20px; color: var(--muted); font-size: 14px; }
/* AlternityBeyond banner strip (2026-09-30) */
.abBanner { margin-top: 20px; padding: 20px 28px; display: flex; align-items: center; gap: 28px; color: var(--text); }
.abBanner:hover { border-color: var(--green-2); color: var(--text); }
.abBanner img { width: 100%; max-width: 480px; height: auto; flex-shrink: 1; min-width: 0; }
.abBanner .abText { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.abBanner .platform { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.abBanner .btn { flex-shrink: 0; }
/* (older layout, kept for other pages) */
.communityGrid { display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; align-items: start; }
.communityLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.communityLinks a { padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text); }
.communityLinks a:hover { border-color: var(--line-2); }
.communityLinks b { display: block; font-size: 18px; font-weight: 600; }
.communityLinks small { color: var(--muted); font-size: 14px; }
.communityLinks i { color: var(--teal); }

/* --- Resources page --- */
.pageHead { padding: 48px var(--page-pad) 36px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.pageHead h1 { font-size: 56px; line-height: 1.05; }
.crumbs { font-size: 13px; letter-spacing: 0.1em; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs span { color: var(--teal); }
.searchRow { display: flex; gap: 12px; }
.searchBox { flex-grow: 1; height: 56px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.searchBox i { color: var(--teal); }
.searchBox input { flex-grow: 1; height: 50px; border: 0; background: transparent; color: var(--text); font-size: 17px; font-family: 'IBM Plex Sans', Tahoma, sans-serif; outline: none; }
.fieldLabel { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--line-2); color: var(--text); font-size: 14px; letter-spacing: 0.04em; }
.chip:hover { border-color: var(--green); color: var(--green); }
.chip.on { background: var(--green); border-color: var(--green); color: var(--on-light); }
.chip .count { font-size: 12px; opacity: 0.75; }
.resBody { padding: 40px var(--page-pad) 72px; display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.sideNav { display: flex; flex-direction: column; gap: 28px; }
.sideNav .group { display: flex; flex-direction: column; gap: 4px; }
.sideNav .groupLabel { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; padding: 0 12px 8px; text-transform: uppercase; }
.sideNav a.navItem { min-height: 44px; padding: 0 12px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 15px; }
.sideNav a.navItem:hover { background: var(--panel); }
.sideNav a.navItem.on { background: #0F201A; color: var(--green); }
.sideNav a.navItem small { color: var(--muted); font-size: 12px; }
.sideNav fieldset { margin: 0; padding: 0 12px; border: 0; display: flex; flex-direction: column; gap: 12px; }
.sideNav legend { padding: 0 0 10px; font-size: 12px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.sideNav label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.sideNav input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green-2); }
.sideNav select { width: 100%; height: 44px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); padding: 0 10px; font-size: 15px; }
.resultsHead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; gap: 12px; }
.resultsHead h2 { font-size: 28px; }
.resultsHead small { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }
.resultRow { display: grid; grid-template-columns: 108px minmax(0, 1fr) 180px; gap: 20px; align-items: center; padding: 18px 20px; margin-top: 12px; border-radius: 8px; color: var(--text); }
.resultRow:hover { border-color: var(--line-2); color: var(--text); }
.resultRow b { display: block; font-size: 18px; font-weight: 600; }
.resultRow small { font-size: 14px; color: var(--muted); }
.resultRow small em { font-style: normal; color: var(--text-2); }
.resultRow .go { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.badge { justify-self: start; height: 28px; padding: 0 10px; border-radius: 4px; display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.06em; border: 1px solid var(--line-2); color: var(--green); white-space: nowrap; }
.badge.REVIEW  { border-color: var(--green); }
.badge.VIDEO   { border-color: var(--teal); color: var(--teal); }
.badge.FANPDF  { background: var(--green-2); border-color: var(--green-2); color: var(--on-light); }
.badge.STORE   { background: var(--teal); border-color: var(--teal); color: var(--on-light); }
.go.VIDEO, .go.STORE { color: var(--teal); }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--line-2); }
.pager span.on { background: var(--green); border-color: var(--green); color: var(--on-light); }
.pager span.gap { border: 0; color: var(--muted); }
.rail { display: flex; flex-direction: column; gap: 20px; }
.rail .panel { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.rail .label { font-size: 12px; letter-spacing: 0.1em; color: var(--teal); text-transform: uppercase; }
.factRow { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.factRow span { color: var(--muted); }
.factRow b { text-align: right; font-weight: 600; }
.railLink { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.railLink span { color: var(--muted); font-weight: 400; }

/* --- forms (Submit page) --- */
.formWrap { max-width: 760px; margin: 0 auto; padding: 48px 16px 88px; }
.formWrap .panel { padding: 32px; }
.formRow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.formRow label, .formRow legend { font-size: 14px; color: var(--muted); }
.formRow input[type=text], .formRow input[type=email], .formRow input[type=url], .formRow select, .formRow textarea {
	width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px;
	background: var(--bg); color: var(--text); font-size: 16px; font-family: 'IBM Plex Sans', Tahoma, sans-serif;
}
.formRow textarea { min-height: 120px; resize: vertical; }
.formRow input[type=file] { color: var(--text-2); }
.formRow .hint { font-size: 13px; color: var(--muted); }
.formRow fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--green-2); }
.checkLine { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.checkLine input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green-2); flex-shrink: 0; }
.twoCol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { padding: 14px 16px; border-radius: 8px; margin-bottom: 20px; }
.msg-bad { background: #3A1414; color: #FFD4D4; border: 1px solid #6B2A2A; }
.msg-bad ul { margin: 6px 0 0; padding-left: 20px; }
.msg-good { background: #0F201A; color: var(--green); border: 1px solid var(--teal); }

/* --- footer --- */
.siteFooter { border-top: 1px solid var(--line); padding: 48px var(--page-pad); display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; background: var(--bg-deep); }
.siteFooter .siteName { font-size: 22px; letter-spacing: 0.06em; color: var(--green); }
.siteFooter p { margin-top: 12px; max-width: 640px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.footCols { display: flex; gap: 48px; font-size: 14px; }
.footCols div { display: flex; flex-direction: column; gap: 10px; }
.footCols span { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; }

/* --- smaller screens --- */
/* 2026-09-30 the "AlternityRPG.com" wordmark is wider than the old
   "ALTERNITY" one, so below 1600px the menu gets its own row under the
   wordmark and search box (before, it squeezed into 2-3 lines). */
@media (max-width: 1600px) {
	.siteNav { padding-top: 12px; padding-bottom: 8px; }
	.navLinks { order: 3; flex-basis: 100%; }
}
@media (max-width: 1200px) {
	.navLinks { gap: 6px 18px; }
	:root { --page-pad: 32px; }
	.hero { flex-direction: column; align-items: stretch; }
	.diceConsole { width: 100%; }
	.grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.communityCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.resBody { grid-template-columns: 220px minmax(0, 1fr); }
	.rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.navSearch { display: none; }
}
@media (max-width: 800px) {
	:root { --page-pad: 16px; }
	.sysStrip > div:last-child { display: none; }
	.siteNav { flex-direction: column; align-items: flex-start; padding-top: 16px; padding-bottom: 12px; }
	.navLinks { gap: 6px 18px; font-size: 13px; }
	/* 2026-09-30 the longer "AlternityRPG.com" wordmark: smaller on phones,
	   and the FAN ARCHIVE label drops under it if it has to */
	.wordmark { flex-wrap: wrap; gap: 2px 10px; white-space: normal; }
	.wordmark .siteName { font-size: 22px; white-space: nowrap; }
	.heroText h1 { font-size: 38px; }
	.heroText p { font-size: 16px; }
	.heroButtons .btn { width: 100%; }
	.diceRow { flex-wrap: wrap; }
	.abBanner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
	.abBanner img { max-width: 100%; }
	.diceNote { flex-basis: 100%; }
	.die { width: 72px; height: 72px; }
	.die b { font-size: 24px; }
	.steps, .stepNums { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.steps button { font-size: 12px; height: 40px; }
	.dcResult { flex-basis: 100%; }
	.section { padding: 48px var(--page-pad); }
	.sectionHead h2, .pageHead h1 { font-size: 30px; }
	.grid2, .grid3, .grid5, .communityGrid, .communityLinks, .communityCards, .twoCol, .rail { grid-template-columns: minmax(0, 1fr); }
	.resBody { grid-template-columns: minmax(0, 1fr); }
	.resultRow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.resultRow .go { justify-self: start; }
	.dlTable thead { display: none; }
	.dlTable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); padding: 12px 16px; gap: 4px 12px; }
	.dlTable td { border: 0; padding: 0; }
	.dlTable td.act { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
	.dlTable td.hideSmall { display: none; }
	.siteFooter { flex-direction: column; }
	.searchRow { flex-direction: column; }
}


/* ==========================================================================
   Admin pages (2026-09-30, phase 3: CMS). Only used under /Admin/.
   ========================================================================== */
.adminWrap { max-width: 1240px; margin: 0 auto; padding: 32px 16px 88px; }
.adminWrap h1 { font-size: 40px; margin: 10px 0 18px; }
.adminWrap h2 { font-size: 24px; margin: 0 0 14px; }
.adminBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin-bottom: 24px; }
.adminBar a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 6px; color: var(--text); border: 1px solid transparent; font-size: 13px; letter-spacing: 0.06em; }
.adminBar a:hover { border-color: var(--line-2); color: var(--green); }
.adminBar a.here { border-color: var(--teal); color: var(--teal); }
.adminBar .who { margin-left: auto; color: var(--muted); font-size: 13px; padding: 0 8px; }
.adminBar .count { background: var(--teal); color: var(--on-light); border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.adminCard { padding: 24px; margin-bottom: 24px; }
.adminCard > .CharSheetLabel:first-child { display: block; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; }
.dashTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.dashTile { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); }
.dashTile:hover { border-color: var(--teal); color: var(--text); }
.dashTile b { display: block; font-size: 34px; line-height: 1.1; color: var(--green); font-weight: 600; }
.dashTile span { display: block; font-size: 14px; margin-top: 2px; }
.dashTile small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.dashTile.alert b { color: var(--teal); }
.adminCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tableScroll { overflow-x: auto; }
.admTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.admTable th { text-align: left; font-weight: normal; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.admTable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admTable tr:hover td { background: var(--panel-2); }
.admTable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.admTable td.acts { text-align: right; white-space: nowrap; }
.admTable .sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; letter-spacing: 0.06em; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.pill.PUBLISHED, .pill.APPROVED, .pill.ok { border-color: var(--green-2); color: var(--green); }
.pill.DRAFT, .pill.PENDING, .pill.warn { border-color: #C9A227; color: #F2D06B; }
.pill.HIDDEN, .pill.info { border-color: var(--line-2); color: var(--muted); }
.pill.REJECTED, .pill.SPAM, .pill.bad { border-color: #B3473F; color: #FF9C94; }
.inlineForm { display: inline; margin: 0; }
.linkBtn { background: none; border: 0; padding: 0 0 0 12px; color: var(--teal); font: inherit; font-size: 14px; cursor: pointer; }
.linkBtn:hover { color: var(--green); text-decoration: underline; }
.btn-danger { background: transparent; color: #FF9C94; border-color: #B3473F; }
.btn-danger:hover { background: #3A1414; color: #FFD4D4; }
.admFilters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.admFilters select, .admFilters input[type=search] { height: 40px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); padding: 0 10px; font-size: 14px; }
.admFilters input[type=search] { min-width: 220px; }
.adminForm .formRow input[type=number], .adminForm .formRow input[type=password] {
	height: 44px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); padding: 0 12px; font-size: 15px; font-family: inherit;
}
.threeCol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.formActions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.subCard { padding: 24px; margin-bottom: 20px; }
.subFacts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; font-size: 14px; margin-bottom: 18px; }
.subFacts dt { color: var(--muted); }
.subFacts dd { margin: 0; overflow-wrap: anywhere; }
.imgPreview { max-width: 160px; max-height: 160px; border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; }
.dangerZone { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 800px) {
	.adminCols, .threeCol { grid-template-columns: minmax(0, 1fr); }
	.adminWrap h1 { font-size: 30px; }
	.adminBar { gap: 4px; padding: 8px; }
	.adminBar a { min-height: 36px; padding: 0 10px; }
	.adminBar .who { display: none; }
	.subFacts { grid-template-columns: minmax(0, 1fr); }
	.subFacts dt { margin-top: 6px; }
}


/* ==========================================================================
   Primer.cfm -- "New to Alternity?" (2026-10-01)
   ========================================================================== */
.primerLead { max-width: 860px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.primerCols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.primerH2 { font-size: 44px; line-height: 1.1; margin-bottom: 18px; }
.primerH3 { font-size: 20px; letter-spacing: 0.04em; margin: 44px 0 14px; }
.primerText { max-width: 820px; font-size: 16px; line-height: 1.7; color: var(--text-2); margin-bottom: 14px; }
.primerText b, .primerHow b, .primerTwo b { color: var(--text); }
.primerFacts { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.primerFacts .label { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.primerCards .panel { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.primerCards .panel b { color: var(--green); font-size: 17px; }
.primerCards .panel span { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.primerCards .panel i { color: var(--teal); font-size: 22px; margin-bottom: 4px; }
.primerHow .panel, .primerTwo .panel { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.primerHow h3, .primerTwo h3 { font-size: 20px; }
.primerHow p, .primerTwo p { color: var(--text-2); line-height: 1.65; font-size: 15px; }
.primerNum { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--teal); color: var(--teal); display: grid; place-items: center; font-size: 16px; }
.primerTwo { margin-top: 44px; }
.stepScale { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; max-width: 980px; }
.stepScale span { display: grid; place-items: center; height: 44px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 13px; }
.stepScale .bonus { color: var(--green); }
.stepScale .zero { background: var(--teal); border-color: var(--teal); color: var(--on-light); }
.stepScale .penalty { color: #F2D06B; }
.stepKey, .successKey { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 980px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.successBar { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 980px; }
.successBar span { display: grid; place-items: center; height: 40px; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--on-light); }
.successBar .amazing, .successKey .amazing { background: var(--teal); }
.successBar .good, .successKey .good { background: var(--green-2); }
.successBar .ordinary, .successKey .ordinary { background: #3E6B55; }
.successBar .ordinary { color: var(--text); }
.successBar .failure, .successKey .failure { background: var(--panel-2); border: 1px solid var(--line-2); }
.successBar .failure { color: var(--muted); }
.successKey { justify-content: flex-start; gap: 20px; }
.successKey span { display: inline-flex; align-items: center; gap: 6px; }
.successKey i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
/* 2026-10-01, Scott: read down the left column (PL 0-4), then the right (PL 5-9) */
.plList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 6px 18px; font-size: 14px; }
.plList div { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.plList b { color: var(--teal); font-weight: normal; min-width: 44px; }
.plList span { color: var(--text-2); }
.primerQuote { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.primerQuote i { font-size: 32px; color: var(--teal); }
.primerQuote p { font-size: 20px; line-height: 1.5; color: var(--text); }
.primerQuote span { font-size: 13px; color: var(--muted); }
.startList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.startList li { display: flex; flex-direction: column; gap: 2px; }
.startList a { font-weight: 600; }
.startList span { font-size: 14px; color: var(--text-2); }
@media (max-width: 1000px) {
	.primerCols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
	.primerH2 { font-size: 30px; }
	.stepScale { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.successBar { grid-template-columns: repeat(10, minmax(0, 1fr)); }
	.plList { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

/* ==========================================================================
   Kind / type icons (2026-10-02). Scott: "some identifying icons or graphics
   for the different sorts of materials ... the site is a bit monochromatic".
   Each kind or download type has its own colour (--tc); tiles and icons are
   tinted with it. The icon names are in cfc/Downloads.cfc (TypeIcon) and
   Resources.cfm (kindIcons).
   ========================================================================== */
.k-ARTICLE    { --tc: #93C5FD; }
.k-REVIEW     { --tc: #FCD34D; }
.k-STORE      { --tc: #2DD4BF; }
.k-VIDEO      { --tc: #FF5A6E; }
.k-SHEET      { --tc: #86EFAC; }
.k-ADVENTURE  { --tc: #FDBA74; }
.k-RULES_AID  { --tc: #A5B4FC; }
.k-CONVERSION { --tc: #D8B4FE; }
.k-SUPPLEMENT { --tc: #67E8F9; }
.k-FAN_ART    { --tc: #F9A8D4; }
.k-BATTLE_MAP { --tc: #FCA5A5; }
.k-DECK_PLANS { --tc: #BEF264; }
.k-OTHER      { --tc: #CBD5E1; }
/* the big tile in the Resources list (same size as a video thumbnail) */
.kindTile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	width: 108px; aspect-ratio: 16 / 9; border-radius: 6px; color: var(--tc, var(--green));
	background: var(--panel-2); border: 1px solid var(--line-2); }
.kindTile { background: color-mix(in srgb, var(--tc, var(--green)) 13%, var(--panel)); border-color: color-mix(in srgb, var(--tc, var(--green)) 45%, transparent); }
.kindTile i { font-size: 22px; line-height: 1; }
.resultRow .kindTile .ktLabel { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc, var(--green)); line-height: 1; }
a.resultRow:hover .kindTile { border-color: var(--tc, var(--green)); }
/* the small square beside a title (Home downloads table, Admin list) */
.kindIcon { flex-shrink: 0; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--tc, var(--green));
	background: var(--panel-2); border: 1px solid var(--line-2); }
.kindIcon { background: color-mix(in srgb, var(--tc, var(--green)) 13%, var(--panel)); border-color: color-mix(in srgb, var(--tc, var(--green)) 45%, transparent); }
.kindIcon i { font-size: 17px; }
.kindIcon.small { width: 30px; height: 30px; border-radius: 6px; }
.kindIcon.small i { font-size: 13px; }
.dlName { display: flex; align-items: center; gap: 14px; }
.dlTable td.type[class*="k-"] { color: var(--tc); }


/* ==========================================================================
   Removal requests (2026-10-02): RequestRemoval.cfm, Admin/Removals.cfm,
   and the red alert an Admin sees on every page while one is waiting
   ========================================================================== */
.formRow fieldset.stack { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.choice.choiceLine { padding: 10px 16px; line-height: 1.4; }
.adminAlert { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
	background: #3A1414; color: #FFD4D4; border-bottom: 1px solid #6B2A2A; padding: 10px 16px; font-size: 14px; text-align: center; }
.adminAlert i { color: #FF9C94; }
.adminAlert a { color: #FFFFFF; font-weight: 600; text-decoration: underline; }
.adminBar .count.bad { background: #B3473F; color: #FFFFFF; }
.dashTile.urgent { border-color: #B3473F; }
.dashTile.urgent b { color: #FF9C94; }
.remDetails { white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin: 0; }
.subCard.removal { border-color: #6B2A2A; }


/* ==========================================================================
   Home hero art (2026-10-03). Scott: "i like ALL of them ... a random or
   rotating style". Home.cfm picks one ART and one TREATMENT at random on
   each visit (never the same pair twice in a row), unless ?hero= asks for
   one. Classes on <section class="hero">:
     .heroImg            there's art at all
     .art-artifact / .art-cover / .art-lockwood ...  which picture
     .artAnchored        a book cover placed from the right (see below)
     .heroA / .heroB / .heroC                      how it's treated:
        A  full colour, right-anchored, see-through dice console with a glow
        B  green duotone (the site's own colours) + scanlines
        C  full colour across the whole hero, accents shifted to magenta
   Each picture sets its files and where it sits; the treatments use them.
   Layers: ::before = the picture, ::after = the shading, then the content.
   ========================================================================== */
.hero.heroImg { isolation: isolate;
	--artPos: right -220px center; --artSize: auto 118%; --artCPos: center 45%; --artSpot: 58% 46%; }
.hero.heroImg::before, .hero.heroImg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero.heroImg::before { z-index: -2; background: var(--heroArt) var(--artPos) / var(--artSize) no-repeat; }
.hero.heroImg::after  { z-index: -1; background: var(--heroShade); }
.hero.heroImg .stars { z-index: -1; }

/* --- the pictures --- */
/* the Alien Artifact (phone photo of the print, edges trimmed): the pyramid
   sits behind the dice console */
.hero.art-artifact { --artColor: url(/img/hero/artifact.jpg); --artDuo: url(/img/hero/artifact-duo.jpg);
	--artColorSm: url(/img/hero/artifact-sm.jpg); --artDuoSm: url(/img/hero/artifact-duo-sm.jpg); }
/* the core rulebook cover, without its logo strip, MIRRORED (Scott,
   2026-10-03) so the helmeted face looks right and sits in the open gap
   between the text and the dice console; the rifle and red nebula run
   behind the console. The face is ~30% across the picture, and the gap is
   ~616px in from the right edge at any width (console 520 + gap + padding),
   so the picture is anchored from the right. 2026-10-03, Scott: "move it
   to the left a bit" -> right -110px at 108% height; the picture's own
   left edge is faded to black in the file, so there's no visible seam. */
.hero.art-cover { --artColor: url(/img/hero/cover.jpg); --artDuo: url(/img/hero/cover-duo.jpg);
	--artColorSm: url(/img/hero/cover.jpg); --artDuoSm: url(/img/hero/cover-duo.jpg);
	--artPos: right -110px center; --artSize: auto 108%; --artCPos: 30% 40%; --artSpot: 56% 48%; }
/* A and B: lighter shading over the gap, so the face isn't dimmed */
.hero.heroA.artAnchored, .hero.heroB.artAnchored { --heroShadeSide:
	linear-gradient(90deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0.95) 34%, rgba(4,7,6,0.5) 46%, rgba(4,7,6,0.08) 55%, rgba(4,7,6,0.2) 100%); }
.hero.heroA.artAnchored { --heroShade: var(--heroShadeSide),
	linear-gradient(0deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0) 24%), linear-gradient(180deg, rgba(4,7,6,0.7) 0%, rgba(4,7,6,0) 18%); }
.hero.heroB.artAnchored { --heroShade: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px), var(--heroShadeSide),
	linear-gradient(0deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0) 24%); }
/* C normally fills the hero edge to edge; for the cover that would put the
   face behind the text, so it keeps the right-anchored placement */
.hero.heroC.artAnchored::before { background: var(--heroArt) var(--artPos) / var(--artSize) no-repeat; }
/* 2026-10-03: the Gamemaster Guide cover art (al2-gmg.jpg) -- cropped
   between the title and the author line (no lettering or logos), MIRRORED
   like the rulebook cover so the alien's face sits in the gap beside the
   dice console, the planet and specimen jar behind the console; left edge
   faded to black in the file */
.hero.art-gmg { --artColor: url(/img/hero/gmg.jpg); --artDuo: url(/img/hero/gmg-duo.jpg);
	--artColorSm: url(/img/hero/gmg.jpg); --artDuoSm: url(/img/hero/gmg-duo.jpg);
	--artPos: 68% center; --artSize: auto 108%; --artCPos: 25% 40%; --artSpot: 52% 45%; }
/* 2026-10-03: seven more covers, the same way: cropped between the title and
   the author line (no lettering, logos or badges), left and right edges
   faded to black in the files, the main figure placed in (or near) the gap
   beside the dice console. Three are mirrored (lighthouse, mindwalking,
   tangents) so their figure reaches the gap. Each picture's position:
   right Npx = how far in from the right edge it ends; "top" keeps faces
   that sit high in the art in view.
   2026-10-03, Scott: GM Guide, Beyond Science, Campaign Kit and Tangents
   moved left -- placed by percentage (68-74% across), so on wider screens
   they drift toward the middle instead of hugging the console. Checked live
   at 1721px wide: each figure sits just past the end of the headline. */
.hero.art-beyond { --artColor: url(/img/hero/beyond.jpg); --artDuo: url(/img/hero/beyond-duo.jpg);
	--artColorSm: url(/img/hero/beyond.jpg); --artDuoSm: url(/img/hero/beyond-duo.jpg);
	--artPos: 74% center; --artSize: auto 108%; --artCPos: 49% 30%; --artSpot: 52% 40%; }
.hero.art-camkit { --artColor: url(/img/hero/camkit.jpg); --artDuo: url(/img/hero/camkit-duo.jpg);
	--artColorSm: url(/img/hero/camkit.jpg); --artDuoSm: url(/img/hero/camkit-duo.jpg);
	--artPos: 74% top; --artSize: auto 108%; --artCPos: 42% 15%; --artSpot: 52% 30%; }
.hero.art-dataware { --artColor: url(/img/hero/dataware.jpg); --artDuo: url(/img/hero/dataware-duo.jpg);
	--artColorSm: url(/img/hero/dataware.jpg); --artDuoSm: url(/img/hero/dataware-duo.jpg);
	--artPos: right 120px center; --artSize: auto 108%; --artCPos: 50% 50%; }
.hero.art-lighthouse { --artColor: url(/img/hero/lighthouse.jpg); --artDuo: url(/img/hero/lighthouse-duo.jpg);
	--artColorSm: url(/img/hero/lighthouse.jpg); --artDuoSm: url(/img/hero/lighthouse-duo.jpg);
	--artPos: right 24px center; --artSize: auto 108%; --artCPos: 32% 35%; }
.hero.art-mindwalking { --artColor: url(/img/hero/mindwalking.jpg); --artDuo: url(/img/hero/mindwalking-duo.jpg);
	--artColorSm: url(/img/hero/mindwalking.jpg); --artDuoSm: url(/img/hero/mindwalking-duo.jpg);
	--artPos: right 33px top; --artSize: auto 108%; --artCPos: 39% 15%; --artSpot: 58% 30%; }
.hero.art-starships { --artColor: url(/img/hero/starships.jpg); --artDuo: url(/img/hero/starships-duo.jpg);
	--artColorSm: url(/img/hero/starships.jpg); --artDuoSm: url(/img/hero/starships-duo.jpg);
	--artPos: right 120px center; --artSize: auto 108%; --artCPos: 57% 50%; }
.hero.art-tangents { --artColor: url(/img/hero/tangents.jpg); --artDuo: url(/img/hero/tangents-duo.jpg);
	--artColorSm: url(/img/hero/tangents.jpg); --artDuoSm: url(/img/hero/tangents-duo.jpg);
	--artPos: 74% top; --artSize: auto 108%; --artCPos: 31% 12%; --artSpot: 52% 28%; }
/* A's console glow: warm orange for the anchored covers (most are reds and
   golds), teal for the cool ones */
.hero.heroA.artAnchored .diceConsole { border-color: rgba(251,146,60,0.4); box-shadow: 0 0 80px rgba(234,88,12,0.22); }
.hero.heroA.art-dataware .diceConsole, .hero.heroA.art-camkit .diceConsole { border-color: rgba(45,212,191,0.45); box-shadow: 0 0 80px rgba(45,212,191,0.2); }
/* Lockwood's three hero pairs (the white paper darkened): a row of
   "personnel file" panels */
.hero.art-lockwood { --artColor: url(/img/hero/lockwood.jpg); --artDuo: url(/img/hero/lockwood-duo.jpg);
	--artColorSm: url(/img/hero/lockwood-sm.jpg); --artDuoSm: url(/img/hero/lockwood-duo-sm.jpg);
	--artPos: right 0 center; --artSize: auto 104%; --artCPos: center 30%; --artSpot: 55% 45%; }

/* --- the treatments --- */
/* A: full colour behind a see-through console */
.hero.heroA {
	--heroArt: var(--artColor);
	--heroShade:
		linear-gradient(90deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0.95) 30%, rgba(4,7,6,0.55) 50%, rgba(4,7,6,0.12) 72%, rgba(4,7,6,0.3) 100%),
		linear-gradient(0deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0) 24%),
		linear-gradient(180deg, rgba(4,7,6,0.7) 0%, rgba(4,7,6,0) 18%);
}
.hero.heroA .diceConsole { background: rgba(9,18,15,0.62); border-color: rgba(240,171,252,0.38);
	box-shadow: 0 0 80px rgba(217,70,239,0.28), inset 0 0 0 1px rgba(255,255,255,0.03);
	-webkit-backdrop-filter: blur(5px) saturate(1.15); backdrop-filter: blur(5px) saturate(1.15); }
/* the cover is red and orange, not magenta: a warmer glow */
.hero.heroA.art-lockwood .diceConsole { border-color: rgba(182,247,196,0.3); box-shadow: 0 0 70px rgba(45,212,191,0.15); }

/* B: green signal (duotone + scanlines) */
.hero.heroB {
	--heroArt: var(--artDuo);
	--heroShade:
		repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px),
		linear-gradient(90deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0.92) 30%, rgba(4,7,6,0.45) 52%, rgba(4,7,6,0.1) 75%, rgba(4,7,6,0.35) 100%),
		linear-gradient(0deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0) 24%);
}
.hero.heroB .diceConsole { background: rgba(9,18,15,0.78); border-color: rgba(45,212,191,0.45);
	box-shadow: 0 0 70px rgba(45,212,191,0.18);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* C: magenta shift, the art across the whole hero */
.hero.heroC {
	--heroArt: var(--artColor);
	--heroShade:
		radial-gradient(ellipse 45% 70% at var(--artSpot), rgba(4,7,6,0) 0%, rgba(4,7,6,0.5) 55%, rgba(4,7,6,0.9) 100%),
		linear-gradient(90deg, rgba(4,7,6,0.97) 0%, rgba(4,7,6,0.85) 32%, rgba(4,7,6,0.2) 55%, rgba(4,7,6,0.55) 100%),
		linear-gradient(0deg, rgba(4,7,6,1) 0%, rgba(4,7,6,0) 22%);
	--teal: #E879F9; --green: #F5D0FE; --green-2: #E879F9; --line: rgba(232,121,249,0.28); --line-2: rgba(232,121,249,0.45);
	border-bottom-color: rgba(232,121,249,0.35);
}
.hero.heroC::before { background: var(--heroArt) var(--artCPos) / cover no-repeat; }
.hero.heroC .heroText h1 { text-shadow: 0 0 28px rgba(217,70,239,0.45); }
.hero.heroC .diceConsole { background: rgba(22,8,26,0.72); border-color: rgba(232,121,249,0.4);
	box-shadow: 0 0 80px rgba(217,70,239,0.25);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* narrower screens: the console drops under the text, so the art sits
   behind everything, more shaded; smaller files */
@media (max-width: 1200px) {
	.hero.heroImg::before, .hero.heroC::before, .hero.heroC.artAnchored::before { background-position: var(--artCPos); background-size: cover; }
	.hero.heroA, .hero.heroC { --heroArt: var(--artColorSm); }
	.hero.heroB { --heroArt: var(--artDuoSm); }
	.hero.heroImg::after { background: linear-gradient(180deg, rgba(4,7,6,0.55) 0%, rgba(4,7,6,0.82) 45%, rgba(4,7,6,0.95) 100%); }
}

/* the Admin-only switcher under the hero */
.heroLab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px var(--page-pad); background: var(--panel-2);
	border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.06em; }
.heroLab span, .heroLab label { color: var(--muted); margin-right: 6px; }
.heroLab select { height: 34px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); padding: 0 10px; font-size: 13px; max-width: 100%; }
.heroLab span.now { color: var(--teal); margin-left: auto; }
.heroLab a { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 16px; color: var(--text); }
.heroLab a:hover { border-color: var(--teal); color: var(--teal); }
.heroLab a.on { background: var(--teal); border-color: var(--teal); color: var(--on-light); }