/* Ohmwork — the WordPress theme's stylesheet.
   Author: Steve Austen, The PCGP.  v2.0.0
   ------------------------------------------------------------------
   The page IS an engineering drawing sheet, alive: a framed sheet
   with a title block, the dotted canvas grid, the application itself
   sitting on the sheet, a hero circuit whose current really marches,
   the workshop's numbers on meter glass that count up, and the
   taster's own Run-green calls to action.

   Three voices: Fraunces (self-hosted, OFL) for the display type,
   the system stack for prose, and IBM Plex Mono (the meter's own
   face) for labels and values.

   Identity: warm paper, dark ink, wire green, copper for reference
   numbers, one lit-LED red. Deliberately single-theme — the
   product's canvas is paper in every OS theme, and so is its site.
   Mobile-first; min-width queries scale up. All motion sits behind
   prefers-reduced-motion, and the reveal only runs when the script
   has marked the document (html.has-js), so no script means no
   hidden content. */

/* ---- Type faces ------------------------------------------------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }

:root {
	--paper: #fafaf7;
	--paper-deep: #f1f1eb;
	--ink: #202020;
	--ink-soft: #52524e;
	--wire: #2e5e2e;
	--wire-deep: #234a23;
	--copper: #b26a00;      /* lines, borders, the eyebrow ring */
	--copper-ink: #8a5200;  /* copper as small text: AA on paper */
	--led: #d43a1f;
	--rule: #dddad2;
	--rule-soft: #e9e7e0;
	--panel: #ffffff;
	--glass: #b9dfb0;
	--glass-ink: #172714;
	--flow: #ffb300;
	--mono: "IBM Plex Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--wide: 74rem;
	--measure: 44rem;
	--shadow-lift: 0 10px 30px -12px rgba(32, 32, 32, 0.25);
	--shadow-shot: 0 30px 60px -30px rgba(32, 32, 32, 0.45), 0 2px 0 rgba(32, 32, 32, 0.08);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* The application's own dotted grid, lit softly from above. */
	background-image:
		radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 255, 255, 0.8), transparent 70%),
		radial-gradient(var(--rule) 1.1px, transparent 1.1px);
	background-size: 100% 100%, 22px 22px;
}

img { max-width: 100%; height: auto; }

a { color: var(--wire); text-underline-offset: 3px; }
a:hover { color: var(--copper); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* The skip link and the site header are styled in css/site-header.css. */

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* main.page, not .page: WordPress also puts "page" on <body> for every
   static page, and the bare class boxed the whole page in on those. */
main.page {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3.5rem;
}

/* ---- Buttons ---------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	font-weight: 700; font-size: 1.05rem; line-height: 1.2;
	text-decoration: none; border-radius: 8px;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-run {
	background: var(--wire); color: #fff; border: 1.5px solid var(--wire);
	box-shadow: 0 2px 0 rgba(32, 32, 32, 0.25);
}
.btn-run:hover, .btn-run:focus-visible { background: var(--wire-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 0 rgba(32, 32, 32, 0.25); }
.btn-run:active { transform: translateY(1px); box-shadow: none; }
.btn-small { padding: 0.5rem 0.95rem; font-size: 0.88rem; }
.run-glyph { font-size: 0.8em; }

.btn-quiet {
	display: inline-flex; align-items: center; gap: 0.35rem;
	color: var(--ink); font-weight: 600; text-decoration: none;
	padding: 0.85rem 0.25rem; border-bottom: 2px solid var(--rule);
}
.btn-quiet:hover { color: var(--wire); border-bottom-color: var(--wire); }

.cta-note { display: block; margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.88rem; }

/* ---- Hero ------------------------------------------------------- */
.hero {
	display: grid; gap: 2rem;
	padding-top: 1.5rem;
}

.eyebrow {
	display: inline-block; margin: 0 0 1rem;
	padding: 0.35rem 0.95rem;
	border: 1.5px solid var(--copper); border-radius: 999px;
	color: var(--copper-ink); background: var(--paper);
	font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}

h1 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(2.3rem, 6.2vw, 3.9rem);
	font-weight: 500; font-variation-settings: "opsz" 144;
	letter-spacing: -0.01em; line-height: 1.08;
	text-wrap: balance;
}

.hero-text { margin: 1.1rem 0 0; font-size: 1.12rem; color: var(--ink-soft); max-width: 36rem; }

.hero-actions { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }

/* The application, on the sheet. */
.hero-shot { margin: 0; }
.shot-frame {
	position: relative;
	border-radius: 10px;
	box-shadow: var(--shadow-shot);
	background: var(--panel);
	border: 1px solid rgba(32, 32, 32, 0.25);
	overflow: hidden;
}
.shot { display: block; width: 100%; height: auto; }

figcaption, .hero-shot figcaption, .lesson-shot figcaption {
	margin: 0.7rem 0 0; color: var(--ink-soft);
	font-family: var(--mono); font-size: 0.74rem; line-height: 1.5;
}

/* Callouts drawn on the picture, in the instrument voice. */
.shot-tag {
	position: absolute;
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.3rem 0.7rem;
	background: rgba(23, 39, 20, 0.9); color: var(--glass);
	font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(32, 32, 32, 0.25);
}
.shot-tag-run { right: 0.9rem; bottom: 0.9rem; }
.shot-tag-pass { right: 0.9rem; top: 0.9rem; background: var(--glass); color: var(--glass-ink); border: 1px solid var(--glass-ink); }
.shot-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flow); box-shadow: 0 0 6px var(--flow); }
.shot-tag .tick { font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
	.shot-tag .dot { animation: blink 1.2s ease-in-out infinite; }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- The marching circuit -------------------------------------- */
.circuit-band { margin: 2.5rem auto 0; max-width: 40rem; }

.hero-circuit { width: 100%; height: auto; overflow: visible; display: block; }
.hero-circuit .wire { fill: none; stroke: var(--wire); stroke-width: 2.5; stroke-linecap: round; }
.hero-circuit .ink { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hero-circuit .thick { stroke-width: 5; }
.hero-circuit .box { fill: var(--panel); }
.hero-circuit .led-fill { fill: var(--led); stroke: var(--led); }
.hero-circuit .led-ray { fill: none; stroke: var(--led); stroke-width: 2; stroke-linecap: round; }
.hero-circuit .label { fill: var(--ink-soft); font-family: var(--mono); font-size: 13px; stroke: none; }
.hero-circuit .flow { fill: none; stroke: var(--flow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 14; }
.hero-circuit .led-glow { opacity: 0.8; }

@media (prefers-reduced-motion: no-preference) {
	.hero-circuit .flow { animation: march 0.5s linear infinite; }
	.hero-circuit .led-glow { animation: breathe 2.6s ease-in-out infinite; }
}
@keyframes march { to { stroke-dashoffset: -14.1; } }
@keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }

/* ---- The numbers, on meter glass ------------------------------- */
.numbers { margin-top: 2rem; text-align: center; }

.stats {
	list-style: none; margin: 0 auto; padding: 0;
	display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem;
}
.stat {
	min-width: 8rem;
	padding: 0.75rem 1.2rem 0.65rem;
	background: var(--glass);
	border: 1.5px solid #1a1c1e; border-radius: 8px;
	box-shadow: inset 0 2px 6px rgba(23, 39, 20, 0.25), 0 2px 0 rgba(32, 32, 32, 0.15);
}
.stat-value {
	display: block;
	font-family: var(--mono); font-weight: 500; font-size: 1.9rem; line-height: 1.1;
	color: var(--glass-ink); font-variant-numeric: tabular-nums;
}
.stat-name { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--glass-ink); }
.stats-note { margin: 0.9rem auto 0; max-width: 36rem; color: var(--ink-soft); font-size: 0.9rem; }

/* ---- Sections --------------------------------------------------- */
.what { margin-top: 4rem; scroll-margin-top: 4.5rem; }

/* The heading as a run of wire: the copper reference number, the
   title, then the wire carrying on to its junction dot. */
.section-tag {
	display: flex; align-items: center; gap: 0.8rem;
	margin: 0 0 1.25rem;
	font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 72;
	font-size: clamp(1.6rem, 3.6vw, 2.1rem); line-height: 1.15;
}
.tag-number { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--copper-ink); letter-spacing: 0.08em; }
.tag-title { text-wrap: balance; }
.tag-wire {
	flex: 1; min-width: 2.5rem; height: 10px;
	background-image:
		radial-gradient(circle at calc(100% - 5px) 50%, var(--wire) 4px, transparent 4.5px),
		linear-gradient(var(--wire), var(--wire));
	background-size: 100% 100%, calc(100% - 5px) 2px;
	background-position: left top, left center;
	background-repeat: no-repeat;
	transform-origin: left center;
}

.lede { margin: 0 0 1.6rem; font-size: 1.12rem; max-width: var(--measure); }
.what > p { max-width: var(--measure); }

/* The claims, as cards on the bench. */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.point {
	background: var(--panel);
	border: 1.5px solid var(--rule); border-radius: 10px;
	padding: 1.1rem 1.2rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.point:hover { transform: translateY(-2px); border-color: var(--wire); box-shadow: var(--shadow-lift); }
.point p { margin: 0.75rem 0 0; font-size: 0.98rem; }

.point-icon { width: 64px; height: 44px; display: block; }
.point-icon .i-glass { fill: var(--glass); stroke: #1a1c1e; stroke-width: 1.5; }
.point-icon .i-digits { fill: var(--glass-ink); font-family: var(--mono); font-weight: 500; font-size: 12px; text-anchor: middle; }
.point-icon .i-board { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.point-icon .i-pins { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.point-icon .i-led { fill: var(--led); }
.point-icon .i-chip { fill: var(--ink-soft); font-family: var(--mono); font-weight: 500; font-size: 9px; text-anchor: middle; }
.point-icon .i-wire { fill: none; stroke: var(--wire); stroke-width: 2.5; stroke-linecap: round; }
.point-icon .i-tick { fill: none; stroke: var(--wire); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.point-icon .i-dot { fill: var(--wire); }
.point-icon .i-grid { fill: none; stroke: rgba(23, 39, 20, 0.25); stroke-width: 1; }
.point-icon .i-trace { fill: none; stroke: var(--glass-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
	.point-icon .i-trace { animation: trace 2.4s linear infinite; }
	.point-icon .i-led { animation: blink 1s steps(1) infinite; }
}
@keyframes trace { from { stroke-dashoffset: 160; } to { stroke-dashoffset: -160; } }

/* ---- How a lesson works ---------------------------------------- */
.lesson-grid { display: grid; gap: 1.75rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.step {
	position: relative;
	padding: 0.5rem 0 0.9rem 3.4rem;
}
/* The wire down the left, from step to step, ending at the last. */
.step::before {
	content: ""; position: absolute; left: 1.05rem; top: 2.6rem; bottom: -0.4rem;
	width: 2px; background: var(--wire);
}
.step:last-child::before { display: none; }
.step-number {
	position: absolute; left: 0; top: 0.55rem;
	width: 2.2rem; height: 2.2rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--paper); border: 2px solid var(--wire);
	color: var(--copper-ink); font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
}
.step h3 { margin: 0.35rem 0 0.25rem; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; font-variation-settings: "opsz" 48; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

.lesson-shot { margin: 0; }
.shot-frame-small { box-shadow: var(--shadow-lift), 0 2px 0 rgba(32, 32, 32, 0.08); }

/* ---- The courses index ----------------------------------------- */
.index-wrap { overflow-x: auto; }
.course-index {
	width: 100%; border-collapse: collapse;
	background: var(--panel);
	border: 1.5px solid var(--ink-soft);
	font-size: 0.95rem;
}
.course-index th, .course-index td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.course-index thead th {
	background: var(--paper-deep);
	font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
	border-bottom: 1.5px solid var(--ink-soft);
}
.course-index tbody th { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; font-variation-settings: "opsz" 48; white-space: nowrap; }
.course-index tbody tr:last-child th, .course-index tbody tr:last-child td { border-bottom: none; }
.course-index .mono { font-family: var(--mono); font-size: 0.85rem; color: var(--copper-ink); font-weight: 500; }
.course-index .num { text-align: right; }
.course-index td:last-child { color: var(--ink-soft); min-width: 18rem; }

/* On a phone the index folds into cards: the number, the course and
   its lesson count on one line, what it covers beneath. The column
   headings stay in the document for assistive technology. */
@media (max-width: 39.99rem) {
	.course-index, .course-index tbody, .course-index tr, .course-index th, .course-index td { display: block; }
	.course-index thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
	.course-index tr { display: grid; grid-template-columns: auto 1fr auto; gap: 0.15rem 0.7rem; align-items: baseline; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--rule); }
	.course-index tbody tr:last-child { border-bottom: none; }
	.course-index th, .course-index td { padding: 0; border: 0; }
	.course-index tbody th { white-space: normal; }
	.course-index .num { text-align: right; }
	.course-index .num::after { content: attr(data-label); color: var(--ink-soft); font-size: 0.7rem; }
	.course-index td:last-child { grid-column: 1 / -1; min-width: 0; margin-top: 0.15rem; font-size: 0.92rem; }
}

/* ---- The free lessons ------------------------------------------ */
.taster-lessons {
	list-style: none; margin: 0.25rem 0 0; padding: 0;
	display: grid; gap: 0.75rem;
}
.lesson-card {
	display: flex; align-items: center; gap: 0.9rem;
	background: var(--panel);
	border: 1.5px solid var(--rule); border-left: 4px solid var(--wire); border-radius: 8px;
	padding: 0.7rem 0.9rem;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lesson-card:hover { transform: translateY(-2px); border-color: var(--wire); box-shadow: var(--shadow-lift); }
.lesson-card.kind-fault { border-left-color: var(--led); }
.lesson-card.kind-meter { border-left-color: var(--copper); }

.lesson-glyph { flex: 0 0 48px; width: 48px; height: 32px; }
.lesson-glyph .g-wire { fill: none; stroke: var(--wire); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lesson-glyph .g-ink { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.lesson-glyph .g-box { fill: var(--panel); stroke: var(--ink); stroke-width: 1.8; }
.lesson-glyph .g-led { fill: var(--led); stroke: var(--led); stroke-width: 1.5; stroke-linejoin: round; }
.lesson-glyph .g-glow { fill: var(--led); opacity: 0.18; }
.lesson-glyph .g-glass { fill: var(--glass); stroke: #1a1c1e; stroke-width: 1.3; }
.lesson-glyph .g-digits { fill: var(--glass-ink); font-family: var(--mono); font-weight: 500; font-size: 9px; text-anchor: middle; }
.lesson-glyph .g-probe { fill: var(--led); }
.lesson-glyph .g-break { fill: none; stroke: var(--led); stroke-width: 2; stroke-linecap: round; }
.lesson-glyph .g-fault { fill: #fdf0ee; stroke: var(--led); stroke-width: 1.5; }
.lesson-glyph .g-q { fill: none; stroke: var(--led); stroke-width: 1.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
	.lesson-card:hover .g-glow { animation: breathe 1.4s ease-in-out infinite; }
}

.lesson-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.lesson-body a { color: var(--ink); font-weight: 600; text-decoration: none; }
.lesson-body a:hover { color: var(--wire); text-decoration: underline; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.lesson-minutes { color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; white-space: nowrap; }
.lesson-start {
	font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--copper-ink); border: 1px solid var(--copper); border-radius: 999px; padding: 0.1rem 0.5rem;
}

.taster-actions { margin: 1.5rem 0 0; }

/* ---- News and the release list --------------------------------- */
.news-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.7rem; max-width: var(--measure); }
.news-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
	background: var(--panel); border: 1.5px solid var(--rule); border-left: 4px solid var(--copper); border-radius: 8px;
	padding: 0.65rem 0.9rem;
}
.news-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.news-list a:hover { color: var(--wire); text-decoration: underline; }
.news-date { margin: 0.15rem 0 0; color: var(--ink-soft); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap; }

.signup { margin: 1.5rem 0 0; }

/* The release-list form, the theme's own markup posted straight to
   MailPoet (2.3.0), mounted as an instrument card on the sheet. */
.signup-form {
	max-width: 34rem; margin: 1.6rem 0 0;
	background: var(--panel);
	border: 1.5px solid var(--rule); border-left: 4px solid var(--wire); border-radius: 10px;
	padding: 1.2rem 1.4rem 1.1rem;
}
.signup-tag { margin: 0 0 0.85rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-ink); }
.release-form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: stretch; }
.release-field { flex: 1 1 14rem; margin: 0; }
.release-form input[type="email"] {
	width: 100%; height: 100%;
	padding: 0.65rem 0.9rem;
	font-family: var(--mono); font-size: 0.95rem;
	color: var(--ink); background: var(--paper);
	border: 1.5px solid var(--ink); border-radius: 6px;
}
.release-form input::placeholder { color: var(--ink-soft); opacity: 1; }
.release-form input[type="email"]:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }
.release-form input[aria-invalid="true"] { border-color: var(--led); }
.release-form .btn { cursor: pointer; font-family: inherit; }
/* The honeypot: off-screen for people, present for bots. */
.release-hp { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.release-status {
	flex-basis: 100%; margin: 0; padding: 0.7rem 0.95rem;
	font-family: var(--mono); font-size: 0.9rem; line-height: 1.5;
	border-radius: 6px;
}
.release-status.is-ok { color: var(--glass-ink); background: var(--glass); border: 1.5px solid var(--glass-ink); }
.release-status.is-ok::before { content: "✓  "; font-weight: 700; }
/* The LED red is too light as small text: a deeper red reads AA on the tint. */
.release-status.is-error { color: #b02416; background: #fdf0ee; border: 1.5px solid #b02416; }
.signup-form .cta-note { display: block; margin-top: 0.85rem; }

/* The site footer is styled in css/site-footer.css. */

/* MailPoet's own pages (the captcha, confirmation and manage pages)
   render inside the article template with the plugin's classes. */
.article-body .mailpoet_form input[type="text"], .article-body .mailpoet_form input[type="email"] {
	padding: 0.65rem 0.9rem; margin: 0.5rem 0 1rem;
	font-family: var(--mono); font-size: 0.95rem; color: var(--ink); background: var(--paper);
	border: 1.5px solid var(--ink); border-radius: 6px; max-width: 20rem;
}
.article-body .mailpoet_form input[type="submit"], .article-body .mailpoet_form .mailpoet_submit {
	display: inline-block; padding: 0.65rem 1.6rem; font-weight: 700; font-size: 1rem; font-family: inherit;
	color: #fff; background: var(--wire); border: 1.5px solid var(--wire); border-radius: 8px; cursor: pointer;
	box-shadow: 0 2px 0 rgba(32, 32, 32, 0.25);
}
.article-body .mailpoet_form input[type="submit"]:hover { background: var(--wire-deep); }
.article-body .mailpoet_icon_button { background: transparent; border: 0; padding: 0.3rem; cursor: pointer; }
.article-body .mailpoet_captcha { display: block; border: 1.5px solid var(--rule); border-radius: 6px; }

/* ---- Inner pages: news and articles ---------------------------- */
.news-card {
	background: var(--panel);
	border: 1.5px solid var(--rule); border-left: 4px solid var(--copper); border-radius: 10px;
	padding: 1.1rem 1.2rem; margin: 0 0 1rem; max-width: var(--measure);
}
.news-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.news-title a { color: var(--ink); text-decoration: none; }
.news-title a:hover { color: var(--wire); text-decoration: underline; }
.news-excerpt { margin-top: 0.5rem; }
.news-excerpt p { margin: 0; }

.news-article { max-width: var(--measure); margin: 2rem auto 0; }
.article-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; font-variation-settings: "opsz" 96; }
.article-body { margin-top: 1.25rem; }
.article-body img { border: 1px solid var(--rule); border-radius: 6px; }
.article-body pre, .article-body code { font-family: var(--mono); background: var(--paper-deep); border-radius: 4px; }
.article-body pre { padding: 0.75rem 1rem; overflow-x: auto; }
.article-body blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--wire); background: var(--panel); border-radius: 0 6px 6px 0; }
.article-body h2, .article-body h3 { font-family: var(--serif); font-weight: 500; }

.paging .nav-links { display: flex; gap: 0.75rem; justify-content: center; font-family: var(--mono); font-size: 0.85rem; }
.paging a, .paging .current { padding: 0.3rem 0.7rem; border: 1.5px solid var(--rule); border-radius: 6px; background: var(--panel); color: var(--ink); text-decoration: none; }
.paging .current { border-color: var(--wire); color: var(--wire); font-weight: 500; }

.alignleft { float: left; margin: 0.25rem 1rem 0.5rem 0; }
.alignright { float: right; margin: 0.25rem 0 0.5rem 1rem; }
.aligncenter { display: block; margin: 0.5rem auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { color: var(--ink-soft); font-size: 0.85rem; text-align: center; }

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

/* ---- Reveal ----------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
	html.has-js .reveal.is-in { opacity: 1; transform: none; }
	html.has-js .reveal .tag-wire { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
	html.has-js .reveal.is-in .tag-wire { transform: scaleX(1); }
	html.has-js .reveal .point, html.has-js .reveal .lesson-card, html.has-js .reveal .step { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
	html.has-js .reveal.is-in .point, html.has-js .reveal.is-in .lesson-card, html.has-js .reveal.is-in .step { opacity: 1; transform: none; }
	html.has-js .reveal.is-in :is(.point, .lesson-card, .step):nth-child(2) { transition-delay: 0.08s; }
	html.has-js .reveal.is-in :is(.point, .lesson-card, .step):nth-child(3) { transition-delay: 0.16s; }
	html.has-js .reveal.is-in :is(.point, .lesson-card, .step):nth-child(4) { transition-delay: 0.24s; }
	html.has-js .reveal.is-in :is(.point, .lesson-card, .step):nth-child(5) { transition-delay: 0.32s; }
	html.has-js .reveal.is-in :is(.point, .lesson-card, .step):nth-child(6) { transition-delay: 0.4s; }
}

/* ---- Larger screens -------------------------------------------- */
@media (min-width: 40rem) {
	main.page { padding: 2.5rem 1.75rem 4rem; }
	.taster-lessons { grid-template-columns: repeat(2, 1fr); }
	.points { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
	.hero { grid-template-columns: 5fr 7fr; align-items: center; gap: 3rem; padding-top: 2.5rem; }
	.hero-shot { margin-right: -1.5rem; }
	.points { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
	.lesson-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 2.5rem; }
	.taster-lessons { grid-template-columns: repeat(3, 1fr); }
	.what { margin-top: 5rem; }
}