/* Option 2: The Thread (v3). Five full-screen snap pages like the home page:
   hero, three copy + iMessage phone pages, closing page with the footer.
   Phone markup + bubble styles come from styles.css (home page mockup). --s and --hdr are set by o2-snap.js. */
html.o2-snap{scroll-snap-type:y mandatory}
@media (prefers-reduced-motion:no-preference){html.o2-snap{scroll-behavior:smooth}}
.o2-snap .nav,.o2-pg{scroll-snap-align:start;scroll-snap-stop:always}
.o2-pg{display:flex;flex-direction:column;justify-content:center;height:100vh;height:100dvh;padding-top:0;padding-bottom:0}
.o2-pg.o2-hero{height:calc(100vh - var(--hdr,122px));height:calc(100dvh - var(--hdr,122px))}
.o2-pg.o2-close{height:calc(100vh - var(--ft,70px));height:calc(100dvh - var(--ft,70px))}

/* 1. hero: one centered block (heading, lead, the intro thread as real iMessage bubbles) */
.o2-hero{align-items:center;text-align:center;padding-bottom:min(4vh,40px)}
.o2 h1{font:900 min(8.6vw,15vh,150px)/.94 var(--display);letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
.o2 h1 span{color:var(--pink);display:inline;white-space:nowrap}
.o2 .o2-lead{margin:min(3.4vh,32px) auto 0;max-width:30em;font:400 min(2vw,3.3vh,30px)/1.34 var(--body);letter-spacing:-.015em;color:#151517;text-align:center}
.o2-stack{--k:min(1,calc(100vh / 900px));position:relative;display:flex;flex-direction:column;width:min(560px,100%);margin:min(5.4vh,52px) auto 0;padding:0 8px;text-align:left}
.o2-stack .b{max-width:78%;font-size:min(20px,2.5vh);line-height:1.25;padding:.4em .75em .42em}
.o2-stack .b+.b{margin-top:min(10px,1.2vh)}
.o2-stack .b.in::after,.o2-stack .b.out::after{background:var(--bg,#fff)}

/* 2-4. copy + phone, centered as a pair */
.o2-row{display:grid;grid-template-columns:minmax(0,600px) auto;justify-content:center;align-content:center;align-items:center;column-gap:clamp(64px,9vw,200px)}
.o2 .o2-k{font:600 15px/1 var(--body);letter-spacing:.02em;color:var(--pink);margin-bottom:18px}
.o2-copy h2{font:800 min(4.2vw,7.4vh,68px)/1.03 var(--display);letter-spacing:-.035em;color:var(--ink);margin-bottom:min(3vh,26px)}
.o2 .o2-copy p:not(.o2-k){font-size:min(1.5vw,2.6vh,22px);line-height:1.6;max-width:27em}
.o2 .o2-phone{display:block;position:relative;flex:none;width:calc(414px*var(--s,.8));height:calc(874px*var(--s,.8));margin:0}
.o2 .o2-phone .chat{justify-content:flex-end;padding-bottom:18px}
.o2 .o2-phone .b{max-width:290px}
@media (min-width:761px){
  .o2-flip{grid-template-columns:auto minmax(0,600px)}
  .o2-flip .o2-phone{order:-1}
}

/* 5. closing: one centered block, footer at the bottom of the same screen */
.o2-close{align-items:center;text-align:center}
.o2 .o2-final{font:900 min(5.6vw,10vh,96px)/1.02 var(--display);letter-spacing:-.045em;color:var(--ink);max-width:12em;text-wrap:balance}
.o2 .o2-sub{margin:min(3.4vh,30px) auto 0;max-width:30em;font-size:min(1.7vw,2.8vh,24px);text-align:center}
.o2-close .cta{margin-top:min(5.4vh,52px)}
.o2 .o2-tag{margin-top:20px;font:500 16px/1 var(--body);color:#6E6E73;text-align:center}
.o2-snap .site-foot{scroll-snap-align:none}

@media (max-width:760px){
  html.o2-snap{scroll-padding-top:var(--hdr,64px)}
  /* the header is sticky on phones, so every page is the screen under it */
  .o2-pg,.o2-pg.o2-hero{height:calc(100vh - var(--hdr,64px));height:calc(100svh - var(--hdr,64px))}
  .o2-pg.o2-close{height:calc(100vh - var(--hdr,64px) - var(--ft,70px));height:calc(100svh - var(--hdr,64px) - var(--ft,70px))}
  .o2-hero{padding-bottom:12px}
  /* "About MyHomegirl" stays on one line: sized to the column */
  .o2 h1{font-size:min(calc((100vw - 32px) / 9.9),60px);line-height:1}
  .o2 .o2-lead{font-size:20px;margin-top:18px}
  .o2-stack{margin-top:36px;padding:0}
  .o2-stack .b{font-size:17px}
  .o2-stack .b+.b{margin-top:8px}
  .o2-row{grid-template-columns:1fr;justify-items:center;row-gap:18px;text-align:center}
  .o2 .o2-k{margin-bottom:10px}
  .o2-copy h2{font-size:30px;margin-bottom:0}
  /* phone pages show the heading + the thread; the paragraph lives on desktop */
  .o2 .o2-copy p:not(.o2-k){display:none}
  .o2 .o2-final{font-size:40px;line-height:1.06}
  .o2 .o2-sub{font-size:19px}
  .o2-close .cta{margin-top:36px}
  /* footer: one row like the other pages */
  .about-page.abx-2 .site-foot{gap:14px;flex-wrap:nowrap;white-space:nowrap;font-size:12px}
}
/* v3 fixes: keep each page's phone shadow inside its own page; bubbles always left/right aligned like iMessage */
.o2-pg{overflow:clip}
.o2 .o2-phone{text-align:left}
.o2-stack .b{font-size:min(22px,2.7vh)}
@media (max-width:760px){
  .o2 .o2-lead{font-size:21px;margin-top:22px}
  .o2-stack{margin-top:44px}
  .o2-stack .b{font-size:19px}
  .o2-stack .b+.b{margin-top:10px}
  .o2 .o2-final{font-size:46px}
  .o2 .o2-sub{font-size:20px;margin-top:26px}
  .o2-close .cta{margin-top:44px}
}
@media (max-width:760px){.o2-stack .b{max-width:86%}.o2 .o2-final{font-size:42px}}

/* v4 closing: page 5 is the 4th story step, same layout and type as pages 2 to 4 (phone left) */
.o2-end{text-align:left}
.o2-end .o2-copy .cta{margin-top:min(4.4vh,40px)}
.o2-end .o2-copy p.o2-tag{margin-top:16px;font:500 15px/1 var(--body);color:#6E6E73;text-align:left}
@media (min-width:761px){.o2-end .o2-copy .cta{display:inline-flex;align-self:flex-start;width:auto}
  .o2-end .o2-act{display:inline-flex;flex-direction:column;align-items:center}
  .o2-end .o2-copy p.o2-tag{text-align:center}}
@media (max-width:760px){.o2-end{text-align:center}.o2-end .o2-copy .cta{margin-top:20px}}
@media (max-width:760px){.o2-end .o2-act{display:flex;flex-direction:column}}