@font-face { font-family: 'Bricolage'; src: url('/fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --page: #f3f0e6;
  --surface: #fbf9f3;
  --sunk: #e7e2d3;
  --ink: #1e231b;
  --ink-2: #4c5345;
  --ink-3: #6f7668;
  --line: #dcd6c5;
  --rail: #2f5b3b;
  --rail-deep: #274c31;
  --rail-ink: #f6f3ea;
  --rail-soft: rgba(246, 243, 234, .74);
  --wool: #f4f0e4;
  --hill: #3a6c47;
  --accent: #2e6a3e;
  --accent-ink: #ffffff;
  --accent-soft: #dce8d5;
  --like: #c03a5b;
  --repost: #a26f0c;
  --online: #3a9a52;
  --danger: #b4321f;
  --scrim: rgba(24, 28, 20, .55);
  --shadow: 0 1px 2px rgba(30, 35, 27, .08), 0 12px 32px rgba(30, 35, 27, .14);
  --display: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --body: 'Atkinson', 'Segoe UI', system-ui, sans-serif;
  --rail-w: 248px;
  --main-w: 620px;
  --aside-w: 320px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #121510; --surface: #1a1e17; --sunk: #0c0f0a; --ink: #e9e8df; --ink-2: #aeb2a3; --ink-3: #868b7d; --line: #2a2f25;
    --rail: #1c3323; --rail-deep: #162a1c; --hill: #24432d; --accent: #93c69c; --accent-ink: #0f2414; --accent-soft: #213427;
    --like: #ee7090; --repost: #e2b350; --online: #6fcf86; --danger: #ef7a66; --scrim: rgba(0, 0, 0, .65);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #121510; --surface: #1a1e17; --sunk: #0c0f0a; --ink: #e9e8df; --ink-2: #aeb2a3; --ink-3: #868b7d; --line: #2a2f25;
  --rail: #1c3323; --rail-deep: #162a1c; --hill: #24432d; --accent: #93c69c; --accent-ink: #0f2414; --accent-soft: #213427;
  --like: #ee7090; --repost: #e2b350; --online: #6fcf86; --danger: #ef7a66; --scrim: rgba(0, 0, 0, .65);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.rail :focus-visible { outline-color: var(--rail-ink); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: minmax(var(--rail-w), 1fr) minmax(0, var(--main-w)) var(--aside-w) minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-ink); position: relative; }
.rail-inner::after { content: ''; position: absolute; right: 0; bottom: 0; left: calc(var(--rail-w) - 100vw); height: 110px; background: var(--hill); opacity: .5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V78C70 58 140 52 220 62S360 86 430 70 500 50 520 52V120Z'/%3E%3C/svg%3E") right bottom / 520px 110px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V78C70 58 140 52 220 62S360 86 430 70 500 50 520 52V120Z'/%3E%3C/svg%3E") right bottom / 520px 110px repeat-x; z-index: 0; pointer-events: none; }
.rail-inner > * { position: relative; z-index: 1; }
.rail-inner { position: sticky; top: 0; height: 100vh; width: var(--rail-w); margin-left: auto; display: flex; flex-direction: column; padding: 22px 0 18px 20px; }
.wordmark { display: flex; align-items: center; gap: 10px; font: 700 29px/1 var(--display); letter-spacing: -.02em; padding: 0 16px 24px 10px; white-space: nowrap; min-width: 0; }
.wordmark .wm-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sheep-mark { display: block; flex: none; width: 44px; height: 44px; }
.sheep-mark svg { display: block; width: 100%; height: 100%; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 16px; font: 600 17px/1.2 var(--body); color: var(--rail-soft); border-radius: 12px 0 0 12px; }
.nav a:hover { color: var(--rail-ink); background: rgba(255, 255, 255, .08); }
.nav a[aria-current="page"] { background: var(--page); color: var(--ink); }
.nav a[aria-current="page"]::before, .nav a[aria-current="page"]::after { content: ''; position: absolute; right: 0; width: 14px; height: 14px; pointer-events: none; }
.nav a[aria-current="page"]::before { top: -14px; background: radial-gradient(circle at 0 0, transparent 14px, var(--page) 14.5px); }
.nav a[aria-current="page"]::after { bottom: -14px; background: radial-gradient(circle at 0 100%, transparent 14px, var(--page) 14.5px); }
.nav .count { margin-left: auto; margin-right: 6px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--rail-ink); color: var(--rail); font: 700 13px/22px var(--body); text-align: center; }
.nav a[aria-current="page"] .count { background: var(--rail); color: var(--rail-ink); }
.compose-btn { margin: 22px 20px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 14px; background: var(--wool); color: #24452d; font: 700 17px var(--body); }
.compose-btn:hover { background: #fffdf6; }
.rail-me { margin-top: auto; margin-right: 20px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; text-align: left; color: var(--rail-ink); }
.rail-me:hover { background: rgba(255, 255, 255, .08); }
.rail-me .who { min-width: 0; }
.rail-me .who b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-me .who span { display: block; font-size: 14px; color: var(--rail-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

main { min-width: 0; border-right: 1px solid var(--line); min-height: 100vh; }
.aside { padding: 14px 0 40px 28px; }
.aside-inner { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 22px; }

/* top bar of each page */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 18px; }
.bar h1 { font: 700 22px/1.15 var(--display); letter-spacing: -.01em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .sub { display: block; font: 400 14px var(--body); color: var(--ink-3); }
.back { width: 38px; height: 38px; margin-left: -8px; border-radius: 12px; display: grid; place-items: center; }
.back:hover { background: var(--sunk); }
.tabs { display: flex; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { position: relative; padding: 13px 14px 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-selected="true"] { color: var(--ink); }
.tabs [aria-selected="true"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }

/* ---------- avatars ---------- */
.av { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--sunk); display: grid; place-items: center; font: 700 18px/1 var(--display); color: #fff; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.s { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.av.xs { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }
.av.l { width: 56px; height: 56px; border-radius: 15px; font-size: 22px; }
.av.xl { width: 112px; height: 112px; border-radius: 26px; font-size: 42px; }
.rail .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 11px; font-weight: 700; white-space: nowrap; border: 1.5px solid transparent; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { border-color: var(--line); background: transparent; }
.btn.quiet:hover { background: var(--sunk); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.following { border-color: var(--line); }
.btn.following:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.sm { height: 32px; padding: 0 13px; font-size: 14px; border-radius: 9px; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; color: var(--ink-3); }
.icon-btn:hover { background: var(--sunk); color: var(--ink); }

/* ---------- composer ---------- */
.composer { display: flex; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.composer .body { flex: 1; min-width: 0; }
.composer textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-size: 19px; line-height: 1.4; padding: 8px 0 10px; min-height: 48px; max-height: 60vh; }
.composer textarea::placeholder { color: var(--ink-3); }
.composer .tools { display: flex; align-items: center; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.composer .tools .icon-btn { color: var(--accent); }
.composer .tools .icon-btn:disabled { opacity: .4; cursor: default; background: none; }
.composer .left { margin-left: auto; margin-right: 10px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.composer .left.over { color: var(--danger); font-weight: 700; }
.composer .ctx { font-size: 14px; color: var(--ink-3); padding-top: 4px; }
.composer .ctx a { color: var(--accent); }
.composer.compact textarea { font-size: 17px; min-height: 40px; }
.uploads { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.upload { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sunk); }
.upload.video { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.upload img, .upload video { width: 100%; height: 100%; object-fit: cover; }
.upload .x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 9px; background: rgba(10, 14, 12, .72); color: #fff; display: grid; place-items: center; }
.upload .alt { position: absolute; left: 6px; bottom: 6px; height: 26px; padding: 0 9px; border-radius: 8px; background: rgba(10, 14, 12, .72); color: #fff; font-size: 13px; font-weight: 700; }
.upload .alt.set { background: var(--accent); color: var(--accent-ink); }
.upload .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .3); }
.upload .prog i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.upload .state { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 14, 12, .5); color: #fff; font-size: 14px; font-weight: 600; text-align: center; padding: 10px; }
.poll-edit { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; margin: 4px 0 10px; display: grid; gap: 8px; }
.poll-edit input, .poll-edit select { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); outline: 0; }
.poll-edit input:focus, .poll-edit select:focus { border-color: var(--accent); }
.poll-edit .row { display: flex; gap: 8px; align-items: center; }
.poll-edit .row label { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.poll-edit .actions { display: flex; justify-content: space-between; gap: 8px; }
.poll-edit .link { color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px 0; }
.poll-edit .link.danger { color: var(--danger); }

.suggest { position: absolute; z-index: 160; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
.suggest button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-align: left; }
.suggest button[aria-selected="true"], .suggest button:hover { background: var(--sunk); }
.suggest .n { font-weight: 700; display: block; }
.suggest .h { font-size: 14px; color: var(--ink-3); display: block; }

/* ---------- posts ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.post { position: relative; display: flex; gap: 12px; padding: 14px 18px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.post:hover { background: color-mix(in srgb, var(--sunk) 45%, transparent); }
.post .gutter { display: flex; flex-direction: column; align-items: center; flex: none; }
.post .content { flex: 1; min-width: 0; }
.post .head { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding-right: 30px; }
.post .name { font: 700 16px/1.25 var(--display); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.post .name:hover { text-decoration: underline; }
.post .handle { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.post .time { color: var(--ink-3); white-space: nowrap; flex: none; margin-left: 4px; }
.post .time:hover { text-decoration: underline; }
.post .menu-btn { position: absolute; top: 8px; right: 10px; }
.post .note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); margin: -4px 0 6px 0; }
.post .note a:hover { text-decoration: underline; }
.post .note svg { color: var(--repost); }
.post .note.pin svg { color: var(--accent); }
.post .ctx { font-size: 15px; color: var(--ink-3); margin-top: 1px; }
.post .ctx a { color: var(--accent); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.text a { color: var(--accent); }
.text a:hover { text-decoration: underline; }
.post.deleted { cursor: default; color: var(--ink-3); padding: 14px 18px; font-size: 15px; }
.post.deleted:hover { background: none; }
.post.deleted .tomb { flex: 1; padding: 10px 14px; border-radius: 12px; background: var(--sunk); }

.spine { flex: 1; width: 2px; margin-top: 6px; border-radius: 2px; background: var(--line); min-height: 14px; }
.post.has-next { border-bottom: 0; padding-bottom: 4px; }
.post.is-next { padding-top: 6px; }

.actions { display: flex; justify-content: space-between; max-width: 440px; margin: 6px 0 0 -9px; }
.act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px; border-radius: 10px; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.act:hover { background: var(--sunk); color: var(--ink); }
.act.reply:hover { color: var(--accent); }
.act.repost:hover, .act.repost.on { color: var(--repost); }
.act.like:hover, .act.like.on { color: var(--like); }
.act.mark:hover, .act.mark.on { color: var(--accent); }
.act.like.on svg path { fill: currentColor; }
.act.mark.on svg path { fill: currentColor; }
.act.pop svg { animation: pop .32s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* media */
.media { margin-top: 10px; display: grid; gap: 3px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--sunk); }
.media.n1 { display: block; border: 0; background: none; }
.media.n1 .m { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); max-width: 100%; width: fit-content; background: var(--sunk); }
.media.n1 img { max-height: 520px; width: auto; max-width: 100%; }
.media.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.media.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.media.n3 .m:first-child { grid-row: span 2; }
.media.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.media .m { position: relative; min-height: 0; min-width: 0; }
.media:not(.n1) .m img { width: 100%; height: 100%; object-fit: cover; }
.media .m button.open { display: block; width: 100%; height: 100%; }
.media .alt-tag { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(10, 14, 12, .72); color: #fff; font-size: 12px; font-weight: 700; }
.vid { position: relative; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); max-height: 560px; display: flex; justify-content: center; }
.vid video { width: 100%; max-height: 560px; background: #000; }
.vid.working { aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; background: #1a211d; font-weight: 600; font-size: 15px; text-align: center; padding: 20px; }
.vid.working .spin { margin: 0 auto 10px; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* quote + link preview */
.quote { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.quote:hover { background: var(--surface); }
.quote .head { display: flex; align-items: center; gap: 7px; padding: 0; min-width: 0; }
.quote .text { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.quote .media { margin-top: 8px; }
.quote .media.n1 img { max-height: 260px; }
.quote.gone { color: var(--ink-3); cursor: default; font-size: 15px; }
.card { display: flex; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.card:hover { background: var(--surface); }
.card .pic { flex: none; width: 128px; background: var(--sunk) center / cover no-repeat; border-right: 1px solid var(--line); }
.card .info { padding: 10px 14px; min-width: 0; }
.card .site { font-size: 13px; color: var(--ink-3); }
.card .title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .desc { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.card.big { display: block; }
.card.big .pic { width: 100%; aspect-ratio: 1.91; border-right: 0; border-bottom: 1px solid var(--line); }

/* poll */
.poll { margin-top: 10px; display: grid; gap: 6px; }
.poll .opt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: 11px; text-align: left; overflow: hidden; font-weight: 600; }
.poll button.opt { border: 1.5px solid var(--accent); color: var(--accent); }
.poll button.opt:hover { background: var(--accent-soft); }
.poll div.opt { background: var(--sunk); }
.poll div.opt .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-radius: 11px; }
.poll div.opt.top .fill { background: color-mix(in srgb, var(--accent) 30%, var(--accent-soft)); }
.poll div.opt span { position: relative; }
.poll div.opt .pct { font-variant-numeric: tabular-nums; }
.poll .meta { font-size: 14px; color: var(--ink-3); }

/* focused post in a thread */
.focus { padding: 16px 18px 4px; border-bottom: 1px solid var(--line); cursor: default; }
.focus:hover { background: none; }
.focus .who { display: flex; align-items: center; gap: 12px; }
.focus .who .name { font: 700 17px/1.2 var(--display); display: block; }
.focus .who .handle { display: block; color: var(--ink-3); }
.focus .text { font-size: 20px; line-height: 1.4; margin-top: 12px; }
.focus .stamp { color: var(--ink-3); margin: 14px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.focus .stats { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.focus .stats button { color: var(--ink-3); }
.focus .stats button:hover { text-decoration: underline; }
.focus .stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.focus .actions { max-width: none; margin: 2px 0; justify-content: space-around; }
.focus .ctx { color: var(--ink-3); margin-top: 10px; }
.focus .ctx a { color: var(--accent); }
.more-replies { display: block; width: 100%; text-align: left; padding: 10px 18px 12px 74px; color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--line); }
.more-replies:hover { background: color-mix(in srgb, var(--sunk) 45%, transparent); }

/* new posts */
.fresh { position: sticky; top: 112px; z-index: 15; display: flex; justify-content: center; height: 0; }
.fresh button { transform: translateY(12px); height: 38px; padding: 0 18px; border-radius: 19px; background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: var(--shadow); }

/* ---------- empty + loading ---------- */
.empty { padding: 56px 32px; text-align: center; color: var(--ink-2); }
.empty h2 { font: 700 24px/1.2 var(--display); color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.empty p { margin: 0 auto; max-width: 340px; }
.empty .btn { margin-top: 18px; }
.loading { display: flex; justify-content: center; padding: 30px; color: var(--accent); }
.more { display: block; width: 100%; padding: 18px; color: var(--accent); font-weight: 600; }
.more:hover { background: var(--sunk); }
.end { height: 120px; }

/* ---------- profile ---------- */
.banner { aspect-ratio: 3 / 1; background: var(--sunk) center / cover no-repeat; }
.prof { padding: 0 18px 4px; }
.prof .top { display: flex; justify-content: space-between; align-items: flex-end; margin-top: -52px; min-height: 64px; }
.prof .top .av { box-shadow: 0 0 0 5px var(--page); }
.prof .top .btns { display: flex; gap: 8px; padding-bottom: 4px; }
.prof h2 { font: 700 26px/1.15 var(--display); letter-spacing: -.015em; margin: 12px 0 0; overflow-wrap: anywhere; }
.prof .handle { color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-chip { display: inline-block; padding: 1px 8px; border-radius: 7px; background: var(--sunk); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.tag-chip.role { background: var(--accent-soft); color: var(--accent); }
.prof .bio { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.prof .facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--ink-3); }
.prof .facts span, .prof .facts a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.prof .facts a { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.prof .facts a:hover { text-decoration: underline; }
.prof .follow-counts { display: flex; gap: 18px; margin: 12px 0 6px; color: var(--ink-3); }
.prof .follow-counts a:hover { text-decoration: underline; }
.prof .follow-counts b { color: var(--ink); }

/* people list */
.person { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.person:hover { background: color-mix(in srgb, var(--sunk) 45%, transparent); }
.person .info { flex: 1; min-width: 0; }
.person .name { font: 700 16px/1.25 var(--display); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .handle { color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.person .bio { font-size: 15px; margin-top: 2px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- aside ---------- */
.search-box { position: relative; }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search-box input { width: 100%; height: 46px; padding: 0 16px 0 44px; border-radius: 14px; border: 1.5px solid transparent; background: var(--sunk); outline: 0; }
.search-box input:focus { border-color: var(--accent); background: var(--surface); }
.panel h3 { font: 700 19px/1.2 var(--display); margin: 0 0 8px; letter-spacing: -.01em; }
.panel .row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.panel .row .info { flex: 1; min-width: 0; }
.panel .row .info b { display: block; font-family: var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .row .info span { display: block; font-size: 14px; color: var(--ink-3); }
.panel .tag-row { display: block; padding: 7px 0; }
.panel .tag-row b { display: block; font-weight: 700; }
.panel .tag-row span { font-size: 14px; color: var(--ink-3); }
.panel .tag-row:hover b { color: var(--accent); }
.online { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 2px var(--page); }
.av-wrap { position: relative; flex: none; }
.aside .foot { font-size: 13px; color: var(--ink-3); }

/* ---------- notifications ---------- */
.notif { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif:hover { background: color-mix(in srgb, var(--sunk) 45%, transparent); }
.notif.unread, .post.unread { background: color-mix(in srgb, var(--accent-soft) 70%, var(--page)); box-shadow: inset 3px 0 0 var(--accent); }
.notif .kind { width: 44px; display: flex; justify-content: flex-end; padding-top: 2px; flex: none; }
.notif .kind.like { color: var(--like); }
.notif .kind.repost { color: var(--repost); }
.notif .kind.follow, .notif .kind.joined { color: var(--accent); }
.notif .kind.reply, .notif .kind.mention, .notif .kind.quote { color: var(--accent); }
.notif .kind.like svg path { fill: currentColor; }
.notif .body { flex: 1; min-width: 0; }
.notif .faces { display: flex; gap: 4px; margin-bottom: 6px; }
.notif .line b { font-family: var(--display); }
.notif .when { color: var(--ink-3); }
.notif .excerpt { color: var(--ink-3); margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 700; font-size: 15px; }
.field small { color: var(--ink-3); font-size: 14px; }
.field input, .field textarea, .field select { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface); outline: 0; }
.field textarea { resize: vertical; min-height: 90px; line-height: 1.4; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.form-error { color: var(--danger); font-weight: 600; font-size: 15px; }
.section { padding: 20px 18px 26px; border-bottom: 1px solid var(--line); }
.section h2 { font: 700 20px/1.2 var(--display); margin: 0 0 4px; letter-spacing: -.01em; }
.section > p { margin: 0 0 16px; color: var(--ink-2); }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--sunk); gap: 2px; }
.seg button { height: 34px; padding: 0 16px; border-radius: 9px; font-weight: 600; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table .who b { font-family: var(--display); display: block; }
.table .who > div > span { display: block; color: var(--ink-3); font-size: 14px; }
.table select { height: 34px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 8px; }
.invite-link { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.invite-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 15px var(--body); color: var(--ink-2); }
.invite-link .meta { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 15px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.status-ok { color: var(--accent); font-weight: 700; }
.status-bad { color: var(--danger); font-weight: 700; }

/* ---------- sign in ---------- */
.gate { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gate .brand { position: relative; overflow: hidden; background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; justify-content: flex-start; padding: 48px 56px; }
.gate .brand .sheep-mark { width: 72px; height: 72px; margin-bottom: auto; }
.gate .brand .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 28%; display: block; pointer-events: none; }
.gate .brand .hills path:first-child { fill: var(--hill); opacity: .55; }
.gate .brand .hills path:last-child { fill: var(--rail-deep); }
.gate .brand .words { position: relative; z-index: 1; margin-top: 40px; margin-bottom: 28vh; }
.gate .brand h1 { font: 700 clamp(56px, 9vw, 128px)/.9 var(--display); letter-spacing: -.04em; margin: 0; overflow-wrap: anywhere; }
.gate .brand p { margin: 18px 0 0; font-size: 18px; color: var(--rail-soft); max-width: 380px; }
.gate .side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.gate form { width: 100%; max-width: 380px; }
.gate h2 { font: 700 30px/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.gate .lead { margin: 0 0 24px; color: var(--ink-2); }
.gate .btn.primary { height: 46px; width: 100%; font-size: 17px; }

/* ---------- overlays ---------- */
.scrim { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.dialog { width: 100%; max-width: 600px; background: var(--page); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; animation: rise .18s ease-out; }
.dialog.narrow { max-width: 440px; }
.dialog .dhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.dialog .dhead h2 { font: 700 19px var(--display); margin: 0; flex: 1; }
.dialog .dbody { padding: 18px; }
.dialog .composer { border-bottom: 0; }
.dialog .parent { padding: 14px 18px 0; display: flex; gap: 12px; }
.dialog .parent .text { color: var(--ink-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dialog .dfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 18px; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.menu { position: fixed; z-index: 120; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
.menu button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-weight: 600; text-align: left; }
.menu button:hover, .menu button:focus-visible { background: var(--sunk); outline: 0; }
.menu button.danger { color: var(--danger); }

.viewer { position: fixed; inset: 0; z-index: 140; background: rgba(6, 9, 7, .94); display: flex; align-items: center; justify-content: center; }
.viewer img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.viewer .vbtn { position: absolute; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.viewer .vbtn:hover { background: rgba(255, 255, 255, .22); }
.viewer .close { top: 16px; left: 16px; }
.viewer .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.viewer .next { right: 16px; top: 50%; transform: translateY(-50%); }
.viewer .cap { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: min(680px, 90vw); color: #e6ece8; background: rgba(0, 0, 0, .55); padding: 8px 14px; border-radius: 10px; font-size: 15px; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--page); padding: 12px 18px; border-radius: 13px; font-weight: 600; box-shadow: var(--shadow); animation: rise .18s ease-out; max-width: calc(100vw - 32px); }
.toast.bad { background: var(--danger); color: #fff; }

/* ---------- mobile ---------- */
.mtop, .mnav { display: none; }

@media (max-width: 1140px) {
  .shell { grid-template-columns: minmax(var(--rail-w), 1fr) minmax(0, var(--main-w)) minmax(0, 1fr); }
  .aside { display: none; }
}
@media (max-width: 960px) {
  :root { --rail-w: 88px; }
  .shell { grid-template-columns: minmax(var(--rail-w), 1fr) minmax(0, var(--main-w)) minmax(0, 1fr); }
  .rail-inner { padding-left: 14px; align-items: stretch; }
  .wordmark { justify-content: center; padding: 0 0 22px; }
  .wordmark .wm-text { display: none; }
  .nav a { justify-content: center; padding: 12px 0 12px 0; }
  .nav a .label { display: none; }
  .nav .count { position: absolute; top: 3px; right: 12px; margin: 0; min-width: 18px; height: 18px; font-size: 11px; line-height: 18px; padding: 0 5px; }
  .compose-btn { width: 52px; margin: 18px auto 0 0; margin-left: 4px; }
  .compose-btn .label { display: none; }
  .rail-me { justify-content: center; margin-right: 14px; padding: 8px 0; }
  .rail-me .who { display: none; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .shell { display: block; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .rail { display: none; }
  main { border-right: 0; }
  .mtop { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--rail); color: var(--rail-ink); }
  .mtop .wm { display: flex; align-items: center; gap: 8px; font: 700 24px/1 var(--display); letter-spacing: -.02em; flex: 1; min-width: 0; white-space: nowrap; }
  .mtop .wm .wm-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mtop .sheep-mark { width: 34px; height: 34px; }
  .mtop .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--rail); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mnav a, .mnav button { position: relative; width: 52px; height: 48px; display: grid; place-items: center; color: var(--rail-soft); border-radius: 14px; }
  .mnav a[aria-current="page"] { color: var(--ink); background: var(--page); }
  .mnav .new { background: var(--wool); color: #24452d; }
  .mnav .count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rail-ink); color: var(--rail); font: 700 11px/18px var(--body); text-align: center; }
  .mnav a[aria-current="page"] .count { background: var(--rail); color: var(--rail-ink); }
  .bar { top: 0; }
  .bar-row { padding: 0 14px; min-height: 54px; }
  .post, .composer, .person, .notif { padding-left: 14px; padding-right: 14px; }
  .focus, .prof, .section { padding-left: 14px; padding-right: 14px; }
  .composer.home { display: none; }
  .home-bar .bar-row { display: none; }
  .fresh { top: 50px; }
  .focus .text { font-size: 18px; }
  .more-replies { padding-left: 70px; }
  .gate { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gate .brand { padding: 28px 24px 28px; min-height: 38vh; }
  .gate .brand .sheep-mark { width: 52px; height: 52px; }
  .gate .brand .hills { height: 64px; }
  .gate .brand .words { margin-top: 28px; margin-bottom: 52px; }
  .gate .brand h1 { font-size: 64px; }
  .gate .side { align-items: flex-start; padding: 28px 20px 40px; }
  .scrim { padding: 0; align-items: stretch; }
  .dialog { max-width: none; border-radius: 0; min-height: 100%; animation: none; }
  .dialog.narrow { min-height: 0; margin: auto 12px; border-radius: 18px; }
  .card .pic { width: 92px; }
  .prof .top { margin-top: -40px; }
  .prof .top .av.xl { width: 84px; height: 84px; border-radius: 20px; font-size: 32px; }
  .table .hide-m { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* photo and video grid */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.mgrid .empty { grid-column: 1 / -1; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--sunk); }
.tile img, .tile video, .tile .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover img, .tile:hover video { filter: brightness(.9); }
.tile .badge { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 7px; background: rgba(10, 14, 12, .72); color: #fff; font-size: 12px; font-weight: 700; }
.tile .badge svg path { fill: currentColor; }
.subtabs { top: 58px; }
@media (max-width: 680px) { .subtabs { top: 54px; } }