@font-face {
  font-family: "Libre Baskerville";
  font-display: swap;
  src: url("https://felixwaller.dev/fonts/LibreBaskerville-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-display: swap;
  src: url("https://felixwaller.dev/fonts/LibreBaskerville-Italic-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-display: swap;
  src: url("https://felixwaller.dev/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-display: swap;
  src: url("https://felixwaller.dev/fonts/AtkinsonHyperlegibleMonoVF-Variable.woff2");
}

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

html {
  --serif: "Libre Baskerville", serif;
  --sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --bg: rgb(255, 252, 240);
  --bg-2: rgb(242, 240, 229);
  --ui: rgb(230, 228, 217);
  --ui-3: rgb(206, 205, 195);
  --tx-2: rgb(111, 110, 105);
  --tx: rgb(16, 15, 15);

  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, 1fr);
	block-size: 100dvb;
	margin: 0;
  color: var(--tx);
  background-color: var(--bg);
}

p-ost {
	--border: 2px dotted var(--ui-3);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 8px;

	&:not(:nth-of-type(3n)) {
		border-inline-end: var(--border);
	}

	&:not(:nth-of-type(-n + 3)) {
		border-block-start: var(--border);
	}

	&.selected {
		background-color: var(--bg-2);
	}

	&.has-read {
		color: var(--tx-2);
	}

	&:not(.is-saved) saved-icon { display: none; }
	saved-icon svg {
	  display: inline-block;
	  stroke: black;
	  fill: none;
	  vertical-align: center;
	  vertical-align: ideographic;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke-width: 2;
	}

	h2 {
		font-family: var(--serif);
		font-size: 1.2rem;
		text-wrap: balance;
		font-weight: normal;
	}

	a {
		color: currentcolor;
	  font-weight: 500;
	  text-underline-position: under;
	  text-underline-offset: 1px;
	}
	
	a:focus-visible {
	  outline: currentColor 2px solid;
	  outline-offset: 1px;
	  border-radius: 1px;
	}

	[data-line-clamp="2"] {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
}

f-eed {
	&.selected {
		border: 2px solid var(--ui-3);
	}
}

@keyframes shudder {
	33% { translate: 8px 8px; }
	66% { translate: -8px -8px; }
}