/* Reset & custom properties */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 62.5%; }

:root {
  --color-darkgrey: #15171A;
  --color-midgrey: #738a94;
  --color-lightgrey: #e5eff5;
  --color-bg: #ffffff;
  --color-bg-blur: rgba(255, 255, 255, 0.82);
  --color-text: #3d3d3d;
  --color-accent: #d94000;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-heading: 'Lora', Georgia, serif;
  --font-size-base: 1.6rem;
  --line-height-base: 1.7;
  --max-width: 740px;
  --max-width-wide: 1040px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  min-height: 100vh;
  /* fixed header (3.2rem avatar + 2×2.4rem padding) + 4.8rem gap */
  padding-top: calc(3.2rem + 4.8rem + 4.8rem);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 600px) {
  main {
    padding-top: calc(3.2rem + 4.8rem + 2.4rem);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

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

p { margin: 0 0 1.6rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-darkgrey);
  margin: 0 0 1.6rem;
}

h1 { font-size: 4.0rem; }
h2 { font-size: 3.2rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2.0rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-darkgrey: #f0f0f0;
    --color-midgrey: #8a9ba5;
    --color-lightgrey: #2a2d31;
    --color-bg: #111214;
    --color-bg-blur: rgba(17, 18, 20, 0.82);
    --color-text: #c8c8c8;
  }
}

:root[data-theme="dark"] {
  --color-darkgrey: #f0f0f0;
  --color-midgrey: #8a9ba5;
  --color-lightgrey: #2a2d31;
  --color-bg: #111214;
  --color-bg-blur: rgba(17, 18, 20, 0.82);
  --color-text: #c8c8c8;
}

:root[data-theme="light"] {
  --color-bg-blur: rgba(255, 255, 255, 0.82);
}