.pipp-doodle-page { overflow-x: hidden; color: #7e7e7e; }
.pipp-doodle-hero { position: relative; isolation:isolate; height: clamp(560px, 52vw, 900px); min-height: 560px; overflow: hidden; }
.pipp-doodle-hero::after { position:absolute; z-index:1; display:block; inset:0; background:rgba(62,47,20,.25); content:""; pointer-events:none; }
.pipp-doodle-hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pipp-doodle-hero-mobile { display:none; }
.pipp-doodle-mobile-copy { display:none; }
.pipp-doodle-hero .pipp-outline-button { position: absolute; z-index: 2; left: 50%; bottom: 45px; display:flex; width:300px; min-height:64px; box-sizing:border-box; align-items:center; justify-content:center; padding:12px 35px; transform:translateX(-50%); white-space:nowrap; text-align:center; font-size:28px; }
.pipp-doodle-catalog { padding: 105px 40px 145px; background: #fff; }
.pipp-doodle-intro { width: min(100%, 1536px); margin: 0 auto 55px; text-align: center; }
.pipp-doodle-intro h1 { width:min(100%,1400px); margin:0 auto 20px; }
.pipp-doodle-intro h1 svg { display:block; width:100%; overflow:visible; }
.pipp-doodle-intro h1 text { fill:#cdb1a6; font:400 68px "FuturaHandwritten",sans-serif; letter-spacing:1px; }
.pipp-doodle-intro p { max-width: 1400px; margin: auto; color: #cdb1a6; font: 400 49.97px/1.35 "Cormorant", serif; }
.pipp-color-dots { display: flex; justify-content: center; gap: 8px; margin-top: 45px; }
.pipp-color-dots i { width: 49.97px; height: 49.97px; border-radius: 50%; background: #eee8dc; }
.pipp-color-dots i:nth-child(3n){background:#b8c1b0}.pipp-color-dots i:nth-child(4n){background:#8dc6e8}.pipp-color-dots i:nth-child(5n){background:#e4b7b3}.pipp-color-dots i:nth-child(7n){background:#f1ca58}
.pipp-letter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 34px 28px; width: min(100%,1536px); margin: auto; }
.pipp-letter-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.pipp-letter-swatches { display:flex; align-items:center; gap:5px; min-height:18px; margin-top:10px; }
.pipp-letter-swatches i { width:20px; height:20px; border-radius:50%; background:#e8e4d9; }
.pipp-letter-swatches i:nth-child(2){background:#b8c1b0}.pipp-letter-swatches i:nth-child(3){background:#f0c95c}.pipp-letter-swatches i:nth-child(4){background:#8cc7e4}.pipp-letter-swatches i:nth-child(5){background:#e6b2b0}.pipp-letter-swatches i:nth-child(6){background:#cdb4dc}.pipp-letter-swatches i:nth-child(7){background:#f2a550}.pipp-letter-swatches i:nth-child(8){background:#aaa}
.pipp-letter-swatches small { margin-left:3px; font:400 10px "Montserrat",sans-serif; color:#999; }
.pipp-letter-card h2,.pipp-letter-card p { margin: 7px 0 0; font-family:"Montserrat",sans-serif; color:#7e7e7e; }
.pipp-letter-card h2 { font-size:24px; font-weight:600; }.pipp-letter-card p { margin-top:5px; font-size:20px; }
.pipp-doodle-ribbon { --pipp-ribbon-visible:4; padding:24px 0; }
.pipp-doodle-ribbon .pipp-icon-slide { width:25vw; flex-basis:25vw; padding:0 70px; }
.pipp-doodle-ribbon .pipp-icon-slide img { width:min(100%,150px); }
.pipp-doodle-how { padding: 95px 40px; background:#fff; }
.pipp-doodle-how-inner { display:grid; grid-template-columns:1fr 1fr; gap:100px; width:min(100%,1536px); margin:auto; align-items:center; }
.pipp-doodle-how h2 { margin:0 0 38px; color:#cfae9f; font:400 40px "FuturaHandwritten",sans-serif; }
.pipp-how-lead { max-width:720px; margin:0 0 30px; color:#cfae9f; font:400 28px/1.55 "Montserrat",sans-serif; }
.pipp-doodle-how ol { margin:0; padding-left:28px; font:400 24px/1.65 "Montserrat",sans-serif; }
.pipp-how-visual { display:block; width:100%; aspect-ratio:1.25; object-fit:cover; }
.pipp-how-visual-mobile { display:none; }
.pipp-doodle-family { padding-top:85px; padding-bottom:100px; background:#f4f1ea; }
.pipp-doodle-family .pipp-inner { width:min(calc(100% - 80px),1536px); }
.pipp-doodle-family .pipp-section-title { margin-bottom:55px; font-size:40px; }
@media (max-width: 767px) {
 .pipp-doodle-page .pipp-home-header{position:absolute;top:0;left:0;width:100%;z-index:20}.pipp-doodle-page .pipp-nav-background{background:transparent}
 .pipp-doodle-hero{height:min(150vw,765px);min-height:0}.pipp-doodle-page .pipp-doodle-hero::after{z-index:1;display:block!important;background:rgba(62,47,20,.25)!important;content:""}.pipp-doodle-hero-desktop{display:none}.pipp-doodle-hero>img.pipp-doodle-hero-mobile{position:relative;z-index:0;display:block;object-position:center;transform:none}.pipp-doodle-mobile-copy{position:absolute;z-index:2;right:20px;bottom:83px;display:block;width:76%;text-align:right}.pipp-doodle-mobile-copy h1{margin:0;color:#fff;font:400 47px/1.05 "Cormorant",serif;text-align:right}.pipp-doodle-hero .pipp-outline-button{right:20px;bottom:27px;left:auto;width:145px;min-height:42px;padding:7px 16px;transform:none;font-size:13px}
 .pipp-doodle-catalog{padding:35px 20px 55px;overflow:hidden}.pipp-doodle-intro{margin-bottom:24px}.pipp-doodle-intro h1{width:100%;margin:0 auto 2px;overflow:hidden}.pipp-doodle-intro h1 svg{width:100%;max-width:100%;margin-left:0}.pipp-doodle-intro h1 text{font-size:58px;letter-spacing:1px}.pipp-doodle-intro p{max-width:100%;margin:0 auto;font-size:15px;line-height:1.35}.pipp-color-dots{flex-wrap:wrap;margin-top:20px;gap:4px}.pipp-color-dots i{width:19px;height:19px;flex:0 0 19px}
 .pipp-letter-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.pipp-letter-card{min-width:0}.pipp-letter-card h2,.pipp-letter-card p{font-size:12px}.pipp-letter-swatches{gap:3px;margin-top:7px;overflow:hidden}.pipp-letter-swatches i{width:9px;height:9px;flex:0 0 9px}.pipp-letter-swatches small{font-size:7px}
 .pipp-doodle-ribbon{display:none}
 .pipp-doodle-how{padding:60px 40px 70px;border-top:5px solid #b8c1b0}.pipp-doodle-how-inner{display:block}.pipp-doodle-how h2{margin-bottom:35px;font-size:25px}.pipp-how-lead{margin-bottom:28px;font-size:17px;line-height:1.7}.pipp-how-visual-mobile{display:block;margin:0 0 30px;aspect-ratio:1.05;min-height:0}.pipp-how-visual-desktop{display:none}.pipp-doodle-how ol{padding-left:16px;font-size:11px;line-height:1.75}
 .pipp-doodle-family{padding:42px 0 38px}.pipp-doodle-family .pipp-inner{width:100%}.pipp-doodle-family .pipp-section-title{margin:0 35px 30px;font-size:17px}.pipp-doodle-family .pipp-family-grid{display:flex;grid-template-columns:none;grid-template-rows:none;gap:2px;width:100%;overflow-x:auto;scroll-snap-type:x proximity}.pipp-doodle-family .pipp-family-grid img:nth-child(n){width:210px;height:250px;flex:0 0 210px;object-fit:cover;scroll-snap-align:start}
}

@media (max-width: 600px) {
    .pipp-doodle-mobile-copy {
        right: 16px;
        width: 70%;
    }

    .pipp-doodle-mobile-copy h1 {
        font-size: 38px;
        line-height: 1.02;
    }

    .pipp-doodle-hero .pipp-outline-button {
        right: 16px;
    }

    .pipp-letter-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pipp-letter-card {
        width: 100%;
    }

    .pipp-letter-card h2,
    .pipp-letter-card p {
        font-size: 13px;
    }
}