/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   BODY — the page
   ============================================================ */
BODY {
  margin: 0;
  padding: 0;
  background-color: #FAFAF7;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
}

/* Width constraint: everything is narrow by default */
BODY > *, BODY > HEADER *, BODY > FOOTER * {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Full-width structural containers */
BODY > HEADER, BODY > FOOTER {
  max-width: 100%;
  margin: 0;
}

/* ============================================================
   BODY > HEADER — the masthead
   ============================================================ */
BODY > HEADER {
  text-align: center;
  padding: 4rem 1.5rem 2.5rem;
}

BODY > HEADER HGROUP {
  margin-bottom: 1.25rem;
}

BODY > HEADER H1 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #1A1A1A;
  margin: 0;
}

BODY > HEADER H1 A:link,
BODY > HEADER H1 A:visited {
  color: inherit;
  text-decoration: none;
}

BODY > HEADER H2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A84;
  margin: 0.5rem 0 0 0;
}

BODY > HEADER NAV {
  margin-top: 1.25rem;
}

BODY > HEADER NAV UL {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.75rem;
  justify-content: center;
}

BODY > HEADER NAV A:link,
BODY > HEADER NAV A:visited {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #4A4A4A;
  text-decoration: none;
  transition: color 0.15s;
}
BODY > HEADER NAV A:hover { color: #2892ee; }
BODY > HEADER NAV [aria-current="page"] {
  color: #2892ee;
  border-bottom: 1.5px solid #2892ee;
  padding-bottom: 2px;
}

/* ============================================================
   BODY > HEADER + MAIN — transition from masthead to content
   ============================================================ */
BODY > HEADER + MAIN {
  border-top: 2px solid #1A1A1A;
  padding-top: 2.5rem;
}

/* ============================================================
   MAIN — the content area
   ============================================================ */
MAIN {
  padding: 0 1.5rem 4rem;
}

/* ============================================================
   ARTICLE — any post (articles, notes share this base)
   ============================================================ */
ARTICLE {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #D4D0C8;
}
ARTICLE:last-of-type {
  border-bottom: none;
}

/* Article header: timestamp + title */
ARTICLE HEADER {
  padding: 0 0 0.75rem 0;
  margin: 0;
}
ARTICLE HEADER P {
  margin: 0 0 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
ARTICLE HEADER P TIME {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 400;
  color: #8A8A84;
  letter-spacing: 0.02em;
}
ARTICLE HEADER P SMALL {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2892ee;
  background: #F0F7FE;
  padding: 1px 7px;
  border-radius: 3px;
}
ARTICLE HEADER H1 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}
ARTICLE HEADER H1 A:link {
  color: #1A1A1A;
  text-decoration: none;
}
ARTICLE HEADER H1 A:visited {
  color: #1A1A1A;
  text-decoration: none;
}
ARTICLE HEADER H1 A:hover {
  color: #2892ee;
}

/* Article body content */
ARTICLE > P,
ARTICLE > DIV {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #4A4A4A;
}

/* Tags inside articles — using DL for semantic key/value */
ARTICLE HEADER DL {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 0 0;
  flex-wrap: wrap;
}
ARTICLE HEADER DL DT {
  /* visually hidden, semantically present */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
ARTICLE HEADER DL DD {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.75rem;
  color: #8A8A84;
  background: #F0EDE5;
  padding: 2px 8px;
  border-radius: 3px;
  margin: 0;
}

/* Tags in article footer (bookmarks) */
ARTICLE FOOTER DL {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 0 0;
  flex-wrap: wrap;
}
ARTICLE FOOTER DL DT {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
ARTICLE FOOTER DL DD {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.75rem;
  color: #8A8A84;
  background: #F0EDE5;
  padding: 2px 8px;
  border-radius: 3px;
  margin: 0;
}

/* Article footer: metadata (full posts) */
ARTICLE FOOTER {
  padding: 0;
  margin-top: 0.5rem;
}
/* Footers with meta-key/value pairs get the ruled line */
ARTICLE FOOTER:has(.meta-key) {
  border-top: 1px solid #E5E1D8;
  padding: 1rem 0 0 0;
  margin-top: 1.5rem;
}
ARTICLE FOOTER P {
  margin: 0;
  display: flex;
  align-items: flex-start;
}
ARTICLE FOOTER .meta-key {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #8A8A84;
  text-align: right;
  width: 70px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
ARTICLE FOOTER .meta-value {
  font-size: 0.875rem;
  font-weight: 400;
  color: #4A4A4A;
  flex: 1;
  margin-left: 1rem;
}

/* ============================================================
   ARTICLE (note) — compact post, distinguished by the
   absence of H1 and presence of a left border
   ============================================================ */
ARTICLE.note {
  border-left: 2.5px solid #2892ee;
  padding-left: 1.25rem;
  border-bottom: 1px solid #E5E1D8;
}
ARTICLE.note > P {
  font-size: 1rem;
  color: #1A1A1A;
  line-height: 1.65;
}
ARTICLE.note > P A { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   FIGURE — photos
   ============================================================ */
ARTICLE FIGURE {
  margin: 0 0 1rem 0;
}
ARTICLE FIGURE IMG {
  display: block;
  width: 100%;
  border-radius: 4px;
  background: #E5E1D8;
}
ARTICLE FIGURE .photo-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #F0EDE5 0%, #E5E1D8 50%, #F0EDE5 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.875rem;
  font-style: italic;
  color: #8A8A84;
}
ARTICLE FIGCAPTION {
  font-size: 0.9375rem;
  font-style: italic;
  color: #4A4A4A;
  margin-top: 0.75rem;
}
ARTICLE FIGCAPTION SMALL {
  display: block;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.6875rem;
  font-style: normal;
  color: #8A8A84;
  margin-top: 0.375rem;
  display: flex;
  gap: 1rem;
}

/* ============================================================
   BLOCKQUOTE — used for bookmarks (cited external content)
   ============================================================ */
ARTICLE BLOCKQUOTE {
  border-left: 3px solid #2892ee;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #FFFFFF;
  border-radius: 0 4px 4px 0;
  border-top: 1px solid #D4D0C8;
  border-right: 1px solid #D4D0C8;
  border-bottom: 1px solid #D4D0C8;
}
ARTICLE BLOCKQUOTE CITE {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.3;
}
ARTICLE BLOCKQUOTE CITE + SMALL {
  display: block;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.6875rem;
  font-style: normal;
  color: #8A8A84;
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  padding: 0;
  border-radius: 0;
}
ARTICLE BLOCKQUOTE + P {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  font-size: 0.9375rem;
  color: #4A4A4A;
}

/* ============================================================
   ARTICLE (like/repost) — interaction posts, compact
   ============================================================ */
ARTICLE.like,
ARTICLE.repost {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #E5E1D8;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
ARTICLE.like > SPAN:first-child {
  color: #D64045;
  font-size: 0.9375rem;
  flex-shrink: 0;
  margin-top: 1px;
}
ARTICLE.repost > SPAN:first-child {
  color: #2D8A4E;
  font-size: 0.9375rem;
  flex-shrink: 0;
  margin-top: 1px;
}
ARTICLE.like > P,
ARTICLE.repost > P {
  font-size: 0.9375rem;
  color: #4A4A4A;
  margin: 0;
  line-height: 1.5;
}
ARTICLE.like > P A,
ARTICLE.repost > P A {
  font-weight: 500;
}
ARTICLE.like HEADER,
ARTICLE.repost HEADER {
  display: none; /* timestamp shown inline instead */
}

/* ============================================================
   ARTICLE (reply) — reply context + indented content
   ============================================================ */
ARTICLE.reply HEADER + P {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.8125rem;
  color: #8A8A84;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
ARTICLE.reply > DIV {
  padding-left: 1.25rem;
  border-left: 2px solid #E8F2FC;
  font-size: 1rem;
  line-height: 1.65;
}

/* ============================================================
   SECTION — webmentions under a post
   ============================================================ */
SECTION.responses {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #D4D0C8;
}
SECTION.responses H2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8A84;
  margin: 0 0 1rem 0;
}
SECTION.responses OL {
  list-style: none;
  padding: 0;
  margin: 0;
}
SECTION.responses LI {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0;
}
SECTION.responses LI IMG {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Placeholder avatars when no image */
SECTION.responses LI SPAN:first-child {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F0EDE5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.625rem;
  font-weight: 600;
  color: #8A8A84;
}
SECTION.responses LI P {
  font-size: 0.875rem;
  color: #4A4A4A;
  line-height: 1.5;
  margin: 0;
}
SECTION.responses LI P STRONG {
  font-weight: 500;
  color: #1A1A1A;
}
SECTION.responses LI P A {
  font-size: 0.75rem;
  color: #2892ee;
}

/* ============================================================
   BODY > FOOTER — the site footer / h-card
   ============================================================ */
BODY > FOOTER {
  border-top: 2px solid #1A1A1A;
  padding: 2.5rem 1.5rem;
  background: #F0EDE5;
}
BODY > FOOTER > DIV {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
BODY > FOOTER IMG {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Placeholder avatar */
BODY > FOOTER > DIV > SPAN:first-child {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E5E1D8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #8A8A84;
}
BODY > FOOTER H3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: #1A1A1A;
}
BODY > FOOTER P {
  font-size: 0.875rem;
  color: #4A4A4A;
  margin: 0.25rem 0 0 0;
  text-align: left;
}
BODY > FOOTER NAV {
  margin-top: 0.75rem;
}
BODY > FOOTER NAV UL {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}
BODY > FOOTER NAV A {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.75rem;
}

/* ============================================================
   GLOBAL ELEMENTS
   ============================================================ */
A:link { color: #2892ee; text-decoration: none; }
A:visited { color: #7BADE0; }
A:hover { color: #1A7DD4; }

H1, H2, H3, H4, H5, H6 {
  color: #1A1A1A;
  margin-top: 0;
  line-height: 1.15;
}

P { line-height: 1.65; }

IMG { max-width: 100%; display: block; }

BLOCKQUOTE {
  border-left: 2px solid #D4D0C8;
  margin: 1.5em 0;
  padding-left: 1.25em;
  font-style: italic;
  color: #4A4A4A;
}

CODE, PRE {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.875rem;
}
PRE {
  padding: 1rem 1.25rem;
  background: #F5F3EE;
  border-radius: 4px;
  border: 1px solid #E5E1D8;
  overflow-x: auto;
  line-height: 1.5;
}
CODE {
  background: #F5F3EE;
  padding: 1px 5px;
  border-radius: 3px;
}
PRE CODE {
  background: none;
  padding: 0;
}

HR {
  border: 0;
  background: #D4D0C8;
  height: 1px;
  margin: 2rem 0;
}

SMALL {
  font-size: 0.8125rem;
}

B, STRONG { font-weight: 600; }

/* Hidden metadata (Schema.org author spans, canonical links) */
ARTICLE HEADER > SPAN[itemprop="author"],
ARTICLE > SPAN[itemprop="agent"],
ARTICLE > LINK[itemprop] {
  display: none;
}

TABLE { width: 100%; border-collapse: collapse; }
TH, TD { text-align: left; padding: 6px 12px; border-bottom: 1px solid #E5E1D8; }
TH { font-weight: 600; color: #4A4A4A; font-size: 0.875rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media only screen and (max-width: 600px) {
  BODY > HEADER { padding: 2.5rem 1.25rem 1.5rem; }
  BODY > HEADER H1 { font-size: 2.25rem; }
  BODY > HEADER H2 { font-size: 0.75rem; }
  BODY > HEADER NAV UL { gap: 1rem; flex-wrap: wrap; }
  ARTICLE HEADER H1 { font-size: 1.375rem; }
  BODY > FOOTER > DIV { flex-direction: column; align-items: center; text-align: center; }
  BODY > FOOTER P { text-align: center; }
  BODY > FOOTER NAV UL { justify-content: center; }
  ARTICLE FIGCAPTION SMALL { flex-wrap: wrap; gap: 0.5rem; }
}

/* ============================================================
   ANIMATION (progressive enhancement — no JS required)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  ARTICLE, BODY > FOOTER > DIV {
    animation: fadeUp 0.4s ease-out both;
  }
  ARTICLE:nth-of-type(1) { animation-delay: 0.05s; }
  ARTICLE:nth-of-type(2) { animation-delay: 0.1s; }
  ARTICLE:nth-of-type(3) { animation-delay: 0.15s; }
  ARTICLE:nth-of-type(4) { animation-delay: 0.2s; }
  ARTICLE:nth-of-type(5) { animation-delay: 0.25s; }
  ARTICLE:nth-of-type(6) { animation-delay: 0.3s; }
  ARTICLE:nth-of-type(7) { animation-delay: 0.35s; }
  ARTICLE:nth-of-type(8) { animation-delay: 0.4s; }
  BODY > FOOTER > DIV { animation-delay: 0.45s; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}