@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap');

:root {
  --cream: #fff;
  --bone: #f5f5f7;
  --ink: #14161a;
  --ink-dark: #2a2d35;
  --amber: #e8853c;
  --terracotta: #8f3a1a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--amber); color: var(--ink-dark); }

.wrap { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  border-bottom: 1px solid #e4e4e7;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { width: 170px; height: auto; }
.header-lockup { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.header-lockup img { width: 36px; height: 36px; flex: none; }
.header-name { color: var(--ink); font: 700 21px/1 'Poppins', sans-serif; letter-spacing: -.055em; }
.header-fair { color: #b85421; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  color: #4a4f57;
  font: 600 12px/1 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--terracotta); }

.blog-main { min-height: 78vh; padding: 190px 0 120px; }
.eyebrow {
  margin: 0;
  color: var(--terracotta);
  font: 600 12px/1.4 'JetBrains Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.page-title {
  max-width: 860px;
  margin: 24px 0 0;
  font: 600 clamp(38px, 5vw, 64px)/1.15 'Poppins', sans-serif;
  letter-spacing: -.02em;
}
.page-title em { color: var(--terracotta); font-style: normal; font-weight: 600; }
.intro {
  max-width: 650px;
  margin: 34px 0 0;
  color: #4a4f57;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
}
.empty-state {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
  margin-top: 100px;
  padding: 72px 0;
  border-block: 1px solid rgba(26,28,33,.13);
}
.empty-mark {
  display: grid;
  width: min(100%, 360px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(26,28,33,.16);
  color: var(--amber);
  font: 600 clamp(82px, 12vw, 156px)/1 'Poppins', sans-serif;
}
.empty-copy h2 {
  margin: 0;
  font: 600 clamp(30px, 3.6vw, 44px)/1.2 'Poppins', sans-serif;
}
.empty-copy p { max-width: 520px; margin: 24px 0 0; color: rgba(26,28,33,.65); font-size: 18px; line-height: 1.8; }
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(26,28,33,.35);
  font: 600 12px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease;
}
.cta-link:hover { color: var(--terracotta); border-color: var(--terracotta); }

.site-footer { padding: 64px 0 34px; background: var(--ink-dark); color: var(--cream); }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:64px; }
.post-card { padding:36px; background:#fff; border:1px solid #16181d14; border-radius:28px; box-shadow:0 1px 2px rgba(20,22,26,.04),0 20px 44px -28px rgba(20,22,26,.22); transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s ease; display:flex; flex-direction:column; }
.post-category { color:var(--terracotta); font:500 11px/1.6 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.12em; }
.post-card h2 { margin:18px 0; font:600 clamp(22px,2.4vw,30px)/1.2 'Poppins',sans-serif; }
.post-card h2 a:hover { color:var(--terracotta); }
.post-excerpt { color:#4a4f57; font-size:17px; line-height:1.7; }
.post-card .cta-link { align-self:flex-start; margin-top:auto; padding-top:24px; }
.post-card time { color:#54575c; font-size:12px; }
.article-shell { max-width:850px; width:calc(100% - 48px); margin:auto; padding:150px 0 100px; }
.blog-main > .article-shell { padding-top:0; padding-bottom:0; }
.article-header h1 { margin:24px 0; font:600 clamp(36px,5vw,64px)/1.15 'Poppins',sans-serif; letter-spacing:-.02em; overflow-wrap:break-word; }
.article-meta { color:#4a4f57; font:400 12px/1.8 'JetBrains Mono',monospace; margin:20px 0 35px; }
.article-body { font-size:19px; line-height:1.85; }
.article-body h2 { margin:56px 0 20px; font:600 clamp(26px,3vw,38px)/1.2 'Poppins',sans-serif; scroll-margin-top:120px; }
.article-body h3 { margin:30px 0 12px; font:600 22px/1.4 'Poppins',sans-serif; }
.article-body p, .article-body ul, .article-body ol { margin:0 0 24px; }
.article-body li { margin-bottom:10px; }
.article-body a, .article-toc a, .related-posts a { color:var(--terracotta); text-decoration:underline; text-underline-offset:4px; }
.article-body a:hover, .article-toc a:hover, .related-posts a:hover { color:var(--ink); }
.article-toc { padding:24px 32px; margin:36px 0; border-left:3px solid var(--amber); background:var(--cream); line-height:1.8; }
.article-toc h2 { font-size:18px; margin:0 0 12px; }
.article-toc ol, .article-toc ul { margin:0; padding-left:20px; }
.article-cta { padding:32px; margin-top:48px; background:var(--ink); color:var(--cream); }
.article-cta h2 { margin-top:0; font:600 30px/1.25 'Poppins',sans-serif; }
.article-cta a { display:inline-block; color:#fff; background:#b85421; padding:12px 20px; font-weight:600; text-decoration:none; border-radius:8px; }
.related-posts { border-top:1px solid #16181d33; margin-top:48px; padding-top:24px; line-height:1.8; }
.breadcrumb { font-size:13px; color:#54575c; line-height:1.7; }
.breadcrumb a { text-decoration:underline; text-underline-offset:3px; }
a:focus-visible { outline:2px solid var(--terracotta); outline-offset:5px; }
@media(max-width:760px) {
  .post-grid { grid-template-columns:1fr; margin-top:40px; }
  .post-card { padding:24px; }
  .article-shell { width:calc(100% - 32px); padding-top:116px; }
  .article-body { font-size:17px; }
  .article-toc, .article-cta { padding:22px; }
}
.footer-main { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.footer-copy { max-width: 420px; margin: 28px 0 0; color: rgba(255,255,255,.42); line-height: 1.7; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 22px; color: rgba(255,255,255,.5); font-size: 14px; }
.footer-links a:hover { color: var(--amber); }
.footer-base {
  display: flex;
  justify-content: space-between;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.25);
  font: 500 10px/1.4 'JetBrains Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 32px, 1320px); }
  .header-inner { min-height: 76px; }
  .logo { width: 145px; }
  .nav a:not([aria-current='page']):not(:last-child) { display: none; }
  .blog-main { padding: 145px 0 88px; }
  .empty-state { grid-template-columns: 1fr; margin-top: 70px; padding: 54px 0; }
  .empty-mark { width: 220px; }
  .footer-main { align-items: start; flex-direction: column; }
  .footer-links { justify-content: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .page-title, .intro, .empty-state { animation: rise .7s both cubic-bezier(.19,1,.22,1); }
  .intro { animation-delay: .08s; }
  .empty-state { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
}
.post-card:hover { transform:translateY(-4px); box-shadow:0 1px 2px rgba(20,22,26,.04),0 32px 60px -30px rgba(184,84,33,.35); }
@media (prefers-reduced-motion: reduce) { .post-card:hover { transform:none; } }