@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');
.ab{position:relative}
.ab{--ink:#111;--bg:#F6F6F6;--orange:#FF431E;--ghost:#FF7054;--cream:#FFF8F0;--butter:#FEF384;--blue:#0A7CC1;--line:#D4D4D4}
.ab *{box-sizing:border-box;margin:0;padding:0}
.ab{scroll-behavior:auto}
.ab{font-family:'Instrument Sans',sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:clip}
.ab img{display:block;max-width:100%}
.ab .wrap{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,48px);position:relative}
.ab h1, .ab h2, .ab h3{font-family:'Playfair','Instrument Sans',serif;font-weight:500;text-transform:uppercase;line-height:1.02;letter-spacing:-.015em}
.ab em.a{font-style:italic;color:var(--orange)}
.ab .hand{font-family:'Caveat',cursive;font-weight:700;color:var(--butter);font-size:clamp(1.9rem,3vw,2.8rem);line-height:.95;display:inline-block;transform:rotate(-7deg)}
.ab .hand.dark{color:var(--blue)}
.ab /* line reveal */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ab .ln>span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.ab .in .ln>span, .ab .ln.in>span{transform:none}
.ab .ln:nth-child(2)>span{transition-delay:.08s}
.ab .ln:nth-child(3)>span{transition-delay:.16s}
.ab .ln:nth-child(4)>span{transition-delay:.24s}
.ab .fade{opacity:0;transform:translateY(24px);transition:opacity .8s ease .15s,transform .8s cubic-bezier(.22,1,.36,1) .15s}
.ab .fade.in{opacity:1;transform:none}
.ab /* tilted photo cards */
.card{position:absolute;border-radius:1.1vw;overflow:hidden;background:#E4E1DA;box-shadow:0 14px 40px rgba(0,0,0,.14);opacity:0;transform:translateY(40px) rotate(var(--r,0deg)) scale(.92);transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.ab .card.live{transition:opacity .9s ease,transform 0s!important}
.ab .card.in{opacity:1;transform:translateY(var(--py,0px)) rotate(var(--r,0deg)) scale(1)}
.ab .card img, .ab .card .ph{width:100%;height:100%;object-fit:cover}
.ab .ph{display:flex;align-items:center;justify-content:center;color:#7a766d;font-size:.72rem;text-align:center;padding:6px}
.ab /* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px}
.ab .hero h1{font-size:clamp(2.8rem,8.2vw,8.6rem);text-align:right;margin-left:auto;max-width:62%}
.ab .hero .blurb{position:absolute;left:clamp(16px,4vw,48px);bottom:18%;max-width:24ch;font-family:'Playfair','Instrument Sans',serif;text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.6rem);line-height:1.15}
.ab .hero .kick{position:absolute;left:clamp(16px,4vw,48px);top:130px;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.ab .c1{left:-3vw;top:7vh;width:22vw;height:15vw;--r:-9deg}
.ab .c2{left:7vw;top:30vh;width:18vw;height:13vw;--r:6deg}
.ab .c3{right:-2vw;bottom:2vh;width:17vw;height:13vw;--r:8deg}
.ab .c4{left:30vw;bottom:5vh;width:12vw;height:15vw;--r:-5deg}
.ab /* orange story section */
.story{position:relative;background:var(--orange);color:#fff;padding:clamp(70px,10vw,150px) 0;overflow:hidden}
.ab .swirl{position:absolute;inset:-10% -10% auto auto;width:70vw;opacity:.16;pointer-events:none}
.ab .ghost{position:absolute;left:0;white-space:nowrap;font-family:'Playfair','Instrument Sans',serif;font-style:italic;text-transform:uppercase;color:var(--ghost);font-size:clamp(5rem,14vw,15rem);line-height:.9;pointer-events:none;will-change:transform}
.ab .story .head{position:relative;text-align:center;margin-bottom:clamp(50px,8vw,120px)}
.ab .story .head h2{font-size:clamp(2rem,5vw,4.6rem);position:relative}
.ab .row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,100px);align-items:center;margin-bottom:clamp(60px,9vw,130px)}
.ab .row.flip .pic{order:2}
.ab .pic{position:relative}
.ab .poly{aspect-ratio:5/4;background:#E4E1DA;clip-path:polygon(0 8%,100% 0,94% 100%,6% 92%);transform:scale(1.08) rotate(1deg);opacity:.2;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .9s ease}
.ab .row.flip .poly{clip-path:polygon(6% 0,100% 10%,100% 90%,0 100%)}
.ab .in .poly{transform:none;opacity:1}
.ab .poly img, .ab .poly .ph{width:100%;height:100%;object-fit:cover}
.ab .pic .hand{position:absolute;left:-1vw;top:-2.4rem}
.ab .row.flip .pic .hand{left:auto;right:-1vw}
.ab .txt h3{font-size:clamp(1.8rem,3.6vw,3.4rem);margin-bottom:14px}
.ab .txt p{max-width:44ch;font-size:clamp(.95rem,1.15vw,1.12rem);opacity:.96}
.ab .note{font-size:.7rem;opacity:.7;margin-top:14px}
.ab /* closing, .ab cream */
.close{position:relative;background:var(--cream);padding:clamp(80px,11vw,170px) 0;overflow:hidden;text-align:center;border-top:2px solid var(--ink)}
.ab .close .ghost{color:#F4E4D3;left:0}
.ab .close h2{position:relative;font-size:clamp(2.4rem,7vw,6.4rem)}
.ab .close h2 span.ln:last-child{color:var(--orange)}
.ab .close p{position:relative;max-width:46ch;margin:18px auto 0;font-size:clamp(1rem,1.3vw,1.2rem)}
.ab .btn{position:relative;display:inline-block;margin-top:28px;padding:1rem 2rem;border-radius:999px;background:var(--orange);color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:2px solid var(--ink)}
@media(max-width:820px){.ab .hero{padding-top:110px;min-height:0;display:block}
.ab .hero h1{max-width:100%;margin-top:150px}
.ab .hero .blurb{position:static;margin-top:28px;max-width:30ch}
.ab .hero .kick{top:100px}
.ab .card{border-radius:12px}
.ab .c1{width:38vw;height:26vw;top:140px}
.ab .c2{display:none}
.ab .c3{position:relative;display:block;right:auto;bottom:auto;width:60vw;height:40vw;margin:32px 0 0 auto}
.ab .c4{display:none}
.ab .row, .ab .row.flip{grid-template-columns:1fr}
.ab .row.flip .pic{order:0}
.ab .pic .hand, .ab .row.flip .pic .hand{left:0;right:auto;top:-2.2rem}}
@media(prefers-reduced-motion:reduce){.ab .ln>span, .ab .fade, .ab .card, .ab .poly{transition:none!important;transform:none!important;opacity:1!important}
.ab .ghost{transform:none!important}}