/* Toc Toc AI theme (card TOCTOC-STAGING): loaded after /assets/site.css and
   only overrides its color tokens. Base palette = toc-toc-ai site.css :root;
   the extra tokens CBAB's site.css adds are derived from it. */
:root{--aubergine:#0E2418;--plum:#1B3A28;--door:#E5443A;--door-dark:#B3201A;--brass:#F2C14E;--brass-hover:#F6D27A;--mint:#CDEBD8;--candy:#FFD28A;--cream:#F7F3E8;--blush:#EFE9DC;--ink:#10140F;--accent-text:#A51D24;--focus:#2563EB;--night:#07130C;--night-line:#2F4A3A;--on-dark:#E8EEE6;--line:#DCD8CB;--line-strong:#B2AC9C;--surface:#FFFFFF;--muted:#4B544C;--placeholder:#E6E3D8}
/* Screen-reader-only separator in headings (was an inline <style> on the Pages site; CSP allows no inline style). */
.sr-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Jean Phil block (restored from the Pages site's site.css, card TOCTOC-L1). */
[data-block=jean-phil]{background:var(--cream)}[data-block=jean-phil] .section-content>div{display:flex;flex-direction:column;gap:var(--ivs-ds-space-16);max-width:1000px}
/* ELF-ONLY (card ELF-SITE, design review 2026-11-12): additions after the locked toctoc.css copy. Tokens only; no new section types. */
/* 1. Upload slot: a 48 px circle holds the "+", the dancer label sits under it; the silhouette (flow.css) moves down so it is never cut off. */
.drop-zone label{gap:var(--ivs-ds-space-8);padding-top:var(--ivs-ds-space-16);min-height:150px}
.upload-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--accent-text);border-radius:50%;background:var(--surface);font-size:var(--ivs-ds-text-24);line-height:1}
/* flow.css is linked after this sheet, so the id wins over its equal-specificity silhouette rule. */
#create-form .slot:not(.filled) label{background-image:none}
@media(max-width:480px){.drop-zone label{min-height:104px;gap:var(--ivs-ds-space-4);padding:var(--ivs-ds-space-8) var(--ivs-ds-space-12)}.upload-symbol{width:40px;height:40px;font-size:var(--ivs-ds-text-20)}}
/* 2. Hero sample (desktop only): the sample polaroid takes the right column of the copy, caption above the clip; the "see a sample" button is for phones. */
.hero-copy .polaroid{display:none}
@media(min-width:960px){
[data-block=hero]{align-items:start}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:var(--ivs-ds-space-24);row-gap:var(--ivs-ds-space-24);align-items:start}
.hero-copy>.eyebrow,.hero-copy>h1{grid-column:1/-1}
.hero-copy>.eyebrow{justify-self:start}
.hero-copy>.lead,.hero-copy>.subtitle{grid-column:1}
.hero-copy .polaroid{display:flex;flex-direction:column-reverse;grid-column:2;grid-row:3/5;align-self:start;width:200px;margin:0}
.hero-copy .polaroid>figcaption{padding-top:0;padding-bottom:var(--ivs-ds-space-8);color:var(--cream)}
.hero-copy .photo-layout{aspect-ratio:9/16;max-height:360px}
.hero-copy>.btn-outline{display:none}
}
/* 3. (ELF-SITE R2 fix) Input-photo insets: the photos are portrait (3:4), so the inset is portrait too and anchored near
   the top; the template's landscape inset (100% × 72–120 px, object-fit:cover, centred) cut the heads off. */
.still-inset{width:30%}
.still-inset img{height:auto;aspect-ratio:3/4;object-position:50% 12%}
@media(max-width:480px){.still-inset{width:34%}.still-inset img{height:auto}}
/* The before/after card's two side-by-side images are tall and narrow: keep faces in view. */
.photo-layout-1>img{object-position:50% 12%}