/* ============================================================
   BETTER TOGETHER — Complete Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&display=swap');

/* ─── CSS Variables ─── */
:root {
  --parchment:    #F4F1EA;
  --forest:       #2D3E35;
  --persimmon:    #FF6B35;
  --sage:         #A8DADC;

  --bg:           #F4F1EA;
  --bg-surface:   #EDE9DF;
  --bg-card:      #E9E5DC;
  --text-primary: #2D3E35;
  --text-secondary:#5C7068;
  --text-muted:   #8A9E96;
  --border:       rgba(45,62,53,.10);
  --border-strong:rgba(45,62,53,.20);

  --font-display: 'DM Serif Display','Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:    'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm:    0 2px  8px rgba(45,62,53,.06);
  --shadow-md:    0 4px 20px rgba(45,62,53,.10);
  --shadow-lg:    0 12px 40px rgba(45,62,53,.14);
  --shadow-hover: 0 20px 60px rgba(45,62,53,.18);

  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:  .15s;
  --dur-base:  .25s;
  --dur-slow:  .4s;
}

[data-theme="dark"] {
  --bg:           #1A2420;
  --bg-surface:   #1F2B26;
  --bg-card:      #243028;
  --text-primary: #E8E4D9;
  --text-secondary:#A8B8B2;
  --text-muted:   #6A8079;
  --border:       rgba(232,228,217,.08);
  --border-strong:rgba(232,228,217,.15);
  --shadow-sm:    0 2px  8px rgba(0,0,0,.20);
  --shadow-md:    0 4px 20px rgba(0,0,0,.30);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.40);
  --shadow-hover: 0 20px 60px rgba(0,0,0,.50);
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s var(--ease), color .3s var(--ease);
  overflow-x: hidden;
}

/* Film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .045;
  pointer-events: none;
  z-index: 9998;
}
[data-theme="dark"] body::after { opacity:.07; }

a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ─── Layout ─── */
.container        { max-width:1280px; margin:0 auto; padding:0 2rem; }
.container--wide  { max-width:1480px; margin:0 auto; padding:0 2rem; }
.container--narrow{ max-width:800px;  margin:0 auto; padding:0 2rem; }

/* ─── Navigation ─── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 1.25rem 2rem;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.scrolled {
  background-color: rgba(244,241,234,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}
[data-theme="dark"] .nav.scrolled { background-color:rgba(26,36,32,.92); }

.nav__inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1280px; margin:0 auto;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-primary);
  display:flex; align-items:center; gap:.4rem;
  letter-spacing:-.02em;
}
.nav__logo-dot {
  width:7px; height:7px;
  background-color: var(--persimmon);
  border-radius:50%; flex-shrink:0; margin-top:2px;
}
.nav__links { display:flex; align-items:center; gap:.25rem; }
.nav__link {
  font-size:.875rem; font-weight:500;
  color: var(--text-secondary);
  padding:.5rem .75rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.nav__link:hover        { color:var(--text-primary); background-color:var(--border); }
.nav__link.active       { color:var(--text-primary); font-weight:600; }
.nav__actions           { display:flex; align-items:center; gap:.75rem; }

.theme-toggle {
  width:40px; height:40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-secondary);
  transition: all var(--dur-base) var(--ease);
}
.theme-toggle:hover { color:var(--text-primary); background-color:var(--bg-card); border-color:var(--border-strong); }
.theme-toggle svg   { width:18px; height:18px; }
.icon-sun  { display:none; }
.icon-moon { display:block; }
[data-theme="dark"] .icon-sun  { display:block; }
[data-theme="dark"] .icon-moon { display:none; }

.nav__hamburger {
  display:none; width:40px; height:40px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.nav__hamburger span {
  display:block; width:20px; height:2px;
  background-color: var(--text-primary);
  border-radius:2px;
  transition: all var(--dur-base) var(--ease);
}
.nav__drawer {
  display:none; position:fixed; inset:0;
  background-color: var(--bg); z-index:99;
  flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
}
.nav__drawer.open { display:flex; }
.nav__drawer-close {
  position:absolute; top:1.5rem; right:1.5rem;
  width:40px; height:40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-muted);
  font-size:1.4rem; line-height:1;
}
.nav__drawer .nav__link {
  font-size:1.75rem;
  font-family: var(--font-display);
  padding:.75rem 1.5rem;
  color: var(--text-primary);
}

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size:.9rem; font-weight:600; font-family:var(--font-body);
  letter-spacing:.01em;
  transition: all var(--dur-base) var(--ease);
  cursor:pointer; white-space:nowrap;
}
.btn svg { width:16px; height:16px; transition:transform var(--dur-base) var(--ease); }
.btn:hover svg { transform:translateX(3px); }

.btn--primary {
  background-color: var(--persimmon);
  color:#fff; border:2px solid var(--persimmon);
}
.btn--primary:hover {
  background-color:#e85a26; border-color:#e85a26;
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,53,.32);
}
.btn--outline {
  background-color:transparent;
  color:var(--text-primary); border:2px solid var(--border-strong);
}
.btn--outline:hover { background-color:var(--bg-card); border-color:var(--text-primary); transform:translateY(-2px); }
.btn--ghost { background:transparent; color:var(--text-secondary); border:2px solid transparent; padding:.78rem 0; }
.btn--ghost:hover { color:var(--text-primary); }

/* ─── Hero ─── */
.hero {
  padding-top: 11rem; padding-bottom: 5rem;
  position:relative; overflow:hidden;
}
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:.625rem; margin-bottom:1.75rem;
}
.hero__eyebrow-line { width:32px; height:1.5px; background-color:var(--persimmon); }
.hero__eyebrow-text {
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.hero__layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:end;
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem,7.5vw,7rem);
  line-height:.96; letter-spacing:-.03em;
  color: var(--text-primary);
}
.hero__headline em { font-style:italic; color:var(--persimmon); }
.hero__right { display:flex; flex-direction:column; gap:2rem; padding-bottom:.5rem; }
.hero__desc {
  font-size:1.1rem; line-height:1.78;
  color: var(--text-secondary); max-width:42ch;
}
.hero__actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__stat-row {
  display:flex; gap:2.5rem; padding-top:1.25rem;
  border-top:1px solid var(--border);
}
.hero__stat { display:flex; flex-direction:column; gap:.2rem; }
.hero__stat-num {
  font-family: var(--font-display);
  font-size:1.75rem; letter-spacing:-.025em; color:var(--text-primary);
}
.hero__stat-label { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* ─── Marquee ─── */
.marquee {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1.1rem 0; overflow:hidden; display:flex;
}
.marquee__track {
  display:flex; gap:2.5rem;
  animation: marqueeScroll 28s linear infinite;
  white-space:nowrap;
}
.marquee__track:hover { animation-play-state:paused; }
.marquee__item {
  display:flex; align-items:center; gap:1.5rem;
  flex-shrink:0; font-size:.82rem; font-weight:500;
  color:var(--text-muted); letter-spacing:.03em;
}
.marquee__item::after {
  content:'◆'; font-size:.35rem; color:var(--persimmon);
}
@keyframes marqueeScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ─── Section ─── */
.section    { padding:6rem 0; }
.section--sm{ padding:4rem 0; }
.section__header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:3rem; gap:1rem;
}
.section__eyebrow {
  font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--persimmon); margin-bottom:.5rem;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3rem);
  line-height:1.1; letter-spacing:-.02em; color:var(--text-primary);
}

/* ─── Article Cards ─── */
.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  display:flex; flex-direction:column; position:relative;
}
.card:hover {
  transform:translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color:transparent;
}
.card__visual { aspect-ratio:16/9; overflow:hidden; position:relative; }
.card--featured .card__visual { aspect-ratio:4/3; }
.card--wide    .card__visual { aspect-ratio:21/7; }
.card__visual-inner {
  width:100%; height:100%; position:relative; overflow:hidden;
  transition:transform .6s var(--ease);
}
.card:hover .card__visual-inner { transform:scale(1.04); }

/* ─── Card accent backgrounds ─── */
.accent-1 { background:linear-gradient(135deg,#C8ECED 0%,#6BC4C7 55%,#2D8A8E 100%); }
.accent-2 { background:linear-gradient(135deg,#FFD9A8 0%,#FFA868 55%,#FF6B35 100%); }
.accent-3 { background:linear-gradient(135deg,#C0E4B8 0%,#80C478 55%,#3A7A38 100%); }
.accent-4 { background:linear-gradient(135deg,#CCE0EE 0%,#8DB4CE 55%,#4A7FA8 100%); }
.accent-5 { background:linear-gradient(135deg,#FFE0DC 0%,#FFB4A8 55%,#E87878 100%); }
.accent-6 { background:linear-gradient(135deg,#D8D4CC 0%,#908C84 55%,#3C3A36 100%); }
.accent-7 { background:linear-gradient(135deg,#FFE8C0 0%,#FFC060 55%,#E88820 100%); }

/* Abstract blobs on card visuals */
.card__blob {
  position:absolute; border-radius:50%; background:rgba(255,255,255,.14);
}
.card__blob--a { width:65%; padding-bottom:65%; top:-25%; right:-10%; }
.card__blob--b { width:42%; padding-bottom:42%; bottom: 5%; left: 8%; background:rgba(255,255,255,.08); }
.card__blob--c { width:28%; padding-bottom:28%; top:25%; left:38%; background:rgba(0,0,0,.10); }
.card__num {
  position:absolute; bottom:1rem; left:1.5rem;
  font-family: var(--font-display);
  font-size:4rem; font-weight:400;
  color:rgba(255,255,255,.14); letter-spacing:-.04em; line-height:1;
  user-select:none;
}

.card__body { padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.card--featured .card__body { padding:2rem; gap:1rem; }
.card--wide    .card__body  { padding:1.75rem; }

.card__meta   { display:flex; align-items:center; gap:.75rem; }
.card__category {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:var(--radius-xs);
  background-color:var(--bg-surface); color:var(--text-muted);
  border:1px solid var(--border);
}
.card__read-time { font-size:.75rem; color:var(--text-muted); }

.card__title {
  font-family: var(--font-display);
  font-size:1.25rem; line-height:1.2; letter-spacing:-.01em; color:var(--text-primary);
}
.card--featured .card__title {
  font-size: clamp(1.55rem,2.5vw,2rem); line-height:1.15;
}
.card--wide .card__title { font-size:clamp(1.35rem,2vw,1.75rem); }

.card__excerpt {
  font-size:.9rem; line-height:1.65; color:var(--text-secondary);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card--featured .card__excerpt { font-size:.975rem; -webkit-line-clamp:4; }

.card__footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:.75rem; border-top:1px solid var(--border);
}
.card__author { font-size:.78rem; color:var(--text-muted); font-weight:500; }
.card__arrow {
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); flex-shrink:0;
  transition: all var(--dur-base) var(--ease);
}
.card:hover .card__arrow {
  background-color:var(--persimmon); border-color:var(--persimmon);
  color:#fff; transform:rotate(45deg);
}
.card__link { position:absolute; inset:0; z-index:1; }

/* ─── Bento Grid ─── */
.bento-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.bento-grid .card--featured { grid-column:span 2; grid-row:span 2; }
.bento-grid .card--wide     { grid-column:span 3; }

/* ─── Manifesto Section ─── */
.manifesto {
  background-color: var(--forest);
  padding:6rem 0; position:relative; overflow:hidden;
}
[data-theme="dark"] .manifesto {
  background-color:var(--bg-surface);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.manifesto::before {
  content:''; position:absolute;
  top:-40%; right:-15%;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(168,218,220,.12) 0%,transparent 70%);
  pointer-events:none;
}
.manifesto__layout {
  display:grid; grid-template-columns:1fr 2fr; gap:7rem; align-items:center;
}
.manifesto__label {
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(168,218,220,.7); margin-bottom:1.5rem;
}
[data-theme="dark"] .manifesto__label { color:var(--text-muted); }
.manifesto__headline {
  font-family: var(--font-display);
  font-size:clamp(2.5rem,5vw,4.2rem); line-height:1.05; letter-spacing:-.025em;
  color: var(--parchment);
}
[data-theme="dark"] .manifesto__headline { color:var(--text-primary); }
.manifesto__headline em { font-style:italic; color:var(--sage); }
.manifesto__grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.manifesto__item { border-top:1px solid rgba(168,218,220,.18); padding-top:1.25rem; }
[data-theme="dark"] .manifesto__item { border-top-color:var(--border); }
.manifesto__num {
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  color:var(--persimmon); margin-bottom:.5rem;
}
.manifesto__text { font-size:.93rem; line-height:1.7; color:rgba(244,241,234,.65); }
[data-theme="dark"] .manifesto__text { color:var(--text-secondary); }

/* ─── Newsletter ─── */
.newsletter-wrap { padding:0 0 6rem; }
.newsletter {
  background-color: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding:4.5rem; text-align:center; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.newsletter::before {
  content:''; position:absolute;
  top:-25%; left:50%; transform:translateX(-50%);
  width:480px; height:280px;
  background:radial-gradient(ellipse,rgba(168,218,220,.18) 0%,transparent 70%);
  pointer-events:none;
}
.newsletter__title {
  font-family: var(--font-display);
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem;
}
.newsletter__desc {
  font-size:1.05rem; color:var(--text-secondary);
  max-width:44ch; margin:0 auto 2.5rem; line-height:1.72;
}
.newsletter__form { display:flex; gap:.75rem; max-width:440px; margin:0 auto; }
.newsletter__input {
  flex:1; padding:.875rem 1.25rem;
  border-radius:var(--radius-sm); border:1.5px solid var(--border-strong);
  background-color:var(--bg); color:var(--text-primary);
  font-size:.9rem; font-family:var(--font-body); outline:none;
  transition:border-color var(--dur-base) var(--ease);
}
.newsletter__input:focus    { border-color:var(--persimmon); }
.newsletter__input::placeholder { color:var(--text-muted); }
.newsletter__note { font-size:.75rem; color:var(--text-muted); margin-top:1rem; }

/* ─── Footer ─── */
.footer { background-color:var(--forest); padding:5rem 0 2.5rem; }
[data-theme="dark"] .footer { background-color:var(--bg-surface); border-top:1px solid var(--border); }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; margin-bottom:4rem; }
.footer__brand { display:flex; flex-direction:column; gap:1.25rem; }
.footer__logo {
  font-family:var(--font-display); font-size:1.5rem;
  color:var(--parchment); letter-spacing:-.02em;
  display:flex; align-items:center; gap:.4rem;
}
[data-theme="dark"] .footer__logo { color:var(--text-primary); }
.footer__tagline { font-size:.875rem; line-height:1.7; color:rgba(244,241,234,.5); max-width:28ch; }
[data-theme="dark"] .footer__tagline { color:var(--text-muted); }
.footer__col-title {
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(168,218,220,.55); margin-bottom:1.25rem;
}
[data-theme="dark"] .footer__col-title { color:var(--text-muted); }
.footer__links { display:flex; flex-direction:column; gap:.75rem; }
.footer__link { font-size:.875rem; color:rgba(244,241,234,.58); transition:color var(--dur-base) var(--ease); }
[data-theme="dark"] .footer__link { color:var(--text-secondary); }
.footer__link:hover { color:var(--parchment); }
[data-theme="dark"] .footer__link:hover { color:var(--text-primary); }
.footer__bottom {
  border-top:1px solid rgba(244,241,234,.1); padding-top:2rem;
  display:flex; align-items:center; justify-content:space-between;
}
[data-theme="dark"] .footer__bottom { border-top-color:var(--border); }
.footer__copy { font-size:.78rem; color:rgba(244,241,234,.32); }
[data-theme="dark"] .footer__copy { color:var(--text-muted); }
.footer__logo-dot { width:7px; height:7px; background-color:var(--persimmon); border-radius:50%; flex-shrink:0; margin-top:2px; }

/* ─── Articles List Page ─── */
.articles-hero { padding-top:11rem; padding-bottom:4rem; }
.articles-hero__tag {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.4rem 1rem; border-radius:100px;
  border:1px solid var(--border-strong);
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:2rem;
}
.articles-hero__tag-dot { width:6px; height:6px; background:var(--persimmon); border-radius:50%; }
.articles-hero__title {
  font-family:var(--font-display);
  font-size:clamp(3rem,7vw,6rem); line-height:.97; letter-spacing:-.03em;
  max-width:12ch; margin-bottom:1.75rem;
}
.articles-hero__title em { font-style:italic; color:var(--persimmon); }
.articles-hero__desc {
  font-size:1.1rem; color:var(--text-secondary); max-width:50ch; line-height:1.75;
}
.articles-filter {
  display:flex; align-items:center; gap:.5rem; margin-bottom:3rem; flex-wrap:wrap; padding-bottom:3rem;
  border-bottom:1px solid var(--border);
}
.filter-btn {
  padding:.5rem 1.125rem; border-radius:100px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  border:1.5px solid var(--border-strong); color:var(--text-secondary);
  background:transparent; cursor:pointer;
  transition: all var(--dur-base) var(--ease);
}
.filter-btn:hover,.filter-btn.active {
  background-color:var(--forest); border-color:var(--forest); color:var(--parchment);
}
[data-theme="dark"] .filter-btn:hover,[data-theme="dark"] .filter-btn.active {
  background-color:var(--text-primary); border-color:var(--text-primary); color:var(--bg);
}

/* ─── Article Detail ─── */
.article-hero { padding-top:11rem; padding-bottom:3.5rem; }
.article-hero__inner { max-width:900px; margin:0 auto; padding:0 2rem; }
.article-hero__breadcrumb {
  display:flex; align-items:center; gap:.75rem; margin-bottom:2.5rem;
}
.article-hero__back {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); transition:color var(--dur-base) var(--ease);
}
.article-hero__back:hover { color:var(--text-primary); }
.article-hero__back svg { width:14px; height:14px; transition:transform var(--dur-base) var(--ease); }
.article-hero__back:hover svg { transform:translateX(-3px); }
.breadcrumb-sep { width:1px; height:14px; background:var(--border-strong); }
.article-hero__cat {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--persimmon);
}
.article-hero__title {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6vw,5rem); line-height:.98; letter-spacing:-.025em; margin-bottom:1.75rem;
}
.article-hero__intro {
  font-size:1.2rem; line-height:1.72; color:var(--text-secondary); max-width:54ch; margin-bottom:2.5rem;
}
.article-hero__meta {
  display:flex; align-items:center; gap:1.5rem;
  padding:1.25rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.article-hero__date,.article-hero__readtime {
  font-size:.85rem; color:var(--text-muted); font-weight:500;
}
.meta-dot { width:4px; height:4px; border-radius:50%; background:var(--text-muted); }

.article-visual {
  max-width:900px; margin:0 auto 5rem;
  padding:0 2rem;
}
.article-visual__inner {
  width:100%; border-radius:var(--radius-xl);
  overflow:hidden; position:relative;
  aspect-ratio:16/7;
}

/* ─── Article Body ─── */
.article-body { max-width:680px; margin:0 auto; padding:0 2rem 7rem; }

.article-body h2 {
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; letter-spacing:-.015em;
  color:var(--text-primary); margin:3.5rem 0 .875rem;
}
.article-body h3 {
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.28; letter-spacing:-.01em;
  color:var(--text-primary); margin:2.5rem 0 .75rem; font-style:italic;
}
.article-body h4 {
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); margin:2rem 0 .625rem;
}
.article-body p {
  font-size:1.05rem; line-height:1.82; color:var(--text-secondary); margin-bottom:1.25rem;
}
.article-body .lead {
  font-size:1.2rem; color:var(--text-primary); font-weight:400; line-height:1.72;
}
.article-body ul,.article-body ol { margin:0 0 1.5rem; }
.article-body li {
  font-size:1.05rem; line-height:1.78; color:var(--text-secondary);
  padding-left:1.6rem; position:relative; margin-bottom:.5rem;
}
.article-body ul li::before { content:'—'; position:absolute; left:0; color:var(--persimmon); font-weight:600; }
.article-body ol { counter-reset:listcnt; }
.article-body ol li { counter-increment:listcnt; }
.article-body ol li::before {
  content:counter(listcnt)'.'; position:absolute; left:0;
  color:var(--persimmon); font-weight:700; font-size:.85rem;
}
.article-body hr { border:none; border-top:1px solid var(--border); margin:3rem 0; }
.article-body strong { color:var(--text-primary); font-weight:600; }

.summary-box {
  background-color:var(--bg-surface);
  border-left:3px solid var(--persimmon);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:1.75rem 2rem; margin:3rem 0;
}
.summary-box__title {
  font-family:var(--font-display); font-size:1.1rem;
  color:var(--text-primary); margin-bottom:1.25rem; letter-spacing:-.01em;
}
.summary-box li { font-size:.9375rem; }

/* ─── Related Articles ─── */
.related { max-width:900px; margin:0 auto; padding:4rem 2rem 7rem; border-top:1px solid var(--border); }
.related__title { font-family:var(--font-display); font-size:1.75rem; letter-spacing:-.015em; margin-bottom:2rem; }
.related__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }

/* ─── FAQ Page ─── */
.faq-hero { padding-top:11rem; padding-bottom:4rem; max-width:780px; margin:0 auto; padding-left:2rem; padding-right:2rem; }
.faq-hero__eyebrow {
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--persimmon); margin-bottom:1rem;
}
.faq-hero__title {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6vw,4.5rem); line-height:.98; letter-spacing:-.025em; margin-bottom:1.5rem;
}
.faq-hero__desc { font-size:1.1rem; color:var(--text-secondary); max-width:50ch; line-height:1.75; }
.faq-list { max-width:780px; margin:0 auto; padding:0 2rem 8rem; }
.faq-item { border-top:1px solid var(--border); }
.faq-item:last-child { border-bottom:1px solid var(--border); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; background:none; border:none; cursor:pointer; text-align:left;
  color:var(--text-primary); transition:color var(--dur-base) var(--ease);
}
.faq-q:hover { color:var(--persimmon); }
.faq-q h3 {
  font-family:var(--font-display); font-size:1.2rem;
  line-height:1.3; letter-spacing:-.01em; font-weight:400;
}
.faq-icon {
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); flex-shrink:0;
  transition:all var(--dur-base) var(--ease);
}
.faq-item.open .faq-icon { background:var(--persimmon); border-color:var(--persimmon); color:#fff; transform:rotate(45deg); }
.faq-a {
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
}
.faq-item.open .faq-a { max-height:500px; opacity:1; padding-bottom:1.75rem; }
.faq-a p { font-size:1rem; line-height:1.78; color:var(--text-secondary); }

/* ─── Scroll Reveal ─── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal--d1 { transition-delay:.1s; }
.reveal--d2 { transition-delay:.2s; }
.reveal--d3 { transition-delay:.3s; }
.reveal--d4 { transition-delay:.4s; }
.reveal--d5 { transition-delay:.5s; }

/* ─── Utility ─── */
.text-persimmon { color:var(--persimmon); }
.text-muted     { color:var(--text-muted); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width:1024px) {
  .bento-grid { grid-template-columns:repeat(2,1fr); }
  .bento-grid .card--featured { grid-column:span 2; grid-row:auto; }
  .bento-grid .card--wide     { grid-column:span 2; }
  .manifesto__layout  { grid-template-columns:1fr; gap:3.5rem; }
  .manifesto__grid    { grid-template-columns:1fr 1fr; }
  .footer__grid       { grid-template-columns:1fr 1fr; gap:3rem; }
}

@media (max-width:768px) {
  .container,.container--narrow { padding:0 1.25rem; }
  .nav__links    { display:none; }
  .nav__hamburger{ display:flex; }
  .nav           { padding:1rem 1.25rem; }
  .hero { padding-top:9rem; }
  .hero__layout  { grid-template-columns:1fr; gap:2.5rem; }
  .hero__stat-row{ gap:1.75rem; }
  .section       { padding:4rem 0; }
  .bento-grid    { grid-template-columns:1fr; }
  .bento-grid .card--featured,.bento-grid .card--wide { grid-column:span 1; }
  .manifesto__grid { grid-template-columns:1fr; gap:2rem; }
  .newsletter    { padding:3rem 1.75rem; }
  .newsletter__form { flex-direction:column; }
  .footer__grid  { grid-template-columns:1fr; gap:2.5rem; }
  .footer__bottom{ flex-direction:column; gap:1rem; text-align:center; }
  .related__grid { grid-template-columns:1fr; }
  .section__header { flex-direction:column; align-items:flex-start; }
  .articles-hero { padding-top:8rem; }
  .article-hero  { padding-top:8rem; }
  .faq-hero      { padding-top:8rem; }
}

@media (max-width:480px) {
  .hero__actions { flex-direction:column; }
  .btn           { width:100%; justify-content:center; }
  .newsletter    { padding:2.5rem 1.25rem; }
}