* { box-sizing: border-box; }
:root {
  --bg:#fcf7ec; --surface:#f8ecc9; --ink:#112f2c; --ink-2:#48645f;
  --accent:#d05437; --accent-fill:#f48067; --hairline:rgba(17,47,44,.16);
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }

header.banner {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 28px; border-bottom: 1px solid var(--hairline);
}
.wordmark { font-family: Charter, Georgia, serif; font-size: 1.35rem; font-weight: 700;
            letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.wordmark .dot { color: var(--accent-fill); }

.shell { display: flex; max-width: 1080px; margin: 0 auto; }
.sidebar {
  width: 265px; flex: none; padding: 28px 22px;
  border-right: 1px solid var(--hairline);
  overflow: hidden; transition: width .22s ease, padding .22s ease;
}
.sidebar-inner { width: 221px; }
body.side-collapsed .sidebar { width: 0; padding: 28px 0; border-right: none; }
.side-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink-2);
}
.side-toggle:hover { background: var(--surface); color: var(--ink); }
nav.site { display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
nav.site a { text-decoration: none; color: var(--ink); font-size: .92rem; padding: 7px 10px; border-radius: 7px; }
nav.site a.active { background: var(--surface); font-weight: 600; }
nav.site a:hover { background: var(--surface); }
.essay-list-head { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
                   color: var(--ink-2); margin: 0 0 10px; padding-left: 10px; }
.essay-list { display: flex; flex-direction: column; gap: 4px; }
.essay-list a { text-decoration: none; color: var(--ink); font-size: .88rem; line-height: 1.35;
                padding: 8px 10px; border-radius: 7px; }
.essay-list a:hover { background: var(--surface); }
.essay-list a.current { background: var(--surface); border-left: 3px solid var(--accent-fill); padding-left: 7px; }
.essay-list .date { display: block; font-size: .74rem; color: var(--ink-2); margin-top: 2px; }
.essay-list a.hidden { display: none; }

main { flex: 1; min-width: 0; padding: 44px 52px 80px; }
article { max-width: 640px; }
.eyebrow { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
           color: var(--accent); margin: 0 0 14px; font-weight: 600; }
h1.title { font-family: Charter, Georgia, serif; font-size: 2.1rem; line-height: 1.18;
           margin: 0 0 10px; letter-spacing: -.015em; }
.subtitle { font-family: Charter, Georgia, serif; font-style: italic; color: var(--ink-2);
            font-size: 1.08rem; margin: 0 0 18px; line-height: 1.45; }
.meta { font-size: .82rem; color: var(--ink-2); margin-bottom: 34px; }
.meta .divider { margin: 0 8px; opacity: .5; }

.prose { font-family: Charter, Georgia, serif; font-size: 1.06rem; line-height: 1.7; }
.prose p { margin: 0 0 22px; }
.prose h2 { font-family: Charter, Georgia, serif; font-size: 1.45rem; margin: 38px 0 14px; letter-spacing: -.01em; }
.prose h3 { font-family: Charter, Georgia, serif; font-size: 1.15rem; margin: 30px 0 12px; }
.prose img { max-width: 100%; }
.prose blockquote { margin: 0 0 22px; padding: 2px 0 2px 18px;
                    border-left: 3px solid var(--accent-fill); color: var(--ink-2); }
.prose hr { border: none; border-top: 1px solid var(--hairline); margin: 34px 0; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 26px; }
.prose li { margin-bottom: 8px; }
.prose table { border-collapse: collapse; font-size: .9rem; font-family: system-ui, sans-serif; margin: 0 0 22px; }
.prose td, .prose th { border: 1px solid var(--hairline); padding: 6px 12px; text-align: left; }
.prose p.caption { font-size: .88rem; font-family: system-ui, sans-serif;
                   color: var(--ink-2); font-style: normal; margin-top: -14px; }
.prose p.caption em { font-style: normal; }

.tags { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.tag { font-size: .76rem; padding: 4px 12px; border-radius: 13px;
       background: var(--surface); color: var(--ink-2); border: 1px solid var(--hairline); }

.essay-cards { display: flex; flex-direction: column; gap: 18px; }
.card { display: block; text-decoration: none; color: var(--ink); background: var(--surface);
        border: 1px solid var(--hairline); border-radius: 10px; padding: 20px 24px; }
.card:hover { border-color: var(--accent-fill); }
.card h2 { font-family: Charter, Georgia, serif; margin: 0 0 6px; font-size: 1.25rem; }
.card p { margin: 0 0 8px; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.card .date { font-size: .78rem; color: var(--ink-2); }

footer.site { max-width: 1080px; margin: 0 auto; padding: 18px 28px 40px;
              font-size: .8rem; color: var(--ink-2); border-top: 1px solid var(--hairline); }

.side-toggle .burger { display: none; }

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  header.banner { position: sticky; top: 0; background: var(--bg); z-index: 50;
                  flex-wrap: wrap; gap: 10px; }
  .side-toggle .panel { display: none; }
  .side-toggle .burger { display: block; }
  .sidebar { display: none; position: fixed; inset: 0; z-index: 40;
             width: 100%; padding: 84px 22px 30px; background: var(--bg);
             border-right: none; overflow-y: auto; transition: none; }
  .sidebar-inner { width: 100%; }
  body.menu-open .sidebar { display: block; }
  body.side-collapsed .sidebar { width: 100%; }
  main { padding: 30px 20px 60px; }
}