/* heads.css — five headers for the keepsake section, each an invitation to
   commission. The pairs grid beneath is untouched. */
.kh{ margin-bottom:clamp(22px,3vw,40px) }
.kh .pr-switch{ justify-content:center; margin-top:18px }
.kh .btn{ font-size:1rem }

/* 1 · Invitation, centred: one line, one button */
.kh--1{ text-align:center; padding:clamp(8px,1.4vw,18px) 0 }
.kh--1 h2{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96; font-size:clamp(2rem,4.4vw,3.6rem); letter-spacing:-.01em; margin:0 0 .35em; max-width:none }
.kh--1 .lede{ margin:0 auto 22px; max-width:52ch }
.kh--1 .kh__note{ margin:12px auto 0; max-width:none; font-size:var(--fs-sm); color:var(--ink-faint) }

/* 2 · The question, split: a big ask on the left, the answer on the right */
.kh--2{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,3vw,48px); align-items:center; padding-bottom:clamp(18px,2.4vw,30px); border-bottom:1.5px dashed var(--hairline) }
.kh--2 h2{ font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.02; letter-spacing:-.02em; margin:0; max-width:16ch }
.kh--2 .kh__side p{ margin:0 0 16px; max-width:40ch }
.kh--2 .kh__kicker{ grid-column:1/-1; margin:0; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--ink-faint) }
@media (max-width:760px){ .kh--2{ grid-template-columns:1fr } }

/* 3 · A signed note from Paulina */
.kh--3{ display:flex; justify-content:center }
.kh__note-card{ position:relative; max-width:640px; padding:clamp(22px,3vw,40px) clamp(22px,3vw,44px) clamp(20px,2.6vw,34px); background:#fffdf9; border:1.5px solid rgba(51,43,66,.3); border-radius:6px; box-shadow:0 14px 26px -16px rgba(51,43,66,.45); transform:rotate(-.6deg) }
.kh__note-card p{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 80,'opsz' 20; font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.5; margin:0 0 14px; max-width:none; color:var(--ink) }
.kh__sig{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.kh__sig img{ height:46px; width:auto }
.kh__tape{ position:absolute; top:-12px; left:50%; width:110px; height:26px; transform:translateX(-50%) rotate(-2deg); background:var(--c-peach); opacity:.85; border:1.5px solid rgba(51,43,66,.3) }

/* 4 · Three steps, then a button */
.kh--4 h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); margin:0 0 18px; max-width:none; text-align:center }
.kh__steps{ list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,24px) }
.kh__steps li{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; background:#fff; border:2.5px solid var(--ink); border-radius:16px; box-shadow:var(--sh-chip) }
.kh__steps .n{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--hue,var(--accent)); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--font-display); font-weight:600 }
.kh__steps b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1rem; margin-bottom:2px }
.kh__steps span{ font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.4 }
.kh--4 .kh__cta{ text-align:center; max-width:none; margin:0 }
@media (max-width:760px){ .kh__steps{ grid-template-columns:1fr } }

/* 5 · Three words, big, and two buttons */
.kh--5{ text-align:center }
.kh--5 h2{ font-size:clamp(2.4rem,6vw,5rem); line-height:1; letter-spacing:-.03em; margin:0 0 .25em; max-width:none; display:inline-block; padding-bottom:10px;
  background:linear-gradient(90deg, var(--c-coral), var(--c-peach), var(--c-butter), var(--c-lime), var(--c-mint), var(--c-aqua), var(--c-sky), var(--c-peri), var(--c-lilac), var(--c-bubble)) left bottom / 100% 8px no-repeat }
.kh--5 .lede{ margin:0 auto 20px; max-width:48ch }
.kh__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* ---- series 2: option 5's layout with option 1's line and serif ---- */
.kh--s2{ text-align:center }
.kh--s2 h2{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 96; font-size:clamp(2.2rem,5.2vw,4.4rem); line-height:1.04; letter-spacing:-.01em; margin:0 0 .3em; max-width:none; display:inline-block }
.kh--s2 .lede{ margin:0 auto 20px; max-width:48ch }
.kh__ribbon{ display:block; height:8px; border:0; border-radius:var(--r-pill); margin:0 auto 18px; box-shadow:inset 0 0 0 1px var(--ink) }
/* 6 · the ribbon under the line, as in option 5 */
.kh--6 h2{ padding-bottom:10px; background:linear-gradient(90deg, var(--c-coral), var(--c-peach), var(--c-butter), var(--c-lime), var(--c-mint), var(--c-aqua), var(--c-sky), var(--c-peri), var(--c-lilac), var(--c-bubble)) left bottom / 100% 8px no-repeat }
/* 7 · a thin ink rule under the line instead, like the shop links */
.kh--7 h2{ padding-bottom:8px; border-bottom:1.5px solid var(--ink) }
/* 8 · a short ribbon above the line as an accent */
.kh--8 .kh__ribbon{ width:160px; margin-bottom:16px }
/* 9 · bigger, more air, one button */
.kh--9 h2{ font-size:clamp(2.6rem,6vw,5.2rem); margin-bottom:.35em; padding-bottom:12px; background:linear-gradient(90deg, var(--c-coral), var(--c-peach), var(--c-butter), var(--c-lime), var(--c-mint), var(--c-aqua), var(--c-sky), var(--c-peri), var(--c-lilac), var(--c-bubble)) left bottom / 100% 10px no-repeat }
.kh--9 .lede{ font-size:var(--fs-md); margin-bottom:26px }
/* 10 · a bloom either side, the ribbon below, one button and a quiet link */
.kh--10 .kh__line{ display:inline-flex; align-items:center; gap:clamp(10px,1.6vw,22px) }
.kh--10 h2{ padding-bottom:10px; background:linear-gradient(90deg, var(--c-coral), var(--c-peach), var(--c-butter), var(--c-lime), var(--c-mint), var(--c-aqua), var(--c-sky), var(--c-peri), var(--c-lilac), var(--c-bubble)) left bottom / 100% 8px no-repeat }
.kh--10 .kh__more{ display:block; margin:12px 0 0; font-size:var(--fs-sm); color:var(--ink-soft) }