/* Dark design (approved by Jessica 2026-10-27): overrides on top of site.css */
:root{--bg:#1C1412;--bg2:#251A17;--bg3:#2E211D;--cream:#F4E9E1;--text:#EADBD2;--muted:#B9A296;--rose:#D9967F;--clay:#E0A48E;--oxblood:#7A2E2C;--line:rgba(244,233,225,.12);--cocoa:#F4E9E1}
html,body{background:var(--bg);color:var(--text)}
body{background:radial-gradient(1200px 700px at 78% 0%,rgba(122,46,44,.28),transparent 60%),var(--bg)}
h1,h2,h3{color:var(--cream)}
h1 em,h2 em{color:var(--clay)}
.eyebrow{color:var(--rose)}
/* buttons */
.btn{background:var(--cream);color:#2A1D19}
.btn:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(244,233,225,.55)}
.btn--ghost:hover{background:rgba(244,233,225,.1);color:#fff;box-shadow:inset 0 0 0 1.5px var(--cream)}
/* nav */
.brand b{color:var(--cream)}
.brand span{color:var(--muted)}
.nav ul a{color:var(--muted)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--clay)}
.nav ul a.shop-pill{background:var(--cream);color:#2A1D19}
.nav ul a.shop-pill:hover{background:#fff;color:#2A1D19}
/* hero */
.hero{grid-template-columns:1.05fr .95fr;padding:30px 0 90px}
.hero p.lead,.hero .note{color:var(--muted)}
.hero-art{position:relative;margin:0}
.hero-art img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.palette-card{position:absolute;left:-44px;bottom:38px;width:190px;background:rgba(37,26,23,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;box-shadow:0 24px 40px -20px rgba(0,0,0,.8)}
.palette-card .tray{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.palette-card .tray i{aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 -4px 8px rgba(0,0,0,.18),inset 0 4px 6px rgba(255,255,255,.22)}
.palette-card .tag{display:block;margin-top:10px;font:italic 500 17px 'Cormorant Garamond',serif;color:var(--cream)}
/* steps band */
.band{background:var(--bg2);border-color:var(--line)}
.step .n{color:var(--rose)}
.step p{color:var(--muted)}
/* method: swatch photography leads */
.section p.sub{color:var(--muted)}
.method-steps li{background:var(--bg2);border:1px solid var(--line);padding:0 0 22px;overflow:hidden}
.method-steps li i{display:none}
.method-steps li h3,.method-steps li p{padding:0 20px}
.method-steps li h3{margin-top:18px}
.method-steps li p{color:var(--muted)}
.swatch-photo{aspect-ratio:4/5;position:relative;overflow:hidden;background:radial-gradient(120% 80% at 50% 100%,rgba(255,255,255,.04),transparent 60%),linear-gradient(160deg,#33241F,#211714)}
.swatch-photo:not(.has-img)::before{content:"";position:absolute;left:14%;right:10%;top:38%;height:30%;border-radius:48% 52% 46% 54%/60% 50% 50% 40%;transform:rotate(-14deg);
  background:radial-gradient(90% 70% at 40% 35%,rgba(255,255,255,.28),transparent 55%),var(--sw);
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.22),0 18px 30px -18px rgba(0,0,0,.7);opacity:.95;
  -webkit-mask-image:linear-gradient(100deg,#000 50%,transparent 98%);mask-image:linear-gradient(100deg,#000 50%,transparent 98%)}
/* freckles band */
.freckles-band{background:linear-gradient(90deg,#120C0B 0%,#1C1412 55%,#2A1B18 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 0}
.fb-in{max-width:1100px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.fb-art{margin:0}
.fb-art img{width:100%;aspect-ratio:4/5;max-height:620px;object-fit:cover;object-position:50% 30%;display:block}
.fb-copy p{font:italic 500 clamp(28px,3.4vw,40px)/1.28 'Cormorant Garamond',serif;color:var(--cream);margin-top:14px;max-width:22ch}
/* why */
.why li{border-color:var(--line)}
.why li::before{background:var(--rose);box-shadow:0 0 0 4px rgba(217,150,127,.2)}
.card{background:var(--bg2);border-color:var(--line)}
.card blockquote{color:var(--cream)}
.card p{color:var(--muted)}
/* form */
.form-wrap{background:var(--bg3);border:1px solid var(--line)}
form label,legend{color:var(--cream)}
form input[type=text],form input[type=email],form input[type=tel],form textarea{background:#F7EFE9;border-color:transparent;color:#2A1D19}
.chips span{background:transparent;border-color:rgba(244,233,225,.3);color:var(--text)}
.chips input:checked+span{background:var(--cream);color:#2A1D19;border-color:var(--cream)}
.upload{background:rgba(244,233,225,.04);border-color:rgba(217,150,127,.6)}
.upload strong{color:var(--cream)}
.upload small,.fine{color:var(--muted)}
.form-wrap .btn{background:var(--rose);color:#2A1D19}
.form-wrap .btn:hover{background:#E9AE98}
footer{border-color:var(--line);color:var(--muted)}
footer a:hover{color:var(--clay)}
@media(max-width:860px){
 .hero{padding:10px 0 60px}
 .hero-art{max-width:460px;margin:0 auto;width:100%}
 .palette-card{left:12px;bottom:12px;width:150px;padding:10px}
 .palette-card .tag{font-size:15px}
 .fb-in{grid-template-columns:1fr;gap:28px;padding:0}
 .fb-art img{max-height:none;aspect-ratio:4/4.2}
 .fb-copy{padding:0 22px 50px}
}
/* fixes after first render */
.hero-art img,.fb-art img{height:auto}
.form-head h2{font-size:clamp(34px,4.4vw,50px);margin:10px 0 12px}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:34px}}
@media(max-width:480px){.swatch-photo{aspect-ratio:16/10}}
/* swatch slot: quiet texture when empty, photo when filled */
.swatch-photo.has-img{background:var(--bg3)}
.swatch-photo.has-img img{width:100%;height:100%;object-fit:cover;display:block}
/* inner pages */
.routine{background:var(--bg2);border-color:var(--line)}
.routine .swatch{background:radial-gradient(120% 140% at 85% 0%,rgba(122,46,44,.45),transparent 60%),linear-gradient(135deg,#3A2823,#261A17)}
.routine ol{color:var(--text)}
.routine .btn{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(244,233,225,.55)}
.routine .btn:hover{background:rgba(244,233,225,.1)}
.faq summary{color:var(--cream)}
.faq details p{color:var(--muted)}
.cta{background:radial-gradient(90% 120% at 50% 0%,rgba(122,46,44,.35),transparent 65%),var(--bg3);border:1px solid var(--line);color:var(--text)}
.cta h2{color:var(--cream)}
.cta h2 em{color:var(--clay)}
.cta p{color:var(--muted)}
.cta .btn{background:var(--cream);color:#2A1D19}
.cta .btn:hover{background:#fff}
.about .art{background:radial-gradient(circle at 30% 30%,#4A322B,#2E201C 60%,#211714);border:1px solid var(--line)}
.about p{color:var(--text)}

/* Real photos on routines + about (2026-11-01) */
.routine .swatch.has-img{height:220px;padding:0;background:none}
.routine .swatch.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.about .art.has-img{background:none}
.about .art.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Top bar: Facebook group invite + artist line under the name (2026-11-01) */
.topbar{display:block;text-align:center;background:var(--oxblood);color:var(--cream);font:500 14px/1.45 'Manrope',sans-serif;padding:10px 18px;text-decoration:none;text-wrap:balance}
.topbar b{font-weight:600}
.topbar:hover{background:#93403C;color:#fff}
.brand a.brand-home{text-decoration:none}
.brand span a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}
.brand span a:hover{color:#F3C4B3}
@media(max-width:860px){.brand{text-align:center}}

/* Header brand v2: avatar + "Your artist / Jessica" (2026-11-01) */
.nav .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav .brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(224,164,142,.55)}
.nav .brand .who{display:flex;flex-direction:column;line-height:1.05}
.nav .brand small{font:600 10px 'Manrope',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.nav .brand b{font:500 28px 'Cormorant Garamond',serif;color:var(--cream)}
.nav .brand:hover b{color:#fff}
.nav .brand:hover img{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--clay)}
@media(max-width:860px){.nav .brand{justify-content:center;text-align:left}}
.nav .brand .who{text-transform:none;letter-spacing:0}
.nav .brand small{text-transform:uppercase}
/* Header mark (placeholder until Jessica's own photo) */
.nav .brand .mark{display:grid;grid-template-columns:repeat(2,14px);gap:4px;width:52px;height:52px;border-radius:50%;background:#2E211D;place-content:center;box-shadow:0 0 0 1px rgba(224,164,142,.45)}
.nav .brand .mark i{width:14px;height:14px;border-radius:50%;background:#B5534A}
.nav .brand .mark i:nth-child(2){background:#E7B8A8}
.nav .brand .mark i:nth-child(3){background:#7A4A40;grid-column:1 / span 2;justify-self:center}

/* Favorite colors (2026-11-01) */
.faves{padding:10px 0 60px}
.faves h2{font-size:clamp(30px,3.4vw,36px);margin-bottom:24px}
.fave-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fave{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:26px;padding:28px}
.fave .pan{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.28),transparent 42%),linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 0 -10px 22px rgba(0,0,0,.25),0 12px 30px -14px rgba(0,0,0,.7)}
.fave h3{font-size:30px}
.fave .time{font:600 12px 'Manrope';letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin:6px 0 12px}
.fave p{color:var(--text);font-size:16px;margin-bottom:18px}
@media(max-width:860px){.fave-row{grid-template-columns:1fr}.fave{grid-template-columns:110px 1fr}.fave .pan{width:110px;height:110px}}
.fave .pan{border-radius:22px;background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.14),transparent 55%),linear-gradient(160deg,var(--c1),var(--c2));box-shadow:inset 0 0 0 6px rgba(200,190,185,.35),inset 0 0 0 7px rgba(0,0,0,.25)}
.nav .brand img{object-position:50% 50%}
.fave .swatch-real{width:150px;height:200px;border-radius:18px;overflow:hidden;background:#F6F6F6}
.fave .swatch-real img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.fave .swatch-real{width:110px;height:150px}}

/* Shade quiz (2026-11-01) */
.quiz-head{max-width:760px}
.quiz{max-width:980px;margin:0 0 90px}
.qs{border:0;padding:0;margin:0}
.qs legend{font:500 clamp(30px,3.4vw,38px)/1.15 'Cormorant Garamond',serif;color:var(--cream);margin-bottom:8px;text-wrap:balance}
.qs legend span{display:block;font:600 12px 'Manrope';letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.qs .hint{color:var(--muted);margin-bottom:22px;font-size:16px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:18px}
.qgrid--depth{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.qt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:20px;background:var(--bg2);border:1px solid var(--line);transition:border-color .15s,background .15s}
.qt:hover,.qt:focus-visible{border-color:var(--clay);background:#2E211D}
.qt i{width:54px;height:54px;border-radius:50%;background:var(--c);box-shadow:inset 0 3px 8px rgba(255,255,255,.18);margin-bottom:6px}
.qt b{font:500 22px 'Cormorant Garamond',serif;color:var(--cream)}
.qt small{font:500 14px/1.45 'Manrope';color:var(--muted)}
.qback{all:unset;cursor:pointer;margin-top:20px;color:var(--clay);text-decoration:underline;text-underline-offset:3px;font:600 14px 'Manrope'}
.qres{padding:10px 0 90px}
.qres h2{font-size:clamp(32px,3.6vw,40px);margin:8px 0 24px}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.qcard{display:grid;grid-template-columns:96px 1fr;gap:18px;background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:20px;align-items:start}
.qsw{width:96px;height:184px;border-radius:14px;overflow:hidden;background:#F6F6F6}
.qsw img{width:100%;height:100%;object-fit:cover;display:block}
.qcard .time{font:600 11px 'Manrope';letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.qcard h3{font-size:28px;margin:4px 0 2px}
.qcard .qcolor{color:var(--cream);font-size:15px;margin-bottom:8px}
.qcard p{font-size:15px;color:var(--text)}
.qone{display:inline-block;margin-top:10px;color:var(--clay);font:600 13px 'Manrope';text-underline-offset:3px}
.qorder{margin:28px 0 8px;max-width:760px}
.qorder h3{font-size:26px;margin-bottom:6px}
.qbuy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.qbuy span{color:var(--muted);font:600 15px 'Manrope'}
.qalt{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);max-width:760px}
.qalt p{margin-bottom:16px}
.qalt a{color:var(--clay)}
@media(max-width:860px){.qcards{grid-template-columns:1fr}}
/* Quiz map review page */
.maptable{overflow-x:auto}
.maptable table{border-collapse:separate;border-spacing:8px;min-width:820px}
.maptable th{font:600 12px 'Manrope';letter-spacing:.14em;text-transform:uppercase;color:var(--clay);text-align:left;vertical-align:middle;padding:4px}
.maptable th i{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--c);vertical-align:middle;margin-right:8px}
.maptable td{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px;vertical-align:top}
.mapcell{display:flex;gap:10px;align-items:center;margin:0 0 8px}
.mapcell img{width:34px;height:64px;object-fit:cover;border-radius:6px;background:#F6F6F6}
.mapcell b{display:block;font:500 18px 'Cormorant Garamond',serif;color:var(--cream)}
.mapcell small{font:500 12px 'Manrope';color:var(--muted)}
/* Quiz reference photos */
.qt--photo{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px}
.qt--photo b,.qt--photo small{flex-basis:calc(100% - 110px)}
.qt--photo b{align-self:end}
.qstrips{display:flex;gap:6px;flex:0 0 auto}
.qstrips img{width:28px;height:72px;object-fit:cover;border-radius:6px;background:#F6F6F6}
.qstrips--one img{width:40px;height:84px}
.qt--photo{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:16px;row-gap:4px}
.qt--photo .qstrips{grid-row:1 / span 2}
.qt--photo b{align-self:end}
.qt--photo small{align-self:start}
.qt--look{padding:0;overflow:hidden}
.qt--look .qlook{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;display:block;margin-bottom:6px}
.qt--look b,.qt--look small{padding:0 18px}
.qt--look small{padding-bottom:18px}