/* Hallmark · macrostructure: hub + shelves (handoff "Animworks Homepage.dc.html", built to the drawing) · theme: brand-locked (DESIGN.md) · anchor hue: gold 88
 * pre-emit critique: P4 H3 E4 S5 R3 V3 · the handoff's R2 (repetition) is a design-level call left to Harvey
 * Values are the handoff's own. Overrides: LEMON MILK + LM Pro (brand), 1520px theme rail (standing rule),
 * minmax(min(),1fr) tracks, focus rings, 11px text floor, reduced motion.
 */
.aw-home-v2 {
	--awh-page: #111111;
	--awh-gold: #E4AC01;
	--awh-gold-hi: #F2C94C;
	--awh-on-gold: #141414;
	--awh-ink: #F2F0EA;
	--awh-ink-2: #C9C7C1;
	--awh-ink-3: #9A9893;
	--awh-ink-4: #8A8880;
	--awh-card: #1C1C1C;
	--awh-card-hi: #222222;
	--awh-panel: #141414;
	--awh-deep: #0B0B0B;
	--awh-band: #161616;
	--awh-field: #111111;
	--awh-rule: #2A2A2A;
	--awh-line: #3A3A3A;
	--awh-ghost: #4A4A4A;
	--awh-idle: #6A6A6A;
	--awh-teal: #167A7A;   /* the tweak's #1B8A8A sits at 4.2:1 under white 13px text; this is 5:1 */
	--awh-teal-hi: #1B8A8A;
	--awh-door-learn: #5C2A22;
	--awh-door-tools: #4A3A18;
	--awh-door-mentor: #234A3C;
	--awh-discord: #5865F2;
	--awh-discord-hi: #6B76F5;
	--awh-display: 'LEMON MILK', 'LM Pro', sans-serif;
	--awh-body: 'LM Pro', sans-serif;
	--awh-shadow: 0 12px 32px rgba(0, 0, 0, .55);
	--awh-shadow-soft: 0 12px 32px rgba(0, 0, 0, .45);
	--awh-ease: cubic-bezier(.22, 1, .36, 1);
	--awh-ease-slide: cubic-bezier(.65, 0, .35, 1);
	overflow-x: clip;
}
html:has(body.aw-home-v2) { overflow-x: clip; }

/* WoodMart wraps page content in its own container and padding.
 * ⚠️ Its page ground is #1A1A1A, the same as the hero card and a shade off the #1C1C1C cards and
 * icon discs, which then vanish. The handoff's ground is #111111, so this page sets it. */
.aw-home-v2 .main-page-wrapper { padding-top: 0; background-color: var(--awh-page); }
.aw-home-v2 .wd-content-layout { padding-block: 0; }

.awh { color: var(--awh-ink-2); font-family: var(--awh-body); -webkit-font-smoothing: antialiased; }
.awh *, .awh *::before, .awh *::after { box-sizing: border-box; }
.awh a { color: inherit; text-decoration: none; }
.awh img { display: block; max-width: 100%; }
.awh h1, .awh h2, .awh h3 { margin: 0; font-style: normal; overflow-wrap: break-word; min-width: 0; }
.awh p { margin: 0; }
.awh ul, .awh ol { list-style: none; margin: 0; padding: 0; }
/* ⚠️ WoodMart prints `.wd-content-layout p, .wd-content-layout li { font-size:16.5px }` inline and
 * `:is(ul,ol) li { margin-bottom }`: both outrank a single class, so every p and li below is
 * written as `.awh .awh-x` to win on specificity, not with !important. */
.awh li { margin-bottom: 0; }
.awh :focus-visible { outline: 2px solid var(--awh-gold-hi); outline-offset: 2px; }
.awh-ico { flex: none; display: block; }
.awh-nowrap { white-space: nowrap; }

/* ---------- shared ---------- */
.awh-section { padding-top: 64px; }
.awh-section--doors { padding-top: 56px; }
.awh-section--last { padding-bottom: 72px; }

.awh-kicker {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--awh-gold);
}
.awh-kicker img { width: 22px; height: 22px; }

.awh-h2 {
	font-family: var(--awh-display); font-weight: 700; font-size: 22px; line-height: 1.2;
	letter-spacing: .03em; text-transform: uppercase; color: var(--awh-ink);
}
.awh .awh-sub a { color: var(--awh-ink); text-decoration: underline; text-underline-offset: 3px; }
.awh .awh-sub a:hover { color: var(--awh-gold); }
.awh .awh-sub { font-size: 14px; line-height: 1.6; color: var(--awh-ink-3); margin-top: 4px; text-wrap: pretty; }
.awh-head {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
	flex-wrap: wrap; margin-bottom: 24px;
}
.awh-head__lead { display: flex; align-items: center; gap: 14px; }
.awh-head__lead--top { align-items: flex-start; }
.awh-head__lead--top .awh-head__icon { margin-top: 2px; }
.awh-head__icon { width: 40px; height: 40px; object-fit: contain; flex: none; }
.awh-head__disc {
	width: 40px; height: 40px; border-radius: 999px; background: var(--awh-card);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.awh-head__disc img { width: 22px; height: 22px; object-fit: contain; }
.awh-more {
	font-size: 12px; font-weight: 600; color: var(--awh-ink); display: inline-flex; align-items: center;
	gap: 4px; white-space: nowrap; min-height: 24px; transition: color 120ms;
}
.awh-more:hover { color: var(--awh-gold); }

.awh-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.awh-actions--centre { justify-content: center; margin-top: 8px; }

.awh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 999px; font-family: var(--awh-body); font-weight: 600; white-space: nowrap;
	text-transform: none; letter-spacing: 0; line-height: 1; cursor: pointer;
	transition: background-color 120ms var(--awh-ease), color 120ms, border-color 120ms;
}
/* ⚠️ A <button> picks up WoodMart's global button styles (square corners, Capitalised Words, its own
   padding and min-height), which an <a> never did. Pinned for the trailer button. */
.awh button.awh-btn--lg { font-size: 14px; }
.awh button.awh-btn { border-radius: 999px; text-transform: none; letter-spacing: 0; min-height: 0; line-height: 1; box-shadow: none; font-family: var(--awh-body); font-weight: 600; }
.awh-btn--lg { height: 46px; padding: 0 24px; font-size: 14px; }
.awh-btn--md { height: 40px; padding: 0 20px; font-size: 13px; }
.awh-btn--sm { height: 30px; padding: 0 12px; font-size: 11px; font-weight: 700; gap: 6px; }
.awh-btn--band { height: 44px; padding: 0 22px; font-size: 13px; }
.awh .awh-btn--gold { background: var(--awh-gold); color: var(--awh-on-gold); }
.awh .awh-btn--gold:hover { background: var(--awh-gold-hi); color: var(--awh-on-gold); }
.awh .awh-btn--ghost { background: transparent; color: var(--awh-ink); border: 1.5px solid var(--awh-ghost); }
.awh .awh-btn--ghost:hover { color: var(--awh-gold); border-color: var(--awh-gold); }
.awh-btn--lg.awh-btn--ghost { padding: 0 22px; }
.awh-btn--md.awh-btn--ghost { padding: 0 18px; }
.awh .awh-btn--teal { background: var(--awh-teal); color: #FFFFFF; }
.awh .awh-btn--teal:hover { background: var(--awh-teal-hi); color: #FFFFFF; }
.awh .awh-btn--discord { background: var(--awh-discord); color: #FFFFFF; }
.awh .awh-btn--discord:hover { background: var(--awh-discord-hi); color: #FFFFFF; }

/* A whole card clickable from its title link, so real buttons can sit inside it. */
.awh-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- header tab + FrameSide rail (Further Tweaks 2, 14 Sep) ---------- */
/* "Browse categories" becomes a folder tab that runs straight into the hero card: 42px, top corners
 * only, over the row's hairline, with the card flush beneath it and a 6px gold top edge. WoodMart's
 * bottom row only exists on desktop and only in the non-sticky header, so this is scoped to both. */
@media (min-width: 1025px) {
	.aw-home-v2 .whb-header-bottom.whb-not-sticky-row { border-bottom-color: transparent; }
	.aw-home-v2 .whb-header-bottom.whb-not-sticky-row .wd-header-cats { align-self: flex-end; margin-top: auto; }
	.aw-home-v2 .whb-header-bottom.whb-not-sticky-row .wd-header-cats > .menu-opener {
		height: 42px; border-radius: 10px 10px 0 0; margin-top: 10px; margin-bottom: -1px; position: relative; z-index: 2;
	}
	/* `.awh .` : the base hero rules come later in this file and would win on order. */
	.awh .awh-hero { padding-top: 0; }
	.awh .awh-hero__card { border-top-left-radius: 0; border-top-width: 6px; }
}
.awh-hero__row { display: flex; align-items: stretch; gap: 14px; }
/* ⚠️ The card must be told to fill the row. As a default flex item it took its content's width, which grows as the
   pictures load: it painted 598px wide (each slide one column, 1043px tall), then 864, then 1293 (measured 15 Sep). */
.awh-hero__card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* If the rail beside it is ever the taller of the two, the slides still fill the card: no dark strip under the picture. */
.awh-hero__track { flex: 1 1 auto; }
.awh .awh-rail {
	flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	gap: 14px; padding: 16px 0; border-radius: 12px; background: var(--awh-gold); border: 1.5px solid var(--awh-gold);
	color: var(--awh-on-gold); text-decoration: none; transition: background-color 120ms;
}
/* Harvey, 14 Sep: hover no longer goes a brighter yellow (the text washed out). It turns dark grey, the notches
 * go white, the logo shows its own light-and-gold art, and the features give way to "Try it now for free". */
.awh .awh-rail:hover, .awh .awh-rail:focus-visible {
	background: #222222; border-color: var(--awh-gold); color: var(--awh-ink);
	/* Off-white, the brand ink, not pure white (Harvey). */
	--awh-tick: var(--awh-ink); --awh-tick-minor: rgba(242, 240, 234, .5);
}
/* Ruler notches down both long edges (Harvey, 14 Sep; adapted from 21st.dev's ruler-carousel, whose RulerLines put
 * 2px ticks above and below the text: short, every fifth longer, the centre longest). Here the rail is vertical, so
 * the rulers run down its sides and the ticks point in. Plain CSS, no React or Tailwind: a minor layer every 8px, a
 * fifth layer every 40px on the same grid, and one centre tick. Kept short enough never to touch the logo. */
.awh .awh-rail { position: relative; isolation: isolate; --awh-tick: #141414; --awh-tick-minor: rgba(20, 20, 20, .45); transition: background-color 280ms ease, border-color 280ms ease; }
.awh .awh-rail > * { position: relative; z-index: 1; }
.awh .awh-rail::before, .awh .awh-rail::after {
	content: ""; position: absolute; top: 14px; bottom: 14px; width: 22px; pointer-events: none; z-index: 0;
	background:
		linear-gradient(to right, var(--awh-tick), var(--awh-tick)) no-repeat,
		repeating-linear-gradient(to bottom, var(--awh-tick) 0 2px, transparent 2px 40px),
		repeating-linear-gradient(to bottom, var(--awh-tick-minor) 0 2px, transparent 2px 8px);
	background-size: 0 0, 13px 100%, 8px 100%; /* the centre tick lives on the feature window instead */
	background-position: 0 50%, 0 0, 0 0;
}
.awh .awh-rail::before { left: 0; }
.awh .awh-rail::after { right: 0; transform: scaleX(-1); }
.awh-rail__icon {
	width: 36px; height: 36px; border-radius: 999px; background: var(--awh-panel); color: var(--awh-gold);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.awh-rail__note { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-transform: uppercase; }
/* Harvey: the FrameSide logo, not typed text, and bigger than the 17px label it replaces. */
.awh-rail__marks { display: grid; flex: 0 1 auto; min-height: 0; justify-items: center; }
.awh-rail__marks > img { grid-area: 1 / 1; transition: opacity 280ms ease; }
.awh .awh-rail__marks--up > img { width: 34px; height: auto; max-height: 230px; object-fit: contain; }
.awh-rail__marks--flat { display: none; }
.awh-rail__marks > .is-light { opacity: 0; }
.awh-rail:hover .awh-rail__marks > .is-dark, .awh-rail:focus-visible .awh-rail__marks > .is-dark { opacity: 0; }
.awh-rail:hover .awh-rail__marks > .is-light, .awh-rail:focus-visible .awh-rail__marks > .is-light { opacity: 1; }
.awh-rail:hover .awh-rail__note, .awh-rail:focus-visible .awh-rail__note { color: rgba(242, 240, 234, .72); }
.awh-rail:hover .awh-rail__icon, .awh-rail:focus-visible .awh-rail__icon { background: var(--awh-gold); color: var(--awh-on-gold); }
.awh-rail__icon { transition: background-color 280ms ease, color 280ms ease; }
.awh-rail__note { transition: color 280ms ease; }
/* ---- The feature carousel on the rail ---- */
/* min-height 150 -> 116 (15 Sep): the rail's own minimum was holding the banner at 642px when the slides need ~600. */
.awh-rail__win { position: relative; align-self: stretch; flex: 1 1 190px; min-height: 116px; max-height: 230px; }
/* The long centre notch marks the feature in focus, as the component's centre line does. */
.awh-rail__win::before, .awh-rail__win::after {
	content: ""; position: absolute; top: 50%; width: 24px; height: 2px; margin-top: -1px; background: var(--awh-tick);
}
.awh-rail__win::before { left: -1.5px; }
.awh-rail__win::after { right: -1.5px; }
.awh-rail__feats {
	position: absolute; inset: 0 26px; overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.awh-rail__track { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition: transform 700ms cubic-bezier(.34, 1.2, .5, 1); will-change: transform; }
.awh-rail__feat {
	flex: none; height: 150px; display: flex; align-items: center; justify-content: center;
	writing-mode: vertical-rl; transform: rotate(180deg) scale(.82); opacity: .32;
	font-family: var(--awh-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	white-space: nowrap; color: #141414; transition: opacity 500ms ease, transform 600ms cubic-bezier(.34, 1.2, .5, 1);
}
.awh-rail__feat.is-on { opacity: 1; transform: rotate(180deg) scale(1); }
.awh-rail__feats { transition: opacity 260ms ease; }
.awh-rail__cta {
	position: absolute; inset: 0 26px; display: flex; align-items: center; justify-content: center; opacity: 0;
	writing-mode: vertical-rl; transform: rotate(180deg) translateX(-6px); white-space: nowrap;
	font-family: var(--awh-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--awh-gold); transition: opacity 280ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.awh-rail:hover .awh-rail__feats, .awh-rail:focus-visible .awh-rail__feats { opacity: 0; }
.awh-rail:hover .awh-rail__cta, .awh-rail:focus-visible .awh-rail__cta { opacity: 1; transform: rotate(180deg); }

.awh-rail__note { font-family: var(--awh-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #3D2E00; }
/* A vertical rail would squeeze the card on a narrow screen: under the hero, as a strip. */
@media (max-width: 900px) {
	.awh-hero__row { flex-direction: column; gap: 10px; }
	/* ⚠️ Stacked, "flex: 1 1 0" is a zero HEIGHT basis: the card collapsed to its border on phones (15 Sep). */
	.awh-hero__card { flex: none; }
	.awh .awh-rail { width: auto; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 16px; }
	.awh-rail__note { writing-mode: horizontal-tb; transform: none; }
	.awh-rail__marks--up { display: none; }
	.awh .awh-rail__marks--flat { display: grid; }
	.awh .awh-rail__marks--flat > img { height: 22px; width: auto; }
	.awh-rail__cta { inset: 0; writing-mode: horizontal-tb; transform: none; justify-content: flex-start; }
	.awh-rail:hover .awh-rail__cta, .awh-rail:focus-visible .awh-rail__cta { transform: none; }
	/* Flat strip: the rulers go back to the component's own orientation, above and below. */
	.awh .awh-rail { padding: 16px 16px; }
	.awh .awh-rail::before, .awh .awh-rail::after {
		top: auto; bottom: auto; left: 14px; right: 14px; width: auto; height: 12px;
		background:
			linear-gradient(to bottom, var(--awh-tick), var(--awh-tick)) no-repeat,
			repeating-linear-gradient(to right, var(--awh-tick) 0 2px, transparent 2px 40px),
			repeating-linear-gradient(to right, var(--awh-tick-minor) 0 2px, transparent 2px 8px);
		background-size: 2px 12px, 100% 8px, 100% 5px;
		background-position: 50% 0, 0 0, 0 0;
	}
	.awh .awh-rail::before { top: 0; }
	.awh .awh-rail::after { bottom: 0; transform: scaleY(-1); }
	/* flex-basis 0 + a min-width: with an absolutely positioned inside it has no width of its own and collapsed to 0. */
	.awh-rail__win { order: 2; align-self: center; flex: 1 1 0; min-width: 96px; min-height: 0; max-height: none; height: 30px; }
	.awh-rail__win::before, .awh-rail__win::after { display: none; }
	.awh-rail__feats { inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
	.awh-rail__feat { height: 30px; writing-mode: horizontal-tb; transform: scale(.9); justify-content: flex-start; }
	.awh-rail__feat.is-on { transform: none; }
	.awh-rail__marks--flat { order: 1; }
	.awh-rail__icon { order: 0; }
	.awh-rail__note { order: 3; margin-left: 0; }
}
@media (max-width: 480px) {
	/* A phone cannot fit the mark, the features AND the note: the note goes (the slide itself says free in beta). */
	.awh-rail__note { display: none; }
	.awh .awh-rail__marks--flat > img { height: 18px; }
	.awh-rail__feat { font-size: 11px; letter-spacing: .1em; }
	.awh-rail__note { margin-left: auto; }
}

/* ---------- studios band (tweaks, 14 Sep) ---------- */
.awh-studios { padding-top: 24px; }
/* The tweak draws a 3px teal left stripe: a side-stripe accent is an Impeccable absolute ban, so the
 * band takes the same full hairline as the FrameSide banner. */
.awh-studios__in {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: 12px;
	background: var(--awh-card); border: 1px solid var(--awh-rule);
}
.awh .awh-studios__text { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.5; color: var(--awh-ink-2); text-wrap: pretty; }
.awh-studios__text strong { color: var(--awh-ink); font-weight: 700; }
.awh .awh-studios__cta { flex: none; height: 38px; padding: 0 18px; font-size: 13px; }

/* ---------- hero ---------- */
.awh-hero { padding-top: 24px; }
.awh-hero__card {
	position: relative; border-radius: 16px; overflow: hidden; background: #1A1A1A;
	border: 1.5px solid var(--awh-gold); /* Further Tweaks */
	box-shadow: var(--awh-shadow);
}
/* Harvey, 15 Sep (the 21st.dev Elegant Carousel): slides no longer slide as one strip. They sit stacked in one
 * grid cell, so the card is always as tall as the tallest slide and never jumps, and a change is choreographed:
 * the old copy leaves against the direction of travel, the new picture wipes in across the old one, and the new
 * copy follows it in. */
.awh-hero__track { display: grid; grid-template-columns: minmax(0, 1fr); } /* an auto column grew past the card on phones (picture 427px wide in a 360px card) */
.awh-slide {
	grid-area: 1 / 1; visibility: hidden; pointer-events: none;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.awh-slide.is-active { visibility: visible; pointer-events: auto; z-index: 2; }
.awh-slide.is-leaving { visibility: visible; z-index: 1; }
.awh-slide__copy {
	/* Harvey, 15 Sep: "reduce the size". The three-line Indarung Erlich title sets every slide's height (slides share
	   one box), so the column's own air came down instead of the titles: 56px -> 40px top and bottom, 16px -> 13px between. */
	padding: 40px 40px 40px 76px; display: flex; flex-direction: column; justify-content: center;
	gap: 13px; min-width: 0;
}
/* ---- Further Tweaks: brand row, Indarung wordmark title, tagline, badge block ---- */
.awh-slide__brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.awh .awh-slide__aw { height: 14px; width: auto; opacity: .9; }
.awh-slide__rule { width: 1px; height: 13px; background: var(--awh-line); flex: none; }
.awh-slide__kicker {
	font-family: var(--awh-display); font-weight: 700; font-size: 10px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--awh-gold);
}
.awh-slide__title { margin: 0; line-height: 0; }
/* Wordmark images: the width is set per slide in the editor (--awh-tw), never wider than the column. */
.awh .awh-slide__title img { display: block; width: min(var(--awh-tw, 420px), 100%); height: auto; margin: 0; }
/* No wordmark yet (a new slide): the name in LEMON MILK until an image is dropped or made. */
.awh .awh-slide__title-text {
	display: block; font-family: var(--awh-display); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; color: var(--awh-ink); max-width: var(--awh-tw, 420px);
}
.awh-slide__draft {
	align-self: flex-start; font-family: var(--awh-display); font-weight: 700; font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--awh-gold); border: 1px dashed var(--awh-gold); border-radius: 6px; padding: 5px 9px;
}
.awh .awh-slide__tagline { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--awh-ink); max-width: 460px; text-wrap: pretty; }
/* Two across, like the banner kit's 2x2: on the 1520px rail the handoff's auto-fit gave 3 + 1. */
.awh .awh-badges { display: grid; grid-template-columns: repeat(2, minmax(150px, max-content)); gap: 8px; margin-top: 2px; }
.awh .awh-badge {
	display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 8px;
	background: rgba(12, 12, 12, .82); min-width: 0;
}
.awh .awh-badge__logo { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; flex: none; }
.awh-badge__tile {
	width: 26px; height: 26px; border-radius: 6px; background: var(--awh-gold); color: var(--awh-on-gold);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.awh-badge__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* 10px, not the handoff's 9: the page's small-text floor. */
.awh-badge__top, .awh-badge__sub {
	font-family: var(--awh-display); font-weight: 700; font-size: 10px; letter-spacing: .1em;
	text-transform: uppercase; white-space: nowrap; color: var(--awh-ink);
}
.awh-badge__sub { color: var(--awh-ink-3); }
.awh .awh-slide__body { font-size: 15px; line-height: 1.65; color: var(--awh-ink-2); max-width: 480px; text-wrap: pretty; }
.awh-on { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--awh-ink-3); }
.awh-on__sq { width: 22px; height: 22px; border-radius: 4px; }
.awh-on__wide { height: 18px; width: auto; }
.awh-on__meta { color: var(--awh-ink-4); }
.awh-slide .awh-actions { margin-top: 6px; }
.awh-slide__media { position: relative; min-height: 340px; }
.awh-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awh-slide__media { overflow: hidden; }
.awh-slide__media.is-empty { background: var(--awh-deep); } /* a draft with no picture yet: admins only */
/* The picture's own muted loop (the Erlich slide): fades in over the poster once it is actually playing. */
.awh-slide__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.awh-slide__loop.is-on { opacity: 1; }
.awh .awh-play {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%;
	width: 68px; height: 68px; border-radius: 999px; background: var(--awh-gold); color: var(--awh-on-gold);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--awh-shadow);
	transition: background-color 120ms;
}
.awh .awh-play:hover { background: var(--awh-gold-hi); color: var(--awh-on-gold); }
.awh .awh-play { border: 0; padding: 0; cursor: pointer; z-index: 2; }
.awh-play .awh-ico { margin-left: 3px; }
/* The inline trailer player: fills the slide's picture area, letterboxed on black. */
.awh-player { position: absolute; inset: 0; z-index: 3; background: #000; }
.awh-player iframe, .awh-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.awh .awh-player__x {
	position: absolute; top: 12px; right: 12px; z-index: 4; width: 36px; height: 36px; border-radius: 999px; padding: 0;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	background: rgba(20, 20, 20, .85); color: var(--awh-ink); border: 1px solid var(--awh-line);
}
.awh .awh-player__x:hover { color: var(--awh-gold); border-color: var(--awh-gold); background: rgba(20, 20, 20, .85); }
.is-playing > .awh-play { display: none; }
.awh .awh-arrow {
	/* 5: above a playing trailer (the player is 3), or you could not leave a slide with its video running. */
	position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
	width: 40px; height: 40px; border-radius: 999px; background: var(--awh-panel);
	border: 1px solid var(--awh-line); color: var(--awh-ink); padding: 0;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: color 120ms, border-color 120ms;
}
.awh .awh-arrow:hover { color: var(--awh-gold); border-color: var(--awh-gold); background: var(--awh-panel); }
.awh-arrow--prev { left: 16px; }
.awh-arrow--next { right: 16px; }
/* The change of slide. Only on a change, never on page load (standing rule: the first slide has no entrance).
 * --awh-dir is 1 going forward, -1 going back. Forward, the new picture is uncovered from left to right. */
@keyframes awhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes awhCopyOut { to { opacity: 0; transform: translateX(calc(var(--awh-dir, 1) * -28px)); } }
@keyframes awhCopyIn { from { opacity: 0; transform: translateX(calc(var(--awh-dir, 1) * 40px)); } to { opacity: 1; transform: none; } }
@keyframes awhWipeFwd { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes awhWipeBack { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes awhSettle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes awhEdgeFwd { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes awhEdgeBack { 0% { left: 100%; opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.awh-slide.is-leaving .awh-slide__copy > * { animation: awhCopyOut 340ms cubic-bezier(.4, 0, 1, 1) both; }
.awh-slide.is-entering .awh-slide__copy > * { animation: awhCopyIn 720ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: 240ms; }
.awh-slide.is-entering .awh-slide__copy > :nth-child(2) { animation-delay: 290ms; }
.awh-slide.is-entering .awh-slide__copy > :nth-child(3) { animation-delay: 335ms; }
.awh-slide.is-entering .awh-slide__copy > :nth-child(4) { animation-delay: 375ms; }
.awh-slide.is-entering .awh-slide__copy > :nth-child(5) { animation-delay: 410ms; }
.awh-slide.is-entering .awh-slide__copy > :nth-child(n+6) { animation-delay: 440ms; }
.awh-slide.is-entering .awh-slide__media { animation: awhWipeFwd 900ms cubic-bezier(.77, 0, .18, 1) both; }
.awh-slide.is-entering.is-back .awh-slide__media { animation-name: awhWipeBack; }
.awh-slide.is-entering .awh-slide__media > img { animation: awhSettle 1400ms cubic-bezier(.16, 1, .3, 1) both; }
/* A gold hairline rides the wiping edge: the brand's one flourish, gone as the picture lands. */
.awh-slide.is-entering .awh-slide__media::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; z-index: 4;
	background: var(--awh-gold); animation: awhEdgeFwd 900ms cubic-bezier(.77, 0, .18, 1) both; pointer-events: none;
}
.awh-slide.is-entering.is-back .awh-slide__media::after { animation-name: awhEdgeBack; }
.awh-hero__foot {
	display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
	padding: 20px 4px 0;
}
/* Harvey, 14 Sep: longer line, since the rail has the room (was the handoff's 720px). */
.awh .awh-hero__line { font-size: 14px; line-height: 1.6; color: var(--awh-ink-3); flex: 1 1 520px; min-width: 0; text-wrap: pretty; }
.awh-hero__nav { display: flex; align-items: center; gap: 14px; flex: none; }
.awh-prog { display: flex; align-items: flex-start; gap: 18px; }
.awh button.awh-prog__item {
	position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 76px; min-height: 0; height: auto;
	padding: 8px 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
	font-family: var(--awh-body); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; text-transform: none;
	color: var(--awh-ink-3); transition: color 160ms;
}
.awh button.awh-prog__item:hover, .awh button.awh-prog__item[aria-current="true"] { color: var(--awh-ink); background: transparent; }
/* Harvey, 14 Sep: bold pills. Kept bold: 6px tall, gold filling left to right while the slide is on. */
.awh-prog__track { display: block; height: 6px; border-radius: 999px; background: var(--awh-idle); overflow: hidden; }
.awh-prog__fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--awh-gold); transform: scaleX(var(--awh-p, 0)); transform-origin: left center; }
.awh-prog__item.is-past .awh-prog__fill { --awh-p: 1; opacity: .45; }
.awh-prog__label { display: block; text-align: left; white-space: nowrap; }
.awh button.awh-prog__pause {
	width: 34px; height: 34px; min-height: 0; padding: 0; margin: 0; border-radius: 999px; border: 1px solid var(--awh-line);
	background: transparent; box-shadow: none; color: var(--awh-ink); display: grid; place-items: center; cursor: pointer; flex: none;
}
.awh button.awh-prog__pause:hover { border-color: var(--awh-gold); color: var(--awh-gold); background: transparent; }
.awh-prog__pause .is-play, .awh-prog__pause[aria-pressed="true"] .is-pause { display: none; }
.awh-prog__pause[aria-pressed="true"] .is-play { display: block; }

/* ---------- proof strip ---------- */
.awh-proof { padding-top: 28px; }
/* `.awh .` because `.awh ul { padding: 0 }` outranks a single class and flattened this strip. */
.awh .awh-proof__list {
	border-top: 1px solid var(--awh-rule); border-bottom: 1px solid var(--awh-rule); padding: 18px 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 16px 24px;
}
.awh .awh-proof__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.awh-proof__icon {
	width: 40px; height: 40px; border-radius: 999px; background: var(--awh-card); color: var(--awh-gold);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.awh-proof__icon .awh-ico { stroke-width: 2; }
.awh-proof__text { display: block; min-width: 0; }
.awh-proof__num {
	display: block; font-family: var(--awh-display); font-weight: 700; font-size: 18px; line-height: 1;
	color: var(--awh-ink); font-variant-numeric: tabular-nums;
}
.awh-proof__label {
	display: block; font-size: 12px; line-height: 1.3; color: var(--awh-ink-3); margin-top: 5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- start here ---------- */
.awh-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.awh .awh-door {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px;
	border-radius: 16px; overflow: hidden; color: var(--awh-ink);
	transition: transform 180ms var(--awh-ease), box-shadow 180ms;
}
.awh .awh-door:hover { transform: translateY(-2px); box-shadow: var(--awh-shadow); color: var(--awh-ink); }
.awh-door--learn { background: var(--awh-door-learn); }
.awh-door--tools { background: var(--awh-door-tools); }
.awh-door--mentor { background: var(--awh-door-mentor); }
/* The tweak's big faint icon, tucked off the top-right corner. */
.awh-door__mark { position: absolute; right: -40px; top: -30px; width: 300px; height: 300px; color: var(--awh-ink); opacity: .07; pointer-events: none; }
.awh-door__panel {
	position: relative; margin: 14px; padding: 20px 20px 18px; background: var(--awh-panel); border-radius: 12px;
	display: flex; flex-direction: column; gap: 8px; box-shadow: var(--awh-shadow-soft);
}
.awh-door__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: .02em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: balance;
}
.awh-door__body { font-size: 13px; line-height: 1.6; color: var(--awh-ink-2); text-wrap: pretty; }
.awh-door__cta { margin-top: 6px; width: 100%; }

/* ---------- courses ---------- */
.awh-courses { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.awh-feature {
	flex: 1 1 min(560px, 100%); min-width: 0; display: grid;
	/* ⚠️ 260px let the card split in two as soon as it had ~540px, which on a 600px screen gave a 285px text
	   column (a five line title) and 494px of empty space under the cover. A column of this card needs about
	   360px to read, so two of them need ~720px; under that it stays one column. Measured 23 Sep 2026. */
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	background: var(--awh-card); border-radius: 16px; overflow: hidden; box-shadow: var(--awh-shadow-soft);
}
/* The whole course cover, never cropped (Harvey, 15 Sep): a 480px column at the cover's own shape, so its height
   matches the card and nothing is cut or stretched. */
/* ⚠️ The hidden attribute is only display:none from the browser's own stylesheet, so ANY class that sets
   display beats it. .awh-feature is display:grid, so every featured card stayed on the page at once and
   the rotation showed all five stacked. State must be switched where the display is set. */
.awh-feature[hidden], .awh .awh-list__row[hidden] { display: none; }
.awh-feature__media { position: relative; background: var(--awh-deep); display: flex; align-items: center; }
.awh-feature__media img { display: block; width: 100%; height: auto; }
@media (min-width: 1000px) {
	/* ⚠️ A FIXED 500px cover column is set from the VIEWPORT, but this card shares its row with the
	   "More courses" panel, so at 1280px the card is only 735px wide and 500px of it went to the cover,
	   leaving a 235px text column and 352px of empty space. Proportional, capped at the original 500px
	   so wide screens are unchanged. Measured 23 Sep 2026. */
	/* The cover fills its whole side (Harvey, 23 Sep). Two things were stopping it:
	   1. the card was stretched to the height of the "More courses" panel beside it, so the cover sat in a
	      band of empty space. align-self:start lets the card be its own height.
	   2. the column was too narrow for the cover to ever be that tall. At 7:10, the cover needs a column of
	      about 0.7 x the card height, so the share is raised and still capped at the original 500px. */
	/* The cover fills its whole side AND the two modules stay level (Harvey, 23 Sep).
	   The card stretches to the "More courses" panel beside it, so their bottoms line up. For the cover to
	   reach both edges of that shared height it needs a column of about 0.7 x the height (the covers are all
	   7:10), which is ~490px at the height six list rows produce. Capped at the original 500px. */
	.awh-feature { grid-template-columns: minmax(0, clamp(340px, 58%, 500px)) minmax(0, 1fr); }
	.awh-feature__media { align-self: stretch; display: flex; align-items: center; }
}
.awh-tag {
	position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 6px;
	background: var(--awh-gold); color: var(--awh-on-gold);
	font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.awh-feature__body { padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.awh-feature__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: .02em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: balance;
}
.awh .awh-feature__title a:hover { color: var(--awh-gold); }
.awh-byline { display: flex; align-items: center; gap: 12px; }
.awh-byline__img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; }
.awh-byline__name { font-weight: 700; font-size: 13px; color: var(--awh-ink); }
.awh-byline__role { font-size: 12px; color: var(--awh-ink-3); }
.awh-ticks { display: grid; gap: 8px; }
.awh .awh-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--awh-ink-2); }
.awh-ticks .awh-ico { color: var(--awh-gold); stroke-width: 2.5; margin-top: 2px; }
.awh-feature__foot {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	border-top: 1px solid var(--awh-rule); padding-top: 18px; margin-top: auto;
}
.awh-price { display: flex; align-items: baseline; gap: 8px; }
.awh-price__num { font-family: var(--awh-display); font-weight: 700; font-size: 24px; color: var(--awh-gold); }
.awh-price__note { font-size: 12px; color: var(--awh-ink-3); }
.awh-feature__meta { font-size: 12px; color: var(--awh-ink-4); margin-top: 2px; }
.awh-feature .awh-actions { gap: 10px; }

.awh-list {
	flex: 1 1 min(320px, 100%); min-width: 0; background: var(--awh-card); border-radius: 16px;
	padding: 22px 22px 12px; display: flex; flex-direction: column;
}
.awh-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.awh-list__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 14px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--awh-ink);
}
.awh-list__count { font-size: 12px; color: var(--awh-ink-4); }
.awh .awh-list__row {
	display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--awh-rule);
	color: var(--awh-ink-2); transition: color 120ms;
}
.awh .awh-list__row:hover { color: var(--awh-ink); }
/* The whole course card, never cropped: fixed width, height from the picture (Harvey, 15 Sep). */
.awh-list__img { width: 56px; height: auto; max-height: 96px; border-radius: 6px; object-fit: contain; flex: none; align-self: flex-start; }
.awh-list__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.awh-list__name {
	font-family: var(--awh-display); font-weight: 700; font-size: 11px; line-height: 1.4; letter-spacing: .03em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: pretty;
}
.awh-list__by { font-size: 11px; color: var(--awh-ink-3); }
.awh-list__price { display: inline-flex; align-items: baseline; gap: 6px; }
.awh-list__price s { font-size: 11px; color: var(--awh-ink-4); }
.awh-list__price b { font-weight: 700; font-size: 14px; color: var(--awh-gold); }
.awh-list__chev { color: var(--awh-ink-4); }

/* A row with a link stretched over it (the Trailer button needs to be a sibling, not inside a link). */
.awh .awh-list__row { position: relative; }
.awh .awh-list__row .awh-list__name { color: var(--awh-ink); text-decoration: none; }
.awh .awh-list__row:hover .awh-list__name { color: var(--awh-gold); }
.awh .awh-list__row .awh-trailer-btn { position: relative; z-index: 2; flex: none; }

/* ---------- course trailer pop-up (Harvey, 15 Sep) ----------
 * The login pop-up's look (aw-signup-flow.php): the page dims and blurs 7px behind a frosted glass panel that eases in
 * from 90%. A native <dialog>, so ::backdrop is the blurred page. */
.awh-tr {
	width: min(920px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto;
	border: 0; background: transparent; color: var(--awh-ink); overflow: visible;
}
.awh-tr::backdrop { background: rgba(6, 6, 8, .55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.awh-tr[open] .awh-tr__panel { animation: awhTrIn 320ms cubic-bezier(.2, 1, .3, 1) both; }
.awh-tr[open]::backdrop { animation: awhFade 250ms ease both; }
@keyframes awhTrIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.awh-tr__panel {
	position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px;
	background: rgba(14, 14, 16, .72); -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1);
	border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); font-family: var(--awh-body);
}
.awh-tr__media { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 18px 18px 0 0; overflow: hidden; }
.awh-tr__media iframe, .awh-tr__media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.awh button.awh-tr__x, .awh-tr .awh-tr__x {
	position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0;
	display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(12, 12, 12, .72); color: var(--awh-ink); box-shadow: none; cursor: pointer;
}
.awh-tr .awh-tr__x:hover { border-color: var(--awh-gold); color: var(--awh-gold); background: rgba(12, 12, 12, .9); }
.awh-tr__body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; padding: 24px 28px 26px; }
.awh-tr__info { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.awh .awh-tr__title {
	margin: 0; font-family: var(--awh-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: .02em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: balance;
}
.awh .awh-tr__facts { margin: 0; font-size: 13px; color: var(--awh-ink-3); }
.awh .awh-tr__summary { margin: 0; font-size: 14px; line-height: 1.6; color: var(--awh-ink-2); max-width: 560px; text-wrap: pretty; }
.awh-tr__buy { flex: 0 1 auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.awh-tr__was { font-size: 14px; color: var(--awh-ink-4); margin-right: 8px; }
html:has(.awh-tr[open]) { overflow: hidden; }
@media (max-width: 600px) {
	.awh-tr__body { padding: 18px 18px 20px; }
	.awh .awh-tr__title { font-size: 18px; }
	.awh-tr__buy, .awh-tr__buy .awh-actions { width: 100%; }
	.awh-tr__buy .awh-btn { flex: 1 1 auto; }
	/* Rows: the Trailer button sits under the price instead of squeezing the name. */
	.awh .awh-list__row { flex-wrap: wrap; row-gap: 10px; }
	.awh .awh-list__row .awh-list__text { flex: 1 1 calc(100% - 70px); } /* full width, so the button wraps under it */
	.awh .awh-list__row .awh-trailer-btn { margin-left: 70px; }
	.awh .awh-list__row .awh-list__chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.awh-tr[open] .awh-tr__panel, .awh-tr[open]::backdrop { animation: none; }
}

/* ---------- free rigs ---------- */
.awh-rigs[data-awh-cycle] .awh-rig { transition: opacity .32s ease; }
.awh-rigs[data-awh-rotate] .awh-rig[hidden] { display: none !important; } /* the card's own display rule beats the hidden attribute otherwise */
.awh-rigs.is-fading .awh-rig { opacity: 0; }
.awh-rigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 20px; }
.awh-rig {
	position: relative; display: flex; flex-direction: column; background: var(--awh-card); border-radius: 12px;
	overflow: hidden; color: var(--awh-ink-2); transition: transform 180ms var(--awh-ease), box-shadow 180ms;
}
.awh-rig:hover { transform: translateY(-2px); box-shadow: var(--awh-shadow); }
.awh-rig__media { position: relative; width: 100%; aspect-ratio: 430 / 614; background: var(--awh-deep); }
.awh-rig__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.awh-rig__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.awh-rig__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .03em;
	text-transform: uppercase; color: var(--awh-ink);
}
.awh-rig__by { font-size: 11px; color: var(--awh-ink-3); margin-top: 4px; }
.awh-rig__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.awh-rig__free { font-weight: 700; font-size: 14px; color: var(--awh-gold); }
.awh-rig__foot .awh-btn, .awh-rig .awh-wish { position: relative; z-index: 2; }
/* WoodMart's own wishlist button, dressed as the handoff's heart. */
.awh .awh-wish { position: absolute; top: 10px; right: 10px; margin: 0; }
.awh .awh-wish > a {
	width: 30px; height: 30px; border-radius: 999px; background: var(--awh-panel); color: var(--awh-ink);
	display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
	padding: 0; transition: color 120ms;
}
.awh .awh-wish > a:hover, .awh .awh-wish > a.added { color: var(--awh-gold); }
.awh .awh-wish > a.added .awh-ico { fill: currentColor; }
.awh .awh-wish .wd-action-icon { display: flex; width: auto; height: auto; }
.awh .awh-wish .wd-action-icon::before, .awh .awh-wish .wd-action-icon::after { content: none; }
.awh .awh-wish .wd-action-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- best sellers ---------- */
.awh-best {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1px;
	background: var(--awh-rule); border: 1px solid var(--awh-rule); border-radius: 12px; overflow: hidden;
}
.awh .awh-best__item { display: flex; }
.awh .awh-best__link {
	display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--awh-band);
	color: var(--awh-ink-2); width: 100%; transition: background-color 120ms;
}
.awh .awh-best__link:hover { background: var(--awh-card); color: var(--awh-ink-2); }
/* The whole product picture at its own shape, never cropped (Harvey, 15 Sep): width fixed, height follows, capped. */
.awh-best__media { position: relative; width: 72px; height: auto; align-self: flex-start; flex: none; }
.awh-best__media img { display: block; width: 72px; height: auto; max-height: 120px; border-radius: 6px; object-fit: contain; object-position: left top; }
.awh-best__rank {
	position: absolute; top: -8px; left: -8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
	background: var(--awh-gold); color: var(--awh-on-gold); display: flex; align-items: center; justify-content: center;
	font-family: var(--awh-display); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.awh-best__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.awh-best__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 11px; line-height: 1.4; letter-spacing: .03em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: pretty;
}
.awh-best__by { font-size: 11px; color: var(--awh-ink-3); }
.awh-best__foot { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 4px; }
.awh-best__price { font-weight: 700; font-size: 14px; color: var(--awh-gold); }
.awh-best__cat {
	display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--awh-ink-3);
}
.awh-best__cat span { width: 7px; height: 7px; border-radius: 999px; background: var(--awh-dot); }

/* ---------- mentors ---------- */
.awh-mhead {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px 48px;
	align-items: end; margin-bottom: 28px;
}
.awh .awh-mhead__text { font-size: 14px; line-height: 1.65; color: var(--awh-ink-2); margin-top: 10px; max-width: 520px; text-wrap: pretty; }
.awh-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--awh-rule); }
.awh-fact {
	display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--awh-rule);
	font-size: 13px; line-height: 1.4; color: var(--awh-ink-3);
}
.awh-fact b { font-weight: 700; color: var(--awh-ink); }
/* 300px, not the handoff's 220: on the 1520px rail 220 gives 5 + 3 mentors, the drawing is 4 + 4. */
.awh-mentors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.awh .awh-mentor {
	position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	padding: 28px 18px 24px; background: var(--awh-card); border-radius: 12px; color: var(--awh-ink-2);
	transition: transform 180ms var(--awh-ease), background-color 120ms;
}
.awh .awh-mentor:hover { transform: translateY(-2px); background: var(--awh-card-hi); color: var(--awh-ink-2); }
.awh-mentor__badge {
	position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 999px; background: var(--awh-gold);
	color: var(--awh-on-gold); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.awh-mentor__img {
	width: 76px; height: 76px; border-radius: 999px; object-fit: cover; border: 2px solid var(--awh-rule); /* Further Tweaks: was gold */
	background: var(--awh-deep);
}
.awh-mentor__who { display: block; }
.awh-mentor__name { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--awh-ink); }
.awh-mentor__role { display: block; font-size: 12px; color: var(--awh-ink-3); margin-top: 3px; }
.awh-mentor__line { font-size: 13px; line-height: 1.55; color: var(--awh-ink-2); text-wrap: pretty; }
.awh-mentors__foot { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.awh-mentors__foot .awh-btn { padding: 0 26px; }
.awh-mentors__note { font-size: 13px; color: var(--awh-ink-3); }

/* ---------- articles ---------- */
.awh-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.awh-post {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: 14px; padding: 44px 28px 36px; min-height: 280px; background: var(--awh-card);
	border-radius: 12px; color: var(--awh-ink-2); transition: transform 180ms var(--awh-ease), box-shadow 180ms;
}
.awh-post:hover { transform: translateY(-2px); box-shadow: var(--awh-shadow); }
.awh-post__body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.awh-post__date {
	position: absolute; top: 12px; left: 12px; z-index: 2; width: 44px; padding: 6px 0; border-radius: 8px;
	background: var(--awh-gold); color: var(--awh-on-gold); text-align: center;
	font-family: var(--awh-display); font-weight: 700; line-height: 1.1; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.awh-post__date b { display: block; font-size: 15px; letter-spacing: 0; margin-bottom: 2px; }
.awh-post__cat {
	padding: 5px 10px; border-radius: 999px; background: var(--awh-panel); color: var(--awh-gold);
	font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.awh-post__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 15px; line-height: 1.4; letter-spacing: .02em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: balance;
}
.awh-post__by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--awh-ink-3); }
.awh-post__by img { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; }
.awh-post--img { padding: 0; overflow: hidden; align-items: stretch; justify-content: flex-start; text-align: left; gap: 0; }
.awh-post__media { position: relative; width: 100%; flex: 1; min-height: 160px; background: var(--awh-deep); }
.awh-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awh-post--img .awh-post__body { padding: 16px 18px 18px; align-items: stretch; gap: 8px; }
.awh-post--img .awh-post__cat { align-self: flex-start; }
.awh-post--img .awh-post__title { font-size: 14px; text-wrap: pretty; }

/* ---------- join band ---------- */
.awh-band { position: relative; isolation: isolate; }
.awh-band::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
	background: var(--awh-band); border-top: 1px solid var(--awh-rule); border-bottom: 1px solid var(--awh-rule);
}
.awh-band__in { padding: 64px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.awh-band__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: .03em;
	text-transform: uppercase; color: var(--awh-ink); text-wrap: balance;
}
.awh .awh-band__text { font-size: 15px; line-height: 1.6; color: var(--awh-ink-2); max-width: 560px; text-wrap: pretty; }
.awh-nl {
	margin-top: 28px; width: 100%; max-width: 640px; background: var(--awh-card); border-radius: 12px;
	padding: 20px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; text-align: left;
}
.awh-nl__icon {
	width: 44px; height: 44px; border-radius: 999px; background: var(--awh-gold); color: var(--awh-on-gold);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.awh-nl__copy { flex: 1 1 180px; min-width: 0; }
.awh-nl__title {
	font-family: var(--awh-display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--awh-ink);
}
.awh .awh-nl__text { font-size: 12px; color: var(--awh-ink-3); margin-top: 2px; }
.awh-nl__drop {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 10px 5px 6px; border-radius: 999px;
	background: var(--awh-field); border: 1px solid var(--awh-rule); font-size: 11px; color: var(--awh-ink-2);
}
.awh-nl__drop:has(.awh-nl__count:empty) { display: none; }
.awh-nl__pill {
	padding: 2px 8px; border-radius: 999px; background: var(--awh-gold); color: var(--awh-on-gold); font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
}
.awh-nl__count { font-weight: 700; color: var(--awh-ink); font-variant-numeric: tabular-nums; }
/* During a drop: a live dot on the pill and a link to watch. */
.awh-nl__drop.is-live .awh-nl__pill::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 999px; background: #E5484D; vertical-align: 1px; animation: awh-live-dot 1.2s ease-in-out infinite; }
@keyframes awh-live-dot { 50% { opacity: .35; } }
.awh .awh-nl__watch { color: var(--awh-gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.awh .awh-nl__watch:hover { color: var(--awh-ink); }
@media (prefers-reduced-motion: reduce) { .awh-nl__drop.is-live .awh-nl__pill::before { animation: none; } }
.awh-nl__form { flex: 1 1 260px; min-width: 0; }
/* ---- the Tuesday drop module: video, pill, subscribe; email as the second row ---- */
.awh-nl.awh-drop { max-width: 820px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px 24px; align-items: center; padding: 20px; }
.awh-drop__video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.awh-drop__video img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms cubic-bezier(.22, 1, .36, 1); }
.awh-drop__video:hover img { transform: scale(1.03); }
.awh-drop__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 54px; height: 38px; border-radius: 10px; background: #FF0033; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.awh-drop__play svg { fill: currentColor; }
.awh-drop .awh-nl__drop { margin: 0 0 10px; white-space: nowrap; }
.awh-drop .awh-nl__title { font-size: 16px; }
.awh .awh-drop .awh-nl__text { font-size: 13px; line-height: 1.55; margin-top: 4px; }
.awh-drop__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.awh .awh-btn--yt { background: #FF0033; color: #FFFFFF; height: 40px; padding: 0 16px; font-size: 13px; }
.awh .awh-btn--yt:hover { background: #E0002D; color: #FFFFFF; }
.awh .awh-btn--yt svg { fill: currentColor; }
.awh .awh-drop__watch { font-size: 13px; font-weight: 700; color: var(--awh-gold); text-decoration: underline; text-underline-offset: 3px; }
.awh .awh-drop__watch:hover { color: var(--awh-ink); }
.awh-drop__email { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding-top: 16px; border-top: 1px solid var(--awh-rule); }
.awh .awh-drop__email-text { flex: 1 1 240px; margin: 0; font-size: 12.5px; color: var(--awh-ink-3); }
.awh .awh-drop__email-text b { color: var(--awh-ink); }
.awh-drop__email .awh-nl__form { flex: 1 1 320px; }
.awh-drop__admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding: 8px; border: 1px dashed var(--awh-rule); border-radius: 8px; font-size: 11px; color: var(--awh-ink-3); }
.awh-drop__admin label { flex: 1 1 100%; }
.awh .awh-drop__admin input { flex: 1 1 200px; min-width: 0; height: 30px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--awh-rule); background: var(--awh-field); color: var(--awh-ink); font-size: 12px; }
.awh .awh-drop__admin button { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--awh-gold); color: var(--awh-on-gold); font-weight: 700; font-size: 12px; cursor: pointer; }
@media (max-width: 700px) {
	.awh-nl.awh-drop { grid-template-columns: minmax(0, 1fr); }
	.awh-drop .awh-nl__drop { white-space: normal; }
}
/* FluentForm, reshaped to the handoff's pill field and button. */
.awh-nl__form .fluentform, .awh-nl__form form, .awh-nl__form fieldset { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.awh-nl__form form, .awh-nl__form .ff-t-container { display: flex !important; gap: 8px; align-items: flex-start; flex-wrap: nowrap !important; }
.awh-nl__form .ff-t-cell, .awh-nl__form .ff-el-group { margin: 0 !important; padding: 0 !important; min-width: 0; }
.awh-nl__form .ff-t-column-1, .awh-nl__form form > .ff-el-group:first-of-type { flex: 1 1 0 !important; width: auto !important; }
.awh-nl__form .ff-t-column-2, .awh-nl__form .ff_submit_btn_wrapper { flex: 0 0 auto !important; width: auto !important; }
.awh-nl__form .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.awh .awh-nl__form input[type="email"], .awh .awh-nl__form input[type="text"] {
	width: 100%; height: 44px; background: var(--awh-field); border: 1px solid var(--awh-idle); border-radius: 999px;
	color: var(--awh-ink); padding: 0 16px; font-family: var(--awh-body); font-size: 13px; box-shadow: none;
}
.awh .awh-nl__form input::placeholder { color: var(--awh-ink-4); opacity: 1; }
.awh .awh-nl__form input:focus { border-color: var(--awh-gold); }
.awh .awh-nl__form .ff-btn-submit, .awh .awh-nl__form button[type="submit"] {
	height: 44px; padding: 0 18px; border-radius: 999px; background: var(--awh-gold) !important; color: var(--awh-on-gold) !important;
	border: 0; font-family: var(--awh-body); font-size: 13px; font-weight: 600; white-space: nowrap; text-transform: none;
	box-shadow: none; cursor: pointer; transition: background-color 120ms;
}
.awh .awh-nl__form .ff-btn-submit:hover { background: var(--awh-gold-hi) !important; }
.awh-nl__form .ff-message-success { color: var(--awh-ink); font-size: 13px; text-align: left; border: 0; padding: 10px 0 0; box-shadow: none; background: none; }
.awh-nl__form .error, .awh-nl__form .text-danger { font-size: 12px; margin-top: 6px; text-align: left; }

/* The site footer (mu-plugins/aw-footer.php) opens with its own "Join the Animation Collective"
 * band and the same three buttons. In the handoff that band IS this section, newsletter card and
 * all, so the footer's copy stands down on this page only. */
.aw-home-v2 .aw-cf-hero { display: none; }

/* Tablets (two-column range): no orphan card on a row of its own, no empty cell in the best sellers. */
@media (min-width: 601px) and (max-width: 970px) {
	.awh .awh-door:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 300px; }
	.awh .awh-door:last-child:nth-child(odd) .awh-door__panel { max-width: 440px; }
	.awh-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Five ranks on a 3-wide grid left a blank sixth cell: 3 across then 2 across, on a six-track grid. */
	.awh .awh-best { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.awh .awh-best__item { grid-column: span 2; }
	.awh .awh-best__item:nth-child(n+4) { grid-column: span 3; }
}
/* Phones: "Animation review" ran 138px into a 96 to 134px window and was cut at the rail's edge.
   The film icon goes (the wordmark carries the brand) and the tracking tightens. */
@media (max-width: 430px) {
	.awh .awh-rail__icon { display: none; }
	.awh .awh-rail { gap: 10px; }
	.awh .awh-rail__feat, .awh .awh-rail__cta { letter-spacing: .06em; }
}
@media (max-width: 340px) {
	.awh .awh-rail__marks--flat > img { height: 15px; }
	.awh .awh-rail__feat, .awh .awh-rail__cta { font-size: 10px; }
}
/* Below the first screen, sections skip layout and paint until they come near (the page is ~9,000px on a phone).
 * `auto` in contain-intrinsic-size remembers each section's real height once seen, so the scrollbar settles. */
.awh > section:not(.awh-hero):not(.awh-proof):not(.awh-studios) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- small screens ---------- */
/* After the base hero rules on purpose: inside the earlier 900px block they lost on source order. */
@media (max-width: 900px) {
	/* Tablets in portrait: two columns left the copy 300px wide, so the badges ran under the picture and a
	   16:9 cover was cropped to a sliver 800px tall. Stack it like a phone, picture at its own shape. */
	.awh-slide { grid-template-columns: minmax(0, 1fr); }
	.awh-slide__copy { padding: 44px 40px 36px; }
	/* ⚠️ width is load-bearing: with aspect-ratio, the phones' min-height 240px was turned into a 427px min WIDTH
	   (240 x 16/9), so the picture overflowed a 360px card and was cut on the right. */
	.awh-slide__media { min-height: 0; aspect-ratio: 16 / 9; width: 100%; min-width: 0; }
	/* The arrows sat mid-card, which is now over the copy. Swipe and the pills do the job on a tablet. */
	.awh .awh-arrow { display: none; }
}
@media (max-width: 600px) {
	.awh .awh-slide__title img { width: min(calc(var(--awh-tw, 420px) * .82), 100%); }
	.awh-prog { gap: 10px; }
	.awh button.awh-prog__item { min-width: 34px; gap: 0; padding: 14px 0; }
	.awh-prog__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.awh-slide__copy { padding: 32px 20px 28px; }
	.awh .awh-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.awh .awh-badge { padding: 8px 10px; }
	.awh-badge__top, .awh-badge__sub { white-space: normal; }
	.awh-slide__media { min-height: 240px; }
	.awh .awh-proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.awh-proof__label { white-space: normal; } /* two columns are too narrow to truncate honestly */
	/* Five tall cells are mostly empty space on a phone: rows, picture on the left. */
	.awh .awh-best__link { flex-direction: row; align-items: center; gap: 16px; padding: 16px 16px 16px 20px; }
	.awh-best__media, .awh-best__media img { width: 56px; }
	.awh-best__media img { max-height: 94px; }
	.awh .awh-arrow { display: none; }
	.awh-rigs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.awh-rig__foot { flex-wrap: wrap; }
	.awh-band__title { font-size: 30px; }
	.awh-facts { grid-template-columns: minmax(0, 1fr); }
	.awh-nl__form form, .awh-nl__form .ff-t-container { flex-wrap: wrap !important; }
	.awh-nl__form .ff-t-column-2, .awh-nl__form .ff_submit_btn_wrapper, .awh .awh-nl__form .ff-btn-submit { width: 100% !important; }
}

/* Touch screens: the small text links and buttons get a finger-sized hit area without changing the look. */
@media (pointer: coarse) {
	.awh .awh-more { min-height: 44px; }
	.awh .awh-sub a { padding-block: 12px; }
	.awh .awh-btn--sm { height: 40px; }
	.awh .awh-wish > a { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	/* A plain, quick crossfade: no travel, no wipe, no zoom. */
	.awh-slide.is-leaving .awh-slide__copy > *, .awh-slide.is-entering .awh-slide__copy > *,
	.awh-slide.is-entering .awh-slide__media, .awh-slide.is-entering .awh-slide__media > img { animation: none; }
	.awh-slide.is-entering { animation: awhFade 200ms ease both; }
	.awh-slide.is-entering .awh-slide__media::after { display: none; }
	.awh-rail__track, .awh-rail__feat { transition: none; }
	.awh-slide__loop, .awh .awh-door, .awh-rig, .awh .awh-mentor, .awh-post { transition: none; }
	.awh .awh-door:hover, .awh-rig:hover, .awh .awh-mentor:hover, .awh-post:hover { transform: none; }
}

/* ================= The Tuesday Drop (handoff "Animworks homepage redesign", section 6) =================
   Values are the handoff's; LEMON MILK for its Lemon Milk Pro, LM Pro for Poppins; the Indarung title is an image
   (personal licence, never a web font). */
.awh-td { position: relative; overflow: hidden; isolation: isolate; margin-top: 72px; background: #0B0B0B; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* full-bleed band, content still on the rail */
.awh-td__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0B0B0B center / cover no-repeat; opacity: .35; }
.awh-td__bg iframe { position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--awh-ease); }
.awh-td__bg.is-playing iframe { opacity: 1; }
.awh-td__shade { position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 11, .72); }
.awh-td__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px 56px; align-items: center; padding-block: 80px; }
.awh-td__copy { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.awh-td__tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.awh-td__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #E24B6E; color: #FFFFFF; font-family: var(--awh-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.awh-td__live span { width: 7px; height: 7px; border-radius: 999px; background: #FFFFFF; flex: none; }
.awh-td.is-drop-live .awh-td__live span { animation: awh-live-dot 1.2s ease-in-out infinite; }
.awh-td__when { font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--awh-gold); }
.awh-td__title { margin: 0; line-height: 0; }
.awh-td__title img { display: block; width: auto; height: clamp(76px, 7.1vw, 106px); max-width: 100%; object-fit: contain; object-position: left; }
.awh .awh-td__text { margin: 0; max-width: 480px; font-family: var(--awh-body); font-size: 16px; line-height: 1.65; color: #DAD8D2; text-wrap: pretty; }
.awh-td__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.awh .awh-td__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 26px; border-radius: 999px; font-family: var(--awh-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color 120ms var(--awh-ease), color 120ms, border-color 120ms; }
.awh .awh-td__btn--gold { background: var(--awh-gold); color: #141414; }
.awh .awh-td__btn--gold:hover { background: #F5BD16; color: #141414; }
.awh .awh-td__btn--ghost { padding: 0 24px; background: rgba(20, 20, 20, .7); color: var(--awh-ink); border: 1.5px solid #4A4A4A; }
.awh .awh-td__btn--ghost:hover { color: var(--awh-gold); border-color: var(--awh-gold); }
.awh-td__side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.awh-td__count { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: 14px; background: rgba(17, 17, 17, .9); border: 1.5px solid var(--awh-gold); }
.awh-td__count-label { font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--awh-ink); }
.awh-td__count-num { font-family: var(--awh-body); font-size: 22px; font-weight: 700; color: var(--awh-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.awh-td__count.is-live .awh-td__count-label::before, .awh-news__next.is-live .awh-news__next-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 999px; background: #E24B6E; vertical-align: 1px; animation: awh-live-dot 1.2s ease-in-out infinite; }
.awh .awh-watch { color: var(--awh-gold); text-decoration: underline; text-underline-offset: 4px; }
.awh .awh-watch:hover { color: #F5BD16; }
.awh-td__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 2px; }
.awh-td__head span { font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--awh-ink-3); }
.awh .awh-td__head a { font-family: var(--awh-body); font-size: 12px; font-weight: 600; color: var(--awh-gold); }
.awh .awh-td__head a:hover { color: #F5BD16; }
.awh-td__list { display: flex; flex-direction: column; gap: 10px; }
.awh .awh-td__ep { display: flex; gap: 14px; align-items: center; min-width: 0; padding: 12px; border-radius: 12px; background: #161616; border: 1px solid var(--awh-rule); color: var(--awh-ink); text-decoration: none; transition: border-color 120ms, background-color 120ms; }
.awh .awh-td__ep:hover { border-color: var(--awh-gold); background: #1C1C1C; color: var(--awh-ink); }
.awh-td__thumb { position: relative; flex: none; width: 104px; height: 60px; border-radius: 8px; overflow: hidden; background: #0B0B0B; display: flex; align-items: center; justify-content: center; }
.awh-td__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awh-td__thumb svg { position: relative; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); }
.awh-td__ep-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.awh-td__ep-kicker { font-family: var(--awh-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--awh-gold); }
.awh-td__ep-title { font-family: var(--awh-body); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--awh-ink); text-wrap: pretty; }
.awh-td .awh-drop__admin { margin-top: 0; background: rgba(17, 17, 17, .85); }

/* ================= Newsletter (handoff section 8) ================= */
.awh-news-sec { padding-top: 72px; }
.awh-news { position: relative; overflow: hidden; border-radius: 16px; background: #1F1A0E; border: 1.5px solid var(--awh-gold); border-top-width: 6px; }
.awh-news__mark { position: absolute; right: -60px; bottom: -70px; width: 320px; height: 320px; color: var(--awh-gold); opacity: .07; pointer-events: none; }
.awh-news__in { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px 48px; padding: 44px 40px; align-items: center; }
.awh-news__copy { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.awh-news__brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.awh-news__brand img { display: block; height: 14px; width: auto; opacity: .9; }
.awh-news__rule { width: 1px; height: 13px; background: #4A4030; flex: none; }
.awh-news__kicker { font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--awh-gold); }
.awh-news__title { margin: 0; line-height: 0; }
.awh-news__title img { display: block; width: auto; height: clamp(64px, 5.9vw, 86px); max-width: 100%; object-fit: contain; object-position: left; }
.awh .awh-news__text { margin: 0; max-width: 460px; font-family: var(--awh-body); font-size: 15px; line-height: 1.65; color: var(--awh-ink-2); text-wrap: pretty; }
.awh .awh-news__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.awh .awh-news__chips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #161616; border: 1px solid #2F2A1A; font-family: var(--awh-body); font-size: 12px; color: var(--awh-ink-2); }
.awh-news__chips svg { flex: none; color: var(--awh-gold); }
.awh-news__side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.awh-news__card .awh-news__form { flex: none; } /* the shared .awh-nl__form flex:1 1 260px is a HEIGHT in this column */
.awh-news__card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 14px; background: #141414; border: 1px solid #2F2A1A; }
.awh-news__next { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.awh-news__next-label { font-family: var(--awh-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--awh-ink); }
.awh-news__count { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #1F1A0E; border: 1px solid #3A3220; font-family: var(--awh-body); font-size: 14px; font-weight: 700; color: var(--awh-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.awh-news__count:empty { display: none; }
.awh .awh-news__form input[type="email"], .awh .awh-news__form input[type="text"] { height: 48px !important; background: #0F0F0F !important; border: 1px solid var(--awh-line) !important; border-radius: 999px !important; padding: 0 18px !important; font-size: 14px !important; }
.awh .awh-news__form .ff-btn-submit, .awh .awh-news__form button[type="submit"] { height: 48px !important; padding: 0 24px !important; border-radius: 999px !important; font-family: var(--awh-display) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.awh-news__proof { display: flex; align-items: center; gap: 10px; font-family: var(--awh-body); font-size: 12px; color: var(--awh-ink-3); }
.awh-news__proof strong { color: var(--awh-ink); }
.awh-news__faces { display: flex; align-items: center; }
.awh-news__faces > span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -8px; border-radius: 999px; overflow: hidden; background: #3A3A3A; border: 2px solid #141414; font-size: 8px; font-weight: 700; color: var(--awh-ink); }
.awh-news__faces > span:first-child { margin-left: 0; }
.awh-news__faces img { width: 100%; height: 100%; object-fit: cover; }
.awh .awh-news__small { margin: 0; font-family: var(--awh-body); font-size: 11px; line-height: 1.6; color: #8B8880; }
@media (max-width: 600px) {
	.awh-td__in { padding-block: 56px; }
	.awh-news__in { padding: 32px 22px; }
	.awh .awh-td__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.awh-td__bg iframe { transition: none; }
	.awh-td.is-drop-live .awh-td__live span, .awh-td__count.is-live .awh-td__count-label::before, .awh-news__next.is-live .awh-news__next-label::before { animation: none; }
}