/* 2027 Premium Design System for After Forty Feel - inspired by Peter Attia (premium health frameworks, visuals, membership), Wait But Why (deep visual dives, engagement), The Atlantic (illustrations, hierarchy, discovery) */
:root {
  --ink: #1a1814;
  --paper: #f7f3ec;
  --cream: #fdfaf3;
  --rust: #a8412a;
  --rust-h: #8e3621;
  --rule: #d8d0c2;
  --muted: #5a5448;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: 1.65; -webkit-font-smoothing: antialiased; font-size: 17px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Topbar & Nav - clean like Attia/Atlantic */
.topbar { background: #1a1814; color: #f7f3ec; font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 14px 0; text-align: center; border-bottom: 1px solid #2a2620; }
.topbar a { color: #e8a87c; }
nav.main { font-family: var(--sans); font-size: 13px; border-bottom: 1px solid var(--rule); padding: 20px 24px; background: var(--cream); }
nav.main .wrap { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
nav.main .brand { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink); }
nav.main .brand em { font-style: italic; color: var(--rust); }
nav.main ul { list-style: none; display: flex; gap: 28px; align-items: center; }
nav.main a { color: var(--ink); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; opacity: .78; }
nav.main a:hover { opacity: 1; color: var(--rust); }

/* Hero - premium like Attia hero with image + CTA */
.hero { max-width: var(--max-width); margin: 0 auto; padding: 60px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.hero-feat h1 { font-size: 48px; line-height: 1.05; font-weight: 600; letter-spacing: -.014em; margin-bottom: 22px; }
.hero-feat h1 em { font-style: italic; color: var(--rust); font-weight: 500; }
.hero-feat .deck { font-size: 20px; line-height: 1.5; color: var(--muted); margin-bottom: 28px; font-style: italic; max-width: 580px; }
.hero-cta { display: inline-block; background: var(--ink); color: #f7f3ec; padding: 14px 26px; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-radius: 3px; margin-right: 8px; transition: all .2s; }
.hero-cta:hover { background: #2a2620; transform: translateY(-1px); }
.hero-cta.alt { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.hero-cta.alt:hover { background: var(--ink); color: #f7f3ec; }
.hero-img { background: #1a1814 center/cover; border-radius: 6px; aspect-ratio: 4/5; }

/* Cards & Grids - like Attia/Atlantic content discovery */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card { display: block; background: #fff; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.card:hover { border-color: var(--rust); box-shadow: 0 10px 30px rgba(168,65,42,.12); transform: translateY(-4px); }
.card .img { aspect-ratio: 16/9; background: #1a1814 center/cover; }
.card .cat { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); font-weight: 600; padding: 16px 16px 0; }
.card h3 { font-size: 20px; font-weight: 600; line-height: 1.25; padding: 0 16px 8px; }
.card h3 em { font-style: italic; color: var(--rust); font-weight: 500; }
.card p { font-size: 14px; color: var(--muted); padding: 0 16px 16px; line-height: 1.5; }
.card .meta { font-family: var(--sans); font-size: 12px; color: var(--muted); padding: 0 16px 16px; }

/* Pathways specific premium cards */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.path-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 6px rgba(0,0,0,.03); transition: all .2s cubic-bezier(.4,0,.2,1); min-height: 380px; }
.path-card:hover { border-color: var(--rust); box-shadow: 0 12px 40px rgba(168,65,42,.15); transform: translateY(-6px); }
.path-card .pc-visual { height: 160px; background-size: cover; background-position: center; }
.path-card .pc-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.path-card .pc-tag { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust); font-weight: 600; margin-bottom: 8px; }
.path-card h3 { font-size: 22px; line-height: 1.2; margin: 0 0 12px; font-weight: 600; }
.path-card p { font-size: 15px; color: var(--muted); line-height: 1.55; margin: 0 0 auto; }
.path-card .pc-cta { font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--rust); margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.path-card.recommended { border-color: var(--rust); background: #fdfaf3; }

/* Sections, CTAs, Trust */
.section { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px; }
.section-label { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--rust); font-weight: 600; margin-bottom: 12px; }
h2, .sec-title { font-size: 28px; font-weight: 600; margin-bottom: 24px; letter-spacing: -.01em; }
.deck { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 700px; margin-bottom: 32px; }
.cta { display: inline-block; background: var(--rust); color: #f7f3ec; padding: 14px 28px; font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-radius: 4px; transition: all .2s; }
.cta:hover { background: var(--rust-h); transform: translateY(-1px); }
.cta.alt { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.cta.alt:hover { background: var(--ink); color: #f7f3ec; }
.trust { background: var(--cream); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 24px; text-align: center; font-family: var(--sans); }
.trust .pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.trust .pillars strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 6px; }

/* Forms, Subscribe - elegant like premium sites */
form { display: flex; gap: 8px; }
input[type="email"] { flex: 1; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 4px; font-family: var(--sans); font-size: 15px; background: #fff; }
button[type="submit"] { background: var(--rust); color: #f7f3ec; border: 0; padding: 12px 24px; font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-radius: 4px; cursor: pointer; }
button[type="submit"]:hover { background: var(--rust-h); }

/* Footer, Disclosures */
footer { background: var(--ink); color: #f7f3ec; padding: 48px 24px; text-align: center; font-family: var(--sans); font-size: 13px; }
footer a { color: #e8a87c; margin: 0 8px; }
footer .disclose { font-size: 12px; color: #7a7468; margin-top: 16px; max-width: 700px; margin-left: auto; margin-right: auto; }

/* Mobile 2027 excellence - fast, accessible, thumb friendly */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; padding: 40px 16px; gap: 24px; }
  .grid, .path-grid { grid-template-columns: 1fr; gap: 16px; }
  h1, .hero-feat h1 { font-size: 32px; }
  .deck { font-size: 16px; }
  .cta { padding: 12px 20px; font-size: 12px; }
  .trust .pillars { grid-template-columns: 1fr; gap: 16px; }
  nav.main ul { gap: 12px; font-size: 10px; }
  .card .img { aspect-ratio: 16/10; }
}

/* 2027 additions: subtle polish, accessibility, micro interactions */
.card, .path-card { will-change: transform; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--rust); color: #fff; padding: 8px; z-index: 100; }
.skip-link:focus { top: 0; }

/* AI/2027 ready hints - e.g. for summaries */
.ai-summary { font-family: var(--sans); font-size: 12px; background: var(--cream); padding: 8px 12px; border-radius: 4px; margin: 8px 0; border-left: 3px solid var(--rust); }

/* 2027 Billion $ Polish: more from Attia/Atlantic/WBW research - pro visuals, AI components, micro-anims, full E-E-A-T, speed/acc */
.hero { max-width: var(--max-width); margin: 0 auto; padding: 60px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.hero-feat h1 { font-size: 48px; line-height: 1.05; font-weight: 600; letter-spacing: -.014em; margin-bottom: 22px; }
.hero-feat h1 em { font-style: italic; color: var(--rust); font-weight: 500; }
.hero-feat .deck { font-size: 20px; line-height: 1.5; color: var(--muted); margin-bottom: 28px; font-style: italic; max-width: 580px; }
.hero-cta { display: inline-block; background: var(--ink); color: #f7f3ec; padding: 14px 26px; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-radius: 3px; margin-right: 8px; transition: all .2s; }
.hero-cta:hover { background: #2a2620; transform: translateY(-1px); }
.hero-cta.alt { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.hero-cta.alt:hover { background: var(--ink); color: #f7f3ec; }
.hero-img { background: #1a1814 center/cover; border-radius: 6px; aspect-ratio: 4/5; }

.ai-btn { font-family: var(--sans); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; background: var(--cream); color: var(--rust); padding: 6px 12px; border: 1px solid var(--rust); border-radius: 3px; cursor: pointer; transition: all .2s; }
.ai-btn:hover { background: var(--rust); color: #fff; }

.author-bio { background: var(--cream); padding: 24px; border-radius: 8px; margin: 32px 0; display: flex; gap: 20px; align-items: center; font-family: var(--sans); }
.author-bio img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rust); }
.author-bio .meta { flex: 1; }
.author-bio .meta strong { display: block; font-size: 16px; color: var(--ink); }
.author-bio .meta span { font-size: 12px; color: var(--muted); }

/* More premium: better cards, anims, acc */
.card, .path-card { transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s; will-change: transform; }
.card:hover, .path-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(168,65,42,0.15); }
@media (prefers-reduced-motion: reduce) { .card, .path-card { transition: none; } }

/* 2027 AI-ready: structured for overviews */
.ai-ready { border-left: 4px solid var(--rust); background: linear-gradient(to right, #fdfaf3, transparent); padding-left: 16px; }

/* 2027 Billion $ Extra Polish: AI interactive, pro brand, more from top blogs */
.ai-expand { cursor: pointer; font-family: var(--sans); font-size: 12px; color: var(--rust); text-decoration: underline; }
.ai-expand:hover { color: var(--rust-h); }
.pro-header { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 16px; }
.pro-footer { background: var(--ink); color: #f7f3ec; padding: 32px 24px; font-family: var(--sans); font-size: 13px; text-align: center; }
.pro-footer a { color: #e8a87c; }

/* Billion $ Nav Polish 2027 */
nav.main { font-family: var(--sans); font-size: 13px; border-bottom: 1px solid var(--rule); padding: 16px 24px; background: var(--cream); position: sticky; top: 0; z-index: 100; }
nav.main .wrap { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
nav.main .brand { font-family: var(--serif); font-size: 22px; font-weight: 600; }
nav.main ul { display: flex; gap: 24px; list-style: none; }
nav.main a { color: var(--ink); text-transform: uppercase; font-size: 11px; letter-spacing: .1em; opacity: .8; transition: all .2s; }
nav.main a:hover, nav.main a.active { opacity: 1; color: var(--rust); border-bottom: 2px solid var(--rust); padding-bottom: 2px; }

/* Premium Buttons 2027 - deeper, more pro */
.cta, .pc-cta, .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #f7f3ec; padding: 14px 28px; font-family: var(--sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-radius: 4px; text-decoration: none; transition: all .2s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.cta:hover, .pc-cta:hover, .hero-cta:hover { background: var(--rust); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(168,65,42,.3); }
.cta.alt, .pc-cta.alt { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.cta.alt:hover, .pc-cta.alt:hover { background: var(--ink); color: #f7f3ec; border-color: var(--ink); }
.cta svg, .pc-cta svg { width: 16px; height: 16px; }

/* Make pathways feel deeper - accordion for long content */
.accordion { border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.accordion-header { padding: 16px 20px; background: #fff; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.accordion-header:hover { background: var(--cream); }
.accordion-content { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; background: #fff; }
.accordion.open .accordion-content { max-height: 500px; padding: 16px 20px; }
.accordion-header::after { content: "+"; font-size: 20px; transition: transform 0.3s; }
.accordion.open .accordion-header::after { transform: rotate(45deg); }

/* Extra premium for nav and buttons to fix "suck" and "short" feel */
nav.main { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
nav.main a.active { color: var(--rust); font-weight: 600; border-bottom: 2px solid var(--rust); }
.cta { position: relative; overflow: hidden; }
.cta:after { content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; }
.cta:hover:after { left: 200%; }
.pathways .path-card { min-height: 380px; } /* make cards feel more substantial */

/* 2027 pro subscribe band (used on letters + pathways for retention, not short) */
.subscribe-band { background: var(--cream); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 24px; text-align: center; margin: 32px 0; }
.subscribe-band h3 { font-size: 20px; margin-bottom: 8px; }
.subscribe-band p { color: var(--muted); max-width: 520px; margin: 0 auto 16px; font-size: 14px; }
.subscribe-band form { max-width: 520px; margin: 0 auto; }

/* Letter / article polish for substantial non-short read feel (larger, scannable, pro like Attia) */
article { max-width: 720px; margin: 0 auto; padding: 24px 0 60px; }
.dek { font-size: 21px; line-height: 1.5; color: var(--muted); font-style: italic; margin-bottom: 28px; }
article h2 { font-size: 26px; margin: 36px 0 14px; }
article ul { margin: 12px 0 20px 20px; }
article li { margin-bottom: 6px; line-height: 1.65; }
.cite { font-family: var(--sans); font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 40px; }

/* Make path-card ctas and buttons feel like real premium CTAs not basic links */
.path-card .cta, .path-card .pc-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--rust); color: #f7f3ec; padding: 10px 18px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 4px; margin-top: 12px; align-self: flex-start; text-decoration: none; }
.path-card .cta:hover, .path-card .pc-cta:hover { background: var(--rust-h); transform: translateY(-1px); }

/* Legacy subscribe consistency (many letters still use .subscribe or old wrappers) — make them look like the pro band */
.subscribe, .subscribe-band { background: var(--cream); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 32px 24px; text-align: center; margin: 24px 0; }
.subscribe h2, .subscribe h3, .subscribe-band h3 { font-size: 18px; margin-bottom: 6px; }
.subscribe p, .subscribe-band p { color: var(--muted); max-width: 520px; margin: 0 auto 12px; font-size: 14px; }

/* Top-tier AdSense units (baked + fallback dynamic): subtle, policy-transparent, no layout shift, 55+ friendly, matches rust/paper system */
.ad-unit { margin: 28px 0 32px; max-width: 100%; }
.ad-label {
  font: 10px/1.2 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8173;
  margin: 0 0 6px 2px;
  user-select: none;
  opacity: .85;
}
ins.adsbygoogle,
.aff-ad-top, .aff-ad-mid, .aff-ad-bottom, .aff-ad-sidebar {
  display: block;
  min-height: 90px; /* reserve space, reduce CLS before Google fills */
  background: #f9f6f0;
  border: 1px solid #e6dfcf;
}
.ad-unit .adsbygoogle { margin: 0; }
@media (max-width: 640px) {
  .ad-unit { margin: 20px 0 24px; }
  .ad-label { font-size: 9px; }
  ins.adsbygoogle { min-height: 60px; }
}