/* ============================================================
   Blog SPA — main.css
   Aesthetic: editorial reader / epub-clean
   Font: IBM Plex Serif (body) + IBM Plex Sans (UI)
   Palette: whitesmoke bg / near-black text / no color accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Reset ────────────────────────────────────────────────── */

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

/* ── Tokens ───────────────────────────────────────────────── */

:root {
     --bg: #f5f5f5;
     --surface: #efefef;
     --border: #d8d8d8;
     --text: #111111;
     --text-muted: #666666;
     --text-subtle: #999999;
     --accent: #111111;

     --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
     --font-body: 'IBM Plex Serif', Georgia, serif;

     --measure: 66ch;
     --nav-h: 52px;

     --space-xs: 0.375rem;
     --space-sm: 0.75rem;
     --space-md: 1.25rem;
     --space-lg: 2.5rem;
     --space-xl: 4rem;

     --radius: 2px;
     --transition: 150ms ease;
}

/* ── Base ─────────────────────────────────────────────────── */

html {
     font-size: 17px;
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
}

body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--font-ui);
     line-height: 1.6;
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
}

/* ── Nav ──────────────────────────────────────────────────── */

nav {
     position: sticky;
     top: 0;
     z-index: 100;
     height: var(--nav-h);
     background: var(--bg);
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     padding: 0 var(--space-lg);
     gap: var(--space-lg);
}

.nav-brand {
     font-family: var(--font-ui);
     font-weight: 600;
     font-size: 0.875rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text);
     text-decoration: none;
     margin-right: auto;
}

nav a {
     font-family: var(--font-ui);
     font-size: 0.875rem;
     font-weight: 400;
     color: var(--text-muted);
     text-decoration: none;
     letter-spacing: 0.01em;
     padding: var(--space-xs) 0;
     border-bottom: 1px solid transparent;
     transition: color var(--transition), border-color var(--transition);
}

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

nav a.active {
     color: var(--text);
     border-bottom-color: var(--text);
}

/* ── Main / Page ──────────────────────────────────────────── */

#app {
     flex: 1;
     width: 100%;
     max-width: calc(var(--measure) + var(--space-lg) * 2);
     margin: 0 auto;
     padding: var(--space-xl) var(--space-lg);
}

/* ── Typography ───────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
     font-family: var(--font-body);
     font-weight: 500;
     line-height: 1.25;
     color: var(--text);
}

h1 {
     font-size: 2rem;
     margin-bottom: var(--space-md);
}

h2 {
     font-size: 1.4rem;
     margin-bottom: var(--space-sm);
     margin-top: var(--space-lg);
}

h3 {
     font-size: 1.15rem;
     margin-bottom: var(--space-sm);
     margin-top: var(--space-md);
}

h4 {
     font-size: 1rem;
     margin-bottom: var(--space-xs);
     margin-top: var(--space-md);
}

p {
     font-family: var(--font-body);
     font-size: 1rem;
     line-height: 1.8;
     color: var(--text);
     margin-bottom: var(--space-md);
}

a {
     color: var(--text);
     text-decoration: underline;
     text-underline-offset: 3px;
     text-decoration-color: var(--border);
     transition: text-decoration-color var(--transition);
}

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

strong {
     font-weight: 600;
}

em {
     font-style: italic;
}

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

/* ── Home ─────────────────────────────────────────────────── */

.home-header {
     padding-bottom: var(--space-lg);
     border-bottom: 1px solid var(--border);
     margin-bottom: var(--space-lg);
}

.home-header h1 {
     font-size: 2.25rem;
     font-style: italic;
     font-weight: 400;
     letter-spacing: -0.02em;
}

.home-header p {
     color: var(--text-muted);
     font-size: 0.9375rem;
     margin-bottom: 0;
}

/* ── Article List ─────────────────────────────────────────── */

.articles-header {
     padding-bottom: var(--space-md);
     border-bottom: 1px solid var(--border);
     margin-bottom: var(--space-lg);
}

.articles-header h1 {
     font-size: 1.5rem;
     font-weight: 500;
     letter-spacing: -0.01em;
}

.post-list {
     list-style: none;
     display: flex;
     flex-direction: column;
}

.post-list li {
     border-bottom: 1px solid var(--border);
}

.post-list a {
     display: flex;
     align-items: baseline;
     gap: var(--space-md);
     padding: var(--space-md) 0;
     text-decoration: none;
     color: var(--text);
     transition: color var(--transition);
}

.post-list a:hover {
     color: var(--text-muted);
}

.post-list .post-title {
     font-family: var(--font-body);
     font-size: 1.0625rem;
     flex: 1;
}

.post-list .post-slug {
     font-family: var(--font-ui);
     font-size: 0.75rem;
     color: var(--text-subtle);
     letter-spacing: 0.03em;
     white-space: nowrap;
}

/* ── Article View ─────────────────────────────────────────── */

.article-placeholder {
     color: var(--text-subtle);
     font-family: var(--font-ui);
     font-size: 0.9rem;
     padding: var(--space-lg) 0;
}

#article-view {
     margin-top: var(--space-xl);
     padding-top: var(--space-lg);
     border-top: 1px solid var(--border);
}

/* Markdown content rendered inside #article-view */

#article-view h1,
#article-view h2,
#article-view h3,
#article-view h4 {
     font-family: var(--font-body);
}

#article-view h1 {
     font-size: 1.875rem;
     font-weight: 500;
     margin-bottom: var(--space-lg);
     padding-bottom: var(--space-md);
     border-bottom: 1px solid var(--border);
}

#article-view h2 {
     font-size: 1.25rem;
     margin-top: var(--space-xl);
}

#article-view p {
     font-size: 1rem;
     line-height: 1.85;
     max-width: var(--measure);
}

#article-view ul,
#article-view ol {
     font-family: var(--font-body);
     padding-left: 1.5em;
     margin-bottom: var(--space-md);
     line-height: 1.8;
}

#article-view li {
     margin-bottom: var(--space-xs);
}

#article-view blockquote {
     border-left: 2px solid var(--border);
     padding-left: var(--space-md);
     color: var(--text-muted);
     font-style: italic;
     margin: var(--space-lg) 0;
}

#article-view code {
     font-family: 'IBM Plex Mono', 'Courier New', monospace;
     font-size: 0.875em;
     background: var(--surface);
     padding: 0.1em 0.35em;
     border-radius: var(--radius);
}

#article-view pre {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: var(--space-md);
     overflow-x: auto;
     margin-bottom: var(--space-md);
}

#article-view pre code {
     background: none;
     padding: 0;
     font-size: 0.875rem;
     line-height: 1.6;
}

#article-view img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: var(--space-lg) 0;
     border: 1px solid var(--border);
}

/* ── Contact ──────────────────────────────────────────────── */

.contact-header {
     padding-bottom: var(--space-md);
     border-bottom: 1px solid var(--border);
     margin-bottom: var(--space-lg);
}

.contact-header h1 {
     font-size: 1.5rem;
     font-weight: 500;
}

.contact-item {
     font-family: var(--font-ui);
     font-size: 0.9rem;
     color: var(--text-muted);
     margin-bottom: var(--space-sm);
}

.contact-item span {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--text-subtle);
     display: block;
     margin-bottom: 2px;
}

.contact-item a {
     color: var(--text);
     font-family: var(--font-body);
     font-size: 1rem;
}

/* ── 404 ──────────────────────────────────────────────────── */

.not-found {
     text-align: center;
     padding: var(--space-xl) 0;
}

.not-found .code {
     font-family: var(--font-ui);
     font-size: 5rem;
     font-weight: 600;
     color: var(--border);
     line-height: 1;
     display: block;
     margin-bottom: var(--space-md);
}

.not-found p {
     color: var(--text-muted);
     font-size: 0.9rem;
}

/* ── Loading / State ──────────────────────────────────────── */

.loading {
     font-family: var(--font-ui);
     font-size: 0.875rem;
     color: var(--text-subtle);
     padding: var(--space-lg) 0;
}

/* ── Ebook ────────────────────────────────────────────────── */

.ebook-header {
     padding-bottom: var(--space-lg);
     border-bottom: 1px solid var(--border);
     margin-bottom: var(--space-lg);
}

.ebook-eyebrow {
     display: block;
     font-family: var(--font-ui);
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--text-subtle);
     margin-bottom: var(--space-sm);
}

.ebook-header h1 {
     font-size: 2rem;
     font-weight: 500;
     letter-spacing: -0.02em;
     margin-bottom: var(--space-md);
}

.ebook-subtitle {
     color: var(--text-muted);
     font-size: 0.9375rem;
     line-height: 1.7;
     margin-bottom: 0;
     max-width: 52ch;
}

.ebook-cover-block {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: var(--space-lg);
     margin-bottom: var(--space-xl);
     align-items: start;
}

.ebook-cover {
     width: 160px;
     flex-shrink: 0;
}

.ebook-cover img {
     width: 100%;
     height: auto;
     display: block;
     border: 1px solid var(--border);
}

.ebook-meta {
     display: flex;
     flex-direction: column;
     gap: var(--space-md);
     padding-top: var(--space-xs);
}

.meta-item {
     font-family: var(--font-ui);
     font-size: 0.875rem;
     color: var(--text);
     border-bottom: 1px solid var(--border);
     padding-bottom: var(--space-md);
}

.meta-item span {
     display: block;
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--text-subtle);
     margin-bottom: 3px;
}

.ebook-section {
     margin-bottom: var(--space-xl);
}

.ebook-section h2 {
     font-size: 1.1rem;
     font-weight: 500;
     margin-top: 0;
     margin-bottom: var(--space-lg);
     padding-bottom: var(--space-sm);
     border-bottom: 1px solid var(--border);
}

.chapter-list {
     list-style: none;
     display: flex;
     flex-direction: column;
}

.chapter-list li {
     display: flex;
     gap: var(--space-md);
     padding: var(--space-md) 0;
     border-bottom: 1px solid var(--border);
     align-items: baseline;
}

.chapter-num {
     font-family: var(--font-ui);
     font-size: 0.7rem;
     font-weight: 500;
     color: var(--text-subtle);
     letter-spacing: 0.05em;
     flex-shrink: 0;
     margin-top: 2px;
}

.chapter-list strong {
     font-family: var(--font-body);
     font-weight: 500;
     font-size: 1rem;
     display: block;
     margin-bottom: 2px;
}

.chapter-list p {
     font-size: 0.875rem;
     color: var(--text-muted);
     line-height: 1.6;
     margin-bottom: 0;
}

.ebook-cta {
     padding-top: var(--space-lg);
     border-top: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     gap: var(--space-sm);
}

.cta-button {
     display: inline-block;
     background: var(--text);
     color: var(--bg);
     font-family: var(--font-ui);
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.02em;
     text-decoration: none;
     padding: 0.75rem var(--space-lg);
     transition: opacity var(--transition);
     align-self: flex-start;
}

.cta-button:hover {
     opacity: 0.8;
     text-decoration: none;
}

.cta-note {
     font-family: var(--font-ui);
     font-size: 0.8rem;
     color: var(--text-subtle);
     margin-bottom: 0;
}



/* ── Search ───────────────────────────────────────────────── */

.search-bar {
     margin-bottom: var(--space-lg);
}

.search-bar input {
     width: 100%;
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--border);
     padding: var(--space-sm) 0;
     font-family: var(--font-ui);
     font-size: 0.9375rem;
     color: var(--text);
     outline: none;
     transition: border-color var(--transition);
}

.search-bar input::placeholder {
     color: var(--text-subtle);
}

.search-bar input:focus {
     border-bottom-color: var(--text);
}

.search-results {
     margin-bottom: var(--space-lg);
}

.search-result-item {
     padding: var(--space-md) 0;
     border-bottom: 1px solid var(--border);
}

.search-result-title {
     font-family: var(--font-body);
     font-size: 1.0625rem;
     color: var(--text);
     text-decoration: none;
     display: block;
     margin-bottom: var(--space-xs);
}

.search-result-title:hover {
     color: var(--text-muted);
}

.search-result-excerpt {
     font-family: var(--font-ui);
     font-size: 0.8125rem;
     color: var(--text-muted);
     line-height: 1.6;
     margin-bottom: 0;
}

.search-result-excerpt mark {
     background: none;
     color: var(--text);
     font-weight: 600;
}

.search-empty {
     font-family: var(--font-ui);
     font-size: 0.875rem;
     color: var(--text-subtle);
     padding: var(--space-md) 0;
     margin-bottom: 0;
}

/* ── Footer ───────────────────────────────────────────────── */

footer {
     border-top: 1px solid var(--border);
     padding: var(--space-md) var(--space-lg);
     display: flex;
     gap: var(--space-lg);
     justify-content: center;
}

footer a {
     font-family: var(--font-ui);
     font-size: 0.75rem;
     color: var(--text-subtle);
     text-decoration: none;
     letter-spacing: 0.02em;
     transition: color var(--transition);
}

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

/* ── Legal ────────────────────────────────────────────────── */

.legal-view h1 {
     font-size: 1.5rem;
     font-weight: 500;
     margin-bottom: var(--space-lg);
     padding-bottom: var(--space-md);
     border-bottom: 1px solid var(--border);
}

.legal-view h2 {
     font-size: 1rem;
     font-weight: 500;
     font-family: var(--font-ui);
     margin-top: var(--space-lg);
     margin-bottom: var(--space-sm);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-size: 0.75rem;
}

.legal-view p {
     font-size: 0.9375rem;
     color: var(--text-muted);
     line-height: 1.8;
     margin-bottom: var(--space-md);
}

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 640px) {
     html {
          font-size: 16px;
     }

     nav {
          padding: 0 var(--space-md);
          gap: var(--space-md);
     }

     .nav-brand {
          font-size: 0.8rem;
     }

     nav a {
          font-size: 0.8rem;
     }

     #app {
          padding: var(--space-lg) var(--space-md);
     }

     h1 {
          font-size: 1.625rem;
     }

     .home-header h1 {
          font-size: 1.75rem;
     }

     .post-list .post-slug {
          display: none;
     }

     #article-view h1 {
          font-size: 1.5rem;
     }

     #article-view p {
          font-size: 0.9375rem;
     }

     .not-found .code {
          font-size: 3.5rem;
     }

     .ebook-cover-block {
          grid-template-columns: 1fr;
     }

     .ebook-cover {
          width: 120px;
     }

     .cta-button {
          width: 100%;
          text-align: center;
     }
}

@media (max-width: 400px) {
     nav {
          gap: var(--space-sm);
     }

     .nav-brand img {
          display: block;
     }
}

/* ── Tablet ───────────────────────────────────────────────── */

@media (min-width: 641px) and (max-width: 1024px) {
     #app {
          padding: var(--space-lg) var(--space-lg);
     }
}

/* ── Print ────────────────────────────────────────────────── */

@media print {
     nav {
          display: none;
     }

     #app {
          padding: 0;
          max-width: 100%;
     }

     #article-view {
          border-top: none;
     }
}