/* Existing report modules. The three focus modules below own their own layout. */
.report-layout{gap:32px;grid-template-columns:168px minmax(0,1fr)}
.report-nav{background:none;border:0;border-radius:0;padding:8px 0}
.report-nav button{line-height:1.7;padding:10px 0}
.report-content{background:var(--paper);color:var(--ink);border-radius:24px;overflow:hidden}

.report-content>.section:not(:where(.focus-face,.focus-look)){border:0;border-radius:0;box-shadow:none;background:transparent;margin:0 36px;padding:44px 0;border-top:1px solid #d8cbb8}
.report-content .section:not(:where(.focus-face,.focus-look)) h2{font-size:30px;line-height:1.45;margin:10px 0 28px;text-wrap:balance}
.report-content p{line-height:1.9;text-wrap:pretty}
.report-content .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--quiet)}

.report-content .quiet-details{border-top:1px solid #d8cbb8;padding-top:16px;margin-top:24px}
.report-content .quiet-details summary{cursor:pointer;color:var(--quiet)}
.report-content .highlights{grid-template-columns:1fr;gap:24px}
.report-content .highlight{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start}
.report-content .highlight .index{color:#b17c49;font-size:14px;margin:4px 0 0}
.report-content .highlight h3{font-size:20px;margin:0 0 8px}
.report-content .highlight p{font-size:15px;max-width:42em}

.report-content .illustration{margin:0;min-width:0}
.report-content .image-link{display:block;width:100%;padding:0;border-radius:16px;overflow:hidden;background:#fffaf3}
.report-content .illustration img{width:100%;height:auto;max-height:none;object-fit:contain}
.report-content .illustration figcaption{font-size:12px;line-height:1.75;margin-top:12px}

.report-content .look-intro{border:0;padding:0;margin:28px 0 30px}
.report-content .look-intro h3{font-size:25px;margin:8px 0 12px}
.report-content .fit-note{font-size:15px;line-height:1.9}
.report-content .art-note{font-size:12px;color:var(--quiet);margin:0 0 20px}
.report-content .makeup-journal{display:block}
.report-content .makeup-card,.report-content .makeup-card:last-child:nth-child(odd){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px 28px;border:0;border-top:1px solid #d8cbb8;border-radius:0;background:none;padding:32px 0;margin:0}
.report-content .makeup-heading,.report-content .makeup-card:last-child:nth-child(odd) .makeup-heading{grid-column:1/-1;gap:14px;align-items:center}
.report-content .makeup-number{color:#ab7d53;font-size:13px;margin:0}
.report-content .makeup-heading h3{font-size:23px;margin:4px 0 0;line-height:1.5}
.report-content .part-label{font-size:12px;color:var(--quiet)}
.report-content .makeup-card .illustration{margin:0}
.report-content .makeup-copy{min-width:0;align-self:center}
.report-content .makeup-card .fit-note{font-size:15px;margin:0}
.report-content .makeup-card.text-only .makeup-copy{grid-column:1/-1;max-width:42em}
.report-content .technique{margin-top:22px;border-top:1px solid #d8cbb8;padding-top:15px}
.report-content .technique summary{font-size:14px;cursor:pointer;color:var(--ink);line-height:1.8}
.report-content .steps,.report-content .makeup-card .steps{font-size:15px;line-height:1.9;margin-top:18px;padding-left:22px}
.report-content .steps li+li{margin-top:12px}
.report-content .hair-illustration{max-width:640px;margin:0 auto 28px}
.report-content #hair-section>.fit-note{max-width:42em;margin:24px 0 0}
.report-content .palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
.report-content .swatch{height:100px}
.report-content .color-name{font-size:17px}
.report-content .color-use{font-size:14px;line-height:1.8}
.report-content .wardrobe-note{background:#ede2ce;border:0;border-radius:14px;padding:24px 28px;margin-top:32px}
.report-content .wardrobe-note p{font-size:15px}
.report-content .current-note>div{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:start;gap:20px;padding:24px 0}
.report-content .current-label{justify-self:start;margin:0;padding:4px 10px}
.report-content .current-note p{font-size:15px;margin:0}
.report-content>.tryon-section{margin:16px 24px 32px;padding:32px;background:#eee0c3;border:0;border-radius:18px}
.report-content .tryon-section>h2{font-size:28px;margin-bottom:22px}
.report-content>.report-end{text-align:center;padding:40px 0 48px}
.report-content .report-end h2{font-size:32px}
.report-content .share-preview{width:240px;max-width:80%;border-radius:18px;margin:0 auto 28px}
.report-content .report-end .primary,.report-content .report-end .secondary{margin:8px;vertical-align:top}
.report-content .report-end .hint{margin:20px auto 12px;max-width:32em;font-size:13px}
@media(max-width:1000px){
 .report-layout{display:block}
 .report-nav{display:flex;position:static;overflow-x:auto;gap:24px;padding:8px 0 18px;border:0;white-space:nowrap}
 .report-nav button{width:auto;flex-shrink:0}
 .report-nav .eyebrow,.report-nav .primary{display:none}
}
@media(max-width:600px){
 .report-content{border-radius:20px}
 .report-content>.section:not(:where(.focus-face,.focus-look)){margin:0 22px;padding:32px 0}
 .report-content .section:not(:where(.focus-face,.focus-look)) h2{font-size:26px;margin-bottom:24px}
 
 .report-content .highlight p{font-size:15px}

 .report-content .makeup-card,.report-content .makeup-card:last-child:nth-child(odd){grid-template-columns:1fr;gap:20px;padding:28px 0}
 .report-content .makeup-heading h3{font-size:21px}
 .report-content .look-intro{padding-left:0}
 .report-content .look-intro h3{font-size:23px}
 .report-content .palette{grid-template-columns:1fr 1fr;gap:24px 18px}
 .report-content .wardrobe-note{padding:20px}
 .report-content .current-note>div{grid-template-columns:1fr;gap:12px}
 .report-content>.tryon-section{margin:12px 12px 24px;padding:26px 20px;border-radius:16px}
 .report-content .report-end .primary,.report-content .report-end .secondary{width:100%;margin:8px 0}
}
@media print{.report-nav{display:none}.report-content{overflow:visible}.report-content>.section:not(:where(.focus-face,.focus-look)){break-inside:auto}}

/* Result cover: title and character share one brand-coloured composition. */
.report-content .focus-cover{margin:0;border:0;border-radius:0;box-shadow:none;padding:0;background:var(--paper);overflow:visible}
.focus-cover-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,34%);align-items:center;gap:32px;padding:32px 36px 28px;background:radial-gradient(#a88d6230 1px,transparent 1px) 0 0/20px 20px,var(--panel);color:var(--text)}
.focus-cover-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.focus-cover-label{grid-column:1;font-size:13px;color:var(--muted)}
.focus-cover-title{grid-column:1;font-size:clamp(34px,3.4vw,48px);line-height:1.3;letter-spacing:-.035em;text-wrap:balance}
.focus-cover-title span{background:var(--pink);color:#31211f;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:2px 9px;border-radius:7px}
.report-content .focus-cover-headline{grid-column:1;font-size:19px;line-height:1.8;max-width:25em;align-self:start;margin:4px 0 0;text-wrap:balance}
.focus-cover-art{grid-column:2;align-self:end;padding:0;border:2px solid var(--line);border-radius:17px;overflow:hidden;background:var(--paper);box-shadow:4px 5px 0 var(--hard);transform:translateY(48px) rotate(2deg);z-index:1}
.focus-cover-art img{display:block;width:100%;height:auto}
.focus-cover-meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13px;color:var(--muted);margin-top:4px}
.focus-cover-meta .text-button{color:var(--yellow);font-size:13px}
.focus-cover-reading{padding:60px 36px 32px;font-size:16px}
.report-content .focus-cover-tagline{font-weight:600;font-size:18px;line-height:1.6;margin:0 0 16px}
.focus-evidence{border-top:1px solid #d8cbb8;margin-top:24px;padding-top:16px}
.focus-evidence summary{cursor:pointer;line-height:1.8;font-size:14px;color:var(--quiet)}
.focus-evidence summary span{display:block;font-size:13px;margin-top:6px;color:var(--quiet)}
.focus-evidence p{font-size:15px;color:var(--quiet);margin-top:16px}

/* Face analysis: overall judgement, then the atlas with its actual evidence. */
.report-content>.focus-face{margin:0 0 28px;padding:32px 36px;background:var(--paper);color:var(--ink);border:0;border-radius:0;box-shadow:none}
.focus-section-heading{margin-bottom:26px}
.focus-kicker{font-size:13px;letter-spacing:.03em;color:var(--quiet);margin:0 0 10px}
.report-content .focus-section-heading h2{font-size:30px;line-height:1.4;letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance}
.focus-face-verdict{padding:0;border:0;margin:0;font-size:16px}
.focus-face-verdict strong{font-size:23px;display:block;margin-bottom:6px;line-height:1.5}
.focus-face-verdict span{color:var(--quiet);display:block}
.focus-contour{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:28px;align-items:center}
.focus-contour.without-art{display:block}
.focus-contour-reading{font-size:16px}
.focus-reading-label{font-size:13px;color:var(--quiet);margin:0 0 12px}
.focus-visual{margin:0;min-width:0}
.focus-visual .image-link{display:block;width:100%;padding:0;border:1px solid #d8cbb8;border-radius:14px;overflow:hidden;background:#fffaf3}
.focus-visual img{display:block;width:100%;height:auto;object-fit:contain}
.focus-visual svg{display:block;width:100%;height:auto;aspect-ratio:512/374}
.focus-contour-details{display:grid;gap:24px;min-width:0}
.focus-atlas{margin-top:20px;font-size:14px;color:var(--quiet)}
.focus-atlas summary{cursor:pointer;line-height:1.8}
.focus-atlas .focus-visual{margin:20px auto 0;max-width:720px}
.focus-visual figcaption{font-size:12px;color:var(--quiet);line-height:1.7;margin-top:10px}
.focus-visual figcaption span{display:block;color:#8a5f35;margin-top:3px}
.focus-contour .focus-feature{display:block;margin-top:20px;padding-top:18px;border-top:1px solid #d8cbb8}
.focus-feature h3{font-size:20px;line-height:1.5;margin:0 0 12px}
.focus-feature p{font-size:16px;margin:0}
.report-content .focus-feature-strength{font-size:15px;color:var(--quiet);margin-top:12px}
.focus-feature-list{margin-top:32px}
.focus-feature-list .focus-feature{display:grid;grid-template-columns:78px minmax(0,1fr);gap:26px;padding:24px 0;border-top:1px solid #d8cbb8}
.focus-reshoot{font-size:15px;color:var(--quiet);margin-top:20px}

/* First recommendation only: complete tutorial images, then reason and actions. */
.report-content>.focus-look{margin:0;padding:34px 36px;background:#eee3c4;color:var(--ink);border:0;border-radius:22px;box-shadow:none}
.focus-look-direction{font-size:16px;max-width:42em;margin:0 0 24px}
.focus-look .chips{margin-top:22px}
.focus-art-context{font-size:13px;color:var(--quiet);margin-bottom:18px}
.focus-makeup{padding:28px 0;border-top:1px solid #cab99a;max-width:720px;margin:0 auto}
.focus-makeup:first-child{border-top:0;padding-top:0}
.focus-part-label{font-size:16px;font-weight:600;margin:0 0 14px;letter-spacing:.04em}
.focus-makeup .focus-visual{width:100%}
.focus-look-why{padding:26px 28px;background:#f7f0df;border:0;border-radius:16px;margin:30px 0}
.focus-look-why h3{font-size:16px;margin:0 0 12px}
.focus-look-why p,.focus-part-why{font-size:16px;margin:0;line-height:1.9}
.focus-makeup-reading{margin-top:20px}
.focus-technique{border-top:1px solid #cab99a;padding-top:16px;margin-top:20px}
.focus-technique summary{cursor:pointer;font-size:17px;font-weight:600;line-height:1.6}
.focus-step-count{display:block;font-size:13px;font-weight:400;color:var(--quiet);margin:6px 0 0 19px}
.focus-technique .steps{font-size:16px;line-height:1.9;margin-top:20px;padding-left:24px}
.focus-technique .steps li+li{margin-top:10px}
@media(max-width:760px){
 .focus-cover-stage{grid-template-columns:minmax(0,1fr) minmax(160px,36%);gap:16px 22px;padding:28px}
 .focus-cover-title{font-size:38px}
 .focus-contour{grid-template-columns:1fr}
 .focus-contour .focus-visual{max-width:520px;justify-self:center}
}
@media(max-width:520px){
 .focus-cover-copy{display:contents}
 .focus-cover-stage{grid-template-columns:minmax(0,1fr) 48%;grid-template-rows:auto auto 1fr auto;gap:16px 18px;padding:24px 20px 22px}
 .focus-cover-label{grid-column:1/-1;font-size:13px}
 .focus-cover-title{grid-column:1/-1;font-size:36px;line-height:1.35;margin:0 0 8px;text-wrap:balance}
 .report-content .focus-cover-headline{font-size:16px;line-height:1.8;margin:0;align-self:start}
 .focus-cover-art{grid-column:2;grid-row:3/5;transform:translateY(30px) rotate(2deg);align-self:center;border-radius:13px}
 .focus-cover-meta{grid-column:1;font-size:12px;display:block;margin:0}
 .focus-cover-meta .text-button{display:block;font-size:13px;padding:9px 0 0}
 .focus-cover-reading{padding:48px 20px 28px}
 .report-content .focus-cover-tagline{font-size:17px}
 .report-content>.focus-face{margin:0 0 22px;padding:26px 20px}
 .report-content .focus-section-heading h2{font-size:27px;margin-bottom:20px}
 .focus-face-verdict{padding-left:14px}
 .focus-face-verdict strong{font-size:23px}
 .focus-contour{gap:22px}
 .focus-contour .focus-visual{width:calc(100% + 16px);max-width:none;margin:0 -8px}
 .focus-feature-list .focus-feature{grid-template-columns:1fr;gap:0;padding:22px 0}
 .focus-feature-list{margin-top:24px}
 .report-content>.focus-look{padding:28px 20px;border-radius:18px}
 .focus-makeup{padding:26px 0}
 .focus-makeup .focus-visual{width:calc(100% + 16px);margin:0 -8px}
 .focus-look-why{padding:18px 16px;margin:22px 0}
 .focus-look .chips{gap:8px}
 .focus-look .chips button{font-size:13px}
}
@media(max-width:360px){
 .focus-cover-stage{padding:22px 16px;gap:14px 14px}
 .focus-cover-title{font-size:32px}
 .focus-cover-art{grid-row:3;align-self:start;transform:translateY(10px) rotate(2deg)}
 .focus-cover-meta{grid-column:1/-1;display:flex;gap:12px}
 .focus-cover-reading{padding:28px 18px}
 .report-content>.focus-face,.report-content>.focus-look{padding-left:18px;padding-right:18px}
}

@media(max-width:600px){.focus-look-why{padding:22px 20px;margin:28px 0}.focus-look-why h3{margin-bottom:16px}}