/* ============================================================
   Tempered Press — landing-page kit (layout layer)
   2026-09-15 · consumed by every page under pages.corsoalexander.co
   This file arranges house primitives into the lead-gen shape.
   It introduces NO colours and NO typefaces — those are brand.css.
   A title's accent arrives as --accent on <body>, set per page
   from books/A###/brand.json. That is the only local styling a
   landing page is permitted (house/00_BrandSystem_…_2026_09_15.md).
   ============================================================ */

:root{ --accent:var(--blue); --accent-ink:var(--blue-ink); }

.land{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* ---- masthead: quiet, press-level ---- */
.land-top{padding-block:22px 8px;text-align:center}
.land-top .rule{width:44px;height:1px;background:var(--ink);opacity:.5;margin:8px auto 0}

/* ---- hero: cover beside the promise ---- */
.land-hero{
  display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:center;
  padding-block:44px 52px;
}
.land-hero .cover{
  width:280px;
  box-shadow:0 18px 40px -22px rgba(32,28,23,.55),0 2px 6px -3px rgba(32,28,23,.4);
}
.land-hero .cover img{width:100%}
.land-hero h1{
  font-weight:400;font-style:italic;
  font-size:clamp(34px,5vw,54px);line-height:1.06;
  letter-spacing:-.005em;margin:0 0 10px;text-wrap:balance;
}
.land-hero .sub{font-size:clamp(19px,2.2vw,23px);color:var(--muted);margin:0 0 14px;max-width:34ch}
.land-hero .byline{font-size:20px;font-style:italic;color:var(--muted);margin:0 0 22px}
.land-hero .opener{font-size:19px;max-width:52ch;margin:0}

/* ---- the moments: proof by recognition, not by claims ---- */
.moments{padding-block:52px;border-top:1px solid var(--rule)}
.moments h2{font-weight:400;font-size:clamp(26px,3.6vw,36px);margin:0 0 26px;text-align:center}
.moments ul{list-style:none;margin:0 auto;padding:0;max-width:620px}
.moments li{
  padding:18px 0 18px 26px;border-bottom:1px solid var(--rule);
  position:relative;font-size:19px;
}
.moments li:last-child{border-bottom:0}
.moments li::before{
  content:"";position:absolute;left:0;top:27px;width:12px;height:1px;
  background:var(--accent);
}
.moments .bridge{
  text-align:center;color:var(--muted);font-size:18px;
  max-width:52ch;margin:22px auto 0;
}

/* ---- what the book gives: plain, no hype ---- */
.gives{padding-block:52px;border-top:1px solid var(--rule)}
.gives .inner{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;max-width:840px;margin:0 auto}
.gives h3{font-weight:500;font-size:20px;margin:0 0 4px}
.gives p{font-size:17px;color:var(--muted);margin:0;max-width:44ch}

/* ---- capture ---- */
.capture{padding-block:56px 68px;border-top:1px solid var(--rule);text-align:center}
.capture h2{font-weight:400;font-style:italic;font-size:clamp(28px,4vw,40px);margin:0 0 10px}
.capture .lede{color:var(--muted);font-size:19px;margin:0 auto 26px;max-width:46ch}
.capture .btn{background:var(--accent);border-color:var(--accent)}
.capture .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

/* ---- footer ---- */
.land-foot{border-top:1px solid var(--rule);padding-block:24px;text-align:center}
.land-foot p{
  font-family:"Cinzel",serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px;
}
.land-foot a{color:var(--muted);text-decoration:none}
.land-foot a:hover{color:var(--ink)}

/* ---- responsive ---- */
@media (max-width:720px){
  .land-hero{grid-template-columns:1fr;gap:30px;justify-items:center;text-align:center;padding-block:30px 40px}
  .land-hero .cover{width:220px}
  .land-hero .opener,.land-hero .sub{margin-inline:auto}
  .gives .inner{grid-template-columns:1fr}
  .moments li{padding-left:0}
  .moments li::before{display:none}
}