/*
Theme Name:  Idle Hands
Theme URI:   https://idle-hands.app
Author:      Metzae
Description: The site for Idle Hands, an Android app that watches every rewarded ad in full and finds the way out, so an idle game stays idle. Dark and colour-neutral, phone-first: the job of every page is to get the app installed. Spacing follows the Duum OS Covenant default: mobile-first, tight vertical rhythm.
Version:     3.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: idle-hands
*/

/* ---------------------------------------------------------------- tokens
   Dark and colour-neutral by decision (Metzae, 2026-09-10), because the icon
   the old palette was drawn from is not settled and the site should not be
   waiting on it.

   The rule that keeps it that way: STRUCTURE IS GREY, and colour appears only
   where the eye has to be sent. There is ONE accent token. Change --accent and
   its two companions below and the whole site re-tints; nothing else in this
   file names a hue. The loudest thing on any page is the primary button, and
   it is deliberately colourless (near-white on near-black, about 15:1), so the
   install path never depends on which colour the mascot ends up being. */
:root {
	/* Greys, darkest to lightest. */
	--ground:      #0E1012;
	--surface:     #16191C;
	--surface-2:   #1E2226;
	--surface-3:   #272C31;   /* hover */
	--line:        #2E343A;
	--line-soft:   #23282D;

	--ink:         #ECEEF0;
	--ink-2:       #B6BCC2;
	--muted:       #8A9199;   /* 5.6:1 on --ground */
	--ink-on-light: #0E1012;  /* text on a light button */

	/* The one accent. Small doses only: eyebrows, the current-page underline,
	   step numbers, rating dots, the rule beside a status panel, focus. */
	--accent:      #E3A063;
	--accent-soft: #2A211A;   /* tinted panel behind accent text */
	--accent-line: #4A3B2B;   /* accent-tinted border */

	/* Signals. Desaturated on purpose; they label state, they do not decorate. */
	--ok:          #83B396;
	--ok-soft:     #1A2620;

	--font-display: "Rubik", "IBM Plex Sans", system-ui, sans-serif;
	--font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

	--w:        68rem;
	--w-prose:  44rem;
	--radius:   12px;
	--shadow:   0 2px 10px rgba(0, 0, 0, 0.35);
	--tap:      48px;

	color-scheme: dark;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.1;
	margin: 0 0 10px;
	text-wrap: balance;
	letter-spacing: -0.015em;
	color: var(--ink);
}
h1 { font-size: clamp(31px, 6.4vw, 50px); font-weight: 800; }
h2 { font-size: clamp(25px, 4.2vw, 33px); font-weight: 700; }
h3 { font-size: 19.5px; font-weight: 700; }

p, li { text-wrap: pretty; }
p { margin: 0 0 12px; }

code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	padding: 1px 6px;
	border-radius: 5px;
}

.nowrap { white-space: nowrap; }

.skip-link {
	position: absolute;
	left: -999px;
	top: 8px;
	background: var(--ink);
	color: var(--ink-on-light);
	padding: 10px 14px;
	border-radius: 8px;
	z-index: 100;
	font-weight: 700;
}
.skip-link:focus { left: 8px; }

.wrap {
	width: min(100% - 32px, var(--w));
	margin-inline: auto;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 8px;
	font-weight: 600;
}

.standfirst {
	font-size: clamp(17.5px, 2.4vw, 20px);
	color: var(--ink-2);
	max-width: 34em;
	margin: 0 0 16px;
	text-wrap: balance;
}

/* ---------------------------------------------------------------- buttons
   The primary button is light and colourless: the highest contrast available
   on this ground, and unaffected by any future accent change. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 10px 22px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface-2);
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--surface-3); border-color: var(--muted); color: var(--ink); }

.btn--primary {
	background: var(--ink);
	color: var(--ink-on-light);
	border-color: var(--ink);
}
.btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink-on-light); }

.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--line); }

.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }  /* 44px is the touch floor; these are the conversion action */

/* Store links are the outlined button, never the white one: white means
   "get Idle Hands" everywhere on this site, and the two must not compete. */
.btn--store { gap: 9px; }
.btn__play {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
	flex: none;
}

.btn--block { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* ---------------------------------------------------------------- header */
.site-header {
	background: var(--ground);
	border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 12px 0;
	flex-wrap: wrap;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	white-space: nowrap;
}
.brand img { width: 40px; height: auto; }
.brand:hover { color: var(--ink); }

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px 18px;
	flex-wrap: wrap;
	align-items: center;
}
.site-nav a {
	color: var(--ink-2);
	text-decoration: none;
	font-size: 15.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 0;
	display: inline-block;
	min-height: 44px;
}
.site-nav a:hover { color: var(--ink); }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav a[aria-current="page"] {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-color: var(--accent);
}

/* Dropdowns. A parent with children (Guides, whose children are generated
   from the games register) opens on hover or keyboard focus on desktop. On
   phones the parent is simply a link to its landing page, which lists the
   same children, so nothing needs a tap-to-open script. */
.site-nav li { position: relative; }
.site-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px;
	display: none;
	position: absolute;
	top: 100%;
	left: -10px;
	min-width: 12rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	z-index: 40;
	flex-direction: column;
	align-items: stretch;  /* .site-nav ul centres its row; a column menu must not inherit that */
	gap: 0;
}
.site-nav .sub-menu a {
	display: block;
	padding: 8px 12px;
	min-height: 40px;
	border-radius: 8px;
	white-space: nowrap;
}
.site-nav .sub-menu a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav .sub-menu a { display: flex; align-items: center; gap: 10px; }
.site-nav .menu-icon {
	width: 24px;
	height: 24px;
	border-radius: 22%;
	border: 1px solid var(--line);
	flex: none;
}
.site-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	opacity: 0.7;
}
@media (min-width: 48em) {
	.site-nav li:hover > .sub-menu,
	.site-nav li:focus-within > .sub-menu { display: flex; }
	/* Keep the dropdown reachable: a hover gap between the link and the panel closes it. */
	.site-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
}
@media (max-width: 47.99em) {
	/* No dropdown on phones, so no chevron promising one. The parent link goes
	   to the landing page, which lists the same children. */
	.site-nav .sub-menu { display: none !important; }
	.site-nav .menu-item-has-children > a::after { display: none; }
}

/* A menu item with the class "menu-cta" (set in Appearance, Menus) renders
   as the primary button. On phones it hides here and lives in the sticky bar. */
.site-nav .menu-cta > a {
	background: var(--ink);
	color: var(--ink-on-light);
	border-radius: 999px;
	padding: 8px 18px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-weight: 700;
}
.site-nav .menu-cta > a:hover { background: #FFFFFF; color: var(--ink-on-light); }
@media (max-width: 47.99em) {
	.site-nav .menu-cta { display: none; }
}

/* ---------------------------------------------------------------- sections
   Depth is the only thing that separates a band from its neighbour now, so
   the ladder runs ground -> alt -> deep and never repeats twice in a row. */
.section { padding: 32px 0; }
.section__head { margin-bottom: 18px; max-width: var(--w-prose); }
.section__head p:last-child { margin-bottom: 0; color: var(--ink-2); }

.section--alt  { background: var(--surface); border-block: 1px solid var(--line-soft); }
.section--deep { background: #0A0C0D; border-block: 1px solid var(--line-soft); }
.section--alt + .section--alt,
.section--deep + .section--deep { border-top: 0; }

.section + .section:not([class*="section--"]) { border-top: 1px solid var(--line-soft); }

@media (min-width: 48em) {
	.section { padding: 44px 0; }
}

/* ---------------------------------------------------------------- hero */
.hero {
	background: var(--surface);
	border-bottom: 1px solid var(--line-soft);
	padding: 28px 0 32px;
}
.hero__grid {
	display: grid;
	gap: 18px;
	align-items: center;
}
.hero__art {
	order: -1;
	justify-self: center;
	width: min(58%, 280px);
}
.hero h1 { margin-bottom: 12px; }
.hero__note {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--muted);
	margin: 14px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero__note::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--muted);
	flex: none;
}
.hero__note.is-live { color: var(--ink-2); }
.hero__note.is-live::before { background: var(--ok); }

@media (min-width: 48em) {
	.hero { padding: 44px 0 52px; }
	.hero__grid { grid-template-columns: 1.25fr 1fr; gap: 36px; }
	.hero__art { order: 0; justify-self: end; width: min(100%, 360px); }
}

/* ---------------------------------------------------------------- cards */
.cards {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.card {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	color: var(--ink);
}
.section--alt .card,
.section--deep .card { background: var(--surface-2); }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.card p + p { margin-top: 8px; }
.card .eyebrow { margin-bottom: 6px; }
a.card { display: block; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
a.card:hover { background: var(--surface-3); border-color: var(--muted); color: var(--ink); }
a.card:hover h3 { color: var(--accent); }
a.card--guide { display: flex; align-items: flex-start; gap: 14px; }
.card--guide > div { min-width: 0; }

.card__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent);
	margin-bottom: 12px;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14.5px;
}

/* ---------------------------------------------------------------- steps */
.steps {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.steps li {
	counter-increment: step;
	position: relative;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 16px 14px 58px;
}
.steps li::before {
	content: counter(step);
	position: absolute;
	left: 16px;
	top: 15px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	color: var(--accent);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	display: grid;
	place-items: center;
}
.steps b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 4px;
	text-wrap: balance;
}
.steps p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

@media (min-width: 48em) {
	.steps { grid-template-columns: 1fr 1fr; gap: 12px; }
	.steps--single { grid-template-columns: 1fr; max-width: var(--w-prose); }
}

/* ---------------------------------------------------------------- rules */
.rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.rules li {
	display: grid;
	gap: 4px 20px;
	padding: 14px 16px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-line);
	border-radius: var(--radius);
}
.rules .label {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 600;
	white-space: nowrap;
	padding-top: 3px;
}
.rules p { margin: 0; color: var(--ink-2); }

@media (min-width: 40em) {
	.rules li { grid-template-columns: 11rem 1fr; }
}

/* ---------------------------------------------------------------- chips */
.chips {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.chips li {
	font-family: var(--font-mono);
	font-size: 13px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	color: var(--ink-2);
	border-radius: 999px;
	padding: 6px 13px;
	white-space: nowrap;
}
.chips li.generic { color: var(--muted); border-style: dashed; background: transparent; }

/* ---------------------------------------------------------------- tier
   How deeply a game is wired into Idle Hands. Deliberately NOT a row of equal
   dots: that reads as a star rating, which made the old display look like a
   verdict on the game (Metzae, 2026-09-11). Rising bars read as a level, and
   the rung is named so the meter never has to carry the meaning alone. */
.tier {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--ink-2);
	white-space: nowrap;
}
.tier__meter {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
	flex: none;
}
.tier__meter i {
	display: block;
	width: 3px;
	border-radius: 1px;
	background: var(--line);
}
.tier__meter i:nth-child(1) { height: 5px; }
.tier__meter i:nth-child(2) { height: 8.5px; }
.tier__meter i:nth-child(3) { height: 12px; }
.tier__meter i.on { background: var(--accent); }
.tier--0 .tier__meter i { background: var(--line); }
.tier--3 { color: var(--ink); }

/* Standing on its own, in the ladder and on a game page, it is not a pill. */
.tier-list .tier,
.game-head .tier { font-size: 12px; }

.tiers { max-width: var(--w-prose); padding: 8px 0 40px; }
.tiers h2 { font-size: clamp(21px, 3.4vw, 26px); margin-bottom: 8px; }
.tier-list {
	list-style: none;
	margin: 14px 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
}
.tier-list li {
	display: grid;
	gap: 4px 16px;
	align-items: start;
	padding: 12px 14px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.tier-list p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 40em) {
	.tier-list li { grid-template-columns: 12rem 1fr; }
}

.tier-means {
	max-width: var(--w-prose);
	color: var(--ink-2);
	font-size: 15.5px;
	margin: 0 0 18px;
}

/* ---------------------------------------------------------------- games */
.games {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.game-card {
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	color: var(--ink);
	transition: background-color 120ms ease, border-color 120ms ease;
}
.game-card:hover { background: var(--surface-3); border-color: var(--muted); }
.game-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.game-card__rank {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.game-card__head { display: flex; align-items: flex-start; gap: 14px; }
.game-card__name { display: grid; gap: 4px; min-width: 0; }
.game-card__title { margin: 0; font-size: 21px; }
.game-card__title a { color: var(--ink); text-decoration: none; }
.game-card:hover .game-card__title a { color: var(--accent); }
/* The title link covers the whole card, so a tap anywhere opens the game.
   The actions row is lifted above it so the store button stays its own link. */
.game-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.game-card .dev { color: var(--muted); font-size: 14px; margin: 0; }
.game-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.game-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 2px;
}
.game-card__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

/* ---------------------------------------------------------------- game icons
   The official store icon, downloaded into the media library. A game with no
   icon yet gets a lettered tile rather than a hole in the row. */
.game-icon {
	flex: none;
	border-radius: 22%;
	border: 1px solid var(--line);
	background: var(--surface);
	object-fit: cover;
}
.game-icon--empty {
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--muted);
	font-size: 1.1rem;
}

/* single game */
.game-head { padding: 28px 0 8px; }
.game-head .badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.game-head h1 { margin-bottom: 6px; }
.game-head .dev { color: var(--ink-2); font-size: 17px; margin: 0 0 12px; }
.game-head__id { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.game-head__id h1 { margin-bottom: 4px; }
.game-head__id .dev { margin-bottom: 10px; }
.game-head .badges { margin: 0; }

.facts {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 6px 18px;
	margin: 18px 0 24px;
	max-width: var(--w-prose);
}
.facts dl { margin: 0; display: grid; gap: 0; }
.facts div { display: grid; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.facts div:last-child { border-bottom: 0; }
.facts dt {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	padding-top: 3px;
}
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 40em) {
	.facts div { grid-template-columns: 10rem 1fr; }
}
.rating-key {
	font-size: 15px;
	color: var(--ink-2);
	max-width: var(--w-prose);
}

/* ---------------------------------------------------------------- get the app */
.get-grid {
	display: grid;
	gap: 12px;
}
.get-card {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 18px;
	color: var(--ink);
}
.get-card h3 { font-size: 21px; margin-bottom: 8px; }
.get-card p { color: var(--ink-2); margin: 0 0 12px; }
.get-card p:last-child { margin-bottom: 0; }
.get-card .btn { margin-top: 4px; }
.get-card__state {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
}
.get-card__state::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--muted);
	flex: none;
}
.get-card__state.is-live { color: var(--ink); }
.get-card__state.is-live::before { background: var(--ok); }
.get-card .file {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--muted);
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}
@media (min-width: 48em) {
	.get-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------------------------------------------------------------- status */
.status {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-line);
	border-radius: var(--radius);
	padding: 16px 18px;
	max-width: var(--w-prose);
}
.status ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.status li { margin-bottom: 8px; }
.status li:last-child { margin-bottom: 0; }
.status li b { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- prose (pages) */
.page-head {
	padding: 28px 0 14px;
	max-width: var(--w-prose);
}
.page-head p:last-child { margin-bottom: 0; }

.prose {
	max-width: var(--w-prose);
	padding-bottom: 40px;
}
.prose h2 { margin-top: 32px; font-size: clamp(22px, 3.6vw, 27px); }
.prose h3 { margin-top: 22px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 700; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--muted); }
.prose a { color: var(--ink); text-decoration-color: var(--accent); }
.prose a:hover { color: var(--accent); }
.prose blockquote {
	margin: 16px 0;
	padding: 12px 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-line);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 18px;
}
.prose blockquote p { color: var(--ink); margin: 0; }
.prose .note {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-line);
	border-radius: var(--radius);
	padding: 12px 16px;
	margin: 16px 0;
}
.prose .note p:last-child { margin-bottom: 0; }
.prose .note .lbl {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
	font-weight: 600;
}
.prose table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
	margin: 0;
	background: var(--surface);
}
.prose .tablewrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 0 0 16px;
}
.prose th, .prose td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose th {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	background: var(--surface-2);
}
.prose td:first-child { white-space: nowrap; color: var(--ink); font-weight: 600; }
.prose img { border-radius: var(--radius); }

.alignwide { max-width: var(--w); }
.wp-block-image img { height: auto; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- archive / index */
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: var(--w-prose); }
.entries h2 { font-size: 21px; margin-bottom: 4px; }
.entries a { text-decoration: none; color: var(--ink); }
.entries a:hover { color: var(--accent); }
.entries time { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.entries p { color: var(--ink-2); margin: 6px 0 0; }
.pager { display: flex; gap: 16px; margin: 20px 0 40px; font-size: 15px; }

/* ---------------------------------------------------------------- guide pages (XP Hero Field Guide plugin)
   The plugin ships its own dark token set, which leans blue. These pull it
   onto this theme's neutral greys and single accent, so the guide reads as
   part of the site. Tokens only, never components. */
.xphg-main { padding: 24px 0 40px; width: min(100% - 32px, var(--w)); margin-inline: auto; }
.xphg.xphg-dark {
	--bg:         #0E1012;
	--surface:    #16191C;
	--surface-2:  #1E2226;
	--text:       #ECEEF0;
	--text-2:     #B6BCC2;
	--text-3:     #8A9199;
	--line:       #2E343A;
	--ember:      #E3A063;
	--ember-soft: #2A211A;
	--teal:       #83B396;
	--teal-soft:  #1A2620;
	--gold:       #C9A227;
	--gold-soft:  #262019;
	--danger:     #D98A84;
	--danger-soft:#2A1D1C;
	--mono-bg:    #1E2226;
}

/* ---------------------------------------------------------------- footer */
.site-footer {
	border-top: 1px solid var(--line-soft);
	background: var(--surface);
	padding: 28px 0 32px;
	color: var(--ink-2);
	font-size: 15px;
}
.foot-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.foot-grid h3 {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 8px;
	font-weight: 600;
}
.foot-grid p { margin: 0 0 8px; }
.foot-grid p:last-child { margin: 0; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; display: inline-block; padding: 5px 0; }
.foot-nav a:hover { color: var(--accent); }
.foot-bottom {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--muted);
}
.foot-bottom p { margin: 0; }

/* ---------------------------------------------------------------- sticky "Get the app" bar, phones only */
.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	background: var(--surface);
	color: var(--ink);
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sticky-cta__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}
.sticky-cta__text small {
	display: block;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 2px;
}
.sticky-cta .btn { flex: none; min-height: 44px; padding: 8px 18px; font-size: 15.5px; }
body.has-sticky-cta { padding-bottom: 84px; }
@media (min-width: 48em) {
	.sticky-cta { display: none; }
	body.has-sticky-cta { padding-bottom: 0; }
}