:root {
  --bg: #f7f6f2;
  --text: #1d1d1a;
  --muted: #6d6c65;
  --line: #deddd6;
  --soft: #efeee8;
  --accent: #65705c;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Avenir Next", "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.005em;
}

::selection { color: var(--text); background: #dfe3da; }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 0.125rem;
}

.topbar {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.topbar-brand .site-title { font-size: 1.1rem; letter-spacing: -0.035em; }
.topbar-brand .tagline { color: var(--muted); letter-spacing: 0.02em; }

.topbar-nav a {
  position: relative;
  padding: 0.25rem 0.15rem;
  text-decoration: none;
}

.topbar-nav a::after {
  position: absolute;
  right: 0.15rem;
  bottom: 0.05rem;
  left: 0.15rem;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}

.topbar-nav a:hover { text-decoration: none; }
.topbar-nav a:hover::after,
.topbar-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.sidebar { border-color: var(--line); }

.sidebar-scroll { overflow-x: hidden; }
.sidebar-name { letter-spacing: -0.025em; }
.sidebar-role { font-size: 0.825rem; }

.sidebar h2,
.main-intro h2,
.main-posts h2,
.main-links-block h2 { color: var(--accent); letter-spacing: 0.14em; }

.sidebar-portals { gap: 0.25rem 0.35rem; }

.sidebar-portals a {
  padding: 0.3rem 0.4rem;
  border-radius: 0.35rem;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.sidebar-portals a:hover {
  color: var(--text);
  background: var(--soft);
  text-decoration: none;
}

.main-intro p { max-width: 62ch; text-wrap: pretty; }

.main-intro strong {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #bdc5b6;
  text-decoration-thickness: 0.22em;
  text-underline-offset: -0.08em;
  text-decoration-skip-ink: none;
}

.main-posts,
.main-links-block { border-color: var(--line); }

.post-list li,
.link-list li {
  position: relative;
  border-color: var(--line);
  transition: background-color 180ms ease, padding 180ms ease;
}

.post-list li:hover,
.link-list li:hover { padding-right: 0.55rem; padding-left: 0.55rem; background: var(--soft); }

.post-list a,
.link-list a { letter-spacing: -0.01em; text-decoration: none; }

.post-list a:hover,
.link-list a:hover { color: var(--accent); text-decoration: none; }

.post-list time,
.link-list .link-desc { color: var(--muted); font-size: 0.825rem; }

.sidebar-footer { border-color: var(--line); }

@media (min-width: 52.01rem) {
  :root { --page-x: clamp(3rem, 10vw, 11rem); --main-col: 44rem; }

  .main-shell,
  .main-shell--mirror { padding-left: calc(var(--page-x) + var(--sidebar-w) + 2.25rem); }
}

@media (max-width: 40rem) {
  :root { --page-x: clamp(1.15rem, 5.5vw, 1.75rem); }
  .topbar { background: var(--bg); }
  .sidebar-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .post-list li,
  .link-list li { padding-top: 0.65rem; padding-bottom: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; }
}