:root {
  --measure: 70ch;
  /* --colour-background: hsl(244, 10%, 100%); */
  --colour-background: hsl(54.09, 100%, 97.75%);
  /* --colour-accent: hsla(360, 100%, 35.5%, 1); */
  --colour-accent: hsla(216.37, 100%, 27.75%, 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);

  @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;
}


/* 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 {
  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;
}

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;
}

/* <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;
}

/* Covers extra <p> tag added by Ghost to <figcaptions> */
figcaption p {
  margin-inline: auto;
}

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;
}

.layout>.kg-width-wide,
.kg-width-wide {
  grid-column: wide-start / wide-end;
}

.layout>.kg-width-full,
.kg-width-full {
  grid-column: full-start / full-end;
}

/* Question the value of styling <pre> tags on Ghost! */

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);
}



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


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

/* Used for month dividers */
.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);
}