:root {
  /* -----------------------------------------------------------
     Root font size for responsive scaling
     -----------------------------------------------------------
     Base: 16px on desktop
     On smaller screens, reduce slightly to fit mobile better
  ----------------------------------------------------------- */
  font-size: 100%;
  /* 16px */
  /* -----------------------------------------------------------
     Fonts
  ----------------------------------------------------------- */
  --font-body: Alegreya, Georgia, serif;
  --font-heading: Alegreya Sans, Helvetica, sans-serif;
  --font-subtitle: Alegreya Sans SC, "Courier New", monospace;
  /* -----------------------------------------------------------
     Typography sizes (all in rem)
  ----------------------------------------------------------- */
  --size-body: 1.25rem;
  /* 20px on desktop */
  --size-body-mobile: 1.2rem;
  /* 19.2px on mobile */
  --line-height-body: 1.75rem;
  /* 28px */
  --line-height-body-mobile: 1.5rem;
  /* 24px */
  --size-h1: 2rem;
  /* 32px */
  --size-h1-mobile: 1.75rem;
  /* 28px */
  --size-site-title: 2.2rem;
  /* 35px */
  --size-site-subtitle: 1.1rem;
  /* 18px */
  --size-date: 1rem;
  /* 16px */
  --size-subtitle: 1.25rem;
  /* 20px */
  --size-caption: 0.8rem;
  --size-caption-vw: 0.25vw;
  /* -----------------------------------------------------------
     Colors
  ----------------------------------------------------------- */
  --color-text: #000;
  --color-muted: #555;
  --color-link: #1e824c;
  --color-background: #fff;
  --color-accent: #68f;
  /* -----------------------------------------------------------
     Spacing (all in rem)
  ----------------------------------------------------------- */
  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.375rem;
  /* 6px */
  --space-body-vertical: 5rem;
  /* 80px */
  --space-body-horizontal: 20rem;
  /* 320px */
  --space-body-vertical-mobile: 2rem;
  /* 32px */
  --space-body-horizontal-mobile: 2rem;
  /* 32px */
  /* -----------------------------------------------------------
     Other
  ----------------------------------------------------------- */
  --radius-img: 0.125rem;
  /* 2px */
}
@media (max-width: 50rem) {
  :root {
    /* 800px */
    font-size: 92.5%;
    /* ~14.8px */
  }
}

/*
 * Base styles
 */
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  margin: var(--space-body-vertical) var(--space-body-horizontal);
}

h1, h2 {
  font-family: var(--font-heading);
  line-height: 1.2;
  /* or 120% of font size */
}

/* Responsive adjustments */
@media (max-width: 50rem) {
  body {
    font-size: var(--size-body-mobile);
    line-height: var(--line-height-body-mobile);
    margin: var(--space-body-vertical-mobile) var(--space-body-horizontal-mobile);
  }

  h1 {
    font-size: var(--size-h1-mobile);
    line-height: 1.3;
    /* slightly looser on small screens */
  }
}
/*
 * Links
 */
a,
a:visited {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/*
 * Content elements
 */
img,
li {
  margin: 0.5em 0;
}

img {
  border-radius: var(--radius-img);
  max-width: 90%;
  height: auto;
}

.centre-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Site sections
 */
#header {
  padding: var(--space-xs) 0;
}

#header .big {
  font-family: var(--font-heading);
  font-size: var(--size-site-title);
  font-weight: bold;
}

#header .big a {
  color: var(--color-text);
}

#header .small {
  font-size: var(--size-site-subtitle);
  color: var(--color-muted);
  padding-left: var(--space-xs);
}

#nav {
  padding: var(--space-sm) 0;
}

#footer {
  padding: var(--space-xs);
  text-align: center;
}

/*
 * Post metadata
 */
.essay-date {
  padding: var(--space-xs);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--size-date);
  color: var(--color-muted);
}

.subtitle {
  font-family: var(--font-subtitle);
  font-size: var(--size-subtitle);
}

.post-title a {
  color: var(--color-text);
}

.post-title a:hover {
  text-decoration: underline;
  color: var(--color-text);
}

blockquote {
  margin-left: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--color-muted);
  /* optional decorative line */
  color: var(--color-text);
  position: relative;
}

.image-caption {
  font-size: calc(var(--size-caption) + var(--size-caption-vw));
  line-height: 1.4;
  color: var(--color-muted);
  margin-top: 0.25rem;
  text-align: center;
}

.pagination {
  display: flex;
  justify-content: center;
  /* center horizontally */
  align-items: center;
  /* align vertically if needed */
  gap: 1rem;
  /* space between links */
  margin-top: 3rem;
  /* space above pagination */
  padding: 1rem 0;
  /* optional vertical padding */
  text-align: center;
}

.pagination a {
  color: var(--color-link);
  text-decoration: none;
}

.pagination a:hover {
  text-decoration: underline;
}

.pagination span {
  font-size: var(--size-body);
  color: var(--color-muted);
}

.post-preview {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-muted);
}

.post-preview .post-title {
  margin: 0.25rem 0 0.25rem;
  /* small gap below title */
  line-height: 1.3;
  /* clean spacing if title wraps */
}

.post-preview .post-date {
  display: block;
  /* ensure it's on its own line */
  margin: 0 0 0.75rem;
  /* slightly more space before excerpt */
  font-size: var(--size-date);
  color: var(--color-muted);
}

header.title {
  margin-bottom: 1.5rem;
  /* space between header cluster and essay body */
  text-align: left;
  /* or center, if you prefer */
}

header.title h1 {
  margin: 1rem 0 0.25rem;
  /* keep title close to subtitle */
  line-height: 1.2;
  /* stop wrapping lines from colliding */
}

header.title .subtitle {
  margin: 0 0 0.75rem;
  /* a little more breathing room before date */
  font-size: var(--size-subtitle);
  font-family: var(--font-subtitle);
  color: var(--color-muted);
}

header.title .essay-date {
  display: block;
  /* ensures it sits on its own line */
  margin: 0;
  /* remove extra spacing */
  font-size: var(--size-date);
  font-style: italic;
  color: var(--color-muted);
}