/* Cotton Candy Cult's image-led case study and portfolio cover. */
.cc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,13,22,.65),transparent 90%)}
.cc-cover-title{position:absolute;z-index:1;left:6%;top:12%;font:clamp(19.5px,2.6vw,42.9px)/.92 'Coolvetica',sans-serif;letter-spacing:-.045em;color:#ffe4ef}
.cc-cover-title em{font-family:Georgia,serif;font-weight:400}.cc-cover-label{position:absolute;z-index:1;left:6%;bottom:8%;color:#fff;font-size:12px;letter-spacing:.06em}
.project-page.cc-page{max-width:1440px;padding-top:24px}.cc-page>.project-text{display:none}
.cc-case{--cc-pink:#e9a8bd;--cc-ink:#34232b;font-family:'Coolvetica',sans-serif}.cc-case a{color:inherit;text-underline-offset:5px}.cc-nav{display:flex;justify-content:space-between;font-size:14px;margin-bottom:24px}.cc-nav div{display:flex;gap:24px}
.cc-hero{position:relative;min-height:620px;aspect-ratio:1.8;overflow:hidden;border-radius:10px;background:#553640;color:#ffe1ee}.cc-hero>img{position:absolute;width:100%;height:100%;object-fit:cover}.cc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,13,22,.6),rgba(30,13,22,.02)),linear-gradient(0deg,rgba(30,13,22,.55),transparent 35%)}
.cc-hero-top,.cc-hero-bottom{position:absolute;z-index:1;left:4%;right:4%;display:flex;justify-content:space-between;gap:20px;font-size:14px}.cc-hero-top{top:5%}.cc-hero-bottom{bottom:5%;color:#fff}.cc-hero h1{position:absolute;z-index:1;left:4%;top:21%;margin:0;font-size:clamp(76px,10.5vw,152px);line-height:.88;letter-spacing:-.05em;font-weight:400}.cc-hero h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.07em}
.cc-intro{display:grid;grid-template-columns:1fr 2fr;gap:60px;margin:90px 0 44px}.cc-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.10em}.cc-case h2{font-weight:400;font-size:clamp(34px,4.5vw,62px);line-height:1.08;letter-spacing:-.025em;margin:0 0 26px}.cc-intro p:not(.cc-kicker),.cc-lede,.cc-credit p{font-family:Arial,sans-serif;font-size:16px;line-height:1.75;max-width:760px}.cc-intro p{margin-top:0}.cc-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:32px}.cc-facts dt{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px}.cc-facts dd{margin:0;line-height:1.6;font-size:16px}
.cc-section{padding-top:90px;scroll-margin-top:85px}.cc-section-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:32px}.cc-lede{margin:0 0 55px}.cc-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:28px;margin:60px 0 22px;border-top:1px solid var(--line);padding-top:22px}.cc-group-heading h3{font-size:25px;font-weight:400;margin:0}.cc-group-heading p{font-family:Arial,sans-serif;font-size:14px;line-height:1.5;margin:0;color:var(--muted)}
.cc-figure{margin:0 0 28px;min-width:0}.cc-zoom{display:block;width:100%;padding:0;border:0;background:var(--card-bg);cursor:zoom-in;border-radius:5px;overflow:hidden}.cc-figure img{display:block;width:100%;height:auto}.cc-figure figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:Arial,sans-serif;font-size:11px;color:var(--muted)}.cc-wide{max-width:1120px;margin:0 auto 38px}.cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;align-items:start}.cc-pair{align-items:center}.cc-pair .cc-figure:nth-child(2){max-width:90%;justify-self:end;width:100%}
.cc-film{margin-top:50px;background:#241e23;color:#f6eaf0;padding:55px;border-radius:10px}.cc-film .cc-section-head{color:#e9a8bd}.cc-film video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:4px}.cc-film-caption{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-top:14px}.cc-credit{display:grid;grid-template-columns:1fr 2fr;gap:30px;border-top:1px solid #55434f;padding-top:28px;margin-top:42px}.cc-credit h3{font-size:18px;font-weight:400;margin:0}.cc-credit p{margin:0;font-size:14px;color:#d0c0ca}.cc-end{display:flex;justify-content:space-between;align-items:center;margin:60px 0 15px}.cc-end p{font-size:24px}
.cc-dialog{width:min(1400px,96vw);max-height:95dvh;background:#1f1b1e;color:white;border:1px solid #66545e;padding:18px;border-radius:8px}.cc-dialog::backdrop{background:#100b10ed}.cc-dialog form{text-align:right;margin-bottom:12px}.cc-dialog button{padding:8px 14px;background:#f4d3e0;color:#241e23;border:0;border-radius:4px;cursor:pointer}.cc-dialog img{display:block;max-width:100%;max-height:76dvh;object-fit:contain;margin:auto}.cc-dialog p{font:13px/1.5 Arial,sans-serif;text-align:center}.cc-case :focus-visible,.cc-dialog :focus-visible{outline:3px solid #db658f;outline-offset:5px}
@media(min-width:1500px){.cc-cover-title{font-size:42.9px}}
@media(max-width:700px){.project-page.cc-page{padding:20px 16px 120px}.cc-nav{font-size:12px}.cc-nav div{gap:16px}.cc-hero{aspect-ratio:3/4;min-height:490px}.cc-hero>img{object-position:60% center}.cc-hero h1{top:28%;font-size:clamp(72px,16vw,112px)}.cc-hero-top{flex-direction:column;gap:7px;font-size:11px}.cc-hero-bottom{font-size:12px;flex-direction:column;gap:12px}.cc-intro{grid-template-columns:1fr;gap:16px;margin-top:52px}.cc-facts{grid-template-columns:1fr;gap:25px}.cc-section{padding-top:55px}.cc-section-head{flex-direction:column;gap:10px}.cc-group-heading{display:block;margin-top:35px}.cc-group-heading p{margin-top:10px}.cc-grid{gap:12px;grid-template-columns:1fr}.cc-pair .cc-figure:nth-child(2){max-width:100%}.cc-figure figcaption{font-size:10px}.cc-film{padding:25px 18px;margin-top:25px}.cc-credit{grid-template-columns:1fr;gap:15px}.cc-film-caption{flex-direction:column;gap:10px}.cc-cover-title{font-size:clamp(26px,7.15vw,42.9px)}}

/* Readable supporting text; the expressive display typography stays intact. */
.cc-nav, .cc-hero-top, .cc-hero-bottom, .cc-kicker,
.cc-intro p:not(.cc-kicker), .cc-lede, .cc-facts,
.cc-group-heading p, .cc-figure figcaption, .cc-film-caption,
.cc-credit, .cc-dialog p, .cc-dialog button {
  font-family: 'Poppins', sans-serif;
}
.cc-facts dd { font-size: 14px; }
.cc-hero-top, .cc-hero-bottom { font-size: 13px; }
@media(max-width:700px) {
  .cc-hero-top { font-size: 11px; }
  .cc-hero-bottom { font-size: 12px; }
}