/* ==========================================================================
   Personal blog — plain, old-print / pocket-book styling

   Loaded after reset.css (see the page templates), which already handles the
   base resets: box-sizing, margin zeroing, min-height, font smoothing, and
   the `ul[class]/ol[class]` list reset. This file only adds the look.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Homemade+Apple&family=IM+Fell+DW+Pica:ital@0;1&family=IM+Fell+DW+Pica+SC&display=swap");


/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  --page-bg: #f4ecd8;
  /* light beige, like an aged book page */
  --ink: #1a1a1a;
  /* near-black body text */
  --ink-soft: #3d3d3d;
  /* dark gray for secondary text */
  --link: #3a2f1a;
  /* dark sepia for links */
  --link-hover: #000000;
  --rule: #cbbf9e;
  /* faint lines / borders */
  --tag-bg: #6b4423;
  /* coffee-stain brown for tag boxes */
  --code-bg: #2b2621;
  /* dark panel behind inline and block code */
  --code-ink: #ece4d0;
  /* light, page-toned code text */

  --footer-bg: #161310;
  /* near-black block at the bottom */
  --footer-ink: #e8e0cc;
  /* light, page-toned text on the dark block */
  --footer-link: #d8b98a;
  /* warm light link on the dark block */

  --body-font: "IM Fell DW Pica", Georgia, "Times New Roman", serif;
  --head-font: "IM Fell DW Pica SC", "IM Fell DW Pica", Georgia, serif;

  --measure: 38rem;
  /* comfortable reading width */
  --base-size: 20px;
  /* IM Fell is delicate — give it room */
  --line: 1.7;

  --nav-width: 13rem;
  /* left chapter-navigation column */
  --gutter: 3rem;
  /* breathing room around the reading column */
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  font-size: var(--base-size);
  /* let decorations bleed off the right edge without adding a horizontal
     scrollbar; `clip` (unlike `hidden`) doesn't break the sticky nav */
  overflow-x: clip;
}

body {
  padding: 2.5rem 1.25rem 0;
  background-color: var(--page-bg);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: var(--line);
  text-rendering: optimizeLegibility;
  /* anchor the decorative stain pseudo-element */
  position: relative;
  /* fill the viewport as a column so the footer block sits at the bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   2b. Decorative top-right stain

   Rotated 45° and pushed off the right edge near the top. z-index:-1 keeps
   it behind the text; the html `overflow-x: clip` trims the overflow.

   The default is a coffee stain. Each page template stamps a class on its
   root element (see assets/templates/*.html), so a template can override the
   decoration by keying off that class — as the article rule below does.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: -7rem;
  width: 22rem;
  height: 22rem;
  background-image: url("img/toppng.com-coffee-stain-transparent-2450x2478.png");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
  z-index: -1;
}

/* content pages — ink splatter anchored to the top-left corner so it scrolls
   away once the reader moves down */
body:has(.layout--page)::before {
  background-image: url("img/pngkey.com-color-splatter-png-461231.png");
  top: 0;
  left: 0;
  right: auto;
  width: 44rem;
  height: 44rem;
  /* the image is `contain`ed in the 44rem box; pin it to that box's corner */
  background-position: left top;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. Layout: navigation column + reading column
   -------------------------------------------------------------------------- */
/* two columns, centred as a group, growing to push the footer down */
.layout {
  flex: 1 0 auto;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: calc(var(--measure) + var(--nav-width) + var(--gutter));
  margin: 0 auto;
}

/* left column — sticky links to move through the chapter */
.chapter-nav {
  flex: 0 0 var(--nav-width);
  padding: 0.25rem 1.5rem 2rem 0;
  font-family: var(--head-font);
  font-size: 0.95rem;
  /* decorative splatter resting at the bottom of the left column */
  background-image: url("img/toppng.com-stains-splatter-png-coffee-stain-transparent-949x646.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 11rem auto;
}

.chapter-nav__title {
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
}

.chapter-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* keep the chapter links in view while the body scrolls */
  position: sticky;
  top: 1.5rem;
}

.chapter-nav li {
  margin-bottom: 0.5rem;
}

.chapter-nav a {
  text-decoration: none;
}

.chapter-nav a:hover,
.chapter-nav a:focus {
  text-decoration: underline;
}

/* right column — the reading surface */
main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--measure);
  background-color: var(--page-bg);
}

/* the first element in a column carries a top margin that can't collapse
   away (main is a flex item / new BFC), which would push the text down
   below the nav — drop it so the reading text starts at the top */
main> :first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   3b. Home / 404 layout: a single centred column, no chapter navigation
   -------------------------------------------------------------------------- */
/* shares the same width as the header so the text lines up with the title;
   left-aligned from the nav column's left edge as on article pages */
main.home {
  width: 100%;
  max-width: calc(var(--measure) + var(--nav-width) + var(--gutter));
  margin: 0 auto;
  padding: 0.25rem 0 3rem;
  background: none;
}

/* --------------------------------------------------------------------------
   3c. Home menu: the left-column links on the index page

   Built on top of .chapter-nav (sticky column, hover underline); the menu
   column carries no splatter, and each link gets its own larger size.
   -------------------------------------------------------------------------- */
.home-menu {
  background-image: none;
}

.home-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* keep the menu in view while the welcome text scrolls */
  position: sticky;
  top: 1.5rem;
}

.home-menu__item {
  margin-bottom: 1rem;
}

.home-menu a {
  font-size: 1.3rem;
}

/* --------------------------------------------------------------------------
   3d. Social links — a horizontal row of stained icons in the footer
   -------------------------------------------------------------------------- */
/* `ul.home-social` (not `.home-social`) so this beats reset.css's
   `ul[class] { padding: 0 }`, which would otherwise strip the left padding
   the sibling footer paragraphs get and pull the row left. */
ul.home-social {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  gap: 0;
  /* same left padding as the footer text so the row starts at the text edge */
  padding-left: 1.25rem;
  /* pull the quote line below up close to the icons */
  margin-bottom: -0.3rem;
}

/* cancel the first icon's left padding so its glyph lines up with the
   left edge of the footer text */
.home-social__item:first-child {
  margin-left: -0.3rem;
}

.home-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--page-bg);
  /* light icon on the dark footer block */
  padding: 0.3rem;
  transition: opacity 0.15s ease;
}

.home-social__link:hover,
.home-social__link:focus-visible {
  opacity: 0.8;
}

.home-social__link:visited {
  color: var(--page-bg);
}

.home-social__icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

/* --------------------------------------------------------------------------
   3e. Narrow screens — stack the columns
   -------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  .layout {
    flex-direction: column;
  }

  .chapter-nav {
    flex-basis: auto;
    padding: 0 0 1.5rem;
    /* the column is short when stacked — drop the bottom splatter */
    background-image: none;
  }

  .chapter-nav ul {
    position: static;
  }

  main {
    padding: 0.25rem 0 2rem;
  }
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
  /* non-small-caps face so the titles render as genuine lowercase */
  font-family: var(--body-font);
  text-transform: lowercase;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 2rem 0 0.75rem;
}

h1 {
  font-size: 2.6rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.35rem;
}

h4 {
  font-size: 1.15rem;
}

/* article sub-headings: kept lowercase like the rest, but heavier and in
   dark sepia rather than near-black */
.layout h3,
.layout h4 {
  font-weight: 700;
  color: var(--link);
}

p {
  margin: 0 0 1.1rem;
}

small {
  color: var(--ink-soft);
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* --------------------------------------------------------------------------
   5. Links — plainly clickable
   -------------------------------------------------------------------------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

/* pin visited links to the same sepia so they don't fade to the browser default */
a:visited {
  color: var(--link);
}

/* links inside headings read as the heading, not as links: same colour and
   no underline (a subtle underline appears only on hover/focus for affordance) */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Lists
   -------------------------------------------------------------------------- */
ul,
ol {
  margin: 0 0 1.1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   7. Quotes & code
   -------------------------------------------------------------------------- */
blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
}

code,
pre {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
}

/* multiline code blocks — dark panel with light text */
pre {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 0.25rem;
}

/* inline one-liner code — same dark-on-light treatment, boxed inline */
code {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 0.1em 0.3em;
  border-radius: 0.2rem;
}

/* code sitting inside a block already has the panel — don't box it again */
pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   8. Rules & images
   -------------------------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

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

/* Markdown turns an image on its own line into a <p> wrapping nothing but the
   <img>; centre those standalone pictures, leaving images that sit in a run of
   prose alone. The reset makes every image display:block, so text-align on the
   paragraph would do nothing — auto inline margins are what centre a block. */
main p:has(> img:only-child)>img {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   9. Header & footer
   -------------------------------------------------------------------------- */
/* The header shares .layout's geometry (same max-width, same centring) so its
   left edge lands where the left navigation column starts.
   Scoped to `body > header` (the site title bar, a direct child of body) so
   these styles — including the separating rule below — don't leak into the
   nested `.page-header` inside <main>. */
body>header {
  /* width:100% makes it fill up to max-width like .layout; without it the
     flex item would shrink to the title and the auto margins would centre it */
  width: 100%;
  max-width: calc(var(--measure) + var(--nav-width) + var(--gutter));
  margin: 0 auto 2.5rem;
  position: relative;
}

/* separating rule: extends a little past the header on each side and fades
   into the page background at both ends */
body>header::after {
  content: "";
  position: absolute;
  left: -1rem;
  right: -1rem;
  bottom: 0;
  height: 3px;
  background: linear-gradient(to right,
      transparent,
      var(--rule) 12%,
      var(--rule) 88%,
      transparent);
}

body>header h1 {
  margin: 0;
  padding: 1.75rem 0;
  font-family: var(--body-font);
  /* non-small-caps face, genuinely lowercase */
  text-transform: lowercase;
  font-size: 3.5rem;
  letter-spacing: 0.01em;
}

/* full-width dark block at the bottom; the negative margin breaks it out of
   the body padding to span edge to edge */
footer {
  margin-top: 3rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 0.9rem;
  /* vertical breathing room lives on the block, not repeated per child */
  padding: 2rem 0;
}

/* keep the footer text itself in the same reading column */
footer>* {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.25rem;
}

/* the rotating quote sits close to the static line below it */
#footer-quote {
  margin-bottom: 0.25rem;
}

footer a {
  color: var(--footer-link);
}

footer a:hover,
footer a:focus {
  color: #ffffff;
}

/* keep footer links light once visited (the global `a:visited` would otherwise
   darken them to sepia, near-invisible on the dark block) */
footer a:visited {
  color: var(--footer-link);
}

/* the "- first published on <date>" note, in a handwritten face */
.article-list__meta {
  font-family: "Homemade Apple", cursive;
  /* Homemade Apple runs large and tall, so scale it down and give it room */
  font-size: 0.7rem;
  line-height: 1.6;
}

/* page/article header — published date and tags shown above the body */
.page-header {
  margin: 0 0 2rem;
}

.page-header__date {
  margin: 0 0 0.6rem;
  font-family: "Homemade Apple", cursive;
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Article tags — small coffee-brown boxes with page-toned text
   -------------------------------------------------------------------------- */
.tag-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag {
  display: inline-block;
  background-color: var(--tag-bg);
  color: var(--page-bg);
  font-family: var(--body-font);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.55rem;
  border-radius: 0.2rem;
}

/* --------------------------------------------------------------------------
   Asterism — vintage three-asterisk section break (a "dinkus"), replacing the
   default horizontal rule with spaced-out asterisks drawn via a pseudo-element
   -------------------------------------------------------------------------- */
.asterism {
  border: 0;
  height: auto;
  margin: 2.5rem 0;
  text-align: center;
  line-height: 1;
}

.asterism::before {
  content: "\2042";
  /* ⁂ asterism */
  color: var(--ink-soft);
  font-family: var(--head-font);
  font-size: 1.6rem;
}