:root {
  color-scheme: light;
  --blog-paper: #e7e1d8;
  --blog-ink: #171918;
  --blog-muted: rgba(23, 25, 24, 0.62);
  --blog-line: rgba(23, 25, 24, 0.17);
  --blog-orange: #e85e3e;
  --blog-night: #0d100e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--blog-paper); }
body { margin: 0; color: var(--blog-ink); background: var(--blog-paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a, button { font: inherit; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.blog-hero { padding: 170px 6vw 82px; border-bottom: 1px solid var(--blog-line); }
.blog-hero-inner { width: min(100%, 1240px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.7fr); gap: 80px; align-items: end; margin: 0 auto; }
.blog-kicker { margin: 0 0 20px; color: #b9553e; font-size: 10px; font-weight: 760; letter-spacing: 0.17em; text-transform: uppercase; }
.blog-hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(64px, 9vw, 132px); font-weight: 400; line-height: 0.87; letter-spacing: -0.07em; }
.blog-hero-copy { margin: 0 0 8px; color: var(--blog-muted); font-size: 18px; line-height: 1.58; }

.blog-listing { padding: 72px 6vw 122px; }
.blog-listing-inner { width: min(100%, 1240px); margin: 0 auto; }
.blog-feature { display: grid; grid-template-columns: 0.95fr 1.05fr; min-height: 470px; color: #f3eee7; border-radius: 15px; background: var(--blog-night); overflow: hidden; text-decoration: none; }
.blog-feature-art { position: relative; min-height: 420px; display: grid; place-items: center; background: radial-gradient(circle, rgba(232, 94, 62, 0.2) 0 7%, transparent 7.5% 14%, rgba(232, 94, 62, 0.09) 14.5% 15%, transparent 15.5% 24%, rgba(121, 187, 176, 0.08) 24.5% 25%, transparent 25.5%), #111411; }
.blog-feature-art::before, .blog-feature-art::after { content: ""; position: absolute; border: 1px solid rgba(243, 238, 231, 0.16); border-radius: 50%; }
.blog-feature-art::before { width: 46%; aspect-ratio: 1; }
.blog-feature-art::after { width: 72%; aspect-ratio: 1; }
.blog-feature-symbol { position: relative; z-index: 1; width: 94px; height: 94px; display: grid; place-items: center; border: 1px solid rgba(243, 238, 231, 0.24); border-radius: 20px; background: rgba(9, 11, 9, 0.74); font-family: Georgia, "Times New Roman", serif; font-size: 44px; }
.blog-feature-copy { display: flex; flex-direction: column; padding: 46px; }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(243, 238, 231, 0.46); font-size: 9px; font-weight: 720; letter-spacing: 0.12em; text-transform: uppercase; }
.blog-feature h2 { margin: 94px 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px, 4.6vw, 68px); font-weight: 400; line-height: 0.98; letter-spacing: -0.055em; }
.blog-feature p { margin: 0; color: rgba(243, 238, 231, 0.62); font-size: 16px; line-height: 1.55; }
.post-read { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 30px; color: rgba(243, 238, 231, 0.82); font-size: 13px; font-weight: 720; }

.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.blog-card { min-height: 420px; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--blog-line); border-radius: 13px; color: var(--blog-ink); background: rgba(255, 255, 255, 0.18); text-decoration: none; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.blog-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.34); box-shadow: 0 18px 42px rgba(23, 25, 24, 0.08); }
.blog-card .post-meta { color: rgba(23, 25, 24, 0.44); }
.blog-card h2 { margin: 88px 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 3.7vw, 54px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; }
.blog-card p { margin: 0; color: var(--blog-muted); font-size: 15px; line-height: 1.55; }
.blog-card .post-read { color: var(--blog-ink); }

.article-page { padding: 156px 6vw 112px; }
.article-shell { width: min(100%, 1180px); display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 74px; margin: 0 auto; }
.article-aside { position: sticky; top: 112px; height: fit-content; padding-top: 12px; }
.article-aside a { display: inline-flex; align-items: center; gap: 9px; color: var(--blog-ink); text-decoration: none; font-size: 12px; font-weight: 720; }
.article-aside p { margin: 42px 0 0; color: rgba(23, 25, 24, 0.45); font-size: 10px; line-height: 1.65; letter-spacing: 0.08em; text-transform: uppercase; }
.article-head { margin-bottom: 54px; padding-bottom: 42px; border-bottom: 1px solid var(--blog-line); }
.article-head .blog-kicker { margin-bottom: 18px; }
.article-head h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 6.2vw, 88px); font-weight: 400; line-height: 0.94; letter-spacing: -0.062em; text-wrap: balance; }
.article-deck { max-width: 700px; margin: 26px 0 0; color: var(--blog-muted); font-size: 20px; line-height: 1.52; letter-spacing: -0.015em; }
.article-byline { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; color: rgba(23, 25, 24, 0.48); font-size: 10px; font-weight: 720; letter-spacing: 0.1em; text-transform: uppercase; }
.article-body { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.72; }
.article-body > p:first-child { font-size: 25px; line-height: 1.55; letter-spacing: -0.02em; }
.article-body p { margin: 0 0 1.45em; }
.article-body h2 { margin: 2.3em 0 0.75em; font-family: Inter, ui-sans-serif, sans-serif; font-size: 31px; line-height: 1.08; letter-spacing: -0.045em; }
.article-body h3 { margin: 2em 0 0.65em; font-family: Inter, ui-sans-serif, sans-serif; font-size: 21px; letter-spacing: -0.03em; }
.article-body blockquote { margin: 2.2em 0; padding: 26px 30px; border-left: 4px solid var(--blog-orange); background: rgba(255, 255, 255, 0.28); font-size: 24px; line-height: 1.5; }
.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.article-body li { margin-bottom: 0.65em; }
.article-body a { color: #9a402e; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body strong { font-weight: 700; }
.article-end { margin-top: 68px; padding-top: 28px; border-top: 1px solid var(--blog-line); }
.article-end p { margin: 0 0 18px; color: var(--blog-muted); font-size: 14px; line-height: 1.55; }
.article-end a { display: inline-flex; align-items: center; gap: 12px; color: var(--blog-ink); text-decoration: none; font-size: 13px; font-weight: 730; }

@media (max-width: 900px) {
  .blog-hero-inner, .blog-feature, .article-shell { grid-template-columns: 1fr; }
  .blog-hero-inner { gap: 30px; }
  .blog-feature-art { min-height: 310px; }
  .blog-feature h2 { margin-top: 56px; }
  .article-aside { position: static; padding: 0; }
  .article-aside p { display: none; }
}

@media (max-width: 680px) {
  .blog-hero, .blog-listing, .article-page { padding-left: 20px; padding-right: 20px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-feature-copy, .blog-card { padding: 26px; }
  .blog-card { min-height: 370px; }
  .article-body { font-size: 18px; }
  .article-body > p:first-child { font-size: 22px; }
}