/* DESIGN-001: editorial public pages, scoped away from event/account forms. */
.home-story {
  color: var(--gv-ink);
  background-color: var(--gv-bg);
  background-image: url('../images/story/gift-pattern.svg');
  background-repeat: repeat;
  background-position: center 24px;
  background-size: 480px 420px;
}
.home-story *, .home-story *::before, .home-story *::after { box-sizing: border-box; }
.home-story h1, .home-story h2, .home-story h3 { color: var(--gv-brand); text-wrap: balance; }
.home-story h1, .home-story h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.home-story h1 { font-size: clamp(3rem, 5.4vw, 5rem); line-height: 1.04; max-width: 12ch; letter-spacing: -.045em; margin: .8rem 0 1.5rem; }
.home-story h2 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); line-height: 1.13; max-width: 25ch; margin: .65rem 0 1.5rem; letter-spacing: -.025em; }
.home-story h3 { font-size: 1.35rem; line-height: 1.3; margin: .8rem 0; }
.home-story p { line-height: 1.75; max-width: 62ch; }
.home-story .home-eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gv-ink-soft); }
.home-story .home-intro { font-size: 1.2rem; }
.home-story .home-note { font-size: .9rem; color: var(--gv-ink-soft); }
.story-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: 0 0 auto; vertical-align: middle; }
.home-hero { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem) 6rem; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 2rem 0 1rem; }
.home-actions .gv-link { text-decoration: underline; text-underline-offset: .25em; }
.home-hero-visual { position: relative; padding-bottom: 4rem; min-width: 0; }
.home-hero-photo { display: block; width: 100%; height: 490px; object-fit: cover; object-position: 47% center; border-radius: var(--gv-radius); }
.home-photo-label { position: absolute; top: 1rem; left: 1rem; right: 1rem; width: fit-content; max-width: calc(100% - 2rem); display: flex; align-items: center; gap: .65rem; background: #faf7f2; color: var(--gv-brand); padding: .65rem .9rem; font-size: .8rem; font-weight: 700; border-radius: var(--gv-radius); }
.home-photo-label .story-icon { width: 1rem; height: 1rem; }
.home-note-card { position: absolute; bottom: 0; right: 1rem; width: min(78%, 335px); background: #f8e8c8; padding: 1.4rem 1.6rem; border: 1px solid #e7d7b4; border-radius: var(--gv-radius); box-shadow: 0 10px 24px #34271212; transform: rotate(-3deg); }
.home-note-card .home-eyebrow { font-size: .65rem; margin-bottom: .5rem; }
.home-story .home-handwritten { font-family: Georgia, serif; font-size: 1.5rem; line-height: 1.3; color: var(--gv-brand); margin: 0 0 .5rem; }
.home-note-card .home-note { font-size: .8rem; margin: 0; }
.home-occasions { padding-bottom: 4rem; }
.home-occasions > p { text-align: center; max-width: none; margin-bottom: 1.5rem; }
.home-occasion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.home-occasion { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem .75rem; border-radius: var(--gv-radius); font-size: .95rem; font-weight: 700; color: var(--gv-brand); }
.home-occasion .story-icon { width: 1.65rem; height: 1.65rem; }
.home-occasion--birthday { background: #f3ded5; }
.home-occasion--thanks { background: #e7ecd9; }
.home-occasion--gathering { background: #f7e7bb; }
.home-occasion--exchange { background: #e4e9ee; }
.home-opening { background: var(--gv-brand); color: #f6f1e8; padding-block: clamp(3rem, 6vw, 5rem); }
.home-opening-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.home-opening h2 { color: #faf7f2; }
.home-opening .home-eyebrow { color: #cfdecd; }
.home-story .home-emphasis { font-size: 1.2rem; font-weight: 700; margin-top: 1.25rem; }
.home-text-link { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.home-opening .home-text-link { color: #faf7f2; }
.home-reading { max-width: 800px; }
.home-chapter { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: 6rem; }
.home-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.home-steps li { border-top: 1px solid #bac5b6; padding-top: 1.5rem; }
.home-step-top { display: flex; align-items: center; justify-content: space-between; }
.home-step-top .story-icon { color: var(--gv-brand); width: 1.75rem; height: 1.75rem; }
.home-step-number { font-family: Georgia, serif; font-size: 2rem; color: #766349; }
.home-experiences { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.home-experience { border-radius: var(--gv-radius); overflow: hidden; background: #fff; border: 1px solid var(--gv-line); }
.home-experience-photo { display: block; width: 100%; height: 260px; object-fit: cover; }
.home-experience-copy { padding: clamp(1.5rem, 3vw, 2.5rem); }
.home-experience--wishlist { background: #edf2ee; }
.home-experience--exchange { background: #f6e8d6; }
.home-exchange-art { height: 260px; display: grid; place-items: center; position: relative; background: #ead2ba; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 49px, #ffffff32 50px, transparent 51px); }
.home-gift-seal { width: 135px; height: 160px; background: var(--gv-brand); border: 1px solid #ffffff66; border-radius: var(--gv-radius); display: grid; place-items: center; transform: rotate(9deg); box-shadow: -12px 12px 0 #fff9; color: #f5e0b0; }
.home-gift-seal .story-icon { width: 65px; height: 65px; }
.home-art-star { position: absolute; color: #8b482e; font-size: 3rem; }
.home-art-star--one { top: 25px; left: 15%; transform: rotate(15deg); }
.home-art-star--two { bottom: 25px; right: 12%; font-size: 2rem; }
.home-reassurance { border-top: 1px solid var(--gv-line); padding-block: 4rem 5rem; }
.home-care-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.home-care-grid > div > .story-icon { color: var(--gv-brand); width: 1.75rem; height: 1.75rem; }
.home-closing { background: #f2e2c2; padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.home-closing h2, .home-closing p { margin-inline: auto; }
.home-closing .gv-btn { margin-top: 1rem; }
.home-story a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.about-hero { text-align: center; padding-block: clamp(3rem, 6vw, 5rem) 3rem; }
.about-hero h1 { max-width: 18ch; margin-inline: auto; }
.about-hero .home-intro { margin-inline: auto; }
.about-picture { position: relative; margin-block: 0; }
.about-picture img { width: 100%; height: 490px; object-fit: cover; object-position: center 45%; display: block; border-radius: var(--gv-radius); }
.about-picture figcaption { padding-block: .9rem; font-size: .85rem; color: var(--gv-ink-soft); text-align: right; }
.about-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-block: 4.5rem; }
.about-chapter > p { font-size: 1.1rem; }
.about-chapter--image { padding-block: 0; }
.about-chapter--image img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--gv-radius); }
@media (max-width: 850px) {
  .home-hero { gap: 2rem; }
  .home-hero-photo { height: 440px; }
  .home-photo-label { position: static; max-width: 100%; padding: 0 0 1rem; background: none; }
  .home-note-card { width: 90%; right: .5rem; }
  .home-occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .home-story { background-size: 360px 315px; }
  .home-hero, .home-opening-grid, .home-steps, .home-experiences, .home-care-grid, .about-chapter { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .home-hero { padding-top: 2.5rem; padding-bottom: 3rem; }
  .home-story h1 { font-size: clamp(2.8rem, 10vw, 4rem); max-width: 15ch; }
  .home-hero-photo { height: 380px; }
  .home-note-card { width: 76%; }
  .home-occasion { flex-direction: column; text-align: center; }
  .home-occasions { padding-bottom: 3rem; }
  .home-experience-photo, .home-exchange-art { height: 230px; }
  .about-hero h1 { max-width: 17ch; }
  .about-picture img { height: 300px; }
  .about-chapter { padding-block: 3rem; }
  .about-chapter--image { padding-block: 0; }
  .about-chapter--image img { height: 280px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-story .gv-btn { transition: transform .18s ease, background .18s ease; }
  .home-story .gv-btn:hover { transform: translateY(-2px); }
}
