/* Landing pages. Extends page.css with the layout the prose shell does not have. */
.wrap.wide{ max-width:1100px; }

.hero-l{ display:grid; gap:48px; align-items:center; padding:64px 24px 24px;
  grid-template-columns:1fr; }
@media(min-width:900px){ .hero-l{ grid-template-columns:1.05fr .95fr; padding-top:80px; } }
.crumbs{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:20px; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }
.crumbs span[aria-hidden]{ margin:0 7px; opacity:.5; }
.hero-l h1{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,5.2vw,58px);
  line-height:1.06; letter-spacing:-.01em; margin:0 0 22px; }
.lede{ font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0 0 30px; max-width:52ch; }
.hero-art{ margin:0; }
.hero-art img{ width:100%; height:auto; display:block; background:#EFE6D4;
  box-shadow:0 30px 70px rgba(33,29,25,.22); }
.hero-art figcaption{ margin-top:13px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }

.cta{ display:inline-block; background:var(--ink); color:#F7F2E9; text-decoration:none;
  padding:17px 34px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .2s; }
.cta:hover{ background:var(--accent); }
.cta-note{ margin-top:14px; font-size:13px; color:var(--muted); }

.band{ padding:72px 24px; }
.h-rule{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:0 0 30px; padding:0 24px; }
.wrap > .h-rule{ padding:0; }
.blk{ margin-bottom:38px; max-width:70ch; }
.blk h2{ font-family:var(--serif); font-weight:500; font-size:27px; letter-spacing:0;
  text-transform:none; color:var(--ink); margin:0 0 11px; line-height:1.2; }
.blk p{ margin:0; }

.strip{ display:grid; gap:18px; padding:0 24px 24px;
  grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .strip{ grid-template-columns:repeat(4,1fr); } }
.strip figure{ margin:0; }
.strip img{ width:100%; height:auto; display:block; background:#EFE6D4;
  aspect-ratio:3/4; object-fit:cover; }

.faq{ max-width:70ch; }
.faq details{ border-top:1px solid var(--line); padding:18px 0; }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; font-weight:500; font-size:16px; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; float:right; color:var(--accent); font-size:20px;
  line-height:1; }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ margin:12px 0 0; max-width:64ch; }

.closing{ text-align:center; padding:84px 24px; }
.closing h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,42px);
  letter-spacing:-.01em; margin:0 0 14px; }
.closing p{ max-width:46ch; margin:0 auto 28px; }

.related{ display:grid; gap:14px; padding:0 24px 24px;
  grid-template-columns:1fr; }
@media(min-width:760px){ .related{ grid-template-columns:repeat(3,1fr); } }
.related a{ display:block; border:1px solid var(--line); background:var(--white);
  padding:20px; text-decoration:none; transition:border-color .2s, transform .2s; }
.related a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.related strong{ display:block; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
.related span{ font-family:var(--serif); font-size:20px; color:var(--ink);
  line-height:1.2; display:block; }

.foot{ border-top:1px solid var(--line); margin-top:40px; padding:34px 0; }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  align-items:center; font-size:13px; color:var(--muted); }
.foot nav a{ margin-left:18px; color:var(--muted); text-decoration:none; }
.foot nav a:first-child{ margin-left:0; }
.foot nav a:hover{ color:var(--accent); }
@media(max-width:560px){ .foot nav a{ margin:0 14px 0 0; } }