/* =============================================================================
 * Atlas Climbing — component bundle.
 *
 * Ported from .design/reference/animated-homepage.html and the ten
 * component preview.html files. Class names match the reference so the two can
 * be diffed; the WordPress-specific work is confined to the first section, and
 * the page shapes the reference does not contain — course page, instructors,
 * dashboard, lesson player — come after the marketing components.
 *
 * Granite and chalk: stone greys, one rope-orange accent, and contour linework
 * as the only texture. No gradients, no photography, nothing that loops.
 * ========================================================================== */

/* ── WordPress shell ──────────────────────────────────────────────────────
 * theme.json sets root padding to 0 and every band supplies its own gutter
 * through .wrap, as the reference does.
 * ------------------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--chalk-100);
	color: var(--ink-700);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.wp-site-blocks > * { margin-block: 0; }

/* The child combinator matters. `.wp-site-blocks main` is (0,1,1) and would
 * reach past the template's own <main> into any nested region that sets its
 * own display — which is how the dashboard's grid silently became a block and
 * lost every gap between its sections. */
.wp-site-blocks > main { display: block; }

/* Bands butt against each other; their own padding is the rhythm. WP's flow
 * layout otherwise puts blockGap between every top-level child of a flow
 * container, which draws a stripe of page colour between each pair of bands.
 *
 * Both selectors are needed. On a page the bands live inside
 * .wp-block-post-content; on the course archive and the 404 they are direct
 * children of <main>, because there is no post content to put them in. The
 * extra element or class in each is load-bearing: WP's rule is
 * `:root :where(.is-layout-flow) > *`, which is (0,1,0), so a one-class
 * selector ties it and wins only on source order. Platform gotcha 35. */
main .wp-block-post-content > *,
main.wp-block-group > * { margin-block: 0; }

/* A template part wraps its contents in an element exactly as tall as the
 * header inside it, which would make position:sticky pin against a box that
 * scrolls away. Taking the wrapper out of the box tree fixes it without giving
 * up template parts. */
.wp-block-template-part { display: contents; }

img,
svg { max-width: 100%; }

a { color: var(--rope-600); }

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

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

/* The platform demo banner is sticky at top:0 with a z-index far above ours.
 * motion.js measures it into --banner-h so our header sits beneath it; the 0px
 * fallback covers no-JS and the banner being switched off. It is also
 * recoloured, so the page carries no second accent. */
:root { --banner-h: 0px; }

.sfp-demo-banner {
	background: var(--granite-900) !important;
	color: var(--ink-inverse) !important;
	border-bottom: 1px solid var(--hairline) !important;
	box-shadow: none !important;
	font-family: var(--font-sans) !important;
}

.sfp-demo-banner a { color: var(--rope-inverse) !important; }
.sfp-demo-banner__badge {
	background: var(--rope-600) !important;
	color: var(--on-rope) !important;
}

/* ── Layout primitives ────────────────────────────────────────────────── */
.wrap {
	width: var(--col);
	margin-inline: auto;
	padding-inline: var(--space-7);
}

@media (max-width: 720px) {
	.wrap { padding-inline: var(--space-4); }
}

.band { padding-block: var(--space-9); }

@media (max-width: 720px) {
	.band { padding-block: var(--space-7); }
}

.band-raised { background: var(--chalk-000); }
.band-sunken { background: var(--granite-200); }
.band-inverse {
	background: var(--granite-900);
	color: var(--ink-inverse);
}

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 {
	font-family: var(--font-display);
	color: var(--ink-900);
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp(40px, 6.6vw, 72px); line-height: .96; font-weight: 500; letter-spacing: -.025em; }
h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.04; font-weight: 500; letter-spacing: -.018em; }
h3 { font-size: 30px; line-height: 1.14; font-weight: 500; letter-spacing: -.012em; }

.band-inverse h2,
.band-inverse h3 { color: var(--ink-inverse); }

.lede {
	font-size: clamp(17px, 2vw, 19px);
	line-height: 1.6;
	color: var(--ink-700);
	max-width: 54ch;
}

.band-inverse .lede { color: var(--ink-inverse); }

.small { font-size: 14px; line-height: 22px; }
.cap { font-size: 12px; line-height: 18px; color: var(--ink-500); }

/* Every quantity on the site is set in mono with tabular figures. That is
 * what makes it read as a teaching tool rather than a brochure. */
.data {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}

.data-sm {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 16px;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

/* ── Eyebrow and topo tick ────────────────────────────────────────────────
 * The five ticks are the system's signature and replace the plain rule other
 * systems hang under an eyebrow. The middle one is double height.
 * ------------------------------------------------------------------------ */
.eyebrow {
	margin: 0;
	font-size: 12px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.band-inverse .eyebrow { color: var(--ink-inverse-muted); }

.tick {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
	height: 20px;
	margin: var(--space-2) 0 var(--space-6);
}

.tick i {
	display: block;
	width: 2px;
	height: 10px;
	border-radius: var(--radius-sm);
	background: var(--rope-600);
	transform-origin: bottom;
}

.tick i:nth-child(3) { height: 20px; }
.band-inverse .tick i { background: var(--rope-inverse); }

.js-motion .tick i { transform: scaleY(0); }
.js-motion .in .tick i,
.js-motion .tick.in i {
	transform: scaleY(1);
	transition: transform var(--dur-2) var(--ease-out);
}

/* ── Reveals ──────────────────────────────────────────────────────────────
 * Visible at rest. The script adds .js-motion to <html> only once it has
 * confirmed it can restore them, so a no-JS or reduced-motion page shows
 * everything finished rather than parked at opacity 0.
 * ------------------------------------------------------------------------ */
.js-motion [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
}

.js-motion [data-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr {
	position: sticky;
	top: calc(var(--banner-h) + env(safe-area-inset-top, 0px));
	z-index: 50;
	background: color-mix(in srgb, var(--chalk-100) 86%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: background-color var(--dur-2) var(--ease-out),
	            box-shadow var(--dur-2) var(--ease-out),
	            border-color var(--dur-2) var(--ease-out);
}

.hdr.stuck {
	background: var(--chalk-000);
	box-shadow: var(--shadow-raise);
	border-color: var(--hairline);
}

.hdr-in {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	height: 80px;
	transition: height var(--dur-2) var(--ease-out);
}

.hdr.stuck .hdr-in { height: 58px; }

/* No logo exists and none has been drawn — the name is set as type until a
 * real mark does. See design-system/README.md, Iconography. */
.mark {
	display: flex;
	align-items: baseline;
	gap: 7px;
	text-decoration: none;
	margin-right: auto;
}

.mark b {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -.006em;
	color: var(--ink-900);
}

.mark span {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.nav { display: flex; gap: var(--space-6); }

.nav a {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-700);
	text-decoration: none;
	position: relative;
	padding-block: 4px;
}

.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--rope-600);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-2) var(--ease-out);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink-900); }

@media (max-width: 940px) {
	.nav { display: none; }
	.hdr .btn-secondary { display: none; }
}

.progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background: var(--rope-600);
	transform: scaleX(0);
	transform-origin: left;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font: inherit;
	font-size: 15px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .005em;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--ink-900);
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear,
	            border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out);
}

.btn .arw { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--rope-600); color: var(--on-rope); }
.btn-primary:hover { background: var(--rope-700); }

.btn-secondary {
	border-color: var(--hairline-strong);
	background: var(--chalk-000);
}

.btn-secondary:hover { box-shadow: var(--shadow-raise); }

.btn-ghost { color: var(--rope-600); padding-inline: var(--space-3); }
.btn-ghost:hover { color: var(--rope-700); }

/* On the one inverted band the accent flips — rope-600 would disappear. */
.band-inverse .btn-secondary { background: transparent; color: var(--ink-inverse); }
.band-inverse .btn-ghost { color: var(--rope-inverse); }
.plan .btn-secondary {
	background: var(--chalk-000);
	color: var(--ink-900);
	border-color: var(--hairline-strong);
}

.btn-sm { min-height: 40px; padding: 10px var(--space-4); font-size: 14px; }

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: var(--opacity-disabled);
	cursor: not-allowed;
}

/* ── TopoField ────────────────────────────────────────────────────────────
 * Paths are emitted server-side with pathLength="1", so one dasharray value
 * draws them all. Contours draw themselves; they never fade in.
 * ------------------------------------------------------------------------ */
.topo { line-height: 0; }
.topo svg { width: 100%; height: auto; display: block; }

.topo g {
	stroke: var(--topo-line);
	stroke-width: var(--stroke-topo);
	fill: none;
	opacity: var(--opacity-topo);
}

.topo path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* At rest — no JS, or reduced motion — contours are simply drawn. */
.topo path { stroke-dashoffset: 0; }
.js-motion .topo path { stroke-dashoffset: 1; }
.js-motion .topo.drawn path { animation: draw var(--dur-draw) var(--ease-line) forwards; }

@keyframes draw {
	to { stroke-dashoffset: 0; }
}

.band-inverse .topo g { opacity: .26; }
.topo .layer { will-change: transform; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
	padding-top: var(--space-10);
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
}

@media (max-width: 720px) {
	.hero { padding-top: var(--space-8); }
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--space-8);
	align-items: end;
}

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

.mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mask > span { display: inline-block; }
.js-motion .mask > span { transform: translateY(110%); }
.js-motion .go .mask > span {
	transform: none;
	transition: transform var(--dur-4) var(--ease-out);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-7);
}

.hero-side {
	display: grid;
	gap: var(--space-4);
	padding-bottom: var(--space-2);
	margin: 0;
}

.hero-side .row {
	display: flex;
	gap: var(--space-4);
	align-items: baseline;
	border-top: 1px solid var(--hairline);
	padding-top: var(--space-3);
}

.hero-side dt { font-size: 13px; color: var(--ink-500); min-width: 82px; }
.hero-side dd { margin: 0; font-size: 14px; color: var(--ink-900); font-weight: 500; }

.hero-field {
	position: relative;
	margin-top: var(--space-5);
}

/* ── Course cards ─────────────────────────────────────────────────────── */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-7);
}

@media (max-width: 1000px) {
	.grid-3 { grid-template-columns: 1fr; gap: var(--space-5); }
}

.card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	text-decoration: none;
	background: var(--chalk-100);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--dur-2) var(--ease-out);
}

.band-raised .card { background: var(--chalk-100); }
.card:hover,
.card:focus-within { box-shadow: var(--shadow-raise); }

/* The card lifts and its corner contour shifts. The card does not scale. */
.card .corner {
	position: absolute;
	top: -46px;
	right: -70px;
	width: 300px;
	height: 140px;
	pointer-events: none;
	transition: transform var(--dur-2) var(--ease-out);
}

.card .corner g {
	stroke: var(--topo-line);
	stroke-width: var(--stroke-topo);
	fill: none;
	opacity: var(--opacity-topo);
}

.card:hover .corner,
.card:focus-within .corner { transform: translate(-4px, 4px); }

.card > * { position: relative; }

/* The card title is h3 under a section heading and h2 when the grid leads the
 * page, so the rule cannot name one tag. The size stays display-m either way —
 * the level is about the document outline, not the type scale. */
.card :is(h2, h3, h4) {
	margin: var(--space-5) 0 var(--space-3);
	font-size: 30px;
	line-height: 1.14;
	font-weight: 500;
	letter-spacing: -.012em;
}
.card p { margin: 0 0 var(--space-6); font-size: 14px; line-height: 22px; color: var(--ink-700); }

.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--hairline);
	color: var(--ink-500);
}

.card-meta .who { color: var(--ink-700); }

.card-cta {
	margin-top: var(--space-5);
	font-size: 15px;
	font-weight: 600;
	color: var(--rope-600);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ── DifficultyMeter ──────────────────────────────────────────────────────
 * Bars never carry the level alone — the word is always beside them.
 * ------------------------------------------------------------------------ */
.top-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.meter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--chalk-000);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
}

.bars { display: flex; align-items: flex-end; gap: var(--space-1); height: 12px; }

.bars i {
	display: block;
	width: 3px;
	height: 12px;
	border-radius: var(--radius-sm);
	box-shadow: inset 0 0 0 1px var(--hairline-strong);
	transform-origin: bottom;
}

.bars i.on { background: var(--rope-600); box-shadow: none; }

.js-motion .bars i.on { transform: scaleY(0); }
.js-motion .in .bars i.on {
	transform: scaleY(1);
	transition: transform var(--dur-2) var(--ease-out);
}

.word,
.pill {
	font-size: 11px;
	line-height: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.word { color: var(--ink-700); }
.pill {
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	background: var(--rope-100);
	color: var(--rope-700);
}

/* ── InstructorCard ───────────────────────────────────────────────────── */
.who-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background: var(--chalk-000);
	border-radius: var(--radius-md);
	transition: box-shadow var(--dur-2) var(--ease-out);
}

.who-card:hover { box-shadow: var(--shadow-raise); }

.disc {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: var(--granite-200);
	color: var(--ink-900);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	overflow: hidden;
	flex: none;
}

.disc img { width: 100%; height: 100%; object-fit: cover; }

.who-card h3 {
	font-size: 21px;
	line-height: 1.26;
	font-weight: 600;
	letter-spacing: -.006em;
	margin: var(--space-5) 0 var(--space-1);
}

.who-card .bio { margin: var(--space-4) 0 var(--space-6); }
.who-foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--hairline); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	border: 1px solid var(--hairline-strong);
	color: var(--ink-700);
	font-size: 11px;
	line-height: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.chip:hover { border-color: var(--rope-600); color: var(--rope-700); }

/* ── LessonList ───────────────────────────────────────────────────────────
 * Four states, and none of them is signalled by colour alone: done carries a
 * check glyph, current a play triangle and a distinct ground, ahead an empty
 * circle, locked a padlock and the word "Members".
 * ------------------------------------------------------------------------ */
.inside-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-8);
	align-items: start;
}

@media (max-width: 960px) {
	.inside-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

ol.lessons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	background: var(--chalk-000);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-1) linear;
}

.row .num { color: var(--ink-500); width: 44px; flex: none; }
.row .mark-i { flex: none; width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.row:hover .mark-i { transform: translateX(2px); }
.row .title { flex: 1; font-size: 14px; line-height: 22px; color: var(--ink-700); }
.row .right { flex: none; display: flex; align-items: center; gap: var(--space-3); color: var(--ink-500); }
.row .resume { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--rope-600); }

.row .tagm {
	font-size: 11px;
	line-height: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline-strong);
	color: var(--ink-700);
}

.is-done .mark-i { color: var(--summit-600); }
.is-done .title { color: var(--ink-500); }
.is-current { background: var(--rope-100); border-color: var(--rope-600); }
.is-current .mark-i { color: var(--rope-600); }
.is-current .title { color: var(--ink-900); font-weight: 500; }
.is-ahead .mark-i { color: var(--hairline-strong); }
.is-locked { background: var(--granite-200); opacity: var(--opacity-locked); }
.is-locked .mark-i { color: var(--ink-700); }

.check-row { margin-left: var(--space-5); }
.check-row .title { font-family: var(--font-mono); font-size: 13px; color: var(--ink-500); }

/* ── ProgressRing ─────────────────────────────────────────────────────── */
.rings { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.ring-item { text-align: center; width: 132px; }
.ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.ring .track { stroke: var(--hairline-strong); }

.ring .arc {
	stroke: var(--rope-600);
	transition: stroke-dashoffset var(--dur-progress) var(--ease-out), stroke var(--dur-progress) linear;
}

.ring-item.done .arc { stroke: var(--summit-600); }
.ring .frac { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-900); font-variant-numeric: tabular-nums; }
.ring .tickmark { stroke: var(--summit-600); }
.ring-item .label { margin: var(--space-3) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-700); }
.ring-item .state { margin: 2px 0 0; color: var(--ink-500); }

/* ── ContinueTile ─────────────────────────────────────────────────────── */
.dash {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: var(--space-7);
	align-items: start;
}

@media (max-width: 960px) {
	.dash { grid-template-columns: 1fr; }
}

.tile {
	display: flex;
	gap: var(--space-6);
	align-items: center;
	flex-wrap: wrap;
	padding: var(--space-6);
	background: var(--chalk-000);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
}

.tile .main { flex: 1 1 260px; min-width: 0; }
.tile .tile-cta { margin-top: var(--space-5); }
.tile h3 { margin: 0 0 var(--space-3); transition: opacity var(--dur-2) var(--ease-out); }

/* ── PricingPanel ─────────────────────────────────────────────────────── */
.price-band {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-10);
}

@media (max-width: 720px) {
	.price-band { padding-block: var(--space-8); }
}

.price-topo {
	position: absolute;
	inset: auto 0 -30px 0;
	width: 100%;
	height: 260px;
	pointer-events: none;
}

.price-topo svg { height: 100%; }

.plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	align-items: start;
	margin-top: var(--space-8);
}

@media (max-width: 760px) {
	.plans { grid-template-columns: 1fr; }
}

.plan {
	padding: var(--space-6);
	background: var(--chalk-000);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
}

.plan h3 { font-size: 21px; font-weight: 600; margin: 0 0 var(--space-4); }

.fig {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -.012em;
	color: var(--ink-900);
	margin: 0;
}

.fig .cur { font-size: .6em; }
.fig .per { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--ink-500); }

.plan ul { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.plan li { display: flex; gap: var(--space-3); font-size: 14px; line-height: 22px; color: var(--ink-700); }
.plan li svg { flex: none; color: var(--summit-600); margin-top: 2px; }

.covers {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--hairline);
	font-size: 14px;
	line-height: 22px;
	color: var(--ink-900);
	font-weight: 500;
}

.plan .btn { width: 100%; margin-top: var(--space-5); }

.price-foot { position: relative; margin: var(--space-6) 0 0; color: var(--ink-inverse-muted); }
.price-foot a { color: var(--rope-inverse); }

/* Membership is not wired on this demo — monetize_by is "free" and every
 * course is free. The note says so rather than the panel implying a checkout
 * that does not exist. */
.demo-note {
	position: relative;
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--hairline);
	color: var(--ink-500);
}

.plan .demo-note { border-top-color: var(--hairline); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot { padding-block: var(--space-8); }

.foot-in {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);
	justify-content: space-between;
}

.foot .mark b { color: var(--ink-inverse); }
.foot .mark span { color: var(--ink-inverse-muted); }
.foot p,
.foot .data { color: var(--ink-inverse-muted); }

.gyms { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.foot-links a { color: var(--ink-inverse); text-decoration: none; font-size: 14px; font-weight: 500; }
.foot-links a:hover { color: var(--rope-inverse); }

/* ── Course page ──────────────────────────────────────────────────────────
 * The lesson list is the spine; a ContinueTile sticks on the right at desktop
 * and collapses above the list on phones. No hero image.
 * ------------------------------------------------------------------------ */
.course-head { padding-block: var(--space-9) var(--space-7); }

@media (max-width: 720px) {
	.course-head { padding-block: var(--space-7) var(--space-6); }
}

.course-head .top-row { margin-bottom: var(--space-5); }
.course-head .meta { margin-top: var(--space-4); color: var(--ink-500); }

.course-byline {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--hairline);
}

.course-byline .disc { width: 44px; height: 44px; font-size: 16px; }
.course-byline .who-name { font-weight: 600; color: var(--ink-900); }

.course-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: var(--space-8);
	align-items: start;
}

@media (max-width: 900px) {
	.course-grid { grid-template-columns: 1fr; gap: var(--space-6); }
	/* The tile is why someone came back — it goes above the list on a phone. */
	.course-grid .rail { order: -1; }
}

.course-grid .rail { position: sticky; top: calc(var(--banner-h) + 92px); }

@media (max-width: 900px) {
	.course-grid .rail { position: static; }
}

.course-body { max-width: 68ch; }
.course-body > * + * { margin-top: var(--space-5); }

/* ── Instructors page ─────────────────────────────────────────────────── */
.who-full {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--space-6);
	padding: var(--space-7);
	background: var(--chalk-000);
	border-radius: var(--radius-md);
}

@media (max-width: 620px) {
	.who-full { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
}

.who-full .disc { width: 96px; height: 96px; font-size: 30px; }
.who-full h2 { font-size: 30px; line-height: 1.14; }
.who-list { display: grid; gap: var(--space-5); margin-top: var(--space-8); }

/* ── Dashboard ────────────────────────────────────────────────────────────
 * A 280px rail and a fluid main, one column under 900px. Denser than the
 * marketing pages: space-5 tile padding, space-7 between regions.
 * ------------------------------------------------------------------------ */
.dash-strip { padding-block: var(--space-7); }

.dash-greet {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

/* On the inverse band the disc's own granite-200 ground would read as a pale
 * hole, so give it the band's own hairline instead and let a portrait cover
 * it when there is one. */
.dash-greet .disc {
	background: var(--granite-200);
	box-shadow: inset 0 0 0 1px var(--hairline);
}

.dash-strip .greet { margin: 0; font-size: 30px; line-height: 1.14; color: var(--ink-inverse); font-family: var(--font-display); font-weight: 500; }
.dash-strip .data { color: var(--ink-inverse-muted); margin: var(--space-2) 0 0; }

.dash-shell {
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: start;
	padding-block: var(--space-7) var(--space-9);
}

@media (max-width: 900px) {
	.dash-shell { grid-template-columns: 1fr; gap: var(--space-6); }
}

.dash-rail { display: grid; gap: var(--space-5); }

@media (max-width: 900px) {
	/* The rail becomes a horizontal scroller above main. */
	.dash-rail {
		grid-auto-flow: column;
		grid-auto-columns: minmax(220px, 1fr);
		overflow-x: auto;
		gap: var(--space-4);
		padding-bottom: var(--space-2);
		scrollbar-width: thin;
	}
}

.rail-box {
	padding: var(--space-5);
	background: var(--chalk-000);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
}

.rail-box h2 { font-size: 12px; line-height: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-sans); margin: 0 0 var(--space-4); }
.rail-nav { display: grid; gap: var(--space-1); }
.rail-nav a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink-700);
	font-size: 14px;
	font-weight: 500;
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear;
}

.rail-nav a:hover { background: var(--granite-200); color: var(--ink-900); }
.rail-nav a[aria-current="page"] { background: var(--rope-100); color: var(--rope-700); }

.dash-main { display: grid; gap: var(--space-7); min-width: 0; }
.dash-main > section { min-width: 0; }
.dash-main h2 { font-size: 21px; line-height: 1.26; font-weight: 600; letter-spacing: -.006em; margin: 0 0 var(--space-5); }

.empty {
	position: relative;
	overflow: hidden;
	padding: var(--space-8) var(--space-6);
	background: var(--chalk-000);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	text-align: center;
}

.empty .topo { position: absolute; inset: auto 0 -40px 0; height: 180px; opacity: .6; pointer-events: none; }
.empty > * { position: relative; }

/* ── Lesson player ────────────────────────────────────────────────────────
 * Built here rather than left to Tutor so the lesson list and the checkpoint
 * states stay identical from the dashboard into the lesson.
 * ------------------------------------------------------------------------ */
.lesson-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: var(--space-8);
	align-items: start;
	padding-block: var(--space-7) var(--space-9);
}

@media (max-width: 900px) {
	.lesson-shell { grid-template-columns: 1fr; gap: var(--space-6); }
}

.lesson-shell .rail { position: sticky; top: calc(var(--banner-h) + 92px); display: grid; gap: var(--space-5); }

@media (max-width: 900px) {
	.lesson-shell .rail { position: static; }
}

.lesson-crumb { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--ink-500); }
.lesson-crumb a { color: var(--ink-700); text-decoration: none; }
.lesson-crumb a:hover { color: var(--rope-700); }

.lesson-head h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.04; letter-spacing: -.018em; margin-top: var(--space-4); }

.lesson-video {
	margin-top: var(--space-6);
	background: var(--granite-200);
	border-radius: var(--radius-none);
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	color: var(--ink-500);
	overflow: hidden;
}

.lesson-video iframe,
.lesson-video video { width: 100%; height: 100%; border: 0; display: block; }

.lesson-body { margin-top: var(--space-6); max-width: 68ch; }
.lesson-body > * + * { margin-top: var(--space-5); }

.lesson-foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--hairline);
}

.lesson-foot .spacer { flex: 1; }

.done-note {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--summit-600);
	font-size: 14px;
	font-weight: 600;
}

/* ── Photography ──────────────────────────────────────────────────────────
 * The brand book's one provision for it: "If real climbing photography
 * arrives, it goes in radius-none wells on granite-200, always with a
 * granite-900 wash under any text that sits on it." The well is the ground —
 * it shows while the image loads and behind anything that does not cover.
 * ------------------------------------------------------------------------ */
.well {
	background: var(--granite-200);
	border-radius: var(--radius-none);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	margin: 0;
}

.well img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* WordPress wraps an image block in a figure; the well is the figure itself
 * when the class lands there, and its parent when it does not. */
.well figure,
.well .wp-block-image { margin: 0; height: 100%; }

.well-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

@media (max-width: 860px) {
	.well-row { grid-template-columns: 1fr; }
}

.well-row figure { margin: 0; }
.well-cap { margin: var(--space-3) 0 0; }

/* Our own layout wrappers are built from core group blocks, so WordPress's
 * flow layout still puts blockGap on every child after the first — which
 * inside a grid cell offsets items two and three downward and leaves a row
 * that looks subtly broken. These wrappers own their spacing through `gap`.
 * The descendant is deliberate: WP's rule is (0,1,0) and a bare class would
 * only beat it on source order. Platform gotcha 35, one level down. */
main :is( .well-row, .split, .prose ) > * { margin-block-start: 0; }

/* ── Prose and generic page content ───────────────────────────────────── */
.prose { max-width: 68ch; display: grid; gap: var(--space-5); }
.prose > * { margin: 0; }
.prose h2 { margin-top: var(--space-5); }
.prose h3 { font-size: 21px; font-weight: 600; letter-spacing: -.006em; margin-top: var(--space-4); }
.prose ul { padding-left: 1.1em; display: grid; gap: var(--space-2); }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-8);
	align-items: start;
}

@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── Core blocks inside an Atlas band ─────────────────────────────────────
 * The inner pages use core paragraph, heading, list and button blocks.
 * theme.json gives them the right colour and family; these give the two with
 * their own chrome the same shape as their bespoke counterparts.
 * ------------------------------------------------------------------------ */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid transparent;
	transition: background-color var(--dur-1) linear, color var(--dur-1) linear,
	            border-color var(--dur-1) linear, box-shadow var(--dur-2) var(--ease-out);
}

.wp-element-button:active,
.wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--chalk-000);
	color: var(--ink-900);
	border-color: var(--hairline-strong);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--chalk-000);
	color: var(--ink-900);
	box-shadow: var(--shadow-raise);
}

/* space-8 is the gap between a section heading and its content, set on the
 * adjacency so every kind of content gets it rather than three blocks each
 * remembering to. */
.section-heading + * { margin-top: var(--space-8); }

/* ── Editor canvas ────────────────────────────────────────────────────── */
.editor-styles-wrapper { background: var(--chalk-100); }
.editor-styles-wrapper .band { position: relative; }