:root {
    --guide-ink: #41413e;
    --guide-muted: #6f6f6a;
    --guide-paper: #f3f3f1;
    --guide-pink: #ead9d2;
    --guide-clay: #b46957;
    --guide-contour: #735b4f;
    --guide-highlight: #fff3c8;
}

html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body.quiz-open { overflow: hidden; }

.shape-page {
    overflow: hidden;
    background: var(--guide-paper);
    color: var(--guide-ink);
}

.eyebrow {
    margin: 0 0 1rem;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
}

.shape-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
    min-height: min(780px, calc(100vh - 160px));
    background: #d5d6d1;
}

.shape-hero__media,
.shape-hero__media img { width: 100%; height: 100%; }
.shape-hero__media { min-height: 700px; overflow: hidden; }
.shape-hero__media img { object-fit: cover; object-position: center 35%; }

.shape-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(3rem, 5vw, 6rem);
}

.shape-hero h1 {
    max-width: 8ch;
    margin: 0 0 1.75rem;
    font-family: var(--font-heading);
    font-size: clamp(4rem, 7vw, 8rem);
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: .83;
    text-transform: lowercase;
}

.shape-hero h1 em { font-weight: 400; }
.shape-hero__dek { max-width: 34rem; margin: 0 0 2rem; font-size: 1.05rem; line-height: 1.6; }

.primary-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: .85rem 1.1rem;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: background 180ms ease, color 180ms ease;
}
.primary-link:hover { background: var(--guide-ink); color: #fff; }

.shape-context {
    width: min(calc(100% - 4rem), 1400px);
    margin: 0 auto;
    padding: clamp(8rem, 13vw, 14rem) 0;
}

.shape-context__heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .55fr); gap: 2rem 8rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.shape-context__heading .eyebrow { grid-column: 1 / -1; }
.shape-context__heading h2,
.scan-editorial h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 7vw, 7.4rem);
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: .88;
}
.shape-context__heading > p:last-child { margin: 0; color: var(--guide-muted); font-size: 1rem; line-height: 1.65; }

.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(65,65,62,.4); border-left: 1px solid rgba(65,65,62,.4); }
.signal-card { position: relative; min-height: 520px; padding: 1.5rem; border-right: 1px solid rgba(65,65,62,.4); border-bottom: 1px solid rgba(65,65,62,.4); }
.signal-number { font-size: .65rem; font-weight: 700; letter-spacing: .14em; }
.signal-visual { position: relative; display: grid; height: 330px; place-items: center; }
.signal-face { display: block; width: 120px; height: 168px; border: 1.5px solid var(--guide-ink); border-radius: 44%; }
.signal-face--width { width: 142px; height: 152px; }
.signal-line { position: absolute; display: block; background: var(--guide-clay); opacity: .7; }
.signal-line--length { width: 2px; height: 196px; }
.signal-line--length::before,
.signal-line--length::after { content: ''; position: absolute; left: -5px; width: 12px; height: 2px; background: inherit; }
.signal-line--length::after { bottom: 0; }
.signal-line--width { width: 190px; height: 2px; }
.signal-line--width::before,
.signal-line--width::after { content: ''; position: absolute; top: -5px; width: 2px; height: 12px; background: inherit; }
.signal-line--width::after { right: 0; }
.signal-jaw { display: block; width: 150px; height: 135px; border: 1.5px solid var(--guide-ink); border-top: 0; border-radius: 0 0 48% 48%; }
.signal-card h3 { margin: 0 0 .4rem; font-family: var(--font-heading); font-size: 2rem; font-weight: 400; letter-spacing: -.025em; }
.signal-card p { margin: 0; color: var(--guide-muted); font-size: .9rem; }

.between-feature { display: flex; width: min(calc(100% - 4rem), 1400px); align-items: center; justify-content: space-between; gap: 2rem; margin: 0 auto clamp(8rem, 13vw, 14rem); padding: 1.6rem 0; border-top: 1px solid rgba(65,65,62,.45); border-bottom: 1px solid rgba(65,65,62,.45); }
.between-feature > p { max-width: 560px; margin: 0; color: #5d5955; font-size: .95rem; line-height: 1.65; }
.text-action { display: inline-flex; align-items: center; gap: 1.5rem; padding: .65rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.text-action span { font-size: 1rem; transition: transform 180ms ease; }
.text-action:hover span { transform: translateX(4px); }

.scan-editorial { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); width: min(calc(100% - 4rem), 1400px); min-height: 720px; margin: 0 auto clamp(8rem, 13vw, 14rem); background: #d1d2ce; }
.scan-editorial__media,
.scan-editorial__media img { width: 100%; height: 100%; }
.scan-editorial__media { overflow: hidden; }
.scan-editorial__media img { object-fit: cover; }
.scan-editorial__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: clamp(3rem, 6vw, 6rem); }
.scan-editorial h2 { max-width: 8ch; }
.scan-editorial__copy > p:not(.eyebrow) { max-width: 30rem; margin: 1.5rem 0 2rem; line-height: 1.65; }

.quiz-overlay { position: fixed; inset: 0; z-index: 5000; overflow-y: auto; overscroll-behavior: contain; background: var(--guide-paper); color: var(--guide-ink); }
.quiz-shell { width: min(100%, 1500px); min-height: 100svh; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 4rem) 4rem; }

.quiz-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(4rem, 7vw, 7rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(65,65,62,.25);
}

.quiz-brand { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; letter-spacing: .22em; text-indent: .22em; }
.quiz-close { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.quiz-close span { font-size: 1.4rem; font-weight: 300; line-height: 1; }

.quiz-progress { display: grid; grid-template-columns: auto 160px; gap: 1rem; align-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.quiz-progress__track { display: block; width: 160px; height: 2px; background: rgba(65,65,62,.2); }
.quiz-progress__track i { display: block; width: 33.333%; height: 100%; background: var(--guide-ink); transition: width 320ms ease; }

.quiz-step { min-width: 0; margin: 0; padding: 0; border: 0; animation: stepIn 350ms ease both; }
.quiz-step legend { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 1rem; width: min(100%, 950px); padding: 0; }
.quiz-step legend span { padding-top: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.quiz-step legend strong { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; letter-spacing: -.05em; line-height: .92; }
.quiz-hint { max-width: 580px; margin: 1.5rem 0 3rem 66px; color: var(--guide-muted); font-size: .95rem; line-height: 1.65; }

.answer-grid { display: grid; gap: 1rem; }
.answer-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.answer-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.answer-card {
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(65,65,62,.3);
    background: transparent;
    color: var(--guide-ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.answer-card:hover,
.answer-card.is-selected { background: var(--guide-ink); color: #fff; transform: translateY(-4px); }
.answer-card > span:last-child { display: block; min-height: 100px; padding: 1.25rem; border-top: 1px solid rgba(65,65,62,.3); }
.answer-card strong { display: block; font-family: var(--font-heading); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.answer-card small { display: block; margin-top: .55rem; color: var(--guide-muted); font-size: .77rem; line-height: 1.4; }
.answer-card:hover small,
.answer-card.is-selected small { color: rgba(255,255,255,.65); }

.answer-visual { position: relative; display: grid; height: 250px; place-items: center; overflow: hidden; }
.face-icon { display: block; width: 98px; height: 136px; border: 1.5px solid currentColor; }
.face-icon--long { width: 80px; height: 150px; border-radius: 42%; }
.face-icon--oval { border-radius: 48% 48% 46% 46% / 38% 38% 60% 60%; }
.face-icon--round { width: 116px; height: 116px; border-radius: 50%; }
.measure { position: absolute; display: block; background: currentColor; opacity: .55; }
.measure::before,
.measure::after { content: ''; position: absolute; background: currentColor; }
.measure--vertical { left: calc(50% + 70px); width: 1px; height: 150px; }
.measure--vertical::before,
.measure--vertical::after { left: -4px; width: 9px; height: 1px; }
.measure--vertical::after { bottom: 0; }
.measure--horizontal { top: 50%; width: 116px; height: 1px; }
.measure--horizontal::before,
.measure--horizontal::after { top: -4px; width: 1px; height: 9px; }
.measure--horizontal::after { right: 0; }
.answer-card--unsure .answer-visual i { font-family: var(--font-heading); font-size: 6rem; font-style: italic; }

.zones i,
.jaw-icon i { position: relative; display: block; width: 112px; height: 145px; border: 1.5px solid currentColor; border-radius: 44%; }
.zones i::after { content: ''; position: absolute; left: -24px; width: 158px; height: 40px; background: currentColor; opacity: .16; }
.zones--forehead i::after { top: 10px; }
.zones--cheeks i::after { top: 55px; }
.zones--jaw i::after { bottom: 5px; }
.zones--even i::after { top: 15px; height: 115px; opacity: .08; }
.jaw-icon i { width: 124px; height: 115px; border-top: 0; }
.jaw-icon--round i { border-radius: 0 0 54% 54%; }
.jaw-icon--defined i { border-radius: 0 0 16% 16%; }
.jaw-icon--pointed i {
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(currentColor, currentColor) left top / 1.5px 22px no-repeat,
        linear-gradient(currentColor, currentColor) right top / 1.5px 22px no-repeat;
}
.jaw-icon--pointed i::before,
.jaw-icon--pointed i::after {
    content: '';
    position: absolute;
    top: 21px;
    width: 112px;
    height: 1.5px;
    background: currentColor;
}
.jaw-icon--pointed i::before {
    left: 0;
    transform: rotate(56.3deg);
    transform-origin: left center;
}
.jaw-icon--pointed i::after {
    right: 0;
    transform: rotate(-56.3deg);
    transform-origin: right center;
}

.quiz-actions { min-height: 64px; padding-top: 2rem; }
.back-button,
.reset-button { padding: .7rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.quiz-result { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; animation: stepIn 450ms ease both; }
.result-copy { max-width: 620px; }
.result-prefix { margin: 0; color: var(--guide-muted); font-size: .9rem; }
.result-copy h2 { margin: .35rem 0 1rem; font-family: var(--font-heading); font-size: clamp(4.5rem, 8vw, 8.5rem); font-weight: 400; letter-spacing: -.06em; line-height: .82; }
.result-secondary { margin: 0 0 1.5rem; padding: .8rem 1rem; background: var(--guide-pink); font-size: .88rem; line-height: 1.5; }
.result-description { margin: 0 0 2rem; color: var(--guide-muted); line-height: 1.7; }
.result-tips { margin: 0; border-top: 1px solid var(--guide-ink); }
.result-tips > div { display: grid; grid-template-columns: 95px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(65,65,62,.3); }
.result-tips dt { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.result-tips dd { margin: 0; color: var(--guide-muted); font-size: .88rem; line-height: 1.55; }
.result-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }

.makeup-map { position: relative; display: grid; min-height: 570px; place-items: center; overflow: hidden; background: #deddd8; }
.makeup-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.7), transparent 42%); }
.map-face { position: relative; width: 260px; height: 350px; background: #d8b39d; box-shadow: inset -30px -20px 50px rgba(91,62,51,.12); }
.makeup-map--oval .map-face { border-radius: 48% 48% 46% 46% / 38% 38% 60% 60%; }
.makeup-map--round .map-face { width: 300px; height: 300px; border-radius: 50%; }
.makeup-map--square .map-face { width: 292px; height: 330px; border-radius: 28% 28% 17% 17%; }
.makeup-map--heart .map-face { width: 290px; border-radius: 45% 45% 52% 52% / 30% 30% 70% 70%; clip-path: polygon(5% 0,95% 0,100% 43%,78% 80%,50% 100%,22% 80%,0 43%); }
.makeup-map--oblong .map-face { width: 230px; height: 380px; border-radius: 43%; }
.makeup-map--diamond .map-face { width: 290px; clip-path: polygon(50% 0,100% 45%,76% 82%,50% 100%,24% 82%,0 45%); }
.map-blush,
.map-contour,
.map-highlight { position: absolute; display: block; }
.map-blush { z-index: 3; top: 53%; left: 9%; width: 82%; height: 17%; background: linear-gradient(90deg, transparent, rgba(180,105,87,.8) 15%, rgba(180,105,87,.65) 36%, transparent 48%, transparent 52%, rgba(180,105,87,.65) 64%, rgba(180,105,87,.8) 85%, transparent); filter: blur(8px); transform: rotate(-5deg); }
.map-contour { z-index: 2; inset: 5% 3% 8%; border: 18px solid rgba(91,69,59,.52); border-top-width: 24px; border-bottom-width: 12px; border-radius: inherit; filter: blur(10px); }
.map-highlight { z-index: 4; top: 18%; left: 46%; width: 8%; height: 56%; border-radius: 50%; background: rgba(255,243,200,.8); filter: blur(6px); }
.makeup-map--round .map-blush { top: 47%; transform: rotate(-14deg); }
.makeup-map--square .map-blush,
.makeup-map--heart .map-blush,
.makeup-map--diamond .map-blush { transform: rotate(0); }
.makeup-map--heart .map-contour { inset: 2% 4% 18%; border-width: 28px 21px 4px; }
.makeup-map--oblong .map-blush { top: 52%; left: 6%; width: 88%; height: 12%; transform: rotate(0); }
.makeup-map--oblong .map-contour { inset: 2% 10%; border-width: 26px 7px 25px; }
.makeup-map--diamond .map-contour { inset: 20% 1% 18%; border-width: 6px 26px; }
.map-legend { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .4rem; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.map-legend i { width: 8px; height: 8px; margin-left: .4rem; border-radius: 50%; background: var(--guide-clay); }
.map-legend i:nth-child(2) { background: var(--guide-contour); }
.map-legend i:nth-child(3) { background: var(--guide-highlight); border: 1px solid rgba(65,65,62,.25); }

@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 1020px) {
    .shape-hero { grid-template-columns: 1fr 1fr; }
    .shape-context__heading { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .signal-card { min-height: 470px; }
    .scan-editorial { grid-template-columns: 1fr 1fr; }
    .answer-grid--four { grid-template-columns: repeat(2, 1fr); }
    .quiz-result { grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: 3rem; }
}

@media (max-width: 768px) {
    .shape-hero { grid-template-columns: 1fr; min-height: 0; }
    .shape-hero__media { min-height: 0; aspect-ratio: 4 / 4.5; }
    .shape-hero__copy { min-height: 500px; padding: 3.5rem 1rem; }
    .shape-hero h1 { font-size: clamp(4rem, 20vw, 6rem); }
    .shape-context { width: calc(100% - 2rem); padding: 7rem 0; }
    .shape-context__heading { grid-template-columns: 1fr; gap: 1.25rem; }
    .shape-context__heading .eyebrow { grid-column: auto; }
    .shape-context__heading h2,
    .scan-editorial h2 { font-size: clamp(3.5rem, 16vw, 5.2rem); }
    .signal-grid { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; border: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .signal-grid::-webkit-scrollbar { display: none; }
    .signal-card { flex: 0 0 82vw; min-height: 480px; border: 1px solid rgba(65,65,62,.4); scroll-snap-align: start; }
    .between-feature { width: calc(100% - 2rem); align-items: flex-start; flex-direction: column; padding: 1.5rem 0; }
    .scan-editorial { grid-template-columns: 1fr; width: calc(100% - 2rem); min-height: 0; }
    .scan-editorial__media { aspect-ratio: 4 / 5; }
    .scan-editorial__copy { min-height: 480px; padding: 3rem 1.25rem; }
    .quiz-shell { padding: 1rem 1rem 3rem; }
    .quiz-topline { gap: .75rem; margin-bottom: 3rem; }
    .quiz-brand { font-size: 1.2rem; }
    .quiz-progress { gap: .35rem; font-size: .58rem; }
    .quiz-progress__track { width: 80px; }
    .quiz-close { font-size: .58rem; }
    .quiz-progress { grid-template-columns: 1fr; gap: .5rem; }
    .quiz-progress__track { width: 120px; }
    .quiz-step legend { grid-template-columns: 36px 1fr; }
    .quiz-step legend strong { font-size: clamp(3rem, 14vw, 4.5rem); }
    .quiz-hint { margin: 1.25rem 0 2rem 52px; }
    .answer-grid--four,
    .answer-grid--three { display: flex; gap: .75rem; margin-right: -1rem; overflow-x: auto; padding: 0 1rem .5rem 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .answer-grid::-webkit-scrollbar { display: none; }
    .answer-card { flex: 0 0 78vw; scroll-snap-align: start; }
    .answer-visual { height: 220px; }
    .quiz-result { grid-template-columns: 1fr; }
    .makeup-map { min-height: 470px; }
    .result-copy h2 { font-size: clamp(4.5rem, 22vw, 6.5rem); }
    .result-actions { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .quiz-step,
    .quiz-result { animation: none; }
    .answer-card,
    .quiz-progress__track i { transition: none; }
}