/* miracle.gabeweb.org: "Fashion Film". Light theme Blush, dark theme Rose Noir (miracle/DESIGN.md).
   Each story's own colours (--s-bg, --s-ink, --s-title, --t-fit) are generated from lib/stories.mjs. */

/* ---------- themes ---------- */
:root{
  --bg:#F6E4E1; --ink:#521730; --mute:#7E4A5B; --accent:#D9527E; --rule:rgba(82,23,48,.16);
  --btn:#521730; --btn-ink:#F6E4E1; --btn-hover:#7A2347;
  --foot:#521730; --foot-ink:#F6E4E1; --foot-mute:#E2B9C6; --foot-line:#F09AB5; --foot-focus:#F6E4E1;
  --focus:#521730; --contact-bg:#C2416D; --contact-ink:#FFFFFF;
  --gut:clamp(16px,2.6vw,40px);
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1D0A15; --ink:#FBE4EC; --mute:#C496AB; --accent:#FF6FA8; --rule:rgba(251,228,236,.14);
  --btn:#FBE4EC; --btn-ink:#1D0A15; --btn-hover:#FF6FA8;
  --foot:#12060D; --foot-ink:#FBE4EC; --foot-mute:#C496AB; --foot-line:#FF6FA8; --foot-focus:#FF6FA8;
  --focus:#FF6FA8; --contact-bg:#FF6FA8; --contact-ink:#1D0A15;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1D0A15; --ink:#FBE4EC; --mute:#C496AB; --accent:#FF6FA8; --rule:rgba(251,228,236,.14);
    --btn:#FBE4EC; --btn-ink:#1D0A15; --btn-hover:#FF6FA8;
    --foot:#12060D; --foot-ink:#FBE4EC; --foot-mute:#C496AB; --foot-line:#FF6FA8; --foot-focus:#FF6FA8;
    --focus:#FF6FA8; --contact-bg:#FF6FA8; --contact-ink:#1D0A15;
    color-scheme:dark;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* the browser's own surfaces wear the palette too */
html{scrollbar-color:color-mix(in srgb,var(--ink) 38%,transparent) var(--bg);accent-color:var(--ink);caret-color:var(--accent)}
::selection{background:var(--ink);color:var(--bg)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{width:1.1em;height:1.1em;flex:none}

/* the type: wide capitals, small spaced labels, and the soft italic */
.wide{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.86}
.small,.kicker{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-stretch:110%}
.it{font-family:var(--serif);font-style:italic;font-weight:350;font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.005em;text-transform:none}

/* ---------- top bar ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gut);z-index:20}
.top .mark,.back .mark{font-stretch:125%;font-weight:800;font-size:15px;letter-spacing:.02em}
.top-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.top-links>a{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-stretch:110%;padding:8px 0}
.top-links>a:hover,.back:hover .back-label{text-decoration:underline;text-underline-offset:5px}
/* the sun / moon toggle (whichever mode a tap switches to); hidden without JavaScript, where CSS follows the device */
.theme-toggle{display:none;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid currentColor;transition:background .25s}
.js .theme-toggle{display:grid}
.theme-toggle:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.theme-toggle .icon{width:18px;height:18px}
.theme-toggle .i-sun,:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
.top-story{position:sticky;top:0;background:color-mix(in srgb,var(--s-bg) 90%,transparent);backdrop-filter:blur(10px)}
.back{display:flex;align-items:center;gap:10px;padding:8px 0}
.back-label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-stretch:110%}

/* ---------- home: the film opening ---------- */
.hero{position:relative;height:100svh;min-height:600px;background:var(--bg)}
.hero .top{position:absolute;inset:0 0 auto}
.panels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:3px}
.panel{position:relative;overflow:hidden;min-width:0}
.panel picture,.panel img,.panel video{width:100%;height:100%}
.panel img,.panel video{object-fit:cover}
/* the photos and the film melt into the page colour, top and bottom */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 17%,color-mix(in srgb,var(--bg) 30%,transparent) 36%,transparent 52%),
    linear-gradient(to bottom,color-mix(in srgb,var(--bg) 78%,transparent),transparent 15%)}
.hero .top,.now,.name{z-index:3}
.now{position:absolute;left:50%;top:70px;translate:-50% 0;display:flex;align-items:center;gap:10px;white-space:nowrap}
.now a{text-decoration:underline;text-underline-offset:3px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.name{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(18px,2.6vw,36px);container-type:inline-size}
.name .meta{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:clamp(8px,1.2vw,16px)}
.name .meta .it{font-size:clamp(18px,1.7vw,26px)}
.name h1{font-size:calc(100cqi / 12.6);white-space:nowrap}

/* ---------- measurements ---------- */
.comp-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 28px;padding:26px var(--gut);border-bottom:1px solid var(--rule)}
.comp{display:flex;flex-wrap:wrap;gap:18px clamp(20px,3vw,44px)}
.comp div{display:flex;flex-direction:column;gap:6px}
.comp dt{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-stretch:110%;color:var(--mute)}
.comp dd{font-size:19px;font-weight:500;font-stretch:112%}
.comp dd span{color:var(--mute);font-weight:400;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:14px 22px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-stretch:115%;transition:background .25s}
.btn:hover{background:var(--btn-hover)}

/* ---------- chapters ---------- */
.chapter{display:grid;grid-template-columns:minmax(300px,34%) minmax(0,1fr);min-height:min(100svh,1000px);background:var(--s-bg);color:var(--s-ink);--focus:var(--s-title)}
.chapter.flip{grid-template-columns:minmax(0,1fr) minmax(300px,34%)}
.chapter.flip .chapter-text{order:2}
.chapter>*{min-width:0}
.chapter-text{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(48px,6vw,96px) var(--gut)}
/* titles size themselves so their widest word fits the column (--t-fit: that word's width in em) */
.chapter h2,.s-hero h1,.ns-title{color:var(--s-title);font-size:min(var(--t-max,96px),calc(100cqi / var(--t-fit,8)))}
.chapter h2{margin-top:4px}
.chapter .sub,.s-hero .sub{font-size:clamp(22px,1.9vw,30px);line-height:1.15}
.opener{max-width:44ch;font-size:15.5px}
.credits{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px}
.credits div{display:contents}
.credits dt{font-weight:600}
.credits a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.credits.compact{font-size:12.5px;gap:4px 14px;margin-top:4px}
.open-story{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:10px;padding:8px 0 6px;border-bottom:2px solid currentColor;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-stretch:115%}
.open-story .icon,.ns-go .icon{transition:transform .3s var(--ease)}
.open-story:hover .icon,.next-story:hover .ns-go .icon{transform:translateX(5px)}
.chapter-media{position:relative}
.chapter-strip{display:flex;gap:4px;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.chapter-strip::-webkit-scrollbar{display:none}
.chapter-strip:focus-visible{outline-offset:-5px}
.chapter-strip figure{flex:0 0 auto;height:min(100svh,1000px);min-height:560px;aspect-ratio:2/3;scroll-snap-align:start}
.chapter-pair{display:grid;grid-template-columns:1.25fr 1fr;gap:4px}
.chapter-pair figure{min-width:0;height:min(100svh,1000px);min-height:560px}
.chapter-strip picture,.chapter-strip img,.chapter-pair picture,.chapter-pair img{width:100%;height:100%;object-fit:cover}
.strip-nav{display:none}
.js .strip-nav{position:absolute;right:var(--gut);bottom:var(--gut);display:flex;gap:8px}
.strip-nav button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--s-bg);color:var(--s-ink)}

/* ---------- digitals ---------- */
.digitals{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(64px,8vw,120px) var(--gut)}
.digitals-head{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px}
.digitals-head h2{font-size:clamp(44px,7vw,110px)}
.digitals-head .sub{font-size:clamp(22px,2vw,32px)}
/* three in a row (front, profile, full length), each uncropped at its own shape, never wider than the file */
.polaroids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;max-width:1100px;gap:clamp(10px,1.4vw,20px)}
.polaroid img{width:100%;height:auto} /* each column is no wider than its file, so filling it never enlarges */
.polaroid figcaption{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-stretch:110%}
.digitals-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.comp-side{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.comp dd,.comp-side dd{font-variant-numeric:lining-nums tabular-nums}
@media (max-width:1100px){.digitals{grid-template-columns:1fr}.digitals-side{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}}

/* ---------- bookings ---------- */
.bookings{container-type:inline-size;background:var(--foot);color:var(--foot-ink);--focus:var(--foot-focus);padding:clamp(80px,10vw,160px) var(--gut) 24px;text-align:center}
.book-lead{display:block;font-size:clamp(28px,4vw,60px);line-height:1}
.bookings h2{font-size:min(190px,calc(100cqi / 6.8));margin-top:6px}
.mail{display:inline-block;max-width:100%;margin-top:28px;padding-bottom:4px;border-bottom:2px solid var(--foot-line);font-size:clamp(17px,2.2vw,30px);font-weight:500;font-stretch:110%;overflow-wrap:anywhere}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 28px;margin-top:22px;font-size:14px}
.socials a{display:inline-block;padding:10px 0}
.socials span{color:var(--foot-mute)}
/* room on the right for the back-to-top button, so it never covers the credit */
.footline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:clamp(64px,8vw,120px);padding-right:calc(3.4rem + clamp(14px,2.4vw,28px));font-size:12px;text-align:left}
.footline a{text-decoration:underline;text-underline-offset:3px}

/* ---------- story pages ---------- */
.story{background:var(--s-bg);color:var(--s-ink);--focus:var(--s-title)}
.s-hero{display:grid;grid-template-columns:minmax(340px,40%) minmax(0,1fr);min-height:calc(100svh - 64px)}
.s-hero>*{min-width:0}
.s-text{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(36px,5vw,80px) var(--gut)}
.s-hero h1{--t-max:110px;margin:14px 0 8px}
.words{max-width:48ch;margin-top:20px;font-size:16px}
.s-text .credits{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--s-ink) 22%,transparent)}
.s-hero .lead{overflow:hidden}
.s-hero .lead picture,.s-hero .lead img{width:100%;height:100%;object-fit:cover}
.seq{display:flex;flex-direction:column;gap:clamp(40px,6vw,96px);padding:clamp(56px,7vw,110px) var(--gut)}
.row{display:grid;gap:4px}
.row figure{position:relative;overflow:hidden;min-width:0}
.row picture,.row img{width:100%;height:100%;object-fit:cover}
.pair{grid-template-columns:1fr 1fr}
.trio{grid-template-columns:repeat(3,1fr)}
.solo{width:min(56vw,760px);margin:0 auto}
.pair figure,.trio figure,.solo figure,.quote figure{aspect-ratio:2/3}
.quote{grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:clamp(24px,5vw,80px);align-items:center}
.quote blockquote{padding-left:clamp(0px,3vw,48px);font-size:clamp(26px,3vw,48px);line-height:1.15}
.quote blockquote footer{margin-top:22px;font-family:var(--sans);font-style:normal}
.count{position:absolute;left:12px;bottom:12px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.16em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.row.film{display:block}
.film{width:min(100%,460px);margin:0 auto}
.film video{width:100%;height:auto;background:#000}
.film figcaption{margin-top:16px;font-size:13px}
.film-title{display:block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.next-story{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,64px);padding:clamp(56px,7vw,110px) var(--gut);background:var(--s-bg);color:var(--s-ink);--focus:var(--s-title)}
.ns-text{container-type:inline-size;display:flex;flex-direction:column;gap:8px}
.ns-title{--t-max:190px}
.ns-text .sub{font-size:clamp(22px,2vw,32px)}
.ns-go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:16px;padding-bottom:4px;border-bottom:2px solid currentColor;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-stretch:115%}
.ns-thumb{width:clamp(110px,16vw,240px);aspect-ratio:3/4;overflow:hidden}
.ns-thumb picture,.ns-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.next-story:hover .ns-thumb img{transform:scale(1.04)}
.story-close .footline{margin:0;padding:22px calc(3.4rem + clamp(14px,2.4vw,28px) + 8px) 22px var(--gut)}

/* ---------- not found ---------- */
.nf-main{container-type:inline-size;min-height:70svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(48px,8vw,120px) var(--gut)}
.nf-main h1{color:var(--s-title);font-size:min(160px,calc(100cqi / 7.6))}
.nf-main .sub{font-size:clamp(22px,2vw,32px)}

/* ---------- the floating contact button, above back to top ---------- */
.to-contact{position:fixed;right:clamp(14px,2.4vw,28px);bottom:calc(clamp(14px,2.4vw,28px) + 3.4rem + 12px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--contact-bg);color:var(--contact-ink);box-shadow:0 10px 24px -12px rgba(29,10,21,.55);transition:opacity .35s ease,translate .45s var(--ease),visibility 0s}
.to-contact.away{opacity:0;visibility:hidden;translate:0 14px;transition:opacity .35s ease,translate .45s var(--ease),visibility 0s .35s}
.to-contact .icon{width:1.35rem;height:1.35rem;transition:scale .3s var(--ease)}
.to-contact:hover .icon{scale:1.1}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:clamp(14px,2.4vw,28px);bottom:calc(clamp(14px,2.4vw,28px) + env(safe-area-inset-bottom,0px));z-index:30;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--ink);color:var(--bg);transition:opacity .35s ease,translate .45s var(--ease),visibility 0s}
.js .to-top:not(.on){opacity:0;visibility:hidden;translate:0 14px;transition:opacity .35s ease,translate .45s var(--ease),visibility 0s .35s}
.to-top .icon{width:1.25rem;height:1.25rem;transition:translate .3s var(--ease)}
.to-top:hover .icon{translate:0 -3px}
.to-top .ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;pointer-events:none}
.to-top .ring circle{fill:none;stroke-width:2.5}
.to-top .ring .bg{stroke:color-mix(in srgb,var(--bg) 25%,transparent)}
.to-top .ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4}

/* ---------- phones ---------- */
@media (max-width:760px){
  .top-links>a:not(.keep){display:none}
  .hero{height:92svh}
  .panels{grid-template-columns:1fr}
  .panel.p1,.panel.p3{display:none}
  .now{top:62px}
  .name .meta{flex-direction:column;align-items:flex-start;gap:6px}
  .name h1{white-space:normal;font-size:calc(100cqi / 6.4)}
  .comp{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .chapter,.chapter.flip{grid-template-columns:1fr;min-height:0}
  .chapter.flip .chapter-text{order:0}
  .chapter-text{padding:48px var(--gut) 28px}
  .chapter-strip figure{width:78vw;height:auto;min-height:0}
  .chapter-pair{grid-template-columns:1fr 1fr}
  .chapter-pair figure{height:auto;min-height:0;aspect-ratio:3/4}
  .js .strip-nav{position:static;justify-content:flex-end;padding:12px var(--gut) 0}
  .digitals{grid-template-columns:1fr}
  .polaroids{grid-template-columns:1fr 1fr}
  .s-hero{grid-template-columns:1fr;min-height:0}
  .s-hero .lead{order:-1;aspect-ratio:4/5}
  .s-text{gap:28px}
  .trio figure:last-child{grid-column:1/-1;aspect-ratio:4/5}
  .trio{grid-template-columns:1fr 1fr}
  .solo{width:100%}
  .quote{grid-template-columns:1fr}
  .quote blockquote{padding:0}
  .next-story{grid-template-columns:1fr}
  .ns-thumb{width:40vw}
}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* video gets no :focus-visible in Chromium: give the film players their own ring, inside the frame */
video:focus,video:focus-within{outline:2px solid var(--focus);outline-offset:-4px}

/* ---------- motion and interaction (site.js) ---------- */
.colours #stories .chapter{background:transparent}
.film-play{position:absolute;z-index:4;left:50%;top:50%;translate:-50% -50%;display:inline-flex;white-space:nowrap;align-items:center;gap:10px;min-height:48px;padding:14px 22px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-stretch:115%}
.film-play.is-playing{left:auto;right:16px;top:auto;bottom:calc(52% + 8px);translate:none;width:44px;min-height:44px;padding:0;justify-content:center;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--ink)}
[data-viewer]{cursor:zoom-in}
dialog.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(16px,4vw,56px);border:0;background:color-mix(in srgb,var(--bg) 97%,transparent);color:var(--ink);place-items:center}
dialog.lb[open]{display:grid}
dialog.lb::backdrop{background:transparent}
.lb img{width:auto;height:auto;max-width:100%;max-height:calc(100svh - 120px);object-fit:contain}
.lb-count{position:absolute;left:50%;bottom:22px;translate:-50% 0}
.lb-prev,.lb-next{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--bg);color:var(--ink)}
.lb-prev{left:clamp(8px,2vw,24px)}
.lb-next{right:clamp(8px,2vw,24px)}
.lb-close{position:absolute;top:14px;right:clamp(12px,2vw,24px);min-height:44px;padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* the top bar stays on one line on small phones (the sticky story bar must never grow) */
.mark,.back-label,.top-links>a{white-space:nowrap}
@media (max-width:440px){.back-label{display:none}}

/* story colours (generated from lib/stories.mjs) */
[data-story="shoreline"]{--s-bg:#F8EBBE;--s-ink:#21494A;--s-title:#21494A;--t-fit:7.85}
[data-story="amvca"]{--s-bg:#F2CDD4;--s-ink:#521730;--s-title:#A8173E;--t-fit:5.00}
[data-story="heritage"]{--s-bg:#F4D3C4;--s-ink:#521730;--s-title:#A3361E;--t-fit:7.00}
[data-story="beauty"]{--s-bg:#E6DDF3;--s-ink:#521730;--s-title:#5B2D91;--t-fit:5.60}
[data-story="ankara-fashion-week"]{--s-bg:#EBD3EA;--s-ink:#521730;--s-title:#8A1F7E;--t-fit:6.13}
[data-story="black-lace"]{--s-bg:#F1E3CF;--s-ink:#521730;--s-title:#2A1A12;--t-fit:4.62}
[data-story="igbo-traditional"]{--s-bg:#F7DCD6;--s-ink:#521730;--s-title:#B0202A;--t-fit:3.40}
[data-story="self-glam"]{--s-bg:#E6EDCB;--s-ink:#521730;--s-title:#6B1230;--t-fit:7.75}
[data-story="asoebi"]{--s-bg:#EAD6DE;--s-ink:#521730;--s-title:#8E3A62;--t-fit:5.10}
:root[data-theme="dark"] [data-story="shoreline"]{--s-bg:#3B1231;--s-ink:#FBE4EC;--s-title:#F7D96B}
:root[data-theme="dark"] [data-story="amvca"]{--s-bg:#4C0D26;--s-ink:#FBE4EC;--s-title:#FF8DB8}
:root[data-theme="dark"] [data-story="heritage"]{--s-bg:#3A1A17;--s-ink:#FBE4EC;--s-title:#F29A7E}
:root[data-theme="dark"] [data-story="beauty"]{--s-bg:#2C1538;--s-ink:#FBE4EC;--s-title:#CDB6F2}
:root[data-theme="dark"] [data-story="ankara-fashion-week"]{--s-bg:#45102F;--s-ink:#FBE4EC;--s-title:#F09BD8}
:root[data-theme="dark"] [data-story="black-lace"]{--s-bg:#22101A;--s-ink:#FBE4EC;--s-title:#EBCB9C}
:root[data-theme="dark"] [data-story="igbo-traditional"]{--s-bg:#3F0B12;--s-ink:#FBE4EC;--s-title:#FF7A6B}
:root[data-theme="dark"] [data-story="self-glam"]{--s-bg:#3A0D1E;--s-ink:#FBE4EC;--s-title:#D9E98A}
:root[data-theme="dark"] [data-story="asoebi"]{--s-bg:#36172A;--s-ink:#FBE4EC;--s-title:#E7B4CB}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) [data-story="shoreline"]{--s-bg:#3B1231;--s-ink:#FBE4EC;--s-title:#F7D96B}
:root:not([data-theme="light"]) [data-story="amvca"]{--s-bg:#4C0D26;--s-ink:#FBE4EC;--s-title:#FF8DB8}
:root:not([data-theme="light"]) [data-story="heritage"]{--s-bg:#3A1A17;--s-ink:#FBE4EC;--s-title:#F29A7E}
:root:not([data-theme="light"]) [data-story="beauty"]{--s-bg:#2C1538;--s-ink:#FBE4EC;--s-title:#CDB6F2}
:root:not([data-theme="light"]) [data-story="ankara-fashion-week"]{--s-bg:#45102F;--s-ink:#FBE4EC;--s-title:#F09BD8}
:root:not([data-theme="light"]) [data-story="black-lace"]{--s-bg:#22101A;--s-ink:#FBE4EC;--s-title:#EBCB9C}
:root:not([data-theme="light"]) [data-story="igbo-traditional"]{--s-bg:#3F0B12;--s-ink:#FBE4EC;--s-title:#FF7A6B}
:root:not([data-theme="light"]) [data-story="self-glam"]{--s-bg:#3A0D1E;--s-ink:#FBE4EC;--s-title:#D9E98A}
:root:not([data-theme="light"]) [data-story="asoebi"]{--s-bg:#36172A;--s-ink:#FBE4EC;--s-title:#E7B4CB}}

/* photo crops: her face's position (generated) */
.crop-shoreline-8007{object-position:42% 30%}
.crop-heritage-5484{object-position:46% 48%}
.crop-shoreline-8001{object-position:51% 38%}
.crop-shoreline-8004{object-position:40% 32%}
.crop-shoreline-8003{object-position:47% 41%}
.crop-shoreline-8006{object-position:59% 52%}
.crop-shoreline-7999{object-position:20% 35%}
.crop-amvca-2550{object-position:53% 30%}
.crop-amvca-2548{object-position:52% 35%}
.crop-heritage-5482{object-position:51% 45%}
.crop-heritage-5477{object-position:42% 18%}
.crop-beauty-2073{object-position:57% 36%}
.crop-beauty-2072{object-position:54% 45%}
.crop-beauty-2050{object-position:57% 40%}
.crop-ankara-5220{object-position:51% 29%}
.crop-ankara-6035{object-position:53% 29%}
.crop-ankara-6037{object-position:50% 28%}
.crop-ankara-6466{object-position:58% 38%}
.crop-ankara-6465{object-position:38% 41%}
.crop-black-lace-0349{object-position:49% 40%}
.crop-black-lace-0350{object-position:41% 32%}
.crop-black-lace-0304{object-position:52% 36%}
.crop-igbo-0751{object-position:55% 39%}
.crop-igbo-0749{object-position:63% 60%}
.crop-self-glam-1014{object-position:52% 45%}
.crop-self-glam-1011{object-position:46% 43%}
.crop-self-glam-1013{object-position:50% 47%}
.crop-self-glam-1012{object-position:47% 45%}
.crop-asoebi-8280{object-position:43% 46%}
.crop-asoebi-8278{object-position:50% 44%}
.crop-digital-front{object-position:50% 42%}
.crop-digital-profile{object-position:40% 42%}
.crop-digital-full{object-position:45% 13%}
.crop-shoreline-7998{object-position:50% 38%}
.crop-shoreline-8002{object-position:40% 46%}
/* digitals at one height (generated) */
.polaroids{grid-template-columns:0.5576fr 0.5806fr 0.7500fr}
@media (max-width:760px){.polaroids{grid-template-columns:0.5576fr 0.5806fr}.polaroid:nth-child(3){grid-column:1/-1;width:calc((100% - clamp(10px,1.4vw,20px)) * 0.6589)}}