/* ==========================================================================
   AMERICAN LEAF - homepage only

   The landing page keeps its own section rhythm and the inquiry dialog.
   Everything shared - tokens, type, buttons, header, footer, age gate, form
   fields - comes from site.css and is deliberately not repeated here.

   Scoped under .home so a bare `section` rule cannot reach the header,
   footer or any internal page.
   ========================================================================== */

.home main section{
  padding:clamp(62px,8vw,88px) var(--pad);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.home .wrap{max-width:1100px;margin-inline:auto}

.home .hero{
  min-height:600px;
  display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 32%,#20201c 0,#11110f 38%,var(--canvas) 75%);
}
.home .seal{width:200px;height:200px;margin:0 auto 38px}
.home .hero h1{margin:18px 0}
.home .hero p{margin-inline:auto}

.home p{max-width:760px;font-size:17px;line-height:1.8}

.home .statement{
  font-family:var(--serif);
  color:var(--gold);
  font-size:clamp(24px,4vw,38px);
  line-height:1.35;
  margin-top:30px;
}

.home .light{background:#eeeae0;color:#161616}
.home .light p{color:#4d4a44}
.home .light strong{color:#161616}

.home .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}

.home .initiative{
  display:grid;grid-template-columns:1fr 2fr;gap:40px;
  padding:36px 0;
  border-top:1px solid var(--gold-hair);
  border-bottom:1px solid var(--gold-hair);
}
.home .initiative h3{font-size:28px;color:var(--gold);margin:0}

.home .center{text-align:center}
.home .center p{margin-inline:auto}

.home .mission{background:var(--gold);color:#111;text-align:center}
.home .mission .kicker,.home .mission p{color:#2b261e}
.home .mission .statement{color:#111}

.home h1,.home h2{font-family:var(--serif);font-weight:400}
.home h2{font-size:clamp(32px,5vw,52px);line-height:1.12;margin:12px 0 24px}

@media(max-width:720px){
  .home .hero{min-height:520px}
  .home .split,.home .initiative{grid-template-columns:1fr;gap:25px}
}

/* ------------------------------------------------------- inquiry dialog -- */

dialog.modal{
  border:0;padding:0;background:transparent;color:var(--ivory);
  width:100%;max-width:min(690px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);overflow:auto;overscroll-behavior:contain;
}
dialog.modal::backdrop{background:rgba(5,5,5,.84)}

.modal-panel{
  position:relative;
  background:#111110;border:1px solid var(--gold-hair);
  padding:46px max(28px,6%) 40px;text-align:left;
}
.modal-close{
  position:absolute;top:12px;right:14px;
  background:none;border:0;color:#8a857c;
  font-size:26px;line-height:1;padding:6px 11px;cursor:pointer;
}
.modal-close:hover,.modal-close:focus-visible{color:var(--gold)}
.modal-panel h2{font-size:clamp(30px,5vw,40px);margin:10px 0 12px}
.modal-panel .lede{font-size:15px;line-height:1.7;margin:0 0 28px;max-width:none}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}

.modal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:28px}
.modal-actions .alt{font-size:13px;color:#8a857c}

/* Every link inside the panel, not just the ones present at page load:
   the confirmation state injects a mailto: fallback and would otherwise
   inherit the browser's default blue on a near-black background. */
.modal-panel a{color:var(--gold);text-decoration-color:rgba(200,162,90,.45);text-underline-offset:2px}
.modal-panel a:hover,.modal-panel a:focus-visible{color:#dcb974;text-decoration-color:#dcb974}

.sent{text-align:center;padding:20px 0 8px}
.sent .mark{margin-inline:auto}
.modal-panel .sent .lede{max-width:440px;margin-inline:auto}

@media(max-width:620px){
  .field-grid{grid-template-columns:1fr}
  .modal-panel{padding:40px 22px 34px}
}
@media(prefers-reduced-motion:no-preference){
  dialog.modal[open]{animation:rise .26s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}}
}