:root {
  --ink: #171b1a;
  --muted: #66706d;
  --line: #dfe4e2;
  --paper: #ffffff;
  --canvas: #f3f5f4;
  --accent: #087f72;
  --accent-warm: #d34b36;
  --dark: #18211f;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; overflow-wrap: anywhere; background: var(--canvas); color: var(--ink); font-family: Inter,Arial,sans-serif; line-height: 1.65; }
img { display: block; max-width: 100%; }
.wrap { width: min(100% - 40px,1180px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.topbar { background: var(--dark); color: #dce6e2; font-size: 13px; }
.topbar-inner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mini-search input { width: min(260px,48vw); height: 31px; border: 1px solid #44524d; border-radius: 3px; padding: 0 10px; background: #0e1513; color: #fff; }
.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.brand-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-block: 25px; }
.brand { min-width: 0; color: var(--ink); font-size: 35px; font-weight: 900; line-height: 1.05; text-decoration: none; }
.brand img { width: auto; max-width: 250px; max-height: 58px; object-fit: contain; }
.brand-row p { max-width: 560px; margin: 0; color: var(--muted); text-align: right; }
.nav { display: flex; gap: 2px; overflow-x: auto; border-top: 1px solid #edf0ef; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; padding: 13px 15px; color: #35403c; font-weight: 750; text-decoration: none; }
.nav a:hover { background: #edf7f4; color: var(--accent); }

.main { padding-block: 28px 44px; }
.hero-card { position: relative; display: flex; min-height: 430px; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 6px; padding: 36px; background: var(--dark); color: #fff; text-decoration: none; isolation: isolate; }
.hero-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,transparent 20%,rgba(0,0,0,.88) 100%); }
.hero-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card span { color: #79e2d3; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.hero-card h1 { max-width: 820px; margin: 10px 0 12px; font-size: 52px; line-height: 1.08; }
.hero-card p { max-width: 720px; margin: 0; color: #e0e7e4; font-size: 17px; }
.layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 28px; margin-top: 30px; }
.section-title,.sidebar h2 { margin: 0 0 18px; border-bottom: 3px solid var(--accent); padding-bottom: 10px; font-size: 21px; }
.post-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.post-card,.sidebar,.article,.archive-head { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.post-card { min-width: 0; overflow: hidden; }
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #e5e9e7; }
.post-card > div { min-width: 0; padding: 16px; }
.post-card h3,.post-row h2 { margin: 6px 0 8px; line-height: 1.28; }
.post-card h3 { font-size: 19px; }
.post-card a,.post-row a { color: var(--ink); text-decoration: none; }
.post-card a:hover,.post-row a:hover { color: var(--accent); }
.cat { color: var(--accent)!important; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.post-card p,.post-row p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 0 0 10px; color: var(--muted); }
.post-card time,.post-row time,.meta { color: var(--muted); font-size: 13px; }
.sidebar { align-self: start; padding: 18px; }
.sidebar a { display: block; border-bottom: 1px solid #edf0ef; padding: 9px 0; color: #35403c; text-decoration: none; }
.sidebar a:hover { color: var(--accent); }

.archive-head { margin-bottom: 22px; padding: 28px; }
.archive-head p { margin: 0; color: var(--accent); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.archive-head h1 { margin: 5px 0; font-size: 44px; line-height: 1.1; }
.archive-head span { color: var(--muted); }
.post-list { display: grid; gap: 18px; }
.post-row { min-width: 0; display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 20px; align-items: start; border: 1px solid var(--line); border-radius: 6px; padding: 14px; background: var(--paper); }
.post-row > a { overflow: hidden; border-radius: 4px; }
.post-row img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e5e9e7; }
.post-row > div { min-width: 0; }

.article { width: min(100%,900px); margin: 0 auto; padding: clamp(22px,4vw,38px); }
.crumb { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 14px; }
.crumb a { color: var(--accent); text-decoration: none; }
.article > h1 { margin: 13px 0; font-size: 50px; line-height: 1.1; }
.article-cover { width: 100%; max-height: 550px; margin: 24px 0; border-radius: 5px; object-fit: cover; }
.article-body { font-family: Georgia,"Times New Roman",serif; font-size: 18px; line-height: 1.82; }
.article-body img { height: auto; margin: 24px auto; }
.article-body a { color: var(--accent); }
.article-body h2,.article-body h3 { margin-top: 1.8em; line-height: 1.28; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.article-body th,.article-body td { border: 1px solid var(--line); padding: 8px 10px; }
.article-body pre { max-width: 100%; overflow-x: auto; padding: 16px; background: var(--canvas); }
.article-body blockquote { margin-inline: 0; padding-left: 20px; border-left: 4px solid var(--accent-warm); color: #4c5652; }
.related { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 22px; }
.related .post-card > a { display: block; }
.related .post-card h3 { margin: 0; padding: 14px 16px 18px; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pager a { min-width: 38px; border: 1px solid #d4dcda; border-radius: 4px; padding: 8px 12px; background: #fff; color: var(--ink); text-align: center; text-decoration: none; }
.pager .active { border-color: var(--accent); background: var(--accent); color: #fff; }
.empty { width: 100%; border: 1px solid var(--line); padding: 24px; background: #fff; color: var(--muted); }

.site-ad-slot { display: grid; gap: 12px; margin-block: 22px; }
.site-ad-header { margin-top: 18px; }
.site-ad-footer { margin-block: 28px; }
.site-ad-item { min-width: 0; overflow: hidden; text-align: center; }
.site-ad-item img { width: 100%; max-height: 220px; object-fit: contain; }
.site-ad-text { display: block; border: 1px solid var(--line); padding: 14px 18px; background: #fff; color: var(--ink); text-decoration: none; }
.partner-strip { border-block: 1px solid var(--line); background: #e9eeec; }
.site-friend-links { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding-block: 22px; }
.site-friend-links strong { font-size: 14px; }
.site-friend-links a { color: #3f4a46; font-size: 14px; text-decoration: none; }
.site-friend-links a:hover { color: var(--accent); }
.footer { padding: 30px 0; background: var(--dark); color: #dce6e2; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer strong { color: #fff; font-size: 18px; }
.footer p { max-width: 650px; margin: 5px 0 0; color: #aebdb7; font-size: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-nav a { color: #e2eae7; font-weight: 700; font-size: 13px; text-decoration: none; }
.footer-nav a:hover { color: #79e2d3; }

@media (max-width: 850px) {
  .brand-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .brand-row p { text-align: left; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
  .sidebar h2 { grid-column: 1/-1; }
}

@media (max-width: 600px) {
  .wrap { width: min(100% - 28px,1180px); }
  .topbar-inner { min-height: 48px; }
  .hero-card { min-height: 370px; padding: 22px; }
  .hero-card h1,.archive-head h1,.article > h1 { font-size: 34px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .article { padding: 20px; }
  .article-body { font-size: 17px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}