.column { max-width: 720px; margin-inline: auto; }
main { padding-top: clamp(36px, 6vw, 72px); }
.intro { margin-bottom: 28px; }
.intro h1 { margin-bottom: 24px; }
.intro .actions { display: flex; gap: 12px; flex-wrap: wrap; }

.post { padding: 18px 20px; margin: 14px 0; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.post:hover { border-color: rgba(254, 95, 1, 0.35); box-shadow: 0 30px 60px -45px var(--glow); }
.post:target { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(254, 95, 1, 0.18); }
.post-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.author { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.author:hover { color: var(--orange-2); }
.post time, .post-meta { font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.post .body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 12px; color: var(--text); }
.post-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.post-meta a:hover { color: var(--orange-2); }
.post-meta .count { display: inline-flex; align-items: center; gap: 6px; }
.post-meta .count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 1px; font-family: var(--font-mono); font-size: 12px; line-height: 1;
  padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(254, 95, 1, 0.3); background: rgba(254, 95, 1, 0.07);
  color: var(--orange-2); transition: background 0.15s, border-color 0.15s; }
.chip::before { content: "•"; color: var(--orange); margin-right: 5px; }
.chip:hover { background: rgba(254, 95, 1, 0.16); border-color: var(--orange); }
.chip .n { color: var(--dim); margin-left: 6px; }
.trending { margin: 0 0 22px; }
.trending .section-label { margin-bottom: 10px; }
.context { font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin: 0 0 8px; }
.context a { color: var(--orange-2); }
.post { scroll-margin-top: 88px; }
.post[data-href] { cursor: pointer; }
.post[data-href]:hover .body { color: #fff; }
.post a, .post .chips { position: relative; }
/* Replies sit under what they answer, indented by depth (capped so deep threads stay readable). */
.post.d1, .post.d2, .post.d3, .post.d4, .post.d5 { margin-top: 8px; }
.post.d1 { margin-left: var(--indent); }
.post.d2 { margin-left: calc(2 * var(--indent)); }
.post.d3 { margin-left: calc(3 * var(--indent)); }
.post.d4 { margin-left: calc(4 * var(--indent)); }
.post.d5 { margin-left: calc(5 * var(--indent)); }
.post.d1::before, .post.d2::before, .post.d3::before, .post.d4::before, .post.d5::before {
  content: ""; position: absolute; left: calc(-0.6 * var(--indent)); top: -9px; height: 30px; width: calc(0.6 * var(--indent) - 1px);
  border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-bottom-left-radius: 10px; }
.column { --indent: clamp(12px, 3.5vw, 28px); }
.post.focus { border-color: rgba(254, 95, 1, 0.55); box-shadow: 0 30px 70px -45px var(--glow); padding: 22px 24px; }
.post.focus .author { font-size: 18px; }
.post.focus .body { font-size: 18px; line-height: 1.55; }
.interactions { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.interactions .row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; }
.interactions dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.interactions dd { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.interactions .n { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.who { background: none; border: 0; padding: 2px 10px; margin-left: -10px; border-radius: 999px; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255, 138, 61, 0.45); text-underline-offset: 4px; transition: background 0.15s, color 0.15s; }
.who:hover { color: var(--orange-2); background: rgba(254, 95, 1, 0.1); }
.modal { width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; margin: auto; padding: 18px 20px 20px;
  color: var(--text); background: var(--panel); border: 1px solid rgba(254, 95, 1, 0.45); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px var(--glow); }
.modal::backdrop { background: rgba(5, 5, 6, 0.7); backdrop-filter: blur(4px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head .eyebrow { margin: 0; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--orange-2); border-color: var(--orange-2); }
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 10px 0 12px; }
.who-list { list-style: none; margin: 0; padding: 0; }
.who-list li { border-top: 1px solid var(--line); }
.who-list a { display: block; padding: 10px 2px; font-family: var(--font-mono); font-size: 14px; color: var(--peach); overflow-wrap: anywhere; }
.who-list a:hover { color: var(--orange-2); }
.back { display: flex; width: fit-content; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.back:hover { color: var(--orange-2); }
.post.deleted { color: var(--dim); font-style: italic; padding: 12px 20px; }
.post.deleted p { margin: 0; }

.more { display: flex; justify-content: center; margin: 24px 0; }
.end { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding: 24px 0; }
.empty { color: var(--muted); }

.profile { padding: 22px 24px 24px; margin-bottom: 24px; border-color: rgba(254, 95, 1, 0.45);
  background: radial-gradient(120% 90% at 100% 0%, rgba(254, 95, 1, 0.16), transparent 60%), var(--panel);
  box-shadow: 0 40px 80px -50px var(--glow); overflow: hidden; }
.profile-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.profile-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.profile h1 { font-family: var(--font-mono); font-weight: 500; font-size: clamp(22px, 4vw, 30px); letter-spacing: 0; color: var(--peach); overflow-wrap: anywhere; margin: 0 0 12px; }
.profile .bio { color: var(--muted); margin: 0 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px clamp(18px, 5vw, 36px); padding-top: 14px; border-top: 1px solid var(--line); }
.profile dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.profile dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.profile .stat { display: grid; gap: 2px; }
.section-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-2); margin: 0 0 4px; }

.steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { padding: 18px 18px 20px; }
.step-num { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--orange); color: var(--orange-ink); font-family: var(--font-display); font-weight: 700; font-size: 14px;
  margin-bottom: 12px; box-shadow: 0 0 0 5px rgba(254, 95, 1, 0.12); }
.step h3 { font-size: 16px; margin: 0 0 4px; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
.setup { border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--panel); overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(254, 95, 1, 0.06); margin-bottom: 18px; }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.setup-title { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.setup pre { margin: 0; padding: 16px 18px; max-height: 420px; overflow: auto; font-family: var(--font-mono); font-size: 13px;
  line-height: 1.6; color: var(--peach); white-space: pre-wrap; overflow-wrap: anywhere; }
.copy { display: none; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--text);
  font: 600 13px var(--font-body); padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.js .copy { display: inline-flex; }
.copy:hover { background: rgba(254, 95, 1, 0.12); border-color: var(--orange); }
.copy.done { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.link-row p { margin: 0; color: var(--muted); font-size: 14px; }
.link-row code { font-size: 14px; overflow-wrap: anywhere; }
.aside { color: var(--dim); font-size: 14px; margin-top: 22px; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .steps { grid-template-columns: 1fr; }
}