/*
Theme Name: BeginnaRunna
Theme URI: https://beginnarunna.com/
Description: A quiet, typographic block theme for a beginner runner's journal.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: beginnarunna
License: GPL-2.0-or-later
*/

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

:root {
	--br-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--br-rule: 1px solid var(--wp--preset--color--rule);
	--br-ink-rule: 1px solid var(--wp--preset--color--ink);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	font-optical-sizing: auto;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* A faint paper grain over everything. Decorative, never intercepts a click. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

:where(a, button, summary, input):focus-visible {
	outline: 2px solid var(--wp--preset--color--clay);
	outline-offset: 4px;
}

a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 0.25s ease, text-decoration-color 0.25s ease; }

.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The small uppercase label that does all the quiet signposting. */
.br-label,
.br-label a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.br-label--clay, .br-label--clay a { color: var(--wp--preset--color--clay); }

/* ---------------------------------------------------------------------------
   Header and footer
   ------------------------------------------------------------------------ */

.br-header { padding-block: clamp(1.25rem, 3vw, 2rem); }
.br-header__inner { gap: 1.5rem; }
.br-header .wp-block-site-title a { text-decoration: none; }
.br-header .wp-block-site-title a:hover { color: var(--wp--preset--color--ink); }
.br-header .wp-block-navigation { gap: clamp(1.25rem, 3vw, 2.5rem); }
.br-header .wp-block-navigation a,
.br-footer .wp-block-navigation a { text-decoration: none; }
.br-header .wp-block-navigation-item__content { position: relative; padding-block: 0.4em; }
.br-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--br-ease);
}
.br-header .wp-block-navigation-item__content:hover::after,
.br-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left; }
.br-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }

.br-footer {
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-top: var(--br-rule);
}
.br-footer__mark {
	font-size: clamp(3.5rem, 13vw, 11rem);
	font-weight: 280;
	letter-spacing: -0.045em;
	line-height: 0.9;
	margin: 0;
}
.br-footer__mark a { text-decoration: none; }
.br-footer__mark a:hover { color: var(--wp--preset--color--ink); }
.br-footer__line { font-style: italic; color: var(--wp--preset--color--muted); margin-top: 1.25rem !important; font-size: var(--wp--preset--font-size--lead); }
.br-footer__credits { gap: 0.5rem 2rem; }
.br-footer__credits > * { margin: 0 !important; }
.br-credit a { color: var(--wp--preset--color--ink); text-decoration: underline; text-decoration-color: var(--wp--preset--color--rule); text-underline-offset: 0.35em; }
.br-credit a:hover { color: var(--wp--preset--color--clay); text-decoration-color: currentColor; }
.br-heart { color: var(--wp--preset--color--clay); letter-spacing: 0; display: inline-block; transition: transform 0.6s var(--br-out, ease); }
.br-credit:hover .br-heart { transform: scale(1.25); }

.br-footer__base {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: 1.5rem;
	border-top: var(--br-rule);
	gap: 1rem;
}

/* ---------------------------------------------------------------------------
   Home: hero, community, pull quote
   ------------------------------------------------------------------------ */

.br-hero {
	position: relative;
	padding-block: clamp(4rem, 12vw, 10rem) clamp(3.5rem, 9vw, 7.5rem);
	overflow: hidden;
	isolation: isolate;
}
/* Lane lines of a running track, drawn in hairlines and left to bleed off the
   edge. The only illustration on the site. */
.br-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	top: 47%;
	width: min(46vw, 40rem);
	aspect-ratio: 2 / 1;
	transform: translateY(-50%);
	background: url("assets/track.svg?v=2") center / contain no-repeat;
	opacity: 1;
}
.br-hero .br-display {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 260;
	line-height: 0.92;
	letter-spacing: -0.045em;
	max-width: 9ch;
	margin: 0;
}
.br-hero .br-hero__sub {
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.5rem, 3.2vw, 2.75rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--clay);
	margin-top: clamp(1.25rem, 2.5vw, 2rem) !important;
	padding-left: clamp(0rem, 14vw, 13rem);
}
.br-hero__foot {
	margin-top: clamp(3rem, 8vw, 6.5rem) !important;
	padding-top: 1.25rem;
	border-top: var(--br-ink-rule);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.br-hero__foot p { margin: 0; }
.br-hero__foot a { text-decoration: none; }
.br-hero__foot a:hover { color: var(--wp--preset--color--clay); }

.br-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 6rem);
	padding-block: var(--wp--preset--spacing--60);
	border-top: var(--br-rule);
}
.br-split > * { margin: 0 !important; }
.br-split__aside { align-self: start; position: sticky; top: 2.5rem; }
.br-split__aside h2 {
	font-size: clamp(2.5rem, 5.4vw, 4.75rem);
	font-weight: 280;
	line-height: 0.98;
	letter-spacing: -0.035em;
	margin-top: 1.25rem;
}
.br-split__body > * + * { margin-top: 1.4em; }
.br-split__body p { max-width: 34em; }

.br-dropcap::first-letter {
	float: left;
	font-size: 5.4em;
	line-height: 0.78;
	font-weight: 260;
	padding: 0.06em 0.09em 0 0;
	color: var(--wp--preset--color--clay);
}

.br-pull {
	padding-block: var(--wp--preset--spacing--60);
	border-top: var(--br-rule);
	text-align: center;
}
.br-pull > * { margin-inline: auto; }
.br-pull__text {
	font-size: clamp(2.75rem, 7.5vw, 6.5rem);
	font-style: italic;
	font-weight: 260;
	letter-spacing: -0.04em;
	line-height: 0.98;
	max-width: 12ch;
	margin-top: 1.5rem !important;
}

/* Her Word files bold whole display lines; the display type keeps its own weight. */
:is(.br-display, .br-hero__sub, .br-split__aside h2, .br-pull__text) :is(strong, b) { font-weight: inherit; }

/* ---------------------------------------------------------------------------
   The journal index: one row per post, numbered, hairline between rows
   ------------------------------------------------------------------------ */

.br-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: var(--br-ink-rule);
}
.br-section-head > * { margin: 0 !important; }

.br-index .wp-block-post-template { counter-reset: br-entry; margin: 0; padding: 0; list-style: none; }
.br-index .wp-block-post {
	counter-increment: br-entry;
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 10rem 15rem;
	column-gap: clamp(1rem, 3vw, 3rem);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
	border-bottom: var(--br-rule);
	margin: 0 !important;
}
.br-index .wp-block-post::before {
	content: counter(br-entry, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--muted);
	padding-top: 0.9rem;
}
.br-index .br-entry__main > * + * { margin-top: 0.85rem; }
.br-index .wp-block-post-title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 320;
	line-height: 1.06;
	letter-spacing: -0.028em;
	margin: 0;
	max-width: 22ch;
}
.br-index .wp-block-post-title a { text-decoration: none; transition: color 0.4s ease; }
.br-index .wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--clay); }
/* The whole row is the link target, not just the title. */
.br-index .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.br-index .wp-block-post-excerpt { color: var(--wp--preset--color--muted); font-size: 1.0625rem; line-height: 1.55; max-width: 36em; }
.br-index .wp-block-post-excerpt__excerpt { margin: 0; }
.br-index .br-entry__meta { text-align: right; padding-top: 0.9rem; gap: 0.35rem; }
.br-index .br-entry__meta > * { margin: 0 !important; }
.br-index .wp-block-post-terms a { color: var(--wp--preset--color--clay); text-decoration: none; position: relative; z-index: 1; }

.br-index .wp-block-query-pagination { margin-top: 2.5rem; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--label); letter-spacing: 0.14em; text-transform: uppercase; }
.br-index .wp-block-query-pagination a { text-decoration: none; }

.br-more { margin-top: 2rem !important; }
.br-more a { text-decoration: none; }
.br-more a:hover { color: var(--wp--preset--color--clay); }

/* The post's featured image, small, at the end of its row. */
.br-index .br-entry__media { margin: 0; padding-top: 0.9rem; overflow: hidden; position: relative; z-index: 1; }
.br-index .br-entry__media a { display: block; overflow: hidden; }
.br-index .br-entry__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	filter: saturate(0.78) sepia(0.08) contrast(1.02);
	transition: transform 1.2s var(--br-out, ease), filter 0.8s ease;
}
.br-index .wp-block-post:hover .br-entry__media img { transform: scale(1.04); filter: saturate(0.95) sepia(0.02); }

/* ---------------------------------------------------------------------------
   Archive headers (journal, category, author)
   ------------------------------------------------------------------------ */

.br-archive-head { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.br-archive-head h1 {
	font-size: clamp(3.25rem, 9vw, 8rem);
	font-weight: 260;
	letter-spacing: -0.045em;
	line-height: 0.95;
	margin-top: 1rem;
}
.br-archive-head .br-archive-head__note,
.br-archive-head .wp-block-term-description { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--lead); line-height: 1.4; max-width: 30em; font-style: italic; margin-top: 1.5rem; }

/* ---------------------------------------------------------------------------
   Single post and page
   ------------------------------------------------------------------------ */

.br-article-head { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.br-article-head .wp-block-post-title {
	font-size: var(--wp--preset--font-size--title);
	font-weight: 280;
	line-height: 1;
	letter-spacing: -0.035em;
	text-wrap: balance;
	margin-top: 1.5rem;
}
.br-byline {
	margin-top: clamp(2.5rem, 6vw, 4.5rem) !important;
	padding-top: 1.1rem;
	border-top: var(--br-ink-rule);
	gap: 0.5rem 2.25rem;
}
.br-byline > * { margin: 0 !important; }
.br-byline .wp-block-post-author-name a { text-decoration: none; }
.br-byline__published::before { content: "Published "; }
.br-byline__updated::before { content: "Updated "; }
.br-byline__time::after { content: " read"; }

.br-prose { padding-bottom: var(--wp--preset--spacing--50); }
.br-prose > * + * { margin-block-start: 1.35em; }
.br-prose > p:first-child,
.br-prose > h2:first-child + p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	font-weight: 340;
	letter-spacing: -0.008em;
}
.br-prose h2 { margin-block-start: 2.6em; }
.br-prose h3 { margin-block-start: 2em; font-weight: 400; }
.br-prose h4 { margin-block-start: 2.4em; color: var(--wp--preset--color--clay); }
.br-prose h2 + *, .br-prose h3 + *, .br-prose h4 + * { margin-block-start: 0.85em; }
.br-prose a { text-decoration-color: var(--wp--preset--color--clay); }
.br-prose strong { font-weight: 560; }
.br-prose ul, .br-prose ol { padding-left: 1.6em; }
.br-prose li + li { margin-top: 0.75em; }
.br-prose ul { list-style: none; }
.br-prose ul > li { position: relative; }
.br-prose ul > li::before {
	content: "";
	position: absolute;
	left: -1.6em;
	top: 0.82em;
	width: 0.8em;
	height: 1px;
	background: var(--wp--preset--color--clay);
}
.br-prose ol li::marker { font-family: var(--wp--preset--font-family--sans); font-size: 0.8em; color: var(--wp--preset--color--clay); }
.br-prose blockquote { border-left: 1px solid var(--wp--preset--color--clay); margin-inline: 0; padding-left: 1.5em; }
.br-prose hr { border: 0; border-top: var(--br-rule); margin-block: 3em; }

/* Photographs: a touch warmer and quieter, so stock colour sits in the palette. */
.br-figure { margin-inline: 0; }
.br-figure img { display: block; width: 100%; height: auto; filter: saturate(0.78) sepia(0.08) contrast(1.02); }
.br-figure figcaption {
	margin-top: 0.85rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: left;
}
.br-prose > .br-figure:first-child { margin-bottom: 2.5rem; }
.br-prose > .br-figure:first-child img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 12%; }
.br-prose > .br-figure:first-child + p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	font-weight: 340;
	letter-spacing: -0.008em;
}
.br-split__aside .br-figure { margin-top: clamp(2rem, 4vw, 3rem); max-width: 22rem; }
.br-split__aside .br-figure img { aspect-ratio: 4 / 5; object-fit: cover; }

/* "Importance (on a scale of 1-10): 10" lines in gear posts. */
.br-prose p.br-score {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-block: 0.65rem;
	border-block: var(--br-rule);
	margin-block-start: 1em;
}

/* The featured image, between the byline and the text. Never cropped: hers
   carry their titles in the image. */
.br-feature-wrap { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.br-feature { margin: 0; }
.br-feature img { display: block; width: 100%; height: auto; }

/* Written by */
.br-author-card {
	margin-top: var(--wp--preset--spacing--40) !important;
	padding-block: 2.5rem;
	border-top: var(--br-ink-rule);
	border-bottom: var(--br-rule);
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}
.br-author-card > * { margin: 0 !important; }
.br-author-card__body > * + * { margin-top: 0.75rem; }
.br-author-card .wp-block-post-author-name { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--heading-3); text-transform: none; letter-spacing: -0.015em; font-weight: 360; }
.br-author-card .wp-block-post-author-name a { text-decoration: none; }
.br-author-card .wp-block-post-author-biography { color: var(--wp--preset--color--muted); font-size: 1.0625rem; line-height: 1.6; }

.br-next {
	max-width: 44rem;
	margin-inline: auto !important;
	margin-top: var(--wp--preset--spacing--50) !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
.br-next > * { margin: 0 !important; }
.br-next .post-navigation-link-previous,
.br-next .post-navigation-link-next {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 320;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.br-next .post-navigation-link-next { text-align: right; grid-column: 2; }
.br-next a { text-decoration: none; display: block; }
.br-next a:hover { color: var(--wp--preset--color--clay); }
.br-next a::before {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.br-next .post-navigation-link-previous a::before { content: "\2190\00a0 Previous"; }
.br-next .post-navigation-link-next a::before { content: "Next \00a0\2192"; }

/* ---------------------------------------------------------------------------
   Patterns she writes in
   ------------------------------------------------------------------------ */

.br-takeaways {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--wp--preset--color--surface);
}
.br-takeaways > * + * { margin-top: 1rem; }
.br-takeaways ul { margin-top: 1.25rem; }
.br-takeaways li { font-size: 1.125rem; }

.br-plan table { width: 100%; border-collapse: collapse; font-family: var(--wp--preset--font-family--sans); font-size: 0.9375rem; line-height: 1.45; }
.br-plan thead th { text-align: left; font-weight: 500; font-size: var(--wp--preset--font-size--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); border-bottom: var(--br-ink-rule); padding: 0 1rem 0.85rem 0; }
.br-plan td { border-bottom: var(--br-rule); padding: 1rem 1rem 1rem 0; vertical-align: top; }
.br-plan td:first-child { font-family: var(--wp--preset--font-family--serif); font-size: 1.125rem; white-space: nowrap; }
.br-plan .wp-block-table { overflow-x: auto; }
.br-plan figcaption { text-align: left; margin-top: 0.85rem; }

.br-faq details { border-bottom: var(--br-rule); }
.br-faq details:first-of-type { border-top: var(--br-ink-rule); }
.br-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.35rem;
	font-size: 1.375rem;
	letter-spacing: -0.012em;
	line-height: 1.3;
}
.br-faq summary::-webkit-details-marker { display: none; }
.br-faq summary::after { content: "+"; font-family: var(--wp--preset--font-family--sans); font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--clay); transition: transform 0.4s var(--br-ease); }
.br-faq details[open] summary::after { transform: rotate(45deg); }
.br-faq details > :not(summary) { margin: 0 0 1.5rem; color: var(--wp--preset--color--muted); }

.br-note {
	border-left: 1px solid var(--wp--preset--color--clay);
	padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2rem);
}
.br-note > * + * { margin-top: 0.75rem; }
.br-note p:not(.br-label) { font-style: italic; font-size: var(--wp--preset--font-size--lead); line-height: 1.4; }

.br-gear { border-top: var(--br-ink-rule); padding-top: 1.5rem; }
.br-gear > * + * { margin-top: 1rem; }
.br-gear h3 { margin-top: 0.5rem !important; }

/* ---------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------ */

.br-lost { padding-block: clamp(5rem, 14vw, 12rem); }
.br-lost h1 { font-size: clamp(3rem, 8vw, 7rem); font-weight: 260; letter-spacing: -0.045em; line-height: 0.98; max-width: 12ch; margin-top: 1.25rem; }
.br-lost p:not(.br-label) { margin-top: 2rem; font-size: var(--wp--preset--font-size--lead); font-style: italic; color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------------------------
   Motion. Everything enters once, as it arrives, on one long expo-out curve.
   Headings rise line by line from behind their own edge; labels settle their
   tracking; the rest fades up. Only with .br-js, which is only set when the
   reader has not asked for reduced motion.
   ------------------------------------------------------------------------ */

:root {
	--br-out: cubic-bezier(0.19, 1, 0.22, 1);
	--br-line-dur: 1.5s;
	--br-line-gap: 120ms;
}

/* Headings, until the script has measured and split them. */
.br-js :is(.br-display, .br-hero__sub, .br-split__aside h2, .br-pull__text, .br-article-head .wp-block-post-title, .br-archive-head h1, .br-lost h1, .br-footer__mark, .br-index .wp-block-post-title, .br-prose h2, .br-next a):not(.is-split):not(.br-reveal) { visibility: hidden; }

.br-line {
	display: block;
	overflow: hidden;
	/* room for descenders and italic overhang, given back so spacing is unchanged */
	padding: 0.04em 0.06em 0.14em 0;
	margin: -0.04em -0.06em -0.14em 0;
}
.br-line__inner { display: block; }
.br-js .is-split .br-line__inner {
	transform: translate3d(0, 112%, 0) rotate(2.5deg);
	transform-origin: 0 100%;
	transition: transform var(--br-line-dur) var(--br-out);
	transition-delay: calc(var(--br-l, 0) * var(--br-line-gap) + var(--br-delay, 0ms));
}
.br-js .is-split.is-in .br-line__inner { transform: none; }

/* Choreography inside the hero: headline, then the italic line, then the rule. */
.br-hero .br-hero__sub { --br-delay: 380ms; }
.br-pull__text { --br-line-dur: 1.6s; --br-line-gap: 140ms; }
.br-footer__mark { --br-line-dur: 1.6s; }
.br-article-head .wp-block-post-title { --br-delay: 120ms; }

/* Labels: they arrive wide and draw in. */
.br-js .br-label { opacity: 0; letter-spacing: 0.42em; transition: opacity 1.1s var(--br-out), letter-spacing 1.6s var(--br-out); }
.br-js .br-label.is-in { opacity: 1; letter-spacing: 0.16em; }
.br-js .br-label a { letter-spacing: inherit; }

/* Everything else: a short rise and a fade. */
.br-js :is(.br-reveal, .br-index .wp-block-post, .br-split__body > *, .br-split__aside .br-figure, .br-prose > :not(h2), .br-author-card, .br-byline, .br-section-head, .br-archive-head__note, .br-footer__line, .br-footer__base, .br-lost p):not(.is-split) {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 1.1s var(--br-out), transform 1.3s var(--br-out);
	transition-delay: calc(var(--br-i, 0) * 90ms + 120ms);
}
.br-js :is(.br-reveal, .br-index .wp-block-post, .br-split__body > *, .br-split__aside .br-figure, .br-prose > :not(h2), .br-author-card, .br-byline, .br-section-head, .br-archive-head__note, .br-footer__line, .br-footer__base, .br-lost p).is-in { opacity: 1; transform: none; }

/* Photographs open from a slight scale, like a print settling. */
.br-js .br-figure { overflow: hidden; }
.br-js .br-figure img { transform: scale(1.06); transition: transform 2.2s var(--br-out); }
.br-js .br-figure.is-in img { transform: none; }

/* The hero rule draws itself left to right after the headline lands. */
.br-js .br-hero__foot { border-top-color: transparent; position: relative; opacity: 0; transition: opacity 1.2s var(--br-out) 0.9s; }
.br-js .br-hero__foot.is-in { opacity: 1; }
.br-js .br-hero__foot::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 1px;
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1.8s var(--br-out) 0.7s;
}
.br-js .br-hero__foot.is-in::before { transform: scaleX(1); }
.br-js .br-hero::before { opacity: 0; transition: opacity 2.6s ease 0.5s; }
.br-js .br-hero:has(.is-in)::before { opacity: 1; }

/* Re-splitting after a resize must not replay anything. */
.br-still * { transition: none !important; }

/* ---------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------ */

@media (max-width: 781px) {
	.br-split { grid-template-columns: 1fr; }
	.br-split__aside { position: static; }
	.br-hero::before { right: -30vw; width: 100vw; top: 30%; opacity: 0.75; }
	.br-hero .br-hero__sub { padding-left: 0; }
	.br-hero__foot > :first-child { display: none; }
	.br-hero__foot { justify-content: flex-end; }
	.br-index .wp-block-post { grid-template-columns: 2.75rem minmax(0, 1fr); }
	/* Every part has a fixed place, so a post without an image lays out the same. */
	.br-index .br-entry__media { grid-column: 1 / -1; grid-row: 1; padding: 0 0 1.25rem; }
	.br-index .wp-block-post::before { grid-column: 1; grid-row: 2; }
	.br-index .br-entry__main { grid-column: 2; grid-row: 2; }
	.br-index .br-entry__meta { grid-row: 3; }
	.br-index .br-entry__meta { grid-column: 2; text-align: left; padding-top: 1rem; flex-direction: row !important; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
	.br-index .wp-block-post::before { padding-top: 0.6rem; }
	.br-author-card { grid-template-columns: 1fr; gap: 1rem; }
	.br-next { grid-template-columns: 1fr; }
	.br-next .post-navigation-link-next { grid-column: 1; text-align: left; }
	.br-footer__base { flex-direction: column; align-items: flex-start !important; }
}

@media print {
	body::after, .br-header, .br-footer, .br-next { display: none; }
}