/* page-content.css — About, Guide and Book: chapters of prose, each in its own field. */

.opener .display { max-width: 13ch; }
.story, .vows, .tied, .page-close, .slot, .reach, .steps, .write, .guide { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* ---------- about ---------- */
.about-open { padding-bottom: 0; overflow: hidden; }
.about-open .opener__row { align-items: end; }
.about-open .opener__text { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.about-open__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.about-open__pic { grid-column: 8 / span 5; margin: 0; }
.about-open__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.story__grid, .tied__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.tied__grid h2 { grid-column: 1 / span 5; align-self: start; }
.story__h { grid-column: 1 / -1; max-width: 18ch; }
.story__pic { grid-column: 1 / span 5; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r-lg); }
.story__text { grid-column: 1 / span 8; }
.tied__text { grid-column: 7 / span 6; }
.story__text p + p, .tied__text p + p { margin-top: 1.25rem; }
.vows__list { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.vow { background: #fff; border-radius: var(--r-md); padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: 0 1px 0 rgba(12, 31, 24, 0.05); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0.75rem; }
.vow__h { grid-column: 1 / span 6; font-size: var(--step-figure); line-height: 1.05; letter-spacing: -0.025em; }
.vow p { grid-column: 7 / span 6; align-self: end; }
.vow:nth-child(2) .vow__h { grid-column: 2 / span 6; }
.vow:nth-child(3) .vow__h { grid-column: 3 / span 5; }
.band-pic { margin: clamp(3rem, 6vw, 5rem) var(--margin); height: min(70svh, 46rem); display: grid; overflow: hidden; border-radius: var(--r-lg); }
.band-pic img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.band-pic__cap { grid-area: 1 / 1; align-self: end; justify-self: start; margin: 0 1.25rem 1.25rem; padding: 0.7rem 1rem; background: #fff; color: var(--ink); border-radius: var(--r-sm); font-size: var(--step-small); font-weight: 600; max-width: 52ch; box-shadow: var(--shadow-card); }
.page-close__in { display: grid; gap: 1.5rem; justify-items: start; }
.page-close h2 { max-width: 14ch; }
@media (max-width: 60rem) {
  .about-open__pic { grid-column: 1 / -1; max-width: 28rem; }
  .story__h, .story__text, .story__pic, .tied__grid h2, .tied__text, .vow__h, .vow p, .vow:nth-child(n) .vow__h { grid-column: 1 / -1; }
}

/* ---------- guide ---------- */
.guide__by { margin-top: 1.5rem; font-size: var(--step-small); max-width: 46ch; }
.guide__act { display: grid; gap: 1rem; justify-items: start; }
.guide__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.guide__toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; font-size: var(--step-small); }
.guide__toc-h { font-weight: 600; }
.guide__toc ol { margin: 0.75rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.guide__toc a { text-decoration: underline 1.5px transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
.guide__toc a:hover, .guide__toc a[aria-current] { text-decoration-color: currentColor; font-weight: 600; }
.guide__body { grid-column: 5 / span 8; }
.guide__fig { margin: 2.5rem 0 0; }
.guide__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
.guide__fig figcaption { margin-top: 0.6rem; font-size: var(--step-small); }
.guide__open-pic { aspect-ratio: 4 / 3; margin: 0; }
.guide__body > p, .guide__body > .guide__ol { max-width: 64ch; }
.guide__body > * + * { margin-top: 1.1rem; }
.guide__first { padding: 1.25rem 1.5rem; background: var(--sage); border-radius: var(--r-md); max-width: none !important; }
.guide__h { font-size: var(--step-figure); line-height: 1.1; letter-spacing: -0.025em; margin-top: clamp(3rem, 6vw, 4.5rem) !important; padding-top: 0; scroll-margin-top: calc(var(--head-h) + 1.5rem); }
.guide__body h3 { margin-top: 2rem !important; }
.guide__sum { font-variant-numeric: tabular-nums; font-weight: 700; padding: 0.85rem 1.1rem; background: var(--paper-2); border-radius: var(--r-sm); }
.guide__table { overflow-x: auto; }
.guide__table th, .guide__table td { padding-right: 0.75rem; }
.guide__ol { padding-left: 1.5rem; display: grid; gap: 0.9rem; }
.guide__sign { margin-top: 3rem !important; padding-top: 1.25rem; border-top: 2px solid var(--ink); font-size: var(--step-small); }
@media (max-width: 60rem) {
  .guide__toc { position: static; grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .guide__body { grid-column: 1 / -1; }
}
@media print {
  .opener, .guide__toc { display: none !important; }
  .guide__body { grid-column: 1 / -1; }
}

/* ---------- book ---------- */
.facts { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
.book-pic { aspect-ratio: 4 / 3; margin: 0; }
.reach__pic { margin-top: 2.5rem; max-width: 22rem; }
.reach__pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.facts b { display: block; font-family: var(--font-display); font-size: var(--step-figure); font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.slot__grid, .reach__grid, .steps__grid, .write__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.slot__text { grid-column: 1 / span 5; }
.slot__text .lead, .slot__text p + p { margin-top: 1.25rem; }
.slot__cal { grid-column: 7 / span 6; min-height: 22rem; display: grid; place-content: center; justify-items: center; gap: 1rem; background: var(--sage); padding: 2rem; border-radius: var(--r-lg); overflow: hidden; }
.slot__cal:has(iframe) { display: block; padding: 0; background: #fff; }
.slot__frame { width: 100%; height: 44rem; border: 0; display: block; }
.reach__grid > div { grid-column: 1 / span 5; }
.reach__lead { margin-top: 1.25rem; }
.carry { margin-top: 2rem; padding: 1.25rem 1.5rem; background: #fff; border-radius: var(--r-md); color: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--paper); display: grid; gap: 0.6rem; justify-items: start; max-width: 26rem; }
.carry__h { font-weight: 600; }
.carry__fig { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.2; }
.carry__fig .amt { background: var(--brass); padding: 0 0.3em; border-radius: 6px; }
.reach__list { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.reach__list a { display: grid; gap: 0.2rem; padding: 1.1rem 1.4rem; text-decoration: none; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-md); transition: background-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .reach__list a:hover { background: rgba(255, 255, 255, 0.16); transform: translateX(4px); } }
.reach__how { order: 2; }
.reach__what { font-family: var(--font-display); font-size: var(--step-figure); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; text-decoration: underline 2px transparent; text-underline-offset: 0.15em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .reach__list a:hover .reach__what { text-decoration-color: currentColor; } }
.steps__h { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 2rem); }
.steps__list { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps__pic { margin: 2rem 0 0; aspect-ratio: 4 / 3; }
.step-row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--gutter); background: #fff; border-radius: var(--r-md); padding: 1.25rem 1.5rem; }
.step-row__when { font-weight: 800; padding-top: 0.35rem; color: var(--evergreen); }
.step-row p { margin-top: 0.5rem; }
.write__grid > div { grid-column: 1 / span 5; }
.write__grid .lead, .write__grid .note { margin-top: 1.25rem; }
.write__form { grid-column: 7 / span 6; display: grid; gap: 0.5rem; background: #fff; border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--shadow-card); }
.write__form .fc-mini:not(:first-child) { margin-top: 0.75rem; }
.write__form textarea { resize: vertical; }
.write__form .btn { justify-self: start; }
.fc-warn { min-height: 1.4em; font-weight: 600; color: #8A3B12; }
@media (max-width: 60rem) {
  .slot__text, .slot__cal, .reach__grid > div, .reach__list, .steps__h, .steps__list, .write__grid > div, .write__form { grid-column: 1 / -1; }
  .steps__h { position: static; }
  .step-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* about: the closing invitation sits in the middle when it has no picture beside it */
.page-close .split-close:not(:has(.split-close__pic)) .split-close__text { grid-column: 3 / span 8; justify-items: center; text-align: center; }
.page-close .split-close:not(:has(.split-close__pic)) .split-close__text .lead { margin-inline: auto; }
@media (max-width: 60rem) { .page-close .split-close:not(:has(.split-close__pic)) .split-close__text { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .guide__h { font-size: var(--step-lead); } }

/* book: the person you will be talking to, beside the promise */
.book-portrait { margin: 0; align-self: end; }
.book-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
@media (max-width: 60rem) { .book-portrait { max-width: 22rem; } }