/*
Theme Name: Marginalia
Theme URI: https://example.com/marginalia
Author: Claude
Author URI: https://claude.ai
Description: An elegant, classic personal-blog theme for writers who like their words to breathe. Warm parchment tones, a literary type pairing, and quiet ornamental details inspired by the marginalia scribbled in the margins of old books. Supports post formats, featured images, and a clean single-column reading layout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marginalia
Tags: blog, one-column, custom-menu, featured-images, post-formats, translation-ready
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-paper: #FBF8F2;
  --color-paper-shade: #F1ECE0;
  --color-ink: #2A2723;
  --color-ink-soft: #5C564C;
  --color-muted: #A79C89;
  --color-brass: #7C6A42;
  --color-oxblood: #8B3A3A;
  --color-rule: #E3DBC8;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Serif 4', 'Charter', Georgia, serif;
  --font-meta: 'Inter', -apple-system, sans-serif;

  --measure: 42em;
  --measure-wide: 58em;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  font-feature-settings: "liga" 1, "kern" 1;
}

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

a {
  color: var(--color-oxblood);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 var(--space-3); }

blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-brass);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-ink-soft);
}

hr {
  border: none;
  text-align: center;
  margin: var(--space-4) 0;
}
hr::after {
  content: "◆";
  color: var(--color-brass);
  font-size: 0.7rem;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  padding: var(--space-5) 0 var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-rule);
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}
.site-title a { color: var(--color-ink); text-decoration: none; }

.site-description {
  font-family: var(--font-meta);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.primary-nav {
  margin-top: var(--space-3);
}
.primary-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.primary-nav a {
  font-family: var(--font-meta);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
}
.primary-nav a:hover { color: var(--color-oxblood); }

/* ==========================================================================
   Content
   ========================================================================== */
.content-area {
  flex: 1;
  padding: var(--space-5) 0;
}

.entry-list {
  max-width: var(--measure);
  margin: 0 auto;
}

.entry-preview {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-rule);
}
.entry-preview:last-child { border-bottom: none; }

.entry-eyebrow {
  font-family: var(--font-meta);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: var(--space-1);
}

.entry-title { margin-bottom: var(--space-2); }
.entry-title a { color: var(--color-ink); text-decoration: none; }
.entry-title a:hover { color: var(--color-oxblood); }

.entry-meta {
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

.entry-thumb {
  margin: var(--space-3) 0;
  border-radius: 2px;
}

.entry-excerpt { color: var(--color-ink-soft); }

.read-more {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-meta);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Single post */
.single-entry { max-width: var(--measure); margin: 0 auto; }
.single-entry .entry-title { font-size: clamp(2rem, 5vw, 2.8rem); }
.single-entry .entry-header { text-align: center; margin-bottom: var(--space-4); }
.single-entry .entry-thumb { margin: var(--space-4) calc(var(--space-3) * -1); }

.entry-content > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 0.8;
  padding: 0.1em 0.08em 0 0;
  color: var(--color-oxblood);
  font-weight: 600;
}

.entry-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-meta);
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Post format accents */
.format-quote .entry-content blockquote { margin: 0; border: none; padding: 0; }
.format-quote .entry-title { font-style: italic; }

/* Sidebar (used only on wide layouts if activated) */
.widget-area { margin-top: var(--space-5); }
.widget { margin-bottom: var(--space-4); }
.widget-title {
  font-family: var(--font-meta);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: var(--space-2);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  max-width: var(--measure);
  margin: var(--space-4) auto 0;
  font-family: var(--font-meta);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Comments */
.comments-area {
  max-width: var(--measure);
  margin: var(--space-5) auto 0;
}
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}
.comment-author {
  font-family: var(--font-meta);
  font-size: 0.85rem;
  font-weight: 600;
}
.comment-metadata {
  font-family: var(--font-meta);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* Footer */
.site-footer {
  text-align: center;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-meta);
  font-size: 0.8rem;
  color: var(--color-muted);
}
.site-footer a { color: var(--color-ink-soft); }

/* Screen-reader text */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}

@media (max-width: 600px) {
  .single-entry .entry-thumb { margin: var(--space-3) 0; }
  .entry-content > p:first-of-type::first-letter { font-size: 3rem; }
}