* { box-sizing:border-box }
:root { color-scheme:light; --paper:#faf8f0; --ink:#223c31; --body:#465348; --line:#c9cec0; --serif:Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif }
html { scroll-padding-top:1.5rem }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.55 var(--sans) }
.wrap { width:min(1200px,91%); margin-inline:auto }
h1,h2,h3,p,figure,blockquote { margin:0 }
h1,h2,h3,blockquote,.subhead,.brand { font-family:var(--serif); font-weight:400 }
a { color:inherit; text-underline-offset:.22em }
a:focus-visible { outline:3px solid #b76129; outline-offset:4px }
.skip { position:absolute; z-index:1; left:1rem; top:-5rem; background:white; padding:.6rem }
.skip:focus { top:.4rem }
header .bar,footer .foot { display:flex; align-items:center; justify-content:space-between; gap:1rem }
header .bar { border-bottom:1px solid var(--line); min-height:82px }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-size:1.48rem; letter-spacing:-.055em; text-decoration:none; white-space:nowrap }
nav { display:flex; gap:clamp(.85rem,3vw,2.4rem); align-items:center }
nav a,.back { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:.9rem; font-weight:570 }
nav a:hover,nav a[aria-current],.back:hover { text-decoration:underline }
.hero,.intro { display:grid; align-items:center; grid-template-columns:1fr 1.12fr; gap:clamp(2.25rem,5.8vw,5.6rem) }
.hero { padding-block:clamp(3.2rem,6vw,6.4rem) }
.label,.number,figcaption,.status,cite { font-family:var(--sans); font-style:normal; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em }
.label { display:flex; align-items:center; gap:.65rem }
.rule { display:inline-block; width:29px; height:2px; background:#a5613b }
h1 { font-size:clamp(3.45rem,6.45vw,6.15rem); line-height:.99; letter-spacing:-.066em; margin:.95rem 0 1.3rem }
h1 em { color:#48674e; font-weight:normal }
.lead { font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.65; color:var(--body); max-width:44ch }
.button { background:var(--ink); color:var(--paper); border-radius:3px; display:inline-flex; gap:1.4rem; align-items:center; padding:.73rem 1.15rem; text-decoration:none; font-size:.9rem; font-weight:640; margin-top:1.55rem }
.button:hover { background:#385b45 }
.landscape img { width:100%; height:auto; display:block; border:1px solid #a9ab91 }
figcaption { margin-top:.55rem; color:#5d665b; font-size:.62rem; letter-spacing:.12em }
figcaption span { color:var(--ink) }
.guides,.how { border-top:1px solid var(--line); display:grid; grid-template-columns:.83fr 1.35fr; gap:clamp(1.5rem,5vw,5rem); padding-block:clamp(2.75rem,5.4vw,5rem) }
.section-head h2,.sample h2,.article h2 { font-size:clamp(2.35rem,3.8vw,3.5rem); letter-spacing:-.055em; line-height:1.07; margin:.7rem 0 }
.guide { display:grid; grid-template-columns:2ch auto 1fr auto; gap:clamp(.65rem,1.5vw,1.2rem); align-items:center; padding:1.25rem 0; border-bottom:1px solid var(--line); text-decoration:none }
.guide:first-child { padding-top:0 }
.guide h3,.how h3 { font-size:clamp(1.4rem,2.15vw,1.95rem); letter-spacing:-.04em; line-height:1.15 }
.guide p,.how p,.sample>p:not(.label),.article p:not(.label) { color:var(--body) }
.guide p { margin-top:.22rem; font-size:.94rem }
.guide img,.sample img { border-radius:20%; display:block }
.number { color:#646e62; font-size:.65rem }
.arrow { font-size:1.4rem; transition:transform .16s }
.guide:hover h3 { text-decoration:underline; text-underline-offset:.15em }
.guide:hover .arrow { transform:translate(2px,-2px) }
.faith { background:#233e34; color:#faf5df }
.verse { padding-block:clamp(2.8rem,5vw,4.7rem); text-align:center }
.verse .label { justify-content:center; color:#dfc692 }
blockquote { font-size:clamp(1.65rem,3.1vw,2.75rem); line-height:1.22; max-width:36ch; margin:.95rem auto; letter-spacing:-.025em }
cite { font-size:.62rem }
footer { border-top:1px solid var(--line) }
.foot { padding-block:1.35rem }
footer .brand { font-size:1.15rem }
footer .brand img { width:27px; height:27px }
.back { margin-top:1.25rem; color:var(--body); font-size:.82rem }
.intro { grid-template-columns:1.2fr .87fr; padding:2.2rem 0 clamp(3rem,5.5vw,5.5rem) }
.intro h1,.article h1 { font-size:clamp(3.15rem,6vw,5.4rem) }
.subhead { font-size:clamp(1.55rem,2.4vw,2.25rem); line-height:1.16; letter-spacing:-.035em; max-width:26ch; margin-bottom:.85rem }
.status { display:flex; align-items:center; gap:.5rem; margin-top:1.4rem; font-size:.67rem }
.status span { width:7px; height:7px; border-radius:50%; background:#62774d }
.sample { --tint:#ecebdc; background:var(--tint); padding:clamp(1.5rem,3.1vw,3rem); border:1px solid color-mix(in srgb,var(--ink) 16%,var(--tint)); border-radius:2px }
.motherhood .sample { --tint:#f3e6e7 }
.marriage .sample { --tint:#eee8f1 }
.sample-top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:1.35rem; margin-bottom:1.25rem; border-bottom:1px solid #79796c65 }
.sample-top .label { text-align:right; font-size:.63rem }
.sample h2 { font-size:clamp(2rem,3.2vw,3rem) }
.how ol { margin:0; padding-left:1.75rem }
.how li { padding:0 0 1.3rem .65rem; margin:0 0 1.3rem; border-bottom:1px solid var(--line) }
.how li:last-child { margin-bottom:0 }
.how li::marker { font:italic 1rem var(--serif) }
.how p { margin-top:.5rem }
.article { max-width:48rem; padding-block:clamp(3rem,7vw,6.5rem) }
.article h2 { font-size:1.75rem; margin:2rem 0 .6rem }
.article p { margin:.55rem 0; max-width:66ch }
@media(max-width:760px) {
 .hero,.intro,.guides,.how { grid-template-columns:1fr }
 .hero { gap:1.75rem; padding-block:2.5rem }
 .hero h1 { font-size:clamp(3.4rem,11.8vw,5.4rem) }
 .landscape { max-width:38rem }
 .guides,.how { gap:1.25rem }
 .intro { gap:1.75rem; padding-top:1.4rem }
 .intro h1 { margin-bottom:.8rem }
}
@media(max-width:540px) {
 header .bar { align-items:flex-start; flex-direction:column; gap:0; padding-top:.75rem }
 header nav { width:100%; justify-content:space-between; gap:.35rem }
 .guide { grid-template-columns:auto 1fr auto }
 .guide img { width:54px; height:54px }
 .guide .number { display:none }
 .sample-top img { width:62px; height:62px }
 .foot .brand img { display:none }
}
@media(prefers-reduced-motion:reduce) { .arrow { transition:none } }