/* Alpha Processor, Inc. — restored archive
   Same visual system as the site's other public-facing template
   (content-googlebot.php): dark ground, red brand accent, notched-corner
   panels instead of rounded cards or ruled borders. */

*, *::before, *::after { box-sizing: border-box; }

:root {
	--brand:      #E8121F;
	--brand-hi:   #FF3A47;
	--brand-lo:   #96070F;
	--brand-soft: rgba(232, 18, 31, .13);
	--brand-edge: rgba(232, 18, 31, .34);
	--halo:       rgba(232, 18, 31, .40);
	--tint:       #FFD3D6;

	--paper:      #0A0B0D;
	--paper-2:    #0E1013;
	--sheet:      #16191E;
	--sheet-2:    #1D222A;
	--ink:        #F4F6F8;
	--ink-2:      #FFFFFF;
	--muted:      #98A3B0;
	--edge:       rgba(255, 255, 255, .08);

	/* the restored article HTML below is 1999-2002 markup authored with
	   hardcoded black text / light table cells for a white page — it stays
	   on its own light "paper" surface rather than fighting the dark shell */
	--doc-bg:     #FFFFFF;
	--doc-ink:    #202225;
	--doc-edge:   #E4E4E4;

	--radius: 10px;
	--notch: 14px;
	--notch-sm: 9px;
	--shadow: 0 14px 34px rgba(0, 0, 0, .38);
	--font: 'Inter', 'SF Pro Text', system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--max: 1160px;
	--gutter: clamp(1rem, 4vw, 2rem);
	--headh: 64px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	color: var(--ink);
	background-color: var(--paper);
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 96px);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a.inline-link, .prose a, .site-footer a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 { line-height: 1.16; margin: 0 0 0.5em; letter-spacing: -0.015em; font-weight: 800; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem); font-weight: 750; margin-top: 2.25rem; }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); font-weight: 700; margin-top: 1.5rem; }
p, ul, ol, dl, pre, table { margin: 0 0 1em; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--edge); margin: 2rem 0; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* notched-corner panel, drawn as a clip-path instead of a border-radius —
   the recurring shape language across this site's front-end templates */
.cut {
	background: var(--sheet);
	box-shadow: inset 0 0 0 1px var(--edge);
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0.5rem;
	background: var(--brand);
	color: #fff;
	padding: 0.5rem 1rem;
	z-index: 999;
	clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 10px) 100%, 0 100%);
}
.skip-link:focus { left: 0.5rem; }

/* ---------- Header / nav ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 880;
	background: rgba(10, 11, 13, .92);
	backdrop-filter: saturate(150%) blur(16px);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	border-bottom: 1px solid var(--edge);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--headh);
	position: relative;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--ink-2);
}
.brand__tile {
	width: 34px; height: 34px; flex: none;
	display: grid; place-items: center;
	font-size: 12.5px; font-weight: 900; letter-spacing: -.03em;
	color: #fff;
	background: linear-gradient(150deg, var(--brand-hi), var(--brand) 40%, var(--brand-lo));
	clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.brand__word b { color: var(--brand-hi); font-weight: 900; }

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.site-nav a {
	display: block;
	padding: 0.55rem 0.85rem;
	color: var(--muted);
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	transition: color .18s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink-2); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
	display: none;
	margin-left: auto;
	width: 40px; height: 40px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 800px) {
	.nav-burger { display: flex; }
	.site-nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--paper-2);
		border-bottom: 1px solid var(--edge);
		box-shadow: var(--shadow);
		padding: 0.5rem var(--gutter) 1rem;
	}
	.site-nav ul { flex-direction: column; gap: 0; }
	.site-nav a { padding: 0.85rem 0.5rem; font-size: 0.95rem; }
	.nav-toggle:checked ~ .site-nav { display: block; }
	.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
	.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--brand-hi); }
}

/* ---------- Section rail: quick links to the archive's main areas ---------- */

.rail { position: sticky; top: var(--headh); z-index: 870; background: rgba(14, 16, 19, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge); }
.rail__scroll { display: flex; gap: 2px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
.rail__scroll::-webkit-scrollbar { display: none; }
.rail a {
	position: relative; flex: 0 0 auto;
	padding: 12px 14px 11px;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted); white-space: nowrap; transition: color .18s;
}
.rail a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform .2s; }
.rail a:hover { color: var(--ink); }
.rail a:hover::after, .rail a[aria-current="page"]::after { transform: scaleX(1); }
.rail a[aria-current="page"] { color: var(--ink-2); }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs { font-size: 0.85rem; color: var(--muted); padding-top: 1.25rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.breadcrumbs li + li::before { content: "\203A"; margin: 0 0.4rem; color: var(--edge); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }

/* ---------- Main content blocks ---------- */

.site-main { padding-bottom: 3rem; }
.section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section__head { max-width: 62ch; margin-bottom: 1.5rem; }
.section__head p { color: var(--muted); font-size: 1.05em; }
.lead { font-size: 1.1em; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }

/* Hero */

.hero {
	padding-block: clamp(2.25rem, 6vw, 4rem);
	background:
		radial-gradient(60% 90% at 100% 0%, var(--brand-soft) 0%, transparent 62%),
		linear-gradient(180deg, var(--paper-2), var(--paper));
	border-bottom: 1px solid var(--edge);
}
.hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.75rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
	color: var(--brand-hi); margin-bottom: 12px;
}
.hero__eyebrow::before { content: ''; width: 22px; height: 3px; background: var(--brand); }
.hero h1 { margin-bottom: 0.6rem; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Buttons */

.btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	height: 42px; padding-inline: 20px;
	font-weight: 800; font-size: 0.85rem; letter-spacing: .02em;
	clip-path: polygon(0 0, 100% 0, 100% 66%, calc(100% - 12px) 100%, 0 100%);
	transition: background .18s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { color: #fff; background: linear-gradient(115deg, var(--brand-hi), var(--brand) 55%, var(--brand-lo)); box-shadow: 0 10px 24px var(--halo); }
.btn--primary:hover { background: var(--brand-hi); }
.btn--ghost { color: var(--ink); background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--edge); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--brand-edge); color: var(--ink-2); }

/* Cards / grids (homepage archive listing) */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
	background: var(--sheet);
	box-shadow: inset 0 0 0 1px var(--edge);
	clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, var(--notch-sm) 100%, 0 calc(100% - var(--notch-sm)));
	padding: 1.2rem;
}
.card h3 { margin-top: 0; font-size: 1.02rem; color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.card--link { display: block; color: inherit; text-decoration: none; transition: box-shadow .18s, transform .18s; }
.card--link:hover { box-shadow: inset 0 0 0 1px var(--brand-edge), 0 16px 32px rgba(0, 0, 0, .4); transform: translateY(-3px); color: inherit; }
.card--link img { aspect-ratio: 16 / 9; object-fit: cover; }
.card__meta { font-size: 0.82rem; color: var(--muted); }

/* Download list */

.dl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.dl-list li {
	display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline;
	padding: 0.75rem 1rem;
	background: var(--sheet);
	box-shadow: inset 0 0 0 1px var(--edge);
}
.dl-list a { font-family: var(--mono); font-size: 0.9em; word-break: break-all; color: var(--brand-hi); }
.dl-list a:hover { color: var(--tint); }
.dl-list small { color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--edge); background: var(--paper-2); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem; font-size: 0.92rem; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__brand { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; }
.site-footer__brand p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.site-footer__brand strong { color: var(--ink-2); display: block; margin-bottom: 2px; }
.site-footer h2 { font-size: 1rem; color: var(--ink-2); margin-bottom: 0.6rem; }
.site-footer p { color: var(--muted); }
.site-footer .subhead { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-hi); margin-bottom: 12px; }
.site-footer__nav ul, .site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer__hub { margin-top: 1.1rem; padding: 14px 16px; border-left: 3px solid var(--brand); background: rgba(255, 255, 255, .02); }
.site-footer__hub a { color: var(--brand-hi); font-weight: 700; }
.site-footer__copy { color: var(--muted); margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--edge); font-size: 0.85rem; }

/* ---------- Utilities ---------- */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Article page ---------- */

.article__banner { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: inset 0 0 0 1px var(--edge); margin-bottom: 1.5rem; }

/* The restored HTML itself (`.doc`) is 1999-2002 markup authored with
   hardcoded black text and light table cells for a plain white page. It
   goes on its own light "paper" sheet instead of the dark site shell so
   none of that inline styling turns unreadable. */
.doc {
	background: var(--doc-bg);
	color: var(--doc-ink);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	margin-top: 1.5rem;
	box-shadow: inset 0 0 0 1px var(--doc-edge), var(--shadow);
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
	overflow-x: auto;
}
.doc a { color: #1450C4; }
/* Deliberately NOT max-width:100% — these are 1999-2002 spec tables with
   hardcoded width="..." attributes and several columns; forcing them to the
   viewport width on mobile crushes every cell unreadable. Letting them keep
   their natural width and scroll inside .doc's own overflow-x is more
   usable than a table nobody can read. Images inside still shrink to fit. */
.doc table { max-width: none; }
.doc img { max-width: 100%; height: auto; }

.article-meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.25rem; }
.article-gallery { margin-top: 2rem; }
.article-gallery img { box-shadow: inset 0 0 0 1px var(--edge); }
