:root {
  --ink: #17221c;
  --muted: #657068;
  --paper: #f7f5f0;
  --card: #fffefa;
  --line: #dddcd5;
  --brand: #315e48;
  --brand-dark: #224232;
  --accent: #c98145;
  --soft: #e8eee9;
  --shadow: 0 10px 28px rgb(36 48 40 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #e9e7e1;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #e9e7e1; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #d99a61; outline-offset: 2px; }
.app-shell { width: min(100%, 480px); min-height: 100vh; margin: 0 auto; background: var(--paper); box-shadow: 0 0 40px rgb(20 28 22 / 12%); }

.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: max(10px, env(safe-area-inset-top)) 16px 8px; color: white; background: rgb(34 66 50 / 96%); backdrop-filter: blur(16px); }
.brand { display: inline-flex; gap: 9px; align-items: center; color: inherit; font-family: Georgia, serif; font-size: 22px; font-weight: 700; text-decoration: none; letter-spacing: -.4px; }
.brand-mark, .end-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50% 50% 50% 14%; font-family: Georgia, serif; }
.close-button { border: 0; cursor: pointer; }

.profile { background: var(--card); border-bottom: 1px solid var(--line); }
.cover { position: relative; height: 174px; overflow: hidden; background: linear-gradient(180deg, transparent 30%, rgb(20 40 30 / 28%)), linear-gradient(145deg, #d5b17f 0 28%, #8da27b 28% 50%, #617557 50% 68%, #334d3d 68%); }
.cover::after { position: absolute; inset: 0; content: ""; opacity: .36; background: repeating-linear-gradient(111deg, transparent 0 28px, rgb(255 255 255 / 13%) 29px 30px); }
.cover-place { position: absolute; z-index: 1; right: 16px; bottom: 13px; padding: 5px 9px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 999px; color: white; background: rgb(26 43 34 / 42%); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.profile-body { position: relative; padding: 50px 18px 20px; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #f7f1e7; background: linear-gradient(145deg, #5f7e68, #263f32); font-family: Georgia, serif; font-weight: 700; object-fit: cover; }
.avatar-large { position: absolute; top: -42px; left: 18px; width: 86px; height: 86px; border: 4px solid var(--card); font-size: 25px; box-shadow: 0 6px 18px rgb(22 34 27 / 15%); }
.profile-heading h1 { margin: 0; font-family: Georgia, serif; font-size: 28px; line-height: 1.08; letter-spacing: -.55px; }
.handle { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.bio { max-width: 410px; margin: 15px 0 11px; font-family: Georgia, serif; font-size: 15px; line-height: 1.48; }
.profile-meta, .stats { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 12px; }
.profile-meta span:first-child::before { content: "◌ "; color: var(--brand); }
.stats { margin-top: 13px; }
.stats strong { color: var(--ink); }

.feed { padding: 18px 12px 30px; }
.feed-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 12px; }
.feed-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 21px; }
.feed-heading span { color: var(--muted); font-size: 11px; }
.post { margin-bottom: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: var(--shadow); }
.post-header { display: flex; gap: 10px; align-items: center; padding: 14px 14px 8px; }
.post .avatar { width: 39px; height: 39px; font-size: 12px; }
.post-byline { min-width: 0; }
.post-author { margin: 0; font-size: 13px; font-weight: 800; }
.post-time { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.post-copy { margin: 0; padding: 5px 14px 13px; font-family: Georgia, serif; font-size: 15px; line-height: 1.52; white-space: pre-line; }
.inline-flag { display: inline-block; width: 1.2em; height: .8em; margin-left: .18em; border-radius: 1px; vertical-align: -.08em; object-fit: cover; box-shadow: 0 0 0 1px rgb(23 34 28 / 14%); }
.post-media { position: relative; min-height: 210px; margin: 0; overflow: hidden; background: #d8d6cf; }
.post-media img { display: block; width: 100%; height: 260px; object-fit: cover; }
.post-media .study-photo { height: auto; aspect-ratio: 1 / 1; }
.post-media .full-photo { height: auto; object-fit: contain; }
.post-media figcaption { position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; border-radius: 8px; color: white; background: rgb(20 30 24 / 68%); font-size: 10px; }
.notebook { display: grid; min-height: 250px; place-items: center; padding: 24px; background: radial-gradient(circle at 75% 20%, rgb(255 228 166 / 45%), transparent 30%), #8a765c; }
.notebook-page { width: 88%; padding: 25px 24px 21px 46px; transform: rotate(-1.3deg); border-radius: 2px; color: #26302b; background: repeating-linear-gradient(#f1eadb 0 27px, #b9c8c4 28px); box-shadow: 0 12px 20px rgb(23 21 17 / 28%); font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 18px; line-height: 28px; }
.notebook-page p { margin: 0; }
.notebook-page .small-note { margin-top: 8px; color: #784c32; font-size: 13px; }
.text-card { min-height: 210px; padding: 28px 24px; color: #efe9dc; background: linear-gradient(145deg, #234333, #4c6f57); }
.text-card blockquote { margin: 0; font-family: Georgia, serif; font-size: 25px; line-height: 1.25; }
.text-card span { display: block; margin-top: 16px; color: #d8b78f; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.post-counts { display: flex; justify-content: space-between; padding: 10px 14px 7px; color: var(--muted); font-size: 11px; }
.post-actions { display: grid; grid-template-columns: 1fr 1fr; margin: 0 12px; border-top: 1px solid #e8e5de; }
.post-action { padding: 10px 5px 11px; border: 0; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.post-action.liked { color: var(--brand); }
.post-action:hover { background: var(--soft); }
.feed-end { display: grid; justify-items: center; padding: 24px 0 4px; color: var(--muted); font-size: 12px; }
.feed-end .end-mark { color: white; background: var(--brand); }
.feed-end p { margin: 9px 0 0; }

.sheet-backdrop { position: fixed; z-index: 30; inset: 0; background: rgb(10 18 13 / 48%); backdrop-filter: blur(2px); }
.comment-sheet { position: fixed; z-index: 31; right: 0; bottom: 0; left: 0; width: min(100%, 480px); max-height: 75vh; margin: auto; overflow: auto; border-radius: 22px 22px 0 0; background: var(--card); box-shadow: 0 -18px 50px rgb(10 20 14 / 25%); animation: rise .2s ease-out; }
.sheet-handle { width: 42px; height: 4px; margin: 9px auto 5px; border-radius: 999px; background: #cbc9c1; }
.sheet-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.sheet-header h2 { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.close-button { width: 34px; height: 34px; border-radius: 50%; color: var(--muted); background: var(--paper); font-size: 24px; cursor: pointer; }
.comment-list { padding: 12px 16px 28px; }
.comment { display: flex; gap: 9px; margin: 11px 0; }
.comment-avatar { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: white; background: #7a866f; font-size: 9px; font-weight: 800; object-fit: cover; }
.comment-bubble { padding: 9px 11px; border-radius: 4px 14px 14px; background: var(--paper); }
.comment-bubble strong { display: block; margin-bottom: 3px; font-size: 11px; }
.comment-bubble p { margin: 0; font-size: 13px; line-height: 1.4; }
.comment-time { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
@keyframes rise { from { transform: translateY(35px); opacity: 0; } }
@media (min-width: 481px) { body { padding: 18px 0; } .app-shell { min-height: calc(100vh - 36px); border-radius: 22px; overflow: clip; } .topbar { top: 18px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; } }