/* Vale's CSS Reset https://vale.rocks/posts/css-reset */
@layer {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		background-repeat: no-repeat;
	}

	* {
		padding: 0;
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		block-size: 100%;
	}

	body {
		min-block-size: 100%;
	}

	img,
	iframe,
	audio,
	video,
	canvas {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	svg {
		max-inline-size: 100%;
	}

	svg:not([fill]) {
		fill: currentColor;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		hanging-punctuation: none;
	}

	textarea {
		resize: vertical;
	}

	fieldset,
	iframe {
		border: none;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
		font-variant-numeric: proportional-nums;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-variant-numeric: lining-nums;
	}

	p,
	blockquote,
	q,
	figcaption,
	li {
		hanging-punctuation: first allow-end last;
	}

	button {
		cursor: pointer;
	}

	input,
	label,
	button,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.1;
	}

	math,
	time,
	table {
		font-variant-numeric: tabular-nums lining-nums slashed-zero;
	}

	code {
		font-variant-numeric: slashed-zero;
	}

	table {
		border-collapse: collapse;
	}

	abbr {
		font-variant-caps: all-small-caps;
		text-decoration: none;

		&[title] {
			cursor: help;
			text-decoration: underline dotted;
		}
	}

	sup,
	sub {
		line-height: 0;
	}

	summary {
		cursor: pointer;
	}

	:disabled {
		opacity: 0.8;
		cursor: not-allowed;
	}
}
/* end reset */

:root {
	/* Color primitives ---------------------- */
	--color-base-100: #f4f4f1;
	--color-base-150: #ecece9;
	--color-base-200: #e4e4e1;
	--color-base-250: #dadad7;
	--color-base-300: #cfcfcc;
	--color-base-350: #c5c5c2;
	--color-base-400: #babab7;
	--color-base-500: #a1a19e;
	--color-base-600: #848482;
	--color-base-700: #6a6a68;
	--color-base-800: #3d3d3b;
	--color-base-900: #2e2e2c;

	/* Typography primitives ----------------- */
	/* Font sizes */
	--font-xxs: 0.8rem;
	--font-xs: 0.875rem;
	--font-s: 0.933rem;
	--font-base-serif: 0.9rem;
	--font-base-sans: 0.784375rem;

	/* Font weights */
	--font-light: 200;
	--font-normal: 400;
	--font-bold: 700;

	/* Color mappings ------------------------ */
	/* Text */
	--text-normal: var(--color-base-900);
	--text-muted: var(--color-base-700);
	--text-faint: var(--color-base-500);

	/* Backgrounds */
	--background-primary: var(--color-base-100);
	--background-primary-alt: var(--color-base-200);
}

body {
	background-color: var(--background-primary);
	font-family: 'Times New Roman', Times, serif;
	font-size: var(--font-base-serif);
	padding: 1rem;
}

header {
	margin-top: 20vh;
	margin-bottom: 15vh;

	& h1 {
		font-size: var(--font-base-serif);
		font-weight: var(--font-normal);
	}
}

#lightbox {
	max-inline-size: 90vw;
	max-block-size: 90vh;
	border: none;
	padding: 0;
	background: transparent;

	&::backdrop {
		background: rgb(0 0 0 / 0.85);
	}

	& img {
		max-inline-size: 90vw;
		max-block-size: 90vh;
	}

	& button {
		position: fixed;
		background: none;
		border: none;
		color: var(--color-base-100);
		font-size: 2rem;
		line-height: 1;
	}

	& .lightbox-close {
		top: 1rem;
		right: 1.5rem;
	}

	& .lightbox-prev {
		left: 1.5rem;
		top: 50%;
		translate: 0 -50%;
	}

	& .lightbox-next {
		right: 1.5rem;
		top: 50%;
		translate: 0 -50%;
	}
}


.week {
  grid-template-columns: repeat(auto-fill, minmax(40ch, 60ch));
  gap: 8px;
  max-inline-size: 200ch;
  margin-bottom: clamp(1.5rem, 5vh, 5rem);
  padding: 0;
  display: grid;

  & img {
    cursor: zoom-in;
  }
}

.week figcaption {
  padding: var(--size-4-3);
  color: var(--text-muted);
  grid-column: 1 / -1;
  gap: 12px;
  display: flex;

  & h2 {
    color: var(--text-normal);
    font-size: var(--font-base);
    font-weight: var(--font-normal);
  }
}