/* River to River. Everything theme.json cannot express.
   Colour rules: lime is a fill, never text on paper. Pink is the annotation voice. Pink never sits on lime,
   so inside a lime band every pink thing, focus rings included, turns ink. */

:root { --rr-gutter: clamp(16px, 2.4vw, 40px); }
body { font-optical-sizing: auto; }

/* header */
.rr-header { border-bottom: var(--wp--custom--border--heavy) solid var(--wp--preset--color--ink); }
.rr-header .wp-block-navigation-item__content { text-decoration: none; color: var(--wp--preset--color--ink-soft); }
.rr-header .current-menu-item > .wp-block-navigation-item__content,
.rr-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--ink); }

/* chips: lime fill, ink text on top. works on paragraphs, headings and post terms. */
.is-style-chip, .is-style-chip-ink {
	display: inline-block; margin-block: 0;
	padding: 6px 11px 5px;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
	font-weight: 500; line-height: 1; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase;
	background: #E0006B; color: #FFFFFF; font-weight: 700; /* a deeper cut of the pink so white text passes, 4.8:1 */
}
.is-style-chip-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--lime); }
.is-style-chip a, .is-style-chip-ink a { color: inherit; text-decoration: none; }
/* a constrained layout centres children with auto margins, which cannot start-align a chip */
.is-layout-constrained > .is-style-chip,
.is-layout-constrained > .is-style-chip-ink {
	display: block; width: fit-content;
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 700px)) / 2)) !important;
	margin-inline-end: auto !important;
}
.is-layout-constrained > .alignwide.is-style-chip,
.is-layout-constrained > .alignwide.is-style-chip-ink {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size, 1320px)) / 2)) !important;
}

.is-style-facts { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; line-height: 2; color: var(--wp--preset--color--ink-soft); }
.is-style-facts strong { color: var(--wp--preset--color--ink); }

/* the band (still named lime-band): riso blue with newsprint text, since ink on blue is only 2.8:1 */
.wp-block-group.is-style-lime-band {
	background: var(--wp--preset--color--field); color: var(--wp--preset--color--paper);
	padding-block: clamp(2rem, 5vh, 4rem);
	margin-block: clamp(2rem, 6vh, 4rem);
}
/* the bleed only for full width bands; anywhere else it would paint over neighbouring columns */
.wp-block-group.is-style-lime-band.alignfull { box-shadow: 0 0 0 100vmax var(--wp--preset--color--field); clip-path: inset(0 -100vmax); }
.is-style-lime-band .is-style-chip { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--field); }
.is-style-lime-band .wp-block-button__link { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.is-style-lime-band .wp-block-button__link:hover { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }
.is-style-lime-band a { color: var(--wp--preset--color--paper); }
.is-style-lime-band :is(h1, h2, h3, h4) a, .is-style-lime-band :is(h1, h2, h3, h4) { color: var(--wp--preset--color--paper); } /* pink on blue is 1.9:1 */
.is-style-lime-band :focus-visible { outline-color: var(--wp--preset--color--paper) !important; }

/* annotated: the body in the centre column, notes stacking in the side columns.
   the first body block spans the rows so notes can stack beside it; further body blocks flow below. */
.wp-block-group.is-style-annotated {
	display: grid; position: relative; grid-auto-flow: row dense;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--wp--style--global--content-size, 700px)) minmax(0, 1fr);
	column-gap: var(--rr-gutter); row-gap: 0;
	max-width: var(--wp--style--global--wide-size, 1320px); margin-inline: auto;
}
.is-style-annotated > * { grid-column: 2; min-width: 0; max-width: none; margin-inline: 0; margin-block-start: 0; }
.is-style-annotated > :not([class*="is-style-margin-note"]):not(.rr-leaders) { grid-row: 1 / span 30; }
.is-style-annotated > :not([class*="is-style-margin-note"]):not(.rr-leaders) ~ :not([class*="is-style-margin-note"]):not(.rr-leaders) { grid-row: auto; margin-block-start: 1rem; }
.is-style-annotated > .is-style-margin-note-right { grid-column: 3; grid-row: auto; align-self: start; }
.is-style-annotated > .is-style-margin-note-left  { grid-column: 1; grid-row: auto; align-self: start; justify-self: end; text-align: end; }
.is-style-annotated > .rr-leaders { grid-column: auto; grid-row: auto; }

.is-style-annotated > .is-style-margin-note-right,
.is-style-annotated > .is-style-margin-note-left,
.is-style-margin-note-right, .is-style-margin-note-left {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note);
	line-height: 1.7; letter-spacing: 0.01em; color: var(--wp--preset--color--pink);
	max-width: 28ch; margin-block: 0.2rem 1rem;
}
.is-style-lime-band .is-style-margin-note-right,
.is-style-lime-band .is-style-margin-note-left { color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--paper); }
.rr-leaders { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }

/* margin prints: a photograph pinned in the margin like a small print, tethered by the same leader line */
.is-style-annotated > .is-style-margin-note-print-left  { grid-column: 1; grid-row: auto; align-self: start; justify-self: end; }
.is-style-annotated > .is-style-margin-note-print-right { grid-column: 3; grid-row: auto; align-self: start; justify-self: start; }
/* a print is taller than most paragraphs: let it hang into the space below instead of stretching the row */
.is-style-annotated > .wp-block-image[class*="is-style-margin-note-print"] { margin-block-end: -14rem; position: relative; z-index: 1; }
.wp-block-image.is-style-margin-note-print-left, .wp-block-image.is-style-margin-note-print-right {
	width: 13rem; max-width: 100%; margin-block: 0.4rem 1rem; padding: 0.5rem 0.5rem 0.6rem; color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--paper); border: 1px solid rgba(16, 16, 16, 0.14);
	box-shadow: 0 2px 3px rgba(16, 16, 16, 0.12), 0 14px 30px -14px rgba(16, 16, 16, 0.4);
}
.wp-block-image.is-style-margin-note-print-left  { transform: rotate(-1.4deg); }
.wp-block-image.is-style-margin-note-print-right { transform: rotate(1.6deg); }
.wp-block-image[class*="is-style-margin-note-print"] img { display: block; width: 100%; height: auto; }
.wp-block-image[class*="is-style-margin-note-print"] figcaption {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); line-height: 1.5;
	text-align: start; margin: 0.45rem 0 0; color: var(--wp--preset--color--ink-soft);
}

/* moves: the numbered sections of a project page */
.wp-block-group.is-style-move {
	display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.6rem; align-items: start;
	border-top: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink);
	padding-block: 1.9rem 0.6rem;
}
.is-style-move > * { min-width: 0; }
.is-style-move > :nth-child(2) { margin-block-start: 0; }
.is-style-move > .wp-block-heading { margin-block-end: 0.2rem; }
.is-style-move > :not(.is-style-move-number) { grid-column: 2; }
.is-style-move-number {
	grid-column: 1; grid-row: 1 / span 20; margin: 0;
	font-family: var(--wp--preset--font-family--mono); font-size: 1.625rem; font-weight: 500; line-height: 1;
	color: var(--wp--preset--color--lime); -webkit-text-stroke: 1px var(--wp--preset--color--ink);
}

/* images */
.wp-block-image.is-style-framed img,
.wp-block-post-featured-image.rr-framed img { border: var(--wp--custom--border--heavy) solid var(--wp--preset--color--ink); }
.is-style-cards .wp-block-post-featured-image img { border-bottom: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink); }
.wp-block-image.is-style-framed figcaption {
	display: inline-block; margin-top: 0; padding: 6px 11px 5px;
	background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
	font-weight: 500; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase;
}

/* code blocks scroll inside themselves, never push the page wider */
.wp-block-code { max-width: 100%; overflow-x: auto; white-space: pre; }
.wp-block-code code { white-space: pre; }

/* query: cards and index list */
.is-style-cards .wp-block-post-template > li {
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink); padding: 0.9rem; background: var(--wp--preset--color--paper);
}
.is-style-cards .wp-block-post-title a, .is-style-index .wp-block-post-title a { text-decoration: none; }
.is-style-cards .wp-block-post-title a:hover, .is-style-index .wp-block-post-title a:hover { box-shadow: 0 3px 0 var(--wp--preset--color--lime); }
.is-style-index .wp-block-post-template { border-top: var(--wp--custom--border--heavy) solid var(--wp--preset--color--ink); }
.is-style-index .wp-block-post-template > li { border-bottom: 1px solid rgba(0,0,0,.18); padding-block: 1.4rem; margin: 0; }

/* record table, for a CV */
.wp-block-table.is-style-record table { border-collapse: collapse; }
.wp-block-table.is-style-record td, .wp-block-table.is-style-record th { border: 0; border-bottom: 1px solid rgba(0,0,0,.14); padding-block: 0.55rem; padding-inline: 0 1.2rem; vertical-align: top; }
.wp-block-table.is-style-record td:first-child { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; color: var(--wp--preset--color--ink-soft); white-space: nowrap; width: 8rem; }

/* focus is always visible, in the annotation colour; ink on lime (see the band rules above) */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--pink); outline-offset: 3px; }

/* below 1200px the side columns are too narrow for notes (107px at 1024), so notes move under the text */
@media (max-width: 1200px) {
	.wp-block-group.is-style-annotated { grid-template-columns: minmax(0, 1fr); }
	.is-style-annotated > *,
	.is-style-annotated > :not([class*="is-style-margin-note"]):not(.rr-leaders),
	.is-style-annotated > .is-style-margin-note-right,
	.is-style-annotated > .is-style-margin-note-left { grid-column: 1; grid-row: auto; justify-self: stretch; text-align: start; }
	.is-style-annotated > .is-style-margin-note-right,
	.is-style-annotated > .is-style-margin-note-left { border-inline-start: 3px solid var(--wp--preset--color--pink); padding-inline-start: 0.9rem; margin-block: 1rem 0.4rem; max-width: none; }
	.is-style-lime-band .is-style-annotated > [class*="is-style-margin-note"] { border-inline-start-color: var(--wp--preset--color--paper); }
	.rr-leaders { display: none; }
	.is-style-annotated > .wp-block-image[class*="is-style-margin-note-print"] { justify-self: start; width: min(20rem, 100%); transform: none; border-inline-start: 1px solid rgba(16, 16, 16, 0.14); padding-inline-start: 0.5rem; margin-block: 1rem 0.4rem; }
}
@media (max-width: 781px) {
	.wp-block-group.is-style-move { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
	.is-style-move > :not(.is-style-move-number), .is-style-move-number { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* article hierarchy: in a post, h2 steps down from the title so sections never compete with it */
.single-post .wp-block-post-content h2:not([class*="-font-size"]) { font-size: var(--wp--preset--font-size--section); margin-block-start: 1.5em; }
.single-post .wp-block-post-content h3:not([class*="-font-size"]) { margin-block-start: 1.4em; }

/* typewriter notes: the full text stays for screen readers while the visible copy types in */
.rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rr-typed { white-space: pre-line; }
.rr-typing .rr-typed::after { content: "\258D"; margin-left: 1px; animation: rr-caret 0.6s steps(1) infinite; }
@keyframes rr-caret { 50% { opacity: 0; } }

/* work cards: a leading question on hover, so a visitor can get the idea without committing to a click */
.is-style-cards .wp-block-post-template > li { position: relative; }
.is-style-cards .rr-question { font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--ink-soft); margin-block-start: 0.6rem; }
.is-style-cards .rr-question p { margin: 0; }
@media (hover: hover) and (min-width: 782px) {
	.is-style-cards .rr-question {
		position: absolute; top: 0.9rem; left: 0.9rem; right: 0.9rem; aspect-ratio: 4 / 3; margin: 0;
		display: flex; align-items: flex-end; padding: 0.9rem; overflow: hidden; pointer-events: none;
		background: var(--wp--preset--color--ink); color: #FFFFFF; box-shadow: inset 0 -5px 0 var(--wp--preset--color--lime);
		font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease;
	}
	.is-style-cards li:hover .rr-question, .is-style-cards li:focus-within .rr-question { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .is-style-cards .rr-question { transition: none; transform: none; } }

/* page transitions: a card's image and title morph into the page they open (names are set in functions.php) */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}

/* reading progress on posts: a lime bar tied to scroll, no script */
@supports (animation-timeline: scroll()) {
	.single-post::after {
		content: ""; position: fixed; z-index: 99999; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); height: 4px;
		background: var(--wp--preset--color--lime); transform-origin: 0 50%; transform: scaleX(0);
		animation: rr-progress linear both; animation-timeline: scroll(root);
	}
	@keyframes rr-progress { to { transform: scaleX(1); } }
}

/* source preview: a note in the left margin while a cited link is hovered or focused */
.rr-source {
	position: absolute; z-index: 5; max-width: 22ch; text-align: end; pointer-events: none;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); line-height: 1.6;
	color: var(--wp--preset--color--pink); border-inline-end: 2px solid var(--wp--preset--color--pink); padding-inline-end: 0.7rem;
	opacity: 0; transform: translateX(-6px); transition: opacity 140ms ease, transform 140ms ease;
}
.rr-source.is-on { opacity: 1; transform: none; }
.rr-source span { display: block; }
.rr-source__label { font-size: var(--wp--preset--font-size--label); letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; color: var(--wp--preset--color--ink-soft); }
.rr-source__host { color: var(--wp--preset--color--ink); font-weight: 500; }

/* hover and active states */
.rr-header .wp-block-navigation-item__content {
	background: linear-gradient(var(--wp--preset--color--lime), var(--wp--preset--color--lime)) no-repeat 0 100% / 0 3px;
	padding-block-end: 3px; transition: background-size 180ms ease, color 180ms ease;
}
.rr-header .wp-block-navigation-item__content:hover,
.rr-header .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--ink); background-size: 100% 3px; }
.rr-header .current-menu-item > .wp-block-navigation-item__content,
.rr-header .wp-block-navigation-item__content[aria-current="page"] { background-size: 100% 3px; color: var(--wp--preset--color--ink); }
.rr-header .wp-block-navigation-item__content:active { background-size: 100% 100%; }
.wp-block-site-title a { transition: box-shadow 180ms ease; }
.wp-block-site-title a:hover { box-shadow: 0 3px 0 var(--wp--preset--color--lime); }

/* links in writing: the highlighter. lime fills behind ink, so it stays legible */
.wp-block-post-content p a, .wp-block-post-content li a {
	background: linear-gradient(var(--wp--preset--color--lime), var(--wp--preset--color--lime)) no-repeat 0 100% / 100% 0;
	transition: background-size 160ms ease;
}
.wp-block-post-content p a:hover, .wp-block-post-content li a:hover,
.wp-block-post-content p a:focus-visible, .wp-block-post-content li a:focus-visible { background-size: 100% 100%; text-decoration: none; }
.wp-block-post-content p a:active, .wp-block-post-content li a:active { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--lime); }
/* inside a lime band the highlighter would vanish, so it inverts instead */
.is-style-lime-band p a:hover, .is-style-lime-band h2 a:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--field); text-decoration: none; }

/* buttons press in */
.wp-element-button, .wp-block-button__link { transition: background-color 140ms ease, color 140ms ease, transform 80ms ease; }
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(2px); }

/* cards lift into a hard shadow on hover and press flat on click */
.is-style-cards .wp-block-post-template > li { transition: transform 160ms ease, box-shadow 160ms ease; }
.is-style-cards .wp-block-post-template > li:hover, .is-style-cards .wp-block-post-template > li:focus-within { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--wp--preset--color--ink); }
.is-style-cards .wp-block-post-template > li:active { transform: none; box-shadow: 0 0 0 var(--wp--preset--color--ink); }

/* chips that link invert on hover */
.is-style-chip a { transition: none; }
.wp-block-post-terms.is-style-chip:hover, .is-style-chip:has(a:hover) { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--lime); }

@media (prefers-reduced-motion: reduce) {
	.rr-header .wp-block-navigation-item__content, .wp-block-post-content a, .wp-element-button, .wp-block-button__link,
	.is-style-cards .wp-block-post-template > li, .rr-source { transition: none; }
	.is-style-cards .wp-block-post-template > li:hover { transform: none; }
}

/* portfolio shelves: work, photographs and builds on one page, with jump links at the top */
.rr-jump { gap: 0.6rem; margin-block: 1rem 0; }
.rr-jump p { margin: 0; }
.rr-jump a {
	display: inline-block; padding: 0.55rem 0.8rem; border: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--ink);
}
.rr-jump a:hover, .rr-jump a:focus-visible { background: var(--wp--preset--color--lime); }
.rr-jump sup { margin-inline-start: 0.3rem; font-weight: 400; }
.rr-shelf { margin-block-start: var(--wp--preset--spacing--60); scroll-margin-top: 1.5rem; }
.rr-shelf > .is-style-chip { margin-block-end: 1.2rem; }

/* photographs: prints on a black contact sheet, numbered like frames, the first one circled */
.is-style-contact-sheet { background: var(--wp--preset--color--ink); padding: 1.4rem 0.9rem; counter-reset: frame; }
.is-style-contact-sheet .wp-block-post-template { gap: 0.5rem; }
.is-style-contact-sheet .wp-block-post-template > li { position: relative; counter-increment: frame; }
.is-style-contact-sheet .wp-block-post-featured-image { margin: 0; }
.is-style-contact-sheet .wp-block-post-featured-image img { display: block; width: 100%; object-fit: cover; }
.is-style-contact-sheet li::before {
	content: counter(frame, decimal-leading-zero); position: absolute; left: 0.4rem; top: 0.25rem; z-index: 1;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--lime);
}
.is-style-contact-sheet .wp-block-post-title {
	margin: 0.35rem 0 0.4rem; font-family: var(--wp--preset--font-family--mono); font-weight: 400; letter-spacing: 0.04em; line-height: 1.4;
	color: #BDBDBD;
}
.is-style-contact-sheet li:first-child::after {
	content: ""; position: absolute; inset: -0.4rem -0.4rem 1.2rem; pointer-events: none;
	border: 2.5px solid var(--wp--preset--color--pink); border-radius: 52% 48% 46% 54% / 50% 52% 48% 50%; transform: rotate(-1.5deg);
}
@media (max-width: 781px) { .is-style-contact-sheet .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* builds: the work card with a BUILD chip; a build with no screenshot shows its name on ink instead */
.rr-builds .wp-block-post-template > li::before {
	content: "Build"; position: absolute; top: 1.4rem; left: 1.4rem; z-index: 1; padding: 0.2rem 0.45rem;
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--lime);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase;
}
.rr-builds .wp-block-post-template > li:not(:has(.wp-block-post-featured-image))::after {
	content: ""; display: block; order: -1; aspect-ratio: 4 / 3; background: var(--wp--preset--color--ink);
	border-bottom: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink);
}
.rr-builds .wp-block-post-template > li { display: flex; flex-direction: column; }
.rr-builds .rr-build-line { font-size: var(--wp--preset--font-size--small); line-height: 1.45; color: var(--wp--preset--color--ink-soft); margin-block: 0.2rem 0.6rem; }
.rr-builds .rr-build-line p { margin: 0; }

/* rail rows (homepage): a left rail on every section with its label, count and link, and at most one note.
   Built on the annotated grid so the leader lines and typing notes work unchanged. */
.wp-block-group.is-style-annotated.rr-rail-row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.is-style-annotated.rr-rail-row > .rr-rail { grid-column: 1; grid-row: 1; margin-block-start: 0; align-self: start; }
.is-style-annotated.rr-rail-row > .is-style-margin-note-left { grid-column: 1; grid-row: 2; justify-self: start; text-align: start; margin-block-start: 1.4rem; }
.rr-rail > * { margin-block: 0 0.9rem; }
.rr-rail .is-style-chip { margin-block-end: 1rem; }
.rr-count { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); letter-spacing: 0.08em; color: var(--wp--preset--color--ink-soft); }
.rr-rail-link a {
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); letter-spacing: 0.1em; text-transform: uppercase;
	text-decoration: none; box-shadow: 0 3px 0 var(--wp--preset--color--pink); color: var(--wp--preset--color--ink);
}
.rr-rail-link a:hover { background: var(--wp--preset--color--lime); }
@media (max-width: 1200px) {
	.wp-block-group.is-style-annotated.rr-rail-row { grid-template-columns: minmax(0, 1fr); }
	.is-style-annotated.rr-rail-row > .rr-rail { grid-column: 1; grid-row: auto; order: -1; }
	.is-style-annotated.rr-rail-row > .is-style-margin-note-left { grid-row: auto; order: -1; margin-block: 0 1.2rem; }
}

/* view more: a card grid shows nine, then a button reveals the next nine */
.rr-view-more .rr-hidden { display: none !important; }
.rr-more-btn {
	display: block; margin: 1.6rem 0 0; padding: 0.85rem 1.3rem; cursor: pointer;
	background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); border: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
	transition: transform 160ms ease, box-shadow 160ms ease;
}
.rr-more-btn:hover, .rr-more-btn:focus-visible { background: var(--wp--preset--color--lime); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--wp--preset--color--ink); }

/* film strip: photographs on a black strip, three at a time, with arrows when there are more */
.is-style-film-strip { position: relative; background: #141414; padding: 2.2rem 1.1rem 2.3rem; counter-reset: frame; border-radius: 3px; }
/* sprocket holes along both edges, drawn not loaded */
.is-style-film-strip::before, .is-style-film-strip::after {
	content: ""; position: absolute; left: 0; right: 0; height: 11px; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='11'%3E%3Crect x='6' y='0.5' width='14' height='10' rx='2.5' fill='%23F1F1EF'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
}
.is-style-film-strip::before { top: 0.7rem; }
.is-style-film-strip::after { bottom: 0.7rem; }
.is-style-film-strip .wp-block-post-template {
	display: flex; gap: 0.6rem; margin: 0; padding: 0.5rem 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; scrollbar-width: none;
}
.is-style-film-strip .wp-block-post-template::-webkit-scrollbar { display: none; }
.is-style-film-strip .wp-block-post-template > li { flex: 0 0 calc((100% - 1.2rem) / 3); margin: 0; position: relative; scroll-snap-align: start; counter-increment: frame; }
.is-style-film-strip .wp-block-post-featured-image { margin: 0; }
.is-style-film-strip .wp-block-post-featured-image img { display: block; width: 100%; object-fit: cover; border-radius: 2px; }
.is-style-film-strip li::before {
	content: counter(frame, decimal-leading-zero); position: absolute; left: 0.4rem; top: 0.25rem; z-index: 1;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--lime);
}
.is-style-film-strip li:first-child::after {
	content: ""; position: absolute; inset: -0.4rem -0.3rem 1.3rem; pointer-events: none;
	border: 2.5px solid var(--wp--preset--color--pink); border-radius: 52% 48% 46% 54% / 50% 52% 48% 50%; transform: rotate(-1.5deg);
}
.is-style-film-strip .wp-block-post-title {
	margin: 0.4rem 0 0; font-family: var(--wp--preset--font-family--mono); font-weight: 400; letter-spacing: 0.04em; line-height: 1.4; color: #BDBDBD;
}
.rr-strip-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.8rem; }
.rr-strip-nav button {
	min-width: 3rem; min-height: 2.6rem; cursor: pointer; border: 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--lime);
	font-family: var(--wp--preset--font-family--mono); font-size: 1.1rem; font-weight: 500; letter-spacing: -0.05em;
}
.rr-strip-nav button:hover, .rr-strip-nav button:focus-visible { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); }
.rr-strip-nav button:disabled { opacity: 0.2; cursor: default; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--lime); }
.rr-strip-nav span { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); color: var(--wp--preset--color--ink-soft); letter-spacing: 0.08em; }
@media (max-width: 781px) { .is-style-film-strip .wp-block-post-template > li { flex-basis: 78%; } }

/* builds as an index you read down */
.rr-builds-index .wp-block-post-template { margin: 0; padding: 0; list-style: none; border-top: var(--wp--custom--border--heavy) solid var(--wp--preset--color--ink); counter-reset: build; }
.rr-builds-index .wp-block-post-template > li {
	display: grid; grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 2fr) 3.5rem; gap: 1rem; align-items: baseline;
	padding: 1rem 0; margin: 0; border-bottom: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink); counter-increment: build;
	transition: background 160ms ease;
}
.rr-builds-index li:hover, .rr-builds-index li:focus-within { background: var(--wp--preset--color--lime); }
.rr-builds-index li::before { content: counter(build, decimal-leading-zero); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); color: var(--wp--preset--color--ink-soft); }
.rr-builds-index .wp-block-post-title { margin: 0; }
.rr-builds-index .wp-block-post-title a { text-decoration: none; }
.rr-builds-index .wp-block-post-excerpt { margin: 0; font-size: var(--wp--preset--font-size--small); }
.rr-builds-index .wp-block-post-excerpt p { margin: 0; }
.rr-builds-index .wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--note); color: var(--wp--preset--color--ink-soft); text-align: end; }
@media (max-width: 781px) {
	.rr-builds-index .wp-block-post-template > li { grid-template-columns: 2.2rem minmax(0, 1fr); }
	.rr-builds-index .wp-block-post-excerpt, .rr-builds-index .wp-block-post-date { grid-column: 2; text-align: start; }
}

/* homepage blog: the newest post big, the next three as a short list */
.rr-blog-lead .wp-block-post-template, .rr-blog-list .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.rr-blog-lead .wp-block-post-title { margin-block: 0.4rem 0.8rem; line-height: 1.05; }
.rr-blog-lead .wp-block-post-title a, .rr-blog-list .wp-block-post-title a { text-decoration: none; }
.rr-blog-list .wp-block-post-template > li { border-top: var(--wp--custom--border--rule) solid var(--wp--preset--color--ink); padding-block: 0.9rem; margin: 0; }
.rr-blog-list .wp-block-post-title { margin: 0.25rem 0 0; line-height: 1.15; }
.rr-blog-lead .wp-block-post-date, .rr-blog-list .wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; color: var(--wp--preset--color--ink-soft); }

/* hover rule (Judy, 23 Sep): whenever pink fills behind text, the text turns white. The fill is the deeper
   cut of the pink the chips use, because white on the bright pink is only 3.3:1 (this is 4.8:1). */
:root { --rr-hot: #E0006B; }
.wp-block-post-content p a, .wp-block-post-content li a {
	background-image: linear-gradient(var(--rr-hot), var(--rr-hot));
}
.wp-block-post-content p a:hover, .wp-block-post-content li a:hover,
.wp-block-post-content p a:focus-visible, .wp-block-post-content li a:focus-visible { color: #FFFFFF; }
.rr-header .wp-block-navigation-item__content:active { background-image: linear-gradient(var(--rr-hot), var(--rr-hot)); color: #FFFFFF; }
.is-style-lime-band .wp-block-button__link:hover,
.rr-jump a:hover, .rr-jump a:focus-visible,
.rr-rail-link a:hover, .rr-rail-link a:focus-visible,
.rr-more-btn:hover, .rr-more-btn:focus-visible,
.rr-strip-nav button:hover:not(:disabled), .rr-strip-nav button:focus-visible { background: var(--rr-hot); color: #FFFFFF; }
.rr-builds-index li:hover, .rr-builds-index li:focus-within { background: var(--rr-hot); }
.rr-builds-index li:hover *, .rr-builds-index li:focus-within *,
.rr-builds-index li:hover::before, .rr-builds-index li:focus-within::before { color: #FFFFFF; }