/*
 * Guester Weekly, the release notes surface.
 *
 * The layout is transcribed from diabrowser.com/release-notes/1-5-0-meet-me-in-dia,
 * measurement for measurement. One thing has to be said before any number below
 * makes sense: that site runs `html { font-size: 62.5% }`, a 10px root, so every
 * Tailwind step in its markup is a literal pixel: `text-81` is 81px, `rounded-12`
 * is 12px, `-tracking-4` is -0.04em. Our root is 16px, so everything here is
 * written in absolute pixels and reads the same on the screen.
 *
 * Breakpoints are the reference's own: 800 / 1000 / 1100 / 1200, mobile first.
 *
 * THE ONE DEPARTURE
 *
 * The reference sets its display face in Exposure VAR, which is licensed. Ours is
 * Fraunces, already on the server. Its supporting faces map the same way: ABC
 * Oracle -> Inter Tight, Quadrant Text Mono and ABC Favorit Mono -> Geist Mono.
 * Nothing of theirs is copied; only the measurements are.
 *
 * THE PALETTE IS DELIBERATELY OFF-SYSTEM
 *
 * A release notes issue is asked to look like the reference, not like the rest of
 * guester.co, so this page dresses in that page's own colours: a near-white ground,
 * true-white cards, black-alpha ink, and the blue-to-chartreuse wash along the
 * bottom edge. They live in one block below and nowhere else. `check-design` will
 * flag them as off-palette; that is the correct reading and the intended trade.
 *
 * HOW THE MASTHEAD RETIRES
 *
 * One number drives it: --grn-p, 0 at the top of the document and 1 once you have
 * scrolled past the nameplate. The wordmark scales to nothing from its top edge,
 * the metadata rail rides up into its place, and an opaque bar grows behind them
 * so the article passes underneath without ever showing through. The script sets
 * --grn-p; a CSS scroll timeline sets it when the script is absent; and when
 * neither is available the nameplate simply stops being fixed and scrolls away
 * like ordinary type, which is the honest fallback.
 */

@property --grn-p {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@keyframes grn-progress {
	to { --grn-p: 1; }
}

/* No script: the scroll timeline drives the same number, so the nameplate still
   retires. Chrome, Edge and Safari 26 honour this; Firefox does not, and falls
   through to the @supports block at the end of this file. */
@supports (animation-timeline: scroll()) {
	html:not(.grn-js) {
		animation: grn-progress linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 140px;
	}
}

/* ------------------------------------------------------------------ ground */

.grn-page {
	/* The reference's palette. See the note at the top of this file. */
	--grn-paper: #f7f7f7;
	--grn-white: #ffffff;
	--grn-button: #252525;
	--grn-wash: linear-gradient(0deg, #8fc4ef 0%, rgba(143, 202, 239, .85) 50%, rgba(240, 254, 197, 0) 100%);
	--grn-glass: rgba(235, 235, 235, .32);

	/* Ink is one colour at many strengths, exactly as the reference uses it. */
	--grn-ink: #000000;
	--grn-ink-80: rgba(0, 0, 0, .8);
	--grn-ink-60: rgba(0, 0, 0, .6);
	--grn-ink-50: rgba(0, 0, 0, .5);
	--grn-ink-20: rgba(0, 0, 0, .2);
	--grn-ink-10: rgba(0, 0, 0, .1);
	--grn-ink-08: rgba(0, 0, 0, .08);

	--grn-ease: cubic-bezier(.87, 0, .13, 1);
	--grn-shadow-asset: 0 4.6px 27.6px 0 rgba(0, 0, 0, .08), 0 0 2.3px 0 rgba(0, 0, 0, .25);
	--grn-shadow-card: 0 4px 32px 0 rgba(0, 0, 0, .06);
	--grn-shadow-banner: 0 1px 2px 0 rgba(0, 0, 0, .25);

	--grn-serif: var(--font-serif);
	--grn-sans: var(--font-body-face);
	--grn-mono: var(--font-geist-mono), ui-monospace, monospace;

	/* Set once here, read by every fixed piece of the masthead. */
	--grn-fade: calc(1 - var(--grn-p));

	background: var(--grn-paper);
	color: var(--grn-ink);
	font-family: var(--grn-sans);
	overflow-x: clip;
}

.grn-page ::selection {
	background: rgba(143, 202, 239, .55);
}

/* The reference's twelve-column bed: 20px gutters, 10px of edge padding. */
.grn-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 20px;
	padding-inline: 10px;
}

/* Deliberately no height here: an explicit height on .grn-showcase-avatar is a
   class selector and would lose to `.grn-page img`. Each asset sets its own. */
.grn-page img {
	display: block;
	max-width: 100%;
}

/* ------------------------------------------------------------------ banner */

@keyframes grn-banner-in {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: none; }
}

/* Above 1100 the banner hangs off the masthead rule instead of sitting in the
   middle of the phone header, so it arrives from behind it. */
@keyframes grn-banner-drop {
	from { opacity: 0; transform: translateY(-100%); }
	to { opacity: 1; transform: none; }
}

.grn-banner {
	animation: grn-banner-in .5s var(--grn-ease) .35s both;
	position: fixed;
	top: 185px;
	left: 7px;
	right: 7px;
	max-width: 400px;
	margin-inline: auto;
	z-index: 2;
}

.grn-banner-inner {
	display: flex;
	align-items: center;
	column-gap: 32px;
	padding: 16px 12px 12px 24px;
	border: 1px solid rgba(0, 0, 0, .02);
	border-radius: 12px;
	background: var(--grn-glass);
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	box-shadow: var(--grn-shadow-banner);
}

.grn-banner-copy {
	margin: 0;
	max-width: 200px;
	text-wrap: balance;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -0.32px;
	color: var(--grn-ink-80);
}

.grn-banner-cta {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 8px 6px 6px;
	border-radius: 8px;
	background: var(--grn-button);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16);
	text-decoration: none;
}

.grn-banner-mark {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 6px;
	background: var(--grn-white);
}

.grn-banner-mark svg { width: 20px; height: 20px; }

.grn-banner-label {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.25;
	letter-spacing: -0.28px;
	color: var(--grn-white);
}

.grn-banner-arrow {
	display: inline-flex;
	transition: transform .2s ease-out;
}

.grn-banner-cta:hover .grn-banner-arrow { transform: translateX(2px); }

/* ------------------------------------------------------- masking bars */

/* Opaque, the colour of the ground, growing from its top edge as you scroll.
   This is what the article slides behind. */
.grn-scrim {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 150px;
	background: var(--grn-paper);
	transform-origin: top;
	transform: scaleY(var(--grn-p));
	pointer-events: none;
	z-index: 2;
}

/* The hairline the scrim leaves behind, only once the scrim is there to carry it. */
.grn-scrim-rule {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--grn-ink-20);
	transform: translateY(150px);
	opacity: var(--grn-p);
	pointer-events: none;
	z-index: 2;
}

/* -------------------------------------------------------------- metadata */

/* Under 1100 the rail sits in the flow at the very top and marquees, because the
   four readouts do not fit a phone. */
.grn-meta {
	position: relative;
	z-index: 3;
	height: 50px;
	border-bottom: 1px solid var(--grn-ink-20);
	background: var(--grn-paper);
	color: var(--grn-ink-50);
	overflow: hidden;
}

.grn-meta-track {
	display: flex;
	flex-direction: row;
	width: max-content;
	animation: grn-marquee 34s linear infinite;
}

@keyframes grn-marquee {
	to { transform: translateX(-33.3333%); }
}

.grn-meta-list {
	display: flex;
	align-items: center;
	column-gap: 32px;
	padding: 0 32px 0 0;
	margin: 0;
	height: 50px;
	list-style: none;
	flex-shrink: 0;
}

.grn-meta-list > li {
	display: flex;
	align-items: center;
	column-gap: 10px;
	height: 20px;
	font-size: 12px;
	line-height: 17px;
	white-space: nowrap;
}

.grn-meta-list svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* The desktop rail is fixed, starts 60px down so the nameplate has the band to
   itself, and rides up to the top edge as --grn-p goes to 1. */
.grn-meta-fixed { display: none; }

/* ---------------------------------------------------------------- odometer */

.grn-odo {
	display: inline-flex;
	align-items: center;
	gap: 0;
	vertical-align: middle;
}

.grn-odo-cell {
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding-inline: 4px;
	border: 1px solid currentcolor;
	border-radius: 999px;
	overflow: hidden;
	font-family: var(--grn-mono);
	font-size: 12px;
	line-height: 15px;
	font-variant-numeric: tabular-nums;
}

.grn-odo-window {
	position: relative;
	display: inline-flex;
	width: 8px;
	height: 18px;
	overflow: hidden;
	border-radius: 999px;
}

/* Two full turns of 0-9, offset by --grn-d, so the right digit is showing with
   no script at all. The script only ever rolls it there from zero. */
.grn-odo-strip {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	transform: translateY(calc(var(--grn-d, 0) * -18px));
}

.grn-odo-strip > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 18px;
	line-height: 18px;
	text-align: center;
	flex-shrink: 0;
}

.grn-odo-sep {
	padding-inline: 2px;
	font-family: var(--grn-mono);
	font-size: 12px;
	line-height: 18px;
}

/* --------------------------------------------------------------- wordmark */

.grn-wordmark {
	position: fixed;
	top: 20px;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
}

.grn-wordmark-type {
	margin: 30px 0 0;
	text-align: center;
	font-family: var(--grn-serif);
	font-weight: 600;
	font-size: min(58px, 9.5vw);
	line-height: 1.64;
	letter-spacing: -0.04em;
}

.grn-wordmark-type > span {
	display: inline-block;
	transform-origin: top;
	transform: scaleY(var(--grn-fade));
	opacity: var(--grn-fade);
}

.grn-wordmark-type > span + span { margin-left: 0.3em; }

.grn-sub {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	color: var(--grn-ink);
	opacity: var(--grn-fade);
}

.grn-sub p {
	margin: 0;
	font-family: var(--grn-serif);
	font-weight: 550;
	font-style: italic;
	font-size: 16px;
	line-height: 23px;
}

.grn-sub svg {
	width: 20px;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------- wash */

.grn-wash {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	background-image: var(--grn-wash);
	pointer-events: none;
	z-index: 0;
}

/* ------------------------------------------------------------------ title */

.grn-head {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1400px;
	margin: 220px auto 100px;
	padding-top: 50px;
}

.grn-title {
	margin: 0 auto;
	max-width: 30ch;
	text-align: center;
	font-family: var(--grn-serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -0.04em;
}

/* --------------------------------------------------------- body components */

.grn-body {
	position: relative;
	z-index: 1;
}

/* paragraph */
.grn-b-paragraph {
	padding-top: 4px;
	padding-bottom: 10px;
}

.grn-measure {
	grid-column: 1 / span 12;
}

.grn-prose {
	font-family: var(--grn-serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 32px;
}

.grn-prose p { margin: 0 0 8px; }
.grn-prose p:last-child { margin-bottom: 0; }

.grn-prose a {
	width: fit-content;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: currentcolor;
	transition: text-decoration-color .25s cubic-bezier(.77, 0, .175, 1);
}

.grn-prose a:hover,
.grn-prose a:focus { text-decoration-color: transparent; }

/* textBlock */
.grn-b-textblock {
	padding-top: 4px;
	padding-bottom: 10px;
}

.grn-b-textblock .grn-measure {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

/* header */
.grn-b-header {
	padding-top: 32px;
}

.grn-b-header .grn-measure {
	text-align: center;
	font-family: var(--grn-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 30px;
}

.grn-b-header p { margin: 0; }

/* title */
.grn-b-title .grn-measure {
	text-align: center;
	line-height: 1.2;
	margin-inline: auto;
}

.grn-b-title h2,
.grn-b-title p { margin: 0; }

.grn-b-title--large {
	padding-top: 20px;
	padding-bottom: 10px;
}

.grn-b-title--large .grn-measure {
	font-family: var(--grn-sans);
	font-weight: 300;
	font-size: 40px;
	letter-spacing: -0.04em;
}

.grn-b-title--fun {
	padding-top: 40px;
	padding-bottom: 10px;
}

.grn-b-title--fun .grn-measure {
	max-width: 600px;
	font-family: var(--grn-serif);
	font-weight: 600;
	font-size: 45px;
	letter-spacing: -0.01em;
}

.grn-b-title--normal {
	padding-top: 30px;
}

.grn-b-title--normal .grn-measure {
	font-family: var(--grn-sans);
	font-weight: 300;
	font-size: 36px;
	letter-spacing: -0.04em;
}

/* wideAsset */
.grn-b-asset {
	padding-block: 20px;
}

.grn-b-asset figure { margin: 0; }

.grn-b-asset img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: var(--grn-shadow-asset);
}

.grn-b-asset figcaption {
	margin-top: 16px;
	padding-inline: 12px;
	font-family: var(--grn-mono);
	font-size: 14px;
	line-height: 21px;
	color: var(--grn-ink-60);
	text-align: center;
}

/* list */
.grn-b-list {
	padding-top: 40px;
	padding-bottom: 60px;
}

.grn-b-list .grn-measure {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
}

.grn-b-list ol {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.grn-b-list li {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

.grn-b-list h3 {
	margin: 0;
	font-family: var(--grn-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 30px;
}

.grn-b-list p {
	margin: 0;
	font-size: 16px;
	line-height: 23px;
}

.grn-b-list img {
	width: 100%;
	height: auto;
	border: 6px solid var(--grn-white);
	border-radius: 14px;
	box-shadow: var(--grn-shadow-asset);
}

/* mediaShowcase */
.grn-b-showcase {
	padding-top: 20px;
	padding-bottom: 40px;
}

.grn-showcase-inner {
	grid-column: 1 / span 12;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 24px;
	align-items: center;
}

.grn-showcase-side {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

.grn-showcase-title {
	margin: 0;
	font-family: var(--grn-serif);
	font-weight: 700;
	font-size: 30px;
	line-height: 27px;
	letter-spacing: -0.03em;
}

.grn-showcase-by {
	display: flex;
	align-items: center;
	gap: 12px;
}

.grn-showcase-avatar {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 999px;
	border: 1px solid var(--grn-ink-20);
	object-fit: cover;
	background: var(--grn-white);
}

.grn-showcase-name {
	margin: 0;
	font-family: var(--grn-mono);
	font-size: 12px;
	line-height: 16px;
}

.grn-showcase-role {
	margin: 0;
	font-family: var(--grn-sans);
	font-weight: 500;
	font-size: 12px;
	line-height: 17px;
	color: var(--grn-ink-60);
}

.grn-showcase-media img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	border: 6px solid var(--grn-white);
	border-radius: 14px;
	box-shadow: var(--grn-shadow-asset);
}

/* -------------------------------------------------------------- narrator */

.grn-narrator {
	position: fixed;
	right: 8px;
	bottom: 12px;
	z-index: 2;
}

.grn-narrator-arc {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	z-index: 20;
	pointer-events: none;
}

.grn-narrator-arc svg { width: 100%; height: auto; overflow: visible; }
.grn-narrator-arc text { font-family: var(--grn-sans); font-size: 14px; font-weight: 400; fill: currentcolor; }
.grn-narrator-arc tspan { opacity: .6; }

.grn-narrator-frame {
	position: relative;
	width: 150px;
	height: 150px;
	aspect-ratio: 1;
}

.grn-narrator-frame img,
.grn-narrator-frame video {
	width: 150px;
	height: 150px;
	border-radius: 999px;
	object-fit: cover;
	aspect-ratio: 1;
}

.grn-narrator-ring {
	position: absolute;
	left: -5px;
	top: -5px;
	width: 160px;
	z-index: 1;
	pointer-events: none;
}

.grn-narrator-ring svg { width: 100%; height: 100%; }

.grn-narrator-button {
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 35px;
	min-width: 82px;
	padding-inline: 16px;
	border: 0;
	border-radius: 24px;
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	cursor: pointer;
}

.grn-narrator-button svg { width: 17px; height: 17px; }

.grn-narrator-time {
	margin: 0;
	font-family: var(--grn-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 35px;
	color: var(--grn-ink-60);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- past issues */

.grn-past {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin-inline: auto;
	padding-top: 60px;
	padding-bottom: 60px;
}

.grn-past-heading {
	grid-column: 1 / span 12;
	margin: 0;
	text-align: center;
	font-family: var(--grn-serif);
	font-weight: 600;
	font-size: 36px;
	line-height: 36px;
	letter-spacing: -0.04em;
}

.grn-past-grid {
	grid-column: 1 / span 12;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.grn-card {
	display: flex;
	flex-direction: column;
	padding: 15px 15px 0;
	aspect-ratio: 350 / 226;
	border: 1px solid var(--grn-ink-10);
	border-radius: 12px;
	background: var(--grn-white);
	box-shadow: var(--grn-shadow-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: opacity .2s var(--grn-ease), transform .2s var(--grn-ease);
}

.grn-card:hover { opacity: .8; }
.grn-card:active { transform: scale(.98); }

.grn-card-meta {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	column-gap: 12px;
	font-family: var(--grn-mono);
	font-size: 12px;
	line-height: 17px;
}

.grn-card-dot {
	width: 2px;
	height: 2px;
	flex-shrink: 0;
	background: #111111;
	opacity: .2;
}

.grn-card-title {
	margin: 12px 0 0;
	text-align: center;
	font-family: var(--grn-serif);
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
}

.grn-card-art {
	margin-top: 20px;
	overflow: hidden;
}

.grn-card-art img {
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}

.grn-card-art-empty {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: var(--grn-ink-08);
}

.grn-past-all {
	grid-column: 1 / span 12;
	display: flex;
	justify-content: center;
	margin: 40px 0 0;
}

.grn-all-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding-inline: 24px;
	border-radius: 40px;
	background: rgba(0, 0, 0, .08);
	color: var(--grn-ink);
	font-family: var(--grn-sans);
	font-size: 14px;
	line-height: 40px;
	text-decoration: none;
	transition: background-color .15s var(--grn-ease), color .15s var(--grn-ease);
}

.grn-all-link:hover {
	background: var(--grn-ink);
	color: var(--grn-white);
}

.grn-empty {
	grid-column: 1 / span 12;
	margin-top: 40px;
	text-align: center;
	font-family: var(--grn-serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 32px;
	color: var(--grn-ink-60);
}

.grn-empty p { margin: 0; }

/* --------------------------------------------------------------- archive */

.grn-archive-head {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 220px auto 0;
	padding-top: 50px;
	text-align: center;
}

.grn-archive-sub {
	margin: 20px auto 0;
	max-width: 46ch;
	font-family: var(--grn-serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 32px;
	color: var(--grn-ink-60);
}

/* ============================================================ 800 and up */

@media (min-width: 800px) {
	.grn-title { font-size: 50px; }

	.grn-measure {
		grid-column: 3 / span 8;
	}

	.grn-b-header { padding-top: 0; }

	.grn-b-header .grn-measure {
		font-size: 16px;
		line-height: 24px;
	}

	.grn-b-title--large .grn-measure { font-size: 50px; }

	.grn-b-asset .grn-measure {
		grid-column: 2 / span 10;
	}

	.grn-showcase-inner {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}

	.grn-showcase-side { grid-column: 1 / span 4; }
	.grn-showcase-media { grid-column: 5 / span 6; }
	.grn-showcase-media img { max-height: 500px; }

	.grn-past {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.grn-past-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.grn-card { padding-top: 40px; }
}

/* =========================================================== 1000 and up */

@media (min-width: 1000px) {
	.grn-measure {
		grid-column: 4 / span 6;
	}

	.grn-b-title--normal .grn-measure { max-width: 20ch; }

	.grn-b-list {
		padding-block: 60px;
	}

	.grn-b-list .grn-measure {
		grid-column: 3 / span 8;
	}

	.grn-b-list h3 {
		font-size: 16px;
		line-height: 24px;
	}

	.grn-showcase-inner {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.grn-showcase-side { grid-column: 1 / span 3; }
	.grn-showcase-media { grid-column: 4 / span 5; }
	.grn-showcase-media img { max-height: 600px; }
}

/* =========================================================== 1100 and up */

@media (min-width: 1100px) {
	/* The banner hangs off the masthead hairline: same 100px top and 386px width
	   the reference pins inline, and the flush top corners that go with it. */
	.grn-banner {
		animation-name: grn-banner-drop;
		top: 100px;
		left: auto;
		right: 10px;
		width: 386px;
		max-width: none;
		margin-inline: 0;
	}

	.grn-banner-inner {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .08);
	}

	.grn-scrim {
		height: 100px;
		z-index: 3;
	}

	.grn-scrim-rule { display: none; }

	/* The in-flow marquee is a phone affordance; the desktop rail replaces it. */
	.grn-meta { display: none; }

	.grn-meta-fixed {
		display: block;
		position: fixed;
		top: 0;
		left: 10px;
		right: 10px;
		z-index: 10;
		padding-bottom: 14px;
		font-size: 12px;
		line-height: 17px;
		transform: translateY(calc(var(--grn-fade) * 60px));
	}

	.grn-meta-rule {
		border-bottom: 1px solid var(--grn-ink-20);
		transform: translateY(40px);
		pointer-events: none;
	}

	.grn-meta-row {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 20px;
	}

	.grn-meta-row ul {
		display: flex;
		align-items: center;
		column-gap: 30px;
		height: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
		color: var(--grn-ink-50);
	}

	.grn-meta-row li {
		display: flex;
		align-items: center;
		column-gap: 10px;
		height: 20px;
		font-size: 12px;
		line-height: 17px;
		white-space: nowrap;
	}

	.grn-meta-row svg { width: 18px; height: 18px; flex-shrink: 0; }

	.grn-wordmark {
		top: 0;
	}

	.grn-wordmark-type {
		margin-top: 0;
		font-size: 81px;
		line-height: 113px;
	}

	.grn-sub {
		position: absolute;
		top: 110px;
		left: 0;
		right: 0;
		z-index: 3;
	}

	.grn-wash { height: 250px; }

	.grn-head { margin-top: 180px; }
	.grn-archive-head { margin-top: 180px; }

	.grn-b-asset .grn-measure {
		grid-column: 3 / span 8;
	}

	.grn-past-grid {
		grid-column: 2 / span 10;
	}
}

/* =========================================================== 1200 and up */

@media (min-width: 1200px) {
	.grn-meta-row ul { column-gap: 40px; }

	.grn-narrator {
		right: auto;
		left: 42px;
		bottom: 42px;
	}
}

@media (min-width: 800px) {
	.grn-narrator-frame,
	.grn-narrator-frame img,
	.grn-narrator-frame video {
		width: 180px;
		height: 180px;
	}

	.grn-narrator-ring { width: 190px; }
}

/* ------------------------------------------------------- quieter motion */

@media (prefers-reduced-motion: reduce) {
	.grn-meta-track { animation: none; }
	.grn-banner { animation: none; }
	.grn-meta { overflow-x: auto; }
	.grn-card { transition: none; }
	.grn-banner-arrow { transition: none; }
}

/* Neither a script nor a scroll timeline: the nameplate stops being fixed and
   scrolls away like ordinary type, which is the honest thing for it to do. */
@supports not (animation-timeline: scroll()) {
	html:not(.grn-js) .grn-wordmark { position: absolute; }
	html:not(.grn-js) .grn-scrim,
	html:not(.grn-js) .grn-scrim-rule { display: none; }
	html:not(.grn-js) .grn-meta-fixed { position: absolute; transform: none; }
	html:not(.grn-js) .grn-narrator { position: absolute; }
}