/**
 * VegOut Magazine — frontend styles
 * Port of Figma "Example 2 Articles Premium" (file tXEWf6DtTLOSkGFUAm3OQ7, node 19558:3770).
 *
 * All selectors scoped under .vo-mag to avoid any leak to the rest of the site.
 */

/* ===============================================================
   DESIGN TOKENS
   Figma: Vegout V1.0 — Blog V2 / "Example 2 Articles Premium"
   =============================================================== */
.vo-mag {
	/* Colors — yellow-highlight magazine palette */
	--vo-mag-accent: #FFE300;
	--vo-mag-accent-soft: #FFF6A6;
	--vo-mag-accent-dark: #FFC400;

	--vo-mag-text-primary: #0A0A0A;
	--vo-mag-text-muted: #4A4A4A;
	--vo-mag-text-caption: #6E6E6E;
	--vo-mag-text-meta: #8B8B8B;
	--vo-mag-text-label: #0A0A0A;
	--vo-mag-text-inverse: #ffffff;

	--vo-mag-bg: #ffffff;
	--vo-mag-bg-dark: #0A0A0A;
	--vo-mag-bg-soft: #F7F7F4;

	/* Typography families — match Figma Inter / Roboto stack */
	--vo-mag-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--vo-mag-font-body: 'Charter', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--vo-mag-font-display: 'Syne', 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--vo-mag-font-meta: 'Roboto', 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	--vo-mag-font-hero-meta: 'Roboto', 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif;

	/* Spacing */
	--vo-mag-space-xs: 4px;
	--vo-mag-space-sm: 8px;
	--vo-mag-space-md: 16px;
	--vo-mag-space-lg: 24px;
	--vo-mag-space-xl: 40px;
	--vo-mag-space-2xl: 64px;
	--vo-mag-space-3xl: 96px;

	/* Layout widths */
	--vo-mag-content-width: 720px;
	--vo-mag-wide-width: 1080px;
	/* Image grids break out further than the standard wide width so
	   a 2-up pair cell ends up WIDER than the body text column (720)
	   instead of narrower. At 1440 cells are ~700px each; at 1710
	   they're ~700px (grid capped at 1400). Triples are ~460px. */
	--vo-mag-grid-width: 1400px;

	/* Borders */
	--vo-mag-bar-width: 6px;
}

/* ===============================================================
   BASE RESET (scoped)
   =============================================================== */
.vo-mag-article,
.vo-mag-issue,
.vo-mag-archive {
	color: var(--vo-mag-text-primary);
	background: var(--vo-mag-bg);
	font-family: var(--vo-mag-font-body);
}

.vo-mag-article *,
.vo-mag-issue *,
.vo-mag-archive * {
	box-sizing: border-box;
}

.vo-mag-article img,
.vo-mag-issue img,
.vo-mag-archive img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ===============================================================
   SHARED COMPONENTS
   =============================================================== */

.vo-mag-eyebrow {
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vo-mag-text-inverse);
	display: inline-block;
}

.vo-mag-eyebrow--dark {
	color: var(--vo-mag-text-label);
}

/* Yellow highlight treatment used on titles + section headings.
   box-decoration-break: clone makes each wrapped line get its own
   yellow background block, matching the Figma Premium Article design. */
.vo-mag-hl {
	background-color: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	padding: 0.06em 0.18em;
	box-shadow: 0.18em 0 0 var(--vo-mag-accent), -0.18em 0 0 var(--vo-mag-accent);
}

.vo-mag-related__title-bar {
	display: inline-block;
	width: calc(var(--vo-mag-bar-width) * 2);
	height: 1.1em;
	background: var(--vo-mag-accent);
	margin-right: var(--vo-mag-space-md);
	vertical-align: -2px;
}

/* ===============================================================
   ARTICLE — HERO (title-above-image, yellow highlight)
   Figma: Example 2 Articles Premium
   =============================================================== */

.vo-mag-article__hero {
	width: 100%;
	background: var(--vo-mag-bg);
	color: var(--vo-mag-text-primary);
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-xl) var(--vo-mag-space-xl);
	position: relative;
}

.vo-mag-article__hero-inner {
	width: 100%;
	max-width: var(--vo-mag-content-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--vo-mag-space-md);
}

.vo-mag-article__hero .vo-mag-eyebrow {
	color: var(--vo-mag-text-label);
	align-self: flex-start;
}

.vo-mag-article__title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: clamp(34px, 4.8vw, 52px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--vo-mag-text-primary);
	/* Highlight the whole title with yellow blocks per wrapped line */
	display: inline;
}

.vo-mag-article__title-inner {
	background-color: var(--vo-mag-accent);
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	padding: 0.06em 0.18em;
	box-shadow: 0.18em 0 0 var(--vo-mag-accent), -0.18em 0 0 var(--vo-mag-accent);
}

.vo-mag-article__deck {
	font-family: var(--vo-mag-font-ui);
	font-weight: 400;
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.5;
	margin: 0;
	color: var(--vo-mag-text-muted);
	max-width: 58ch;
}

.vo-mag-article__byline {
	display: flex;
	align-items: center;
	gap: var(--vo-mag-space-md);
	flex-wrap: wrap;
	margin-top: var(--vo-mag-space-sm);
	padding-top: var(--vo-mag-space-md);
	border-top: 1px solid #E5E5E5;
}

.vo-mag-article__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	flex: 0 0 36px;
}

.vo-mag-article__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vo-mag-article__author-name {
	font-family: var(--vo-mag-font-meta);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vo-mag-text-primary);
}

.vo-mag-article__meta {
	font-family: var(--vo-mag-font-meta);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vo-mag-text-meta);
}

/* Hero image sits below the title as a clean full-width visual */
.vo-mag-article__hero-image {
	width: 100%;
	max-width: var(--vo-mag-wide-width);
	margin: var(--vo-mag-space-xl) auto 0;
	padding: 0 var(--vo-mag-space-xl);
}

.vo-mag-article__hero-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vo-mag-article__hero-credit {
	display: block;
	max-width: var(--vo-mag-wide-width);
	margin: var(--vo-mag-space-xs) auto 0;
	padding: 0 var(--vo-mag-space-xl);
	font-family: var(--vo-mag-font-meta);
	font-style: italic;
	font-size: 12px;
	color: var(--vo-mag-text-caption);
}

/* ===============================================================
   ARTICLE — BODY
   Narrow column, Inter body, yellow-highlighted section headings.
   =============================================================== */

.vo-mag-article__body {
	max-width: var(--vo-mag-content-width);
	margin: var(--vo-mag-space-2xl) auto var(--vo-mag-space-3xl);
	padding: 0 var(--vo-mag-space-lg);
	font-family: var(--vo-mag-font-body);
}

.vo-mag-article__body > p {
	font-family: var(--vo-mag-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.72;
	color: var(--vo-mag-text-primary);
	margin: 0 0 var(--vo-mag-space-lg);
}

/* Figma Premium Article opens each section with bolded lead words,
   not a drop cap. Keep the treatment subtle. */
.vo-mag-article__body > p:first-of-type {
	font-weight: 400;
}

/* h2 — yellow-highlighted section heading (spec: Inter 40px) */
.vo-mag-article__body h2,
.vo-mag-article__body > .wp-block-heading {
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: clamp(28px, 3.5vw, 40px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: var(--vo-mag-space-2xl) 0 var(--vo-mag-space-lg);
	color: var(--vo-mag-text-primary);
}

.vo-mag-article__body h2 .vo-mag-hl,
.vo-mag-article__body > .wp-block-heading .vo-mag-hl {
	background-color: var(--vo-mag-accent);
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	padding: 0.06em 0.22em;
	box-shadow: 0.18em 0 0 var(--vo-mag-accent), -0.18em 0 0 var(--vo-mag-accent);
}

/* Auto-apply yellow highlight to any h2 inside the article body so
   existing content without a span wrapper still gets the treatment. */
.vo-mag-article__body > h2 {
	display: inline-block;
	padding: 0.06em 0.22em;
	background: var(--vo-mag-accent);
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

.vo-mag-article__body h3 {
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	margin: var(--vo-mag-space-xl) 0 var(--vo-mag-space-md);
	color: var(--vo-mag-text-primary);
}

.vo-mag-article__body ul,
.vo-mag-article__body ol {
	font-family: var(--vo-mag-font-body);
	font-size: 18px;
	line-height: 30.6px;
	margin: 0 0 var(--vo-mag-space-lg);
	padding-left: var(--vo-mag-space-xl);
}

.vo-mag-article__body li {
	margin: 0 0 var(--vo-mag-space-sm);
}

.vo-mag-article__body a {
	color: var(--vo-mag-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.vo-mag-article__body a:hover {
	text-decoration-thickness: 2px;
}

.vo-mag-article__body em {
	font-style: italic;
}

.vo-mag-article__body strong {
	font-weight: 700;
}

.vo-mag-article__body blockquote,
.vo-mag-article__body .wp-block-quote {
	border-left: var(--vo-mag-bar-width) solid var(--vo-mag-accent);
	padding-left: var(--vo-mag-space-lg);
	margin: var(--vo-mag-space-2xl) 0;
	font-family: var(--vo-mag-font-ui);
	font-weight: 500;
	font-size: 20px;
	line-height: 34px;
	color: var(--vo-mag-text-primary);
}

.vo-mag-article__body hr,
.vo-mag-article__body .wp-block-separator {
	border: 0;
	border-top: 1px solid #e5e5e5;
	margin: var(--vo-mag-space-2xl) auto;
	max-width: 80px;
}

/* ===============================================================
   PULLQUOTE BLOCK (vo-mag/pullquote)
   =============================================================== */

.vo-mag-article__body .vo-mag-pullquote {
	display: flex;
	align-items: stretch;
	gap: var(--vo-mag-space-lg);
	margin: var(--vo-mag-space-2xl) 0;
	max-width: var(--vo-mag-wide-width);
}

.vo-mag-pullquote__bar {
	display: block;
	width: var(--vo-mag-bar-width);
	background: var(--vo-mag-accent);
	border-radius: 2px;
	flex: 0 0 var(--vo-mag-bar-width);
	min-height: 100%;
}

.vo-mag-pullquote__text {
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: 40px;
	line-height: 50px;
	color: var(--vo-mag-text-primary);
	margin: 0;
}

/* ===============================================================
   CREDIT IMAGE BLOCK (vo-mag/credit-image)
   =============================================================== */

.vo-mag-article__body .vo-mag-credit-image {
	margin: var(--vo-mag-space-2xl) 0;
}

.vo-mag-article__body .vo-mag-credit-image--wide {
	max-width: var(--vo-mag-wide-width);
	width: calc(100vw - var(--vo-mag-space-xl) * 2);
	margin-left: calc(50% - 50vw + var(--vo-mag-space-xl));
}

.vo-mag-article__body .vo-mag-credit-image--full {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.vo-mag-credit-image__img {
	width: 100%;
	height: auto;
	display: block;
}

.vo-mag-credit-image__legend {
	margin-top: var(--vo-mag-space-sm);
	font-family: var(--vo-mag-font-body);
	font-style: italic;
	font-size: 18px;
	line-height: 30.6px;
	color: var(--vo-mag-text-caption);
}

.vo-mag-credit-image__credit {
	margin-left: var(--vo-mag-space-sm);
}

/* ---------------------------------------------------------------
   IMAGE GRID — wraps runs of adjacent credit-image figures so
   paired/grouped images from the source PDF read side-by-side
   instead of a vertical stack of full-width figures. Wrapper is
   injected at runtime by assets/js/image-grid.js.
   --------------------------------------------------------------- */

.vo-mag-article__body .vo-mag-image-grid {
	display: grid;
	gap: var(--vo-mag-space-md);
	margin: var(--vo-mag-space-2xl) 0;
	max-width: var(--vo-mag-grid-width);
	width: calc(100vw - var(--vo-mag-space-xl) * 2);
	margin-left: calc(50% - 50vw + var(--vo-mag-space-xl));
	grid-template-columns: repeat(2, 1fr);
}

/* 3-up for a triplet. */
.vo-mag-article__body .vo-mag-image-grid--n-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 4 figures → 2×2 grid (more readable than 4 in a row). */
.vo-mag-article__body .vo-mag-image-grid--n-4 {
	grid-template-columns: repeat(2, 1fr);
}

/* 5+ figures — fall back to a self-balancing 3-column grid. */
.vo-mag-article__body .vo-mag-image-grid--n-5,
.vo-mag-article__body .vo-mag-image-grid--n-6,
.vo-mag-article__body .vo-mag-image-grid--n-7,
.vo-mag-article__body .vo-mag-image-grid--n-8,
.vo-mag-article__body .vo-mag-image-grid--n-9 {
	grid-template-columns: repeat(3, 1fr);
}

/* 10+ figures — 4-column grid. */
.vo-mag-article__body .vo-mag-image-grid[data-count="10"],
.vo-mag-article__body .vo-mag-image-grid[data-count="11"],
.vo-mag-article__body .vo-mag-image-grid[data-count="12"] {
	grid-template-columns: repeat(4, 1fr);
}

/* Reset solo-figure layout rules for figures inside a grid —
   they are grid items, not breakout-full-width siblings. */
.vo-mag-article__body .vo-mag-image-grid .vo-mag-credit-image,
.vo-mag-article__body .vo-mag-image-grid .vo-mag-credit-image--wide,
.vo-mag-article__body .vo-mag-image-grid .vo-mag-credit-image--full {
	margin: 0;
	width: auto;
	max-width: none;
	margin-left: 0;
}

/* Let grid items keep their natural aspect ratio — cropping portrait
   images into a 4:3 landscape box chopped off the subject. With
   align-self: start the grid tolerates mixed heights cleanly and
   each image is shown at full fidelity. (v0.3.5) */
.vo-mag-article__body .vo-mag-image-grid .vo-mag-credit-image {
	align-self: start;
}

.vo-mag-article__body .vo-mag-image-grid .vo-mag-credit-image__img,
.vo-mag-article__body .vo-mag-image-grid .wp-block-vo-mag-credit-image > img,
.vo-mag-article__body .vo-mag-image-grid .vo-mag-credit-image img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	aspect-ratio: auto;
	object-fit: contain;
}

/* ===============================================================
   SLIDER BLOCK (vo-mag/slider)
   =============================================================== */

.vo-mag-article__body .vo-mag-slider {
	margin: var(--vo-mag-space-2xl) 0;
	max-width: var(--vo-mag-wide-width);
	width: calc(100vw - var(--vo-mag-space-xl) * 2);
	margin-left: calc(50% - 50vw + var(--vo-mag-space-xl));
	position: relative;
}

.vo-mag-slider__track {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #000;
}

.vo-mag-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 320ms ease-in-out;
	pointer-events: none;
}

.vo-mag-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.vo-mag-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vo-mag-slider__legend {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--vo-mag-space-md) var(--vo-mag-space-lg);
	background: linear-gradient(0deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0) 100%);
	color: var(--vo-mag-text-inverse);
	font-family: var(--vo-mag-font-body);
	font-style: italic;
	font-size: 16px;
}

.vo-mag-slider__credit {
	margin-left: var(--vo-mag-space-sm);
	opacity: 0.8;
}

.vo-mag-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vo-mag-space-lg);
	margin-top: var(--vo-mag-space-md);
}

.vo-mag-slider__btn {
	background: transparent;
	border: 1px solid #e5e5e5;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 18px;
	cursor: pointer;
	color: var(--vo-mag-text-primary);
	transition: background 150ms;
}

.vo-mag-slider__btn:hover {
	background: #f6f7f7;
}

.vo-mag-slider__btn:focus-visible {
	outline: 2px solid var(--vo-mag-accent);
	outline-offset: 2px;
}

.vo-mag-slider__counter {
	font-family: var(--vo-mag-font-body);
	font-size: 16px;
	line-height: 27.2px;
	color: var(--vo-mag-text-primary);
}

/* ===============================================================
   AUTHOR CARD (end of article)
   =============================================================== */

.vo-mag-author-card {
	max-width: var(--vo-mag-content-width);
	margin: var(--vo-mag-space-3xl) auto;
	padding: var(--vo-mag-space-xl) var(--vo-mag-space-lg);
	display: flex;
	gap: var(--vo-mag-space-lg);
	align-items: flex-start;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

.vo-mag-author-card__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 72px;
}

.vo-mag-author-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vo-mag-author-card__name {
	font-family: var(--vo-mag-font-meta);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 var(--vo-mag-space-xs);
	color: var(--vo-mag-text-primary);
}

.vo-mag-author-card__bio {
	font-family: var(--vo-mag-font-meta);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--vo-mag-text-muted);
	margin: 0;
}

/* ===============================================================
   RELATED / LATEST ARTICLES
   =============================================================== */

.vo-mag-related {
	max-width: var(--vo-mag-wide-width);
	margin: var(--vo-mag-space-3xl) auto;
	padding: var(--vo-mag-space-2xl) var(--vo-mag-space-lg) var(--vo-mag-space-2xl);
	border-top: 1px solid #E5E5E5;
}

.vo-mag-related__title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 var(--vo-mag-space-xl);
	color: var(--vo-mag-text-primary);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	display: flex;
	align-items: center;
}

.vo-mag-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vo-mag-space-xl);
}

.vo-mag-related__card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 200ms ease;
}

.vo-mag-related__card:hover {
	transform: translateY(-2px);
}

.vo-mag-related__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	margin-bottom: var(--vo-mag-space-md);
	border-radius: 2px;
}

.vo-mag-related__card-title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: var(--vo-mag-text-primary);
	margin: var(--vo-mag-space-sm) 0 0;
}

.vo-mag-related__grid .vo-mag-eyebrow {
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--vo-mag-text-meta);
	text-transform: uppercase;
	margin-top: var(--vo-mag-space-sm);
	display: inline-block;
}

.vo-mag-related__more {
	margin-top: var(--vo-mag-space-xl);
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vo-mag-text-primary);
	text-decoration: none;
	border-bottom: 2px solid var(--vo-mag-accent);
	padding-bottom: 2px;
	display: inline-block;
}

.vo-mag-related__more:hover {
	border-bottom-color: var(--vo-mag-accent-dark);
}

/* ===============================================================
   ISSUE — COVER (Figma "Magazine #01 November" / "#02 February")
   Yellow page, inset hero image, huge edition number, chunky
   highlighted title, running edition marker + VegOut wordmark.
   Feb issue inverts to a black background.
   =============================================================== */

.vo-mag-issue__cover {
	width: 100%;
	background: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	padding: var(--vo-mag-space-lg) var(--vo-mag-space-xl) var(--vo-mag-space-xl);
	position: relative;
	overflow: hidden;
}

.vo-mag-issue__cover--dark {
	background: var(--vo-mag-bg-dark);
	color: var(--vo-mag-text-inverse);
}

.vo-mag-issue__cover-marker {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vo-mag-space-md);
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding-bottom: var(--vo-mag-space-lg);
}

.vo-mag-issue__cover-inner {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"media number"
		"copy  copy";
	gap: var(--vo-mag-space-xl);
	align-items: start;
	position: relative;
	padding: var(--vo-mag-space-2xl) 0 var(--vo-mag-space-xl);
}

/* v0.3.5 "book-lead" variant: magazine cover-book is the hero visual
   on the left, title + CTAs sit on the right. No separate lifestyle
   feature image in the cover; no giant .02 numeral (that's folded
   into the masthead edition marker). v0.3.6: tightened top padding
   so the book sits high in the viewport instead of being pushed
   down by generous space-2xl padding. */
.vo-mag-issue__cover-inner--book-lead {
	grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
	grid-template-areas: "book copy";
	align-items: center;
	gap: var(--vo-mag-space-2xl);
	padding: var(--vo-mag-space-md) 0 var(--vo-mag-space-lg);
}

.vo-mag-issue__cover-media { grid-area: media; }
.vo-mag-issue__cover-copy  { grid-area: copy; max-width: 900px; }
.vo-mag-issue__number      { grid-area: number; align-self: start; }

.vo-mag-issue__cover-inner--book-lead .vo-mag-issue__cover-book { grid-area: book; }
.vo-mag-issue__cover-inner--book-lead .vo-mag-issue__cover-copy {
	grid-area: copy;
	max-width: 560px;
}

/* Media column: lifestyle feature image on top, magazine cover below.
   When only one image is set, it fills the column. */
.vo-mag-issue__cover-media {
	display: flex;
	flex-direction: column;
	gap: var(--vo-mag-space-lg);
	width: 100%;
}

.vo-mag-issue__feature-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.06);
	border-radius: 2px;
}

.vo-mag-issue__feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vo-mag-issue__cover-book {
	width: 100%;
	display: flex;
	justify-content: center;
}

.vo-mag-issue__cover-book img {
	max-width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35),
	            0 10px 20px -10px rgba(0, 0, 0, 0.25);
}

/* In the book-lead variant, cap the cover-book to a sensible display
   size so the right-hand title column stays readable and the whole
   cover hero fits comfortably in one screen on common desktops
   (1440×900, 1280×800). v0.3.6: 420px wide / 540px tall ceiling. */
.vo-mag-issue__cover-inner--book-lead .vo-mag-issue__cover-book img {
	max-width: min(100%, 420px);
	max-height: 540px;
}

.vo-mag-issue__cover--dark .vo-mag-issue__feature-image {
	background-color: rgba(255, 255, 255, 0.06);
}

/* Masthead — wordmark + edition marker across the top of the cover */
.vo-mag-issue__masthead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vo-mag-space-md);
	padding-bottom: var(--vo-mag-space-md);
	border-bottom: 1px solid currentColor;
	opacity: 1;
}

.vo-mag-issue__cover:not(.vo-mag-issue__cover--dark) .vo-mag-issue__masthead {
	border-bottom-color: rgba(0, 0, 0, 0.15);
}

.vo-mag-issue__cover--dark .vo-mag-issue__masthead {
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

.vo-mag-issue__logo {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

.vo-mag-issue__logo-word {
	font-family: var(--vo-mag-font-display, 'Syne'), 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 36px);
	letter-spacing: -0.02em;
	color: inherit;
}

.vo-mag-issue__cover--dark .vo-mag-issue__logo-word {
	color: var(--vo-mag-accent);
}

.vo-mag-issue__logo-sub {
	font-family: var(--vo-mag-font-meta);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-top: 4px;
	color: inherit;
	opacity: 0.8;
}

/* Cover CTAs — "Read online" + "Get the PDF" */
.vo-mag-issue__cover-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vo-mag-space-md);
	margin-top: var(--vo-mag-space-lg);
}

.vo-mag-issue__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.vo-mag-issue__cta:hover,
.vo-mag-issue__cta:focus-visible {
	transform: translateY(-1px);
}

.vo-mag-issue__cta--primary {
	background-color: var(--vo-mag-text-primary);
	color: #fff;
	border-color: var(--vo-mag-text-primary);
}

.vo-mag-issue__cover--dark .vo-mag-issue__cta--primary {
	background-color: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	border-color: var(--vo-mag-accent);
}

.vo-mag-issue__cta--ghost {
	background-color: transparent;
	color: currentColor;
	border-color: currentColor;
}

.vo-mag-issue__cover--dark .vo-mag-issue__cta--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

.vo-mag-issue__number {
	font-family: var(--vo-mag-font-ui);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(90px, 14vw, 180px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--vo-mag-text-primary);
	display: block;
	margin: 0;
	text-align: right;
}

.vo-mag-issue__cover--dark .vo-mag-issue__number {
	color: var(--vo-mag-accent);
}

.vo-mag-issue__cover-label {
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: currentColor;
	display: inline-block;
	margin-bottom: var(--vo-mag-space-md);
}

.vo-mag-issue__title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: clamp(40px, 6.2vw, 72px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 var(--vo-mag-space-md);
	color: var(--vo-mag-text-primary);
	max-width: 14ch;
}

/* Bulletproof the title text color against theme h1 rules that
   would otherwise paint it light-grey on a yellow cover and make
   the title invisible. Title text stays DARK in both variants —
   yellow cover (dark text on white highlight) and dark cover (dark
   text on yellow highlight). Scoped to .vo-mag for specificity +
   hex + !important matches the pattern used on the article hero. */
.vo-mag .vo-mag-issue__title,
.vo-mag .vo-mag-issue__title .vo-mag-hl,
.vo-mag .vo-mag-issue__title .vo-mag-issue__title-line {
	color: #0A0A0A !important;
}

.vo-mag-issue__title-line {
	display: inline-block;
}

.vo-mag-issue__title-line + .vo-mag-issue__title-line {
	margin-top: 0.15em;
}

.vo-mag-issue__title .vo-mag-hl {
	background-color: var(--vo-mag-accent);
}

/* On yellow-background covers, highlight lines with WHITE so the
   "highlighted block" silhouette still reads. */
.vo-mag-issue__cover:not(.vo-mag-issue__cover--dark) .vo-mag-issue__title .vo-mag-hl {
	background-color: #FFFFFF;
	box-shadow: 0.18em 0 0 #FFFFFF, -0.18em 0 0 #FFFFFF;
}

/* On dark-background covers (Feb), keep the yellow highlight. */
.vo-mag-issue__cover--dark .vo-mag-issue__title .vo-mag-hl {
	background-color: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	box-shadow: 0.18em 0 0 var(--vo-mag-accent), -0.18em 0 0 var(--vo-mag-accent);
}

.vo-mag-issue__tagline {
	font-family: var(--vo-mag-font-ui);
	font-weight: 400;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.5;
	margin: 0;
	max-width: 520px;
	color: inherit;
}

.vo-mag-issue__cover-credit {
	position: absolute;
	right: var(--vo-mag-space-xl);
	bottom: var(--vo-mag-space-md);
	font-family: var(--vo-mag-font-meta);
	font-style: italic;
	font-size: 11px;
	color: inherit;
	opacity: 0.7;
	letter-spacing: 0.04em;
}

.vo-mag-issue__cover-year {
	position: absolute;
	right: var(--vo-mag-space-xl);
	top: var(--vo-mag-space-xl);
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	color: currentColor;
}

.vo-mag-issue__cover--dark .vo-mag-issue__cover-year {
	color: var(--vo-mag-accent);
}

/* ===============================================================
   STICKY-HEADER OVERRIDE (v0.3.5)
   The active vegout-child theme applies `position: sticky; top: 0`
   to every <header> element globally. Our plugin uses <header>
   semantically for cover / TOC / archive masthead / past-head /
   article hero — so they were all sticky-pinning during scroll
   and causing the "weird scrolling" behaviour Justin saw on
   /issue/. Force them back to normal flow. Scoped so we only
   override inside `.vo-mag` ancestors.
   =============================================================== */
.vo-mag-issue__cover,
.vo-mag-issue__toc-head,
.vo-mag-article__hero,
.vo-mag-article__hero--overlay,
.vo-mag-archive__masthead,
.vo-mag-archive__past-head {
	position: relative !important;
	top: auto !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
}

/* ===============================================================
   ARTICLE — ISSUE RIBBON (v0.3.5)
   Small back-to-issue strip at the top of the hero overlay so
   readers landing cold know which magazine issue they're in and
   can step back to the issue page in one click.
   =============================================================== */
.vo-mag-article__issue-ribbon {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55em;
	align-self: flex-start;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.55);
	color: #FFFFFF;
	text-decoration: none;
	font-family: var(--vo-mag-font-meta);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: var(--vo-mag-space-sm);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color 150ms ease, border-color 150ms ease;
	max-width: 100%;
}

.vo-mag-article__issue-ribbon:hover,
.vo-mag-article__issue-ribbon:focus-visible {
	background: rgba(10, 10, 10, 0.75);
	border-color: rgba(255, 255, 255, 0.38);
	color: #FFFFFF;
}

.vo-mag-article__issue-ribbon-marker {
	font-weight: 700;
	color: var(--vo-mag-accent, #FFE300);
	letter-spacing: 0.18em;
}

.vo-mag-article__issue-ribbon-sep {
	opacity: 0.55;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1;
}

.vo-mag-article__issue-ribbon-label {
	opacity: 0.75;
	font-weight: 500;
}

.vo-mag-article__issue-ribbon-title {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--vo-mag-font-ui);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 32ch;
}

/* ===============================================================
   ISSUE — EDITOR'S LETTER
   Figma feb-02: yellow corner tab top-right, huge black H1,
   short yellow bar before emphasized deck, 2-column body with
   page number bottom-right. Name / role byline.
   =============================================================== */

.vo-mag-issue__letter {
	position: relative;
	background: #ffffff;
	padding: 0;
	border-bottom: 1px solid #ececec;
	overflow: hidden;
}

/* Corner tab, top-right */
.vo-mag-issue__letter-tab {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	font-family: var(--vo-mag-font-meta);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	padding: 14px 22px;
	z-index: 2;
	display: inline-block;
}

/* Large page number bottom-right */
.vo-mag-issue__letter-pagenum {
	position: absolute;
	bottom: var(--vo-mag-space-lg);
	right: var(--vo-mag-space-lg);
	font-family: var(--vo-mag-font-display);
	font-weight: 800;
	font-size: clamp(56px, 7vw, 96px);
	line-height: 0.9;
	color: var(--vo-mag-text-primary);
	letter-spacing: -0.04em;
	pointer-events: none;
	z-index: 1;
}

.vo-mag-issue__letter-inner {
	max-width: var(--vo-mag-content-width);
	margin: 0 auto;
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-lg) calc(var(--vo-mag-space-3xl) + 40px);
	position: relative;
}

.vo-mag-issue__letter-headline {
	font-family: var(--vo-mag-font-display);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0 0 var(--vo-mag-space-xl);
	color: var(--vo-mag-text-primary);
	max-width: 14ch;
	text-transform: none;
}

.vo-mag-issue__letter-deck {
	display: flex;
	align-items: flex-start;
	gap: var(--vo-mag-space-md);
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.45;
	color: var(--vo-mag-text-primary);
	margin: 0 0 var(--vo-mag-space-2xl);
	max-width: 62ch;
}

.vo-mag-issue__letter-deck-bar {
	display: inline-block;
	flex-shrink: 0;
	width: 48px;
	height: 6px;
	margin-top: 0.55em;
	background: var(--vo-mag-accent);
}

.vo-mag-issue__letter-deck-text {
	flex: 1;
}

.vo-mag-issue__letter-body {
	font-family: var(--vo-mag-font-body);
	font-size: 15px;
	line-height: 1.72;
	color: var(--vo-mag-text-primary);
	column-count: 2;
	column-gap: var(--vo-mag-space-xl);
	column-rule: 1px solid #ececec;
}

.vo-mag-issue__letter-body p {
	margin: 0 0 var(--vo-mag-space-md);
	break-inside: avoid-column;
}

.vo-mag-issue__letter-body blockquote {
	border-left: var(--vo-mag-bar-width) solid var(--vo-mag-accent);
	padding: var(--vo-mag-space-sm) var(--vo-mag-space-md);
	margin: var(--vo-mag-space-lg) 0;
	font-family: var(--vo-mag-font-ui);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.5;
	color: var(--vo-mag-text-primary);
	font-style: normal;
	break-inside: avoid-column;
}

.vo-mag-issue__letter-body h2,
.vo-mag-issue__letter-body h3 {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	margin: var(--vo-mag-space-lg) 0 var(--vo-mag-space-sm);
	break-after: avoid;
}

.vo-mag-issue__letter-body h2 {
	font-size: 22px;
	line-height: 1.25;
	display: inline;
	padding: 0.06em 0.22em;
	background: var(--vo-mag-accent);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.vo-mag-issue__letter-body img,
.vo-mag-issue__letter-body figure {
	margin: var(--vo-mag-space-lg) 0;
}

/* Byline: Name / Role, single line */
.vo-mag-issue__letter-sig {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.55em;
	margin-top: var(--vo-mag-space-2xl);
	padding-top: var(--vo-mag-space-lg);
	border-top: 1px solid #ececec;
}

.vo-mag-issue__letter-sig-name {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--vo-mag-text-primary);
	text-decoration: none;
}

.vo-mag-issue__letter-sig-name:hover {
	text-decoration: underline;
}

.vo-mag-issue__letter-sig-sep {
	font-family: var(--vo-mag-font-ui);
	font-weight: 400;
	font-size: 15px;
	color: var(--vo-mag-text-meta);
	opacity: 0.6;
}

.vo-mag-issue__letter-sig-role {
	font-family: var(--vo-mag-font-meta);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vo-mag-text-meta);
}

/* ===============================================================
   ISSUE — IN THIS ISSUE (FEATURED + GRID)
   Claude-designed section; Figma doesn't spec a TOC.
   Styled to match the magazine's Inter/Roboto + yellow highlight.
   =============================================================== */

.vo-mag-issue__toc {
	background: var(--vo-mag-bg-soft);
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-lg);
}

.vo-mag-issue__toc-inner {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
}

.vo-mag-issue__toc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vo-mag-space-md);
	margin-bottom: var(--vo-mag-space-2xl);
	padding-bottom: var(--vo-mag-space-lg);
	border-bottom: 1px solid #E5E5E5;
}

.vo-mag-issue__toc-head .vo-mag-eyebrow {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	padding: 4px 8px;
}

.vo-mag-issue__toc-headline {
	font-family: var(--vo-mag-font-meta);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--vo-mag-text-meta);
	margin: 0;
	text-transform: uppercase;
}

/* Featured (lead) article */
.vo-mag-issue__feature {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: var(--vo-mag-space-2xl);
	align-items: center;
	padding: var(--vo-mag-space-xl) 0 var(--vo-mag-space-2xl);
	color: inherit;
	text-decoration: none;
	margin-bottom: var(--vo-mag-space-2xl);
	border-bottom: 1px solid #e5e5e5;
	transition: transform 180ms ease;
}

.vo-mag-issue__feature:hover {
	transform: translateY(-2px);
}

.vo-mag-issue__feature-media {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: #eee;
}

.vo-mag-issue__feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.vo-mag-issue__feature:hover .vo-mag-issue__feature-media img {
	transform: scale(1.03);
}

.vo-mag-issue__feature-copy {
	min-width: 0;
}

.vo-mag-issue__feature-title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.005em;
	margin: var(--vo-mag-space-sm) 0 var(--vo-mag-space-md);
	color: var(--vo-mag-text-primary);
}

.vo-mag-issue__feature-deck {
	font-family: var(--vo-mag-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--vo-mag-text-muted);
	margin: 0 0 var(--vo-mag-space-md);
}

.vo-mag-issue__feature-meta {
	font-family: var(--vo-mag-font-meta);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vo-mag-text-meta);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.vo-mag-issue__feature-meta-author {
	font-weight: 700;
	color: var(--vo-mag-text-primary);
}

/* Grid of remaining articles */
.vo-mag-issue__toc-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--vo-mag-space-2xl) var(--vo-mag-space-xl);
	counter-reset: vomag;
}

.vo-mag-issue__card {
	counter-increment: vomag;
}

.vo-mag-issue__card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.vo-mag-issue__card-media {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
	background: #eee;
	margin-bottom: var(--vo-mag-space-md);
}

.vo-mag-issue__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.vo-mag-issue__card-link:hover .vo-mag-issue__card-media img {
	transform: scale(1.03);
}

.vo-mag-issue__card-media::before {
	content: counter(vomag, decimal-leading-zero);
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--vo-mag-text-primary);
	font-family: var(--vo-mag-font-meta);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
}

.vo-mag-issue__card-copy {
	min-width: 0;
}

.vo-mag-issue__card-title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.002em;
	margin: var(--vo-mag-space-xs) 0 var(--vo-mag-space-sm);
	color: var(--vo-mag-text-primary);
}

.vo-mag-issue__card-deck {
	font-family: var(--vo-mag-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--vo-mag-text-muted);
	margin: 0 0 var(--vo-mag-space-sm);
}

.vo-mag-issue__card-meta {
	font-family: var(--vo-mag-font-meta);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vo-mag-text-meta);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.vo-mag-issue__card-meta-author {
	font-weight: 700;
	color: var(--vo-mag-text-primary);
}

/* Eyebrow used inside issue components — ensure consistent look */
.vo-mag-issue__feature-copy .vo-mag-eyebrow,
.vo-mag-issue__card-copy .vo-mag-eyebrow {
	display: inline-block;
	font-family: var(--vo-mag-font-meta);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vo-mag-accent);
	margin-bottom: var(--vo-mag-space-xs);
}

/* ===============================================================
   ARCHIVE (list of issues)
   =============================================================== */

.vo-mag-archive {
	/* Full-bleed archive: masthead spans page width, sections inside
	   constrain themselves. */
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---- Masthead ------------------------------------------------------ */
.vo-mag-archive__masthead {
	background: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-lg);
}

.vo-mag-archive__masthead-inner {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
	text-align: center;
}

.vo-mag-archive__logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 var(--vo-mag-space-md);
	line-height: 1;
}

.vo-mag-archive__logo-word {
	font-family: var(--vo-mag-font-display, 'Syne'), 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(48px, 6vw, 72px);
	letter-spacing: -0.02em;
	color: var(--vo-mag-text-primary);
}

.vo-mag-archive__logo-sub {
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-top: 6px;
	color: var(--vo-mag-text-primary);
}

/* ---- Featured current issue ---------------------------------------- */
.vo-mag-archive__featured {
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-lg);
	background: #fff;
}

.vo-mag-archive__featured-inner {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--vo-mag-space-2xl);
	align-items: center;
}

.vo-mag-archive__featured-media {
	display: flex;
	flex-direction: column;
	gap: var(--vo-mag-space-lg);
}

.vo-mag-archive__featured-lifestyle {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.vo-mag-archive__featured-lifestyle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vo-mag-archive__featured-cover {
	display: flex;
	justify-content: center;
}

.vo-mag-archive__featured-cover img {
	max-width: 100%;
	max-height: 480px;
	height: auto;
	display: block;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35),
	            0 10px 20px -10px rgba(0, 0, 0, 0.25);
}

.vo-mag-archive__featured-copy {
	max-width: 560px;
}

.vo-mag-archive__featured-marker {
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--vo-mag-text-muted);
	margin: var(--vo-mag-space-md) 0 var(--vo-mag-space-md);
}

.vo-mag-archive__featured-title {
	font-family: var(--vo-mag-font-display, 'Syne'), 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 4.6vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--vo-mag-space-md);
	color: var(--vo-mag-text-primary);
}

.vo-mag-archive__featured-tagline {
	font-family: var(--vo-mag-font-body, 'Charter'), Georgia, serif;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.6;
	color: var(--vo-mag-text-muted);
	margin: 0 0 var(--vo-mag-space-xl);
}

.vo-mag-archive__featured-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vo-mag-space-md);
}

/* ---- Past issues grid ---------------------------------------------- */
.vo-mag-archive__past {
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-lg);
	background: #fafafa;
	max-width: none;
}

.vo-mag-archive__past-head {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto var(--vo-mag-space-2xl);
	text-align: center;
}

.vo-mag-archive__past-title {
	font-family: var(--vo-mag-font-display, 'Syne'), 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: var(--vo-mag-space-sm) 0 0;
	color: var(--vo-mag-text-primary);
}

.vo-mag-archive__grid {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
	list-style: none;
	padding: 0;
	display: grid;
	/* auto-fit (not auto-fill) collapses empty tracks; the hard 320px cap
	   stops a single card from stretching to container width. Centred via
	   justify-content so 1-2 cards sit in the middle of the band. */
	grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
	justify-content: center;
	gap: var(--vo-mag-space-2xl);
}

.vo-mag-archive__past-card {
	/* container */
}

.vo-mag-archive__past-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.vo-mag-archive__past-cover {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: var(--vo-mag-space-md);
	background-color: #ececec;
}

.vo-mag-archive__past-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 260ms ease;
}

.vo-mag-archive__past-link:hover .vo-mag-archive__past-cover img,
.vo-mag-archive__past-link:focus-visible .vo-mag-archive__past-cover img {
	transform: scale(1.03);
}

.vo-mag-archive__past-marker {
	font-family: var(--vo-mag-font-meta);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--vo-mag-text-muted);
	margin: 0 0 6px;
}

.vo-mag-archive__past-card-title {
	font-family: var(--vo-mag-font-display, 'Syne'), 'Inter', sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--vo-mag-text-primary);
}

.vo-mag-archive__past-card-tagline {
	font-family: var(--vo-mag-font-body, 'Charter'), Georgia, serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--vo-mag-text-muted);
	margin: 0;
}

/* ---- Legacy archive (kept for compatibility) ----------------------- */
.vo-mag-archive__header {
	text-align: center;
	margin-bottom: var(--vo-mag-space-3xl);
}

.vo-mag-archive__title {
	font-family: var(--vo-mag-font-ui);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 var(--vo-mag-space-md);
}

.vo-mag-archive__title .vo-mag-hl {
	background: var(--vo-mag-accent);
	padding: 0.06em 0.22em;
}

.vo-mag-archive__lede {
	font-family: var(--vo-mag-font-body);
	font-size: 20px;
	line-height: 32px;
	color: var(--vo-mag-text-muted);
	max-width: 560px;
	margin: 0 auto;
}

.vo-mag-archive__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--vo-mag-space-2xl);
}

.vo-mag-archive__card {
	/* no extra styles, container */
}

.vo-mag-archive__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.vo-mag-archive__cover {
	display: block;
	width: 100%;
	aspect-ratio: 3/4;
	background-size: cover;
	background-position: center;
	margin-bottom: var(--vo-mag-space-md);
}

.vo-mag-archive__card-title {
	font-family: var(--vo-mag-font-display);
	font-weight: 800;
	font-size: 28px;
	line-height: 32px;
	margin: var(--vo-mag-space-sm) 0 var(--vo-mag-space-xs);
	text-transform: uppercase;
}

.vo-mag-archive__card-tagline {
	font-family: var(--vo-mag-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--vo-mag-text-muted);
	margin: 0;
}

.vo-mag-archive__empty {
	text-align: center;
	padding: var(--vo-mag-space-3xl) 0;
	color: var(--vo-mag-text-muted);
}

/* ===============================================================
   MOBILE (≤ 768px)
   =============================================================== */

@media (max-width: 768px) {
	/* Article hero keeps the tall overlay treatment. */
	.vo-mag-article__hero {
		padding: var(--vo-mag-space-2xl) var(--vo-mag-space-md) var(--vo-mag-space-xl);
		min-height: 70vh;
	}

	/* Issue cover: compact mobile padding, no forced min-height.
	   v0.3.6: was 70vh which shoved the book + title below the fold. */
	.vo-mag-issue__cover {
		padding: var(--vo-mag-space-md) var(--vo-mag-space-md) var(--vo-mag-space-lg);
		min-height: 0;
	}

	.vo-mag-article__title {
		font-size: 36px;
		line-height: 40px;
	}

	.vo-mag-article__deck {
		font-size: 17px;
		line-height: 25px;
	}

	.vo-mag-article__body {
		padding: 0 var(--vo-mag-space-md);
		margin-top: var(--vo-mag-space-2xl);
		margin-bottom: var(--vo-mag-space-2xl);
	}

	.vo-mag-article__body > p {
		font-size: 17px;
		line-height: 28px;
	}

	.vo-mag-article__body h2,
	.vo-mag-article__body > .wp-block-heading {
		font-size: 30px;
		line-height: 38px;
	}

	.vo-mag-pullquote__text {
		font-size: 26px;
		line-height: 34px;
	}

	.vo-mag-related__grid {
		grid-template-columns: 1fr;
		gap: var(--vo-mag-space-lg);
	}

	.vo-mag-archive__list {
		grid-template-columns: 1fr 1fr;
		gap: var(--vo-mag-space-xl);
	}

	.vo-mag-archive__masthead {
		padding: var(--vo-mag-space-2xl) var(--vo-mag-space-md);
	}

	.vo-mag-archive__featured,
	.vo-mag-archive__past {
		padding: var(--vo-mag-space-2xl) var(--vo-mag-space-md);
	}

	.vo-mag-archive__featured-inner {
		grid-template-columns: 1fr;
		gap: var(--vo-mag-space-xl);
	}

	.vo-mag-archive__featured-ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.vo-mag-archive__featured-ctas .vo-mag-issue__cta {
		width: 100%;
		justify-content: center;
	}

	.vo-mag-archive__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--vo-mag-space-xl);
	}

	.vo-mag-archive__title {
		font-size: 40px;
	}

	.vo-mag-issue__title {
		font-size: 38px;
	}

	/* (v0.3.6: removed duplicate .vo-mag-issue__cover mobile padding
	   rule — the primary rule at the top of this breakpoint now owns
	   the compact padding + no min-height.) */

	.vo-mag-issue__cover-inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"media"
			"number"
			"copy";
		gap: var(--vo-mag-space-lg);
		padding: var(--vo-mag-space-lg) 0;
	}

	/* v0.3.6 book-lead mobile stack: TITLE first (so it's above the
	   fold), then the cover-book below it, then CTAs after the book.
	   The book is capped at 240px wide so it + title + CTAs all fit
	   in a ~700px mobile viewport below the theme nav bar. */
	.vo-mag-issue__cover-inner--book-lead {
		grid-template-columns: 1fr;
		grid-template-areas:
			"copy"
			"book";
		gap: var(--vo-mag-space-md);
		padding: var(--vo-mag-space-sm) 0 var(--vo-mag-space-sm);
	}

	.vo-mag-issue__cover-inner--book-lead .vo-mag-issue__cover-book img {
		max-width: min(100%, 240px);
		max-height: 320px;
	}

	.vo-mag-issue__cover-inner--book-lead .vo-mag-issue__cover-copy {
		max-width: 100%;
	}

	/* Pull the book a little upward so the fold separating the book
	   and the CTAs feels less heavy. */
	.vo-mag-issue__cover-inner--book-lead .vo-mag-issue__cover-book {
		margin-top: var(--vo-mag-space-sm);
	}

	.vo-mag-issue__masthead {
		align-items: center;
	}

	.vo-mag-issue__logo-word {
		font-size: 28px;
	}

	.vo-mag-issue__cover-ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.vo-mag-issue__cta {
		justify-content: center;
		width: 100%;
	}

	.vo-mag-issue__number {
		text-align: left;
		font-size: 96px;
	}

	.vo-mag-issue__letter-tab {
		padding: 10px 14px;
		font-size: 10px;
		letter-spacing: 0.2em;
	}

	.vo-mag-issue__letter-pagenum {
		bottom: var(--vo-mag-space-md);
		right: var(--vo-mag-space-md);
		font-size: 56px;
	}

	.vo-mag-issue__letter-inner {
		padding: var(--vo-mag-space-2xl) var(--vo-mag-space-md) calc(var(--vo-mag-space-2xl) + 60px);
	}

	.vo-mag-issue__letter-headline {
		font-size: 40px;
		max-width: 100%;
	}

	.vo-mag-issue__letter-deck {
		font-size: 17px;
	}

	.vo-mag-issue__letter-deck-bar {
		width: 32px;
		height: 5px;
	}

	.vo-mag-issue__letter-body {
		column-count: 1;
		column-rule: none;
		font-size: 16px;
		line-height: 1.7;
	}

	.vo-mag-issue__letter-body > p:first-of-type::first-letter {
		font-size: 4.6em;
	}

	.vo-mag-issue__toc {
		padding: var(--vo-mag-space-2xl) var(--vo-mag-space-md);
	}

	.vo-mag-issue__feature {
		grid-template-columns: 1fr;
		gap: var(--vo-mag-space-md);
	}

	.vo-mag-issue__feature-title {
		font-size: 28px;
	}

	.vo-mag-issue__toc-grid {
		grid-template-columns: 1fr;
		gap: var(--vo-mag-space-xl);
	}

	.vo-mag-issue__toc-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--vo-mag-space-xs);
	}

	.vo-mag-article__body .vo-mag-credit-image--wide,
	.vo-mag-article__body .vo-mag-slider {
		width: 100%;
		margin-left: 0;
	}

	/* Image grid collapses to 2-up on tablet, 1-up at phone sizes. */
	.vo-mag-article__body .vo-mag-image-grid,
	.vo-mag-article__body .vo-mag-image-grid--n-3,
	.vo-mag-article__body .vo-mag-image-grid--n-4,
	.vo-mag-article__body .vo-mag-image-grid--n-5,
	.vo-mag-article__body .vo-mag-image-grid--n-6,
	.vo-mag-article__body .vo-mag-image-grid--n-7,
	.vo-mag-article__body .vo-mag-image-grid--n-8,
	.vo-mag-article__body .vo-mag-image-grid--n-9,
	.vo-mag-article__body .vo-mag-image-grid[data-count="10"],
	.vo-mag-article__body .vo-mag-image-grid[data-count="11"],
	.vo-mag-article__body .vo-mag-image-grid[data-count="12"] {
		width: 100%;
		margin-left: 0;
		grid-template-columns: repeat(2, 1fr);
	}

	.vo-mag-author-card {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.vo-mag-archive__list {
		grid-template-columns: 1fr;
	}

	.vo-mag-archive__grid {
		grid-template-columns: 1fr;
	}

	/* On narrow phones, drop every image grid to a single column. */
	.vo-mag-article__body .vo-mag-image-grid {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
   ARTICLE — HERO OVERLAY VARIANT (Figma "Premium Article" v2)
   Title + byline overlay the hero image; each word of the title
   gets its own yellow highlight block.
   =============================================================== */

.vo-mag-article__hero--overlay {
	position: relative;
	padding: 0;
	min-height: clamp(420px, 70vh, 760px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--vo-mag-bg-dark);
	color: var(--vo-mag-text-inverse);
}

.vo-mag-article__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.vo-mag-article__hero-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(10, 10, 10, 0) 0%,
			rgba(10, 10, 10, 0) 40%,
			rgba(10, 10, 10, 0.55) 75%,
			rgba(10, 10, 10, 0.78) 100%);
	z-index: 1;
}

.vo-mag-article__hero--overlay .vo-mag-article__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
	padding: var(--vo-mag-space-2xl) var(--vo-mag-space-xl) var(--vo-mag-space-xl);
	gap: var(--vo-mag-space-md);
}

/* Hero eyebrow pill — bulletproofed the same way as the hero title.
   Theme's global rules for small-caps / meta text were winning and
   dropping the text to near-black on a dark pill. Hex + !important
   guarantees the white reads correctly on the translucent overlay. */
.vo-mag .vo-mag-article__hero--overlay .vo-mag-eyebrow--on-hero,
.vo-mag-eyebrow--on-hero {
	color: #FFFFFF !important;
	background: rgba(10, 10, 10, 0.45) !important;
	padding: 4px 10px;
	letter-spacing: 0.18em;
	align-self: flex-start;
}

/* Hero article title — spec: Inter 400 ~48px on a continuous yellow
   highlight strip. box-decoration-break: clone makes a multi-line title
   wrap as per-line yellow strips rather than one messy blob. Previous
   implementation wrapped each word in its own pill which turned long
   titles into a wall of yellow. One continuous highlight reads as
   editorial marker-pen on long AND short titles.

   Bulletproofed against the theme's global h1 rules (vegout-child
   ships `h1 { color: var(--headline-color) }` plus PT Serif family
   rules) with !important + hex values + increased specificity. */
.vo-mag .vo-mag-article__hero--overlay .vo-mag-article__title {
	font-family: 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: clamp(30px, 4.4vw, 48px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em !important;
	color: #0A0A0A !important;
	margin: 0 0 20px !important;
	display: block !important;
	text-transform: none !important;
	/* No background here — the inner .vo-mag-article__title-hl span
	   carries the yellow so box-decoration-break can clone per line. */
}

/* Continuous yellow highlight that breaks cleanly per wrapped line. */
.vo-mag .vo-mag-article__hero--overlay .vo-mag-article__title .vo-mag-article__title-hl {
	background-color: #FFE300 !important;
	color: #0A0A0A !important;
	padding: 0.08em 0.18em !important;
	line-height: 1.35 !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	text-transform: none !important;
	-webkit-box-decoration-break: clone !important;
	        box-decoration-break: clone !important;
	/* Tiny side-pad via box-shadow so wrapped lines get clean edges
	   on both sides without an awkward gap at the line-break. */
	box-shadow: 0.1em 0 0 #FFE300, -0.1em 0 0 #FFE300 !important;
}

/* Back-compat: if any cached HTML still ships the old per-word spans
   from v<=0.3.2, render them as plain inline text so we don't produce
   a wall of yellow pills. They inherit the title's own styling. */
.vo-mag .vo-mag-article__hero--overlay .vo-mag-article__title .vo-mag-article__title-word {
	display: inline !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
}

.vo-mag-article__hero--overlay .vo-mag-article__deck {
	color: var(--vo-mag-text-inverse);
	font-weight: 500;
	font-size: clamp(16px, 1.6vw, 20px);
	max-width: 60ch;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.vo-mag-article__byline--on-hero {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	padding-top: var(--vo-mag-space-md);
	margin-top: var(--vo-mag-space-md);
	color: var(--vo-mag-text-inverse);
}

.vo-mag-article__byline--on-hero .vo-mag-article__author-name {
	font-family: var(--vo-mag-font-hero-meta);
	font-weight: 700;
	color: var(--vo-mag-text-inverse);
	text-decoration: none;
}

.vo-mag-article__byline--on-hero .vo-mag-article__meta {
	color: rgba(255, 255, 255, 0.85);
}

.vo-mag-article__byline--on-hero .vo-mag-article__avatar {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.vo-mag-article__hero--overlay .vo-mag-article__hero-credit {
	position: absolute;
	right: var(--vo-mag-space-xl);
	bottom: var(--vo-mag-space-md);
	margin: 0;
	padding: 2px 8px;
	background: rgba(10, 10, 10, 0.55);
	color: var(--vo-mag-text-inverse);
	font-style: italic;
	font-size: 11px;
	z-index: 2;
}

/* ===============================================================
   ARTICLE — BODY 2-COLUMN VARIANT (DEPRECATED)
   Figma Example 2 Premium Article (node 19558:3770) actually uses a
   single 640px centered column for body copy on desktop — only the
   pullquotes, sliders, and credit-images break out wider. The
   two-column variant below is kept as a compatibility shim so any
   older saved content with the class applied still renders correctly
   (single column). Do not apply .vo-mag-article__body--two-col in
   new templates.
   =============================================================== */

.vo-mag-article__body--two-col > p,
.vo-mag-article__body--two-col > ul,
.vo-mag-article__body--two-col > ol {
	column-count: 1;
}

/* ===============================================================
   ISSUE — PDF OPT-IN
   Bottom-of-issue "Unlock the {Month} Issue" block. Two-column on
   desktop (cover left, form right); stacks on mobile.
   =============================================================== */

.vo-mag-issue__optin {
	background: #0f0f0f;
	color: #fff;
	padding: var(--vo-mag-space-3xl) var(--vo-mag-space-xl);
	scroll-margin-top: 80px;
}

.vo-mag-issue__optin-inner {
	max-width: var(--vo-mag-wide-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--vo-mag-space-2xl);
	align-items: center;
}

.vo-mag-issue__optin-media {
	display: flex;
	justify-content: center;
}

.vo-mag-issue__optin-media img {
	max-width: 100%;
	max-height: 540px;
	height: auto;
	display: block;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5),
	            0 12px 24px -12px rgba(0, 0, 0, 0.35);
}

.vo-mag-issue__optin-copy {
	max-width: 560px;
}

.vo-mag-issue__optin-copy .vo-mag-eyebrow--dark {
	color: var(--vo-mag-accent);
}

.vo-mag-issue__optin-headline {
	font-family: var(--vo-mag-font-display, 'Syne'), 'Inter', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: var(--vo-mag-space-md) 0 var(--vo-mag-space-md);
	color: #fff;
}

.vo-mag-issue__optin-deck {
	font-family: var(--vo-mag-font-body, 'Charter'), Georgia, serif;
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.6;
	margin: 0 0 var(--vo-mag-space-lg);
	color: rgba(255, 255, 255, 0.82);
}

.vo-mag-issue__optin-benefits {
	list-style: none;
	margin: 0 0 var(--vo-mag-space-xl);
	padding: 0;
	display: grid;
	gap: 10px;
}

.vo-mag-issue__optin-benefits li {
	font-family: var(--vo-mag-font-ui);
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	padding-left: 28px;
	position: relative;
}

.vo-mag-issue__optin-benefits li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 2px;
	background-color: var(--vo-mag-accent);
}

.vo-mag-issue__optin-form {
	/* Kit embed injects its own form. Constrain width so the form
	   doesn't stretch past a readable measure on very wide screens. */
	max-width: 480px;
}

.vo-mag-issue__optin-form .vo-mag-issue__cta--primary {
	background-color: var(--vo-mag-accent);
	color: var(--vo-mag-text-primary);
	border-color: var(--vo-mag-accent);
}

.vo-mag-issue__optin-fallback {
	margin-top: var(--vo-mag-space-md);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

.vo-mag-issue__optin-fallback a {
	color: var(--vo-mag-accent);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.vo-mag-issue__optin {
		padding: var(--vo-mag-space-2xl) var(--vo-mag-space-md);
	}

	.vo-mag-issue__optin-inner {
		grid-template-columns: 1fr;
		gap: var(--vo-mag-space-xl);
	}

	.vo-mag-issue__optin-media {
		order: -1;
	}

	.vo-mag-issue__optin-media img {
		max-height: 360px;
	}
}

/* ===============================================================
   PRINT
   =============================================================== */

@media print {
	.vo-mag-article__hero,
	.vo-mag-article__hero--overlay,
	.vo-mag-issue__cover {
		background: none !important;
		color: #000;
		min-height: 0;
		padding: 0;
	}
	.vo-mag-article__hero-bg,
	.vo-mag-article__hero-scrim {
		display: none;
	}
	.vo-mag-article__title,
	.vo-mag-article__deck,
	.vo-mag-article__author-name,
	.vo-mag-article__meta {
		color: #000;
	}
	.vo-mag-article__byline--on-hero {
		border-top-color: #CCC;
	}
	.vo-mag-related,
	.vo-mag-slider__controls {
		display: none;
	}
}