:root {
  --measure: 70ch;
  --colour-background: hsl(244, 10%, 100%);
  --colour-accent: hsla(360, 100%, 35.5%, 1);
  --colour-text: hsl(244, 5%, 33%);
  --colour-mid: hsl(350, 5%, 50%);
  --colour-faded: hsl(350, 5%, 70%);
  --gap: 4vw;
  --main: min(var(--measure, 720px), 100% - var(--gap) * 2);
  --wide: minmax(0, calc(var(--gap) * 2));
  --full: minmax(var(--gap), 1fr);
  color-scheme: var(--colour-scheme, light);

  @media (prefers-color-scheme: dark) {
    --colour-scheme: dark;
    --colour-background: hsl(244, 5%, 5%);
    --colour-accent: hsla(360, 100%, 80%, 1);
    --colour-text: hsl(244, 10%, 100%);
    --colour-mid: hsl(350, 5%, 70%);
    --colour-faded: hsl(350, 5%, 30%);
  }
}

*,
*::before,
*::after {
  /* Box sizing rules */
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "kern" 1,
    "liga" 1,
    "onum" 1;
}

html {
  /* Prevent font size inflation */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  /* Sensible defaults */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  min-block-size: 100vh;
  margin-block: 2rem;
  background-color: var(--colour-background);
  color: var(--colour-text);
  word-break: break-word;
  scroll-behavior: smooth;
}

/* body#post {
    --colour-background: hsl(7, 5%, 90%);
    --colour-text: hsl(244, 15%, 25%);
} */

/* HEADER */

body>header {
  margin-block-start: 4rem;
  margin-block-end: 8rem;
  position: relative;
  max-inline-size: var(--main);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

/*.header-text {
	color: hsla(0, 0%, 100%, 50%);
	padding-inline-start: 1rem;
	line-height: 1rem;
	z-index: 1;
	letter-spacing: 0.12rem;
}

.circle-container {
	display: flex;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	z-index: -10;
}

.circle {
	clip-path: circle(2rem);
	background-color: hsla(7, 70%, 35%, 50%);
	shape-outside: circle(50%);
	width: 4rem;
	height: 4rem;
	margin-inline-end: -1rem;
}

.header-text h1 {
	margin: 0;
	color: white;
	letter-spacing: 0.07rem;
}*/

header {
  color: var(--colour-mid);
}

header h1 {
  margin-block-end: 0.25rem;
}

header a {
  text-decoration: none;
}

/* FOOTER */

footer {
  font-size: 0.75rem;
  text-align: center;
  color: var(--colour-faded);
  margin-block-start: 8rem;
}

.footnotes {
  font-size: 0.85rem;
  color: var(--colour-text);
  margin-block-start: 4rem !important;
  margin-inline-start: -40px;
  text-align: left;
}

footer nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0;
}

footer a {
  text-decoration: none;
}

footer p {
  max-inline-size: 100%;
}

/* -----------------------------------
Typography
-------------------------------------- */

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
  font-weight: 600;
  font-size: 1rem;
}

h1 {
  color: var(--colour-accent);
}

a {
  color: var(--colour-text);
  text-decoration-color: var(--colour-mid);
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
}

a:hover {
  transition: all 0.1s ease-in;
  color: var(--colour-accent);
  text-underline-offset: 4px;
}

hr {
  margin-inline: auto;
  width: calc(var(--measure) / 2);
  border: none;
  border-top: 1px solid var(--colour-faded);
}

p,
ol,
ul {
  font-weight: normal;
  margin: 1em 0;
  font-feature-settings: "onum" 1;
}

p,
h1,
h2,
h3 {
  max-inline-size: var(--measure);
}

ul,
ol>*+* {
  margin-block-start: 1rem;
}

details {
  cursor: pointer;
}

/* Make images easier to work with */
img,
picture {
  max-inline-size: 100%;
  max-block-size: 85vh;
  display: block;
  height: auto;
  width: auto;
  margin-inline: auto;
}

.image-row img {
  inline-size: 100%;
}

/* <figure> carries 1em margins by default in Safari */
figure {
  margin-inline: 0;
  margin-block: 0;
}

figcaption {
  color: var(--colour-mid);
  font-size: 0.75rem;
  margin-block-start: 0.5rem;
  max-inline-size: 100%;
  text-align: center;
}

blockquote {
  font-weight: normal;
  padding-left: 2rem;
  border-left-width: 2px;
  border-left-color: var(--colour-accent);
  border-left-style: solid;
  margin-inline: 0;
  font-style: italic;
}

strong {
  font-weight: 600;
}

.label,
time {
  color: var(--colour-mid);
}

fieldset {
  border: 0;
  padding: 0;
}

label {
  display: block;
  color: var(--colour-faded);
  font-size: 0.75rem;
}

input {
  line-height: 1.5rem;
  margin-block-start: 0.5rem;
  border-style: solid;
  border-width: 1px;
  border-color: var(--colour-faded);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

input[type="submit"] {
  border-color: var(--colour-accent);
  background-color: var(--colour-accent);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--colour-background);
  cursor: pointer;
}

/* IDIOMS */

/*
  .stack gives me a baseline vertical rhythm.
  It's rarely left unmodified, either through the custom property --space,
  or context such as .prose
*/

.stack+* {
  margin-block: 0;
}

.stack>*+* {
  margin-block-start: var(--space, 1rem);
}

/*
  .prose is used for long form content, in my case as a baseline for all stories.
*/
.prose {
  --space: 0.5rem;
}

/*  Often redundant, but ensures no space above first child element of .prose */
.prose> :first-child[not:h1] {
  margin-block-start: 0;
}

.prose .page-date {
  --space: 4rem;
}

.prose>.page-description {
  --space: 0rem;
}

.prose h1 {
  --space: 0;
}

/* Increase the space above headings */
.prose :is(h2, h3, h4) {
  --space: 48px;
  margin-block-end: 0;
}

/* Reduce the space under headings */
.prose :is(h1 + *, h2 + *, h3 + *, h4 + *) {
  --space: 12px;
}

/* When images follow one another, mirror the horizontal spacing in any rows */
.prose>figure+figure {
  --space: 24px;
}

/* Add additional space around images */
.prose :is(figure + p, p + figure) {
  --space: 24px;
}

.prose :is(* + blockquote, blockquote + *) {
  --space: 24px;
}

/* Not sure about this? */
/*.prose figure:has(figcaption) + * {
	--space: 4rem;
}*/

.prose :is(* + hr, hr + *) {
  --space: 64px;
}

.prose .image-row+.image-row {
  --space: 24px;
}

.prose>figure+.full:has(figure),
.prose>figure+.wide:has(figure) {
  --space: 24px;
}

.prose>.wide+figure,
.prose>.full+figure {
  --space: 24px;
}

.layout {
  display: grid;
  grid-template-columns:
    [full-start] var(--full) [wide-start] var(--wide) [main-start] var(--main) [main-end] var(--wide) [wide-end] var(--full) [full-end];

  margin-block-end: 8rem;
}

.layout>* {
  grid-column: main-start / main-end;
}

.layout>figure,
.layout>pre,
.wide {
  grid-column: wide-start / wide-end;
}

.layout>code {
  grid-column: main-start / main-end;
}

pre {
  padding: 2rem;
  overflow: auto;
}

pre[data-linenos] {
  padding: 1rem 0;
}

pre table td {
  padding: 0;
}

pre table td:nth-of-type(1) {
  text-align: center;
  user-select: none;
}

pre table {
  width: 100%;
  border-collapse: collapse;
}

pre mark {
  /* Highlights span full width */
  display: block;
  /* Default colour of mark */
  background-color: rgba(254, 252, 232, 0.9);
}

.full {
  grid-column: full-start / full-end;
}

.image-row picture+picture {
  margin-top: 1.4rem;
  display: block;
}

@media (min-width: 610px) {
  .image-row {
    display: flex;
    gap: 1.4rem;
  }

  .image-row picture+picture {
    margin-top: 0;
  }
}

.image-row+.image-row {
  margin-block-start: var(--space, 1.4rem);
}

.image-row picture,
.image-row img {
  margin-bottom: 0;
}

/*figure:has(.image-row) {
	grid-column: full-start / full-end;
}*/

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1.4rem;
}

.image-grid.left {
  grid-template-areas:
    "a b"
    "a c";
}

.image-grid.right {
  grid-template-areas:
    "b a"
    "c a";
}

.image-grid .portrait {
  grid-area: a;
}

.image-grid .area-b {
  grid-area: b;
}

.image-grid .area-c {
  grid-area: c;
}

.image-grid .area-b img,
.image-grid .area-c img {
  object-fit: cover;
  max-block-size: 100%;
  inline-size: 100%;
  block-size: 100%;
  object-position: 50% 50%;
  max-inline-size: 100%;
}

.page-description {
  /*	font-weight: 600;*/
  color: var(--colour-mid);
}

.footnote-reference a {
  text-decoration: none;
}

.page-date {
  font-size: 0.75rem;
  color: var(--colour-faded);
}

.post-index h2 {
  margin-block-start: 8rem;
  color: var(--colour-mid);
}

.post-index h3 {
  line-height: 1.5rem;
  margin-block-start: 4rem;
}

.post-links a {
  --space: 2rem;
  display: block;
  text-decoration: none;
}

.post-links__title {
  color: var(--colour-mid);
  display: block;
}

.post-links a:hover {
  color: var(--colour-text);
}

.post-links a:hover .post-links__title {
  color: var(--colour-accent);
}

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}