/* SANGKEE: Cafemi branding and product photography. Galleries await final artwork. */
.sangkee-page{background:#191719}
.sangkee-hero{padding-top:36px}
.sangkee-hero-copy{display:flex;justify-content:space-between;align-items:center;gap:36px;padding-block:44px}
.sangkee-eyebrow{font-size:9px;color:var(--pink);line-height:1.8}
.sangkee-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,9vw,132px);line-height:1;margin:18px 0 0;letter-spacing:.015em;overflow-wrap:anywhere}
.sangkee-hero h1 span,.sangkee-introduction h2 span{color:var(--pink)}
.sangkee-hero-copy>p{font-size:18px;line-height:1.7;color:var(--muted);margin:0}
.sangkee-banner{display:block;aspect-ratio:16 / 7;background:#211e21;border:1px solid var(--line);overflow:hidden;cursor:zoom-in}
.sangkee-banner img{display:block;width:100%;height:100%;object-fit:contain}
.sangkee-overview{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);padding-block:60px}
.sangkee-introduction h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,54px);line-height:1.1;margin:18px 0 24px}
.sangkee-introduction p,.sangkee-section-copy{font-size:14px;line-height:1.9;color:var(--muted);max-width:720px}
.sangkee-introduction p{margin:0 0 16px}
.sangkee-role{align-self:start;border-left:1px solid var(--line);padding-left:30px}
.sangkee-role h2{font-size:9px;color:var(--pink);font-weight:400;margin:0 0 24px}
.sangkee-role ul{list-style:none;padding:0;margin:0}
.sangkee-role li{font-size:14px;line-height:1.8;border-top:1px solid var(--line);padding-block:12px}
.sangkee-work{padding-bottom:50px;scroll-margin-top:24px}
.sangkee-section{border-top:1px solid var(--line);scroll-margin-top:24px;padding-bottom:32px}
.sangkee-section:last-child{border-bottom:1px solid var(--line)}
.sangkee-section h2{margin:0}
.sangkee-section-heading{display:flex;align-items:center;gap:24px;padding:32px 0;width:100%;font-weight:400;color:var(--ink);text-align:left}
.sangkee-section-number{font-size:10px;color:var(--pink);align-self:flex-start;margin-top:10px}
.sangkee-section-label{display:flex;flex-direction:column;gap:10px;min-width:0}
.sangkee-section-label>span{font-family:var(--display);font-size:clamp(30px,4vw,54px);line-height:1.1;overflow-wrap:anywhere}
.sangkee-section-label small{font-size:8px;color:var(--muted);font-weight:400;line-height:1.7}
.sangkee-section-copy{margin:0 0 28px}
.sangkee-section-body{min-width:0}
.sangkee-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;padding-bottom:32px}
.sangkee-gallery-card{margin:0;min-width:0}
.sangkee-image-slot,.sangkee-gallery-card>a{aspect-ratio:4 / 3;border:1px solid #ffffff15;background:#211e21}
.sangkee-image-slot{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.sangkee-image-slot>.mono{font-size:8px;color:#ffffff40}
.sangkee-image-slot p{font-size:12px;color:var(--muted);margin:0}
.sangkee-gallery-card figcaption{font-size:13px;line-height:1.6;padding-top:12px}
.sangkee-gallery-card>a{display:block;cursor:zoom-in}
.sangkee-gallery-card img{display:block;width:100%;height:100%;object-fit:contain}
.sangkee-page .campaign-viewer-bar{align-items:flex-start}
@media(max-width:900px){.sangkee-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.sangkee-hero-copy{gap:24px}.sangkee-hero-copy>p{font-size:15px}}
@media(max-width:650px){.sangkee-hero{padding-top:22px}.sangkee-hero .hero-overline{flex-wrap:wrap;gap:10px;font-size:8px}.sangkee-hero-copy{display:block;padding-block:30px}.sangkee-hero h1{font-size:clamp(48px,12vw,78px)}.sangkee-hero-copy>p{margin-top:24px}.sangkee-overview{grid-template-columns:1fr;gap:28px;padding-block:36px}.sangkee-role{border-left:0;padding-left:0}.sangkee-section-heading{gap:14px;padding-block:22px}.sangkee-section-label>span{font-size:clamp(26px,7vw,38px)}.sangkee-section-label small{font-size:7px}.sangkee-section-number{font-size:8px;margin-top:7px}.sangkee-gallery{grid-template-columns:1fr}.sangkee-page .campaign-viewer-bar h2{font-size:8px}.sangkee-work>.section-top{flex-wrap:wrap;line-height:1.7;font-size:8px}}

/* Meet Cafemi: personal origin, design exploration, then the finished character. */
.cafemi-journey{padding:12px 0 40px}
.cafemi-chapter{padding-block:40px;border-top:1px solid var(--line)}
.cafemi-chapter:first-child{padding-top:0;border-top:0}
.cafemi-chapter:last-child{padding-bottom:0}
.cafemi-origin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:center}
.cafemi-chapter h3{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,54px);line-height:1.12;margin:16px 0 24px;overflow-wrap:anywhere}
.cafemi-chapter-copy p,.cafemi-chapter-heading>p{font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 16px;max-width:640px}
.cafemi-chapter-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:center;margin-bottom:24px}
.cafemi-chapter-heading h3{margin-bottom:0}
.cafemi-chapter-heading>p{margin:0}
.cafemi-process-gallery,.cafemi-character-gallery{padding-bottom:0}
.cafemi-process-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.cafemi-character-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.cafemi-cookie-image .sangkee-image-slot,.cafemi-cookie-image>a{aspect-ratio:1}
.cafemi-final-image{margin-bottom:28px}
.cafemi-final-image .sangkee-image-slot,.cafemi-final-image>a{aspect-ratio:16 / 9}
@media(max-width:650px){
  .cafemi-origin,.cafemi-chapter-heading{grid-template-columns:1fr;gap:24px}
  .cafemi-chapter{padding-block:30px}
  .cafemi-chapter-heading h3{margin-bottom:0}
  .cafemi-process-gallery,.cafemi-character-gallery{grid-template-columns:1fr}
  .cafemi-journey{padding-bottom:28px}
}

/* Four illustrations and four complete comics, grouped for browsing. */
.cafemi-story-group{padding-bottom:32px}
.cafemi-story-heading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin:0 0 20px;padding-top:24px;border-top:1px solid var(--line);font-size:11px;font-weight:400;color:var(--pink)}
.cafemi-story-heading span{font-size:8px;color:var(--muted)}
.cafemi-stories-gallery{grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:0}
@media(max-width:1000px){.cafemi-stories-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.cafemi-stories-gallery{grid-template-columns:1fr}.cafemi-story-group{padding-bottom:28px}}

/* Three plush photos above a pair of keychain and tote images. */
.cafemi-merch-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.cafemi-plush-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:650px){.cafemi-merch-gallery{grid-template-columns:1fr}}

/* Portrait footage, played on demand with native playback/fullscreen controls. */
.sangkee-video-gallery{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.sangkee-video{display:block;width:100%;height:auto;aspect-ratio:9 / 16;object-fit:contain;background:#0d0c0d;border:1px solid var(--line)}
@media(max-width:650px){.sangkee-video-gallery{grid-template-columns:1fr}.sangkee-video{max-height:75svh}}

/* Supporting Cafemi girl artwork below the banner. */
.cafemi-girl-gallery{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:0}
@media(max-width:900px){.cafemi-girl-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.cafemi-girl-gallery{grid-template-columns:1fr}}