/* City backdrops sit behind the prints and fade into the surrounding pink. */
.city-backdrop{position:relative;isolation:isolate}
.city-backdrop::before{content:"";position:absolute;inset:-25px -4%;z-index:-1;pointer-events:none;background-image:var(--city-image);background-position:center;background-size:cover;opacity:.46;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 89%,transparent),linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.city-paris{--city-image:url('assets/paris-map.jpeg')}
.city-new-york{--city-image:url('assets/new-york-map.jpeg')}
.city-toronto{--city-image:url('assets/toronto-pink-texture.jpeg')}
.city-backdrop.food-city{padding:24px 12px 30px}
.city-backdrop figcaption{background:#fce5ebd9;width:fit-content;max-width:100%;margin:0 auto;padding:8px 12px;border-radius:2px}
.city-backdrop.food-city h4{position:relative;width:fit-content;background:#fce5ebd9;padding:0 14px}
@media(max-width:600px){.city-backdrop::before{inset:-15px -6%;opacity:.5}.city-backdrop.food-city{padding:16px 0 24px}}
/* Three collected worlds, composed from Dee's own photographs. */
.categorized-portfolio{position:relative;isolation:isolate;overflow:hidden}
.collage-index{display:flex;flex-wrap:wrap;gap:12px 28px;margin:12px 0 70px;font-size:18px}
.collage-index a{color:inherit;text-decoration:none;border-bottom:1px solid #ad657c;padding:8px 0}
.collage-index a:hover,.collage-index a:focus-visible{color:#8c365c;border-bottom-width:2px}
.collage-chapter{position:relative;padding:55px 0 80px;scroll-margin-top:180px;border-top:1px solid #b46d8855}
.collage-heading{text-align:center;margin:0 auto 55px;position:relative;z-index:2}
.collage-heading h3{font-family:Ballet,cursive;font-size:clamp(64px,8vw,112px);font-weight:400;line-height:1.5;margin:8px 0 0}
.collage-heading p{font-size:20px;margin:8px 0 0}
.scrap-group{margin:0;min-width:0;position:relative}
.scrap-photos{display:flex;align-items:center;position:relative;padding:16px 8px 25px}
.scrap-print{background:#fff9f2;padding:8px;box-shadow:0 7px 18px #44132824;position:relative;min-width:0;transform:rotate(-3deg);margin:0}
.scrap-print img{display:block;width:100%;height:auto!important;object-fit:contain!important;max-height:none!important;border-radius:0}
.scrap-photos>.scrap-print{flex:1 1 0}
.scrap-photos>.scrap-print:nth-child(even){transform:rotate(4deg) translateY(18px);z-index:1}
.scrap-photos>.scrap-print+.scrap-print{margin-left:-7%}
.scrap-group:nth-child(even) .scrap-print:first-child{transform:rotate(3deg)}
.scrap-group figcaption{position:relative;z-index:2;text-align:center;padding:12px 4px 0;color:#441328}
.scrap-name{display:block;font-size:21px;line-height:1.3}
.scrap-city{display:block;font:14px/1.5 Arial,sans-serif;margin-top:6px;letter-spacing:.04em}
.fashion-cities>.scrap-group{margin-bottom:65px}
.fashion-cities .scrap-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:center;padding:20px 3% 35px}
.fashion-cities .scrap-print+.scrap-print{margin-left:-5%}
.fashion-cities .scrap-print:nth-child(3n){transform:rotate(-5deg) translateY(-12px)}
.fashion-cities .scrap-count-6 .scrap-photos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px;max-width:1000px;margin:auto}
.fashion-cities .scrap-group>.scrap-photos+figcaption .scrap-name,.food-city h4{font-family:Ballet,cursive;font-weight:400;font-size:52px;line-height:1.5}
.credited-portraits{display:flex;justify-content:center;align-items:center;max-width:540px;margin:45px auto 0;padding:15px}
.credited-portraits .scrap-print{width:52%}
.credited-portraits .scrap-print+figure{transform:rotate(5deg);margin-left:-4%;margin-top:35px}
.credited-portraits figcaption{font:14px/1.5 Arial,sans-serif;text-align:center;padding-top:8px}
.food-city{margin:0 0 65px}
.food-city h4{margin:0 0 20px;text-align:left}
.food-scraps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px 28px;align-items:start;padding:0 12px}
.food-scraps .scrap-count-2{grid-column:span 2}
.food-scraps .scrap-count-2 .scrap-photos{max-width:630px;margin:auto}
.food-scraps .scrap-group:nth-child(3n+2){padding-top:30px}
.gourmandise-chapter::before,.wellness-chapter::before{content:"";position:absolute;inset:0 -10%;z-index:-1;pointer-events:none;background:url('assets/soft-rose.jpeg') center/cover;opacity:.14;mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.wellness-chapter::before{background-image:url('assets/rose-lace.jpeg');opacity:.2}
.wellness-scraps{display:grid;grid-template-columns:1fr 1fr;gap:70px 45px;align-items:center}
.wellness-scraps .scrap-count-3{grid-column:span 2}
.wellness-scraps .scrap-count-3 .scrap-photos{max-width:1000px;margin:auto}
.wellness-scraps .scrap-count-1{max-width:320px;justify-self:center}
@media(max-width:600px){
 .collage-index{gap:12px 20px;font-size:16px;margin-bottom:35px;justify-content:center}
 .collage-chapter{padding:35px 0 50px;scroll-margin-top:165px}
 .collage-heading{margin-bottom:25px}
 .collage-heading h3{font-size:62px;line-height:1.6}
 .wellness-chapter .collage-heading h3{font-size:50px}
 .collage-heading p{font-size:18px}
 .scrap-print{padding:5px}
 .scrap-name{font-size:18px}
 .scrap-city{font-size:14px}
 .fashion-cities .scrap-photos,.fashion-cities .scrap-count-6 .scrap-photos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;padding:15px 2% 25px}
 .fashion-cities>.scrap-group{margin-bottom:38px}
 .fashion-cities .scrap-group>.scrap-photos+figcaption .scrap-name,.food-city h4{font-size:43px}
 .food-scraps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;padding:0 5px}
 .food-scraps .scrap-group:nth-child(3n+2){padding-top:10px}
 .food-city{margin-bottom:45px}
 .food-city h4{margin-bottom:12px}
 .wellness-scraps{grid-template-columns:1fr;gap:40px}
 .wellness-scraps .scrap-count-3{grid-column:auto}
 .wellness-scraps .scrap-count-3 .scrap-photos{flex-wrap:wrap;justify-content:center;padding-bottom:15px}
 .wellness-scraps .scrap-count-3 .scrap-print{flex:0 0 49%}
 .wellness-scraps .scrap-count-3 .scrap-print:last-child{margin-top:-10px;margin-left:0;z-index:2;transform:rotate(-2deg)}
 .wellness-scraps .scrap-count-1{max-width:230px}
}