/* Global CSS variables
------------------------------------------- */
:root {
  color-scheme: light;

  /* Scale */
  font-size: 16px;      /* 1rem baseline = 16px */
  --space-unit: 0.5rem; /* 8px base */

  /* Spacing ramp (8pt) */
  --space050: calc(var(--space-unit) * 0.5);   /* 4px  */
  --space100: var(--space-unit);               /* 8px  */
  --space200: calc(var(--space-unit) * 2);     /* 16px */
  --space300: calc(var(--space-unit) * 3);     /* 24px */
  --space400: calc(var(--space-unit) * 4);     /* 32px */
  --space500: calc(var(--space-unit) * 5);     /* 40px */
  --space700: calc(var(--space-unit) * 7);     /* 56px */

  /* Colors */
  --color-background: #FBF7EC;
  --color-foreground: #000;
  --color-action: #454FFF;

  /* Typography */
  --font-primary: "Manrope", sans-serif;
  --font-accent: "Cedarville Cursive", cursive;
  --font-weight-base: 500;                          /* regular */
  --font-weight-bolder: 600;                        /* medium/semibold */
  --font-weight-lighter: 400;                       /* light/normal */
  --font-size-base: calc(var(--space-unit) * 2);    /* 16px */
  --font-size-md:   calc(var(--space-unit) * 3);    /* 24px */
  --font-size-lg:   calc(var(--space-unit) * 4);    /* 32px */
  --font-size-xlg:  calc(var(--space-unit) * 7);    /* 56px */

  /* Text decoration (relative to element font-size) */
  --underline-thickness: 0.10em;    /* ≈1.6px at 16px; scales with font-size */
  --underline-offset: 0.25em;       /* ≈4px at 16px; scales with font-size */

  /* Borders */
  --border-width: calc(var(--space-unit) * 0.25); /* 2px */
}

/* Document base
------------------------------------------- */
html { 
  background-color: var(--color-background);
}

body {
  margin: 0;

  color: var(--color-foreground);
  font-family: var(--font-primary);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-base);
  font-style: normal;
  font-size: var(--font-size-base); /* 16px */
  line-height: 1.375;
}

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

a {
  color: var(--color-action);
  text-decoration: underline solid currentColor var(--underline-thickness); /* ≈1.6px at 16px; scales */
  text-underline-offset: var(--underline-offset); /* ≈4px at 16px; scales */      
  text-decoration-skip-ink: auto;
}

h1, h2, h3, h4, h5, h6, p, blockquote, figure {
  margin: 0;
}

cite { font-style: normal; }

iframe { inline-size: 100%; }

/* Utilities
------------------------------------------- */
.sr-only {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;              /* 1px */
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;               /* 1px */
}

/* Block: Header
------------------------------------------- */
.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  padding: var(--space100) var(--space300); /* 8px 24px */

  border-bottom: var(--border-width) solid var(--color-foreground); /* 2px */
}

.header--reversed { flex-direction: row-reverse; }

.header__title {
  font-size: clamp(2rem, 10vw, var(--font-size-xlg));
  font-weight: var(--font-weight-bolder);
  line-height: 1;
  letter-spacing: 0.02em; /* ≈0.32px at 16px; ≈1.12px at 56px */
  text-transform: uppercase;
}

.header__nav-link {
  color: var(--color-foreground);
  font-weight: var(--font-weight-bolder);
  text-transform: uppercase;
}

/* Block: About
------------------------------------------- */
.about {
  display: flex;
  justify-content: flex-end;
  text-align: right;

  font-size: var(--font-size-md); /* 24px */

  padding: var(--space700); /* 56px */
}

.about__text {
  max-width: 18.2em; /* ≈436.8px when .about font-size = 24px */
  margin: 0;

  font-weight: var(--font-weight-lighter);
}

.about__fun {
  font-family: var(--font-accent);
  font-size: 0.9em; /* ≈21.6px when parent font-size = 24px */
  text-transform: uppercase;
}

/* Block: List
------------------------------------------- */
.list {
  display: flex;
  flex-direction: column;

  gap: var(--space700); /* 56px */
  padding: var(--space300); /* 24px */
}

.list__item {
  width: 100%;
}

@media (min-width: 44.25rem) { /* 708px */
  .list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;

    padding: var(--space500) var(--space300); /* 40px 24px */
  }

  .list__item {
    flex-basis: 24%;
    min-width: 18.75rem; /* 300px */
  }

  /* Modifier */
  .list__item--large { flex-basis: 40%; }
}

@media (min-width: 48.75rem) { /* 780px */
  .list {
    padding: var(--space700); /* 56px */
  }
}

/* Block: Post
------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
}

.post--note,
.post--link {
  border: var(--border-width) solid var(--color-foreground); /* 2px */
}

.post__contents {
  display: flex;
  flex-direction: column;
  gap: var(--space200); /* 16px */

  padding: var(--space200) var(--space200); /* 16px 16px */
}

.post__titlegroup {
  display: flex;
  flex-direction: column;
  gap: var(--space050); /* 4px */
}

.post__title {
  text-transform: uppercase;
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-base);
}

.post__text {
  display: flex;
  flex-direction: column;
  gap: var(--space200); /* 16px */
}

.post__text--quote p::before { content: "\201C"; }
.post__text--quote p::after  { content: "\201D"; }

.post__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space200); /* 16px */

  padding-inline-start: var(--space200); /* 16px */
  border-inline-start: var(--border-width) solid var(--color-foreground); /* 2px */
}

.post__image,
.post__video {
  inline-size: 100%;
}

.post__thumbnail {
  max-inline-size: 100%;
  order: -1;

  border-bottom: var(--border-width) solid var(--color-foreground); /* 2px */
}

.post--1-1 iframe   { aspect-ratio: 1 / 1;  height: auto; }
.post--3-4 iframe   { aspect-ratio: 3 / 4;  height: auto; }
.post--16-9 iframe  { aspect-ratio: 16 / 9; height: auto; }