/* Health Habits Lab styles — analytical editorial redesign, spacious refinement */
:root {
 --bg: #f3f7fb;
 --bg-soft: #fbfdff;
 --surface: rgba(255,255,255,0.94);
 --surface-strong: #ffffff;
 --text: #132231;
 --text-soft: #4d6677;
 --text-faint: #758998;
 --accent: #1667ab;
 --accent-deep: #0f4a79;
 --accent-soft: #dfedf9;
 --border: rgba(19,34,49,0.1);
 --line: rgba(19,34,49,0.08);
 --shadow: 0 10px 30px rgba(18,34,49,0.05);
 --radius-2xl:32px;
 --radius-xl:28px;
 --radius-lg:22px;
 --radius-md:18px;
 --radius-sm:14px;
 --max-width:1120px;
 --gutter: clamp(24px,4vw,48px);
 --space-1:10px;
 --space-2:14px;
 --space-3:18px;
 --space-4:24px;
 --space-5:32px;
 --space-6:40px;
 --space-7:52px;
 --space-8:68px;
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
 color: var(--text);
 background:
 radial-gradient(circle at top right, rgba(224,237,248,0.94), transparent 32%),
 linear-gradient(180deg, #fbfdff 0%, var(--bg) 40%, #edf3f8 100%);
 line-height: 1.76;
}

img {
 display:block;
 max-width:100%;
}

a {
 color: inherit;
 text-decoration: none;
}

.container,
.section,
.site-nav-shell {
 width:min(var(--max-width), calc(100% - (var(--gutter) *2)));
 margin-inline:auto;
}

.site-header {
 padding: 20px 0 0;
 margin-bottom: var(--space-6);
}

.site-nav-shell {
 position: sticky;
 top: 12px;
 z-index: 20;
 display: grid;
 gap: var(--space-3);
 border: 1px solid var(--border);
 border-radius: var(--radius-2xl);
 background: rgba(255,255,255,0.88);
 backdrop-filter: blur(12px);
 box-shadow: var(--shadow);
 padding: 18px 20px;
}

.site-nav-top,
.site-nav-bottom {
 display: flex;
 gap: var(--space-4);
}

.site-nav-top {
 align-items: flex-start;
 justify-content: space-between;
}

.site-nav-bottom {
 align-items: flex-start;
 justify-content: flex-start;
}

.site-nav {
 display: block;
 width: 100%;
}

.brand {
 display: grid;
 gap: 4px;
 flex: 0 0 auto;
 min-width: max-content;
 padding-right: var(--space-3);
}

.brand strong {
 font-size: 1rem;
 white-space: nowrap;
}

.brand span {
 font-size: 0.84rem;
 color: var(--text-soft);
 white-space: nowrap;
}

.nav-links,
.utility-links,
.footer-links,
.hero-actions,
.article-nav,
.link-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.nav-links {
 min-width: 0;
 justify-content: flex-start;
}

.utility-links {
 justify-content: flex-end;
}

.nav-links a,
.utility-links a,
.footer-links a,
.hero-actions a,
.article-nav a,
.link-grid a,
.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 0 18px;
 border-radius: 999px;
 color: var(--text-soft);
 border: 1px solid transparent;
 background: transparent;
 white-space: nowrap;
 line-height: 1;
 transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-links a:hover,
.nav-links a.active,
.utility-links a:hover,
.utility-links a.active,
.footer-links a:hover,
.hero-actions a:hover,
.article-nav a:hover,
.article-nav a.active,
.link-grid a:hover {
 background: var(--accent-soft);
 border-color: rgba(22,103,171,0.12);
 color: var(--accent-deep);
 transform: translateY(-1px);
}

.button.solid,
.hero-actions .solid {
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}

.button.solid:hover,
.hero-actions .solid:hover {
 background: var(--accent-deep);
 border-color: var(--accent-deep);
 color: #fff;
}

.button.ghost,
.hero-actions .ghost {
 background: rgba(255,255,255,0.78);
 border-color: var(--border);
 color: var(--text);
}

.hero-wrap,
.page-block,
.data-shell,
.footer-card,
.photo-panel {
 border: 1px solid var(--border);
 background: var(--surface);
 box-shadow: var(--shadow);
}

.hero-wrap,
.page-block,
.data-shell,
.footer-card {
 border-radius: var(--radius-xl);
 padding: clamp(28px,3vw,40px);
}

.photo-panel {
 border-radius: var(--radius-lg);
 padding: 18px;
}

.hero-grid,
.split-grid,
.dual-grid,
.triple-grid,
.footer-grid,
.stats-grid {
 display: grid;
 gap: var(--space-5);
 align-items: stretch;
}

.hero-grid {
 grid-template-columns: minmax(0,1.04fr) minmax(320px,0.96fr);
}

.split-grid,
.dual-grid,
.footer-grid {
 grid-template-columns: repeat(2,minmax(0,1fr));
}

.triple-grid,
.stats-grid {
 grid-template-columns: repeat(3,minmax(0,1fr));
}

.stats-grid.four {
 grid-template-columns: repeat(4,minmax(0,1fr));
}

.hero-copy,
.section-copy,
.photo-panel,
.hero-photo {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: var(--space-2);
}

.eyebrow {
 margin: 0 0 var(--space-2);
 color: var(--accent);
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
 margin: 0 0 var(--space-3);
 line-height: 1.08;
}

h1 {
 font-size: clamp(2.55rem,4.7vw,4.55rem);
 letter-spacing: -0.05em;
 font-weight: 700;
}

h1 span,
h2 span {
 display: block;
 margin-top: 12px;
 font-size: clamp(1.05rem,2vw,1.32rem);
 line-height: 1.46;
 color: var(--accent-deep);
}

h2 {
 font-size: clamp(1.9rem,3vw,2.9rem);
 letter-spacing: -0.04em;
 font-weight: 650;
}

h3 {
 font-size: 1.22rem;
 letter-spacing: -0.02em;
}

p,
ol,
ul {
 margin: 0 0 var(--space-3);
}

p:last-child,
ol:last-child,
ul:last-child {
 margin-bottom:0;
}

.lead {
 font-size: 1.08rem;
 color: var(--text-soft);
}

.zh {
 color: var(--text-faint);
 border-left: 2px solid rgba(22,103,171,0.14);
 padding-left: 16px;
}

.bilingual-pair {
 display: grid;
 gap: 12px;
 margin-bottom: var(--space-4);
}

.lang-label {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 32px;
 width: fit-content;
 padding: 0 12px;
 border-radius: 999px;
 background: rgba(223,237,249,0.72);
 color: var(--accent-deep);
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.meta-copy,
.caption,
.stat-card span {
 color: var(--text-soft);
}

.section {
 margin: var(--space-6) auto 0;
 display: grid;
 gap: var(--space-4);
}

.card,
.stat-card,
.note-card,
.mini-panel {
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 background: rgba(255,255,255,0.64);
 padding: 26px;
}

.card,
.note-card,
.mini-panel,
.stat-card {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

.stat-card strong {
 display: block;
 font-size: 1.7rem;
 color: var(--accent-deep);
 margin-bottom: 8px;
}

.photo-panel img,
.hero-photo img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: calc(var(--radius-lg) - 4px);
}

.caption {
 margin-top: 14px;
 font-size: 0.92rem;
}

.checklist {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 12px;
}

.checklist li {
 padding: 16px 18px;
 border-radius: 16px;
 background: rgba(223,237,249,0.6);
 border: 1px solid rgba(22,103,171,0.08);
 line-height: 1.64;
}

.table-shell {
 overflow-x: auto;
}

table {
 width: 100%;
 min-width: 720px;
 border-collapse: collapse;
}

th,
td {
 padding: 18px 16px;
 text-align: left;
 vertical-align: top;
 border-bottom: 1px solid var(--line);
}

thead th {
 background: rgba(223,237,249,0.6);
 color: var(--accent-deep);
}

tbody tr:nth-child(even) {
 background: rgba(255,255,255,0.42);
}

.footer-space {
 padding-bottom: var(--space-7);
}

@media (max-width:1160px) {
 .site-nav-top,
 .site-nav-bottom {
  flex-direction: column;
  align-items: flex-start;
 }

 .utility-links {
  justify-content: flex-start;
 }
}

@media (max-width:860px) {
 .hero-grid,
 .split-grid,
 .dual-grid,
 .triple-grid,
 .footer-grid,
 .stats-grid,
 .stats-grid.four {
  grid-template-columns: 1fr;
 }
}

@media (max-width:640px) {
 :root {
  --gutter: 20px;
 }

 .site-header {
 margin-bottom: var(--space-5);
 }

 .site-nav-shell {
  top: 8px;
  padding: 14px;
  border-radius: 24px;
 }

 .nav-links,
 .utility-links,
 .footer-links,
 .hero-actions,
 .article-nav,
 .link-grid {
  width: 100%;
 }

 .nav-links a,
 .utility-links a,
 .footer-links a,
 .hero-actions a,
 .article-nav a,
 .link-grid a,
 .button {
  width: 100%;
  justify-content: flex-start;
  padding: 0 16px;
 }

 .card,
 .note-card,
 .mini-panel,
 .stat-card,
 .hero-wrap,
 .page-block,
 .data-shell,
 .footer-card {
  padding: 22px;
 }
}