/* Grace in this Valley: matches the old Maisey site (measured from graceinthisvalley.com, Oct 2026).
   Old body font Proxima Nova is a licensed Adobe font, so Mulish (free, nearly identical) stands in. */
@font-face { font-family: 'Antro Vectra Bolder'; src: url('/fonts/gtv-antro-vectra-bolder.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Haute Couture'; src: url('/fonts/gtv-haute-couture.otf') format('opentype'); font-display: swap; }

:root {
  --slate: #4b5c63;
  --slate-rgb: 75, 92, 99;
  --mist: #f0f2f2;
  --blush: #e9e3e3;
  --stone: #deddda;      /* Join section */
  --band: #919aa1;       /* blue-gray bands and footer */
  --gray: #939393;       /* announcement bar */
  --btn: #463939;        /* old button text/border */
  --script: 'Antro Vectra Bolder', 'Sacramento', cursive;
  --signature: 'Haute Couture', 'Sacramento', cursive;
  --body: 'Mulish', 'Proxima Nova', Helvetica, Arial, sans-serif;
  --page: 118rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--slate); font-family: var(--body); font-weight: 300; font-size: 1.65rem; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; margin: 0 0 1.2rem; }
p { margin: 0 0 1.4rem; }
.page-width { max-width: var(--page); margin: 0 auto; padding: 0 2rem; }
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.sig { font-family: var(--signature); font-size: 2.6rem; line-height: 1; font-weight: 400; }
.signature { font-family: var(--signature); font-size: 3rem; line-height: 1.28; margin-top: 1rem; }
.eyebrow { font-size: 1.5rem; letter-spacing: .05rem; text-transform: uppercase; line-height: 1.4; margin: 0 0 1.6rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }

/* Buttons: thin dark outline, small spaced capitals */
.btn { display: inline-block; padding: 1.15rem 3rem; border: 1px solid var(--btn); color: var(--btn); background: transparent; text-decoration: none; font-family: var(--body); font-size: 1.3rem; font-weight: 400; letter-spacing: .2rem; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--btn); color: #fff; }
.btn--light { border-color: #fff; color: #fff; }
.btn--light:hover, .btn--light:focus-visible { background: #fff; color: var(--slate); }

/* Announcement bar */
.bar { background: var(--gray); color: #fff; text-align: center; font-size: 1.32rem; padding: .75rem 1.6rem; }
.bar a { color: #fff; text-decoration: none; }
.bar a:hover { text-decoration: underline; }

/* Header: gray top row, logo on white, menu that stays at the top while scrolling */
.header__top { background: var(--mist); }
.header__top .page-width { display: flex; align-items: center; justify-content: space-between; min-height: 5.6rem; }
.social { display: flex; gap: 1.6rem; }
.social a { display: inline-flex; width: 2rem; height: 2rem; color: var(--slate); }
.social svg { width: 100%; height: 100%; fill: currentColor; }
/* Top row in three equal columns like the old site: social icons, cart (right side of the middle), store search */
.header__top .page-width { display: grid; grid-template-columns: repeat(3, 1fr); }
.header__cart { justify-self: end; margin-right: 3.3rem; display: inline-flex; color: #666; }
.header__cart svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.header__search { position: relative; margin-left: 1.8rem; }
.header__search svg { position: absolute; left: 1.1rem; top: 50%; width: 1.8rem; height: 1.8rem; transform: translateY(-50%); fill: #666; pointer-events: none; }
.header__search input[type=search] { width: 100%; height: 4.6rem; border: 1px solid #666; border-radius: 1.2rem; background: transparent; padding: 0 1.2rem 0 4rem; font: inherit; font-size: 1.4rem; color: #666; }
.header__search input::placeholder { color: #666; opacity: 1; }
.header__brand { background: #fff; }
.header__logo { display: block; margin: 0 auto; padding: 2.6rem 0 2.2rem; width: min(32rem, 74vw); }
.nav { position: sticky; top: 0; z-index: 20; background: #fff; }
.nav .page-width { border-top: 1px solid rgba(var(--slate-rgb), .5); }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; flex-wrap: wrap; }
.nav__item { position: relative; }
.nav__link { display: block; padding: 1.7rem 2.6rem; text-decoration: none; font-size: 1.45rem; letter-spacing: .14rem; text-transform: uppercase; background: none; border: 0; font-family: inherit; font-weight: 300; color: inherit; cursor: pointer; }
.nav__link:hover, .nav__link[aria-current="page"] { background: #eceeee; }
.nav__caret { display: inline-block; width: .7rem; height: .7rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.3rem) rotate(45deg); margin-left: .8rem; }
.nav__menu { display: none; position: absolute; left: 0; top: 100%; min-width: 24rem; background: #fff; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .08); list-style: none; margin: 0; padding: .6rem 0; z-index: 30; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { display: block; }
.nav__menu a { display: block; padding: 1rem 2rem; text-decoration: none; font-size: 1.35rem; letter-spacing: .1rem; text-transform: uppercase; }
.nav__menu a:hover { background: var(--mist); }
@media (max-width: 749px) {
  .nav__link { padding: 1.2rem .9rem; font-size: 1.2rem; letter-spacing: .06rem; }
  .nav__item:last-child .nav__menu { left: auto; right: 0; }
}

/* Sections */
.section { padding: 8rem 0; }
.section--mist { background: var(--mist); }
.section--blush { background: var(--blush); }
.title { font-family: var(--script); font-weight: 400; font-size: 5.4rem; line-height: 1.1; margin: 0 0 1.2rem; }
@media (min-width: 750px) { .title { font-size: 6rem; } }
.lead { max-width: 64rem; margin: 0 auto 4rem; }
.split { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 750px) { .split { grid-template-columns: 1fr 1fr; gap: 6rem; } .split--flip > :first-child { order: 2; } }
.split img { width: 100%; object-fit: cover; }
.cols { display: grid; gap: 2rem 4rem; }
@media (min-width: 750px) { .cols { grid-template-columns: 2fr 3fr; } }

/* Full-width photo band */
.photo-band { height: 40rem; background-size: cover; background-position: center; }

/* Home hero: tall portrait photo set in from the left, Welcome card overlapping on the right */
.hero { max-width: var(--page); margin: 5rem auto 6rem; padding: 0 2rem; position: relative; }
.hero__img { width: 100%; aspect-ratio: 680 / 870; height: auto; object-fit: cover; }
.hero__card { background: var(--blush); padding: 2.4rem 2.4rem 2.6rem; }
.hero__card :is(h1, h2) { font-family: var(--script); font-size: 4.8rem; margin: 0 0 1.4rem; }
.hero__card :is(h1, h2) .sig { font: inherit; }
.hero__card p { line-height: 1.32; margin-bottom: 1.6rem; }
.hero__card p:last-child { font-size: 2.8rem; margin: 0; }
@media (min-width: 990px) {
  .hero__img { width: 57.6%; }
  .hero__card { position: absolute; left: 51%; right: 2rem; top: 7.6rem; }
}

/* About / Blog / Store: one blush box with thin dividers */
.tiles { background: var(--blush); display: grid; padding: 4rem 2rem; }
@media (min-width: 750px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { text-align: center; padding: 2rem 3rem; }
@media (min-width: 750px) { .tile + .tile { border-left: 1px solid rgba(var(--slate-rgb), .5); } }
.tile h2 { font-family: var(--script); font-size: 5.6rem; margin: 0 0 .4rem; }
.tile p { max-width: 26rem; margin: 0 auto 2rem; min-height: 5rem; }

/* Blue-gray band with an overlapping photo (Shop Tallow Skincare / Shop Our Store) */
.band { background: var(--band); color: #fff; margin: 7rem 0; }
.band__inner { display: grid; gap: 3rem; align-items: center; }
.band__photo img { width: 100%; aspect-ratio: 330 / 440; object-fit: cover; }
.band h2 { font-family: var(--script); font-size: 5.4rem; color: #fff; margin: 0 0 1.6rem; text-align: center; }
.band p { color: #fff; }
.band__cta { text-align: center; }
@media (min-width: 750px) {
  .band__inner { grid-template-columns: 1fr 1.3fr 2.2fr; gap: 4rem; }
  .band__photo { margin: -4rem 0; }
  .band__text { padding: 4rem 2rem 4rem 0; }
}
@media (max-width: 749px) { .band__cta { order: 3; padding-bottom: 4rem; } .band__text { padding: 0 2rem; } }

/* Blog cards: blush date tab over a tall photo, short summary */
.cards { display: grid; gap: 4rem 3rem; }
@media (min-width: 750px) { .cards { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); gap: 3rem 2.4rem; } }
.card { text-decoration: none; display: flex; flex-direction: column; text-align: center; position: relative; padding-top: 2.2rem; }
.card__date { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--blush); padding: 1rem 2rem; font-size: 1.25rem; font-weight: 600; white-space: nowrap; z-index: 1; }
.card__img { aspect-ratio: 353 / 460; object-fit: cover; width: 100%; background: var(--mist); }
.cards--4 .card__img { aspect-ratio: 1 / 1.1; }
.card__title { font-size: 1.5rem; font-weight: 600; margin: 1.8rem 0 .6rem; text-transform: lowercase; }
.card__excerpt { font-size: 1.32rem; line-height: 1.45; margin: 0 auto; max-width: 30rem; display: -webkit-box; -webkit-line-clamp: 4; --lines: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cards--4 .card__excerpt { display: none; }
.card:hover .card__title { text-decoration: underline; }
.over-band { background-size: cover; background-position: center; padding: 7rem 0; }
.over-band .card { background: #fff; padding: 2.2rem 1.4rem 1.8rem; }
.over-band .card__date { top: 0; }
.more { text-align: center; margin-top: 3.6rem; }

/* Search + categories, with the mug photo */
.archive { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 750px) { .archive { grid-template-columns: 1fr 1fr; gap: 8rem; } }
.archive img { width: 100%; aspect-ratio: 450 / 415; object-fit: cover; }
.search { display: flex; align-items: center; border: 1px solid var(--slate); border-radius: 3rem; padding: 0 1.6rem; max-width: 40rem; margin-bottom: 3rem; background: #fff; }
.search input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 1.35rem; letter-spacing: .14rem; padding: 1.1rem 0; background: transparent; color: var(--slate); outline: none; }
.search input::placeholder { text-transform: uppercase; color: var(--slate); }
.search button { border: 0; background: none; cursor: pointer; padding: .4rem; color: var(--slate); }
.search svg { width: 1.6rem; height: 1.6rem; fill: currentColor; display: block; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 3rem; max-width: 40rem; }
.cat-grid .btn { padding: 1.1rem .6rem; text-align: center; font-size: 1.2rem; letter-spacing: .14rem; }
.search-results { margin-top: 5rem; }
.search-results[hidden], #browse[hidden] { display: none; }

/* Scripture / quote: white box with a big quote mark, over a soft photo */
.quote-band { background-size: cover; background-position: center; padding: 9rem 2rem; }
.quote-box { background: #fff; max-width: 60rem; margin: 0 auto; padding: 1rem 4rem 4rem; text-align: center; }
.quote-box::before { content: '\201C'; display: block; font-family: Georgia, serif; font-weight: 700; font-size: 9rem; line-height: .8; color: var(--slate); margin: 0 0 .6rem; padding-top: 2rem; }
.quote-box p { font-size: 1.9rem; line-height: 1.6; margin: 0; }
.quote-box .big { font-size: 2.6rem; line-height: 1.35; }
.quote-box cite { display: block; margin-top: 2rem; font-style: normal; font-size: 1.5rem; letter-spacing: .1rem; text-transform: uppercase; }

/* Join the Journey */
.join { background: var(--stone) center / cover; }
.join form { display: grid; gap: 1.6rem; max-width: 76rem; margin: 2.4rem auto 0; }
@media (min-width: 750px) { .join form { grid-template-columns: 1fr 1fr 1.6fr auto; } }
.field { font: inherit; font-size: 1.3rem; letter-spacing: .14rem; padding: 1.1rem 1.2rem; border: 2px solid var(--slate); background: transparent; color: var(--slate); width: 100%; border-radius: 0; }
.field::placeholder { color: var(--slate); text-transform: uppercase; }
.join .btn { background: #fff; border-color: #fff; color: var(--slate); font-weight: 600; }
.join .btn:hover { background: var(--slate); border-color: var(--slate); color: #fff; }

/* Blog post */
.post-banner { position: relative; display: grid; place-items: center; text-align: center; min-height: 33rem; padding: 5rem 2rem; overflow: hidden; background: var(--mist); }
.post-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
.post-banner__text { position: relative; max-width: 90rem; }
.post-banner h1 { font-family: var(--script); font-size: 5.6rem; margin: 0 0 1.4rem; }
.post-banner .meta { font-size: 1.5rem; margin: 0; }
.article { max-width: 94rem; margin: 0 auto; padding: 5rem 2rem 6rem; font-size: 1.55rem; }
.article h2, .article h3 { font-weight: 600; font-size: 1.88rem; margin: 3.4rem 0 1.4rem; }
.article h2.script { font-family: var(--signature); font-weight: 400; font-size: 4rem; line-height: 1.15; }
.article figure { margin: 3.4rem 0; }
.article figure img { margin: 0 auto; border-radius: 3.6rem; max-height: 60rem; width: auto; }
.article a { color: var(--slate); text-underline-offset: .3rem; }
/* Photo + text blocks (e.g. "10 Things I'm Currently Loving"): 200px photo on one side, text wrapping around it */
.media { display: flow-root; margin: 0 0 2.4rem; }
.media > img { float: left; width: var(--w, 20rem); max-width: 45%; margin: 0 1rem 1rem 0; }
.media--right > img { float: right; margin: 0 0 1rem 1rem; }
.media__text p { text-align: justify; line-height: 1.22; margin: 0 0 1.2rem; }
.article blockquote { margin: 2.4rem 0; padding: 0 0 0 2rem; border-left: 2px solid var(--blush); font-style: italic; }
.post-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid rgba(var(--slate-rgb), .2); font-size: 1.5rem; }
.post-nav a { text-decoration: none; max-width: 48%; }
.post-nav a:hover { text-decoration: underline; }
.article .back { margin-top: 3rem; }

/* Blog page banner */
.blog-banner { position: relative; min-height: 64rem; display: grid; align-items: end; text-align: center; color: #fff; overflow: hidden; }
.blog-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.blog-banner__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(40, 40, 40, .1), rgba(40, 40, 40, .5)); }
.blog-banner__text { position: relative; padding: 0 2rem 6rem; max-width: 100rem; margin: 0 auto; }
.blog-banner h1 { font-family: var(--script); font-size: 7.6rem; color: #fff; margin: 0 0 1.6rem; }
.blog-banner .eyebrow { font-size: 1.69rem; letter-spacing: .08rem; }
.blog-banner p { color: #fff; }

/* About page */
.about-hero__img { width: 100%; height: 70rem; object-fit: cover; opacity: .5; }
.about-hero__box { background: var(--mist); max-width: 100rem; margin: -40rem auto 0; position: relative; padding: 4rem 6rem 5rem; text-align: center; }
.about-hero__box .title { margin-bottom: 2.4rem; }
.about-hero__box blockquote { margin: 3rem 0 0; font-size: 1.88rem; }
.about-hero__box .signature { font-size: 3.6rem; }
@media (max-width: 749px) { .about-hero__img { height: 36rem; } .about-hero__box { margin: -10rem 2rem 0; padding: 3rem 2.4rem; } }
.prose h2, .split h2, .cols h2, .panel h2 { font-family: var(--script); font-weight: 400; font-size: 5.6rem; line-height: 1.1; margin-bottom: .6rem; }
h2 .sig { font: inherit; }
.sub { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .05rem; margin-bottom: 2rem; }
.panel { background: var(--mist); padding: 5rem; }
.panel--blush { background: var(--blush); }
.two-col { column-gap: 6rem; }
@media (min-width: 750px) { .two-col { columns: 2; column-rule: 1px solid rgba(var(--slate-rgb), .35); } }
.two-col blockquote { margin: 0 0 1.6rem; }
.panel-over { position: relative; }
.panel-over__img { width: 100%; max-height: 64rem; object-fit: cover; }
.panel-over .panel { max-width: 54rem; }
@media (min-width: 990px) { .panel-over .panel { position: absolute; left: 0; bottom: -8rem; } .panel-over { margin-bottom: 8rem; } }
.faith-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.faith-grid img { width: 100%; aspect-ratio: 1 / .9; object-fit: cover; }
.tears { font-style: italic; text-align: center; }

/* Contact */
.contact { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 750px) { .contact { grid-template-columns: 1fr 1fr; gap: 8rem; } }
.contact img { width: 100%; max-height: 84rem; object-fit: cover; }
.contact-form { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
.contact-form textarea { min-height: 16rem; resize: vertical; }
.contact-form .btn { justify-self: start; padding: 1rem 2.6rem; }

/* Footer: blue-gray band, dark links, big white logo */
.footer { background: var(--band); padding: 7rem 0 3rem; }
.footer__row { display: flex; align-items: center; justify-content: center; gap: 6rem; flex-wrap: wrap; }
.footer__row a { color: #222; text-decoration: none; font-size: 1.5rem; letter-spacing: .16rem; text-transform: uppercase; }
.footer__row a:hover { text-decoration: underline; }
.footer__logo img { width: 26rem; }
.footer__social { display: flex; justify-content: center; gap: 2rem; margin-top: 5rem; padding-top: 4rem; border-top: 1px solid rgba(255, 255, 255, .7); }
.footer__social a { width: 2.2rem; height: 2.2rem; color: #fff; }
.footer__social svg { width: 100%; height: 100%; fill: currentColor; }
.footer__copy { text-align: center; font-size: 1.25rem; color: #fff; margin: 5rem 0 0; }
.footer__copy a { color: #fff; }
@media (max-width: 749px) { .footer__logo { order: -1; flex-basis: 100%; display: flex; justify-content: center; } .footer__row { gap: 3rem; } .footer__logo img { width: 20rem; } }
.join[style] { position: relative; }
.join[style]::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); }
.join[style] > * { position: relative; }
.article h2.script { line-height: 1.45; }
@media (max-width: 749px) { .article h2.script { font-size: 3.2rem; } .title, .prose h2, .split h2, .cols h2, .panel h2 { line-height: 1.3; } .post-banner h1 { font-size: 4.4rem; line-height: 1.3; } }

/* Scrolling effects like the old site.
   Parallax: full-width photo backgrounds stay put while the page scrolls past (desktop only;
   phones don't support it well, so they scroll normally). */
@media (min-width: 990px) and (hover: hover) {
  .photo-band, .quote-band, .over-band, .join[style], .blog-banner__bg, .post-banner__bg { background-attachment: fixed; }
}
/* Entrance animations, measured from the old site (site.js) */
html, body { overflow-x: clip; }
.js-anim [data-anim="fade"] { opacity: 0; transition: opacity 1s linear; }
.js-anim [data-anim="slide-left"] { transform: translateX(-100%); transition: transform 1s linear; }
.js-anim [data-anim="slide-right"] { transform: translateX(100%); transition: transform 1s linear; }
.js-anim [data-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .photo-band, .quote-band, .over-band, .join[style], .blog-banner__bg, .post-banner__bg { background-attachment: scroll; }
}

/* Blue-gray bands like the old site: full width, four equal columns
   (button | photo | text across two), photo a quarter of the screen wide. */
@media (min-width: 750px) {
  .band { margin: 10rem 0; }
  .band__inner { grid-template-columns: 1fr 1fr 2fr; gap: 0; }
  .band__photo { margin: -0.6rem 0; }
  .band__photo img { aspect-ratio: 320 / 426; }
  .band__cta { text-align: left; padding: 0 0 0 4rem; }
  .band__text { padding: 4rem 6rem; }
  .band h2 { font-size: 5.5rem; }
}

/* Blog cards like the old site: big date box over the top of the photo, then the summary (no title) */
.cards { gap: 5rem 8rem; }
.card { padding-top: 4.2rem; }
.card__date { top: 0; min-width: 17rem; max-width: 17rem; min-height: 8.4rem; padding: 1.2rem 2rem; display: flex; align-items: center; justify-content: center; white-space: normal; font-size: 1.45rem; font-weight: 600; line-height: 1.3; }
.card__img { aspect-ratio: 340 / 440; }
.card__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.card__excerpt { margin-top: 1.6rem; font-size: 1.5rem; line-height: 1.4; max-width: 31rem; -webkit-line-clamp: 5; --lines: 5; }
.cards--4 { gap: 3rem 2.4rem; }
.cards--4 .card__date { min-width: 14rem; max-width: 14rem; min-height: 6.4rem; font-size: 1.3rem; }
.cards--4 .card__title { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; margin: 1.4rem 0 0; }



/* Forms: hidden bot trap, spam check, and the thank-you / error line */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join form .cf-turnstile, .join form .form-msg { grid-column: 1 / -1; }
.form-msg { margin: 0; min-height: 1.5em; font-size: 1.5rem; }
.form-msg.is-ok { font-weight: 600; }
.form-msg.is-error { color: #8a2c2c; }

/* Blog photos grow a little on hover, like the old site (106% in 0.2s) */
.card__img { transition: transform .2s ease-out; }
.card:hover .card__img { transform: scale(1.06); }

/* Row of four recent posts: same as the three-post cards (date box, tall photo, summary), on white */
.cards--4 { gap: 5rem 4rem; }
.cards--4 .card__img { aspect-ratio: 265 / 340; }
.cards--4 .card__date { min-width: 13.3rem; max-width: 13.3rem; min-height: 8.4rem; font-size: 1.45rem; }
.cards--4 .card__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.cards--4 .card__excerpt { display: -webkit-box; -webkit-line-clamp: 4; --lines: 4; }
.over-band .cards--4 .card__excerpt { display: none; }

/* Follow on instagram, like the old site: stone band, text left, four 209px photos right */
.insta { background: var(--stone); padding: 6.3rem 0; overflow: hidden; }
.insta__inner { display: grid; gap: 3rem 5.7rem; align-items: center; }
@media (min-width: 750px) { .insta__inner { grid-template-columns: 22.3rem 1fr; } }
.insta__text h2 { font-size: 3.6rem; line-height: 1.15; margin: 0 0 1.2rem; }
.insta__text p { font-size: 1.69rem; line-height: 1.35; margin: 0; }
.insta__text .insta__handle { font-size: 1.32rem; margin-top: 1.4rem; }
.insta__handle a { text-underline-offset: .3rem; }
.insta__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; padding: 1.3rem; margin: 0; }
.insta__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: none; }
.insta__grid a:hover img { transform: none; opacity: .9; }
@media (max-width: 749px) { .insta__grid { grid-template-columns: repeat(2, 1fr); } .insta__text { text-align: center; } }

/* Blue-gray bands: the band is only as tall as the photo (text sits inside it, no extra padding) */
@media (min-width: 750px) {
  .band__text { padding: 0 5rem 0 4rem; }
  .band__text p { margin-bottom: 0; }
}
@media (min-width: 750px) and (max-width: 1199px) {
  .band h2 { font-size: 4.4rem; margin-bottom: 1rem; }
  .band__text p { font-size: 1.5rem; line-height: 1.45; }
}

/* Old site's content is 1180px wide (mine was 1140): blog card rows and the Instagram band use that width */
@media (min-width: 1220px) { .cards { margin-left: -2rem; margin-right: -2rem; } }
.insta { padding: 5rem 0; }
@media (min-width: 750px) { .insta__inner { max-width: 128rem; padding: 0 4rem 0 6rem; } }

/* Header, measured from the old site (1280px window):
   banner 46px tall, 18px text, "FREE Shipping" and the amount bold;
   top row 80px; menu 18px, 2px letter spacing, 25px x 40px per item; active item gray on mist */
.bar { font-size: 1.69rem; font-weight: 300; min-height: 4.6rem; padding: 1rem 1.6rem; display: flex; align-items: center; justify-content: center; }
.bar strong { font-weight: 700; }
.header__top .page-width { min-height: 8rem; }
@media (min-width: 750px) {
  .nav__link { font-size: 1.69rem; font-weight: 400; letter-spacing: .2rem; padding: 2.5rem 4rem; line-height: 2.2rem; }
}
.nav__link[aria-current="page"] { background: var(--mist); color: #949494; }
.nav__link:hover { background: var(--mist); }
.header__logo { width: min(44rem, 80vw); padding: 2.4rem 0 2.4rem; }
/* Instagram text: Mulish runs larger than the old site's Proxima Nova Light, so go a size down and lighter */
.insta__text p { font-size: 1.55rem; line-height: 1.45; font-weight: 300; letter-spacing: .02rem; }
.insta__text .insta__handle { font-size: 1.3rem; }

/* Fonts drawn thinner and softer, like the old site (Mac "antialiased" rendering) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===================== About page (matches the old site, measured at 1280px) ===================== */
.ab-wrap { max-width: 120rem; margin: 0 auto; padding: 0 4rem; }
.ab-row { padding: 10rem 0; }
.ab-row h2.script, .ab-feature h2.script, .ab-grace h2.script { font-weight: 400; line-height: 1; margin: 0 0 1.6rem; }
.ab-sub { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .05rem; margin: 0 0 2.6rem; }
.ab-copy p { font-size: 1.69rem; line-height: 1.6; }
.ab-btn { margin-top: 2.4rem; }
.ab-media img { width: 100%; height: auto; display: block; }

/* Hero: whole photo (1245 x 900), light box (988 wide) starting 560px down it */
.ab-hero { position: relative; }
.ab-hero__img { width: calc(100% - 2rem); margin-left: 2rem; height: auto; display: block; }
.ab-hero__box { position: relative; max-width: 98.8rem; margin: -35rem auto 0; background: var(--mist); padding: 8rem 4rem 7rem; text-align: center; }
.ab-hero__box h1 { font-size: 4.8rem; margin: 0 0 1.4rem; line-height: 1.6; }
.ab-hero__text { max-width: 69.2rem; margin: 0 auto; }
.ab-hero__text p { font-size: 1.69rem; line-height: 1.33; }
.ab-hero__verse { font-size: 2.25rem; max-width: 49.2rem; margin: 1.2rem auto 0; line-height: 1.28; }
.ab-hero__ref { font-size: 2.25rem; margin: .8rem 0 0; }

/* Two columns: Meet Amy (photo 583 left, text 533), family / fun facts (text left, photo 582 right) */
.ab-two { display: grid; gap: 4rem 5rem; align-items: start; }
@media (min-width: 990px) {
  .ab-two--img-left { grid-template-columns: 58.3rem 1fr; }
  .ab-two--img-right { grid-template-columns: 1fr 58.2rem; gap: 4rem 3.8rem; }
}
.ab-amy h2.script { font-size: 6rem; margin-top: 4.6rem; }
.ab-family { background: var(--blush); }
.ab-family h2.script { font-size: 5.6rem; }
.ab-family .ab-copy p { margin-bottom: 2.7rem; }
.ab-family .sig { font-size: 1.69rem; line-height: 1; font-family: var(--signature); }
.ab-facts { background: var(--mist); }
.ab-facts h2.script { font-size: 4.8rem; line-height: 1.6; }
.ab-facts .ab-media img { aspect-ratio: 1; object-fit: cover; }

/* Psalm: white box 800 wide, light text 56px */
.ab-psalm { background-size: cover; background-position: center; padding: 15rem 2rem; }
@media (min-width: 990px) and (hover: hover) { .ab-psalm { background-attachment: fixed; } }
.ab-psalm__box { background: #fff; max-width: 80rem; margin: 0 auto; padding: 6rem 6rem 5rem; text-align: center; }
.ab-psalm__box::before { content: '\201C'; display: block; font-family: Georgia, serif; font-weight: 700; font-size: 9rem; line-height: .6; margin-bottom: 1.6rem; color: var(--slate); }
.ab-psalm__box p { font-size: 5.2rem; line-height: 1.08; font-weight: 300; margin: 0 auto; max-width: 57.6rem; }
.ab-psalm__box cite { display: block; margin-top: 2.4rem; font-style: normal; font-size: 1.69rem; text-transform: uppercase; letter-spacing: .05rem; }
@media (max-width: 749px) { .ab-psalm__box p { font-size: 3rem; } .ab-psalm__box { padding: 4rem 2.4rem; } }

/* Tallow / oils: wide photo (1002), blush panel (527) over its lower left, blush band behind the lower part */
.ab-feature { position: relative; padding: 10rem 0 0; }
.ab-feature::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: var(--blush); z-index: 0; }
.ab-feature__inner { position: relative; z-index: 1; max-width: 128rem; margin: 0 auto; padding-bottom: 8rem; }
.ab-feature__img { display: block; width: 100.2rem; max-width: calc(100% - 4rem); margin: 0 auto; aspect-ratio: 1002 / 564; object-fit: cover; }
.ab-feature--oils .ab-feature__img { aspect-ratio: 1002 / 668; }
.ab-feature__panel { background: var(--blush); width: 52.7rem; padding: 3rem 2.4rem 4rem; }
.ab-feature__panel h2.script { font-size: 6rem; letter-spacing: .12rem; text-align: center; line-height: 1.28; }
.ab-feature__panel p { font-size: 1.69rem; line-height: 1.6; }
.ab-feature__panel .ab-btn { text-align: center; }
@media (min-width: 990px) { .ab-feature__panel { position: absolute; left: 0; bottom: 4rem; } .ab-feature__inner { min-height: 0; } }

/* The Reality of Amy's Health: centered title, two narrow columns, slanted line between */
.ab-reality { text-align: center; }
.ab-reality h2.script { font-size: 5.6rem; line-height: 1.28; }
.ab-reality .ab-sub { font-size: 1.69rem; }
.ab-reality__cols { display: grid; gap: 3rem; text-align: left; margin: 3rem auto 0; max-width: 87rem; position: relative; }
@media (min-width: 990px) {
  .ab-reality__cols { grid-template-columns: 32rem 31rem; justify-content: space-between; }
  .ab-reality__cols::after { content: ''; position: absolute; left: 50%; top: 25%; width: 1px; height: 45%; background: var(--slate); transform: rotate(18deg); }
}
.ab-reality__cols blockquote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 1.69rem; line-height: 1.6; }

/* My Passion: heading 480 left, text 680 right */
.ab-passion__grid { display: grid; gap: 2rem 2rem; }
@media (min-width: 990px) { .ab-passion__grid { grid-template-columns: 48rem 1fr; } }
.ab-passion h2.script { font-size: 6rem; letter-spacing: -.24rem; }
.ab-passion p { font-size: 1.69rem; line-height: 1.6; }
.ab-passion .ab-sub { font-size: 1.69rem; }
.ab-passion .ab-tears { font-size: 1.5rem; font-style: italic; text-align: center; margin-top: 2.6rem; }

/* The Power of Words: text 653 left, title column 480 right */
.ab-words__grid { display: grid; gap: 3rem 4.7rem; align-items: start; }
@media (min-width: 990px) { .ab-words__grid { grid-template-columns: 65.3rem 1fr; } }
.ab-words__verse { margin: 3rem 0 0 7.7rem; padding: 0; border: 0; font-size: 1.5rem; font-style: italic; max-width: 52.5rem; text-align: center; }
.ab-words__verse p { font-size: 1.5rem; margin: 0; }
.ab-words__side { text-align: center; }
.ab-words__side h2.script { font-size: 4.8rem; line-height: 1.6; }
.ab-words__sub { font-size: 2.25rem; line-height: 1.28; text-transform: uppercase; font-weight: 600; letter-spacing: .05rem; }

/* Grace upon Grace: 2x2 photos left over a blush band, text right */
.ab-grace { position: relative; padding: 4rem 0 8rem; }
.ab-grace::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: var(--blush); z-index: 0; }
.ab-grace__grid { position: relative; z-index: 1; display: grid; gap: 4rem; align-items: end; }
@media (min-width: 990px) { .ab-grace__grid { grid-template-columns: 1fr 50.3rem; } }
.ab-grace__photos { display: grid; grid-template-columns: repeat(2, 24.5rem); gap: 1.2rem; }
.ab-grace__photos img { width: 100%; aspect-ratio: 245 / 220; object-fit: cover; }
.ab-grace__text { text-align: center; padding-bottom: 2rem; }
.ab-grace__text h2.script { font-size: 5.6rem; line-height: 1.6; }
.ab-grace__text p { font-size: 1.88rem; line-height: 1.6; }
.ab-grace__text .signature { font-size: 3rem; }
.ab-grace__text p:last-child { font-size: 1.69rem; }

/* Join the Journey on the About page: light box over the flower photo, hanging into the footer */
.join--box { padding: 30rem 0 0; position: relative; z-index: 2; }
.join--box::before { display: none; }
.join--box .page-width { background: var(--mist); max-width: 100rem; padding: 4rem 4rem 4.4rem; margin-bottom: -20rem; }
.join--box + .footer { padding-top: 27rem; }
/* About fine-tuning (old site content is 1166px wide; feature panels start 116px below the photo top) */
.ab-wrap { max-width: 124.6rem; }
@media (min-width: 990px) {
  .ab-feature { padding-top: 10rem; }
  .ab-feature::after { top: 48rem; height: auto; }
  .ab-feature__inner { min-height: 92rem; padding-bottom: 0; }
  .ab-feature--oils .ab-feature__inner { min-height: 96rem; }
  .ab-feature__panel { top: 11.6rem; bottom: auto; }
}

/* ===== About: photos hanging off their bands, exactly as on the old site (1280px) ===== */
@media (min-width: 990px) {
  /* Meet the family: photo starts 90px above the band; heading 96px below the band top */
  .ab-family { padding-top: 9.6rem; margin-top: 9rem; }
  .ab-family .ab-media { margin-top: -18.6rem; }
  /* Fun Facts: photo starts 40px above the band; heading 42px below it */
  .ab-facts { padding-top: 4.2rem; margin-top: 4rem; }
  .ab-facts .ab-media { margin-top: -8.2rem; }

  /* Tallow / oils: photo (8% from left, 78.3% wide); band starts 189px below the photo top, 675px tall;
     the band's left 41.2% is a pink panel over the photo with the text 82px down */
  .ab-feature { padding: 10rem 0 0; }
  .ab-feature::after { display: none; }
  .ab-feature__inner { max-width: none; min-height: 0; position: relative; padding-bottom: 0; }
  .ab-feature__img { width: 78.3%; max-width: none; margin: 0 0 0 8%; position: relative; z-index: 1; }
  .ab-feature__band { position: absolute; left: 0; right: 0; top: 18.9rem; height: 67.5rem; background: var(--blush); z-index: 0; }
  .ab-feature--oils .ab-feature__band { height: 65.2rem; }
  .ab-feature__panel { position: absolute; left: 0; top: 18.9rem; bottom: auto; width: 41.2%; height: 67.5rem; z-index: 2; padding: 8.2rem 3% 0 1.25%; box-sizing: border-box; }
  .ab-feature--oils .ab-feature__panel { height: 65.2rem; }
  .ab-feature__spacer { height: calc(18.9rem + 67.5rem); }
  .ab-feature--oils .ab-feature__spacer { height: calc(18.8rem + 65.2rem); }
  .ab-feature__img + .ab-feature__band + .ab-feature__panel + .ab-feature__spacer { margin-top: calc(-1 * (100vw * .783 * 564 / 1002)); }
  .ab-feature--oils .ab-feature__img + .ab-feature__band + .ab-feature__panel + .ab-feature__spacer { margin-top: calc(-1 * (100vw * .783 * 668 / 1002)); }

  /* Grace upon Grace: 2x2 photos (388 x 347, 20px gaps) from 72px, starting 204px above the band;
     pink text panel from 57.6% to the right edge covers the photos' right side */
  .ab-grace { padding: 0; margin-top: 8rem; }
  .ab-grace::after { display: none; }
  .ab-grace__grid { display: block; max-width: none; padding: 0; position: relative; }
  .ab-grace__band { position: absolute; left: 0; right: 0; top: 20.4rem; height: 62rem; background: var(--blush); }
  .ab-grace__photos { position: relative; z-index: 1; margin-left: 5.6%; display: grid; grid-template-columns: repeat(2, 30.3vw); gap: 2rem; width: max-content; padding-bottom: 7rem; }
  .ab-grace__photos img { aspect-ratio: 388 / 347; }
  .ab-grace__text { position: absolute; z-index: 2; left: 57.6%; right: 0; top: 20.4rem; height: 62rem; background: var(--blush); padding: 8.2rem 4.2% 0 2.3%; box-sizing: border-box; }
}

/* Isaiah verse: centered, not italic, reference on its own line */
.ab-words__verse, .ab-words__verse p { font-style: normal; text-align: center; }
@media (min-width: 990px) {
  .ab-feature__spacer { display: none; }
  .ab-feature__inner { min-height: 86.4rem; }
  .ab-feature--oils .ab-feature__inner { min-height: 84rem; }
}
/* Body text: Mulish at 250 is the closest free match to the old site's thin Proxima Nova Light */
body { font-weight: 250; }
.bar, .insta__text p { font-weight: 250; }

/* About: fixed sizes inside a centered 1280px area (wider windows only add margin), as on the old site */
@media (min-width: 990px) {
  .ab-feature__inner, .ab-grace__grid { max-width: 128rem; margin-left: auto; margin-right: auto; }
  .ab-feature__img { width: 100.2rem; margin-left: 10.2rem; }
  .ab-feature__band { left: calc(-50vw + 50%); right: calc(-50vw + 50%); }
  .ab-feature__panel { width: 52.7rem; padding: 8.2rem 4rem 0 1.6rem; }
  .ab-grace__band { left: calc(-50vw + 50%); right: calc(-50vw + 50%); }
  .ab-grace__photos { margin-left: 7.2rem; grid-template-columns: repeat(2, 38.8rem); }
  .ab-grace__text { left: 73.8rem; right: calc(-50vw + 50% + 1.5rem); padding: 8.2rem 5.3rem 0 2.9rem; }
  .ab-grace__text > * { max-width: 44.5rem; }
}
.cf-turnstile { min-height: 0; }

/* Blue-gray bands, measured on the old site (Oct 2026): the gray band is 200px shorter than the photo,
   so the photo hangs 100px over its top and bottom edges */
@media (min-width: 750px) {
  .band { margin: 20rem 0; }
  .band__photo { margin: -10rem 0; }
  .band__text { padding: 2rem 5rem 2rem 4rem; }
}
/* Blog posts: the flower photo shows 200px above the Join box (300px on the blog and About pages) */
.join--short { padding-top: 20rem; }
/* Join box hangs 200px into the footer while the flower photo stops at the footer's top edge */
.join--box .page-width { margin-bottom: 0; position: relative; top: 20rem; }
.join--box .page-width { padding-top: 8.6rem; }

/* =====================================================================================================
   Site-wide details and the Home page, measured on the old site at a 1920px window (Oct 2026) with
   tools/compare (headless Chrome). Old content column: 1180px; body text 18px; buttons 2px outlines.
   ===================================================================================================== */
:root { --page: 120rem; }
.page-width { padding: 0 1rem; }
body { font-size: 1.69rem; }
.btn { border: 2px solid var(--slate); color: var(--slate); font-size: 1.32rem; letter-spacing: .2rem; padding: 1.2rem 2.4rem; min-width: 16rem; text-align: center; line-height: 1.7rem; }
.btn:hover, .btn:focus-visible { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn--light { border-color: #fff; color: #fff; min-width: 16.3rem; }
.btn--case { text-transform: none; min-width: 28rem; padding: 1rem 2.4rem; }
.field { font-size: 1.32rem; letter-spacing: .2rem; height: 4.5rem; padding: 0 1rem; }
.join .btn, .btn--sub { background: #fff; border: 0; border-radius: .5rem; color: var(--slate); font-weight: 600; height: 3.7rem; padding: 0 1.6rem; align-self: center; }

@media (min-width: 990px) {
  /* Header: banner 46px; logo area 144px with a 1200px line under it; menu items 100px apart */
  .bar { padding: 0 1.6rem; height: 4.6rem; }
  .header__top .page-width { padding: 0; }
  .header__top .social a { width: 3.5rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; }
  .header__top .social svg { width: 2rem; height: 2rem; }
  .header__logo { padding: 2.4rem 0 3.3rem; }
  .nav .page-width { max-width: 120rem; padding: 0; border-top: 1px solid #707070; }
  .nav__list { justify-content: center; flex-wrap: nowrap; }
  .nav__item { margin: 0 5rem; }

  /* Welcome: 680 x 870 photo; 600px pink box 78px lower, flush with the right edge */
  .hero { max-width: 118rem; margin: 12.2rem auto 12rem; padding: 0; }
  .hero__img { width: 68rem; }
  .hero__card { left: auto; right: 0; width: 60rem; top: 7.8rem; padding: 3rem 2rem 2rem; min-height: 71.4rem; }
  .hero__card :is(h1, h2) { line-height: 7.8rem; margin: 0 0 1.2rem; }
  .hero__card p { font-size: 1.69rem; line-height: 1.28; margin-bottom: 2.2rem; }
  .hero__card p:last-child { text-align: center; }

  /* Sign-up strip: mist, 107px; text 264px, then First 142 / Last 142 / Email 295 / Subscribe 196 */
  .hm-join { background: var(--mist); }
  .hm-join__inner { display: grid; grid-template-columns: 26.4rem 1fr; gap: 5.3rem; align-items: center; min-height: 10.7rem; }
  .hm-join__inner > p { margin: 0; line-height: 1.3; }
  .hm-join__form { display: grid; grid-template-columns: 14.2rem 14.2rem 29.5rem 19.6rem; column-gap: 3.4rem; align-items: center; }
  .hm-join__form .btn--sub { margin-left: -1.3rem; width: 19.6rem; }
  .hm-join__form .cf-turnstile, .hm-join__form .form-msg { grid-column: 1 / -1; margin: 0; min-height: 0; }

  /* Instagram: heading 36px, two short lines of 18px text */
  .insta { padding: 6.3rem 0; }
  .insta__text h2 { font-size: 3.6rem; line-height: 1; max-width: 28rem; margin-bottom: 1.2rem; }
  .insta__text p { font-size: 1.69rem; line-height: 1.3; max-width: 18.2rem; }

  /* About / Blog / Store: 406px pink box (tiles 246px tall, 80px in from the top) */
  .hm-tiles { padding: 12rem 0 6rem; }
  .hm-tiles .tiles { padding: 8rem 0; }
  .hm-tiles .tile { padding: 1rem 1rem 0; min-height: 24.6rem; }
  .hm-tiles .tile h2 { line-height: 9.1rem; margin: 0 0 .2rem; }
  .hm-tiles .tile p { max-width: 28rem; min-height: 4.4rem; line-height: 1.3; margin: 0 auto 2.2rem; }

  /* About: 528 x 553 photo 52px in; text column from 665px, body 445px wide */
  .hm-about { padding: 6rem 0 10rem; }
  .hm-about .split { grid-template-columns: 52.8rem 1fr; gap: 7.5rem; padding-left: 6.2rem; align-items: start; }
  .hm-about .split > div { padding-top: 1rem; }
  .hm-about h2 { font-size: 6rem; line-height: 1; margin: 0 0 1.2rem; }
  .hm-about .eyebrow { font-size: 1.69rem; margin-bottom: 1.2rem; }
  .hm-about .split p:not(.eyebrow) { max-width: 44.5rem; line-height: 1.6; }

  /* My Passion: on white; heading 480px (subtitle centered under it), text 680px */
  .hm-passion { padding: 2.5rem 0 19rem; background: none; }
  .hm-passion .cols { grid-template-columns: 48rem 68rem; gap: 2rem; }
  .hm-passion h2 { font-size: 6rem; line-height: 1; margin: 0 0 1.2rem; }
  .hm-passion .eyebrow { text-align: center; font-size: 1.69rem; }
  .hm-passion p { line-height: 1.6; }
  .hm-passion + .band { margin-top: 14rem; }

  /* Bands: text 60px from the band's left, 100px from the right */
  .band__text { padding: 3rem 10rem 3rem 6rem; }
  .band h2 { line-height: 1.6; margin-bottom: .4rem; }
  .band__text p { font-size: 1.69rem; line-height: 1.6; }
  .band + .hm-blog { margin-top: -3.5rem; }

  /* On the Blog: heading 60px, intro 570px; cards 340 x 440 with 80px gaps */
  .hm-blog { padding: 0 0 0; }
  .hm-blog .title { line-height: 1; margin-bottom: 2.4rem; }
  .hm-blog .lead { max-width: 57rem; line-height: 1.6; margin-bottom: 5.2rem; }
  .cards { margin-left: 0 !important; margin-right: 0 !important; gap: 5rem 8rem; }
  .hm-blog .more { margin: 12rem 0 0; }
  .hm-blog + .band { margin-top: 17.5rem; }

  /* In the Archives: centered heading, then the mug (504 x 466, 88px in) and search + buttons from 750px */
  .hm-archive { padding: 0; }
  .band + .hm-archive { margin-top: -6.9rem; }
  .archive__head .title { line-height: 1; margin: 0 0 1.8rem; }
  .archive__head p { margin: 0 0 7.7rem; }
  .archive--below { grid-template-columns: 50.4rem 39.5rem; gap: 15.8rem; padding-left: 8.8rem; align-items: start; }
  .archive--below .search { max-width: 39.5rem; height: 4.5rem; margin: 6.8rem 0 4rem; border-color: #333; }
  .archive--below .cat-grid { grid-template-columns: 18rem 18rem; gap: 5rem 3.5rem; max-width: none; }
  .archive--below .cat-grid .btn { min-width: 0; height: 4.5rem; padding: 0 .6rem; display: flex; align-items: center; justify-content: center; font-size: 1.32rem; letter-spacing: .2rem; }

  /* Four recent posts: 265px cards, 40px gaps */
  .hm-recent { padding: 10rem 0 12rem; }
  .hm-recent .cards--4 { gap: 5rem 4rem; }

  /* Quote: flower photo band 365px; the white box starts 150px down and hangs 215px into Join */
  .hm-quote { padding: 15rem 2rem 0; height: 36.5rem; position: relative; z-index: 2; background-attachment: scroll !important; background-position: center; }
  .hm-quote .quote-box { min-height: 36.5rem; padding: 0 6rem 3rem; position: relative; }
  .hm-quote .quote-box::before { margin: -3.2rem 0 1.8rem; padding: 0; }
  .hm-quote .quote-box p { font-size: 1.88rem; line-height: 3rem; }
  .hm-quote .quote-box cite { font-size: 1.69rem; margin-top: 4.5rem; color: var(--slate); }

  /* Join (home): stone, heading 283px down (the quote box covers the top), First 103 / Last 103 / Email 216 / Subscribe 274 */
  .join--home { padding: 28.3rem 0 18.4rem; }
  .join--home .title { line-height: 9.9rem; margin: 0 0 -.8rem; }
  .join--home form { grid-template-columns: 10.3rem 10.3rem 21.6rem 27.4rem; column-gap: 3.4rem; max-width: none; justify-content: center; margin-top: 3.8rem; }
  .join--home form .btn { margin-left: -1.2rem; }

  /* Footer: 18px black links around a 300px logo; 1200px line; 35 x 40 icons; light copyright */
  .footer { padding: 12.8rem 0 4.7rem; }
  .footer .page-width { max-width: 120rem; padding: 0; }
  .footer__row { display: grid; grid-template-columns: 1fr 30rem 1fr; gap: .4rem; align-items: center; }
  .footer__row a { color: #000; font-size: 1.69rem; letter-spacing: .054rem; text-align: center; padding: 1.5rem 0; }
  .footer__row > a:nth-child(1) { justify-self: end; width: 18.5rem; grid-column: 1; grid-row: 1; margin-right: 17.5rem; }
  .footer__row > a:nth-child(2) { justify-self: end; width: 17.5rem; grid-column: 1; grid-row: 1; }
  .footer__logo { grid-column: 2; grid-row: 1; padding: 0 !important; }
  .footer__logo img { width: 30rem; }
  .footer__row > a:nth-child(4) { justify-self: start; width: 21.5rem; grid-column: 3; grid-row: 1; }
  .footer__row > a:nth-child(5) { justify-self: start; width: 20.2rem; grid-column: 3; grid-row: 1; margin-left: 21.5rem; }
  .footer__social { margin-top: 4.6rem; padding-top: 6.1rem; gap: .4rem; }
  .footer__social a { width: 3.5rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; }
  .footer__social svg { width: 2rem; height: 2rem; }
  .footer__copy { margin-top: 10.5rem; font-size: 1.32rem; color: #d4d4d4; }
  .footer__copy a { color: #d4d4d4; }
}
@media (min-width: 990px) { .header__top .social { gap: .4rem; } }
/* Old content column is 1180px from 20px inside the centered 1200px area */
@media (min-width: 990px) {
  .page-width { padding: 0 0 0 2rem; }
  .hero { max-width: 120rem; padding-left: 2rem; }
  .hero__card { min-height: 0; }
  .insta__inner { max-width: 120rem; padding: 0 0 0 2rem; grid-template-columns: 28rem 1fr; gap: 0; }
  .hm-passion + .band { margin-top: 5rem; }
  .band + .hm-blog { margin-top: 6.5rem; }
  .hm-blog .lead { max-width: 60rem; }
  .hm-blog .more { margin-top: 13rem; }
  .hm-blog + .band { margin-top: 28.5rem; }
  .band + .hm-archive { margin-top: 3.1rem; }
  .hm-quote .quote-box::before { margin-bottom: -.6rem; }
  .join--home p { line-height: 1.3; margin: 0; }
}
@media (min-width: 990px) {
  .nav__item { flex-shrink: 0; }
  .header__top .social { margin-top: 1rem; }
  .join--home form .btn { width: 27.4rem; }
}
@media (min-width: 990px) {
  .header__top .social svg, .footer__social svg { width: 2.6rem; height: 2.6rem; }
  .insta { padding: 5rem 0; }
  .hm-tiles .tile:nth-child(1) p { max-width: 18rem; }
  .hm-tiles .tile:nth-child(3) p { max-width: 21rem; }
}
/* Blog card summaries: 16px, start 15px under the photo; up to 6 lines (3 across) / 5 lines (4 across, 15px side insets) */
@media (min-width: 990px) {
  .card__excerpt { margin-top: 1.5rem; }
  .hm-blog .card__excerpt { -webkit-line-clamp: 6; --lines: 6; min-height: 13.3rem; }
  .hm-blog .more { margin-top: 14.4rem; }
  .cards--4 .card__excerpt { display: -webkit-box; -webkit-line-clamp: 5; --lines: 5; padding: 0 1.5rem; min-height: 11rem; max-width: none; }
  .hm-recent { padding-bottom: 13.5rem; }
}
@media (min-width: 990px) {
  .hm-quote .quote-box { display: flow-root; }
  .hm-quote .quote-box::before { margin: -2.6rem 0 0; height: 9.2rem; }
  .footer__row a { font-weight: 400; }
  .header__top .social svg, .footer__social svg { width: 3rem; height: 3rem; }
}
/* Sign-up forms: the spam check and the (empty) message line take no room until they have something to show */
.gtv-form .form-msg:empty { display: none; }
.join form, .hm-join__form { row-gap: 0; }
.join form .form-msg, .hm-join__form .form-msg { margin-top: 1.2rem; }
/* (padding, not margin: margins next to the bands' 200px margins would collapse) */
@media (min-width: 990px) {
  .band + .hm-blog { margin-top: 0; padding-top: 6.5rem; }
  .band + .hm-archive { margin-top: 0; padding-top: 3.1rem; }
  .hm-about + .hm-passion { margin-top: 5rem; }
}
@media (min-width: 990px) {
  .hm-quote .quote-box::before { font-size: 11rem; margin-top: -4.4rem; height: 10.6rem; }
  .card__excerpt { margin-top: 3.8rem; }
  .hm-blog .more { margin-top: 12.1rem; }
  .hm-recent { padding-bottom: 11.2rem; }
}

/* ===== About page at 1920px (measured Oct 2026); the 1280px numbers above still hold for smaller windows ===== */
@media (min-width: 990px) {
  .ab-wrap { max-width: 120rem; padding: 0; }
  /* Hero: photo starts 97px under the menu; 1000px box rides 340px up over it; left-aligned text, 27px lines */
  .ab-hero { margin-top: 9.7rem; }
  .ab-hero__box { max-width: 100rem; margin: -34rem auto 0; transform: translateX(1rem); }
  .ab-hero__text p { text-align: left; line-height: 1.6; }
  /* Meet Amy: 583px photo at the left edge of the 1200px area, text 540px from 640px; 200px below */
  .ab-amy { padding-bottom: 20rem; }
  .ab-two--img-left { grid-template-columns: 58.3rem 54rem; gap: 5.7rem; }
  .ab-copy .ab-sub { font-size: 1.5rem; }
  /* Meet the family: text 40px in, 540px; photo to the right edge; 160px below */
  .ab-family { padding-bottom: 16rem; }
  .ab-family .ab-two--img-right { grid-template-columns: 54rem 58.2rem; gap: 3.8rem; padding-left: 4rem; }
  /* Instagram (About): mist band 292px with 130px white above and below; photos 218 x 180, 6px apart */
  .insta--about { background: var(--mist); margin: 13rem 0; padding: 5.6rem 0; }
  .insta--about .insta__grid { grid-template-columns: repeat(4, 21.8rem); gap: .6rem; padding: 0; margin-left: 1.6rem; }
  .insta--about .insta__grid img { aspect-ratio: 218 / 180; }
  .insta--about .insta__text p { line-height: 1.6; }
  /* Tallow / oils: pink panel is the left 41.67% of the window; 18px text with tight lines, centered 477px column */
  .ab-feature__img { margin-left: 10.9rem; }
  .ab-feature--oils .ab-feature__img { margin-left: 14.9rem; }
  .ab-feature__band { height: 65.3rem; }
  .ab-feature__panel { left: calc(-50vw + 50%); width: 41.67vw; height: 65.3rem; padding: 8.2rem 0 0; text-align: center; }
  .ab-feature--oils .ab-feature__panel, .ab-feature--oils .ab-feature__band { height: 65.2rem; }
  .ab-feature__panel > * { max-width: 47.7rem; margin-left: auto; margin-right: auto; }
  .ab-feature__panel h2.script { max-width: none; }
  .ab-feature__panel p { text-align: left; line-height: 1.3; }
  .ab-btn .btn, .ab-reality .btn { min-width: 28rem; padding: 1rem 2.4rem; }
  .ab-reality .btn { text-transform: none; }
  /* Reality: heading 150px under the tallow band; oils photo 40px under the button */
  .ab-reality { padding: 15rem 0 0; }
  .ab-reality + .ab-feature--oils { padding-top: 4rem; }
  /* My Passion: 225px under the oils band; 1.38 line height; 190px to the Fun Facts band */
  .ab-passion { padding: 22.5rem 0 15rem; }
  .ab-passion p { line-height: 1.47; }
  /* Fun Facts: 531px text; 154px under the last line */
  .ab-facts { padding-bottom: 15.4rem; }
  .ab-facts .ab-copy { max-width: 58rem; }
  .ab-facts .ab-copy p { max-width: 53.1rem; }
  /* Power of Words: 190px above, 210px below */
  .ab-words { padding: 19rem 0 21rem; }
  /* Grace upon Grace: photos from 80px; pink text panel is the right 41.67% of the window */
  .ab-grace { margin-top: 0; }
  .ab-grace__photos { margin-left: 8rem; padding-top: 2rem; gap: 2rem 1.9rem; }
  .ab-grace__band { top: 22.4rem; }
  .ab-grace__text { left: auto; right: calc(-50vw + 50%); width: 41.67vw; top: 22.4rem; padding: 8.2rem 0 0; }
  .ab-grace__text > * { margin-left: auto; margin-right: auto; }
  .ab-grace__text h2.script { max-width: none; }
  /* Join box: form First 127 / Last 127 / Email 265 / Subscribe 196, 81px under the text */
  .join--box form { grid-template-columns: 12.7rem 12.7rem 26.5rem 19.6rem; column-gap: 3.3rem; max-width: none; justify-content: center; margin-top: 5.9rem; }
  .join--box form .btn { margin-left: -1.2rem; width: 19.6rem; }
  .join--box .title { font-size: 5.6rem; line-height: 9.1rem; margin: 0 0 1.2rem; }
  .join--box p { line-height: 1.3; margin: 0; }
  .join--box .page-width { padding: 8.3rem 4rem 8.4rem; }
  .join--box + .footer { padding-top: 31.3rem; }
}
@media (min-width: 990px) {
  .ab-family { margin-top: 0; }
  .ab-psalm__box { min-height: 66.4rem; }
  .ab-psalm + .ab-feature { padding-top: 14.4rem; }
}
/* Text sizes: the old site's Proxima Nova at 18px is as wide as Mulish at 16.9px (measured), so body text,
   buttons and labels use 0.937x the old pixel sizes; line spacing stays at the old pixel values */
/* "Amy<3" signatures: 30px, centered under the text, 55px line */
.signature { text-align: center; line-height: 5.5rem; margin-top: 0; }
@media (min-width: 990px) {
  /* Old About paragraphs are separated by a full blank line (27px) */
  .ab-copy p { margin-bottom: 2.7rem; }
  .ab-facts .ab-two { padding-left: 2rem; }
}
@media (min-width: 990px) { .ab-facts { padding-bottom: 7.2rem; } }
@media (min-width: 990px) {
  .ab-words__grid { padding-left: 2rem; }
  .ab-words .ab-copy > p { line-height: 1.3; }
  .ab-words__verse p { line-height: 1.33; }
  .ab-grace__photos { margin-left: 4rem; }
  .ab-grace__band, .ab-grace__text { top: 20.4rem; }
  .ab-grace + .join { margin-top: 20.5rem; }
}
/* Join box: it is shifted 200px down into the footer, so the photo above it only needs 100px of padding
   to show 300px above the box (blog posts: 200px) */
.join--box { padding-top: 10rem; }
.join--short { padding-top: 0; }
@media (min-width: 990px) { main:has(> .ab-grace:last-child) + .join { margin-top: 20.5rem; } }
.field { font-weight: 400; }

/* ===== Blog page at 1920px (measured Oct 2026) ===== */
.card[hidden] { display: none; }
.blog-divider { height: 10rem; }
.blog-divider--band { background: var(--band); }
.blog-divider--mist { background: var(--mist); }
@media (min-width: 990px) {
  /* Banner: 1009px photo starting 32px under the menu; title 85px, subtitle 24px caps, intro 1104px; white text */
  .blog-banner { margin-top: 3.2rem; min-height: 100.9rem; display: block; padding: 12rem 0 30rem; }
  .blog-banner__bg { background-position: center; }
  .blog-banner__bg::after { background: rgba(70, 70, 70, .35); }
  .blog-banner__text { padding: 0; max-width: 118rem; }
  .blog-banner h1 { font-size: 8.5rem; line-height: 17rem; margin: 8.8rem 0 1.2rem; }
  .blog-banner .eyebrow { font-size: 2.25rem; letter-spacing: .1rem; margin: 0 0 3.4rem; }
  .blog-banner__text p { max-width: 110.4rem; margin: 0 auto; line-height: 2.34rem; }
  .blog-banner .signature, .blog-banner__text p:last-child { color: #fff; margin-top: 1.4rem; }
  /* Four newest posts: hang 285px up into the banner; 280 x 320 photos, 20px apart; 140 x 74 date boxes */
  .blog-recent { margin-top: -30.1rem; position: relative; z-index: 1; padding: 1.5rem 0 3rem; }
  .blog-recent .cards--4 { grid-template-columns: repeat(4, 28rem); gap: 2rem; }
  .blog-recent .card { padding-top: 4rem; }
  .blog-recent .card__img { aspect-ratio: 280 / 320; }
  .blog-recent .card__date { min-width: 14rem; max-width: 14rem; min-height: 7.4rem; font-size: 1.32rem; font-weight: 300; letter-spacing: .1rem; }
  .blog-recent .card__excerpt { padding: 0 1.5rem; margin-top: 1.5rem; -webkit-line-clamp: 4; --lines: 4; min-height: 8.8rem; }
  /* Search the Blog: heading 130px down; mug 506 x 468 from 87px; search 400px and buttons from 750px */
  .blog-search { padding: 12rem 0 20rem; }
  .blog-search .archive__head p { margin-bottom: 8.5rem; }
  .blog-search .archive--below { grid-template-columns: 50.6rem 40rem; gap: 15.7rem; padding-left: 8.7rem; }
  .blog-search .archive--below .search { max-width: 40rem; margin-top: 8.4rem; }
  .blog-search .archive--below .cat-grid { grid-template-columns: 18rem 18rem; gap: 3.5rem 4.5rem; }
  /* Category rows: heading 160px down, 353 x 520 photos 60px apart, Show More 138px under them */
  .blog-cat { padding: 16rem 0 17rem; }
  .blog-cat .title { font-size: 5.6rem; line-height: 1; margin: 0 0 1rem; }
  .blog-cat .cards { grid-template-columns: repeat(3, 35.3rem); gap: 6rem; }
  .blog-cat .card { padding-top: 4rem; }
  .blog-cat .card__img { aspect-ratio: 353 / 520; }
  .blog-cat .card__date { min-width: 16.5rem; max-width: 17.7rem; min-height: 6.7rem; font-size: 1.32rem; font-weight: 300; letter-spacing: .1rem; }
  .blog-cat .card__excerpt { padding: 0 1.5rem; margin-top: 1.5rem; -webkit-line-clamp: 4; --lines: 4; min-height: 8.8rem; max-width: none; }
  .blog-cat .more { margin-top: 3.5rem; }
  .blog-cat .more .btn { min-width: 22rem; }
  /* Quotes: the banner photo, 800px white box 150px down, 36px text */
  .blog-quote { padding: 15rem 2rem; }
  .blog-quote .quote-box { max-width: 80rem; min-height: 58.5rem; padding: 0 17.8rem 4rem; display: flow-root; }
  .blog-quote .quote-box::before { margin: -1rem 0 1rem; }
  .blog-quote .quote-box .big { font-size: 3.37rem; line-height: 1.3; }
  .blog-quote + .blog-cat { padding-top: 16rem; }
}
@media (min-width: 990px) { .blog-recent + .blog-search { padding-top: 13.6rem; } }
.card__excerpt { line-height: 2.24rem; }
@media (min-width: 990px) {
  .blog-quote .quote-box::before { margin: -3.6rem 0 1rem; }
  .blog-quote .quote-box .big { line-height: 1.4; }
}
@media (min-width: 990px) {
  .blog-quote .quote-box .long { font-size: 2.25rem; line-height: 1.36; }
  .blog-cat .more { margin-bottom: 0; }
}
@media (min-width: 990px) {
  .blog-banner__bg::after { background: rgba(70, 70, 70, .2); }
  .blog-cat .more .btn { padding: 1rem 2.4rem; }
}

/* ===== Blog post at 1920px (measured Oct 2026) ===== */
.video { margin: 3.7rem auto; max-width: 64rem; aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.article p.verse { text-align: center; font-size: 2.8rem; line-height: 1.25; margin: 3.6rem auto .4rem; max-width: 80rem; }
.article p.verse-ref { text-align: center; font-family: var(--signature); font-size: 2.4rem; line-height: 4.4rem; margin: 0 0 3.6rem; }
.post-more { padding: 1.5rem 0 7rem; }
.post-more__search { margin: 0 auto 2rem; max-width: 40rem; height: 4.5rem; border-color: #333; }
.post-share { display: flex; justify-content: center; gap: .4rem; margin-bottom: 8rem; }
.post-share a { width: 3.7rem; height: 3.7rem; display: inline-flex; align-items: center; justify-content: center; color: var(--slate); }
.post-share svg { width: 2.2rem; height: 2.2rem; fill: currentColor; }
@media (min-width: 990px) {
  /* Banner: 329px, 32px under the menu; title 60px, faded photo */
  .post-banner { margin-top: 3.2rem; min-height: 32.9rem; padding: 10rem 2rem; background: #fff; }
  .post-banner__bg { opacity: .3; filter: blur(5px) grayscale(.4); transform: scale(1.06); }
  .post-banner h1 { font-size: 6rem; line-height: 10.3rem; margin: 0; }
  .post-banner .meta { font-size: 1.69rem; }
  /* Text column 1080px; first heading in script; square-cornered photos. Each old post had its own
     photo widths, heading sizes and line spacing: build.py puts them on as --w, --fs/--ff/--fw/--ta and --plh */
  .article { max-width: 110rem; padding: 15rem 1rem 9rem 3rem; font-size: 1.69rem; }
  .article > h3:first-child { font-family: var(--script); font-weight: 400; font-size: 3.2rem; line-height: 5.2rem; color: #1a1b1f; text-align: center; margin: 0 0 1rem; }
  .article :is(h2, h3, h4)[style] { font-family: var(--ff); font-size: var(--fs); font-weight: var(--fw); text-align: var(--ta); line-height: 1.65; }
  .article figure { margin: 0 0 4.4rem; }
  .article figure img { border-radius: 0; width: var(--w, 42.6rem); max-width: 100%; max-height: none; }
  .article p { line-height: var(--plh, 2.25rem); margin: 0 0 var(--plh, 2.25rem); }   /* a blank line between paragraphs, like the old posts */
  .article p.verse { max-width: 68.9rem; font-size: 2.8rem; line-height: 4.5rem; margin-bottom: 0; }
  .article .signature, .article p.signature { font-size: 3.6rem; line-height: 6.5rem; }
  .post-nav { border-top: 0; margin-top: 12.5rem; padding-top: 0; font-size: 1.69rem; }
  .post-nav a { color: #d4d4d4; text-decoration: underline; }
  .post-more .title { font-size: 5.6rem; line-height: 9.1rem; margin: 0 0 4rem; }
  .post-more .cards--4 { grid-template-columns: repeat(4, 26rem); gap: 2rem; justify-content: center; }
  .post-more .card__img { aspect-ratio: 1; }
  .post-more .card__date { min-width: 13rem; max-width: 13rem; min-height: 8.6rem; font-size: 1.32rem; font-weight: 300; letter-spacing: .1rem; }
  .post-more .card { padding-top: 4rem; }
  .post-more .card__excerpt { display: -webkit-box; padding: 0 1rem; margin-top: 1.5rem; -webkit-line-clamp: 4; --lines: 4; }
}
@media (min-width: 990px) { .post-more .cards--4 { justify-content: start; margin-left: 3rem; } }

/* ===== Contact at 1920px (measured Oct 2026): photo from the window's left edge (48.85% wide, 938 x 1554),
   form 624px wide with 80px fields; no Join section; pink Instagram band ===== */
.nav__link.is-active { background: var(--mist); color: #949494; }
.footer__row a[aria-current="page"] { color: #4b5c63; opacity: .75; }
.insta--contact { background: var(--blush); }
@media (min-width: 990px) {
  .contact { display: grid; grid-template-columns: 48.85vw 62.4rem; gap: 4.3rem; align-items: start; padding: 0; margin-top: 3.2rem; }
  .contact > img { width: 100%; aspect-ratio: 938 / 1554; max-height: none; object-fit: cover; }
  .contact .title { line-height: 9.9rem; margin: 0 0 1.2rem; }
  .contact > div > p { max-width: 54.1rem; line-height: 2.7rem; }
  .contact-form { gap: 1.6rem; margin-top: 3.8rem; }
  .contact-form .field { height: 8rem; font-size: 1.69rem; padding: 0 1rem 0 1.5rem; }
  .contact-form textarea.field { height: 20rem; padding: 1rem 1rem 1rem 1.5rem; }
  .contact-form .btn { background: #fff; min-width: 20rem; height: 5.5rem; margin-top: .8rem; }
  .contact-form .btn:hover { background: var(--slate); }
}
@media (min-width: 990px) { .contact-page { padding: 14.9rem 0 15rem; } }
@media (min-width: 990px) { .contact-form .btn { margin-top: 0; } }

/* ===== Phones (old site at 390px, measured Oct 2026): 80px mist header with the logo on the left, cart and
   menu button on the right; the menu slides down from the top as a full-width mist panel ===== */
.mhead__cart, .mhead__menu, .nav__drawer-head, .nav__item--phone, .nav-overlay { display: none; }
@media (max-width: 749px) {
  .header__top { display: none; }
  .header__brand { background: var(--mist); height: 8rem; display: flex; align-items: center; padding: 0 1rem; gap: 0; }
  .header__brand > a:first-child { margin-right: auto; }
  .header__logo { width: 20.5rem; padding: 0; margin: 0; }
  .mhead__cart { display: inline-flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; color: #666; margin-right: 5.3rem; }
  .mhead__cart svg { width: 2rem; height: 2rem; fill: currentColor; }
  .mhead__menu { display: inline-flex; flex-direction: column; justify-content: center; gap: .6rem; width: 4rem; height: 4rem; padding: 0 .6rem; background: none; border: 0; cursor: pointer; }
  .mhead__menu span { display: block; height: 2px; background: var(--slate); border-radius: 1px; }
  .nav { position: fixed; left: 0; right: 0; top: 0; height: 90rem; max-height: 100vh; overflow-y: auto; background: var(--mist); z-index: 60;
         transform: translateY(-100%); transition: transform .35s ease; visibility: hidden; }
  body.nav-open .nav { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav-overlay:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 55; }
  .nav .page-width { border-top: 0; padding: 0; }
  .nav__drawer-head { display: block; position: relative; text-align: center; padding-top: 8.5rem; }
  .nav__drawer-head img { width: 16.1rem; margin: 0 auto; }
  .nav__close { position: absolute; top: 2rem; right: 1rem; width: 4rem; height: 4rem; border: 0; background: none; font-size: 3.6rem; line-height: 1; color: var(--slate); cursor: pointer; }
  .nav__list { display: block; width: 24rem; margin: 2.7rem auto 4rem; }
  .nav__item { margin: 0; text-align: center; }
  .nav__item--phone { display: block; }
  .nav__item:has(> button.nav__link) { display: none; }
  .nav__link, .nav__link:hover { display: block; width: 100%; padding: 2.1rem 0; font-size: 1.88rem; letter-spacing: .2rem; line-height: 2.2rem; background: none; color: var(--slate); }
  .nav__link[aria-current="page"] { background: none; color: rgba(39, 42, 47, .4); }
  .nav__caret { display: none; }
  .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { display: none; }
  .nav__item.is-open .nav__menu { display: block; position: static; box-shadow: none; background: none; padding: 0; min-width: 0; }
  .nav__menu a { padding: 1rem 0; font-size: 1.5rem; letter-spacing: .2rem; line-height: 1.6rem; color: #272a2f; }
  .nav__menu a:hover { background: none; text-decoration: underline; }
}

/* ----- Home on phones (old site at 390px) ----- */
@media (max-width: 749px) {
  /* Welcome: full-width 390 x 520 photo; the pink box (30px in from each side) rides 150px up over it */
  .hero { margin: 0 0 10rem; padding: 0; }
  .hero__img { width: 100%; aspect-ratio: 390 / 520; }
  .hero__card { position: relative; margin: -15rem 3rem 0; padding: 5rem 2.2rem 4rem; }
  .hero__card :is(h1, h2) { font-size: 3.8rem; line-height: 6.2rem; text-align: center; margin: 0 0 1.2rem; }
  .hero__card p { font-size: 1.69rem; line-height: 2.16rem; text-align: justify; margin: 0 0 2.2rem; }
  .hero__card p:first-of-type { text-align: left; }
  .hero__card p:last-child { text-align: center; }
  /* Sign-up strip: mist, centered text, full-width fields 16px apart, white Subscribe centered */
  .hm-join { background: var(--mist); padding: 12rem 3rem; }
  .hm-join__inner { padding: 0; }
  .hm-join__inner > p { font-size: 1.5rem; line-height: 2rem; text-align: center; max-width: 22.2rem; margin: 0 auto 3rem; }
  .hm-join__form { display: grid; gap: 1.6rem; }
  .hm-join__form .field { height: 4.5rem; font-size: 1.5rem; }
  .hm-join__form .btn--sub { justify-self: center; width: 16rem; margin-top: .7rem; }
  .photo-band { height: 49.2rem; background-attachment: scroll; }
  /* Instagram: heading on one line, centered */
  .insta { padding: 6.8rem 0 4rem; }
  .insta__text h2 { font-size: 2.9rem; line-height: 1; margin-bottom: 2rem; }
  .insta__text p { font-size: 1.32rem; line-height: 2.2rem; max-width: 27.8rem; margin: 0 auto; }
  /* About / Blog / Store: one pink box 30px in from the sides, tiles stacked */
  .hm-tiles { padding: 1.5rem 0; }
  .hm-tiles .page-width { padding: 0 3rem; }
  .hm-tiles .tiles { padding: 1.5rem 3rem; }
  .hm-tiles .tile { padding: 6.5rem 0 4rem; }
  .hm-tiles .tile + .tile { border-top: 1px solid rgba(var(--slate-rgb), .5); }
  .hm-tiles .tile h2 { font-size: 4rem; line-height: 6.6rem; margin: 0 0 .4rem; }
  .hm-tiles .tile p { font-size: 1.69rem; line-height: 2.2rem; max-width: 16.2rem; margin: 0 auto 2.2rem; min-height: 0; }
  .hm-tiles .btn { min-width: 17.6rem; }
  /* About: text first, then the photo full width */
  .hm-about { padding: 2.5rem 0 0; }
  .hm-about .split { display: flex; flex-direction: column-reverse; gap: 3rem; padding: 0; }
  .hm-about .split > div { padding: 0 3rem; }
  .hm-about .split img { width: 100%; aspect-ratio: 390 / 396; }
  .hm-about h2 { font-size: 4.8rem; line-height: 1; margin-bottom: 1.6rem; }
  .hm-about .eyebrow { font-size: 1.69rem; }
  .hm-about .split p:not(.eyebrow) { max-width: 29.7rem; font-size: 1.69rem; line-height: 2.7rem; }
  .hm-about .btn { min-width: 25.6rem; }
  /* My Passion: centered heading, 14px text */
  .hm-passion { padding: 8rem 0 22rem; }
  .hm-passion .page-width { padding: 0 3rem; }
  .hm-passion .cols { display: block; }
  .hm-passion h2 { font-size: 3.6rem; line-height: 1; text-align: center; margin-bottom: 1.2rem; }
  .hm-passion .eyebrow { font-size: 1.32rem; text-align: center; margin-bottom: 2rem; }
  .hm-passion p { font-size: 1.32rem; line-height: 2.1rem; }
  /* Bands: gray text box set 50px in from the left, the photo (350px) on a full-width gray row, then the button */
  .band { margin: 1.5rem 0; background: none; }
  .band__inner { display: flex; flex-direction: column; gap: 0; }
  .band__text { order: 1; margin-left: 5rem; background: var(--band); padding: 9rem 4rem 5rem; }
  .band h2 { font-size: 4rem; line-height: 6.6rem; text-align: center; margin: 0 0 2rem; }
  .band__text p { font-size: 1.69rem; line-height: 2.7rem; margin: 0; }
  .band__photo { order: 2; margin: 0; background: var(--band); }
  .band__photo img { width: 35rem; aspect-ratio: 350 / 467; }
  .band__cta { order: 3; margin-left: 5rem; background: var(--band); padding: 5rem 0 9.5rem; text-align: center; }
  .band__cta .btn { min-width: 21.4rem; }
  /* On the Blog: heading and intro on the left; 330 x 440 cards; full-width Continue Reading */
  .hm-blog { padding: 8rem 0 1.5rem; }
  .hm-blog .page-width { padding: 0 3rem; }
  .hm-blog .center { text-align: left; }
  .hm-blog .title { font-size: 4.8rem; line-height: 1; margin-bottom: 1.2rem; }
  .hm-blog .lead { font-size: 1.5rem; line-height: 2.4rem; margin: 0 0 4.2rem; max-width: none; }
  .cards { gap: 5rem; }
  .card__img { aspect-ratio: 330 / 440; }
  .card__date { min-width: 16.5rem; max-width: 16.5rem; min-height: 8.4rem; }
  .hm-blog .more { margin: 4rem -1.5rem 0; }
  .hm-blog .more .btn { width: 100%; }
  /* In the Archives: centered heading, full-width mug photo, one column of 280px buttons */
  .hm-archive { padding: 8rem 0 1.5rem; }
  .archive__head .title { font-size: 4.8rem; line-height: 4.8rem; max-width: 21rem; margin: 0 auto 1.2rem; }
  .archive__head p { font-size: 1.32rem; line-height: 2.2rem; max-width: 23.6rem; margin: 0 auto 2.8rem; }
  .archive--below { display: block; }
  .hm-archive .page-width { padding: 0; }
  .archive--below img { width: 100%; aspect-ratio: 390 / 361; margin-bottom: 4rem; }
  .archive--below > div { padding: 0 5.5rem; }
  .archive--below .search { margin: 0 auto 2.4rem; }
  .archive--below .cat-grid { grid-template-columns: 1fr; gap: 2rem; max-width: 28rem; margin: 0 auto; }
  .archive--below .cat-grid .btn { min-width: 0; height: 4.1rem; display: flex; align-items: center; justify-content: center; }
  /* Four recent posts stacked, 330 x 340 */
  .hm-recent { padding: 10rem 0 1.5rem; }
  .hm-recent .page-width { padding: 0 3rem; }
  .cards--4 { grid-template-columns: 1fr; }
  .cards--4 .card__img { aspect-ratio: 330 / 340; }
  /* Quote: 330px white box over the photo, hanging into Join */
  .hm-quote { padding: 0 3rem; height: 37.9rem; position: relative; z-index: 2; background-attachment: scroll; }
  .hm-quote .quote-box { padding: 0 3rem 3rem; display: flow-root; }
  .hm-quote .quote-box::before { margin: 1rem 0 0; }
  .hm-quote .quote-box p { font-size: 1.88rem; line-height: 3rem; }
  .hm-quote .quote-box cite { font-size: 1.69rem; }
  .join--home { padding: 31rem 3rem 10rem; }
  .join--home .title { font-size: 3.6rem; line-height: 5.9rem; max-width: 18.2rem; margin: 0 auto 1.2rem; }
  .join--home p { font-size: 1.69rem; line-height: 2.2rem; max-width: 22.4rem; margin: 0 auto 3rem; }
}
/* Sign-up forms on phones: fields full width, 16px apart, white Subscribe centered */
@media (max-width: 749px) {
  .join form { display: grid; grid-template-columns: 1fr; gap: 1.6rem; max-width: 33rem; }
  .join form .btn { justify-self: center; width: 16rem; margin-top: .7rem; }
  .field { height: 4.5rem; font-size: 1.5rem; }
}
@media (max-width: 749px) {
  .band__inner { align-items: stretch; }
  .band__photo img { margin: 0; }
  .hm-tiles { padding-top: 10rem; }
  .hm-tiles .tile:nth-child(2) p { max-width: 24rem; }
  .hm-tiles .tile:nth-child(3) p { max-width: 24rem; }
  .photo-band { background-position: 25% center; }
}
@media (max-width: 749px) {
  .card__date { font-size: 1.5rem; min-height: 9.4rem; letter-spacing: .1rem; }
  .card__excerpt { margin-top: 3.5rem; font-size: 1.5rem; }
  .cards--4 .card__date { min-height: 8.4rem; }
}
/* Footer on phones: logo, then the links stacked in white capitals, line, big white icons */
@media (max-width: 749px) {
  .footer { padding: 8rem 3rem 3rem; }
  .footer__row { display: flex; flex-direction: column; gap: 0; }
  .footer__logo { order: -1; margin-bottom: 3rem; }
  .footer__logo img { width: 26rem; }
  .footer__row > a:not(.footer__logo) { color: #fff; font-size: 1.88rem; letter-spacing: .2rem; font-weight: 400; padding: 1.6rem 0; }
  .footer__social { margin-top: 1.6rem; padding-top: 5rem; gap: .8rem; }
  .footer__social a { width: 4rem; height: 4rem; }
  .footer__social svg { width: 3.4rem; height: 3.4rem; }
  .footer__copy { margin-top: 9rem; font-size: 1.1rem; color: #d4d4d4; }
}

/* ----- About on phones (old site at 390px) ----- */
@media (max-width: 749px) {
  .ab-wrap { padding: 0 3rem; }
  .ab-copy, .ab-copy p { text-align: center; }
  .ab-copy p { font-size: 1.69rem; line-height: 2.7rem; margin-bottom: 2.7rem; }
  .ab-copy .ab-sub { font-size: 1.22rem; max-width: 20.2rem; margin: 0 auto 3.5rem; }
  /* Hero: full-width 390 x 744 photo; the mist box (30px in) rides 200px up over it; narrow left-aligned text */
  .ab-hero { margin: 0; }
  .ab-hero__img { width: 100%; margin: 0; aspect-ratio: 390 / 744; object-fit: cover; opacity: .5; }
  .ab-hero__box { margin: -20rem 3rem 0; padding: 5rem 4rem 4rem; transform: none; }
  .ab-hero__box h1 { font-size: 3.8rem; line-height: 6.2rem; max-width: 18.4rem; margin: 0 auto 1.2rem; }
  .ab-hero__text { max-width: 25rem; }
  .ab-hero__text p { text-align: left; font-size: 1.69rem; line-height: 2.7rem; }
  .ab-hero__verse { font-size: 1.78rem; line-height: 2.3rem; max-width: none; }
  /* Meet Amy: full-width photo first, then centered text */
  .ab-amy { padding: 8rem 0 8rem; }
  .ab-amy .ab-two { display: flex; flex-direction: column; gap: 9rem; }
  .ab-amy .ab-wrap { padding: 0; }
  .ab-amy .ab-media img { width: 100%; aspect-ratio: 390 / 572; object-fit: cover; }
  .ab-amy .ab-copy { padding: 0 3.5rem; }
  .ab-amy h2.script { font-size: 4.8rem; margin: 0 0 1.2rem; text-align: center; }
  /* Meet the family: photo (330 x 304) first, starting 100px above the pink band */
  .ab-family { padding: 0 0 11rem; margin-top: 10rem; }
  .ab-family .ab-two { display: flex; flex-direction: column-reverse; gap: 4rem; }
  .ab-family .ab-media { margin-top: -10rem; }
  .ab-family .ab-media img { aspect-ratio: 330 / 304; object-fit: cover; }
  .ab-family h2.script { font-size: 4.5rem; text-align: center; }
  /* Instagram (About): mist, two-line heading */
  .insta--about { margin: 0 0 13rem; padding: 10rem 1.5rem 12rem; }
  .insta--about .insta__text h2 { max-width: 22.8rem; margin: 0 auto 1.2rem; line-height: 2.9rem; }
  .insta--about .insta__text p { max-width: 22.8rem; line-height: 2.1rem; }
  .insta--about .insta__grid { grid-template-columns: repeat(2, 1fr); margin: 3rem 0 0; }
  .insta--about .insta__grid img { aspect-ratio: 1; }
  /* Psalm: white box 40px in from the sides */
  .ab-psalm { padding: 20rem 4rem; }
  .ab-psalm__box { padding: 7.9rem 4.8rem 6rem; min-height: 0; }
  .ab-psalm__box p { font-size: 2.81rem; line-height: 3.9rem; }
  /* Tallow / oils: full-width photo, then a pink box with the text */
  .ab-feature { padding: 8rem 0 0; }
  .ab-feature__inner { min-height: 0 !important; }
  .ab-feature__img { width: 100%; margin: 0; aspect-ratio: 390 / 219; object-fit: cover; }
  .ab-feature--oils .ab-feature__img { aspect-ratio: 390 / 260; }
  .ab-feature__band { display: none; }
  .ab-feature__panel { position: static; width: auto; height: auto; background: var(--blush); padding: 4rem 3.5rem 7rem; margin: 0; transform: none; text-align: left; }
  .ab-feature--oils .ab-feature__panel { padding: 1rem 7rem 7rem; }
  .ab-feature__panel > * { max-width: none; }
  .ab-feature__panel h2.script { font-size: 4.8rem; line-height: 5.8rem; margin: 0 0 1.2rem; }
  .ab-feature__panel p { font-size: 1.69rem; line-height: 2.2rem; }
  .ab-feature--oils .ab-feature__panel p { line-height: 2.7rem; }
  .ab-btn .btn { width: 100%; min-width: 0; }
  /* Reality: centered three-line heading; Continue Reading full width */
  .ab-reality { padding: 8rem 0 5rem; }
  .ab-reality h2.script { font-size: 4rem; line-height: 4.8rem; max-width: 21.8rem; margin: 0 auto 1.2rem; text-align: center; }
  .ab-reality .ab-sub { font-size: 1.32rem; text-align: center; }
  .ab-reality .ab-wrap > .ab-btn { margin: 3rem -1.5rem 0; }
  .ab-reality .btn { width: 100%; }
  /* My Passion: like the home page on phones, text centered */
  .ab-passion { padding: 8rem 0 22rem; }
  .ab-passion__grid { display: block; text-align: center; }
  .ab-passion h2.script { font-size: 3.6rem; text-align: center; margin-bottom: 1.2rem; }
  .ab-passion .ab-sub { font-size: 1.32rem; text-align: center; }
  .ab-passion p { font-size: 1.32rem; line-height: 1.93rem; text-align: center; }
  .ab-tears { font-size: 1.22rem; }
  /* Fun Facts: square photo first, starting 100px above the mist band; centered text */
  .ab-facts { padding: 0 0 11rem; margin-top: 10rem; }
  .ab-facts .ab-two { display: flex; flex-direction: column-reverse; gap: 5rem; padding: 0; }
  .ab-facts .ab-media { margin-top: -10rem; }
  .ab-facts h2.script { font-size: 4rem; line-height: 4.4rem; text-align: center; }
  .ab-facts .ab-copy p { max-width: none; }
  /* Power of Words: stacked, centered */
  .ab-words { padding: 8rem 0; }
  .ab-words__grid { display: flex; flex-direction: column-reverse; gap: 4rem; padding: 0; text-align: center; }
  .ab-words .ab-copy > p { text-align: center; }
  .ab-words__side h2.script { font-size: 4rem; }
  /* Grace upon Grace: 2 x 2 photos that fit the screen, then the pink text box */
  .ab-grace { padding: 4rem 0 0; margin: 0; }
  .ab-grace__grid { display: block; padding: 0; }
  .ab-grace__band { display: none; }
  .ab-grace__photos { grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 3rem 4rem; width: auto; padding: 0; }
  .ab-grace__text { position: static; width: auto; height: auto; background: var(--blush); padding: 4rem 8.5rem 4rem; margin: 0; }
  .ab-grace__text > * { max-width: none; }
  .ab-grace__text h2.script { font-size: 4rem; line-height: 4.4rem; }
  .ab-grace__text p { font-size: 1.5rem; line-height: 2.4rem; }
  /* Join box: 320px wide (35px in), three-line heading, hanging into the footer */
  .join--box { padding: 6rem 3.5rem 0; }
  .join--box .page-width { padding: 6rem 1.5rem 4rem; top: 20rem; }
  .join--box .title { font-size: 4rem; line-height: 4.8rem; max-width: 22rem; margin: 0 auto 1.2rem; }
  .join--box p { font-size: 1.32rem; }
  .join--box + .footer { padding-top: 28rem; }
}
/* Nothing on phones should be wider than the screen */
@media (max-width: 749px) { html, body { overflow-x: hidden; } }
@media (max-width: 749px) {
  .ab-facts .ab-two, .ab-words__grid { padding: 0 3rem; }
}

/* ----- Blog and posts on phones (old site at 390px) ----- */
@media (max-width: 749px) {
  .blog-banner { min-height: 0; display: block; padding: 6.5rem 0 35rem; }
  .blog-banner__text { padding: 0 7rem; }
  .blog-banner h1 { font-size: 4rem; line-height: 4rem; margin: 0 0 1.2rem; }
  .blog-banner .eyebrow { font-size: 1.78rem; line-height: 2.3rem; max-width: 21.6rem; margin: 0 auto 1.2rem; }
  .blog-banner__text p { font-size: 1.32rem; line-height: 1.82rem; }
  .blog-recent { margin-top: -28.5rem; position: relative; z-index: 1; padding: 0 3rem 1.5rem; }
  .blog-recent .page-width { padding: 0; }
  .blog-recent .card { padding-top: 4rem; }
  .blog-recent .card__img { aspect-ratio: 330 / 320; }
  .blog-search { padding: 4rem 0 12rem; }
  .blog-search .page-width { padding: 0; }
  .blog-search .archive__head { display: flex; flex-direction: column; }
  .blog-search .archive__head .title { max-width: 21rem; }
  .blog-search .archive__head p { font-size: 1.69rem; line-height: 2.7rem; }
  .blog-search .archive--below img { width: 32.2rem; margin: 0 auto 4rem; aspect-ratio: 322 / 298; }
  .blog-search .archive--below > div { padding: 0 2.5rem; }
  .blog-search .archive--below .cat-grid { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; max-width: none; }
  .blog-search .archive--below .cat-grid .btn { font-size: 1.22rem; letter-spacing: .1rem; padding: 0 .4rem; }
  .blog-divider { height: 13rem; }
  .blog-cat { padding: 10rem 0 1.5rem; }
  .blog-cat .page-width { padding: 0; }
  .blog-cat .title { font-size: 4.8rem; line-height: 4.8rem; max-width: 21rem; margin: 0 auto 5rem; }
  .blog-cat .cards { gap: 5rem; }
  .blog-cat .card__img { aspect-ratio: 390 / 520; }
  .blog-cat .card__excerpt { padding: 0 3rem; }
  .blog-cat .more { padding: 0 1.5rem; }
  .blog-cat .more .btn { width: 100%; }
  .blog-quote { padding: 20rem 4rem; background-attachment: scroll; }
  .blog-quote .quote-box { padding: 6rem 5.4rem 5rem; display: flow-root; }
  .blog-quote .quote-box .big { font-size: 2.72rem; line-height: 1.35; }
  .blog-quote .quote-box .long { font-size: 1.88rem; line-height: 1.4; }
  /* Post: 574px banner, 35px title; text 20px in from the sides */
  .post-banner { min-height: 57.4rem; padding: 20rem 1.5rem; }
  .post-banner h1 { font-size: 3.5rem; line-height: 3.9rem; }
  .article { padding: 9.5rem 1.5rem 9rem 2rem; font-size: 1.69rem; }
  .article > h3:first-child { font-family: var(--script); font-weight: 400; font-size: 2.6rem; line-height: 4.3rem; color: #1a1b1f; text-align: center; margin: 0 0 2.4rem; }
  .article figure { margin: 0 0 4.2rem; }
  .article figure img { border-radius: 0; width: 100%; max-height: none; }
  .article p { line-height: 2.25rem; }
  .article p.verse { font-size: 2.25rem; }
  .post-more { padding: 1.5rem 0 8rem; }
  .post-more .page-width { padding: 0 1.5rem; }
  .post-more .title { font-size: 4rem; line-height: 6.6rem; margin-bottom: 3rem; }
  .post-more .card__img { aspect-ratio: 360 / 260; }
}
/* Contact on phones: full-width photo (390 x 646), centered heading and text, 340px form with 80px fields */
@media (max-width: 749px) {
  .contact-page { padding: 0 0 1.5rem; }
  .contact { display: block; padding: 0; margin: 0; }
  .contact > img { width: 100%; aspect-ratio: 390 / 646; max-height: none; object-fit: cover; margin-bottom: 6.2rem; }
  .contact > div { padding: 0 2.5rem; text-align: center; }
  .contact .title { font-size: 4.8rem; line-height: 7.8rem; margin: 0 0 1.2rem; }
  .contact > div > p { font-size: 1.32rem; line-height: 2.1rem; }
  .contact-form .field { height: 8rem; font-size: 1.5rem; }
  .contact-form textarea.field { height: 20rem; }
  .contact-form .btn { justify-self: center; background: #fff; min-width: 20rem; }
}

/* ---- Second matching pass against the old site (measured at 1920px and 390px, October 2026) ---- */
/* Card summaries are cut off after a set number of lines with no "…", like the old site */
.card__excerpt { -webkit-line-clamp: none !important; display: block; max-height: calc(var(--lines, 4) * var(--elh, 2.24rem)); }
@media (min-width: 990px) {
  /* Under a post the old cards used 18px text */
  .post-more .card__excerpt { font-size: 1.8rem; line-height: 2.52rem; --elh: 2.52rem; --lines: 3; }
  /* Lines of summary the old cards showed: Home latest 5, Home archive row 4, Blog page 3 */
  .hm-blog .card__excerpt { --lines: 5; }
  .hm-recent .card__excerpt { --lines: 4; }
  .blog-recent .card__excerpt, .blog-cat .card__excerpt { --lines: 3; }
  .hm-blog .card__excerpt, .hm-recent .card__excerpt, .blog-recent .card__excerpt, .blog-cat .card__excerpt { min-height: 0; margin-bottom: 2.08rem; }
  .post-more .card__excerpt { min-height: 0; margin-bottom: 2.34rem; }
  /* Blog category rows: dates in a box that wraps long dates onto two lines (14px, 25px padding) */
  .blog-cat .card__date { min-width: 0; max-width: 17.7rem; min-height: 0; padding: 2.5rem; font-size: 1.4rem; line-height: 1.7rem; }
  /* Welcome card: Amy's signature sits 26px higher, so the card is 714px tall */
  .hero__card p.signature:last-child { margin-top: -2.6rem; }
  /* About: Psalm 27 quote with the old 72px lines, starting right under the quote mark */
  .ab-psalm__box { padding-top: 1.6rem; }
  .ab-psalm__box::before { margin-bottom: .4rem; }
  .ab-psalm__box p { line-height: 7.16rem; }
  .ab-reality__cols { left: 1.4rem; }
}
.ab-grace__text p:last-child { font-style: italic; }
/* Phones: the old Instagram block showed two photos stacked (320 x 220, squares on About) and cut the rest off */
@media (max-width: 749px) {
  .insta .insta__inner { padding: 0; }
  .insta .insta__grid { grid-template-columns: 1fr; gap: 0; padding: 1rem; margin: 3rem 1.5rem 0; }
  .insta .insta__grid a { padding: 1rem; }
  .insta .insta__grid a:nth-child(n+3) { display: none; }
  .insta .insta__grid img { aspect-ratio: 320 / 220; }
  .insta--about .insta__grid { grid-template-columns: 1fr; padding: .5rem; margin: 3rem 1.5rem 0; }
  .insta--about .insta__grid a { padding: .5rem; }
  .insta--about .insta__grid img { aspect-ratio: 1; }
}
/* Footer links: Store · Blog | logo | Contact on wider screens; About · Blog · Store on phones (old site) */
.footer__row > .footer__phone { display: none; }
@media (max-width: 749px) {
  .footer__row > .footer__phone { display: block; order: 1; }
  .footer__row > a:nth-child(2) { order: 2; }
  .footer__row > a:nth-child(1) { order: 3; }
  .footer__row > .footer__desk { display: none; }
}
/* Still (parallax) photo bands: the old site lined the photo up 100px from the top of the screen
   (Psalm band centered; banners near the top) */
@media (min-width: 990px) and (hover: hover) {
  .photo-band, .blog-quote, .join[style] { background-position: 50% 10rem; }
  .blog-banner__bg { background-position: 50% 3.8rem; }
  .post-banner__bg { background-position: 50% .6rem; }
}
/* "Amy<3": the Haute Couture font draws "<3" as a heart (a ligature); never letter-space it */
.sig, .signature, .article p.verse-ref { letter-spacing: 0 !important; font-variant-ligatures: common-ligatures discretionary-ligatures; font-feature-settings: "liga" 1, "dlig" 1; }
/* Phones: banner text shrinks a little on narrow screens so the normal message stays on one line */
@media (max-width: 749px) { .bar { font-size: min(1.69rem, 4.2vw); padding: 0 .8rem; } }
/* Home in the footer (where Donate was): Store · Blog | logo | Contact · Home; first in the phone list */
@media (max-width: 749px) { .footer__row > .footer__home { order: 0; } }

/* ---------- Join the Journey sign-up: text or email (templates/join_form.html). Same look as the shop's. ---------- */
.join form.gtv-join, .hm-join form.gtv-join { display: block; max-width: 64rem; margin: 2.4rem auto 0; text-align: left; color: var(--slate); }
.gtv-join__tabs { display: inline-flex; margin: 0 0 1.2rem; padding: 0; border: 2px solid var(--slate); border-radius: 3rem; overflow: hidden; }
.gtv-join__tabs label { padding: .7rem 2rem; font-size: 1.32rem; letter-spacing: .15rem; text-transform: uppercase; font-weight: 600; cursor: pointer; color: var(--slate); line-height: 1.4; transition: background .15s, color .15s; }
.gtv-join__tabs input:checked + label { background: var(--slate); color: #fff; }
.gtv-join__tabs input:focus-visible + label { outline: 2px solid var(--slate); outline-offset: 2px; }
.gtv-join__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.gtv-join__input { font: inherit; font-size: 1.5rem; letter-spacing: .05rem; height: 4.6rem; padding: 0 1.2rem; border: 2px solid var(--slate); border-radius: 0; background: #fff; color: var(--slate); min-width: 0; width: 100%; box-sizing: border-box; }
.gtv-join__input::placeholder { color: #6f7d83; opacity: 1; text-transform: none; }
.gtv-join__input:focus { outline: 2px solid var(--slate); outline-offset: 1px; }
.gtv-join__btn { height: 4.6rem; padding: 0 2.4rem; border: 0; border-radius: .5rem; background: var(--slate); color: #fff; font: inherit; font-size: 1.32rem; letter-spacing: .2rem; text-transform: uppercase; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gtv-join__btn:hover { background: #34434a; }
.gtv-join__btn:disabled { opacity: .6; cursor: default; }
.gtv-join__fine { margin: 1rem 0 0; font-size: 1.15rem; line-height: 1.6rem; color: #5d6b71; }
.gtv-join__fine a { color: inherit; text-decoration: underline; }
.gtv-join [hidden] { display: none !important; }
.gtv-join .cf-turnstile:empty { display: none; }
.gtv-join .form-msg { margin: .8rem 0 0; }
.gtv-join.is-done .gtv-join__tabs, .gtv-join.is-done .gtv-join__row, .gtv-join.is-done .gtv-join__fine { display: none; }
.join form.gtv-join { text-align: center; }
.join .gtv-join__fine, .join .gtv-join .form-msg { text-align: left; }
@media (min-width: 750px) { .gtv-join__row { grid-template-columns: 16rem 1fr auto; } }

/* Home strip under the welcome: heading + line on the left, sign-up on the right (even padding on phones) */
.hm-join { background: var(--mist); padding: 4rem 0; }
.hm-join__inner { display: grid; gap: 2rem; text-align: center; padding: 0 2rem; min-height: 0; }
.hm-join__title { font-family: var(--script); font-weight: 400; font-size: 4rem; line-height: 1.15; margin: 0 0 .6rem; }
.hm-join__intro p { margin: 0 auto; font-size: 1.6rem; line-height: 2.3rem; max-width: 34rem; }
.hm-join form.gtv-join { margin: 0 auto; width: 100%; }
.hm-join .gtv-join { text-align: center; }
.hm-join .gtv-join__fine, .hm-join .gtv-join .form-msg { text-align: left; }
@media (min-width: 990px) {
  .hm-join { padding: 3.6rem 0; }
  .hm-join__inner { grid-template-columns: 30rem 1fr; gap: 5rem; align-items: center; text-align: left; }
  .hm-join__title { font-size: 4.6rem; }
  .hm-join__intro p { margin: 0; }
  .hm-join form.gtv-join, .hm-join .gtv-join { margin: 0; max-width: 72rem; text-align: left; }
}