@charset "UTF-8";

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

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root {
  --color-white: #fff9f0;
  --color-black: #1a1a1a;
  --color-cyan: #9df1f1;
  --color-crimson: #8c1d1d;
  --color-dark-teal: #0d5e5e;
  --color-cream-pink: #fdf7f7;
  --color-flu-blue: #1dcece;
  --color-sal-pink: #f89bae;

  --color-teal-alt-foreground: var(--color-dark-teal);
  --color-teal-alt-background: var(--color-cream-pink);
  --color-teal-highlight: #fcff33;
  --color-crimson-alt-foreground: var(--color-crimson);
  --color-crimson-alt-background: var(--color-cyan);

  --color-black-alt-foreground: var(--color-black);
  --color-black-alt-background: var(--color-sal-pink);

  --color-black-alt2-foreground: var(--color-black);
  --color-black-alt2-background: var(--color-flu-blue);

  --color-teal-foreground: var(--color-teal);
  --color-teal-background: var(--color-white);

  --color-crimson-foreground: var(--color-crimson);
  --color-crimson-background: var(--color-white);

  --color-black-foreground: var(--color-black);
  --color-black-background: var(--color-white);

  --color-primary-text: var(--color-black);
  --color-primary-background: var(--color-white);
  --color-highlight-text: var(--color-dark-teal);
  --color-highlight-background: var(--dark-teal);
  font-size: 16pt;
}
/* ── Base ───────────────────────────────────────────────────── */
/* YOUR STYLES HERE: font-family, font-size, color, background */
html {
  background-color: var(--color-dark-teal);
}

body {
  background-color: var(--color-primary-background);
  color: var(--color-primary-text);
  line-height: 1.7;
  font-family:
    'Atkinson Hyperlegible Next',
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    'Apple Color Emoji',
    'Segoe UI Emoji';
}

a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.tag-list a {
  font-weight: 400;
  text-decoration: underline;
}

a:hover {
  color: var(--color-highlight-text);
  text-decoration: underline;
}
p {
  text-align: justify;
  text-wrap: pretty;
  margin: 1.5rem 0;
}
li p {
  margin: unset;
  text-align: left;
  line-height: 1.5;
}
h1,
h2,
h3,
h4 {
  font-weight: bold;
  text-wrap: balance;
  line-height: 1.3;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
h1 {
  font-size: 2rem;
  text-align: center;
  text-wrap: balance;
  margin-top: unset;
}
h2 {
  font-size: 1.5rem;
  font-weight: 600;
}
h3 {
  font-size: 1.3rem;
  font-weight: 600;
}
h4 {
  font-size: 1.2rem;
  text-decoration: underline;
  font-weight: 600;
}
/* ── Site header ────────────────────────────────────────────── */
/* Classes: .site-header, .site-title, .site-nav, .site-nav a.active */
/* YOUR STYLES HERE: spacing, font treatment, border/rule */
.site-header {
  padding: 2rem 0 1rem;
  background-color: var(--color-dark-teal);
  color: var(--color-white);
  width: 100%;
  margin-bottom: 3rem;
}

.site-title {
  text-decoration: none;
  display: block;
  text-align: center;
  text-wrap: balance;
  font-size: 2rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-bottom: 1rem;
}

.site-header a {
  text-decoration: none;
}
.site-header a:hover {
  color: var(--color-teal-highlight);
}

/* ── Homepage ───────────────────────────────────────────────── */
/* Classes: .homepage-intro, .post-feed */
.site-main {
  max-width: 50rem;
  margin: 0 auto;
  padding: 1rem;
  padding: 1rem 4vw;
}

/* ── Post cards (homepage + list pages) ─────────────────────── */
/* Classes: .post-card, .post-card__image, .post-card__body,
   .post-card__title, .post-card__meta, .post-card__excerpt */
/* YOUR STYLES HERE: card spacing, image sizing, typography */
.post-card {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 1.5rem;
  align-items: center;
  background-color: var(--color-teal-alt-background);
  padding: 2vw;
  border-left: 3px solid var(--color-dark-teal);
}
.post-card h2,
.post-card p {
  margin: 0;
}
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.post-card__image {
  /* Constrain cover images — not full-bleed. Adjust max-width to taste. */
  max-width: 20rem;
  margin: auto;
}
.tag-list-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tag-list__label {
  font-weight: 700;
  white-space: nowrap;
}
.post-card__title {
  font-size: 1.25rem;
}
.post-card__meta {
  font-weight: 500;
}

/* ── Tag pills (shared class used in cards, lists, and single) ── */
/* Class: .tag-list, .tag-list li, .tag-list a */
/* YOUR STYLES HERE: pill shape, colours, font-size */
.tag-list {
  display: inline;
}

/* ── Single post / page ─────────────────────────────────────── */
/* Classes: .single, .single__header, .single__title,
   .single__meta, .single__cover, .single__cover figcaption,
   .single__content, .single__tags */
/* YOUR STYLES HERE: title size, measure (max-width ~65ch), prose styles */
.single__title {
  font-size: 2rem;
}

.single__cover {
  max-width: 28rem;
  margin: auto;
}
.single__meta {
  text-align: center;
  text-wrap: balance;
  font-weight: 500;
}

.single__tags {
  margin-top: 2rem;
}

/* Prose styles — the .single__content div wraps rendered Markdown.
   Restore list styles and add vertical rhythm here. */
.single__content > * + * {
  margin-top: 1em;
}

.single__content ul {
  list-style: disc outside;
  padding-left: 1.5em;
}
.single__content ol {
  list-style: decimal outside;
  padding-left: 1.5em;
}

.single__content blockquote {
  padding-left: 1.5em;
  border-left: 3px solid var(--color-dark-teal);
  opacity: 0.8;
}

.single__content pre {
  overflow-x: auto;
  padding: 1em;
}

.single__content code {
  font-size: 0.9em;
}

.single__content img {
  margin: 1em 0;
}

/* ── Tables ──────────────────────────────────────────────────── */
/* .table-wrapper is added by JS to all tables in .single__content */

/* -- Table colours (edit here to retheme) -- */
.table-wrapper {
  background-color: var(--color-dark-teal);
}
.single__content table {
  background-color: var(--color-dark-teal);
}
.single__content caption {
  background-color: var(--color-teal-alt-background);
  color: var(--color-teal-alt-foreground);
}
.single__content th {
  background-color: var(--color-dark-teal);
  color: var(--color-white);
}
.single__content td {
  background-color: var(--color-teal-alt-background);
  color: var(--color-black);
}
.has-first-column-highlight td:first-child {
  background-color: var(--color-dark-teal);
  color: var(--color-white);
}
.has-first-column-highlight td:first-child a {
  color: var(--color-white);
}
.has-first-column-highlight td:first-child a:hover {
  color: var(--color-teal-highlight);
}
@media (max-width: 640px) {
  .single__content tr {
    border-left: 3px solid var(--color-dark-teal);
  }
  .single__content td {
    background-color: var(--color-teal-alt-background);
  }
  caption {
    border: 2px solid var(--color-dark-teal);
  }
}

/* -- Table structure -- */
.table-wrapper {
  overflow-x: auto;
  padding: 8px;
  margin: 1.5rem 0;
}

.single__content table {
  border-collapse: separate;
  border-spacing: 8px;
  min-width: 600px;
  width: 100%;
}

.single__content caption {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  text-align: center;
  caption-side: top;
}

.single__content th {
  font-weight: 600;
  padding: 0.5em 0.8em;
  text-align: center;
  border: none;
}

.single__content td {
  padding: 0.5em 0.8em;
  text-align: center;
  border: none;
  font-weight: 400;
}

/* First-column highlight modifier — wrap table in a div with this class */
.has-first-column-highlight td:first-child {
  text-align: right;
  font-weight: 600;
}

/* Mobile: stack cells, show column header as inline label */
@media (max-width: 640px) {
  .table-wrapper {
    padding: 0;
    background-color: transparent;
  }

  .single__content table {
    min-width: unset;
    width: 100%;
    border-spacing: 0;
    background-color: transparent;
  }

  .single__content thead th {
    display: none;
  }

  .single__content tr {
    display: block;
    margin-bottom: 1rem;
  }

  .single__content td {
    display: block;
    text-align: left;
    padding: 0.4em 0.8em;
  }

  .single__content td[data-heading]:not([data-heading=''])::before {
    content: attr(data-heading) ': ';
    font-weight: 600;
  }

  .has-first-column-highlight td:first-child {
    text-align: left;
  }

  .has-first-column-highlight td:first-child::before {
    content: unset !important;
  }
}

/* ── Table of contents ──────────────────────────────────────── */
/* Classes: .toc, .toc summary, .toc ul, .toc a */
/* Hugo generates nested <ul> inside the <nav>. */
/* YOUR STYLES HERE: background, border, font, indentation */
.toc {
  margin: 1rem 0;
}

.toc ul {
  padding-left: 1em;
}

/* ── Post navigation (prev / next) ──────────────────────────── */
/* Classes: .post-nav, .post-nav__prev, .post-nav__next, .post-nav__label */
/* YOUR STYLES HERE: layout, spacing, link treatment */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
}

.post-nav a {
  text-decoration: none;
}

.post-nav__next {
  text-align: right;
  margin-left: auto;
}

/* ── List pages (/posts/, /tags/philosophy/, etc.) ──────────── */
/* Classes: .list-page, .list-page__header, .list-page__intro,
   .post-list, .post-list__item, .post-list__title,
   .post-list__meta, .post-list__excerpt */
/* YOUR STYLES HERE: spacing between items, heading sizes */
.post-list__item {
  margin-bottom: 2rem;
}

/* ── Terms page (/tags/, /categories/) ──────────────────────── */
/* Classes: .terms-page, .terms-page__intro, .terms-list,
   .terms-list__count */
/* YOUR STYLES HERE: layout (flex-wrap, grid, etc.), link styling */
.terms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ── Pagination ─────────────────────────────────────────────── */
/* Hugo's _internal/pagination.html generates a <ul class="pagination"> */
/* YOUR STYLES HERE: layout, active state, colours */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.pagination li {
  display: inline;
}

/* ── Footer ─────────────────────────────────────────────────── */
/* Classes: .site-footer, .social-links, .social-links a */
/* YOUR STYLES HERE: spacing, border-top, social link treatment */
.site-footer {
  margin-top: 2rem;
  background-color: var(--color-dark-teal);
  color: var(--color-white);
}

.site-footer a {
  color: var(--color-white);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-teal-highlight);
}

.site-footer__content {
  max-width: 50rem;
  margin: 0 auto;
  padding: 2rem 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__content p {
  margin: 0;
  text-align: right;
  line-height: 1.3;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-links a {
  text-decoration: none;
  display: inline-flex;
}

.social-icon {
  font-size: 1.5rem;
}
.site-nav a + a::before {
  content: '·';
  margin: 0 1rem;
}

@media (max-width: 768px) {
  /* phone styles */
  :root {
    font-size: 14pt;
  }
  .site-nav {
    flex-direction: row;
    margin: auto;
    padding: 4vw;
    width: 80%;
    align-content: center;
    font-weight: bold;
    font-size: 12pt;
    gap: 1rem;
  }
  .site-nav a {
    text-align: center;
    text-wrap: balance;
  }
  .site-title {
    text-wrap: nowrap;
    font-size: 1.8rem;
  }
  h1 {
    font-size: 1.8rem;
    text-align: center;
    text-wrap: balance;
    margin-top: unset;
  }
  h2 {
    font-size: 1.6rem;
    font-weight: 600;
  }
  h3 {
    font-size: 1.5rem;
    font-weight: 600;
  }
  h4 {
    font-size: 1.2rem;
    text-decoration: underline;
    font-weight: 600;
  }
  .site-header {
    margin-top: unset;
  }
  .site-nav a + a::before {
    display: none;
  }
}
@media (max-width: 640px) {
  .post-card {
    grid-template-columns: 1fr;
    border-left: 3px solid var(--color-dark-teal);
    padding-left: 2vw;
  }
  .post-card__image {
    display: none;
  }
}