:root {
	/**
		Base palette:
		#47103b
		#b1eff2
		#fa9171
		#dce01a
		#f8ed81
		#1b7c6d
		*/
	/* --rp-colour-purple: oklch(28.57% 0.099 337.9); */
	
	/* --rp-colour-purple: hsl(287, 100%, 9%); */
	/* --rp-colour-purple: hsl(258, 64%, 11%); */
	/* --rp-colour-purple: hsl(275, 80%, 12%); */
	/* --rp-colour-purple: hsl(275, 100%, 9%); */
	--rp-colour-purple: hsl(270, 80%, 13%);
	--rp-colour-purple-dark: hsl(265, 100%, 8%);
	--rp-colour-purple-transparent: hsla(269, 79%, 13%, 0.252);

	--rp-colour-blue: oklch(91.14% 0.062 199.86);
	--rp-colour-peach: oklch(76.13% 0.135 37.73);
	--rp-colour-peach: oklch(85% 0.20 40);
	--rp-colour-pink: hsl(347, 83%, 67%);
	--rp-colour-green: hsl(62, 89%, 51%);
	--rp-colour-green: oklch(87.48% 0.140 111.05);
	--rp-colour-yellow: oklch(93.28% 0.13 103.43);
	--rp-colour-sea: oklch(52.89% 0.089 179.62);
	--rp-colour-neutral: oklch(92.79% 0.011 45.72);
	--rp-colour-neutral: hsl(14, 28%, 91%);

	--rp-font-family-display: 'Grandstander Variable', system-ui;
	--rp-font-family-copy: system-ui;

	/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --rp-font-size-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --rp-font-size-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
  --rp-font-size-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
  --rp-font-size-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
  --rp-font-size-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  --rp-font-size-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);

	--rp-line-height-tight: 1.15;
	--rp-line-height-regular: 1.45;

	/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

	--rp-space-4xs: clamp(0.125rem, 0.1033rem + 0.1087vw, 0.1875rem);
	--rp-space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vi, 0.3125rem);
  --rp-space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vi, 0.625rem);
  --rp-space-xs: clamp(0.75rem, 0.6848rem + 0.3261vi, 0.9375rem);
  --rp-space-s: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
  --rp-space-m: clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem);
  --rp-space-l: clamp(2rem, 1.8261rem + 0.8696vi, 2.5rem);
  --rp-space-xl: clamp(3rem, 2.7391rem + 1.3043vi, 3.75rem);
  --rp-space-2xl: clamp(4rem, 3.6522rem + 1.7391vi, 5rem);
  --rp-space-3xl: clamp(6rem, 5.4783rem + 2.6087vi, 7.5rem);

  /* One-up pairs */
	--rp-space-4xs-3xs: clamp(0.125rem, 0.0598rem + 0.3261vw, 0.3125rem);
  --rp-space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vi, 0.625rem);
  --rp-space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vi, 0.9375rem);
  --rp-space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vi, 1.25rem);
  --rp-space-s-m: clamp(1rem, 0.6957rem + 1.5217vi, 1.875rem);
  --rp-space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vi, 2.5rem);
  --rp-space-l-xl: clamp(2rem, 1.3913rem + 3.0435vi, 3.75rem);
  --rp-space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vi, 5rem);
  --rp-space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vi, 7.5rem);

	--rp-container-width: 60rem;

	--rp-media-border-width: 0.3125rem;
}

/* grandstander-latin-wght-normal */
@font-face {
  font-family: 'Grandstander Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/grandstander-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* grandstander-latin-ext-wght-normal */
@font-face {
  font-family: 'Grandstander Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/grandstander-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	min-height: 100%;
	background-color: var(--rp-colour-purple-dark);
}

body {
	min-height: 100%;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background: var(--rp-colour-purple);
	--background-vignette-size: calc(100% - 25vmin);
	background-image: 
		linear-gradient(to left, transparent var(--background-vignette-size), var(--rp-colour-purple-dark)),
		linear-gradient(to right, transparent var(--background-vignette-size), var(--rp-colour-purple-dark)),
		linear-gradient(to top, transparent var(--background-vignette-size), var(--rp-colour-purple-dark)),
		linear-gradient(to bottom, transparent var(--background-vignette-size), var(--rp-colour-purple-dark));
	background-repeat: no-repeat;
	color: var(--rp-colour-neutral);
	margin: 0;
	font-size: var(--rp-font-size-0);
	padding: var(--rp-space-m-l);
	line-height: var(--rp-line-height-regular);
}

:focus {
	outline: solid max(1px, 0.125rem) var(--rp-colour-neutral);
	outline-offset: 0.125em;

	&:not(:focus-visible) {
		outline: none;
	}
}

h1 {
	font-size: var(--rp-font-size-4);
	line-height: var(--rp-line-height-tight);
	font-family: var(--rp-font-family-display);
	font-weight: 500;
}

* + h1 {
	margin-top: var(--rp-space-l);
}

h1 + * {
	margin-top: var(--rp-space-xs);
}

h2, .rp-type--h2 {
	font-size: var(--rp-font-size-3);
	line-height: var(--rp-line-height-tight);
	font-family: var(--rp-font-family-display);
	font-weight: 500;
}

* + h2:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-m);
}

h3 {
	font-family: var(--rp-font-family-display);
	line-height: var(--rp-line-height-tight);
	font-size: var(--rp-font-size-2);
	font-weight: 500;
}

* + h3:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-m);
}

hgroup {
	p {
		font-weight: bold;
		opacity: 0.80;
	}

	* + p {
		margin-top: -0.375em;
	}
	
	p + * {
		margin-top: calc(-10em / 60);
	}

	& + * {
		margin-top: var(--rp-space-s-m)
	}
}

ul, ol {
	> * + * {
		margin-top: var(--rp-space-3xs)
	}
}

.rp-site-hgroup {
	h1 {
		font-size: var(--rp-font-size-5);
	}

	p {
		font-size: var(--rp-font-size-3);
	}
}

.rp-text-nowrap {
	white-space: nowrap;
}

/* https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss */
.rp-visually-hidden {
	position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  /*If margin is set to a negative value it can cause text to be announced in
   * the wrong order in VoiceOver for OSX */
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  /* `clip` is needed for IE11 support */
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  border: 0 !important;

  /* For long content, line feeds are not interpreted as spaces and small width
   * causes content to wrap 1 word per line:
   * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
  white-space: nowrap !important;

  /* Prevent users from selecting or copying visually-hidden text. This prevents
   * a user unintentionally copying more text than they intended and needing to
   * manually trim it down again. */
  user-select: none;

	/* Absolute positioning has the unintended consequence of removing any
   * whitespace surrounding visually hidden text from the accessibility tree.
   * Insert a space character before and after visually hidden text to separate
   * it from any visible text surrounding it. */
	&::before {
    content: "\00a0";
  }

  &::after {
    content: "\00a0";
  }
}

* + .rp-space-before--2xs-xs:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-2xs-xs)
}

* + .rp-space-before--xs-s:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-2xs-xs)
}

* + .rp-space-before--s-m:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-s-m)
}

* + .rp-space-before--m-l:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-m-l);
}

* + .rp-space-before--l-xl:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-l-xl);
}

* + .rp-space-before--xl-2xl:not(.rp-visually-hidden) {
	margin-top: var(--rp-space-xl-2xl);
}

.rp-rhythm-3xs > * + * {
	margin-top: var(--rp-space-3xs)
}

img, svg {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

img:not([src$=".png"],.rp-image--transparent) {
	/* Block space visually while non-transparent images are loading */
	background-color: var(--rp-colour-neutral);
	/* Ensure alt text is legible */
	color: var(--rp-colour-purple);
}

table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	caption-side: top;
	text-align: left;
	font-size: inherit;
	border-block: solid 1px;
	color: inherit;	
}

caption {
	text-align: left;
	padding-bottom: var(--rp-space-xs)
}

td, th {
	padding-block: var(--rp-space-3xs)
}

tr {
	border-top: solid 1px;
}

[scope="rowgroup"] {
	font-size: var(--rp-font-size-1);
}

[scope="row"] {
	font-weight: normal;
}

.rp-back-link + * {
	margin-top: var(--rp-space-m-l)
}

.rp-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rp-space-2xs);

	+ * {
		margin-top: var(--rp-space-m-l);
	}
}

.rp-table-column--numeric {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	text-align: right;
}

main {
	max-width: var(--rp-container-width);
	margin-inline: auto;
}

* + main,
main + * {
	margin-top: var(--rp-space-l-xl);
}

footer {
	max-width: var(--rp-container-width);
	margin-inline: auto;
}

small {
	font-size: var(--rp-font-size-0);
}

:any-link {
	color: currentColor;
	text-decoration-thickness: max(2px,0.125rem);
  text-underline-offset: max(3px, 0.1875em);
	position: relative;

	&:hover {
		color: var(--rp-colour-green);
		text-decoration-thickness: max(4px, 0.25rem);
		text-underline-offset: max(4px, 0.25em);
	}

	&:active {
		text-underline-offset: max(2px, 0.125em);
		top: max(2px, 0.125em);
		/* Avoid a flash of ink skipping when clicking
		 * which looks more pleasant to my eye */
		text-decoration-skip-ink: none;
	}
}

.rp-link--previous {
	display: inline-flex;
	align-items: center;
	gap: var(--rp-space-4xs);

	/* https://github.com/alphagov/govuk-frontend/blob/5ae4fe11fbb7c1b6b34f55e6318281795f8ddb9d/packages/govuk-frontend/src/govuk/components/back-link/_index.scss#L41-L50 */
	&::before {
		content: '';
		display: block;
		width: calc(7em / 16);
		height: calc(7em / 16);
		border: solid max(1px, 0.0625em) var(--rp-colour-green);
		border-left: 0;
		border-bottom: 0;
		transform: rotate(225deg);
		/* 
			Ensure width stays what we need it to be 
			to correctly display an arrow
		  if content of the link is too wide 
		*/
		flex-shrink: 0;
	}
}

.rp-link--next {
	display: inline-flex;
	align-items: center;
	gap: var(--rp-space-4xs);
	
	&::after {
		content: '';
		width: calc(7em / 16);
		height: calc(7em / 16);
		border: solid max(1px, 0.0625em) var(--rp-colour-green);
		border-left: 0;
		border-bottom: 0;
		transform: rotate(45deg);
		/* 
			Ensure width stays what we need it to be 
			to correctly display an arrow
		  if content of the link is too wide 
		*/
		flex-shrink: 0;
	}
}

.rp-link--with-thumbnail {
	display: flex;
	align-items: center;
	gap: var(--rp-space-3xs-2xs);

	font-family: var(--rp-font-family-display);
	font-size: var(--rp-font-size-1);
	line-height: var(--rp-line-height-tight);
	text-decoration: none;

	/* Ensure there's a minimum beyond which the link won't shrink */
	min-width: 15rem;
	/* Gives a better chance of the name to reflow on two lines */
	max-width: 21rem;
	text-wrap: balance;

	img {
		max-width: 5rem;
		aspect-ratio: 1;
		height: auto;
		object-fit: cover;
	}

	&.rp-link--previous img {
		transform-origin: center right;
	}

	&.rp-link--next img {
		transform-origin: center left;
	}

	&:hover {
		img {
			transform: scale(1.05);
		}
	}

	&:active {
		top: 0;
		img {
			transform: none;
		}
	}
}

.rp-logo {
	width: 2.5em;
	height: auto;
}

.rp-header {
	--gap: var(--rp-space-s);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gap);

	> * {
		margin: 0;
	}

	:any-link {
		text-decoration: none;
		color: currentColor;

		&:hover {
			transform: scale(1.025)
		}

		&:active {
			transform: scale(0.95)
		}

		border-radius: 0.5rem;
	}
}

.rp-home-link {
	display: flex;
	align-items: center;
	gap: var(--rp-space-xs);

	svg {
		flex: none;
	}

	.rp-home-link__text {
		position: relative;
		top: calc(4em / 39);
	}
}

.rp-nav-links {
	font-weight: 300;
	font-family: var(--rp-font-family-display);
	font-size: 1.2em;
	/* Not ideal, but fixes alignment */
	margin-bottom: calc(-1 * var(--rp-space-2xs));

	display: flex;
	gap: var(--rp-space-s);

	--angle: 1deg;
	> :nth-child(odd) {
		transform: rotate(var(--angle));
	}

	> :nth-child(even) {
		transform: rotate(calc(-1 * var(--angle)));
	}

	[aria-current] {
		text-decoration: underline wavy max(2px, 0.125rem) var(--rp-colour-green);
		text-underline-offset: max(3px, 0.1875em);
	}
}

.rp-pagination {
	display: flex;
	list-style-type: none;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--rp-space-2xs-xs);
	
	> * {
		flex: 1;
	}

	a:not([href]) {
		visibility: hidden;
	}

	.rp-pagination__next {
		text-align: right;
		justify-content: flex-end;
	}
}



/* https://smolcss.dev/#smol-css-grid */
.rp-project-grid {
	list-style-type: none;

	--min: 13rem;

	display: grid;
	/* min() with 100% prevents overflow
	in extra narrow spaces */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr));	

	align-items: stretch;
}

.rp-image-grid {
	--gap: max(2px, 0.125rem);
	display: grid;
	grid-template-columns: calc(2 * (100% - var(--gap)) / 3) 1fr;

	gap: var(--gap);

	> * {
		grid-column: 2;
		width: 100%;
		aspect-ratio: 1;
		background-color: var(--rp-colour-purple-transparent);
	}

	img {
		aspect-ratio: 1;
		object-fit: cover;
		height: 100%;
	}

	> :first-child {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
}

.rp-panel {
	--background-colour: var(--rp-colour-neutral);
	--gap: var(--rp-media-border-width);
	background: var(--background-colour);
	color: var(--rp-colour-purple);

	display:block;
	padding: var(--gap);

	border: solid 1px transparent;
  border-image: linear-gradient(to bottom, white, hsl(250, 6%, 90%) 60%);
  border-image-slice: 1;

	a,
	a:hover,
	a:active {
		color: currentColor
	}
}

.rp-panel--prose {
	padding: var(--rp-space-2xs-xs)
}

.rp-project-card {
	text-decoration: none;
	display: grid;
	
	grid-template-rows: auto calc(var(--rp-line-height-regular) * 1em);
	grid-template-rows: auto 1lh;

	/* Align the title to the bottom of the grid cell
	 * so it overlaps the image above when it has more
	 * than one line */
	align-items: end;

	.rp-project-card__overlay {
		background: var(--background-colour);
		position: relative;
	}

	.rp-project-card__title {
		font-size: var(--rp-font-size-1);
		font-family: var(--rp-font-family-display);
		line-height: var(--rp-line-height-tight);
		text-wrap: balance;
		
		padding-top: var(--gap);
		padding-inline: var(--gap);
	}

	.rp-project-card__media {
		aspect-ratio: 1;
		object-fit: cover;
	}

	.rp-project-card__tags {
		font-size: 1rem;
		position: absolute;
		bottom: 100%;
		left: 0;
		background: inherit;
		padding: 0 var(--gap);
		/* Overlap slightly with title to prevent sliver of image
		 * showing when the card is not hovered */
		border-bottom: solid 1px var(--rp-colour-neutral);
		margin-bottom: -1px;
		
	}

	&:hover,
	&:active {
		color: var(--rp-colour-purple);
	}
}

.rp-link-card {
	text-decoration-line: none;

	font-family: var(--rp-font-family-display);
	font-size: var(--rp-font-size-1);
	line-height: 1;
	text-wrap: balance;

	color: var(--rp-colour-purple);

	&:hover,
	&:active {
		color: var(--rp-colour-purple);
	}

	> * + * {
		margin-top: var(--gap);
	}
}

.rp-link-card__title {
	padding: var(--gap) var(--gap) 0;
}

.rp-article-list {
	list-style-type: none;
	padding: 0;

	> * + * {
		margin-top: var(--rp-space-2xl-3xl);
	}

	> :nth-child(even) {
		rotate: 1deg;
	}

	> :nth-child(odd) {
		rotate: -1deg;
	}
}

.rp-post-content {
	--gap: var(--rp-space-s);
	--border-color: currentColor;
	display: flex;
	gap: var(--gap);
	flex-wrap: wrap;

  .rp-post-content__heading {
		position: relative;
		padding-bottom: calc(1 / 2 * var(--gap));
		padding-left: calc(var(--gap) + var(--rp-media-border-width));

		&::before {
			content: '';
			z-index: -1;
			display: block;
			position: absolute;
			border-left: solid var(--rp-media-border-width) currentColor;
			top: calc(-1  * var(--gap));
			bottom: 0;
			left: 0;
		}

		& + * {
			margin-top: var(--gap);
		}
	}

	.rp-post-content__media {
		--golden-ratio: 1.61803;
		flex: var(--golden-ratio) 1 100%;
		border: solid var(--rp-media-border-width) var(--rp-colour-neutral);
		background-color: var(--rp-colour-neutral);
		color: var(--rp-colour-purple);

		img {
			height: 100%;
			object-fit: cover;
			aspect-ratio: 4/3;
		}
	}

	.rp-post-content__prose {
		flex: 1;
		margin-left: var(--gap);
	}

	@media (width >= 43rem) {
		.rp-post-content__media {
			flex-basis: 0;
			/*
			 * Work around Safari (poss. only iOS) basing the height of the image
			 * no on the height of the `__media` element, but the whole page
			 * (likely due to lack of any other element up in the DOM with a set height) 
			 */
			position: relative;

			img {
				position: absolute;
				inset: 0;
			}
		}

		.rp-post-content__prose {
			margin-left: 0;
			max-width: 22rem;
		}

		.rp-post-content__heading {
			padding-left: 0;

			&::before {
				left: calc(-1 * var(--gap));
				right: 0;
				top: auto;
				bottom: 0;
				border-top: solid var(--rp-media-border-width) currentColor;
			}
		}
	}
}

.rp-post-content--details {
	--gap: var(--rp-space-xl);
	align-items: center;

	.rp-post-content__prose {
		margin: 0;
	}

	.rp-post-content__media {
		aspect-ratio: calc(4 / 3);
		transform: rotate(0.5deg);
	}

	@media (width >= 43rem) {
		--gap: var(--rp-space-m-l);

		.rp-post-content__prose {
			/* Slightly more than the image to compensate for small size of what's being rotated */
			transform: rotate(-1.5deg);
		}
	}
}

.rp-post-prose {
	--rp-post-margin-block-start: var(--rp-space-s);

	:where(p, ul, dl,table, nav, div, iframe) {
		+ & {
			margin-top: var(--rp-post-margin-block-start);
		}
	}

	ul {
		padding-left: 1em;
		list-style-type: square;
	}
}

/* 
	TODO: Extract the concept of a wonky grid
	alternating the angle of its items, with the possibility
	to compensate for the grid being already in a rotated item
 */
.rp-grid--overlap {
	--overlap-size: max(3px, 0.1875rem);
	--box-shadow-y: max(2px, 0.125em);
	--box-shadow-spread: max(3px, 0.1875em);
	--angle: 1deg;

	/* Create a stacking context, for safety */
	position: relative;
	z-index: 0;

	> * {
		margin: calc(-1 * var(--overlap-size));
		box-shadow: 0 var(--box-shadow-y) var(--box-shadow-spread) var(--rp-colour-purple-transparent);

		position: relative;

		&:nth-child(2n){
			z-index: 2;
		}
	
		&:nth-child(3n){
			z-index: 3;
		}
	
		&:nth-child(5n){
			z-index: 5;
		}
	
		&:nth-child(7n){
			z-index: 7;
		}

		
		&:nth-child(odd) {
			transform: rotate(var(--angle));
		}

		&:nth-child(even) {
			transform: rotate(calc(-1 * var(--angle)));
		}

		&:has(a:focus),
		&:has(a:hover) {
			transform: scale(1.025);
			z-index: 10;
			--box-shadow-x: calc(-1 * max(2px, 0.125em));
		}
	}
}

.rp-snake-grid--vertical,
.rp-snake-grid--horizontal,
.rp-snake-grid--contained {
	display:grid;
	grid-auto-rows: auto;
	list-style: none;

	img {
		width: 100%;
		aspect-ratio: 1;
		height: auto;
		object-fit: cover;
	}

	a {
		display: block;
	}
}

.rp-snake-grid--vertical {
	grid-template-columns: repeat(3,1fr);

	> :nth-child(12n+1),
	> :nth-child(12n+8) {
			grid-column-end: span 2;
			grid-row-end: span 2;
			z-index: 9;
	}
}

.rp-snake-grid--horizontal {
	grid-template-columns: repeat(5, 1fr);

	> :nth-child(12n+1),
	> :nth-child(12n+6) {
		grid-column-end: span 2;
		grid-row-end: span 2;
		z-index: 9;
	}
}

.rp-container--inline-size {
	container-type: inline-size;
}

.rp-snake-grid--contained {

	@container (width <= 32rem) {
		grid-template-columns: repeat(3,1fr);

		> :nth-child(12n+1),
		> :nth-child(12n+8) {
				grid-column-end: span 2;
				grid-row-end: span 2;
				z-index: 9;
		}
	}

	@container (width > 32rem ) {
		grid-template-columns: repeat(5, 1fr);

		> :nth-child(12n+1),
		> :nth-child(12n+6) {
			grid-column-end: span 2;
			grid-row-end: span 2;
			z-index: 9;
		}
	}
}

.rp-side-by-side {
	display: flex;
	align-items: center;
	gap: var(--rp-space-l-xl);
	flex-wrap: wrap;

	> * {
		flex: 1.25;
		min-width: min(100%, 25rem);
	}

	.rp-side-by-side__media {
		flex: 1;
		min-width: none;		
	}
}

.rp-side-by-side--start {
	align-items: flex-start;
}

.rp-dimensions-unit {
  h2 & {
    font-size: var(--rp-font-size-2);
  }
  
  h3 & {
    font-size: var(--rp-font-size-1);
  }
}

.rp-decoration-list {
	dt {
		font-weight: bold;
		text-transform: capitalize;

		&::after {
			content: ': '
		}
	}

	dt, dd {
		display: inline;
	}

	border-block: solid 1px;
	padding-block: var(--rp-space-3xs-2xs);

	> div + div{
		margin-top: var(--rp-space-2xs-xs)
	}
}

.rp-timeline-item-date {
	display: table;
	font-family: var(--rp-font-family-display);
	font-weight: 500;
	font-size: var(--rp-font-size-2);
	text-align: center;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;

	span {
		display: block;
	}

	span:first-child {
		font-size: 1.6875em;
		letter-spacing: -0.0625em;

		+ * {
			margin-top: -0.3125em;
		}
	}

	span:nth-child(3) {
		font-size: 0.75em;

		* + & {
			margin-top: -0.125em;
		}
	}

	span:nth-child(4) {
		font-size: 0.6875em;
		
		/* * + & {
			border-top: 1px solid transparent;
			padding-top: 0.75rem;
			background-image: linear-gradient(currentcolor, currentcolor);
			background-size: 50% 1px;
			background-repeat: no-repeat;
			background-position: center top;
			background-origin: border-box;
			margin-top: 0.5rem;
		} */
	}
}

.rp-timeline-item-title {
	font-family: var(--rp-font-family-display);
	line-height: var(--rp-line-height-tight);
	font-size: var(--rp-font-size-2);
	font-weight: 500;
}

.rp-attachment-grid {
	list-style-type: none;

	img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
	}

	/* Default to a 2 column grid */
	&:not(:has(> :last-child:nth-child(1))) {
		display: grid;
		grid-template-columns: repeat(6, 1fr);


		> * {
			grid-column: span 3;
		}
	}

	/* Make the display slightly fancier for odd shaped grids */
	&:has(> :last-child:nth-child(odd)) {
		> :first-child {
			grid-column: span 4;
			grid-row: span 2;
		}

		> :first-child ~ * {
			grid-column: span 2;
		}

		> :nth-child(3) ~ * {
			grid-column: span 3;
		}
	}
}

.rp-timeline-item--text-only {
	display: grid;
	--gap: var(--rp-space-s);
	gap: var(--gap);
	/* 
		We'll use the second column of the grid 
		to render a border that spans from top to bottom of the grid
	*/
	grid-template-columns: auto auto 1fr;

	&::after {
		content: '';
		grid-column: 2;
		grid-row: 1;
		border-left: solid var(--rp-media-border-width) currentColor;
	}

	.rp-timeline-item__date {
		margin-bottom: calc(2 * var(--gap))
	}

	.rp-timeline-item__content {
		align-self: end;
		margin-bottom: var(--gap);
		position: relative;
		padding-bottom: var(--gap);
		/* Shrink the content to fit short message */
		max-width: max-content;
		/* 
			And keep longer message's line length reasonable
			while allowing the underlying border to only span
			the length of a shorter message
		 */
		> * {
			max-width: 35rem;
		}

		&::after {
			content: '';
			z-index: -1;
			display: block;
			position: absolute;
			border-left: solid var(--rp-media-border-width) currentColor;
			left: calc(-1 * var(--gap));
			right: 0;
			top: auto;
			bottom: 0;
			border-top: solid var(--rp-media-border-width) currentColor;
		}
	}

	
}

.rp-timeline-item {
	display: grid;
	grid-template-columns: auto 1fr;
	--gap: var(--rp-space-s);
	gap: var(--gap);

	img {
		width: 100%;
		aspect-ratio: 1;
		height: auto;
		object-fit: cover;
	}

	@media (width < 50rem) {
		> :not(:first-child) {
			grid-column: 2;
		}

		.rp-timeline-item__content {
			position: relative;
			margin-left: var(--gap);
			padding-left: var(--gap);

			.rp-timeline-item-title {
				margin-top: var(--rp-space-3xs);
			}

			&::before {
				content: '';
				z-index: -1;
				display: block;
				position: absolute;
				border-left: solid var(--rp-media-border-width) currentColor;
				top: calc(-1 * var(--gap));
				bottom: 0;
				left: 0;
			}
		}
	}

	@media (width >= 50rem) {
		grid-template-columns: auto 1fr 22rem;

		.rp-timeline-item__content {
			grid-column: 3;
			align-self: end;
			margin-bottom: calc(2 * var(--gap));
			position: relative;
			padding-bottom: var(--rp-space-xs);

			&::after {
				content: '';
				z-index: -1;
				display: block;
				position: absolute;
				border-left: solid var(--rp-media-border-width) currentColor;
				left: calc(-1 * var(--gap));
        right: 0;
        top: auto;
        bottom: 0;
        border-top: solid var(--rp-media-border-width) currentColor;
			}
		}
	}
}

.rp-timeline-item__date {
	grid-column: 1;
	align-self: start;

	span:nth-child(3) {
		position: relative;
		padding-bottom: var(--gap);
		/* 
			We only want a margin if we're displaying the time 
			as margins won't collapse inside a grid
		*/
		& + * {
			margin-top: var(--gap);
		}

		&::after {
			content: '';
			z-index: -1;
			display: block;
			position: absolute;
			border-left: solid var(--rp-media-border-width) currentColor;
			left: 0;
			right: calc(-1 * var(--gap));
			top: auto;
			bottom: 0;
			border-top: solid var(--rp-media-border-width) currentColor;
		}
	}
}