:root {
  --bg: #f4f1ea; --ink: #1d231f; --muted: #66706a; --line: #dcd6c9; --accent: #b8742a; --on-accent: #1a1a1a; --note: #efe3cf;
  --panel: #1f2b25; --panel-ink: #ede8dc; --panel-muted: #a9b3ac;
  --serif: "Fraunces", Georgia, serif; --ui: "Work Sans", system-ui, sans-serif;
  --h-font: 600 30px/1.1 var(--serif); --ph: #e2dccf; --r: 6px;
}
body { font: 18px/1.65 var(--ui); }
.split { display: grid; grid-template-columns: minmax(340px, 40%) 1fr; min-height: calc(100vh - 32px); }

.panel { background: var(--panel); color: var(--panel-ink); position: sticky; top: 0; height: 100vh; overflow: auto; padding: 48px 48px 40px; display: flex; flex-direction: column; }
.panel .site { font: 600 14px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--panel-muted); }
.portrait { margin: 36px 0 28px; aspect-ratio: 4/5; max-width: 260px; border-radius: 6px; background: #2c3a33; border: 1px dashed #4b5b52; display: grid; place-items: center; color: #7f8f86; font-size: 14px; }
.panel h1 { font: 600 clamp(40px, 4.4vw, 58px)/1 var(--serif); margin: 0 0 18px; }
.panel p { margin: 0 0 12px; color: var(--panel-ink); font-size: 18px; max-width: 34ch; }
.panel .btn { margin-top: 22px; align-self: flex-start; font: 600 15px/1 var(--ui); padding: 14px 22px; border-radius: 6px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.panel .btn:hover { background: #cf8837; }
.panel nav { margin-top: auto; padding-top: 32px; display: flex; gap: 20px; font-size: 15px; }
.panel nav a { color: var(--panel-muted); text-decoration: none; }
.panel nav a:hover { color: var(--panel-ink); }

.feed { padding: 48px clamp(24px, 6vw, 88px) 96px; max-width: 820px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chips button { font: 500 14px var(--ui); padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.chips button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.entry { display: block; padding: 32px 0; border-top: 1px solid var(--line); text-decoration: none; }
.entry .d { font: 500 13px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.entry h2 { font: 600 clamp(28px, 3vw, 36px)/1.12 var(--serif); margin: 8px 0 10px; }
.entry:hover h2 { color: #8a5519; }
.entry p { margin: 0; color: var(--muted); font: 20px/1.55 var(--serif); font-weight: 400; }
.entry .tags { margin-top: 14px; font-size: 14px; color: var(--muted); }

.read { padding: 48px clamp(24px, 6vw, 88px) 24px; max-width: 760px; }
.read .back { font-size: 15px; color: var(--muted); text-decoration: none; }
.read h1 { font: 600 clamp(40px, 5vw, 60px)/1.05 var(--serif); margin: 28px 0 12px; }
.read .d { color: var(--muted); font-size: 15px; margin-bottom: 40px; }
.read .body p { font: 21px/1.7 var(--serif); margin: 0 0 1em; }
.read .sig { font: italic 400 24px var(--serif); margin-top: 32px; }
.comments { padding: 24px clamp(24px, 6vw, 88px) 96px; max-width: 760px; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .panel { position: static; height: auto; padding: 32px 16px; }
  .portrait { max-width: 160px; margin: 24px 0 20px; }
  .panel nav { margin-top: 20px; }
  .feed, .read, .comments { padding-left: 16px; padding-right: 16px; }
}