/* ---------- VerseCraft section rhythm ----------
   A small set of section shapes that deliberately do NOT look like each other.

   The landing pages used to run one shape six times in a row — centred head,
   then a row of white cards — which meant nothing on any page was ever
   emphasised. These blocks give a page somewhere to change pace:

     .statement    a full-width band, type only, no grid
     .include-*    an asymmetric photo + checklist, no card chrome
     .flow-*       numbered steps as a dashed timeline

   Kept out of site.css on purpose: that file is shared with concurrent work,
   and this is an additive layer rather than a change to the base system. Load
   it after site.css on any page that uses these shapes. */

/* 1. Statement band — a full-width change of pace, type only, no cards. */
.statement{background:var(--wine-deep);color:#EAD3D9;text-align:center}
.statement .container{max-width:880px}
.statement .eyebrow{color:var(--gold-soft)}
.statement h2{
  color:#fff;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.18;
  margin-bottom:22px;letter-spacing:-.01em;
}
.statement p{font-size:1.12rem;line-height:1.75;color:#EAD3D9;max-width:36em;margin:0 auto}
.statement .hand{
  display:block;font-family:var(--hand);font-size:1.7rem;
  color:var(--gold-soft);margin-top:26px;
}

/* 2. Photo + checklist — asymmetric, and the list carries no card chrome so it
      reads as editorial rather than as another tile. */
.include{background:var(--ivory)}
/* Stretch rather than a fixed ratio: the frame takes its height from the copy
   beside it, so the two columns square off instead of leaving a ragged gap. */
.include-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:stretch}
.include-photo{
  position:relative;overflow:hidden;margin:0;min-height:460px;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  border:1px solid rgba(122,37,64,.08);background:var(--white);
}
.include-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 42%;
}
.include-list{list-style:none;margin-top:26px}
.include-list li{
  display:flex;gap:15px;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid var(--rose-deep);
}
.include-list li:last-child{border-bottom:none}
.include-list li::before{
  content:"♪";color:var(--gold);font-weight:800;flex:none;
  font-size:1.1rem;line-height:1.5;
}
.include-list b{display:block;color:var(--ink);font-weight:800;margin-bottom:2px}
.include-list span{color:var(--ink-soft);font-size:.98rem}
@media(max-width:900px){
  .include-grid{grid-template-columns:1fr;gap:36px}
  .include-photo{width:100%;aspect-ratio:4/3;min-height:0;max-height:min(52vh,420px)}
}

/* 3. Steps as a dashed timeline rather than three more white boxes. The dashes
      echo the torn-note divider in the hero card. */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.flow-step{text-align:center;position:relative}
.flow-num{
  width:66px;height:66px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.75rem;
  color:var(--wine-deep);background:var(--gold-soft);
  box-shadow:0 10px 22px rgba(217,142,43,.30);
  position:relative;z-index:1;
}
.flow-step:not(:last-child)::after{
  content:"";position:absolute;top:33px;
  left:calc(50% + 48px);right:calc(-50% + 48px);height:2px;
  background:repeating-linear-gradient(90deg,var(--rose-deep) 0 7px,transparent 7px 14px);
}
.flow-step h3{margin-bottom:9px}
.flow-step p{color:var(--ink-soft);font-size:.98rem;max-width:30ch;margin:0 auto}
@media(max-width:820px){
  .flow{grid-template-columns:1fr;gap:32px;max-width:420px;margin:0 auto}
  .flow-step:not(:last-child)::after{display:none}
}