/* ==========================================================================
   The Extra Income Path: one stylesheet for the whole site.
   Sections: 1 font, 2 colours, 3 base page, 4 header, 5 footer,
             6 post list (home + blog), 7 single post / about page.
   ========================================================================== */

/* 1. Font: Atkinson, served from /assets/fonts/ ----------------------------- */
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/assets/fonts/atkinson-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
/* Arial tuned to Atkinson's size, shown for a split second while the font loads */
@font-face { font-family: "Atkinson fallback"; src: local("Arial"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 99.3717%; ascent-override: 80.1033%; descent-override: 25.2587%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson fallback"; src: local("Arial Bold"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 92.2954%; ascent-override: 86.2448%; descent-override: 27.1953%; line-gap-override: 0%; }

/* 2. Colours (change the blue here and it changes everywhere) --------------- */
:root {
  --font-atkinson: "Atkinson", "Atkinson fallback", sans-serif;
  --accent: #2337ff;
  --accent-dark: #000d8a;
  --black: 15, 18, 25;
  --gray: 96, 115, 159;
  --gray-light: 229, 233, 240;
  --gray-dark: 34, 41, 57;
  --gray-gradient: rgba(var(--gray-light), 50%), #fff;
  --box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
}

/* 3. Base page -------------------------------------------------------------- */
body {
  font-family: var(--font-atkinson);
  text-align: left;
  background: linear-gradient(var(--gray-gradient)) no-repeat;
  background-size: 100% 600px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: rgb(var(--gray-dark));
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.7;
}
main { width: 720px; max-width: calc(100% - 2em); margin: auto; padding: 3em 1em; }
h1, h2, h3, h4, h5, h6 { color: rgb(var(--black)); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 3.052em; }
h2 { font-size: 2.441em; }
h3 { font-size: 1.953em; }
h4 { font-size: 1.563em; }
h5 { font-size: 1.25em; }
strong, b { font-weight: 700; }
a, a:hover { color: var(--accent); }
p { margin-bottom: 1em; }
.prose p { margin-bottom: 2em; }
textarea { width: 100%; font-size: 16px; }
input { font-size: 16px; }
table { width: 100%; }
img { border-radius: 8px; max-width: 100%; height: auto; }
code { background-color: rgb(var(--gray-light)); border-radius: 2px; padding: 2px 5px; }
pre { border-radius: 8px; padding: 1.5em; }
pre > code { all: unset; }
blockquote { border-left: 4px solid var(--accent); margin: 0; padding: 0 0 0 20px; font-size: 1.333em; }
hr { border: none; border-top: 1px solid rgb(var(--gray-light)); }
@media (max-width: 720px) {
  body { font-size: 18px; }
  main { padding: 1em; }
}

/* 4. Header (site name on the left, Home / Blog / About on the right) ------- */
.internal-links a { text-decoration: none; display: inline-block; }
.internal-links a.active { font-weight: bolder; text-decoration: underline; }
.site-header { box-shadow: 0 2px 8px rgba(var(--black), 5%); background: #fff; margin: 0; padding: 0 1em; }
.site-header h2 { margin: 0; font-size: 1em; }
.site-header h2 a { text-decoration: none; }
.site-header nav { display: flex; justify-content: space-between; align-items: center; }
.site-header nav a { color: var(--black); border-bottom: 4px solid transparent; padding: 1em .5em; text-decoration: none; }
.site-header nav a.active { border-bottom-color: var(--accent); text-decoration: none; }

/* 5. Footer ----------------------------------------------------------------- */
.site-footer { background: linear-gradient(var(--gray-gradient)) no-repeat; color: rgb(var(--gray)); text-align: center; padding: 2em 1em 6em; }

/* 6. Post list (home page and /blog/) --------------------------------------- */
main.post-list { width: 960px; }
.post-list ul { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0; padding: 0; list-style-type: none; }
.post-list li { width: calc(50% - 1rem); }
.post-list li * { text-decoration: none; transition: all .2s; }
.post-list li:first-child { text-align: center; width: 100%; margin-bottom: 1rem; }
.post-list li:first-child img { width: 100%; }
.post-list li:first-child .title { font-size: 2.369rem; }
.post-list li img { border-radius: 12px; margin-bottom: .5rem; }
.post-list li a { display: block; }
.post-list .title { color: rgb(var(--black)); margin: 0; line-height: 1; }
.post-list .summary { color: rgb(var(--gray-dark)); margin: .4rem 0 0; font-size: .95rem; }
.post-list .date { color: rgb(var(--gray)); margin: 0; }
.post-list li a:hover h4, .post-list li a:hover .date { color: rgb(var(--accent)); }
.post-list a:hover img { box-shadow: var(--box-shadow); }
@media (max-width: 720px) {
  .post-list ul { gap: .5em; }
  .post-list li { text-align: center; width: 100%; }
  .post-list li:first-child { margin-bottom: 0; }
  .post-list li:first-child .title { font-size: 1.563em; }
}

/* 7. Single post and the About page ----------------------------------------- */
main.post { width: calc(100% - 2em); max-width: 100%; margin: 0; }
.post .prose { width: 720px; max-width: calc(100% - 2em); color: rgb(var(--gray-dark)); margin: auto; padding: 1em; }
.post .title { text-align: center; margin-bottom: 1em; padding: 1em 0; line-height: 1; }
.post .title h1 { margin: 0 0 .5em; }
.post .date { color: rgb(var(--gray)); margin-bottom: .5em; }