/* Dear Darling: the layout shared by the bride stories and the Letters, matched to the owner's Lovable design.

   Bride stories (<article class="story">), in order:
     .sty-bar        a thin bar: "← All stories" and "Bride Stories"
     .sty-head       centered: kicker, h1, .standfirst, .byline
     .sty-hero       the main photo, wide (a portrait photo gets class "crop": cut to a band at most 760px tall)
     .spread         two columns: .t (every paragraph, with the .sty-pull quote where it falls) and .photos (the
                     other photos stacked, spread out to run the height of the words). On phones the words come
                     first and the photos follow.
     .credits        "Who she worked with", the vendors, the link to her reviews, then .after (a related tool and
                     "Married too? Review your vendors")
   then <section class="sty-more"> "More stories." with the other three stories.
   `npm run check` (scripts/check/stories.mjs) checks this build; `npm run balance` measures it in Chrome.

   Letters (<article class="letter">): one centered reading column (780px), as on Lovable's essays:
     .ltr-in > back link, .ltr-kicker, h1, .ltr-sub, figures and paragraphs, .beat lines, .src; then .ltr-end
     (Save to My Wedding and "Married too? Review your vendors"). */

html, body { overflow-x: clip; }
figure { margin: 0; }
figcaption { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B4A50; margin-top: 12px; line-height: 1.5; }

/* the shared header on these pages */
.hs-nav-link { color: #6B4A50; text-decoration: none; transition: color .2s; }
.hs-nav-link:hover { color: #6D1A2A; }
@media (prefers-reduced-motion: reduce) { .hs-nav-link { transition: none; } }

/* ---------- bride stories ---------- */
.dd-page:has(> main > .story) { background: #F2EBE8; }
.story { font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.65; color: #1A1012; }
.sty-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px max(clamp(20px, 5.5vw, 80px), calc((100% - 1440px) / 2 + 80px)); border-bottom: 1px solid #EADFD0;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #6B4A50; }
.sty-bar .back { color: #6B4A50; text-decoration: none; padding: 8px 0; }
.sty-bar .back:hover { color: #6D1A2A; }
.sty-head { max-width: 880px; margin: 0 auto; box-sizing: border-box; padding: 72px 24px 40px; text-align: center; }
.sty-kicker { display: block; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: #6D1A2A; font-weight: 500; }
.sty-head h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08;
  margin: 22px 0 26px; color: #3B0A14; text-wrap: balance; }
.sty-head h1 em { color: #6D1A2A; }
.sty-head .standfirst { margin: -6px auto 26px; max-width: 34em; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 23px; line-height: 1.4; color: #3A2A2E; text-wrap: pretty; }
.byline { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #6B4A50; }
.byline i { color: #6D1A2A; font-style: normal; margin: 0 0.6em; }

.sty-hero { max-width: calc(1176px + 2 * clamp(20px, 5.5vw, 80px)); margin: 0 auto; box-sizing: border-box; padding: 0 clamp(20px, 5.5vw, 80px); }
.sty-hero img { display: block; width: 100%; height: auto; }
.sty-hero.crop img { aspect-ratio: 4 / 5; max-height: 760px; object-fit: cover; object-position: center 30%; }

.spread { max-width: calc(1176px + 2 * clamp(20px, 5.5vw, 80px)); margin: 0 auto; box-sizing: border-box; padding: 0 clamp(20px, 5.5vw, 80px); display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 440px); gap: 72px; justify-content: center; align-items: stretch; }
.spread .t { padding: 64px 0 24px; font-weight: 300; font-size: 18px; line-height: 1.75; }
.spread .t p { margin: 0 0 1.35em; }
.spread .t .beat { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.35; color: #3B0A14; }
.sty-pull { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.3;
  color: #6D1A2A; text-align: center; border-top: 1px solid #EADFD0; border-bottom: 1px solid #EADFD0; padding: 34px 8px; margin: 48px 0; text-wrap: balance; }
.spread .photos { padding: 64px 0 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.spread .photos img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .spread { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* a story told in one column of words: <article class="story words"> and <div class="spread solo"> with just the
   .t column. It may open with the wide .sty-hero photo (as on story-sara.html) and has no other photos; with no
   photo at all, the words sit centered under a hairline with a small mark (.sty-mark) */
.story.words:not(:has(.sty-hero)) .sty-head { padding-bottom: 48px; }
.sty-mark { display: flex; align-items: center; gap: 20px; max-width: 680px; width: calc(100% - 2 * clamp(20px, 5.5vw, 80px)); margin: 0 auto; }
.sty-mark::before, .sty-mark::after { content: ""; flex: 1; height: 1px; background: #EADFD0; }
.sty-mark span { width: 7px; height: 7px; background: #6D1A2A; transform: rotate(45deg); }
.spread.solo { grid-template-columns: minmax(0, 680px); }
.story.words:not(:has(.sty-hero)) .spread.solo .t { padding-top: 48px; }

.credits { max-width: 1176px; width: calc(100% - 2 * clamp(20px, 5.5vw, 80px)); margin: 0 auto; box-sizing: border-box; padding: 40px 0 56px; border-top: 1px solid #EADFD0;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.sty-vendors { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px clamp(32px, 6vw, 88px); }
.sty-vendors > div { display: flex; flex-direction: column; gap: 4px; }
.sty-k { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #6B4A50; }
.sty-v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.2; color: #3B0A14; }
.sty-notes { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 23px; line-height: 1.3; color: #6D1A2A;
  text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sty-notes:hover { color: #3B0A14; }
.sty-photo-credit { font-size: 15px; color: #6B4A50; margin-top: -12px; }

/* after the credits: a related tool or guide, and the call to review her vendors */
.after { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 40px; }
.after a { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0 6px; min-height: 44px; font-size: 15px; line-height: 1.5; color: #3A2A2E; text-decoration: none; }
.after a span { color: #6D1A2A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.after a:hover span { color: #3B0A14; }

/* more stories */
.sty-more { background: #F2EBE8; border-top: 1px solid rgba(26, 16, 18, 0.12); }
.sty-more-in { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: clamp(56px, 6vw, 88px) clamp(20px, 5.5vw, 80px);
  display: flex; flex-direction: column; gap: 32px; }
.sty-more-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.sty-more h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; color: #1A1012; }
.sty-more h2 em { color: #6D1A2A; }
.sty-all { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6D1A2A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.sty-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 40px 24px; }
.sty-card { display: flex; flex-direction: column; gap: 16px; color: #1A1012; text-decoration: none; }
.sty-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sty-card-text { display: flex; flex-direction: column; gap: 8px; }
.sty-card-place { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6B4A50; }
.sty-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 23px; line-height: 1.2; text-wrap: balance; }
.sty-card:hover .sty-card-title { color: #6D1A2A; }
.sty-card-go { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6D1A2A; padding: 8px 0; }

/* ---------- letters ---------- */
.dd-page:has(> main > .letter) { background: #F2EBE8; }
.letter { font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; color: #1A1012; }
.ltr-in { max-width: calc(780px + 2 * clamp(20px, 5.5vw, 80px)); margin: 0 auto; box-sizing: border-box; padding: 48px clamp(20px, 5.5vw, 80px); }
.ltr-back { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6D1A2A;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ltr-kicker { margin: 32px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6D1A2A; }
.letter h1 { margin: 12px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(36px, 3.2vw, 46px); line-height: 1.15; text-wrap: balance; }
.letter h1 em { color: #6D1A2A; }
.ltr-sub { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: #6B4A50; }
.ltr-body { margin-top: 32px; font-size: 17px; line-height: 1.75; color: #1A1012; }
.ltr-body p { margin: 0 0 1.2em; }
.ltr-body h2 { margin: 1.8em 0 0.6em; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.15; scroll-margin-top: 90px; }
.ltr-body h2 em { color: #6D1A2A; }
.ltr-body h3 { margin: 1.6em 0 0.5em; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.2vw, 30px); line-height: 1.2; }
.ltr-body h4, .ltr-body .num { margin: 1.6em 0 0.4em; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.3; color: #6D1A2A; }
.ltr-body .beat { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 23px; line-height: 1.5; color: #6D1A2A; }
.ltr-body .src { margin-top: 28px; font-size: 15px; color: #1A1012; }
.ltr-body .src em { font-style: italic; }
.ltr-body figure { margin: 8px 0 32px; }
.ltr-body figure img { display: block; max-width: 100%; height: auto; max-height: 700px; width: auto; margin: 0 auto; }
.ltr-body figure.wide img { width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
.ltr-body figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ltr-body figure.pair img { width: 100%; max-height: none; }
.ltr-body figure.pair figcaption { grid-column: 1 / -1; margin-top: 0; }
.ltr-end { max-width: 780px; margin: 0 auto; box-sizing: border-box; padding: 32px 20px 56px; border-top: 1px solid #EADFD0;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ltr-save { appearance: none; border: 0; border-radius: 0; background: #6D1A2A; color: #F2EBE8; padding: 12px 24px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; }
.ltr-save:hover { background: #3B0A14; }
.ltr-end p { margin: 0; font-size: 15px; line-height: 1.5; color: #3A2A2E; }
.ltr-end p a { color: #6D1A2A; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 560px) { .ltr-body figure.pair { grid-template-columns: 1fr; } }