/* ================================================================
   v2 hybrid — Home sections
   ----------------------------------------------------------------
   Styles for the partials emitted by _HeroHome, _LatestSection,
   _DcPull, and _Manifesto. Only loaded on the converted Home
   template — no global side effects.

   Source mock: ui_kits/web/home/D-hybrid.html
   Depends on:  typography.css (tokens, palette aliases)
                tokens-extras.css (--pattern-*, DC palette)
                site-chrome.css (.site-head, .foot, .wrap)
   ================================================================ */

/* ── Hero (classical editorial, typographic) ──────────────────── */
.hero{padding:112px 32px 92px;text-align:center;border-bottom:1px solid var(--border-light);position:relative;overflow:hidden;background:var(--surface-primary)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--pattern-scatter);background-size:cover;background-position:left center;background-repeat:no-repeat;opacity:.55;mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 85%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 85%);pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero .eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 22px}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,calc(2rem + 4vw),5.5rem);line-height:1.02;letter-spacing:-.02em;margin:0 auto 18px;max-width:14ch}
.hero h1 em{font-style:italic;font-weight:300}
.hero .dek{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.1rem,calc(1rem + .4vw),1.375rem);line-height:1.45;color:var(--text-secondary);max-width:46ch;margin:0 auto}
.hero .rule{width:48px;height:1px;background:var(--accent-primary);margin:34px auto 0}

/* ── "The Latest" section ─────────────────────────────────────── */
.latest{padding:72px 32px 24px;max-width:1160px;margin:0 auto}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--border-light);padding-bottom:14px;margin-bottom:32px}
.section-head .h{font-family:var(--font-display);font-weight:400;font-size:26px;margin:0;letter-spacing:-.01em}
.section-head .m{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}

/* Featured (asymmetric, image left + copy right) */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--border-light)}
.feature .thumb{aspect-ratio:5/4;background:var(--surface-tertiary);position:relative;overflow:hidden;display:block}
.feature .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--ease-standard,250ms ease-out)}
.feature:hover .thumb img{transform:scale(1.02)}
.feature .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--accent-secondary);margin:0 0 18px}
.feature h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,calc(1.5rem + 1.8vw),3.25rem);line-height:1.05;letter-spacing:-.015em;margin:0 0 16px;max-width:18ch}
.feature h2 em{font-style:italic;font-weight:300}
.feature h2 a{color:inherit;text-decoration:none}
.feature h2 a:hover{text-decoration:underline;text-underline-offset:.12em}
.feature .sub{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.125rem,calc(1rem + .4vw),1.375rem);line-height:1.45;color:var(--text-secondary);margin:0 0 20px;max-width:36ch}
.feature .meta{font-family:var(--font-body);font-size:13px;letter-spacing:.03em;color:var(--text-secondary)}

/* 3-across recent grid */
.latest .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.latest .entry{display:flex;flex-direction:column;gap:12px}
.latest .entry .thumb{aspect-ratio:4/3;background:var(--surface-tertiary);overflow:hidden;display:block}
.latest .entry .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--ease-standard,250ms ease-out)}
.latest .entry:hover .thumb img{transform:scale(1.02)}
.latest .entry .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--accent-secondary);margin:8px 0 0}
.latest .entry h3{font-family:var(--font-display);font-weight:400;font-size:1.625rem;line-height:1.1;letter-spacing:-.01em;text-transform:none;margin:0}
.latest .entry h3 em{font-style:italic;font-weight:300}
.latest .entry h3 a{color:inherit;text-decoration:none}
.latest .entry h3 a:hover{text-decoration:underline;text-underline-offset:.12em}
.latest .entry .sub{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.0625rem;line-height:1.45;color:var(--text-secondary);margin:0;max-width:38ch}
.latest .entry .meta{font-family:var(--font-body);font-size:12px;letter-spacing:.03em;color:var(--text-secondary)}
.archive-link{margin:56px 0 0;text-align:center}
.archive-link a{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary);text-decoration:underline;text-underline-offset:.35em}

/* ── DC pull-quote ("From the lab") ───────────────────────────── */
.dc-pull{padding:96px 32px 48px;max-width:900px;margin:0 auto;position:relative}
.dc-pull::before{content:"";position:absolute;left:32px;top:96px;width:2px;height:calc(100% - 120px);background:var(--accent-primary)}
.dc-pull .eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-primary);margin:0 0 18px;padding-left:26px}
.dc-pull blockquote{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.75rem,calc(1.2rem + 2vw),2.75rem);line-height:1.2;color:var(--text-primary);margin:0;padding-left:26px;max-width:26ch}
.dc-pull cite{display:block;margin:18px 0 0;font-family:var(--font-body);font-style:normal;font-size:13px;letter-spacing:.03em;color:var(--text-secondary)}

/* ── Manifesto / About slot ──────────────────────────────────── */
.manifesto{padding:96px 32px;background-color:var(--surface-secondary);background-image:var(--pattern-stochastic);background-size:220px 220px;background-repeat:repeat;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);margin-top:96px}
.manifesto-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px}
.manifesto .eye{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 14px}
.manifesto h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.625rem,calc(1.3rem + 1.1vw),2.25rem);line-height:1.12;margin:0 0 14px;letter-spacing:-.01em;text-transform:none;max-width:20ch}
.manifesto p{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:1.125rem;line-height:1.5;color:var(--text-primary);margin:0 0 14px;max-width:36em}
.manifesto ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.manifesto li{font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--text-secondary);padding-left:18px;position:relative}
.manifesto li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--text-secondary)}

@media (max-width:820px){
  .hero{padding:72px 22px 56px}
  .latest{padding:48px 22px 16px}
  .feature{grid-template-columns:1fr;gap:20px;padding-bottom:36px;margin-bottom:36px}
  .latest .grid{grid-template-columns:1fr;gap:32px}
  .dc-pull{padding:64px 22px 24px}
  .dc-pull::before{left:22px;top:64px;height:calc(100% - 88px)}
  .manifesto-inner{grid-template-columns:1fr;gap:32px}
}