@import url('glass.css');
@import url('florals.css');
/* A real watercolor corner, outside the copy and the animated envelope. */
.chapter.hero::before{background-image:url('assets/florals/rose-sweetpea-corner.webp');width:280px;height:280px;top:100px;right:0;opacity:.72;transform:rotate(180deg)}
/* On phones the card and envelope are the complete composition. */
@media(max-width:700px){.chapter.hero::before{content:none;display:none;background-image:none}}
/* A romantic stationery collection, with generous readable type. */
@media(max-width:700px){
  .chapter.hero h1{max-width:none;font-size:clamp(34px,11vw,58px);line-height:1.04;letter-spacing:-.035em}
  .chapter.hero h1 .hero-phrase{display:block;white-space:nowrap}
  .chapter.hero h1 > br{display:none}
  .chapter.hero h1 .hero-desktop-break{display:none}
  .chapter.hero h1 em{display:block;padding-left:0}
}
.site-header{background:#fff6ee;background:var(--header-surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header::before{background:none}
:root{--muted:#936959} [data-theme="dark"]{--muted:#cc9aae}
.site-header{padding:24px 5vw}.site-header .brand{font-size:30px}.site-header nav a{font-size:12px}.theme-toggle{font-size:12px}
.chapter .lead{font-size:16px;line-height:1.8;max-width:400px}.eyebrow{font-size:10px;letter-spacing:.16em}.features p,.steps p,.faq p{font-size:13px;line-height:1.8}.features h3{font-size:24px}.micro{font-size:10px}.text-link{font-size:13px}.button{font-size:13px}.faq summary{font-size:22px}.faq details{padding:22px 0}.hero h1{margin-top:28px}.chapter{padding-top:145px}
.collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:450px}.collection-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 17px 20px;transition:transform .3s,border-color .3s}.collection-card:hover{transform:translateY(-5px);border-color:var(--accent)}.collection-card img{width:100%;height:125px;object-fit:contain;transition:transform .6s}.collection-card:hover img{transform:rotate(-4deg) scale(1.05)}.collection-card strong{font:500 22px var(--serif)}.collection-card span{font:11px/1.5 var(--sans);color:var(--muted);margin-top:7px}.collection-card i{position:absolute;right:13px;top:13px;font-style:normal;color:var(--accent)}.collection .content{width:46%}.collection{min-height:115svh}.landing-footer{gap:24px}.landing-footer a{font-size:12px}
@media(max-width:1000px){.site-header nav{gap:11px}.site-header nav a{font-size:10px}.site-header{gap:12px}.collection-card strong{font-size:20px}}
@media(max-width:700px){.chapter{padding-top:120px}.chapter .lead{font-size:14px}.features p,.steps p,.faq p{font-size:12px}.features h3{font-size:22px}.collection .content{width:100%}.collection-card img{height:110px}.collection-card{padding:10px 12px 17px}.collection-card strong{font-size:21px}.site-header{padding:18px 16px}.site-header .brand{font-size:25px}.landing-footer{gap:18px}.landing-footer>a:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.collection-card,.collection-card img{transition:none}}

/* Phone-sized stationery: readable copy and comfortable controls, without
   changing the desktop composition or the continuous envelope animation. */
@media(max-width:700px){
  .site-header{gap:8px;padding:12px 16px}
  .site-header .brand{font-size:24px}
  .theme-toggle,.header-cta{min-height:44px}
  .chapter{padding-top:112px;padding-inline:22px}
  .chapter .lead{font-size:16px;line-height:1.75}
  .hero h1{font-size:clamp(46px,13.8vw,66px)}
  h2{font-size:clamp(38px,11.5vw,52px)}
  .finale h2{font-size:clamp(42px,12vw,56px)}
  .eyebrow{font-size:10px;line-height:1.6;letter-spacing:.12em}
  .actions{gap:12px;flex-wrap:wrap}
  .button,.text-link{min-height:44px;font-size:13px}
  .micro{font-size:11px;line-height:1.7}
  .features p,.steps p,.faq p{font-size:14px;line-height:1.75}
  .features{gap:26px 18px}
  .features h3{font-size:24px}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .collection-card{min-width:0;padding:12px 13px 18px}
  .collection-card span{font-size:13px}
  .occasions button{min-height:44px;font-size:13px;padding-inline:15px}
  .faq summary{font-size:23px;line-height:1.25;min-height:44px}
  .restart{min-height:44px;font-size:12px}
  .landing-footer{padding-bottom:max(25px,env(safe-area-inset-bottom))}
}
@media(max-width:370px){
  .site-header{display:grid;grid-template-columns:1fr auto;gap:6px 12px}
  .site-header .brand{font-size:25px}
  .site-header .header-cta{grid-column:1 / -1;justify-content:center;padding:10px 16px}
  .chapter{padding-top:150px;padding-inline:18px}
  .features{grid-template-columns:1fr}
  .features>div{display:flex;gap:14px}
  .collection-grid{grid-template-columns:1fr}
  .collection-card img{height:145px}
  html{scroll-padding-top:125px}
}

/* A few larger painted blooms carry the landing's flower motif between chapters. */
.site-header .landing-account{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);text-decoration:none;transition:transform .25s,border-color .25s}
.site-header .landing-account:hover{transform:translateY(-2px);border-color:var(--accent)}
.site-header .landing-account[hidden]{display:none}
.landing-account-avatar{display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:50%;font:600 14px var(--sans);color:var(--ink)}
.landing-account-avatar svg{display:block;width:23px;height:23px}
@media(min-width:701px){
  #landing>.chapter:not(.hero){isolation:isolate}
  #landing>.chapter:not(.hero)>.content{position:relative;z-index:1}
  #inside::after,#collection::after,#questions::after{
    content:'';position:absolute;z-index:0;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:contain;
  }
  #inside::after{right:2vw;bottom:12%;width:clamp(190px,22vw,330px);height:clamp(260px,34vw,450px);background-image:var(--floral-meadow);opacity:.72}
  #collection::after{right:0;top:12%;width:clamp(230px,28vw,390px);height:clamp(230px,28vw,390px);background-image:var(--floral-corner);transform:scaleX(-1);opacity:.78}
  #questions::after{right:4vw;bottom:12%;width:clamp(190px,22vw,300px);height:clamp(190px,22vw,300px);background-image:var(--floral-corner);opacity:.68}
}
@media(max-width:700px){
  .site-header .landing-account{width:44px;height:44px}
  .site-header .header-cta{margin-left:0}
  .site-header .landing-account + .header-cta{margin-left:auto}
  .landing-account-avatar{width:34px;height:34px}
}
@media(max-width:370px){
  .site-header .landing-account{width:40px;height:40px}
  .site-header .landing-account-avatar{width:32px;height:32px}
}

/* Keep the finished ribbon above the footer instead of letting its lower loop
   disappear behind the footer bar. The phone illustration expands only for
   the final ribbon scene, leaving earlier scenes at their compact size. */
@media(min-width:701px){.continuous-art .layer-ribbon svg{transform:translateY(-90px)}}
@media(max-width:700px){
  .continuous-art.is-ribbon{height:44svh;max-height:300px}
  .continuous-art.is-ribbon .layer-ribbon{transform:none}
  .continuous-art.is-ribbon .layer-ribbon svg{position:absolute;inset:auto;left:50%;top:50%;width:min(88vw,280px);height:min(88vw,280px);transform:translate(-50%,-50%)}
  .continuous-art.is-ribbon .silk{filter:none}
}
@media(max-width:370px){.continuous-art.is-ribbon .layer-ribbon{transform:none}}

@media(max-width:700px){
  .chapter{min-height:0;padding:92px 22px 100px}
  .hero{min-height:100svh;padding-top:112px;padding-bottom:190px}
  .finale{min-height:90svh;padding-bottom:320px}
  .finale h2{max-width:none}
  .continuous-art{z-index:3;pointer-events:none;height:18svh;max-height:145px;opacity:.5;transition:height .45s ease,max-height .45s ease}
  .continuous-art .art{transform:scale(.42)}
  .chapter .content{position:relative;z-index:2}
}
@media(max-width:370px){
  .site-header{display:flex;flex-wrap:nowrap;gap:5px;padding:10px 12px}
  .site-header .brand{font-size:21px}
  .theme-toggle{padding:7px 8px;font-size:10px;min-height:40px}
  .site-header .header-cta{grid-column:auto;margin-left:auto;padding:7px 10px;gap:0;font-size:10px;min-height:40px;white-space:nowrap}
  .header-cta span{display:none}
  .hero{padding-top:102px;padding-inline:18px}
  .hero h1{font-size:clamp(43px,13.5vw,50px);margin:18px 0}
  .hero .lead{font-size:14px;line-height:1.6;margin-bottom:18px}
  .hero .micro{display:none}
}
@media(prefers-reduced-motion:reduce){.continuous-art{transition:none}}

/* One shared desktop spread. Copy and artwork use the same bounded canvas,
   rather than drifting apart as the viewport gets wider. Phone art stays over
   the content, as before. */
@media(min-width:701px){
  :root{
    --spread-width:1280px;
    --spread-gutter:clamp(28px,5vw,80px);
    --spread-inner:min(calc(100vw - var(--spread-gutter) * 2),var(--spread-width));
    --spread-edge:max(var(--spread-gutter),calc((100vw - var(--spread-width)) / 2));
    --spread-halo-height:min(65svh,calc(var(--spread-inner) * .535));
  }
  .site-header{padding-inline:var(--spread-edge)}
  .chapter{padding:132px 0 100px;min-height:100svh}
  .chapter .content,.collection .content{
    margin-left:var(--spread-edge);
    width:calc(var(--spread-inner) * .47);
    max-width:none;
  }
  .continuous-art .art{
    left:calc(50% + var(--spread-inner) * .015);
    width:calc(var(--spread-inner) * .515);
    top:14svh;height:70svh;
  }
  .continuous-art::before{
    content:'';position:absolute;
    left:calc(50% + var(--spread-inner) * .04);
    top:calc(54svh - var(--spread-halo-height) / 2);
    width:calc(var(--spread-inner) * .465);height:var(--spread-halo-height);
    border:1px solid var(--line);border-radius:50% 50% 46% 46%;
    background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);
    opacity:.38;
  }
  .continuous-art .envelope{width:clamp(280px,30vw,440px);height:auto;aspect-ratio:17 / 11}
  .continuous-art .seal{left:calc(50% - 24px);top:53%}
  .hero h1{font-size:clamp(60px,6.6vw,104px);line-height:.98;letter-spacing:-.045em}
  .chapter .lead{max-width:32rem;font-size:clamp(16px,1.2vw,18px);line-height:1.75;text-wrap:pretty}
  .chapter h2{font-size:clamp(48px,5.1vw,78px)}
  .features,.steps,.collection-grid,.faq,.prompt-card{max-width:none}
  .features p,.steps p,.faq p{font-size:15px;line-height:1.75}
  .features h3,.steps h3{font-size:26px}
  .collection-grid{gap:18px}
  .collection-card{padding:18px 20px 24px;border-radius:5px 20px 20px 20px}
  .collection-card img{height:150px}
  .collection-card strong{font-size:26px}
  .collection-card span{font-size:13px}
  .steps li{padding-block:24px}
  .faq p{max-width:30rem}
  .prompt-card{padding:30px 34px;border:1px solid var(--line)}
  .prompt-card p{font-size:28px}
  .occasions{max-width:none;gap:9px}
  .occasions button{font-size:12px;min-height:42px}
  .story-indicator{
    left:calc(50% + var(--spread-inner) * .2725);right:auto;
    bottom:9svh;transform:translateX(-50%);
    display:flex;align-items:center;gap:14px;
    white-space:nowrap;font:12px var(--sans);letter-spacing:.045em;
  }
  .story-indicator::before{content:attr(data-step);font:italic 24px var(--serif);color:var(--accent)}
  .story-indicator::after{content:'';width:38px;height:1px;background:var(--line)}
  .landing-footer{padding-inline:var(--spread-edge)}
}
@media(min-width:1100px){
  .features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px}
  .features>div{display:block;margin:0}
  .feature-icon{margin-bottom:14px;width:44px;height:44px}
  .features h3{font-size:25px}
}
@media(min-width:701px) and (max-width:1000px){
  .site-header{padding-inline:24px;gap:12px}
  .site-header .brand{font-size:26px}
  .site-header nav{gap:10px}
  .chapter .content,.collection .content{width:calc(var(--spread-inner) * .48)}
  .hero h1{font-size:clamp(54px,7.3vw,72px)}
  .chapter h2{font-size:clamp(43px,5.5vw,55px)}
  .chapter .lead{font-size:16px}
  .collection-card{padding:12px 12px 18px}
  .collection-card img{height:110px}
  .collection-card strong{font-size:22px}
  .prompt-card{padding:22px}
  .prompt-card p{font-size:25px}
  .story-indicator{font-size:10px;gap:9px}
}