/* Post typography — based on the best-designed takes */
html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Raleway', system-ui, sans-serif; background: #030712; color: #fff; }
h1 { font-family: 'Inter', sans-serif !important; }

/* Takes accent (amber) */
body[data-type="take"] { --accent: #F59E0B; --accent-light: #FCD34D; --accent-bg: rgba(245, 158, 11, 0.3); }
/* Notes accent (green) */
body[data-type="note"] { --accent: #10B981; --accent-light: #34D399; --accent-bg: rgba(16, 185, 129, 0.3); }

::selection { background: var(--accent-bg); }

/* Article prose — 680px optimal reading width, generous line-height */
.prose-dark { max-width: 680px; margin: 0 auto; }
.prose-dark p { margin-bottom: 1.5rem; line-height: 1.8; color: #d1d5db; font-size: 1.125rem; }
.prose-dark h2 { font-size: 1.75rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1.5rem; color: #fff; }
.prose-dark h3 { font-size: 1.375rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; color: #fff; }
.prose-dark h4 { font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.875rem; }
.prose-dark strong { color: #fff; font-weight: 600; }
.prose-dark em { color: var(--accent); font-style: italic; }
.prose-dark a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(245, 158, 11, 0.3); text-underline-offset: 3px; transition: color 0.2s; }
.prose-dark a:hover { color: var(--accent-light); text-decoration-color: var(--accent); }
.prose-dark blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: #9ca3af; font-size: 1.25rem; line-height: 1.7; }
.prose-dark ul, .prose-dark ol { margin-bottom: 1.5rem; padding-left: 1.5rem; color: #d1d5db; }
.prose-dark li { margin-bottom: 0.5rem; line-height: 1.7; font-size: 1.125rem; }
.prose-dark hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 3rem 0; }
.prose-dark figure { margin: 2.5rem 0; }
.prose-dark figure img { width: 100%; border-radius: 12px; }
.prose-dark figcaption { text-align: center; color: #9ca3af; font-size: 0.9rem; font-style: italic; margin-top: 0.75rem; }
.prose-dark img { border-radius: 12px; max-width: 100%; height: auto; }
.prose-dark code { font-family: 'JetBrains Mono', monospace; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: #e5e7eb; }
.prose-dark pre { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.5rem; overflow-x: auto; margin: 2rem 0; }
.prose-dark pre code { background: none; padding: 0; }
.prose-dark table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.prose-dark th { text-align: left; padding: 0.75rem 1rem; border-bottom: 2px solid rgba(255,255,255,0.1); color: #fff; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.prose-dark td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: #d1d5db; }

/* Glass card */
.glass { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(8px); border-radius: 16px; }

/* Callout boxes (notes) */
.tldr-box { background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(6,182,212,0.04) 100%); border: 1px solid rgba(16,185,129,0.15); border-left: 4px solid #10B981; border-radius: 12px; padding: 1.5rem; margin: 2rem 0; }
.callout-warning { background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.04) 100%); border: 1px solid rgba(245,158,11,0.15); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; }
.callout-info { background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.04) 100%); border: 1px solid rgba(59,130,246,0.15); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; }

/* Pull quotes */
.pull-quote { text-align: center; margin: 3rem 0; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.pull-quote-text { font-size: 1.5rem; font-style: italic; color: var(--accent); line-height: 1.6; }

/* Journal entries (loneliness-style posts) */
.journal-entry { border-left: 2px solid rgba(245, 158, 11, 0.3); padding-left: 1.5rem; margin: 3rem 0; }
.journal-date { font-variant: small-caps; letter-spacing: 0.05em; color: var(--accent); font-weight: 600; margin-bottom: 1rem; }

/* Part headers (multi-part essays) */
.part-header { text-align: center; margin: 4rem 0 3rem 0; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.part-header h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em; color: #6b7280; margin: 0; }

/* Section dividers */
.section-divider { text-align: center; margin: 3rem 0; }
.section-divider .divider-glyph { display: inline-block; width: 40px; height: 1px; background: rgba(255,255,255,0.15); }

/* Sidenotes */
.sidenote { font-size: 0.875rem; color: #6b7280; font-style: italic; margin: 1rem 0; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.1); }

/* Read next cards */
.read-next-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 1.25rem; transition: background 0.2s; }
.read-next-card:hover { background: rgba(255,255,255,0.05); }

/* Callout variants */
.callout-danger { background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.04) 100%); border: 1px solid rgba(239,68,68,0.15); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; }

/* Sprite cards (game-themed posts) */
.sprite-card { transition: transform 0.2s ease; }
.sprite-card:hover { transform: scale(1.05); }

/* Gradient text */
.gradient-text { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }