@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #111614;
  --soft: #59625e;
  --muted: #747d78;
  --line: #dfe4df;
  --paper: #f4f4ef;
  --white: #ffffff;
  --green: #00c879;
  --gold: #df9d27;
}

body { font-family: Manrope, ui-sans-serif, system-ui, sans-serif; background: var(--paper); color: var(--ink); letter-spacing: -.018em; }
.topbar { border-bottom: 1px solid rgba(17,22,20,.12); background: rgba(244,244,239,.94); }
.topbar-inner, .wrap { width: min(1180px, calc(100% - 44px)); }
.topbar-inner { min-height: 74px; }
.brand { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.nav { gap: 24px; color: #36403a; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cta { border-radius: 0; padding: 13px 19px; background: var(--ink); box-shadow: none; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.cta:hover { background: var(--green); color: #08120d; }

.hero { position: relative; overflow: hidden; padding: 92px 0 58px; background: var(--paper); border-bottom: 1px solid var(--line); }
.hero::after { content: "ANTBELT / JOURNAL"; position: absolute; top: 22px; right: max(22px, calc((100vw - 1180px) / 2)); color: rgba(17,22,20,.055); font: 700 clamp(58px, 9vw, 154px)/.8 "Barlow Condensed", sans-serif; letter-spacing: -.06em; white-space: nowrap; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.eyebrow { color: #078b5e; font-size: 11px; letter-spacing: .13em; }
h1 { max-width: 920px; font-family: "Barlow Condensed", sans-serif; font-size: clamp(56px, 7.2vw, 116px); font-weight: 600; line-height: .88; letter-spacing: -.045em; text-transform: uppercase; }
.lead { max-width: 690px; color: var(--soft); font-size: clamp(17px, 2vw, 22px); line-height: 1.55; letter-spacing: -.03em; }
.article-meta { margin-top: 24px; color: #078b5e; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; padding: 44px 0 88px; background: var(--line); }
.card { border: 0; border-radius: 0; box-shadow: none; background: var(--white); }
.card img { filter: saturate(.88); transition: transform .45s ease, filter .45s ease; }
.card:hover img { filter: saturate(1.1); transform: scale(1.025); }
.card-body { min-height: 212px; padding: 24px; }
.tag { color: #078b5e; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.card h2 { font-family: "Barlow Condensed", sans-serif; font-size: 35px; font-weight: 600; line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.card p { font-size: 14px; line-height: 1.55; }

.article-hero { width: min(1180px, calc(100% - 44px)); margin: 34px auto 0; border: 0; border-radius: 0; box-shadow: none; }
.article-hero img { max-height: 620px; filter: saturate(.93); }
article { width: min(780px, calc(100% - 44px)); padding: 54px 0 84px; }
.article-body { border-top: 2px solid var(--ink); padding-top: 27px; }
.article-body p { color: #2e3732; font-size: 18px; line-height: 1.78; letter-spacing: -.025em; }
.article-body a { color: #075c40; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ks-box { margin-top: 42px; padding: 30px; border-radius: 0; background: var(--ink); }
.ks-box h2 { font-family: "Barlow Condensed", sans-serif; font-size: 42px; font-weight: 600; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.ks-box p { max-width: 520px; font-size: 15px; line-height: 1.6; }
.ks-box .cta { background: var(--green); color: #07110d; }
.ks-box .cta:hover { background: var(--gold); }
footer { border-top: 1px solid var(--line); background: var(--white); color: #5d6761; font-size: 12px; }

@media (max-width: 780px) {
  .topbar-inner, .wrap, .article-hero, article { width: min(100% - 32px, 780px); }
  .topbar-inner { min-height: 64px; }
  .brand { font-size: 23px; }
  .nav { display: none; }
  .hero { padding: 62px 0 42px; }
  .hero::after { top: 16px; right: 16px; font-size: 54px; }
  h1 { font-size: clamp(50px, 17vw, 82px); }
  .grid { grid-template-columns: 1fr; gap: 1px; padding: 28px 0 52px; }
  .card-body { min-height: 0; }
  .article-body p { font-size: 17px; }
}