/**
 * DD Learn hub - /learn/ archive.   Redesign 2026-08-30.
 *
 * Light-authored. Dark mode is a single authored block at the end with the
 * Dracula plugin's twins pinned (DESIGN-BANS trap #9: !important + repeat
 * the literal in the twin). Brand gold is written in rgb() notation so
 * build-darkfix's scanner can see it, and the gold GRADIENT is recombined
 * from one integer per channel at every use site (trap #7).
 *
 * House rules honoured here, so nobody has to re-derive them:
 *   - no eyebrow pills: every panel title is plain text, no capsule;
 *   - no accent rails: the whole border vocabulary is a 1px hairline, and
 *     emphasis comes from icon tiles, the --tile wash, and type weight;
 *   - no logical border shorthand carrying a colour (trap #10);
 *   - no :not([class]) - prose links are scoped by container (trap #11);
 *   - h1/h2/h3 sizes carry !important, because an unscoped Customizer rule
 *     flattens every hero H1 on the site to x-large (trap #8) and the theme
 *     forces h2 { display:flex; text-align:center };
 *   - every font-weight carries !important too, and so does every font-size
 *     that lands on a <p> or an <li>, for the reason spelled out above the
 *     .dd-lrnh p rule. Reading this file will not tell you why; measure.
 *
 * The decoration that stayed had to earn it. The route board's segments are
 * published-vs-planned. The step disc is the stop number. The dashed topic
 * chips are "not written yet". Nothing here is a gradient for mood.
 */

.dd-lrnh {
	--lh-ink: #241a06;
	--lh-mut: #6d6353;
	--lh-soft: #8b8172;
	--lh-card: #ffffff;
	--lh-tile: rgba(146, 90, 10, 0.07);
	--lh-tile2: rgba(146, 90, 10, 0.11);
	--lh-pend: rgba(36, 26, 6, 0.14);
	--lh-brd: rgba(36, 26, 6, 0.12);
	--lh-hair: rgba(36, 26, 6, 0.08);
	--lh-gold: rgb(154, 125, 0);
	/* The cover's own ground, straight out of the engine's token table
	   (covers.php `plate` #fffdf8 light / #1c170d dark), so a plate laid on
	   this paper is the same sheet it was drawn on. --lh-paper sits a shade
	   under it so the plate still reads as a separate object; --lh-dot is the
	   engine's `tick` alpha at card scale. */
	--lh-plate: #fffdf8;
	--lh-paper: #fbf7ef;
	--lh-dot: rgba(36, 26, 6, 0.055);
	--lh-lift: 0 22px 48px -34px rgba(146, 90, 10, 0.55);
	--lh-lift2: 0 30px 60px -30px rgba(36, 26, 6, 0.20);
	/* Gold gradient, one integer per channel: a lone integer cannot be read
	   as a colour, so the dark-mode plugin cannot swap it (trap #7). */
	--lh-g1: 196;
	--lh-g2: 120;
	--lh-g3: 17;
	--lh-b1: 255;
	--lh-b2: 191;
	--lh-b3: 47;
	position: relative;
	width: 100%;
	/* Header clearance: this main is NOT in the Customizer's -80px pull list
	   (unlike .dd-bloghub), so its own padding is the whole clearance. The
	   token lives in dd-widgets.css HEADER CLEARANCE (112px / 120px). */
	padding: calc(var(--dd-headroom, 112px) + 10px) 0 48px;
	overflow: hidden;
}

.dd-lrnh-wrap {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 28px);
}

/* Two more unscoped Customizer rules land on this page, and neither is visible
   in any stylesheet you can read: a tag-list carrying `font-weight: normal
   !important` flattens every weight here to 400, and
   `@media (max-width:767px) { p { font-size:17px !important; text-align:
   justify } li { font-size:18px !important } }` resizes the copy on a phone
   and justifies it, so two-word labels stretch edge to edge.

   The weights and the p/li sizes are defended declaration by declaration
   below, because each one wants its own value. The justify is put back once,
   here, since no <p> in this component wants an alignment of its own: they all
   take the container's. Note .dd-lrnh-route-p is a <span> despite the name, so
   its `text-align: end` is not caught by this. */
.dd-lrnh p {
	text-align: inherit;
}

/* Ambient light - warm over the hero, cool where the routes start, nothing
   below. Two lamps, not a wash. */
.dd-lrnh-aura {
	position: absolute;
	top: -260px;
	inset-inline-start: 4%;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 191, 47, 0.16), transparent 66%);
	pointer-events: none;
}
.dd-lrnh-aura--b {
	inset-inline-start: auto;
	inset-inline-end: -6%;
	top: 40px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(42, 90, 104, 0.11), transparent 66%);
}

/* ======================================================================
 * 1. Hero
 * ==================================================================== */

.dd-lrnh-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	align-items: center;
	gap: clamp(28px, 4vw, 60px);
	margin: 0 0 clamp(46px, 6vw, 82px);
}

.dd-lrnh .dd-lrnh-h1 {
	font-size: clamp(33px, 4.8vw, 56px) !important;
	font-weight: 800 !important;
	line-height: 1.26 !important;
	color: var(--lh-ink);
	margin: 0 0 16px;
	text-align: right;
	letter-spacing: 0;
}

.dd-lrnh .dd-lrnh-sub {
	font-size: 16px !important;
	line-height: 2.05;
	color: var(--lh-mut);
	margin: 0 0 24px;
	max-width: 58ch;
}

/* ---------- Search ---------- */

.dd-lrnh-searchwrap {
	margin: 0 0 26px;
}

.dd-lrnh-search {
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: 520px;
	padding: 0 16px;
	border: 1px solid var(--lh-brd);
	border-radius: 15px;
	background: linear-gradient(var(--lh-card), var(--lh-card));
	color: var(--lh-soft);
	box-shadow: 0 10px 26px -22px rgba(36, 26, 6, 0.6);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dd-lrnh-search:focus-within {
	border-color: rgba(196, 120, 17, 0.55);
	box-shadow: 0 0 0 4px rgba(255, 191, 47, 0.18);
}
.dd-lrnh-search svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--lh-gold);
}
.dd-lrnh-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 15px 0 !important;
	/* the theme's input{margin-bottom:15px} centres the MARGIN box in a flex
	   row, which drops the field visibly low. */
	margin: 0 !important;
	font-size: 14.5px;
	color: var(--lh-ink);
	outline: none;
}
.dd-lrnh-search input::-webkit-search-cancel-button {
	display: none;
}
.dd-lrnh-clear {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lh-tile);
	color: var(--lh-mut);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.dd-lrnh-clear:hover {
	background: var(--lh-tile2);
}

.dd-lrnh-hits {
	margin: 10px 2px 0;
	min-height: 18px;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--lh-gold);
}

/* ---------- Counters: real numbers, counted from the posts ---------- */

.dd-lrnh-counts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px 18px;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--lh-hair);
}
/* The number is the point, so it is read first; the source order stays
   dt-then-dd because that is what a definition list means. */
.dd-lrnh-count {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}
.dd-lrnh-count dt {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600 !important;
	line-height: 1.6;
	color: var(--lh-soft);
}
.dd-lrnh-count dd {
	margin: 2px 0 0;
	font-size: clamp(24px, 2.6vw, 31px);
	font-weight: 800 !important;
	line-height: 1.2;
	color: var(--lh-ink);
	font-variant-numeric: tabular-nums;
}

/* ======================================================================
 * 2. Route board - the page's map and its main navigation.
 *    Each row: what the route is, how much of it exists, where it lands.
 * ==================================================================== */

.dd-lrnh-board {
	padding: 18px 18px 14px;
	border: 1px solid var(--lh-brd);
	border-radius: 26px;
	background: linear-gradient(var(--lh-card), var(--lh-card));
	box-shadow: var(--lh-lift);
}

.dd-lrnh-board-h {
	margin: 0 0 12px;
	padding: 0 6px;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0;
	color: var(--lh-soft);
}

.dd-lrnh-route {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	grid-template-areas:
		"ic n     p"
		"ic stops to";
	align-items: center;
	gap: 10px 13px;
	padding: 12px;
	border-radius: 18px;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.18s ease;
}
.dd-lrnh-route + .dd-lrnh-route {
	margin-top: 2px;
}
.dd-lrnh-route:hover,
.dd-lrnh-route:focus-visible {
	background: var(--lh-tile);
}

.dd-lrnh-route-ic {
	grid-area: ic;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--lh-tile);
	color: var(--lh-gold);
}
.dd-lrnh-route-ic svg {
	width: 21px;
	height: 21px;
}

.dd-lrnh-route-n {
	grid-area: n;
	min-width: 0;
	display: block;
	font-size: 15.5px;
	font-weight: 800 !important;
	line-height: 1.5;
	color: var(--lh-ink);
}
.dd-lrnh-route-p {
	grid-area: p;
	display: block;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--lh-soft);
	text-align: end;
	white-space: nowrap;
}

.dd-lrnh-route-to {
	grid-area: to;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 800 !important;
	color: var(--lh-gold);
	white-space: nowrap;
}
.dd-lrnh-route-to svg {
	width: 15px;
	height: 15px;
	transition: transform 0.2s ease;
}
.dd-lrnh-route:hover .dd-lrnh-route-to svg {
	transform: translateX(-3px);
}

/* The segments ARE the data: one per planned lesson, filled once published. */
.dd-lrnh-stops {
	grid-area: stops;
	display: flex;
	gap: 4px;
	align-items: center;
}
.dd-lrnh-stop {
	flex: 1 1 0;
	min-width: 0;
	height: 6px;
	border-radius: 3px;
	background: var(--lh-pend);
}
.dd-lrnh-stop.is-done {
	background: linear-gradient(90deg, rgb(var(--lh-g1) var(--lh-g2) var(--lh-g3)), rgb(var(--lh-b1) var(--lh-b2) var(--lh-b3)));
}

/* ======================================================================
 * 3. Lanes
 * ==================================================================== */

.dd-lrnh-lane {
	margin: 0 0 clamp(48px, 6vw, 84px);
	scroll-margin-top: 118px;
}

.dd-lrnh-lanehead {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 18px;
	margin: 0 0 26px;
	padding: 0 0 20px;
	border-width: 0 0 1px;
	border-style: solid;
	border-bottom-color: var(--lh-hair);
}
.dd-lrnh-laneic {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 17px;
	background: var(--lh-tile);
	color: var(--lh-gold);
}
.dd-lrnh-laneic svg {
	width: 26px;
	height: 26px;
}
.dd-lrnh-lanetxt {
	min-width: 0;
}
.dd-lrnh .dd-lrnh-h2 {
	display: block !important;
	text-align: right !important;
	font-size: clamp(22px, 2.8vw, 30px) !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;
	color: var(--lh-ink);
	margin: 0 0 6px;
}
.dd-lrnh-lanesub {
	margin: 0;
	font-size: 14px !important;
	line-height: 1.95;
	color: var(--lh-mut);
	max-width: 70ch;
}

/* The meter: the same fact as the route board, restated where the reader
   has arrived, so a deep link into a lane is not missing the context. */
.dd-lrnh-meter {
	display: grid;
	grid-template-columns: auto minmax(108px, 1fr);
	align-items: center;
	gap: 3px 13px;
	min-width: 226px;
	text-align: start;
}
.dd-lrnh-meter-n {
	grid-area: 1 / 1 / 3 / 2;
	align-self: center;
	display: block;
	font-size: 28px;
	font-weight: 800 !important;
	line-height: 1.15;
	color: var(--lh-ink);
	font-variant-numeric: tabular-nums;
}
.dd-lrnh-meter-n b {
	font-weight: 700 !important;
	font-size: 16px;
	color: var(--lh-soft);
}
.dd-lrnh-meter-bar {
	grid-area: 1 / 2 / 2 / 3;
	align-self: end;
	display: block;
	height: 6px;
	margin: 0 0 4px;
	border-radius: 3px;
	background: var(--lh-pend);
	overflow: hidden;
}
.dd-lrnh-meter-bar i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, rgb(var(--lh-g1) var(--lh-g2) var(--lh-g3)), rgb(var(--lh-b1) var(--lh-b2) var(--lh-b3)));
}
.dd-lrnh-meter-l {
	grid-area: 2 / 2 / 3 / 3;
	align-self: start;
	display: block;
	font-size: 11.5px;
	color: var(--lh-soft);
}

/* ---------- Card grid ---------- */

.dd-lrnh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
	margin: 0 0 22px;
}

.dd-lrnh-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lh-brd);
	border-radius: 20px;
	background: linear-gradient(var(--lh-card), var(--lh-card));
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.dd-lrnh-card:hover {
	transform: translateY(-4px);
	border-color: rgba(196, 120, 17, 0.34);
	box-shadow: var(--lh-lift2);
}

/* ---------- The stage, and the plate that rests on it ----------
 *
 * A lesson cover is not a photograph, it is a DRAWN PLATE: the engine puts
 * the lesson's title, its figure and its labels on it in ink. So it can
 * never be cropped - `object-fit: cover` on a 4:3 image in a 2:1 slot threw
 * away 34% of the plate and sliced the headline in half, which is what this
 * replaces. The plate box is locked to the render's own 2544x1904, so the
 * whole drawing shows at every width by construction, and `contain` is the
 * belt to that braces if a cover ever ships another shape.
 *
 * Three planes, and each one means something:
 *   - the CARD is the white ground;
 *   - the STAGE is the cover's own paper. Same ivory the engine draws on,
 *     same tick field one zoom level out, so the plate lands on the surface
 *     it was drawn on rather than in a picture frame;
 *   - the PLATE is the drawing, lifted off that paper by a hairline and a
 *     shadow, with the sheets of its other figures showing behind it.
 *
 * The bloom under the plate is the page's own lamp (.dd-lrnh-aura) brought
 * down to card scale: warm light falling on paper, not a gradient for mood.
 */

.dd-lrnh-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Asymmetric on purpose. The sheets fan up and toward the inline end, so
	   that side gets the room; a perfectly even mount is the flattest way to
	   present a picture and reads as a template. */
	padding-block: clamp(18px, 2vw, 24px) clamp(12px, 1.5vw, 16px);
	padding-inline: clamp(13px, 1.6vw, 18px) clamp(22px, 2.6vw, 30px);
	background-color: var(--lh-paper);
	/* The bloom is spelled out from --lh-b1/b2/b3 rather than held in a token
	   of its own: a custom property whose value READS as a colour gets twinned
	   and darkened, and gold comes back brown (trap #7). Measured - the page's
	   own .dd-lrnh-aura still has that defect and computes rgb(123,100,51) in
	   dark mode. A lone integer cannot be misread, so this one survives. */
	background-image:
		radial-gradient(ellipse 78% 62% at 50% 52%, rgb(var(--lh-b1) var(--lh-b2) var(--lh-b3) / 0.15), transparent 70%),
		radial-gradient(var(--lh-dot) 1.1px, transparent 1.2px);
	background-size: 100% 100%, 14px 14px;
	background-position: center, 6px 6px;
	border-width: 0 0 1px;
	border-style: solid;
	border-bottom-color: var(--lh-hair);
	overflow: hidden;
}

/* The plate and its sheets share one box, and that box IS the cover's
   aspect ratio (2544/1904 reduced). Everything inside is absolute against
   it, so the stack can never change the height of anything. */
.dd-lrnh-plateset {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 636 / 476;
}

/* One sheet per OTHER figure in the lesson. `--s` is its depth in the stack,
   written as a lone integer so the dark-mode plugin cannot read it as a
   colour and twin it (trap #7). */
.dd-lrnh-sheet {
	position: absolute;
	inset: 0;
	display: block;
	border: 1px solid var(--lh-brd);
	border-radius: 13px;
	background: var(--lh-card);
	box-shadow: 0 6px 16px -12px rgba(36, 26, 6, 0.5);
	transform: translate(calc(var(--s, 1) * var(--lh-fan, -5px)), calc(var(--s, 1) * var(--lh-fan, -5px)));
	transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dd-lrnh-plate {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border: 1px solid var(--lh-brd);
	border-radius: 13px;
	background: var(--lh-plate);
	box-shadow: var(--lh-lift);
	transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.42s ease;
}
.dd-lrnh-plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Hover leafs the stack open a little and lifts the top sheet. It brightens
   and separates, it does not turn into a different object. */
.dd-lrnh-card:hover .dd-lrnh-plate {
	transform: translate(2px, -3px);
	box-shadow: var(--lh-lift2);
}
.dd-lrnh-card:hover .dd-lrnh-sheet {
	transform: translate(calc(var(--s, 1) * (var(--lh-fan, -5px) - 2px)), calc(var(--s, 1) * (var(--lh-fan, -5px) - 2px)));
}

/* The cover ships its own figure frame from dd-learn.css (a 30px margin, a
   22px radius, a hairline and a lift) because on a lesson it IS a figure.
   Inside a card the plate already carries all four, so the frame comes off -
   otherwise the picture floats in a box inside a box. The dark twin, which
   that stylesheet paints as this element's BACKGROUND, has to be sized to
   the box rather than `cover`, or dark mode crops exactly where light mode
   no longer does. */
.dd-lrnh-plate .dd-lrn-cover {
	position: absolute;
	inset: 0;
	display: block;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-size: 100% 100% !important;
	background-position: center !important;
}
.dd-lrnh-plate .dd-lrn-cover > img,
.dd-lrnh-plate .dd-lrn-cover > img.wp-post-image,
.dd-lrnh-plate .dd-lrn-cover > img.custom-featured-image {
	height: 100% !important;
	border-radius: 0 !important;
	object-fit: contain;
}

/* No cover yet. The plate is ivory now, not the old near-black, so the
   fallback glyph takes the scheme's gold instead of a fixed bright one -
   255,191,47 at 45% is invisible on paper. */
.dd-lrnh-holo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--lh-gold);
	opacity: 0.42;
}
.dd-lrnh-holo svg {
	width: 52px;
	height: 52px;
}

.dd-lrnh-body {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px 18px 18px;
}

/* The stop number, punched through the cover edge in the card's own colour.
   It is the lesson's position on the route, which is the one thing a reader
   of a numbered path needs and a plain grid never says. */
.dd-lrnh-step {
	position: absolute;
	top: -20px;
	inset-inline-start: 17px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 3px solid var(--lh-card);
	background: linear-gradient(135deg, rgb(var(--lh-g1) var(--lh-g2) var(--lh-g3)), rgb(var(--lh-b1) var(--lh-b2) var(--lh-b3)));
	color: #241a06;
	font-size: 15px;
	font-weight: 800 !important;
	line-height: 1;
}

.dd-lrnh .dd-lrnh-title {
	display: block !important;
	text-align: right !important;
	font-size: 16.5px !important;
	font-weight: 800 !important;
	line-height: 1.72 !important;
	margin: 0 0 9px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dd-lrnh-title a {
	color: var(--lh-ink) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.dd-lrnh-title a:hover {
	color: var(--lh-gold) !important;
}

.dd-lrnh-ex {
	margin: 0 0 14px;
	font-size: 13.5px !important;
	line-height: 1.95;
	color: var(--lh-mut);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dd-lrnh-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px 14px;
	margin: auto 0 0;
	padding: 13px 0 0;
	border-width: 1px 0 0;
	border-style: solid;
	border-top-color: var(--lh-hair);
	font-size: 12.5px !important;
	color: var(--lh-soft);
}
.dd-lrnh-mi {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.dd-lrnh-mi svg {
	width: 14px;
	height: 14px;
	opacity: 0.75;
}
.dd-lrnh-mi--to {
	color: var(--lh-gold);
	font-weight: 700 !important;
}

/* ---------- The entry point, drawn as the entry point ---------- */

.dd-lrnh-card--feat {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}
/* The entry point's plate is the biggest drawing on the page, so it sets the
   card's height instead of being squeezed into a letterbox. The stage still
   stretches (it is the card's whole right-hand face); the plate inside it
   keeps its ratio and centres, which is why nothing here needs a min-height
   and why the old 2:1 crop cannot come back. */
.dd-lrnh-card--feat .dd-lrnh-media {
	--lh-fan: -8px;
	flex: 0 0 40%;
	padding-block: clamp(20px, 2.4vw, 32px) clamp(16px, 1.9vw, 24px);
	padding-inline: clamp(16px, 2vw, 24px) clamp(28px, 3.4vw, 42px);
}
/* The plate sets this card's height, so the type has to be sized to live
   beside it rather than float in the middle of the leftover. Measured, not
   guessed: at 1240px the plate is 372px tall and the title/excerpt/meta stack
   comes to about 330 with these sizes. */
.dd-lrnh-card--feat .dd-lrnh-body {
	flex: 1 1 auto;
	justify-content: center;
	padding: clamp(24px, 3.2vw, 42px);
}
.dd-lrnh-card--feat .dd-lrnh-step {
	top: clamp(26px, 3.2vw, 40px);
	inset-inline-start: -21px;
	width: 44px;
	height: 44px;
	font-size: 17px;
}
.dd-lrnh-card--feat .dd-lrnh-title {
	font-size: clamp(20px, 2.4vw, 30px) !important;
	line-height: 1.54 !important;
	margin: 0 0 16px;
	-webkit-line-clamp: 3;
}
.dd-lrnh-card--feat .dd-lrnh-ex {
	font-size: 15.5px !important;
	line-height: 2.1;
	margin: 0 0 18px;
	max-width: 62ch;
	-webkit-line-clamp: 4;
}
.dd-lrnh-card--feat .dd-lrnh-meta {
	margin-top: 4px;
}

/* ---------- What is being written ---------- */

.dd-lrnh-next {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 22px;
	padding: 20px 22px;
	border: 1px solid var(--lh-brd);
	border-radius: 18px;
	background: var(--lh-tile);
}
.dd-lrnh-next--only {
	padding: 28px 26px;
}
.dd-lrnh-next-ic {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: linear-gradient(var(--lh-card), var(--lh-card));
	color: var(--lh-gold);
}
.dd-lrnh-next-ic svg {
	width: 19px;
	height: 19px;
}
.dd-lrnh-next-txt {
	flex: 1 1 auto;
	min-width: 0;
}
.dd-lrnh-next-h {
	margin: 0 0 4px;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.6;
	color: var(--lh-ink);
}
.dd-lrnh-next-s {
	margin: 0;
	font-size: 13.5px !important;
	line-height: 1.9;
	color: var(--lh-mut);
}
.dd-lrnh-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
}
/* Additional CSS kills every list bullet with `content: none !important`, so
   a custom marker needs its own !important to exist at all. Here there is no
   marker at all, which still has to be said with weight. */
.dd-lrnh-topics li::before,
.dd-lrnh-topics li::marker {
	content: "" !important;
	display: none !important;
}
.dd-lrnh-topics li {
	margin: 0 !important;
	padding: 7px 14px;
	border: 1px dashed var(--lh-brd);
	border-radius: 999px;
	font-size: 12.5px !important;
	line-height: 1.5;
	color: var(--lh-mut);
	background: transparent;
}

/* ---------- The terminus ---------- */

.dd-lrnh-dest {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"txt txt"
		"go near";
	align-items: center;
	gap: 18px 24px;
	padding: 26px 28px;
	border: 1px solid var(--lh-brd);
	border-radius: 22px;
	background: linear-gradient(var(--lh-card), var(--lh-card));
	box-shadow: var(--lh-lift);
}
.dd-lrnh-dest-txt {
	grid-area: txt;
	min-width: 0;
}
.dd-lrnh-dest-h {
	margin: 0 0 5px;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.6;
	color: var(--lh-ink);
}
.dd-lrnh-dest-h strong {
	font-weight: 800 !important;
	color: var(--lh-gold);
}
.dd-lrnh-dest-s {
	margin: 0;
	padding: 0 0 18px;
	border-width: 0 0 1px;
	border-style: solid;
	border-bottom-color: var(--lh-hair);
	font-size: 13.5px !important;
	line-height: 1.9;
	color: var(--lh-mut);
	max-width: 66ch;
}
.dd-lrnh-go {
	grid-area: go;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 26px;
	border-radius: 15px;
	background: linear-gradient(135deg, rgb(var(--lh-g1) var(--lh-g2) var(--lh-g3)), rgb(var(--lh-b1) var(--lh-b2) var(--lh-b3)));
	color: #241a06 !important;
	font-size: 15px;
	font-weight: 800 !important;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: 0 16px 30px -18px rgba(196, 120, 17, 0.9);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dd-lrnh-go svg {
	width: 17px;
	height: 17px;
	transition: transform 0.2s ease;
}
.dd-lrnh-go:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 36px -18px rgba(196, 120, 17, 1);
}
.dd-lrnh-go:hover svg {
	transform: translateX(-3px);
}

/* The neighbours are quiet text links, not six more buttons: a route has one
   terminus, and six equal pills read as a tag cloud. */
/* The alternatives sit beside the button, not under a rule of their own:
   one terminus, then the neighbours, on one line. */
.dd-lrnh-near {
	grid-area: near;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 18px;
	min-width: 0;
}
.dd-lrnh-near a {
	font-size: 13px;
	font-weight: 700 !important;
	color: var(--lh-gold) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.dd-lrnh-near a:hover {
	text-decoration: underline !important;
}

.dd-lrnh-noresults {
	margin: 0 0 44px;
	padding: 22px 24px;
	border: 1px solid var(--lh-brd);
	border-radius: 16px;
	background: var(--lh-tile);
	font-size: 14px !important;
	line-height: 1.95;
	color: var(--lh-mut);
}

/* ======================================================================
 * 4. Desk note
 * ==================================================================== */

.dd-lrnh-note {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 18px 30px;
	padding: 26px 28px;
	border: 1px solid var(--lh-brd);
	border-radius: 22px;
	background: linear-gradient(var(--lh-card), var(--lh-card));
}
.dd-lrnh-note-h {
	margin: 0 0 6px;
	font-size: 15.5px !important;
	font-weight: 800 !important;
	color: var(--lh-ink);
}
.dd-lrnh-note-txt p {
	margin: 0;
	font-size: 14px !important;
	line-height: 2;
	color: var(--lh-mut);
	max-width: 76ch;
}
.dd-lrnh-note-go {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.dd-lrnh-note-go a {
	display: inline-block;
	padding: 10px 17px;
	border: 1px solid var(--lh-brd);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700 !important;
	color: var(--lh-ink) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}
.dd-lrnh-note-go a:hover {
	background: var(--lh-tile);
}

/* ======================================================================
 * Utility: [hidden] has to win.
 *
 * The UA sheet gives [hidden] `display:none`, but any `display` this file
 * sets on the same element beats it on specificity - so the search would
 * "hide" cards that stayed on screen. Every element the script toggles is
 * listed here.
 * ==================================================================== */

.dd-lrnh [hidden],
.dd-lrnh-card[hidden],
.dd-lrnh-lane[hidden],
.dd-lrnh-clear[hidden] {
	display: none !important;
}

/* Focus: the ring is the only thing on this page that may appear on
 * interaction, and it appears for keyboards only. */
.dd-lrnh a:focus-visible,
.dd-lrnh button:focus-visible {
	outline: 2px solid var(--lh-gold);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ======================================================================
 * Motion - transform/opacity only, so nothing here costs layout. The
 * hidden start state is applied ONLY once the script has marked the root,
 * so a reader without JS never meets an invisible page.
 * ==================================================================== */

.dd-lrnh.is-anim .dd-lrnh-reveal {
	opacity: 0;
	transform: translateY(16px);
}
.dd-lrnh.is-anim .dd-lrnh-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dd-lrnh.is-anim .dd-lrnh-stop.is-done {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}
.dd-lrnh.is-anim .is-in .dd-lrnh-stop.is-done,
.dd-lrnh.is-anim .dd-lrnh-board.is-in .dd-lrnh-stop.is-done {
	transform: none;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) var(--lh-d, 0ms);
}
.dd-lrnh.is-anim .dd-lrnh-meter-bar i {
	transform: scaleX(0);
	transform-origin: 100% 50%;
}
.dd-lrnh.is-anim .is-in .dd-lrnh-meter-bar i {
	transform: none;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.dd-lrnh.is-anim .dd-lrnh-reveal,
	.dd-lrnh.is-anim .dd-lrnh-stop.is-done,
	.dd-lrnh.is-anim .dd-lrnh-meter-bar i {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.dd-lrnh-card,
	.dd-lrnh-plate,
	.dd-lrnh-sheet,
	.dd-lrnh-go,
	.dd-lrnh-route-to svg {
		transition: none !important;
	}
	.dd-lrnh-card:hover {
		transform: none;
	}
	.dd-lrnh-card:hover .dd-lrnh-plate {
		transform: none;
	}
	.dd-lrnh-card:hover .dd-lrnh-sheet {
		transform: translate(calc(var(--s, 1) * -5px), calc(var(--s, 1) * -5px));
	}
}

/* ======================================================================
 * Responsive
 * ==================================================================== */

@media (max-width: 1080px) {
	.dd-lrnh-hero {
		grid-template-columns: 1fr;
	}
	.dd-lrnh .dd-lrnh-sub {
		max-width: none;
	}
	.dd-lrnh-search {
		max-width: none;
	}
}

@media (max-width: 860px) {
	.dd-lrnh-card--feat {
		flex-direction: column;
	}
	/* Stacked, the stage is a band again - but the plate inside still owns
	   its ratio, so the cover stays whole. It used to be re-cropped to 16/9
	   here, which is where the phone lost the headline. The fan comes back to
	   the grid card's distance because the padding does too: measured, a -8px
	   fan on hover needs 20px of headroom and there is exactly 20px. */
	.dd-lrnh-card--feat .dd-lrnh-media {
		--lh-fan: -5px;
		flex: 0 0 auto;
	}
	.dd-lrnh-card--feat .dd-lrnh-body {
		padding: 26px 20px 20px;
	}
	.dd-lrnh-card--feat .dd-lrnh-step {
		position: absolute;
		top: -20px;
		inset-inline-start: 19px;
		width: 40px;
		height: 40px;
		margin: 0;
		border: 3px solid var(--lh-card);
		font-size: 15px;
	}
	.dd-lrnh-lanehead {
		grid-template-columns: 56px minmax(0, 1fr);
	}
	.dd-lrnh-meter {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		min-width: 0;
		text-align: start;
	}
	.dd-lrnh-meter-bar {
		margin: 0;
	}
	.dd-lrnh-meter-n {
		font-size: 20px;
	}
	.dd-lrnh-dest {
		grid-template-columns: 1fr;
		grid-template-areas:
			"txt"
			"go"
			"near";
	}
	.dd-lrnh-go {
		justify-content: center;
	}
	.dd-lrnh-note {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.dd-lrnh-counts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.dd-lrnh-route {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas:
			"ic n"
			"ic p"
			"to to"
			"stops stops";
		gap: 7px 11px;
	}
	.dd-lrnh-meter {
		grid-template-columns: auto minmax(0, 1fr);
		min-width: 0;
	}
	.dd-lrnh-route-ic {
		width: 40px;
		height: 40px;
	}
	.dd-lrnh-route-to {
		justify-content: flex-start;
	}
	.dd-lrnh-stops {
		margin-top: 4px;
		gap: 3px;
	}
	.dd-lrnh-next {
		flex-direction: column;
		gap: 12px;
	}
	.dd-lrnh-dest,
	.dd-lrnh-note,
	.dd-lrnh-board {
		padding: 20px 18px;
	}
	.dd-lrnh-grid {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
 * Dark - authored, twins pinned.
 *
 * Both halves are required (trap #9): !important so the authored value wins
 * over the plugin's re-emitted copy, and the twin declared with the LITERAL
 * value so the consumers it rewrote resolve to something. A twin written as
 * var(--tok) makes a cycle, drops out, and the plugin's copy of the LIGHT
 * rule wins instead.
 * ==================================================================== */

html[data-dracula-scheme="dark"] .dd-lrnh {
	--lh-ink: #f2ead8 !important;
	--dracula-text--lh-ink: #f2ead8 !important;
	--lh-mut: #b5a988 !important;
	--dracula-text--lh-mut: #b5a988 !important;
	--lh-soft: #9a8e73 !important;
	--dracula-text--lh-soft: #9a8e73 !important;
	--lh-card: #211b10 !important;
	--dracula-bg--lh-card: #211b10 !important;
	--dracula-bgimg--lh-card: #211b10 !important;
	--dracula-border--lh-card: #211b10 !important;
	--lh-tile: rgba(255, 191, 47, 0.08) !important;
	--dracula-bg--lh-tile: rgba(255, 191, 47, 0.08) !important;
	--dracula-bgimg--lh-tile: rgba(255, 191, 47, 0.08) !important;
	--lh-tile2: rgba(255, 191, 47, 0.16) !important;
	--dracula-bg--lh-tile2: rgba(255, 191, 47, 0.16) !important;
	--lh-pend: rgba(255, 255, 255, 0.16) !important;
	--dracula-bg--lh-pend: rgba(255, 255, 255, 0.16) !important;
	--dracula-border--lh-pend: rgba(255, 255, 255, 0.16) !important;
	--lh-brd: rgba(255, 255, 255, 0.15) !important;
	--dracula-border--lh-brd: rgba(255, 255, 255, 0.15) !important;
	--lh-hair: rgba(255, 255, 255, 0.10) !important;
	--dracula-border--lh-hair: rgba(255, 255, 255, 0.10) !important;
	--lh-gold: rgb(255, 191, 47) !important;
	--dracula-text--lh-gold: rgb(255, 191, 47) !important;
	--lh-plate: #1c170d !important;
	--dracula-bg--lh-plate: #1c170d !important;
	--dracula-bgimg--lh-plate: #1c170d !important;
	--lh-paper: #191409 !important;
	--dracula-bg--lh-paper: #191409 !important;
	--dracula-bgimg--lh-paper: #191409 !important;
	--lh-dot: rgba(255, 255, 255, 0.07) !important;
	--dracula-bg--lh-dot: rgba(255, 255, 255, 0.07) !important;
	--dracula-bgimg--lh-dot: rgba(255, 255, 255, 0.07) !important;
	--lh-lift: 0 22px 48px -34px rgba(0, 0, 0, 0.9) !important;
	--lh-lift2: 0 30px 60px -30px rgba(0, 0, 0, 0.75) !important;
}
html[data-dracula-scheme="dark"] .dd-lrnh-card:hover {
	border-color: rgba(255, 191, 47, 0.38) !important;
}
/* The stage paints a gradient, so the plugin rewrites the whole shorthand to
   its own copy and the pinned tokens above are not enough on their own: the
   literal has to be re-stated here with weight, exactly as .dd-lrnh-aura
   does two rules down (trap #9). */
html[data-dracula-scheme="dark"] .dd-lrnh-media {
	background-color: #191409 !important;
	background-image:
		radial-gradient(ellipse 78% 62% at 50% 52%, rgb(var(--lh-b1) var(--lh-b2) var(--lh-b3) / 0.12), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.07) 1.1px, transparent 1.2px) !important;
	background-size: 100% 100%, 14px 14px !important;
	background-position: center, 6px 6px !important;
	border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-dracula-scheme="dark"] .dd-lrnh-plate {
	background: #1c170d !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
	--dracula-border--lh-brd: rgba(255, 255, 255, 0.15) !important;
	box-shadow: 0 22px 48px -34px rgba(0, 0, 0, 0.9) !important;
}
html[data-dracula-scheme="dark"] .dd-lrnh-sheet {
	background: #241d11 !important;
	border-color: rgba(255, 255, 255, 0.13) !important;
	box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.8) !important;
}
html[data-dracula-scheme="dark"] .dd-lrnh-search:focus-within {
	border-color: rgba(255, 191, 47, 0.5) !important;
	box-shadow: 0 0 0 4px rgba(255, 191, 47, 0.14) !important;
}
html[data-dracula-scheme="dark"] .dd-lrnh-aura {
	background: radial-gradient(circle, rgba(255, 191, 47, 0.09), transparent 66%) !important;
}
html[data-dracula-scheme="dark"] .dd-lrnh-aura--b {
	background: radial-gradient(circle, rgba(42, 90, 104, 0.14), transparent 66%) !important;
}
/* Brand gold is a brand, not a surface: the disc and the button keep their
   ink in both schemes. */
html[data-dracula-scheme="dark"] .dd-lrnh-step,
html[data-dracula-scheme="dark"] .dd-lrnh-go {
	color: #241a06 !important;
	--dracula-text-241a06: #241a06 !important;
}