@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap");

:root {
  --ink: #17221a;
  --muted: #647067;
  --paper: #f6f4ed;
  --white: #fffefa;
  --sage: #d7e2d1;
  --line: #d8ddd4;
  --acid: #d9f99d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  width: min(1320px, calc(100% - 48px));
  height: 92px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; gap: 12px; align-items: center; font-weight: 600; letter-spacing: -.02em; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  font-family: "Newsreader", serif;
}
nav { display: flex; gap: clamp(18px, 3vw, 42px); }
nav a { color: var(--muted); font-size: 14px; text-transform: capitalize; }
nav a:hover { color: var(--ink); }

.hero {
  min-height: 630px;
  padding: 110px max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 78% 35%, rgba(217, 249, 157, .9), transparent 20%),
    linear-gradient(125deg, #edf3e9 0%, #f8f5ea 70%);
}
.eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.hero h1, .article-hero h1, .listing-hero h1 {
  max-width: 920px;
  margin: 0;
  font: 500 clamp(64px, 9vw, 128px)/.88 "Newsreader", serif;
  letter-spacing: -.055em;
}
.hero h1 em { color: #60745f; font-weight: 400; }
.hero-copy {
  max-width: 560px;
  margin: 42px 0 0;
  color: var(--muted);
  font-size: 19px;
}

.featured, .latest { padding-block: 100px; }
.section-heading {
  margin-bottom: 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.section-heading h2 { margin: 0 0 18px; font: 500 42px/1 "Newsreader", serif; }
.section-heading .eyebrow { margin-bottom: 18px; }
.section-heading > span { color: var(--muted); font-size: 13px; }
.featured-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 500px;
  overflow: hidden;
  background: var(--paper);
}
.featured-art, .card-art {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 300px;
}
.featured-art img, .card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.featured-card:hover img, .card-art:hover img { transform: scale(1.025); }
.featured-art > span, .card-art > span {
  font: 500 clamp(42px, 7vw, 90px)/1 "Newsreader", serif;
  opacity: .35;
  transform: rotate(-8deg);
}
.category-longevity { background: #c8d6c1; }
.category-psychology { background: #dcd2e9; }
.category-health { background: #efd9b6; }
.category-workouts { background: #c9dbe1; }
.featured-copy { padding: clamp(38px, 6vw, 82px); display: flex; flex-direction: column; align-items: flex-start; }
.pill {
  display: inline-flex;
  padding: 7px 13px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.featured-copy h2 { margin: 26px 0 18px; font: 500 clamp(36px, 4vw, 58px)/1.02 "Newsreader", serif; letter-spacing: -.035em; }
.featured-copy p { margin: 0; color: var(--muted); }
.read-link { margin-top: auto; padding-top: 38px; font-weight: 600; }
.read-link span { margin-left: 8px; transition: margin .2s; }
.featured-card:hover .read-link span { margin-left: 14px; }

.latest { padding-top: 20px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 28px; }
.article-card .card-art { margin-bottom: 22px; aspect-ratio: 4 / 3; }
.card-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.article-card h2, .article-card h3 { margin: 14px 0 10px; font: 500 30px/1.08 "Newsreader", serif; letter-spacing: -.025em; }
.article-card h3 a:hover, .article-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-card p { margin: 0; color: var(--muted); font-size: 14px; }

.principles { margin-top: 60px; padding: 110px 0; color: #f3f3ea; background: var(--ink); }
.principles h2 { margin: 0 0 70px; font: 400 clamp(46px, 6vw, 80px)/.98 "Newsreader", serif; letter-spacing: -.04em; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.principle-grid strong { color: var(--acid); font-size: 12px; }
.principle-grid h3 { margin: 18px 0 8px; font: 500 25px "Newsreader", serif; }
.principle-grid p { margin: 0; color: #aebaae; font-size: 14px; }

.article-hero, .listing-hero { padding-block: 100px 70px; text-align: center; }
.article-hero .pill { margin-bottom: 34px; }
.article-hero h1, .listing-hero h1 { max-width: 1000px; margin-inline: auto; font-size: clamp(58px, 8vw, 104px); }
.article-dek, .listing-hero > p:last-child { max-width: 720px; margin: 34px auto 0; color: var(--muted); font: 400 22px/1.45 "Newsreader", serif; }
.article-meta { margin-top: 34px; display: flex; gap: 24px; justify-content: center; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.article-cover { max-height: 720px; overflow: hidden; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { padding-block: 80px 130px; display: grid; grid-template-columns: 180px minmax(0, 700px); gap: 70px; justify-content: center; }
.article-aside { padding-top: 9px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.article-aside p { color: var(--ink); font-weight: 600; }
.article-aside span { display: block; margin-top: 8px; }
.prose { font-family: "Newsreader", serif; font-size: 21px; line-height: 1.72; }
.prose > p:first-child { font-size: 27px; line-height: 1.5; }
.prose h2 { margin: 2.2em 0 .6em; font-size: 42px; line-height: 1.05; letter-spacing: -.03em; }
.prose h3 { margin-top: 2em; font-size: 29px; line-height: 1.15; }
.prose a { text-decoration: underline; text-decoration-color: #9caf91; text-underline-offset: 3px; }
.prose blockquote { margin: 2em 0; padding: 5px 0 5px 28px; border-left: 3px solid #819776; color: var(--muted); font-style: italic; }
.sources { margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--line); font: 14px/1.6 "DM Sans", sans-serif; }
.sources h2 { margin-top: 0; font: 500 30px "Newsreader", serif; }
.medical-note { margin-top: 50px; padding: 24px; background: var(--paper); font: 14px/1.5 "DM Sans", sans-serif; }
.medical-note p { margin: 6px 0 0; color: var(--muted); }

.listing-hero { background: var(--paper); max-width: none; width: 100%; }
.listing-hero h1 { text-transform: capitalize; }
.empty-state { padding-block: 100px; color: var(--muted); }

footer {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  padding: 70px 0 40px;
  display: grid;
  grid-template-columns: 1.5fr 2fr auto;
  gap: 60px;
  align-items: end;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.footer-brand { color: var(--ink); }
.footer-brand + p { margin: 14px 0 0; }
.disclaimer { max-width: 440px; margin: 0; }

@media (max-width: 800px) {
  .wrap, .site-header, footer { width: min(100% - 32px, 1180px); }
  .site-header { height: 74px; }
  nav { gap: 14px; overflow-x: auto; margin-left: 24px; }
  nav a { font-size: 12px; }
  .brand > span:last-child { display: none; }
  .hero { min-height: 540px; padding-block: 80px; }
  .hero h1 { font-size: clamp(56px, 17vw, 84px); }
  .featured, .latest { padding-block: 70px; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-copy { min-height: 410px; }
  .article-grid, .principle-grid { grid-template-columns: 1fr; }
  .article-grid { gap: 52px; }
  .principles { padding-block: 80px; }
  .article-meta { flex-wrap: wrap; gap: 10px 18px; }
  .article-layout { grid-template-columns: 1fr; padding-block: 55px 90px; }
  .article-aside { display: none; }
  .prose { font-size: 19px; }
  footer { grid-template-columns: 1fr; gap: 25px; align-items: start; }
}