/* ═══════════════════════════════════════════════════════════════
   HANDWRITTEN — Element stylesheet
   Styles plain HTML elements as output by markdown generators.
   No classes required except where noted at the bottom.
   ═══════════════════════════════════════════════════════════════ */


/* ── DESIGN TOKENS ──────────────────────────────────────────── */

:root {
  --bg:         #0d0c0b;
  --surface:    #161412;
  --border:     #242120;
  --text:       #e2dbd0;
  --text-mid:   #958c82;
  --text-muted: #625c54;
  --accent:     #b3a9c4;
  --accent-bg:  rgba(179, 169, 196, 0.07);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lora', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  --max-w:     1100px;
  --article-w: 700px;
  --pad:       2.5rem;
}


/* ── RESET ──────────────────────────────────────────────────── */

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


/* ── BASE ───────────────────────────────────────────────────── */

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}


/* ── PAGE STRUCTURE ─────────────────────────────────────────── */

header, main, footer, nav, article, section, aside {
  display: block;
}

/* Site masthead */
body > header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.75rem var(--pad) 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

/* If nav lives inside <header>, remove the header's border-bottom
   and uncomment: header { border-bottom: none; }              */

/* Main content area */
main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Post / reading column */
article {
  max-width: var(--article-w);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

/* Site footer */
body > footer {
  border-top: 1px solid var(--border);
  padding: 2rem var(--pad);
  text-align: center;
  margin-top: 2rem;
}


/* ── NAVIGATION ─────────────────────────────────────────────── */

nav {
  border-bottom: 1px solid var(--border);
}

nav ul {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  min-height: 3rem;
}

nav li {
  margin: 0;
}

nav a {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--text);
}


/* ── HEADINGS ───────────────────────────────────────────────── */

/* Site name — h1 inside the top-level header */
body > header h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 6.5vw, 4.2rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}

/* Unwrap any <a> wrapping the site name */
body > header h1 a {
  color: inherit;
  text-decoration: none;
}

/* Tagline — <p> directly inside body > header */
body > header p {
  margin-top: 0.65rem;
  margin-bottom: 0;
  font-family: var(--font-ui);
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

/* Post title */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 1.5rem;
}

/* Section headings */
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 2.5rem 0 1rem;
}

h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  line-height: 1.3;
  color: var(--text);
  margin: 2rem 0 0.75rem;
}

/* Small editorial labels */
h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.75rem 0 0.5rem;
}


/* ── PARAGRAPHS & DROP CAP ──────────────────────────────────── */

p {
  margin-bottom: 1.6rem;
  color: rgba(226, 219, 208, 0.87);
}

/* First paragraph in a post — full brightness */
article > p:first-of-type {
  color: var(--text);
}

/* Drop cap on the opening line */
article > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.4em;
  font-weight: 500;
  line-height: 0.8;
  float: left;
  margin: 0.07em 0.12em 0 0;
  color: var(--accent);
}

/* Prevent the drop cap bleeding into blockquote paragraphs */
blockquote p::first-letter {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  float: none;
  margin: 0;
  color: inherit;
}


/* ── LINKS ──────────────────────────────────────────────────── */

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

/* Inline links inside prose */
article p a,
article li a {
  border-bottom: 1px solid rgba(179, 169, 196, 0.3);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

article p a:hover,
article li a:hover {
  opacity: 0.85;
  border-bottom-color: var(--accent);
}


/* ── BLOCKQUOTE — pull quote ────────────────────────────────── */

blockquote {
  border-left: 2px solid var(--accent);
  border-radius: 0;
  margin: 2.5rem 0;
  padding: 0.15rem 0 0.15rem 1.75rem;
}

blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.42;
  color: var(--text);
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}


/* ── HORIZONTAL RULE ────────────────────────────────────────── */

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}


/* ── LISTS ──────────────────────────────────────────────────── */

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1.6rem;
}

li {
  margin-bottom: 0.4rem;
  color: rgba(226, 219, 208, 0.87);
  line-height: 1.75;
}

/* Nested lists */
li ul, li ol {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

/* Reset for nav lists (already handled above) */
nav ul, nav li {
  padding: 0;
  margin: 0;
}


/* ── IMAGES ─────────────────────────────────────────────────── */

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}

figure {
  margin: 2.5rem 0;
}

figure img {
  margin: 0 0 0.75rem;
}

figcaption {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}


/* ── CODE ───────────────────────────────────────────────────── */

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background: var(--surface);
  color: var(--accent);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin: 2rem 0;
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-mid);
  border-radius: 0;
}


/* ── TABLES ─────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9rem;
}

thead th {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: rgba(226, 219, 208, 0.87);
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: none;
}


/* ── INLINE TEXT ────────────────────────────────────────────── */

strong, b {
  font-weight: 600;
  color: var(--text);
}

em, i {
  font-style: italic;
}

small {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

time, address {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

mark {
  background: var(--accent-bg);
  color: var(--accent);
  padding: 0.1em 0.3em;
}

del {
  color: var(--text-muted);
  text-decoration: line-through;
}

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

sup, sub {
  font-size: 0.75em;
  line-height: 0;
}


/* ── FOOTER TEXT ────────────────────────────────────────────── */

body > footer p {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0;
}

body > footer a {
  color: var(--text-muted);
  border: none;
}

body > footer a:hover {
  color: var(--text);
  opacity: 1;
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --pad: 2rem; }
}

@media (max-width: 640px) {
  :root { --pad: 1.25rem; }

  nav ul { gap: 0.25rem 1.25rem; }

  h1 { margin-bottom: 1rem; }

  article { padding: 2rem 0 3rem; }

  blockquote { padding-left: 1.25rem; }

  blockquote p { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE
   Applied only when <body class="home"> is used.
   ═══════════════════════════════════════════════════════════════ */


/* ── HOMEPAGE STRUCTURE ─────────────────────────────────────── */

.home article {
  max-width: 820px;
  padding-top: 4rem;
}

/* Keep the homepage introduction restrained and editorial. */
.home article > h1 {
  max-width: 700px;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  font-weight: 300;
  line-height: 1;
}

/* Homepage Markdown should not receive the post drop cap. */
.home article > p:first-of-type::first-letter {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  float: none;
  margin: 0;
  color: inherit;
}

.home article > p {
  margin-bottom: 0.5rem;
}

.home article > p:has(a) {
  max-width: 650px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-mid);
}


/* ── HOMEPAGE SECTION HEADINGS ──────────────────────────────── */

.home article > h2 {
  margin: 3.5rem 0 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ── POST INDEX ─────────────────────────────────────────────── */

/*
   Any top-level Markdown list immediately following an h2 becomes
   a post index.

   Example:

   ## Latest writing

   - [The title of the post](/posts/example.html)
     A short description of the post.
*/

.home article > h2 + ul {
  padding: 0;
  margin: 0 0 3.5rem;
  list-style: none;
}

.home article > h2 + ul > li {
  position: relative;
  margin: 0;
  padding: 1.75rem 2.5rem 1.75rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
  transition:
    padding-left 0.2s ease,
    background-color 0.2s ease;
}

.home article > h2 + ul > li:hover {
  padding-left: 1rem;
  background: var(--accent-bg);
}

/* Small arrow displayed on the right side of each entry. */
.home article > h2 + ul > li::after {
  content: "→";
  position: absolute;
  top: 1.9rem;
  right: 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-muted);
  transition:
    right 0.2s ease,
    color 0.2s ease;
}

.home article > h2 + ul > li:hover::after {
  right: 0;
  color: var(--accent);
}

/* The first link in each entry is treated as the post title. */
.home article > h2 + ul > li > a:first-child,
.home article > h2 + ul > li > p:first-child > a:first-child {
  display: inline;
  border-bottom: none;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

.home article > h2 + ul > li > a:first-child:hover,
.home article > h2 + ul > li > p:first-child > a:first-child:hover {
  color: var(--accent);
  opacity: 1;
}

/* Markdown renderers sometimes wrap list contents in paragraphs. */
.home article > h2 + ul > li p {
  max-width: 650px;
  margin: 0.45rem 0 0;
  color: var(--text-mid);
}

.home article > h2 + ul > li p:first-child {
  margin-top: 0;
}


/* ── HOMEPAGE DATES AND METADATA ────────────────────────────── */

.home article time {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ── HOMEPAGE NAVIGATION ALIGNMENT ──────────────────────────── */

.home nav ul {
  justify-content: center;
}


/* ── HOMEPAGE RESPONSIVE ────────────────────────────────────── */

@media (max-width: 640px) {
  .home article {
    padding-top: 2.75rem;
  }

  .home article > h2 + ul > li {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    padding-right: 2rem;
  }

  .home article > h2 + ul > li::after {
    top: 1.55rem;
  }

  .home article > h2 + ul > li:hover {
    padding-left: 0;
    background: transparent;