/*
Theme Name: Anthonsen
Theme URI: https://marcusanthonsen.com/
Template: pixelgr-base
Author: PixelGR LLC
Description: Child theme for marcusanthonsen.com. Stark contrast, architectural geometry, no curves, no gradients, no soft shadows. Overrides the parent token layer and hardens the components that ship with a radius or a shadow by default.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: anthonsen
*/

/* ==========================================================================
   1. TOKEN OVERRIDES

   The parent theme resolves every color, size, and shape from these custom
   properties, so redefining them here reskins the entire site. Nothing in the
   parent stylesheets needs to be touched.
   ========================================================================== */

:root {

	/* --- Color -------------------------------------------------------------
	   Deep navy on white, near-black ink. Two surfaces only, plus the inverse.
	   No mid-tones, no tints, no gradient stops. Contrast ratios noted against
	   the surface each color is used on.
	   --------------------------------------------------------------------- */
	--pxgr-color-primary: #0d1f4c;        /* 14.1:1 on white */
	--pxgr-color-primary-hover: #061231;
	--pxgr-color-accent: #1a4fbf;         /* 6.2:1 on white, bold and large text */
	--pxgr-color-ink: #0a0c10;            /* 19.4:1 on white */
	--pxgr-color-ink-muted: #3d4350;      /* 9.7:1 on white, still AAA */
	--pxgr-color-surface: #ffffff;
	--pxgr-color-surface-alt: #f2f4f7;
	--pxgr-color-surface-dark: #0a0c10;
	--pxgr-color-on-dark: #ffffff;        /* 19.4:1 on surface-dark */
	--pxgr-color-border: #0a0c10;         /* borders are structure, not decoration */
	--pxgr-color-focus: #c2410c;          /* deliberately off-brand so focus is never subtle */

	/* --- Type ---------------------------------------------------------------
	   System stack, no webfont request. Weight and tracking carry the
	   architectural feel rather than a display face.
	   --------------------------------------------------------------------- */
	--pxgr-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pxgr-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--pxgr-tracking-tight: -0.03em;       /* tighter than parent: harder headlines */
	--pxgr-tracking-wide: 0.14em;         /* wider than parent: eyebrows read as labels */
	--pxgr-leading-tight: 1.05;

	/* --- Shape --------------------------------------------------------------
	   Zero radius everywhere. This is the single most defining change.
	   --------------------------------------------------------------------- */
	--pxgr-radius-sm: 0;
	--pxgr-radius-md: 0;
	--pxgr-radius-lg: 0;
	--pxgr-radius-pill: 0;

	/* --- Depth --------------------------------------------------------------
	   No shadows. Depth is expressed with hard rules instead.
	   --------------------------------------------------------------------- */
	--pxgr-shadow-sm: none;
	--pxgr-shadow-md: none;
	--pxgr-shadow-lg: none;

	--pxgr-focus-width: 3px;
	--pxgr-focus-offset: 3px;

	/* --- Site specific ------------------------------------------------------ */
	--ma-rule: 2px solid var(--pxgr-color-ink);
	--ma-rule-hair: 1px solid var(--pxgr-color-ink);
}

/* ==========================================================================
   2. HARDENING

   A few parent components carry a radius or a shadow directly. Neutralize
   them so nothing rounds or floats.
   ========================================================================== */

*,
*::before,
*::after { border-radius: 0 !important; }

.pxgr-header.is-stuck {
	box-shadow: none;
	border-bottom: var(--ma-rule);
}

.pxgr-submenu {
	border: var(--ma-rule);
	box-shadow: none;
}

.pxgr-panel {
	border: var(--ma-rule);
	padding: var(--pxgr-space-5);
}

.pxgr-card {
	border: var(--ma-rule);
}

figure img { border-radius: 0; }

/* ==========================================================================
   3. TYPOGRAPHY

   Headlines are the primary visual element on this site. They carry the
   weight that ornament would otherwise carry.
   ========================================================================== */

h1, h2, h3 {
	font-weight: 800;
}

h1 {
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	letter-spacing: -0.035em;
}

h2 {
	font-size: clamp(1.9rem, 4vw, 2.9rem);
}

/* Eyebrow reads as an architectural label, not a decorative kicker. */
.pxgr-eyebrow {
	display: inline-block;
	padding-bottom: var(--pxgr-space-2);
	border-bottom: var(--ma-rule);
	color: var(--pxgr-color-ink);
	font-size: 0.78rem;
}

.pxgr-section--dark .pxgr-eyebrow {
	border-bottom-color: var(--pxgr-color-on-dark);
	color: var(--pxgr-color-on-dark);
}

.pxgr-lede {
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	color: var(--pxgr-color-ink-muted);
}

.pxgr-section--dark .pxgr-lede {
	color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   4. HEADER AND NAVIGATION
   ========================================================================== */

.pxgr-header {
	border-bottom: var(--ma-rule);
}

.pxgr-site-title {
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	font-size: 1.05rem;
}

.pxgr-menu-link {
	font-size: 0.92rem;
	letter-spacing: 0.02em;
}

.pxgr-menu-link[aria-current="page"] {
	color: var(--pxgr-color-ink);
	box-shadow: inset 0 -3px 0 var(--pxgr-color-ink);
}

.pxgr-btn {
	letter-spacing: 0.02em;
	border-width: 2px;
}

.pxgr-header-cta {
	font-size: 0.92rem;
}

/* ==========================================================================
   5. SITE SPECIFIC COMPONENTS

   Namespaced .ma-* so they never collide with the parent's .pxgr-* layer.
   ========================================================================== */

/* --- Statement stack ------------------------------------------------------
   The "this is not / this is" block. Each line is a rule-separated row so the
   negation reads as a list of struck positions rather than a paragraph.
   ------------------------------------------------------------------------ */

.ma-statements {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--ma-rule);
}

.ma-statements li {
	padding: var(--pxgr-space-4) 0;
	border-bottom: var(--ma-rule);
	font-family: var(--pxgr-font-display);
	font-size: clamp(1.3rem, 3.2vw, 2.1rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ma-statements li[data-negate] {
	color: var(--pxgr-color-ink-muted);
}

.pxgr-section--dark .ma-statements,
.pxgr-section--dark .ma-statements li {
	border-color: rgba(255, 255, 255, 0.35);
}

.pxgr-section--dark .ma-statements li[data-negate] {
	color: rgba(255, 255, 255, 0.55);
}

.ma-statements li:last-child {
	color: var(--pxgr-color-ink);
}

.pxgr-section--dark .ma-statements li:last-child {
	color: var(--pxgr-color-on-dark);
}

/* --- Book grid ------------------------------------------------------------ */

.ma-books {
	display: grid;
	gap: 0;
	border-top: var(--ma-rule);
	border-left: var(--ma-rule);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.ma-books { grid-template-columns: repeat(2, 1fr); }
}

.ma-book {
	display: flex;
	flex-direction: column;
	gap: var(--pxgr-space-2);
	padding: var(--pxgr-space-5);
	border-right: var(--ma-rule);
	border-bottom: var(--ma-rule);
}

.ma-book-number {
	font-family: var(--pxgr-font-display);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: var(--pxgr-tracking-wide);
	text-transform: uppercase;
	color: var(--pxgr-color-accent);
}

.ma-book-title {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.15;
}

.ma-book-subtitle {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--pxgr-color-ink-muted);
}

.ma-book-body {
	margin: 0;
	max-width: 46ch;
}

.ma-book-status {
	margin-top: auto;
	padding-top: var(--pxgr-space-3);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: var(--pxgr-tracking-wide);
	text-transform: uppercase;
	color: var(--pxgr-color-ink-muted);
}

/* --- Rule utility --------------------------------------------------------- */

.ma-ruled-top { border-top: var(--ma-rule); padding-top: var(--pxgr-space-5); }
.ma-measure { max-width: 62ch; }
.pxgr-center .ma-measure { margin-inline: auto; }