/* =============================================================================
   Blog article — the template for every post under /blog/<slug>/.

   Ported from the designers' file v4zuHnfQeDWmJsqAyNqiDq, frame 2446:2941
   "Blog nota simple" (1440 wide). Measured off PNG exports — the Figma MCP seat
   is rate-limited (CLAUDE.md) — so display sizes and inter-block gaps are fitted
   to the render, not read from tokens.

   A cream reading page under the DARK theme of the shared header and footer (the
   frame draws both black). That theme is the one Labs and Privacy ship; it is
   replicated here scoped to .page-article rather than shared, so it cannot touch
   /docs — which uses the same byline/share partials but base.html's light chrome.
   Worth extracting to a shared `chrome-dark` modifier now that a third page wants
   it — see pages/privacy.css and pages/labs.css.

   The post body reuses base.css's `.prose` for its element handling (responsive
   iframes, scrolling tables, list indent); everything below overrides the
   container and the Brand 2.0 look on top of it, scoped so nothing leaks to
   /docs.

   THE MOBILE FRAME HAS NOT BEEN HANDED OVER YET. The 767px block below is a
   sensible reduction of the desktop frame (narrower gutter, smaller display
   sizes), not a ported design — replace it when the frame arrives.
   ========================================================================== */

/* The page background is a vertical wash, sand-soft at the very top fading to
   cream (Figma "Blog nota simple", Colors panel: Linear Gradient #B0AA97 →
   #F0EEE9 → #F0EEE9). The stop is in px, not %, so every post shows the same
   fade regardless of length — a % stop would tint a short post entirely and
   barely touch a long one. Below the stop it is flat cream (a gradient's last
   colour extends). Verified against the PNG export. */
.page-article {
	background: linear-gradient(
		180deg,
		var(--color-sand-soft) 0,
		var(--color-cream) 1100px
	);
	color: var(--color-carbon);
}

/* --- Header: the dark theme of the shared component ------------------------ */
/* Same markup and layout as every page; only the theme changes. Black bar with a
   cream ring, the lockup swaps to its cream cut, the hamburger turns cream, and
   the nav links go cream on desktop (on mobile they live in the shared cream
   drop-panel, so they stay dark there). Identical to pages/privacy.css. */
.page-article .site-header__bar {
	background: var(--color-black);
	border: 2px solid var(--color-cream);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}

.page-article .site-logo__mark--dark {
	display: none;
}

.page-article .site-logo__mark--light {
	display: block;
}

.page-article .site-nav__toggle span {
	background: var(--color-cream);
}

@media (min-width: 768px) {
	.page-article .site-nav a,
	.page-article .site-nav__sub-toggle {
		color: var(--color-cream);
	}
	.page-article .site-nav a:hover,
	.page-article .site-nav a[aria-current="page"],
	.page-article .site-nav__sub-toggle:hover,
	.page-article .site-nav__sub-toggle[aria-expanded="true"] {
		color: var(--color-brand);
	}
}

/* --- Footer: the dark theme of the shared component ------------------------ */
/* Same as Privacy's dark footer (divider kept, offices bottom-right beside the
   social icons, social masked orange). */
.page-article .site-footer {
	margin-top: 0;
	background: var(--color-black);
	color: var(--color-cream);
}

.page-article .site-footer__col h2 {
	margin-bottom: 4px;
	font-size: var(--text-md);
	letter-spacing: var(--ls-label);
	color: var(--color-cream);
}

.page-article .site-footer__col a {
	font-size: var(--text-sm);
	color: var(--color-cream-dimmer);
}

.page-article .site-footer__col a:hover {
	color: var(--color-brand);
}

.page-article .site-footer__cols {
	gap: 51px;
}

.page-article .site-footer__col {
	gap: 4px;
}

.page-article .site-footer__divider {
	border-top-color: var(--color-sand);
}

.page-article .site-footer__addr {
	color: var(--color-cream-dimmer);
}

.page-article .site-footer__legacy {
	display: none;
}

.page-article .site-footer__logo--dark {
	display: none;
}

.page-article .site-footer__logo--light {
	display: block;
}

@media (min-width: 768px) {
	.page-article .site-footer__bottom {
		justify-content: flex-end;
		padding-right: 210px;
	}
	.page-article .site-footer__locations {
		margin-right: 0;
	}
}

/* Social icons: the source SVGs are black, invisible on black — mask them in
   brand orange (the frame's colour), the technique the mobile footer uses. */
.page-article .site-footer__social a {
	width: 22px;
	height: 22px;
	background-color: var(--color-brand);
	-webkit-mask-image: var(--icon);
	mask-image: var(--icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 22px 22px;
	mask-size: 22px 22px;
}

.page-article .site-footer__social img {
	display: none;
}

/* --- The article shell ---------------------------------------------------- */
/* Two centred columns: the reading column (back link, category, title, byline,
   hero, body, share) at 800, and the subscribe band wider at 1088, both as the
   frame draws them. 70px below the header bar, and the subscribe band owns the
   gap down to the footer. */
.article {
	--article-col: 800px;
	/* The gutter either side of the reading column, which is also the width of the
	   decorative grid panel. max() keeps it equal to the real gutter once the
	   column stops growing (below ~960 the column shrinks and the gutter is the
	   page gutter instead). */
	--article-gutter: max(
		var(--page-gutter),
		calc((100% - var(--article-col)) / 2)
	);
	position: relative;
	padding-top: 70px;
	padding-bottom: 100px;
}

/* The two lattice panels the frame draws in the side margins — one per gutter,
   overflowing the page edge, top of the page only.

   It reuses the home page's lattice geometry (a rounded square filling the whole
   tile, rx16, no inset) so adjacent tiles share their edges and the rounded
   corners leave a four-petal gap at each junction — the frame's look. The only
   change from the home tile is the stroke colour, sand-pale rather than the
   home's dark grid, hence a blog copy of it.

   The panel stops 120px short of the reading column (frame), and it fades out on
   the SAME ramp as the page gradient — opaque at the top, gone by the 1100px
   where the wash reaches cream — via the mask. max(0px, …) so the panel simply
   vanishes once the gutter is narrower than that inset (below ~1040px viewport).
   Content is raised above it below. */
.article::before,
.article::after {
	content: "";
	position: absolute;
	/* Start at the very top of the page, behind the floating header, not at the
	   top of .article (which sits below the header's reserved space). The header
	   bar paints over it. */
	top: calc(-1 * var(--header-offset));
	width: max(0px, calc(var(--article-gutter) - 120px));
	height: 1100px;
	background: url("/assets/media/blog/grid-tile.svg") repeat;
	background-size: var(--grid-tile) var(--grid-tile);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
	mask-image: linear-gradient(to bottom, #000, transparent);
	pointer-events: none;
	z-index: 0;
}

/* Anchor each panel's tiling to its INNER edge (the one nearest the reading
   column), so the column of tiles closest to the content is always whole and the
   partial tile / overflow falls at the outer page edge instead. */
.article::before {
	left: 0;
	background-position: right top;
}

.article::after {
	right: 0;
	background-position: left top;
}

/* Content sits above the lattice. */
.article__inner,
.article__subscribe {
	position: relative;
	z-index: 1;
}

.article__inner {
	width: min(var(--article-col), calc(100% - 2 * var(--page-gutter)));
	margin-inline: auto;
}

/* --- Back to blog --------------------------------------------------------- */
.article__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: 400;
	color: var(--color-carbon);
	text-decoration: none;
}

/* A solid left-pointing chevron drawn with borders (the frame's filled triangle,
   not a thin arrow glyph), sized to the text and in the same carbon. */
.article__back-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 12px 8px 0;
	border-color: transparent var(--color-carbon) transparent transparent;
}

/* Designer comment: no colour change on hover — the phrase just underlines and
   the pointer appears (an <a> gives the pointer for free). The arrow stays clean. */
.article__back:hover .article__back-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Category pills ------------------------------------------------------- */
/* Grey chips. Empty today (categories are unassigned — see the layout comment),
   so the whole block is absent until the editorial pass lands. */
.article__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-8) 0 0;
}

.article__cat {
	padding: 6px 14px;
	background: var(--color-sand-pale);
	border-radius: var(--radius-pill);
	font-family: var(--font-label);
	font-size: var(--text-4xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-carbon-soft);
}

/* --- Title ---------------------------------------------------------------- */
.article__title {
	margin: var(--space-6) 0 0;
	font: 700 var(--text-display-blog) / 1.1 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-carbon);
}

/* --- Byline: recolour the neutral component for the cream page ------------- */
/* byline.css paints with the semantic ink palette (a cool blue-grey); on this
   warm page the name goes carbon and the meta line goes sand. The monogram keeps
   its brand-subtle fill. */
.page-article .byline {
	margin-top: var(--space-6);
}

.page-article .byline__who {
	color: var(--color-carbon);
}

.page-article .byline__meta {
	color: var(--color-sand);
}

/* --- Hero ----------------------------------------------------------------- */
/* Full reading-column width. Its own ratio (covers are banner-shaped and carry
   baked-in titles — base.css explains why they are never cropped). 20px is the
   frame's measured corner. */
.article__hero {
	display: block;
	width: 100%;
	height: auto;
	margin-top: var(--space-8);
	border-radius: 20px;
	background: var(--color-sand-pale);
}

/* Cropped to the banner shape the migrated covers settle on: the shared fallback,
   and any post with `heroCrop: true` — a card-shaped (1.6:1) cover drawn for
   the listing, a text-free photo, so the crop cuts no words. Never set the flag
   on a cover with a baked-in title. */
.article__hero--fallback,
.article__hero--crop {
	aspect-ratio: 5 / 2;
	object-fit: cover;
}

/* --- The post body -------------------------------------------------------- */
/* Neutralise base `.prose`'s own column (max-width / centring / padding): the
   body already sits inside .article__inner, which owns the width. */
.page-article .article__body {
	max-width: none;
	margin: 0;
	padding: 0;
	margin-top: var(--space-12);
}

.page-article .article__body p {
	margin: 0 0 var(--space-6);
	font: var(--body-l);
	color: var(--color-carbon);
	text-align: justify;
}

/* Headings within the post. base.css gives h2 a top margin only; size and colour
   are set here. */
.page-article .article__body h2 {
	margin: var(--space-12) 0 var(--space-4);
	font: 700 var(--text-display-s) / 1.15 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-carbon);
}

.page-article .article__body h3 {
	margin: var(--space-8) 0 var(--space-3);
	font: 700 var(--text-display-xs) / 1.2 var(--font-sans);
	letter-spacing: var(--ls-display);
	color: var(--color-carbon);
}

.page-article .article__body h4 {
	margin: var(--space-6) 0 var(--space-2);
	font: 700 var(--text-lg) / 1.3 var(--font-sans);
	color: var(--color-carbon);
}

/* Links: brand orange, bold and underlined — the frame's treatment for in-body
   links, distinct from the plain body run around them. */
.page-article .article__body a {
	color: var(--color-orange);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Designer comment: on hover the link turns black (keeping bold + underline) and
   the cursor becomes the pointer an <a> already gives. */
.page-article .article__body a:hover {
	color: var(--color-black);
}

/* Emphasis stays in the body colour; bold just goes heavier. */
.page-article .article__body strong,
.page-article .article__body b {
	font-weight: 700;
	color: var(--color-carbon);
}

/* Lists inherit the body font and colour. */
.page-article .article__body ul,
.page-article .article__body ol {
	margin: 0 0 var(--space-6);
	color: var(--color-carbon);
}

.page-article .article__body li {
	font: var(--body-l);
	margin-bottom: var(--space-4);
}

/* Unordered lists carry the frame's orange right-pointing triangle marker
   (drawn with borders so it is one token and no extra file), replacing the
   default bullet. The bold lead-in each item opens with is authored as
   `**...**` and picks up the carbon strong style. Ordered lists keep numbers. */
.page-article .article__body ul {
	list-style: none;
	padding-left: 0;
}

.page-article .article__body ul li {
	position: relative;
	padding-left: 1.7em;
}

.page-article .article__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--color-orange);
}

/* In-body images the post author places in the markdown. Same rounded corner as
   the hero; centred with a little breathing room. */
.page-article .article__body img {
	display: block;
	width: 100%;
	height: auto;
	margin: var(--space-8) 0;
	border-radius: var(--radius-lg);
}

/* Blockquote → the orange highlight band the frame draws (only 5 of the 108
   posts use one). A filled brand block with cream text, centred, a soft shadow
   and a rounded corner — the frame's pull-quote treatment.

   The quote text is set on the blockquote itself so it applies however the
   WordPress export wrapped it — bare text, a <p>, or (as several posts do) an
   <h6>. The child reset below then pulls any such wrapper back to the band's own
   size and colour, overriding the heading/paragraph rules above. */
.page-article .article__body blockquote {
	margin: 75px 0; /* frame: 75px clear of the content above and below */
	padding: var(--space-8) var(--space-12);
	/* Not flat orange — the frame fills it with a vertical gradient, bright orange
	   at the top to the deep orange at the bottom (Figma stops #FF5100 → #CD4100,
	   which is --color-orange-deep to within a couple of imperceptible units). */
	background: linear-gradient(
		180deg,
		var(--color-orange),
		var(--color-orange-deep)
	);
	border-radius: var(--radius-panel);
	box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
	color: var(--color-cream);
	font: 700 var(--text-display-xs) / 1.4 var(--font-sans);
	letter-spacing: var(--ls-display);
	text-align: center;
}

/* Whatever the export used to hold the quote text inherits the band's type and
   loses its own size, colour, margins and alignment. */
.page-article .article__body blockquote :is(p, h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: inherit;
}

.page-article .article__body blockquote :is(p, h1, h2, h3, h4, h5, h6) + :is(p, h1, h2, h3, h4, h5, h6) {
	margin-top: var(--space-4);
}

/* A link inside the orange band stays cream, underlined. */
.page-article .article__body blockquote a {
	color: var(--color-cream);
}

/* --- Share row: reuse the component, restyle compact for this frame -------- */
/* The frame draws a minimal "SHARE" label with X and LinkedIn only. The shared
   component (share.html) carries X, LinkedIn, Facebook and a copy-link button —
   kept, because they cost nothing at runtime and the extra networks are a real
   improvement over the frame; only the look is brought in line here. */
.page-article .share {
	margin-top: var(--space-16);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-sand-pale);
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.page-article .share__heading {
	margin: 0;
	font-family: var(--font-label);
	font-size: var(--text-md);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-sand);
}

.page-article .share__list {
	display: flex;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The frame draws only X and LinkedIn. Facebook and the copy-link button stay in
   the shared component (they cost nothing and are a real improvement over the old
   theme) but are hidden here to match the design — deliberately, not deleted, so
   removing this one rule brings them back if the designers want them. Also
   overrides share.js's reveal of the copy item. */
.page-article .share__item:nth-child(n + 3) {
	display: none !important;
}

.page-article .share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--color-black);
	border: none;
	border-radius: 12px; /* rounded square, as the frame draws the share chips */
	color: var(--color-cream);
	cursor: pointer;
	transition: background 0.15s ease;
}

.page-article .share__link:hover {
	background: var(--color-orange);
	color: var(--color-ink-on-orange);
}

.page-article .share__icon {
	width: 18px;
	height: 18px;
}

/* Icon-only chips: the network name (and the copy button's status label) is for
   assistive tech, not the eye. The copy label keeps role="status", so a
   successful copy is still announced though it is not drawn. */
.page-article .share__link span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Subscribe band ------------------------------------------------------- */
/* The shared band, centred at its own 1088 width. 85px above it (matching the
   listing) and the article's own padding below it down to the footer. */
.article__subscribe {
	width: min(1088px, calc(100% - 2 * var(--page-gutter)));
	margin: 85px auto 0;
}

/* --- Mobile (frame not yet handed over — a reduction, not a port) ---------- */
@media (max-width: 767px) {
	.article {
		padding-top: 50px;
		padding-bottom: 60px;
	}
	/* The side lattice needs a real gutter to live in; below 768 there is none,
	   so it is dropped (the mobile frame is a freestyle anyway). */
	.article::before,
	.article::after {
		display: none;
	}
	.article__inner {
		width: calc(100% - 2 * var(--page-gutter-sm));
	}
	.article__title {
		font: 700 var(--text-display-s) / 1.15 var(--font-sans); /* 32 */
		letter-spacing: var(--ls-display);
	}
	.page-article .article__body p,
	.page-article .article__body li {
		font: 400 var(--text-base) / 1.6 var(--font-sans); /* 16 */
	}
	/* Left-aligned rather than justified below 768: justify opens ugly rivers of
	   whitespace in a ~335px column. Desktop keeps the frame's justification. */
	.page-article .article__body p {
		text-align: left;
	}
	.page-article .article__body h2 {
		font-size: var(--text-display-xs); /* 24 */
	}
	.page-article .article__body h3 {
		font-size: var(--text-lg); /* 20 */
	}
	.page-article .article__body blockquote {
		padding: var(--space-6) var(--space-8);
		font-size: var(--text-lg); /* 20 — set on the band so the h6/p wrapper inherits it */
	}
	/* Share wraps under its label on a narrow screen. */
	.page-article .share {
		flex-wrap: wrap;
		gap: var(--space-4);
	}
	.article__subscribe {
		width: calc(100% - 2 * var(--page-gutter-sm));
		margin-top: 60px;
	}
	/* The mobile frame's footer has no social band on the other ported pages;
	   the article frame keeps the shared footer, so nothing is hidden here. */
}